Initial commit

src/App/App.tsx

@@ -0,0 +1,33 @@
+import { GlTemplate } from "gitlanding/GlTemplate";
+import { Header } from "./Header";
+import { Footer } from "./Footer";
+import { useRoute } from "../router";
+import { Home } from "../pages/Home";
+import { PageExample } from "../pages/PageExample";
+import { FourOhFour } from "../pages/FourOFour";
+import { ThemeProvider } from "../theme";
+
+export function App() {
+	const route = useRoute();
+	return (
+		<ThemeProvider>
+			<GlTemplate
+				header={<Header />}
+				headerOptions={{
+					"position": "sticky",
+					"isRetracted": "smart",
+				}}
+				footer={<Footer />}
+				body={
+					(()=>{
+						switch(route.name){
+							case "home": return <Home />;
+							case "pageExample": return <PageExample />;
+							default : return <FourOhFour />;
+						}
+					})()
+				}
+			/>
+		</ThemeProvider>
+	);
+}

src/App/Footer.tsx

@@ -0,0 +1,35 @@
+import { memo } from "react";
+import { GlFooter } from "gitlanding/GlFooter";
+import { routes } from "router";
+import { declareComponentKeys, useTranslation } from "i18n";
+
+
+export const Footer = memo(() => {
+	const { t } = useTranslation({ Footer })
+	return <GlFooter
+		bottomDivContent={t("license")}
+		email="email@email.com"
+		phoneNumber="+33545345676"
+		links={[
+			{
+				"label": t("link1label"),
+				...routes.pageExample().link
+			},
+			{
+				"label": t("link2label"),
+				"href": "https://example.com",
+			},
+			{
+				"label": t("link3label"),
+				"href": "https://example.com",
+			},
+		]}
+	/>
+})
+
+export const { i18n } = declareComponentKeys<
+	| "license"
+	| "link1label"
+	| "link2label"
+	| "link3label"
+>()({ Footer });

src/App/Header.tsx

@@ -0,0 +1,53 @@
+import { memo } from "react";
+import { GlHeader } from "gitlanding/GlHeader";
+import { routes } from "router";
+import { declareComponentKeys, useTranslation, useLang } from "i18n";
+import { createLanguageSelect } from "onyxia-ui/LanguageSelect";
+import type { Language } from "i18n";
+
+const { LanguageSelect } = createLanguageSelect<Language>({
+	"languagesPrettyPrint": {
+		"en": "English",
+		"fr": "Francais"
+	}
+})
+
+export const Header = memo(() => {
+	const { t } = useTranslation({ Header })
+	const { lang, setLang } = useLang();
+	return <GlHeader
+		title={<a {...routes.home().link}><h1>{t("headerTitle")}</h1></a>}
+		links={[
+			{
+				"label": t("link1label"),
+				...routes.pageExample().link
+			},
+			{
+				"label": t("link2label"),
+				"href": "https://example.com",
+			},
+			{
+				"label": t("link3label"),
+				"href": "https://example.com",
+			},
+		]}
+		enableDarkModeSwitch={true}
+		githubRepoUrl="https://github.com/torvalds/linux"
+		githubButtonSize="large"
+		customItemEnd={{
+			"item": <LanguageSelect
+				language={lang}
+				onLanguageChange={setLang}
+				variant="big"
+			/>
+		}}
+
+	/>
+});
+
+export const { i18n } = declareComponentKeys<
+	| "headerTitle"
+	| "link1label"
+	| "link2label"
+	| "link3label"
+>()({ Header });

src/App/index.ts

@@ -0,0 +1 @@
+export * from "./App";

src/i18n.tsx

