website redesign (#7454)

Author: rstaib

.github/workflows/publish-website.yml

@@ -50,6 +50,12 @@ jobs:
         run: yarn --immutable --network-timeout 100000
         working-directory: website
 
+      - name: Unzip Icons
+        run: |
+          sudo apt-get install -y unzip
+          unzip -P ${{ secrets.ICON_PASSWORD }} src/images/icons.zip -d src/images/
+        working-directory: website
+
       - name: Build Website
         run: yarn build --prefix-paths
         working-directory: website

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 ChilliCream Inc. (Michael & Rafael Staib)
+Copyright (c) 2024 ChilliCream Inc. (Michael & Rafael Staib)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

website/.gitignore

@@ -66,3 +66,6 @@ public
 
 # Mac files
 .DS_Store
+
+# to prevent upload any font awesome icons to github
+src/images/icons/

website/.yarn/cache/caniuse-lite-npm-1.0.30001435-7cebb35f0a-ec88b9c37f.zip

@@ -1,6 +1,6 @@
 // https://github.com/FormidableLabs/prism-react-renderer/issues/53#issuecomment-546653848
 import Prism from "prismjs";
-import "prismjs/themes/prism-tomorrow.css";
+import "./src/style/prism-theme.css";
 
 (typeof global !== "undefined" ? global : window).Prism = Prism;
 require("prismjs/components/prism-csharp");

website/.yarn/cache/caniuse-lite-npm-1.0.30001660-6b60bb7533-8b2c5de2f5.zip

@@ -11,12 +11,13 @@ module.exports = {
     repositoryUrl: `https://github.com/ChilliCream/graphql-platform`,
     tools: {
       bcp: `https://eat.bananacakepop.com`,
+      blog: `/blog`,
       github: `https://github.com/ChilliCream/graphql-platform`,
       linkedIn: `https://www.linkedin.com/company/chillicream`,
       shop: `https://store.chillicream.com`,
       slack: `https://slack.chillicream.com/`,
-      twitter: `https://twitter.com/Chilli_Cream`,
       youtube: `https://www.youtube.com/c/ChilliCream`,
+      x: `https://x.com/Chilli_Cream`,
     },
   },
   plugins: [
@@ -109,15 +110,15 @@ module.exports = {
       options: {
         rule: {
           include: /images/,
-          exclude: /images\/(artwork|brands|companies|logo)\/.*\.svg$/,
+          exclude: /images\/(artwork|companies|icons|logo)\/.*\.svg$/,
         },
       },
     },
     {
       resolve: require.resolve(`./plugins/gatsby-plugin-svg-sprite`),
       options: {
         rule: {
-          test: /images\/(artwork|brands|companies|logo)\/.*\.svg$/,
+          test: /images\/(artwork|companies|icons|logo)\/.*\.svg$/,
         },
       },
     },
@@ -140,7 +141,7 @@ module.exports = {
       resolve: "gatsby-plugin-web-font-loader",
       options: {
         google: {
-          families: ["Roboto"],
+          families: ["Radio Canada:400,500,600,700"],
         },
       },
     },
@@ -150,8 +151,8 @@ module.exports = {
         name: `ChilliCream GraphQL`,
         short_name: `ChilliCream`,
         start_url: `/`,
-        background_color: `#3b4f74`,
-        theme_color: `#3b4f74`,
+        background_color: `#0a0721`,
+        theme_color: `#0a0721`,
         display: `standalone`,
         icon: `src/images/chillicream-favicon.png`,
       },

website/.yarn/cache/github-buttons-npm-2.28.0-2b94261eaa-edf829c54b.zip

@@ -31,6 +31,9 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
           fields {
             slug
           }
+          frontmatter {
+            tags
+          }
         }
         tags: group(field: frontmatter___tags) {
           fieldValue
@@ -68,9 +71,9 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     return;
   }
 
-  createBasicPages(createPage, result.data.basic);
+  createDefaultArticles(createPage, result.data.basic);
   createBlogArticles(createPage, result.data.blog);
-  createDocPages(createPage, result.data.docs);
+  createDocArticles(createPage, result.data.docs);
 
   const products = result.data.productsConfig.products;
   const latestHcVersion = products?.find(
@@ -164,8 +167,8 @@ exports.onCreateNode = async ({ node, actions, getNode, reporter }) => {
   });
 };
 
-function createBasicPages(createPage, data) {
-  const component = path.resolve(`src/templates/basic-page-template.tsx`);
+function createDefaultArticles(createPage, data) {
+  const component = path.resolve(`src/templates/default-article-template.tsx`);
 
   data.pages.forEach((page) => {
     createPage({
@@ -180,48 +183,59 @@ function createBasicPages(createPage, data) {
 
 function createBlogArticles(createPage, data) {
   // Create Single Pages
-  let component = path.resolve(`src/templates/blog-article-template.tsx`);
-
   data.posts.forEach((post) => {
     createPage({
       path: post.fields.slug,
-      component,
+      component: path.resolve(`src/templates/blog-article-template.tsx`),
       context: {},
     });
   });
 
+  const postsPerPage = 21;
+
   // Create List Pages
-  const postsPerPage = 20;
-  const numPages = Math.ceil(data.posts.length / postsPerPage);
+  const numPagesAllPosts = Math.ceil(data.posts.length / postsPerPage);
 
-  Array.from({ length: numPages }).forEach((_, i) => {
+  Array.from({ length: numPagesAllPosts }).forEach((_, i) => {
     createPage({
       path: i === 0 ? `/blog` : `/blog/${i + 1}`,
       component: path.resolve(`src/templates/blog-articles-template.tsx`),
       context: {
         limit: postsPerPage,
         skip: i * postsPerPage,
-        numPages,
+        numPages: numPagesAllPosts,
         currentPage: i + 1,
       },
     });
   });
 
   // Create Tag Pages
-  component = path.resolve(`src/templates/blog-tag-template.tsx`);
-  data.tags.forEach((tag) => {
-    createPage({
-      path: `/blog/tags/${tag.fieldValue}`,
-      component,
-      context: {
-        tag: tag.fieldValue,
-      },
+  data.tags.forEach(({ fieldValue: tag }) => {
+    const numPagesPostsByTags = Math.ceil(
+      data.posts.filter(({ frontmatter: { tags } }) => tags.includes(tag))
+        .length / postsPerPage
+    );
+
+    Array.from({ length: numPagesPostsByTags }).forEach((_, i) => {
+      createPage({
+        path: i === 0 ? `/blog/tags/${tag}` : `/blog/tags/${tag}/${i + 1}`,
+        component: path.resolve(
+          `src/templates/blog-articles-by-tag-template.tsx`
+        ),
+        context: {
+          tag,
+          limit: postsPerPage,
+          skip: i * postsPerPage,
+          numPages: numPagesPostsByTags,
+          currentPage: i + 1,
+        },
+      });
     });
   });
 }
 
-function createDocPages(createPage, data) {
-  const component = path.resolve(`src/templates/doc-page-template.tsx`);
+function createDocArticles(createPage, data) {
+  const component = path.resolve(`src/templates/doc-article-template.tsx`);
 
   // Create Single Pages
   data.pages.forEach((page) => {