graasp · spaenleh · Feb 5, 2025 · Feb 4, 2025 · Feb 4, 2025 · Feb 4, 2025
diff --git a/.env b/.env
diff --git a/.github/workflows/deploy-site.yml b/.github/workflows/deploy-site.yml
@@ -36,6 +36,9 @@ jobs:
 
       - name: Build website
         run: yarn build
+        env:
+          UMAMI_WEBSITE_ID: ${{ secrets.UMAMI_WEBSITE_ID }}
+          BASE: /docs/
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3

diff --git a/.github/workflows/test-deploy.yml b/.github/workflows/test-deploy.yml
@@ -22,3 +22,5 @@ jobs:
         run: yarn install --frozen-lockfile
       - name: Test build website
         run: yarn build
+        env:
+          UMAMI_WEBSITE_ID: "mockID"
diff --git a/.gitignore b/.gitignore
@@ -26,3 +26,5 @@ yarn-error.log*
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+.env
diff --git a/README.md b/README.md
@@ -1,41 +1,46 @@
-# Website
+# Graasp Documentation and news
+
+This repo hosts the code for the Graasp documentation and news website.
 
 This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
 
 ### Installation
 
-```
-$ yarn
+```sh
+yarn
 ```
 
 ### Local Development
 
+Create a `.env` file to store your environment variables:
+
+```dotenv
+# required Id for website analytics, locally you can set this to whatever
+UMAMI_WEBSITE_ID=3f9eb1f6-5f5f-4a28-87a5-312829f1446d
+
+# Base url where you will host the website, locally you can change it to `/` so you can serve the static content using static web server
+# Or to mimic the production deployment you can omit it.
+BASE="/"
 ```
-$ yarn start
+
+```sh
+yarn start
 ```
 
 This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
 
+> [!WARNING]
+> If you want to locally develop one of the internationalisations you will have to start the app with the correct local:
+> `yarn start --locale fr` This is because the locales are different SPAs.
+
 ### Build
 
-```
-$ yarn build
+```sh
+yarn build
 ```
 
 This command generates static content into the `build` directory and can be served using any static contents hosting service.
 
 ### Deployment
 
-Using SSH:
-
-```
-$ USE_SSH=true yarn deploy
-```
-
-Not using SSH:
-
-```
-$ GIT_USER=<Your GitHub username> yarn deploy
-```
-
-If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
+This repo deploys the website using GitHub Actions to deploy to GitHub Pages.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -1,6 +1,7 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 import { themes } from "prism-react-renderer";
+import "dotenv/config";
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -67,6 +68,7 @@ const config = {
             return undefined;
           },
           blogTitle: "News and Updates from the Graasp Team",
+          blogSidebarCount: "ALL",
         },
         theme: {
           customCss: require.resolve("./src/css/custom.css"),
@@ -102,6 +104,11 @@ const config = {
             label: "User Resources",
           },
           { to: "/blog", label: "Blog", position: "left" },
+          {
+            href: "https://graasp.github.io/docs/blog/rss.xml",
+            position: "right",
+            label: "RSS",
+          },
           {
             href: "https://github.com/graasp/docs",
             position: "right",
@@ -196,18 +203,22 @@ const config = {
         },
       };
     },
+    [
+      "@dipakparmar/docusaurus-plugin-umami",
+      /** @type {import('@dipakparmar/docusaurus-plugin-umami').Options} */
+      ({
+        websiteID: process.env.UMAMI_WEBSITE_ID, // Required
+        analyticsDomain: "umami.graasp.org", // Required
+        // scriptName: "", // Optional
+        dataHostURL: "https://umami.graasp.org", // Optional
+        dataAutoTrack: true, // Optional
+        dataDoNotTrack: true, // Optional
+        dataCache: true, // Optional
+        dataDomains: "graasp.github.io", // comma separated list of domains, *Recommended*
+      }),
+    ],
   ],
-  headTags: [
-    {
-      tagName: "link",
-      attributes: {
-        rel: "preload",
-        href: "/fonts/Nunito.ttf",
-        as: "font",
-        crossorigin: "anonymous",
-      },
-    },
-  ],
+  headTags: [],
 };
 
 module.exports = config;
