footer, links, home header section

Author: achaabni

settings/locales/ar.json

@@ -0,0 +1,80 @@
+{
+    "tenet": "تينيت",
+    "testimonialTitle": "ما تقوله الشخصيات عن",
+    "theme": "سمة",
+    "languages": "اللغات",
+    "learnMore": "المزيد",
+    "arrows": {
+        "left": "إلى اليسار",
+        "right": "إلى اليمين"
+    },
+    "day": " يوم {{dayNumber}}",
+    "rating": {
+        "aria": "تقدير {{currentRating}} من {{maximum}}"
+    },
+    "cookies": {
+        "title": "إدارة ملفات تعريف الارتباط",
+        "text": "في تينيت يتدفق الوقت للأمام والخلف - تمامًا مثل ملفات تعريف الارتباط الخاصة بنا. نحن نستخدم ملفات تعريف الارتباط لتحسين تجربتك أثناء تصفح موقعنا، مما يساعدك على التحرك بسلاسة عبر الزمن (أو على الأقل من خلال المحتوى الخاص بنا). سواء كنت تتصفح الصفحات للأمام أو تقلبها للخلف، كن مطمئنًا إلى أنه يتم التعامل مع بياناتك بعناية. يمكنك قبول ملفات تعريف الارتباط أو إدارتها في أي وقت - تمامًا كما يتلاعب بطل الرواية بالوقت، فإنك تتحكم في كيفية تعاملنا مع تفضيلاتك. على استعداد للمضي قدما؟ أو ربما… إلى الوراء؟",
+        "button": {
+            "confirm": "تأكيد حفظ البيانات",
+            "cancel": "إلغاء"
+        }
+    },
+    "section": {
+        "characters": {
+            "team": "الشخصيات الرئيسية",
+            "inNormalFlow": "الشخصيات في تدفق طبيعي",
+            "inInvertedFlow": "الشخصيات أثناء تدفق معكوس",
+            "inNormalFlowShort": "تدفق طبيعي",
+            "inInvertedFlowShort": "تدفق معكوس",
+            "some": "بعض الشخصيات الفعالة"
+        },
+        "skills": {
+            "title": "المهارات",
+            "weregood": "نحن جيدون",
+            "why": "وهنا السبب"
+        },
+        "video": {
+            "title": "موسيقى تصويرية"
+        },
+        "gallery": {
+            "title": "معرض الصور"
+        },
+        "relatedScenes": {
+            "title": "المشاهد",
+            "inNormalFlow": "مشاهد التدفق الطبيعي",
+            "inInvertedFlow": "مشاهد التدفق المقلوب"
+        },
+        "footer": {
+            "copyrightMessage": "للحاضر (وفي بعض الجداول الزمنية في الماضي ) Gladtek كل الحقوق محفوظة"
+        }
+    },
+    "countries": {
+        "UA": "أوكرانيا",
+        "NO": "النرويج",
+        "IN": "الهند",
+        "GB": "المملكة المتحدة",
+        "IT": "إيطاليا",
+        "EE": "إستونيا",
+        "VN": "فيتنام",
+        "RU": "روسيا"
+    },
+    "contact": {
+        "title": "اتصل بنا",
+        "why": {
+            "title": "لماذا تريد الانضمام إلي؟",
+            "answer": "إجابتك"
+        },
+        "name": "مرحباً 👋! اسمي...",
+        "name-placeholder": "اسمك",
+        "represent": "وأنا أمثل...",
+        "team-protagonist": "البطل",
+        "team-sator": "ساتور",
+        "ask": "أود أن أسأل عن...",
+        "ask-placeholder": "مهما كانت رغبات قلبك :)",
+        "submit": "أرسل"
+    },
+    "scene": {
+        "backToLocation": "عد إلى المكان الأصلي للمشهد"
+    }
+}

src/components/Footer/FooterColumnLinks.default.server.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { AddContentButtons, getChildNodes, jahiaComponent, Render } from '@jahia/javascript-modules-library';
+import { LinkGroup } from '../shared/Links/LinkGroup';
+interface FooterColumnLinksProps {
+    "jcr:title": string;
+}
+jahiaComponent(
+    {
+        nodeType: 'tenet:footerColumnLinks',
+        displayName: 'Footer Column Menu Links',
+        componentType: 'view',
+        name: 'default',
+        properties: {
+            'cache.mainResource': 'true'
+        }
+    },
+    ({ "jcr:title": title }: FooterColumnLinksProps, { currentNode }) => {
+        const allChildren = getChildNodes(currentNode, -1);
+
+        return (
+            <>
+                <LinkGroup header={title}>
+                    {allChildren && allChildren.map(child =>
+                        <li key={child.getIdentifier()}><Render path={child.getPath()} view="tenet" /></li>
+                    )}
+                </LinkGroup>
+                <AddContentButtons />
+
+            </>
+        );
+    });