@@ -0,0 +1,202 @@
+import { createI18nApi, declareComponentKeys } from "i18nifty";
+export { declareComponentKeys };
+
+//List the languages you with to support
+export const languages = ["en", "fr"] as const;
+
+//If the user's browser language doesn't match any 
+//of the languages above specify the language to fallback to:  
+export const fallbackLanguage = "en";
+
+export type Language = typeof languages[number];
+
+export type LocalizedString = Parameters<typeof resolveLocalizedString>[0];
+
+export const { 
+	useTranslation, 
+	resolveLocalizedString, 
+	useLang, 
+	$lang,
+	useResolveLocalizedString,
+	/** For use outside of React */
+	getTranslation 
+} = createI18nApi<
+    | typeof import ("pages/Home").i18n
+    | typeof import ("pages/PageExample").i18n
+    | typeof import ("App/Header").i18n
+		| typeof import ("App/Footer").i18n
+		| typeof import ("pages/FourOFour").i18n
+>()(
+    { languages, fallbackLanguage },
+    {
+        "en": {
+					"FourOhFour": {
+						"not found": "Page not found"
+					},
+					"Header": {
+						"headerTitle": "Title",
+						"link1label": "Example page",
+						"link2label": "Link 2",
+						"link3label": "Link 3"
+					},
+					"Footer": {
+						"license": "License M.I.T",
+						"link1label": "Example page",
+						"link2label": "Link 2",
+						"link3label": "Link 3"
+					},
+					"Home": {
+						"heroTitle": "Hero title",
+						"heroSubtitle": "Hero subtitle",
+						"articleTitle": "Article title",
+						"articleBody": `Do am he horrible distance marriage 
+							so although. Afraid assure square so happen mr 
+							an before. His many same been well can high that. 
+							Forfeited did law eagerness allowance improving 
+							assurance bed. Had saw put seven joy short first. 
+							Pronounce so enjoyment my resembled in forfeited 
+							sportsman. Which vexed did began son 
+							abode short may. Interested astonished he at 
+							cultivated or me. Nor brought one invited she 
+							produce her.`,
+						"articleButtonLabel": "Article button label",
+						"card1Title": "Card title 1",
+						"card2Title": "Card title 2",
+						"card3Title": "Card title 3",
+						"card1Paragraph": `Dissuade ecstatic and properly saw 
+							entirely sir why laughter endeavor. 
+							In on my jointure horrible margaret suitable 
+							he followed speedily.`,
+						"card2Paragraph": `Dissuade ecstatic and properly saw 
+							entirely sir why laughter endeavor. 
+							In on my jointure horrible margaret suitable 
+							he followed speedily.`,
+						"card3Paragraph": `Dissuade ecstatic and properly saw 
+							entirely sir why laughter endeavor. 
+							In on my jointure horrible margaret suitable 
+							he followed speedily.`,
+					},
+					"PageExample": {
+						"articleTitle": "Article title",
+						"articleBody": `Am finished rejoiced drawings so he 
+							elegance. Set lose dear upon had two its what seen. 
+							Held she sir how know what such whom. 
+							Esteem put uneasy set piqued son depend her others. 
+							Two dear held mrs feet view her old fine. Bore can 
+							led than how has rank. Discovery any extensive has 
+							commanded direction. Short at front which blind as. 
+							Ye as procuring unwilling principle by.`,
+						"articleButtonLabel": "Article button label",
+						"projectCardTitle1": "Project card title 1",
+						"projectCardTitle2": "Project card title 2",
+						"projectCardTitle3": "Project card title 3",
+						"projectCardTitle4": "Project card title 4",
+						"projectCardSubtitle1": "Project card subtitle 1",
+						"projectCardSubtitle2": "Project card subtitle 2",
+						"projectCardSubtitle3": "Project card subtitle 3",
+						"projectCardSubtitle4": "Project card subtitle 4",
+						"checkListHeading": "Check list heading",
+						"checkListElementTitle1": "Check list element title 1",
+						"checkListElementTitle2": "Check list element title 2",
+						"checkListElementTitle3": "Check list element title 3",
+						"checkListElementTitle4": "Check list element title 4",
+						"checkListElementTitle5": "Check list element title 5",
+						"checkListElementTitle6": "Check list element title 6",
+						"checkListElementDescription1": "Am finished rejoiced drawings so he elegance. Set lose dear upon had two its what seen.",
+						"checkListElementDescription2": "Am finished rejoiced drawings so he elegance. Set lose dear upon had two its what seen.",
+						"checkListElementDescription3": "Am finished rejoiced drawings so he elegance. Set lose dear upon had two its what seen.",
+						"checkListElementDescription4": "Am finished rejoiced drawings so he elegance. Set lose dear upon had two its what seen.",
+						"checkListElementDescription5": "Am finished rejoiced drawings so he elegance. Set lose dear upon had two its what seen.",
+						"checkListElementDescription6": "Am finished rejoiced drawings so he elegance. Set lose dear upon had two its what seen."
+					}
+        },
+				/* spell-checker: disable */
+				"fr": {
+					"FourOhFour": {
+						"not found": "Page non trouvée"
+					},
+					"Header": {
+						"headerTitle": "Titre",
+						"link1label": "Exemple de page",
+						"link2label": "Lien 2",
+						"link3label": "Lien 3"
+					},
+					"Footer": {
+						"license": "License M.I.T",
+						"link1label": "Exemple de page",
+						"link2label": "Lien 2",
+						"link3label": "Lien 3"
+					},
+					"Home": {
+						"heroTitle": "Titre du Hero",
+						"heroSubtitle": "Sous titre du Hero",
+						"articleTitle": "Titre de l'article",
+						"articleBody": `Fille pieds qui ici breve coups 
+							soeur. Va on on succedent deroulent de capitaine 
+							rapportes esplanade. Accoudees inassouvi sacrifice 
+							dit mes ils surveille tangibles ici dentelees. 
+							Atroce esprit bazars en boules je sa. 
+							Car but approchait artilleurs eclatantes 
+							defilaient moi nez paraissent claquaient. 
+							Est crepitent car seulement adjudants eux 
+							apprendre signalant ere incapable. 
+							Prenaient distribua ii en eperonnes enfantent 
+							entourage cotillons.`,
+						"articleButtonLabel": "Label du bouton",
+						"card1Title": "Titre de la carte 1",
+						"card2Title": "Titre de la carte 2",
+						"card3Title": "Titre de la carte 3",
+						"card1Paragraph": `Linge selon court ans toi 
+							sabre heros. Connut toi mirent art ton trouve
+							enleve hideur eux balaye. Cornette or
+							coussins recupera allaient viennent heureuse as.`,
+						"card2Paragraph": `Linge selon court ans toi 
+							sabre heros. Connut toi mirent art ton trouve
+							enleve hideur eux balaye. Cornette or 
+							coussins recupera allaient viennent heureuse as.`,
+						"card3Paragraph": `Linge selon court ans toi 
+							sabre heros. Connut toi mirent art ton trouve
+							enleve hideur eux balaye. Cornette or 
+							coussins recupera allaient viennent heureuse as.`,
+					},
+					"PageExample": {
+						"articleTitle": "Titre de l'Article",
+						"articleBody": `Contes bouton aimons fosses depart 
+							ne dedans ca de. Le inassouvi craignait 
+							preferait en sa petillent et. Ils souffrance 
+							assurances eclaireurs consentiez lui age 
+							cherissait manoeuvres net. Tout en chez sais 
+							cent cuir avez le va. Feu maladie tot facteur 
+							douleur ils empeche pas attendu. Etale feu moi 
+							ete voici utile autre ils bride. 
+							Cheveux sachant content luisant eux sur 
+							attendu retient. Venait cercle rubans ma qu 
+							palais oh eperon.`,
+						"articleButtonLabel": "Label du bouton",
+						"projectCardTitle1": "Titre de la carte de projet 1",
+						"projectCardTitle2": "Titre de la carte de projet 2",
+						"projectCardTitle3": "Titre de la carte de projet 3",
+						"projectCardTitle4": "Titre de la carte de projet 4",
+						"projectCardSubtitle1": "Sous titre de la carte de projet 1",
+						"projectCardSubtitle2": "Sous titre de la carte de projet 2",
+						"projectCardSubtitle3": "Sous titre de la carte de projet 3",
+						"projectCardSubtitle4": "Sous titre de la carte de projet 4",
+						"checkListHeading": "Titre de la check list",
+						"checkListElementTitle1": "Titre d'element de check list 1",
+						"checkListElementTitle2": "Titre d'element de check list 2",
+						"checkListElementTitle3": "Titre d'element de check list 3",
+						"checkListElementTitle4": "Titre d'element de check list 4",
+						"checkListElementTitle5": "Titre d'element de check list 5",
+						"checkListElementTitle6": "Titre d'element de check list 6",
+						"checkListElementDescription1": "Il remarquait et en survivants eclaireurs legerement qu. Animaux nos humains fer fut ramassa encourt.",
+						"checkListElementDescription2": "Il remarquait et en survivants eclaireurs legerement qu. Animaux nos humains fer fut ramassa encourt.",
+						"checkListElementDescription3": "Il remarquait et en survivants eclaireurs legerement qu. Animaux nos humains fer fut ramassa encourt.",
+						"checkListElementDescription4": "Il remarquait et en survivants eclaireurs legerement qu. Animaux nos humains fer fut ramassa encourt.",
+						"checkListElementDescription5": "Il remarquait et en survivants eclaireurs legerement qu. Animaux nos humains fer fut ramassa encourt.",
+						"checkListElementDescription6": "Il remarquait et en survivants eclaireurs legerement qu. Animaux nos humains fer fut ramassa encourt.",
+					}
+
+				}
+				/* spell-checker: enabled */
+    }
+);

