Website Structure and Architecture

The website’s structure is organized to provide a seamless and informative experience for users. It is built using GatsbyJS, a static site generator, and leverages ReactJS for building interactive components.

Project Structure:

The project directory reflects the website’s logical organization:

• src: This directory houses the source code for the website.
  • components: This directory contains all the React components used across the website.
    • pages: This sub-directory contains components that are specific to certain pages, such as the “Get Started” page.
    • shared: This sub-directory houses components used across multiple pages, such as the navigation bar or footer.
  • hooks: This directory contains custom hooks used for data fetching and component logic.
  • images: This directory stores images used on the website and is structured mirroring the components folder, enabling GraphQL-based image loading.
  • pages: This directory contains the main page components of the website, each responsible for a distinct page, like “Home”, “Industries”, or “Get Started”.
  • styles: This directory holds CSS files for styling different aspects of the website.
  • templates: This directory contains GatsbyJS templates for different types of pages, providing a consistent layout for content organization.
  • utils: This directory houses utility functions used throughout the project for common tasks.
  • html.js: This file defines the overall HTML structure of the website, allowing customization for different pages.
• static: This directory holds static assets that are not processed by GatsbyJS, such as fonts.
  • fonts: This directory contains self-hosted fonts used on the website.

Components:

Components are the building blocks of the website’s user interface. They are designed to be reusable and modular, promoting code consistency and maintainability.

• Each component is typically housed within a dedicated folder, mirroring the project’s overall structure.
• The index.js file within each component folder exports the default component for easy import.
• Components can further include nested components within their folders, following the same structure.
• Components can be categorized as either page-specific or shared components, allowing for efficient organization and reuse.

Navigation and Layout:

• The navigation bar, located in src/layouts/main/main.jsx, provides a consistent user experience by offering links to different sections of the website.
• The website follows a consistent layout structure, as defined in the main.jsx file.
• Different pages within the site might utilize specific layout components for unique needs, such as specific content arrangement or styling.

Content Management:

• The website’s content is managed through Markdown files located within the src/posts directory.
• Each blog post or landing page is represented by a Markdown file with a unique name and a corresponding index.md file.
• This structure allows for easy content editing and updates, enabling efficient content management.

Static Site Generation:

• The website is built using GatsbyJS, which renders the content into static HTML files.
• This approach improves page load times and search engine optimization (SEO) by serving optimized content directly from the server.
• GatsbyJS also supports server-side rendering (SSR) for specific pages, allowing for dynamic content generation.

Additional Information:

• The static/_redirects file handles redirects for specific URLs, ensuring a seamless user experience.
• The README.md file within the project root provides an overview of the website structure, building process, and other relevant information for developers.

Examples:

• Component Structure:

component
          ├── nested-component
          │  ├── images
          │  │  ├── image.png
          │  │  └── icon.svg
          │  ├── nested-component.jsx
          │  └── index.js
          ├── images
          │  ├── image.png
          │  └── icon.svg
          ├── component.jsx
          └── index.js
          

• Navigation Structure:

const navigation = [
            { name: 'Users', href: '/adopters' },
            {
              name: 'Use Cases',
              childItems: [
                { name: 'Networking', href: '/#networking' },
                { name: 'Observability', href: '/#observability' },
                { name: 'Security', href: '/#security' },
              ],
            },
            // ... more navigation items
          ];
          

• Content Management Example:

---
          path: '/blog/2023/01/05/retail-user-story'
          date: '2023-01-05T17:00:00.000Z'
          title: 'Cilium User Story: Connecting 390+ Stores and 4.3 Billion Website Visitors'
          isPopular: true
          isFeatured: false
          ogImage: Retail_User_Story.png
          ogSummary: "Learn how a retail company used Cilium to connect their multi cloud environment"
          categories:
          - Community
          tags:
          - Cilium
          ---  
          !Cilium User Story: Connecting 390+ Stores and 4.3 Billion Website Visitors  
          *January 05th, 2022*
          *Author: Bill Mulligan, Isovalent*  
          *This User Story comes from a company in the retail industry*
          

Top-Level Directory Explanations

src/ - This directory contains the source code for the Cilium project.

src/components/ - This directory contains components used in the project.

src/hooks/ - This directory contains hooks used in the project.

src/layouts/ - This directory contains the layouts used for the project’s website.

src/pages/ - This directory contains the pages for the project’s website.