src/components/Footer/FooterMenu.default.server.tsx

@@ -0,0 +1,82 @@
+
+interface FooterMenuProps {
+    logo: JCRNodeWrapper;
+    resume: string;
+    startYear: number;
+}
+import { useTranslation } from 'react-i18next';
+import i18next from 'i18next';
+import type { JCRNodeWrapper } from 'org.jahia.services.content';
+import { AddContentButtons, getChildNodes, jahiaComponent, Render, server } from "@jahia/javascript-modules-library";
+
+
+jahiaComponent(
+    {
+        nodeType: 'tenet:footerMenu',
+        displayName: 'Footer Menu',
+        componentType: 'view',
+        properties: {
+            'cache.mainResource': 'true'
+        }
+    },
+    ({ logo, resume, startYear }: FooterMenuProps, { currentNode, renderContext }) => {
+        const dir = i18next.dir(i18next.language);
+        const { t } = useTranslation();
+
+        const site = renderContext.getSite();
+
+        const allChildren = getChildNodes(currentNode, -1);
+        const allChildrenFiltered = allChildren.filter(child => child.isNodeType('tenet:footerColumnLinks'));
+
+
+        const socialMediaHolderPath = currentNode.getPath() + '/socialMediaHolder';
+        let isLogoPresent = false;
+        if (logo) {
+            server.render.addCacheDependency({ node: logo }, renderContext);
+            isLogoPresent = true;
+        }
+
+        return (
+            <div className="relative mt-16 bg-deep-purple-400">
+                <svg
+                    className="absolute top-0 w-full h-6 -mt-5 sm:-mt-10 sm:h-16 text-deep-purple-accent-400"
+                    preserveAspectRatio="none"
+                    viewBox="0 0 1440 54"
+                >
+                    <path
+                        fill="currentColor"
+                        d="M0 22L120 16.7C240 11 480 1.00001 720 0.700012C960 1.00001 1200 11 1320 16.7L1440 22V54H1320C1200 54 960 54 720 54C480 54 240 54 120 54H0V22Z"
+                    />
+                </svg>
+                <div className="px-4 pt-12 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
+                    <div className="grid gap-16 row-gap-10 mb-8 lg:grid-cols-6">
+                        <div className="md:max-w-md lg:col-span-2">
+
+                            {isLogoPresent ?
+                                <img width={200}
+                                    height={50}
+                                    src={logo.getUrl()}
+                                    alt="logo"
+                                    className="max-w-full"
+                                /> : <h4 className="text-dark dark:text-white">{site.getTitle()}</h4>}
+                            <div className="mt-4 lg:max-w-sm">
+                                <div dangerouslySetInnerHTML={{ __html: resume }} className="text-sm text-deep-purple-50" />
+                            </div>
+                        </div>
+                        <div className="grid grid-cols-2 gap-5 row-gap-8 lg:col-span-4 md:grid-cols-4">
+                            {allChildrenFiltered && allChildrenFiltered.map(child =>
+                                <Render key={child.getIdentifier()} path={child.getPath()} />
+                            )}
+                            {allChildren.length < 2 &&
+                                <AddContentButtons />}
+                        </div>
+                    </div>
+                    <div className="flex flex-col justify-between pt-5 pb-10 border-t border-deep-purple-accent-200 sm:flex-row">
+                        <p className="text-sm text-gray-100">
+                            © {startYear} - {t('section.footer.copyrightMessage')}
+                        </p>
+                    </div>
+                </div>
+            </div>
+        );
+    });

src/components/Header/Section/HeaderSectionDefault.server.tsx

@@ -0,0 +1,42 @@
+import { AddContentButtons, getChildNodes, jahiaComponent, Render, useUrlBuilder } from "@jahia/javascript-modules-library";
+import type { JCRNodeWrapper } from "org.jahia.services.content";
+
+interface HeaderSectionProps {
+    "jcr:title": string;
+    description: string;
+    image: JCRNodeWrapper;
+}
+jahiaComponent(
+    {
+        nodeType: 'tenet:headerSection',
+        name: 'default',
+        componentType: 'view'
+    }, ({ 'jcr:title': title, description, image }: HeaderSectionProps, { currentNode, currentResource, renderContext }) => {
+        const allChildren = getChildNodes(currentNode, -1);
+
+
+
+        return (
+            <section className="bg-white dark:bg-gray-900">
+                <div className="grid max-w-screen-xl px-4 py-8 mx-auto lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12">
+                    <div className="mr-auto place-self-center lg:col-span-7">
+                        <h1 className="max-w-2xl mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl xl:text-6xl dark:text-white">
+                            {title}
+                        </h1>
+
+                        <div dangerouslySetInnerHTML={{ __html: description }} className="max-w-2xl mb-6 font-light lg:mb-8 md:text-lg lg:text-xl dark:text-white" />
+                        <div className="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
+                            {allChildren && allChildren.map(child => (
+                                <Render key={child.getIdentifier()} path={child.getPath()} view="tenet" />
+                            ))}
+
+                            {allChildren.length < 3 && <AddContentButtons />}
+                        </div>
+                    </div>
+                    <div className="hidden lg:mt-0 lg:col-span-5 lg:flex">
+                        <img loading="lazy" src={image.getUrl()} alt="mockup" />
+                    </div>
+                </div>
+            </section>
+        );
+    });