src/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { createRoot } from "react-dom/client";
+import { RouteProvider } from "./router";
+import { App } from "./App";
+
+
+createRoot(document.getElementById("root")!).render(
+    <React.StrictMode>
+        <RouteProvider>
+            <App />
+        </RouteProvider>
+    </React.StrictMode>,
+);

src/pages/FourOFour.tsx

@@ -0,0 +1,28 @@
+import { memo } from "react";
+import { makeStyles, Text } from "theme";
+import { declareComponentKeys } from "i18nifty";
+import { useTranslation } from "i18n";
+
+export const FourOhFour = memo(() => {
+    const { classes } = useStyles();
+    const { t } = useTranslation({ FourOhFour });
+
+    return (
+        <div className={classes.root}>
+            <Text typo="page heading">{t("not found")} 😥</Text>
+        </div>
+    );
+});
+
+export const { i18n } = declareComponentKeys<"not found">()({
+    FourOhFour,
+});
+
+const useStyles = makeStyles({ "name": { FourOhFour } })(theme => ({
+    "root": {
+        "display": "flex",
+        "alignItems": "center",
+        "justifyContent": "center",
+        "backgroundColor": theme.colors.useCases.surfaces.background,
+    },
+}));

src/pages/Home.tsx

@@ -0,0 +1,96 @@
+import { memo } from "react";
+import { GlHero } from "gitlanding/GlHero/GlHero";
+import { GlArticle } from "gitlanding/GlArticle";
+import { GlCards } from "gitlanding/GlCards";
+import { GlLogoCard } from "gitlanding/GlCards/GlLogoCard";
+import { declareComponentKeys, useTranslation } from "i18n";
+import heroPng from "assets/img/hero.png";
+import articlePng from "assets/img/home-article.png";
+import balloonIcon from "assets/icons/balloon.png";
+import drawioIcon from "assets/icons/drawio.png";
+import githubIcon from "assets/icons/github.png";
+import plusIcon from "assets/icons/plus.png";
+import rocketIcon from "assets/icons/rocket-chat.png";
+import tchapIcon from "assets/icons/tchap.png";
+
+export const Home = memo(() => {
+	const { t } = useTranslation({ Home });
+	return (
+		<>
+			<GlHero
+				title={t("heroTitle")}
+				subTitle={t("heroSubtitle")}
+				illustration={{
+					"type": "image",
+					"src": heroPng,
+					"hasShadow": false
+				}}
+				hasLinkToSectionBellow={true}
+			/>
+
+			<GlArticle
+				title={t("articleTitle")}
+				body={t("articleBody")}
+				buttonLabel={t("articleButtonLabel")}
+				buttonLink={{
+					"href": "https://example.com",
+				}}
+				illustration={{
+					"type": "image",
+					"src": articlePng,
+					"hasShadow": false
+				}}
+				hasAnimation={true}
+				illustrationPosition="left"
+			/>
+
+			<GlCards>
+				<GlLogoCard
+					title={t("card1Title")}
+					paragraph={t("card1Paragraph")}
+					buttonLabel="Button Label"
+					iconUrls={[
+						tchapIcon,
+						githubIcon
+
+					]}
+				/>
+				<GlLogoCard
+					title={t("card2Title")}
+					paragraph={t("card2Paragraph")}
+					buttonLabel="Button Label"
+					iconUrls={[
+						rocketIcon
+					]}
+				/>
+
+				<GlLogoCard
+					title={t("card3Title")}
+					paragraph={t("card3Paragraph")}
+					buttonLabel="Button Label"
+					iconUrls={[
+						balloonIcon,
+						drawioIcon,
+						rocketIcon,
+						plusIcon
+					]}
+					overlapIcons={true}
+				/>
+			</GlCards>
+		</>
+	);
+});
+
+export const { i18n } = declareComponentKeys<
+	| "heroTitle"
+	| "heroSubtitle"
+	| "articleTitle"
+	| "articleBody"
+	| "articleButtonLabel"
+	| "card1Title"
+	| "card2Title"
+	| "card3Title"
+	| "card1Paragraph"
+	| "card2Paragraph"
+	| "card3Paragraph"
+>()({ Home });

