cilium / cilium.io

Gatsby.js Framework

The website is built using Gatsby.js, a React-based static site generator.

Why Gatsby.js?

Gatsby.js leverages the power of React to create fast, performant, and SEO-friendly websites. It uses a static site generation approach, pre-rendering pages on build time, leading to improved performance and reduced server load.

Key Concepts:

  • Pages: Represent individual sections of the website.
  • Components: Reusable building blocks of the UI, making development modular and efficient.
  • GraphQL Queries: Used for fetching data from various sources, including the filesystem, APIs, or databases.
  • Build Process: Gatsby compiles the website into static HTML, CSS, and JavaScript files, optimized for fast loading.

Project Structure:

├── gatsby-browser.js — This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser. Read more about it here — gatsbyjs.org/docs/browser-apis
          ├── gatsby-config.js — This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. Read more about it here — gatsbyjs.org/docs/gatsby-config
          ├── gatsby-node.js — This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. Read more about it here — gatsbyjs.org/docs/node-apis
          ├── gatsby-ssr.js — This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering. Read more about it here — gatsbyjs.org/docs/ssr-apis
          ├── src
          │   ├── components
          │   │  ├── pages — React components that are being used specifically on a certain page
          │   │  └── shared — React components that are being used across the whole website
          │   ├── hooks
          │   ├── images — Images that are being quired using graphql. Read more about it here — gatsbyjs.org/docs/working-with-images. Also note, that folder structure should be equal to the structure of components folder
          │   ├── pages
          │   ├── styles
          │   ├── templates
          │   ├── utils
          │   └── html.js — HTML template for all generated pages. Read more about it here — gatsbyjs.org/docs/custom-html
          ├── static
          │   └── fonts - Self-hosted fonts

Code Style:

  • ESLint: Used to enforce consistent code style and identify potential errors.
npm run lint
  • Prettier: Automates code formatting, ensuring consistent code style across the project.
npm run format

Blog Post Creation:

The blog posts are created using the gatsby-source-filesystem and gatsby-plugin-mdx plugins, along with the createPages Gatsby Node API.
Blog posts are dynamically created from .md files in the src/posts/ directory. Each .md file can include frontmatter at the beginning, which defines the following properties:

  • path: The path of the blog post.
  • date: The publish date of the blog post.
  • title: The title of the blog post.
  • isPopular: A boolean value that indicates whether the post should be included in the Popular posts section.
  • isFeatured: A boolean value that indicates whether the post should be featured in the Featured Story section. (Only one post can be featured).
  • draft: A boolean value that indicates whether the post is still in development. If true, the post will not be rendered in production.

Build and Deployment:

  • gatsby build: Generates the static website files.
  • netlify.toml: Configures the Netlify deployment process.

Commands:

  • npm run clean: Cleans the Gatsby cache.
  • npm run lint:fix: Fixes all possible ESLint issues.
  • npm run format: Formats all files in the project.

Package Manager:

  • npm install: Installs all necessary dependencies.

Plugins:

  • gatsby-plugin-algolia-search: Provides Algolia search functionality.
  • gatsby-plugin-canonical-urls: Sets canonical URLs for SEO purposes.
  • gatsby-plugin-feed: Generates RSS feeds.
  • gatsby-plugin-hotjar: Integrates Hotjar for user analytics.
  • gatsby-plugin-image: Optimizes and delivers images efficiently.
  • gatsby-plugin-mdx: Supports Markdown content with JSX elements.
  • gatsby-plugin-netlify: Provides Netlify-specific features.
  • gatsby-plugin-sharp: Optimizes images using the Sharp library.
  • gatsby-plugin-svgr-svgo: Processes SVG files for optimized rendering.
  • gatsby-source-filesystem: Reads files from the file system.
  • gatsby-transformer-sharp: Transforms images for optimized delivery.
  • husky: Prevents incorrect commits.
  • lint-staged: Automates code style checks before committing.
  • markdownlint-cli: Ensures consistent Markdown style.
  • node-fetch: A utility library for making HTTP requests.
  • postcss: Used for CSS processing.
  • postcss-import: Enables importing CSS files.
  • prettier: A code formatter.
  • tailwindcss: A utility-first CSS framework.

Contributing:

Please refer to the CONTRIBUTING.md file for information on how to contribute to the project. 


          ## Top-Level Directory Explanations
          
          <a class='local-link directory-link' data-ref="src/" href="#src/">src/</a> - This directory contains the source code for the Cilium project.
          
          <a class='local-link directory-link' data-ref="src/components/" href="#src/components/">src/components/</a> - This directory contains components used in the project.
          
          <a class='local-link directory-link' data-ref="src/hooks/" href="#src/hooks/">src/hooks/</a> - This directory contains hooks used in the project.
          
          <a class='local-link directory-link' data-ref="src/layouts/" href="#src/layouts/">src/layouts/</a> - This directory contains the layouts used for the project's website.
          
          <a class='local-link directory-link' data-ref="src/pages/" href="#src/pages/">src/pages/</a> - This directory contains the pages for the project's website.