# Getting started! Play with the demo project ```bash git clone https://github.com/garronej/gitlanding-demo cd gitlanding-demo yarn yarn dev ``` Going futher: Explore the existing landigpages made with GitLanding for idea and customization example. You can click "edit this website in the footer to see the code" * * * * * # Favicon and Meta Tags ### For changing the favicon (the little logo in your browser tab) 1. Navigate to [realfavicongenerator.net](https://realfavicongenerator.net/) and upload your image. 2. In the options set a [custom path](https://user-images.githubusercontent.com/6702424/137597391-1d0d5b26-0f5b-4d8d-8d29-46d874c4f4e0.png): `%PUBLIC_URL%/favicon` 3. insert [the code generated for you](https://user-images.githubusercontent.com/6702424/137597436-4f85641e-16a3-4cb9-8c4f-5fd4baf8effc.png) in the `` of your `public/index.html` file 4. Create the `public/favicon` directory and extract the zip from there. ### Adding Meta Tags 1. Create the public/preview.(png | jpg) image from [this template](https://user-images.githubusercontent.com/6702424/80216211-00ef5280-863e-11ea-81de-59f3a3d4b8e4.png). 2. Consult [this commit ](https://github.com/thieryw/crispy-octo-bassoon/commit/02c52f0477e0348339ac6d4d2b434a6bde2711cc)to view the code to add in the `` of your `public/index.html` file. {% hint style="info" %} You can use [metatags.io](https://metatags.io/) to generate your metatags but you must change the default url they provide to `%PUBLIC_URL%`. {% endhint %} ![Here is an example when I send my example project link via Whatsapp](/files/fUbvpfgnsIv71MTMk2Yh) # Custom domain name Let's say you own the domain name: `yourdomain.com`. * If you want poeple to hit your landing page when they query `https://yourdomain.com` or `https://www.yourdomain.com` ,follow the instruction of the `Apex domain` tab. * if you want people to hit your landing page when they query `https://asubdomain.yourdomain.com,` follow the instructions of the `Subdomain` tab. {% tabs %} {% tab title="Apex domain" %} Create theses DNS records (don't forget to replace `yourUsername` by your GitHub username and `yourdomain.com` by your domain): ``` www.yourdomain.com. CNAME yourUsername.github.io yourdomain.com. ALIAS yourUsername.github.io ``` If, and only if, your DNS service provider do not support `ALIAS` records: ```diff www.yourdomain.com. CNAME yourUsername.github.io -yourdomain.com. ALIAS yourUsername.github.com +yourdomain.com. A 185.199.108.153 +yourdomain.com. A 185.199.109.153 +yourdomain.com. A 185.199.110.153 +yourdomain.com. A 185.199.111.153 ``` Once your DNS records are available, update your `package.json` `homepage` field: ```diff -"homepage": "https://yourUsername.github.io/yourRepoName", +"homepage": "https://www.yourdomain.com", ``` [This line](https://github.com/thieryw/gitlanding/blob/8628d6bc47ba368b08903725e99e40c4eb640203/public/deploy.yaml#L17) of your CI workflow will make sure GitHub Pages understands the change. {% endtab %} {% tab title="Subdomain" %} Create theses DNS records (don't forget to replace `yourUsername` by your GitHub username and `yourdomain.com` by your domain): ``` asubdomain.yourdomain.com. CNAME yourUsername.github.io ``` Once your DNS records are available, update your `package.json` `homepage` field: ```diff -"homepage": "https://yourUsername.github.io/yourRepoName", +"homepage": "https://asubdomain.yourdomain.com", ``` [This line](https://github.com/thieryw/gitlanding/blob/8628d6bc47ba368b08903725e99e40c4eb640203/public/deploy.yaml#L17) of your CI workflow will make sure GitHub Pages understands the change. {% endtab %} {% endtabs %} Commit and push your changes and your are good to go. {% hint style="success" %} You do not need to go to the GitHub Pages config and fill in your custom domain, it will be read from the CNAME file. {% endhint %} # Getting started! ### Overview Let's start with an overview of what we are trying to achieve. Let's check how [the landingpage of GitLangind itself](https://www.gitlanding.dev/) is setup. The code of the website lies on a [dedicated branch](https://github.com/thieryw/gitlanding/tree/4e5a33ed312227efcf7d26332ea87c19331f1eed) of the [GitLanding repo](https://github.com/thieryw/gitlanding/tree/2105d99c84b76f6c6b0647484171c5e09a61dbf5). The files that are actualy served by [GitHub Page](https://pages.github.com/) lies on the [`gh_pages`](https://github.com/thieryw/gitlanding/tree/b11d5dab0df08a84b7acc72a25d0c3fa7c78cc6b) branch and is put there using [this GitHub Action](https://github.com/thieryw/gitlanding/blob/eb85ca1fea7ce0ce21837d1e0ba7a6bb1a784b19/.github/workflows/deploy.yml#L21). ### Step by step guide {% tabs %} {% tab title="MacOS" %} Open a new terminal (for example [iTerm2](https://iterm2.com) ) ```bash # Only if you don't have yarn already # (you need https://brew.sh to run the next command) brew install yarn # git clone https://github.com// _landingpage cd _landingpage git checkout --orphan landingpage && git rm -rf . yarn create react-app . --template gitlanding git add -A git commit -m "Initial commit" git push --set-upstream origin landingpage ``` {% endtab %} {% tab title="Windows" %} If you don't have it already, [install Node.js](https://nodejs.org/en/). Open a Powershell terminal ```bash git clone https://github.com// _landingpage cd _landingpage git checkout --orphan landingpage git rm -rf . yarn create react-app . --template gitlanding git add -A git commit -m "Initial commit" git push --set-upstream origin landingpage ``` {% endtab %} {% tab title="Ubuntu/Debian" %} If you don't have [the yarn package manager](https://classic.yarnpkg.com/lang/en/) installed allready: ```bash # Using Ubuntu sudo su curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - # Using Debian su root curl -fsSL https://deb.nodesource.com/setup_16.x | bash - #### apt-get install -y nodejs npm install -g yarn ``` Open a new terminal ```bash git clone https://github.com// _landingpage cd _landingpage git checkout --orphan landingpage && git rm -rf . # If you get: 'yarn: error: no such option: --template' running the following command. It means you have 'yarn' from cmdtest, we need yarn the package manager. yarn create react-app . --template gitlanding git add -A git commit -m "Initial commit" git push --set-upstream origin landingpage ``` {% endtab %} {% endtabs %} Next you'll have to enable GitHub page in your repo. Navigate to your repository on Github and go to `Setting > Pages`, then set the `gh-pages` branch as the branch from witch the site is to be built. {% hint style="info" %} You may need to wait a few minutes for the initial gh-pages branche to be created by your GitHub Action workflow `.github/workflows/deploy.yaml` {% endhint %} ![https://github.com/USERNAME/REPO/settings/pages](/files/-Ml0vxj7s4Q6riv2xQrN) If all went as expected you page should be up and running ![](/files/SWG2MR3VAaX1VN4NqPVw) You're now ready to customise your app. # Customising pages Create your landing page with Gitlanding Now, if the previous steps went smoothly, you can start modifying and of adding to the template code as befits your needs ! 🚀 If you wish to import files sush as webm or mp4 files in your project you must declare them as modules. Copy and paste the following example in the `src/react-app-env.d.ts` file. ``` //Replace with the extension name of your choice ``` ```typescript declare module "*.webm" { const _default: string; export default _default; } ``` {% hint style="success" %} Host your assets by placing them [in a dedicated directory in your `src` folder](https://github.com/thieryw/test-gl-template/tree/b076e2e75d80da9dc832e1f2519636f6ebde450f/src/assets/img). An then [importing them as URLs directly in your code](https://github.com/thieryw/test-gl-template/blob/b076e2e75d80da9dc832e1f2519636f6ebde450f/src/pages/Home.tsx#L8-L14). {% endhint %} In this [example](https://github.com/thieryw/test-gl-template/commit/cf090220fecd352ba4f0eb083e385cafb167dac5) I create a new article in the `Home` page that has an mp4 video along side it. I also added a section devider to seperate it from the article above. You will notice that I do not hard code the text directly inside the component, but I use a translation function that enables me to switch between English and French. See [i18nifty](https://www.i18nifty.dev/) documentation to learn about the translation engine setup. The components I used are: * [`GlArticle`](https://www.gitlanding.dev/storybook/?path=/story/sandbox-main-glarticle--vue-with-image) * [`GlSectionDevider`](https://www.gitlanding.dev/storybook/?path=/story/sandbox-main-glsectiondivider--vue) {% hint style="info" %} You can preview all the components in [Storybook](https://www.gitlanding.dev/storybook) {% endhint %} # Adding more pages This project uses [type-route](https://typehero.org/type-route) and [github-pages-plugin-for-type-route](https://github.com/garronej/github-pages-plugin-for-type-route). To add an other page to your project: 1. [Edit the `src/router.ts` file](https://github.com/thieryw/test-gl-template/commit/824aac40cfb9229421f3bc79b5d301fc52cf1714). 2. [Create a page](https://github.com/thieryw/test-gl-template/commit/418f4a198d045a652722cf616ab292ff21072fd3). 3. [Update header and footer](https://github.com/thieryw/test-gl-template/commit/b28ba314f653e0b07e3a97b7bbbe75bf478d2520). # Custom fonts You can change the default font to one of your choosing by hosting them your self or by importing them directly via google fonts. Link them in your `public/index.html` file and create a new theme provider with Onyxia-ui, then set the `ThemeProvider` property in the `GlTemplate` component to the new theme provider. {% hint style="success" %} [This commit is full example of how its done.](https://github.com/thieryw/crispy-octo-bassoon/commit/978544412d187aa1593715e0cc4b12678ba15ac2) {% endhint %} ### Adding multiple fonts Change one or more of the font variants in the theme provider by setting the `fontFamily` in the `variants` property to your chosen font. {% hint style="success" %} [This commit is an example where I change the `page heading` variant to `Playfair Display` and the `subtitle` variant to `Open Sans.`](https://github.com/thieryw/crispy-octo-bassoon/commit/7a2003d285d8f3a6b2d5391474af5cc691f03910) {% endhint %} It is allsow possible to create your own custom variants. {% hint style="success" %} [In this commit I add a new title variant that uses Cinzel Decorative as font.](https://github.com/thieryw/crispy-octo-bassoon/commit/4d5866f7f7d61feab1e801551400765f7aa1276e) {% endhint %} # Theme customization Changing the look and feel of your landingpage. A proper documentation is coming but in the meantime you can checkout how the website [sspcloud.fr](https://www.sspcloud.fr/) have extended GitLanding by: * [Defining it's custom style](https://github.com/InseeFrLab/www.sspcloud.fr/blob/main/src/app/theme.ts) * To add internationalisation we recommend that you check out [i18nifty](https://docs.i18nifty.dev/). Follow the [link](https://github.com/InseeFrLab/www.sspcloud.fr) for an example project. You can also checkout [`onyxai-ui`](https://github.com/garronej/onyxia-ui), the design toolkit onto which Gitlanding is built. Note also that you can import any [mui v5](https://mui.com/) component in your GitLanding project. They will fit in nicely and blend in with your theme. # Restyling components Each Gitlanding component has a `className` and `classes` prop that enable you to overwrite the current styles. The prefered way to do this is with [TSS React](https://evt-garronej.gitbook.io/tss/). ```typescript import { css } from "tss-react/@emotion/css"; ``` [Overwritting header style example](https://github.com/thieryw/crispy-octo-bassoon/commit/e754cc9c2158be996da3ff4262b65a9b82d3546e). [Overwritting footer style example](https://github.com/thieryw/crispy-octo-bassoon/commit/7be79eb8bffff34e5f70a69dd42d48ee631a48af). # Favicon and Meta Tags ### For changing the favicon (the little logo in your browser tab) 1. Navigate to [realfavicongenerator.net](https://realfavicongenerator.net/) and upload your image. 2. In the options set a [custom path](https://user-images.githubusercontent.com/6702424/137597391-1d0d5b26-0f5b-4d8d-8d29-46d874c4f4e0.png): `%PUBLIC_URL%/favicon` 3. insert [the code generated for you](https://user-images.githubusercontent.com/6702424/137597436-4f85641e-16a3-4cb9-8c4f-5fd4baf8effc.png) in the `` of your `public/index.html` file 4. Create the `public/favicon` directory and extract the zip from there. ### Adding Meta Tags 1. Create the public/preview.(png | jpg) image from [this template](https://user-images.githubusercontent.com/6702424/80216211-00ef5280-863e-11ea-81de-59f3a3d4b8e4.png). 2. Consult [this commit ](https://github.com/thieryw/crispy-octo-bassoon/commit/02c52f0477e0348339ac6d4d2b434a6bde2711cc)to view the code to add in the `` of your `public/index.html` file. {% hint style="info" %} You can use [metatags.io](https://metatags.io/) to generate your metatags but you must change the default url they provide to `%PUBLIC_URL%`. {% endhint %} ![Here is an example when I send my example project link via Whatsapp](/files/fUbvpfgnsIv71MTMk2Yh) # Custom domain name Let's say you own the domain name: `yourdomain.com`. * If you want poeple to hit your landing page when they query `https://yourdomain.com` or `https://www.yourdomain.com` ,follow the instruction of the `Apex domain` tab. * if you want people to hit your landing page when they query `https://asubdomain.yourdomain.com,` follow the instructions of the `Subdomain` tab. {% tabs %} {% tab title="Apex domain" %} Create theses DNS records (don't forget to replace `yourUsername` by your GitHub username and `yourdomain.com` by your domain): ``` www.yourdomain.com. CNAME yourUsername.github.io yourdomain.com. ALIAS yourUsername.github.io ``` If, and only if, your DNS service provider do not support `ALIAS` records: ```diff www.yourdomain.com. CNAME yourUsername.github.io -yourdomain.com. ALIAS yourUsername.github.com +yourdomain.com. A 185.199.108.153 +yourdomain.com. A 185.199.109.153 +yourdomain.com. A 185.199.110.153 +yourdomain.com. A 185.199.111.153 ``` Once your DNS records are available, update your `package.json` `homepage` field: ```diff -"homepage": "https://yourUsername.github.io/yourRepoName", +"homepage": "https://www.yourdomain.com", ``` [This line](https://github.com/thieryw/gitlanding/blob/8628d6bc47ba368b08903725e99e40c4eb640203/public/deploy.yaml#L17) of your CI workflow will make sure GitHub Pages understands the change. {% endtab %} {% tab title="Subdomain" %} Create theses DNS records (don't forget to replace `yourUsername` by your GitHub username and `yourdomain.com` by your domain): ``` asubdomain.yourdomain.com. CNAME yourUsername.github.io ``` Once your DNS records are available, update your `package.json` `homepage` field: ```diff -"homepage": "https://yourUsername.github.io/yourRepoName", +"homepage": "https://asubdomain.yourdomain.com", ``` [This line](https://github.com/thieryw/gitlanding/blob/8628d6bc47ba368b08903725e99e40c4eb640203/public/deploy.yaml#L17) of your CI workflow will make sure GitHub Pages understands the change. {% endtab %} {% endtabs %} Commit and push your changes and your are good to go. {% hint style="success" %} You do not need to go to the GitHub Pages config and fill in your custom domain, it will be read from the CNAME file. {% endhint %} # Getting started! ### Overview Let's start with an overview of what we are trying to achieve. Let's check how [the landingpage of GitLangind itself](https://www.gitlanding.dev/) is setup. The code of the website lies on a [dedicated branch](https://github.com/thieryw/gitlanding/tree/4e5a33ed312227efcf7d26332ea87c19331f1eed) of the [GitLanding repo](https://github.com/thieryw/gitlanding/tree/2105d99c84b76f6c6b0647484171c5e09a61dbf5). The files that are actualy served by [GitHub Page](https://pages.github.com/) lies on the [`gh_page`](https://github.com/thieryw/gitlanding/tree/b11d5dab0df08a84b7acc72a25d0c3fa7c78cc6b) branch and is put there using [this GitHub Action](https://github.com/thieryw/gitlanding/blob/eb85ca1fea7ce0ce21837d1e0ba7a6bb1a784b19/.github/workflows/deploy.yml#L21). {% embed url="" %} ### Step by step guide {% tabs %} {% tab title="MacOS" %} Open a new terminal (for example [iTerm2](https://iterm2.com) ) ```bash # Only if you don't have yarn already # (you need https://brew.sh to run the next command) brew install yarn # git clone https://github.com// _landingpage cd _landingpage git checkout --orphan landingpage && git rm -rf . yarn create react-app . --scripts-version 4.0.3 --template typescript mkdir -p .github/workflows wget gitlanding.dev/deploy.yaml -O .github/workflows/deploy.yaml # Don't get frightened by the next command. # It will just update the "homepage" field with: # https://.github.io/ # in the package.json. # Feel free to do that manually. node -e '(()=>{require("fs").writeFileSync("package.json",JSON.stringify({...require("./package.json"),"homepage": (() => {const [r, u] = `${require("child_process").execSync("git remote get-url origin")}`.replace(/\n/g, "").replace(".git", "").replace(/:/g, "/").replace(/\r?\n$/, "").split("/").reverse();return `https://${u}.github.io/${r}`;})()}, null, 2));})()' git add -A git commit -m "Initial commit" git push --set-upstream origin landingpage ``` {% endtab %} {% tab title="Windows" %} If you don't have it already, [install Node.js](https://nodejs.org/en/). Open a Powershell terminal ```bash git clone https://github.com// _landingpage cd _landingpage git checkout --orphan landingpage git rm -rf . yarn create react-app . --scripts-version 4.0.3 --template typescript mkdir .github\workflows curl gitlanding.dev/deploy.yaml -O .github/workflows/deploy.yaml # Don't get frightened by the next command. # It will just update the "homepage" field with: # https://.github.io/ # in the package.json. # Feel free to do that manually. node -e "(()=>{require('fs').writeFileSync('package.json',JSON.stringify({...require('./package.json'),'homepage': (() => {const [r, u] = ('' + require('child_process').execSync('git remote get-url origin')).replace(/\n/g, '').replace('.git', '').replace(/:/g, '/').replace(/\r?\n$/, '').split('/').reverse();return 'https://' + u + '.github.io/' + r;})()}, null, 2));})()" git add -A git commit -m "Initial commit" git push --set-upstream origin landingpage ``` {% endtab %} {% tab title="Ubuntu/Debian" %} If you don't have [the yarn package manager](https://classic.yarnpkg.com/lang/en/) installed allready: ```bash # Using Ubuntu sudo su curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - # Using Debian su root curl -fsSL https://deb.nodesource.com/setup_16.x | bash - #### apt-get install -y nodejs npm install -g yarn ``` Open a new terminal ```bash git clone https://github.com// _landingpage cd _landingpage git checkout --orphan landingpage && git rm -rf . # If you get: 'yarn: error: no such option: --template' running the following command. It means you have 'yarn' from cmdtest, we need yarn the package manager. yarn create react-app . --scripts-version 4.0.3 --template typescript mkdir -p .github/workflows wget gitlanding.dev/deploy.yaml -O .github/workflows/deploy.yaml # Don't get frightened by the next command. # It will just update the "homepage" field with: # https://.github.io/ # in the package.json. # Feel free to do that manually. node -e '(()=>{require("fs").writeFileSync("package.json",JSON.stringify({...require("./package.json"),"homepage": (() => {const [r, u] = `${require("child_process").execSync("git remote get-url origin")}`.replace(/\n/g, "").replace(".git", "").replace(/:/g, "/").replace(/\r?\n$/, "").split("/").reverse();return `https://${u}.github.io/${r}`;})()}, null, 2));})()' git add -A git commit -m "Initial commit" git push --set-upstream origin landingpage ``` {% endtab %} {% endtabs %} Next you'll have to enable GitHub page in your repo. Navigate to your repository on Github and go to `Setting > Pages`, then set the `gh-pages` branch as the branch from witch the site is to be built. {% hint style="info" %} You may need to wait a few minutes for the initial gh-pages branche to be created by your GitHub Action workflow `.github/workflows/deploy.yaml` {% endhint %} ![https://github.com/USERNAME/REPO/settings/pages](/files/-Ml0vxj7s4Q6riv2xQrN) If all went as expected you page should be up and running ![](/files/-Ml0whqF82Dvv-kDBdjB) You're now ready to start customizing this page with `Gitlanding`. # Filling up your page Create your landing page with Gitlanding Now you are going yo actually create yout landing page! 🚀 First install GitLanding and it's peer dependencies. ``` yarn add gitlanding @mui/material @emotion/react @emotion/styled onyxia-ui ``` If you wish to import files sush as `webm` or `mp4` files in you project you must declare theme as modules. Copy and paste the following code in `src/react-app-env.d.ts`. ```typescript //Replace with the extension name of your choice declare module "*.mp4" { const _default: string; export default _default; } ``` Then copy and paste the the following skeletton in `src/index.tsx`, run `yarn start` and start hacking around! ```typescript import { render } from "react-dom"; import { GlTemplate } from "gitlanding/GlTemplate"; import { GlHeader } from "gitlanding/GlHeader"; import { GlHero } from "gitlanding/GlHero"; import { GlArticle } from "gitlanding/GlArticle"; import { GlFooter } from "gitlanding/GlFooter"; import { GlSectionDivider } from "gitlanding/GlSectionDivider"; import { GlCards } from "gitlanding/GlCards"; import { GlLogoCard } from "gitlanding/GlCards/GlLogoCard"; import { GlProjectCard } from "gitlanding/GlCards/GlProjectCard"; import { GlCheckList } from "gitlanding/GlCheckList"; import { GlSlider } from "gitlanding/GlSlider"; import { GlReviewSlide } from "gitlanding/GlReviewSlide"; function App() { return ( } headerOptions={{ "position": "sticky", "isRetracted": "smart", }} footer={ } > { <> } <> , , , ]} /> ); } render(, document.getElementById("root")); ``` {% hint style="success" %} Host your assets by placing them [in a dedicated directory in your `src` folder](https://github.com/thieryw/gitlanding/tree/006bc0507cabe327e4b0d7df5613877caa146142/src/assets/img). An then [importing them as URLs directly in your code](https://github.com/thieryw/gitlanding/blob/006bc0507cabe327e4b0d7df5613877caa146142/src/index.tsx#L10). {% endhint %} {% hint style="info" %} You can preview the components in [Storybook](https://www.gitlanding.dev/storybook) {% endhint %} {% hint style="info" %} If you have bootstraped your page using `create-react-app` there is a[ lot of things](https://github.com/thieryw/crispy-octo-bassoon/commit/431679969c454772605d2d16ad69290559a43cba) you can delete. {% endhint %} #### # Custom domain name Let's say you own the domain name: `yourdomain.com`. * If you want poeple to hit your landing page when they query `https://yourdomain.com` or `https://www.yourdomain.com` ,follow the instruction of the `Apex domain` tab. * if you want people to hit your landing page when they query `https://asubdomain.yourdomain.com,` follow the instructions of the `Subdomain` tab. {% tabs %} {% tab title="Apex domain" %} Create theses DNS records (don't forget to replace `yourUsername` by your GitHub username and `yourdomain.com` by your domain): ``` www.yourdomain.com. CNAME yourUsername.github.io yourdomain.com. ALIAS yourUsername.github.io ``` If, and only if, your DNS service provider do not support `ALIAS` records: ```diff www.yourdomain.com. CNAME yourUsername.github.io -yourdomain.com. ALIAS yourUsername.github.com +yourdomain.com. A 185.199.108.153 +yourdomain.com. A 185.199.109.153 +yourdomain.com. A 185.199.110.153 +yourdomain.com. A 185.199.111.153 ``` Once your DNS records are available, update your `package.json` `homepage` field: ```diff -"homepage": "https://yourUsername.github.io/yourRepoName", +"homepage": "https://www.yourdomain.com", ``` [This line](https://github.com/thieryw/gitlanding/blob/8628d6bc47ba368b08903725e99e40c4eb640203/public/deploy.yaml#L17) of your CI workflow will make sure GitHub Pages understands the change. {% endtab %} {% tab title="Subdomain" %} Create theses DNS records (don't forget to replace `yourUsername` by your GitHub username and `yourdomain.com` by your domain): ``` asubdomain.yourdomain.com. CNAME yourUsername.github.io ``` Once your DNS records are available, update your `package.json` `homepage` field: ```diff -"homepage": "https://yourUsername.github.io/yourRepoName", +"homepage": "https://asubdomain.yourdomain.com", ``` [This line](https://github.com/thieryw/gitlanding/blob/8628d6bc47ba368b08903725e99e40c4eb640203/public/deploy.yaml#L17) of your CI workflow will make sure GitHub Pages understands the change. {% endtab %} {% endtabs %} Commit and push your changes and your are good to go. {% hint style="success" %} You do not need to go to the GitHub Pages config and fill in your custom domain, it will be read from the CNAME file. {% endhint %} # Favicon and Meta Tags ### For changing the favicon (the little logo in your browser tab) 1. Navigate to [realfavicongenerator.net](https://realfavicongenerator.net/) and upload your image. 2. In the options set a [custom path](https://user-images.githubusercontent.com/6702424/137597391-1d0d5b26-0f5b-4d8d-8d29-46d874c4f4e0.png): `%PUBLIC_URL%/favicon` 3. insert [the code generated for you](https://user-images.githubusercontent.com/6702424/137597436-4f85641e-16a3-4cb9-8c4f-5fd4baf8effc.png) in the `` of your `public/index.html` file 4. Create the `public/favicon` directory and extract the zip from there. ### Adding Meta Tags 1. Create the public/preview.(png | jpg) image from [this template](https://user-images.githubusercontent.com/6702424/80216211-00ef5280-863e-11ea-81de-59f3a3d4b8e4.png). 2. Consult [this commit ](https://github.com/thieryw/crispy-octo-bassoon/commit/02c52f0477e0348339ac6d4d2b434a6bde2711cc)to view the code to add in the `` of your `public/index.html` file. {% hint style="info" %} You can use [metatags.io](https://metatags.io/) to generate your metatags but you must change the default url they provide to `%PUBLIC_URL%`. {% endhint %} ![Here is an example when I send my example project link via Whatsapp](/files/fUbvpfgnsIv71MTMk2Yh) # Custom fonts You can change the default font to one of your choosing by hosting them your self or by importing them directly via google fonts. Link them in your `public/index.html` file and create a new theme provider with Onyxia-ui, then set the `ThemeProvider` property in the `GlTemplate` component to the new theme provider. {% hint style="success" %} [This commit is full example of how its done.](https://github.com/thieryw/crispy-octo-bassoon/commit/978544412d187aa1593715e0cc4b12678ba15ac2) {% endhint %} ### Adding multiple fonts Change one or more of the font variants in the theme provider by setting the `fontFamily` in the `variants` property to your chosen font. {% hint style="success" %} [This commit is an example where I change the `page heading` variant to `Playfair Display` and the `subtitle` variant to `Open Sans.`](https://github.com/thieryw/crispy-octo-bassoon/commit/7a2003d285d8f3a6b2d5391474af5cc691f03910) {% endhint %} It is allsow possible to create your own custom variants. {% hint style="success" %} [In this commit I add a new title variant that uses Cinzel Decorative as font.](https://github.com/thieryw/crispy-octo-bassoon/commit/4d5866f7f7d61feab1e801551400765f7aa1276e) {% endhint %} # Adding more pages If you wint your website to be composed by more than just one page we recommend using [type-route](https://typehero.org/type-route) and [github-pages-plugin-for-type-route](https://github.com/garronej/github-pages-plugin-for-type-route). Let's see how to set it up. ```bash yarn add type-route yarn add github-pages-plugin-for-type-route ``` 1. [Create a `src/router.ts` file](https://github.com/thieryw/crispy-octo-bassoon/commit/8317ed7fad3d5b8c466d735f5cca86a717b18736). 2. [Create test pages](https://github.com/thieryw/crispy-octo-bassoon/commit/686a0eb701d3fd2075815509cc6a0a8c9319b14e). 3. [Update header and footer](https://github.com/thieryw/crispy-octo-bassoon/commit/2ef142209c932f0bbef68b271ee682908ab0e2af). 4. [Update package.json](https://github.com/thieryw/crispy-octo-bassoon/commit/7b24342b4ea2185f0d665a6f756e5870cc1c5ab9). # Theme customization Changing the look and feel of your landingpage. A proper documentation is coming but in the meantime you can checkout how the website [sspcloud.fr](https://www.sspcloud.fr/) have extended GitLanding by: * [Defining it's custom style](https://github.com/InseeFrLab/www.sspcloud.fr/blob/main/src/app/theme.ts) * To add internationalisation we recommend that you check out [i18nifty](https://docs.i18nifty.dev/). Follow the [link](https://github.com/InseeFrLab/www.sspcloud.fr) for an example project. You can also checkout [`onyxai-ui`](https://github.com/garronej/onyxia-ui), the design toolkit onto which Gitlanding is built. Note also that you can import any [mui v5](https://mui.com/) component in your GitLanding project. They will fit in nicely and blend in with your theme. # Restyling components Each Gitlanding component has a `className` and `classes` prop that enable you to overwrite the current styles. The prefered way to do this is with [TSS React](https://evt-garronej.gitbook.io/tss/). ```typescript import { css } from "tss-react/@emotion/css"; ``` [Overwritting header style example](https://github.com/thieryw/crispy-octo-bassoon/commit/e754cc9c2158be996da3ff4262b65a9b82d3546e). [Overwritting footer style example](https://github.com/thieryw/crispy-octo-bassoon/commit/7be79eb8bffff34e5f70a69dd42d48ee631a48af).