src/pages/PageExample.tsx

@@ -0,0 +1,123 @@
+import { memo } from "react";
+import { GlArticle } from "gitlanding/GlArticle";
+import { GlProjectCard } from "gitlanding/GlCards/GlProjectCard";
+import { GlCheckList } from "gitlanding/GlCheckList";
+import { GlCards } from "gitlanding/GlCards";
+import { GlSectionDivider } from "gitlanding/GlSectionDivider";
+import { declareComponentKeys, useTranslation } from "i18n";
+import articlePng from "assets/img/article-page-example.png"
+import pokemonPng from "assets/img/pokemon.png";
+import dataPng from "assets/img/data-visualisation.png";
+import kubernetesPng from "assets/img/kubernetes.png";
+import webinairePng from "assets/img/webinaire.png";
+
+
+export const PageExample = memo(() => {
+
+	const { t } = useTranslation({ PageExample })
+
+	return <>
+
+		<GlArticle
+			title={t("articleTitle")}
+			body={t("articleBody")}
+			buttonLabel={t("articleButtonLabel")}
+			buttonLink={{
+				"href": "https://example.com",
+			}}
+			illustration={{
+				"type": "image",
+				"src": articlePng,
+				"hasShadow": false
+			}}
+			hasAnimation={true}
+		/>
+
+		<GlCards>
+			<GlProjectCard
+				title={t("projectCardTitle1")}
+				subtitle={t("projectCardSubtitle1")}
+				projectImageUrl={pokemonPng}
+			/>
+			<GlProjectCard
+				title={t("projectCardTitle2")}
+				subtitle={t("projectCardSubtitle2")}
+				projectImageUrl={dataPng}
+			/>
+			<GlProjectCard
+				title={t("projectCardTitle3")}
+				subtitle={t("projectCardSubtitle3")}
+				projectImageUrl={kubernetesPng}
+			/>
+			<GlProjectCard
+				title={t("projectCardTitle4")}
+				subtitle={t("projectCardSubtitle4")}
+				projectImageUrl={webinairePng}
+			/>
+		</GlCards>
+
+		<GlSectionDivider />
+
+		<GlCheckList
+			heading={t("checkListHeading")}
+			hasAnimation={true}
+			elements={
+
+				[
+					{
+						"title": t(`checkListElementTitle1`),
+						"description": t("checkListElementDescription1")
+					},
+					{
+						"title": t(`checkListElementTitle2`),
+						"description": t("checkListElementDescription2")
+					},
+					{
+						"title": t(`checkListElementTitle3`),
+						"description": t("checkListElementDescription3")
+					},
+					{
+						"title": t(`checkListElementTitle4`),
+						"description": t("checkListElementDescription4")
+					},
+					{
+						"title": t(`checkListElementTitle5`),
+						"description": t("checkListElementDescription5")
+					},
+					{
+						"title": t(`checkListElementTitle6`),
+						"description": t("checkListElementDescription6")
+					},
+				]
+			}
+		/>
+
+	</>
+});
+
+export const { i18n } = declareComponentKeys<
+	| "articleTitle"
+	| "articleBody"
+	| "articleButtonLabel"
+	| "projectCardTitle1"
+	| "projectCardTitle2"
+	| "projectCardTitle3"
+	| "projectCardTitle4"
+	| "projectCardSubtitle1"
+	| "projectCardSubtitle2"
+	| "projectCardSubtitle3"
+	| "projectCardSubtitle4"
+	| "checkListHeading"
+	| "checkListElementTitle1"
+	| "checkListElementTitle2"
+	| "checkListElementTitle3"
+	| "checkListElementTitle4"
+	| "checkListElementTitle5"
+	| "checkListElementTitle6"
+	| "checkListElementDescription1"
+	| "checkListElementDescription2"
+	| "checkListElementDescription3"
+	| "checkListElementDescription4"
+	| "checkListElementDescription5"
+	| "checkListElementDescription6"
+>()({ PageExample })

src/react-app-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react-scripts" />
+
+declare module "*.mp4" {
+	const _default: string;
+	export default _default;
+}

src/router.ts

@@ -0,0 +1,17 @@
+
+import {createRouter, defineRoute} from "type-route";
+import {makeThisModuleAnExecutableRouteLister} from "github-pages-plugin-for-type-route";
+
+
+export const routeDefs = {
+	"home": defineRoute("/"),
+	"pageExample": defineRoute("/page-example"),
+};
+
+makeThisModuleAnExecutableRouteLister(routeDefs);
+
+export const {RouteProvider, routes, useRoute} = createRouter(
+	routeDefs
+);
+
+	

src/theme.ts

@@ -0,0 +1,14 @@
+import { createMakeStyles } from "tss-react";
+import { createThemeProvider, defaultGetTypographyDesc } from "onyxia-ui";
+import { createText } from "onyxia-ui/Text";
+
+
+export const { useTheme, ThemeProvider } = createThemeProvider({
+	"getTypographyDesc": params => ({
+		...defaultGetTypographyDesc(params),
+		"fontFamily": '"Open Sans", sans-serif'
+	})
+});
+
+export const { makeStyles } = createMakeStyles({ useTheme });
+export const { Text } = createText({ useTheme });