Initial commit

.github/workflows/deploy.yml

@@ -0,0 +1,20 @@
+on:
+  push:
+    branches:
+      - landingpage
+
+jobs:
+
+  deploy_on_gh_pages:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v2.1.3
+      with:
+        node-version: '16'
+    - uses: bahmutov/npm-install@v1
+    - run: yarn build
+    - run: git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${{github.repository}}.git
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    - run: npx -y -p gh-pages@3.1.0 gh-pages -d build --add -u "github-actions-bot <actions@github.com>"

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -0,0 +1,46 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `yarn eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

package.json

@@ -0,0 +1,53 @@
+{
+  "name": "postgsail_landingpage",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@mui/material": "^5.10.3",
+    "github-pages-plugin-for-type-route": "^0.1.0",
+    "gitlanding": "^0.23.15",
+    "i18nifty": "^1.3.6",
+    "onyxia-ui": "^0.46.20",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "ts-node": "^10.9.1",
+    "tss-react": "^4.0.0",
+    "type-route": "^0.7.2",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.13",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.7.4"
+  },
+  "homepage": "https://postgsail.github.io/"
+}

public/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
+
+    <title>Gitlanding App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

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 });

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+		"baseUrl": "src",
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}