diff --git a/package.json b/package.json
@@ -15,12 +15,15 @@
     "typecheck": "tsc"
   },
   "dependencies": {
+    "@dipakparmar/docusaurus-plugin-umami": "^2.1.7",
     "@docusaurus/core": "^3.7.0",
     "@docusaurus/preset-classic": "^3.7.0",
     "@docusaurus/theme-mermaid": "^3.7.0",
+    "@fontsource-variable/nunito": "^5.1.1",
     "@mdx-js/react": "^3.1.0",
     "autoprefixer": "^10.4.20",
     "clsx": "^2.1.1",
+    "dotenv": "^16.4.7",
     "postcss": "^8.5.1",
     "prism-react-renderer": "^2.4.1",
     "react": "^18.3.1",

diff --git a/src/components/HomepageLinks/index.tsx b/src/components/HomepageLinks/index.tsx
@@ -4,20 +4,19 @@ import React from "react";
 
 type HomepageLinkItem = {
   title: string;
-  key: string;
   Svg: React.ComponentType<React.ComponentProps<"svg">>;
   description: string;
   to: string;
 };
 
-const HomePageLinkList: HomepageLinkItem[] = [
+const HomePageLinkList = [
   {
+    key: "news",
     title: translate({
       id: "pages.home.latestNews",
       message: "Latest News",
       description: "Title for the latest news section",
     }),
-    key: "news",
     description: translate({
       id: "pages.home.latestNews.description",
       message:
@@ -28,12 +27,12 @@ const HomePageLinkList: HomepageLinkItem[] = [
     to: "blog",
   },
   {
+    key: "docs",
     title: translate({
       id: "pages.home.developerDocs",
       message: "Developer Docs",
       description: "Title for the developer docs section",
     }),
-    key: "docs",
     description: translate({
       id: "pages.home.developerDocs.description",
       message:
@@ -44,12 +43,12 @@ const HomePageLinkList: HomepageLinkItem[] = [
     to: "developer/intro",
   },
   {
+    key: "users",
     title: translate({
       id: "pages.home.userResources",
       message: "User Resources",
       description: "Title for the user resources section",
     }),
-    key: "users",
     description: translate({
       id: "pages.home.userResources.description",
       message:
@@ -59,7 +58,7 @@ const HomePageLinkList: HomepageLinkItem[] = [
     Svg: require("@site/static/img/home-users.svg").default,
     to: "user/intro",
   },
-];
+] as const;
 
 const HomepageLink = ({ title, description, Svg, to }: HomepageLinkItem) => {
   return (
@@ -74,10 +73,7 @@ const HomepageLink = ({ title, description, Svg, to }: HomepageLinkItem) => {
           </div>
           <div className="my-2">
             <div className="flex gap-4 justify-center">
-              <Svg
-                className="flex-grow-1 flex-shrink-0 w-24 h-24 md:w-36 md:h-36"
-                role="img"
-              />
+              <Svg className="flex-grow-1 flex-shrink-0 w-24 h-24 md:w-36 md:h-36" />
               <p className="my-auto">{description}</p>
             </div>
           </div>
@@ -90,8 +86,8 @@ const HomepageLink = ({ title, description, Svg, to }: HomepageLinkItem) => {
 const HomepageLinks = () => {
   return (
     <div className="place-content-center p-4">
-      {HomePageLinkList.map((link) => (
-        <HomepageLink key={link.key} {...link} />
+      {HomePageLinkList.map(({ key, ...link }) => (
+        <HomepageLink key={key} {...link} />
       ))}
     </div>
   );

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -2,6 +2,19 @@
 @tailwind components;
 @tailwind utilities;
 
+/* nunito-latin-wght-normal */
+@font-face {
+  font-family: "Nunito";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 200 1000;
+  src: url(@fontsource-variable/nunito/files/nunito-latin-wght-normal.woff2)
+    format("woff2-variations");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
+    U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 /**
  * Any CSS included here will be global. The classic template
  * bundles Infima by default. Infima is a CSS framework designed to
@@ -19,7 +32,7 @@
   --ifm-color-primary-lightest: #9595e4;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-  --ifm-font-family-base: Nunito, "Nunito";
+  --ifm-font-family-base: Nunito, system-ui;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -56,12 +69,3 @@
   border-style: solid;
   border-color: theme("borderColor.DEFAULT", currentColor);
 }
-
-/* Register your custom font family and tell the browser where to find it. */
-@font-face {
-  font-family: "Nunito";
-  src: url("/fonts/Nunito.ttf") format("truetype");
-  font-weight: 100 900;
-  font-style: normal;
-  font-display: swap;
-}
diff --git a/static/fonts/Nunito.ttf b/static/fonts/Nunito.ttf