projects.js page

[chantouu]

The code you've provided is a React component named Projects that appears to be part of a larger Gatsby-based website. This component is responsible for rendering a section of the website that displays a grid of projects. Let's break down the key parts of the code:

1. Import Statements: The component imports various React-related modules and components, including those from Gatsby, styled-components, react-transition-group, and custom utility functions.

2. Styled Components: The StyledProjectsSection and StyledProject components are defined using styled-components. These components define the styling for the projects section and individual projects within the grid.

3. Projects Component: The Projects component itself is a functional component that retrieves project data using a GraphQL query via Gatsby's useStaticQuery hook.

4. State and Refs: The component uses the useState and useRef hooks to manage state and references. The showMore state determines whether to show all projects or just a subset. The revealTitle, revealArchiveLink, and revealProjects refs are used to target elements for reveal animations.

5. Effect Hook: The useEffect hook is used to trigger reveal animations when the component mounts. It uses the sr object (likely ScrollReveal) to apply reveal effects to different elements on the page.

6. Rendering Projects: The component maps over the projects data and renders the individual project components using either standard mapping or a TransitionGroup from react-transition-group. This is done to create fade-up animations as projects are revealed.

7. Project Inner Content: The projectInner function is used to render the content of each project. It contains project details such as title, description, links, and technologies.

8. Rendered JSX: In the return statement, the component renders the projects section, project grid, and a button to toggle between showing more and fewer projects.

Overall, this component fetches project data using GraphQL, renders the project grid with animations and reveal effects, and allows users to show more or fewer projects based on their interaction with the "Show More" button. The styling is managed using styled-components, and the animation effects are achieved using libraries like react-transition-group and ScrollReveal (sr).

In the code you provided, the project data is fetched using GraphQL through Gatsby's useStaticQuery hook. The GraphQL query is defined within the data object in the useStaticQuery hook. This query retrieves the necessary project information from MarkdownRemark nodes that meet certain criteria. Let's break down how this works:

1. GraphQL Query:

   const data = useStaticQuery(graphql`
    query {
      projects: allMarkdownRemark(
        filter: {
          fileAbsolutePath: { regex: "/content/projects/" }
          frontmatter: { showInProjects: { ne: false } }
        }
        sort: { fields: [frontmatter___date], order: DESC }
      ) {
        edges {
          node {
            frontmatter {
              title
              tech
              github
              external
            }
            html
          }
        }
      }
    }
   `);

   In this query, you're querying the allMarkdownRemark type. This type corresponds to Markdown files in your Gatsby project. The query specifies several filters and sorting options:

   • fileAbsolutePath: This filter uses a regex to select Markdown files located in the "content/projects/" directory.
   • frontmatter.showInProjects: This filter ensures that only nodes with a truthy showInProjects field are selected.
   • Sorting: The nodes are sorted by the date field in descending order.

   The fields you're retrieving from each node include frontmatter (where project metadata like title, tech, github, and external links are stored) and html (where the project description might be stored as HTML).

2. Usage of Fetched Data:

   After the GraphQL query, you have access to the fetched data in the data object. Specifically, you're using the data.projects.edges array to access the individual projects. The component then maps over this array to render each project's content.

   const projects = data.projects.edges.filter(({ node }) => node);

   The projects array contains information about each project, including the project title, technologies used, GitHub and external links, and project description (as HTML).

The GraphQL query is executed when the component renders, and the fetched data is available in the data object. This is a common pattern in Gatsby where GraphQL queries are used to retrieve data at build time and then seamlessly integrate that data into the React components during rendering.

[chantouu]

The projects that are searched by graphql are in ./content/projects