src/components/Link/ExternalLink.server.tsx

@@ -0,0 +1,41 @@
+import { jahiaComponent } from '@jahia/javascript-modules-library';
+import SimpleLink from '../shared/Links/SimpleLink';
+
+
+interface ExternalLinkProps {
+    children?: React.ReactNode;
+    className?: string;
+    hasNoLabel?: boolean;
+    ariaLabel?: string;
+    'jcr:title': string;
+    'j:url': string;
+    'j:target'?: string;
+    linkBackgroundColor: string;
+}
+
+jahiaComponent(
+    {
+        nodeType: 'jnt:externalLink',
+        displayName: 'External Link',
+        name: 'tenet',
+        componentType: 'view',
+        properties: {
+            'cache.mainResource': 'true'
+        }
+    }, ({ children, className, hasNoLabel, ariaLabel, 'j:url': url, 'j:target': target, "jcr:title": title, linkBackgroundColor }: ExternalLinkProps, { currentNode }) => {
+
+        const hasItsOwnStyle = currentNode.isNodeType('tenetmix:styleForLink');
+
+        const cssOverride = 'px-6 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-[#' + linkBackgroundColor + '] rounded-lg hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80';
+        let calculatedClassName = hasItsOwnStyle ? cssOverride : 'transition-colors duration-300 text-deep-purple-50 hover:text-teal-accent-400';
+        if (className) {
+            calculatedClassName = className;
+        }
+
+        return (
+            <>
+                {hasNoLabel && <SimpleLink ariaLabel={ariaLabel} link={url} target={target} className={calculatedClassName}>{children}</SimpleLink>}
+                {!hasNoLabel && <SimpleLink ariaLabel={ariaLabel} link={url} label={title} target={target} className={calculatedClassName}>{children}</SimpleLink>}
+            </>
+        );
+    });

src/components/Link/NodeLink.server.tsx

@@ -0,0 +1,39 @@
+import { jahiaComponent } from '@jahia/javascript-modules-library';
+import SimpleLink from '../shared/Links/SimpleLink';
+
+import type { JCRNodeWrapper } from 'org.jahia.services.content';
+
+interface NodeLinkProps {
+    children: React.ReactNode;
+    className?: string;
+    hasNoLabel?: boolean;
+    ariaLabel?: string;
+    'jcr:title': string;
+    'j:url': string;
+    'j:target'?: string;
+    'j:node': JCRNodeWrapper;
+    linkBackgroundColor: string;
+}
+jahiaComponent(
+    {
+        nodeType: 'jnt:nodeLink',
+        displayName: 'Node Link',
+        name: 'tenet',
+        componentType: 'view',
+        properties: {
+            'cache.mainResource': 'true'
+        }
+    }
+    , ({ 'j:node': node, 'j:target': target, "jcr:title": title, linkBackgroundColor }: NodeLinkProps, { currentNode }) => {
+
+
+        const url = node !== undefined ? node.getUrl() : '';
+
+        const hasItsOwnStyle = currentNode.isNodeType('tenetmix:styleForLink');
+        const cssOverride = 'px-6 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-[#' + linkBackgroundColor + '] rounded-lg hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80';
+        const calculatedClassName = hasItsOwnStyle ? cssOverride : 'transition-colors duration-300 text-deep-purple-50 hover:text-teal-accent-400';
+
+        return (
+            <SimpleLink link={url} label={title} target={target} className={calculatedClassName} />
+        );
+    });

src/components/Link/SocialMediaHolder.server.tsx

@@ -0,0 +1,28 @@
+import { AddContentButtons, getChildNodes, jahiaComponent, Render } from '@jahia/javascript-modules-library';
+
+
+jahiaComponent(
+    {
+        nodeType: 'tenet:socialMediaHolder',
+        displayName: 'Social Media Holder',
+        name: 'default',
+        componentType: 'view',
+        properties: {
+            'cache.mainResource': 'true'
+        }
+    }
+    , ({ }, { currentNode }) => {
+
+        const allChildren = getChildNodes(currentNode, -1);
+
+        return (
+            <>
+                <div className="flex items-center mt-4 space-x-4 rtl:space-x-reverse sm:mt-0">
+                    {allChildren.map(child =>
+                        <Render key={child.getIdentifier()} path={child.getPath()} />
+                    )}
+                </div>
+                <AddContentButtons />
+            </>
+        );
+    });