### Markdown Article Example with Frontmatter (Markdown)

Source: https://context7.com/davidsonfellipe/awesome-wpo/llms.txt

Example of a markdown file structured for Gatsby, using frontmatter for metadata such as title, author, layout, and path. This metadata is essential for Gatsby to process and render the content correctly within the website.

```markdown
---
title: Articles
author: Davidson Fellipe
layout: post
path: /articles/
---


```

--------------------------------

### Markdown Content with Frontmatter for Gatsby (Markdown)

Source: https://context7.com/davidsonfellipe/awesome-wpo/llms.txt

Defines markdown content structure for Gatsby, using frontmatter for metadata like title, author, layout, and path. This frontmatter is used by Gatsby to process and route the content, enabling dynamic page generation. Includes examples of book and tool links.

```markdown
---
title: Awesome WPO
author: Davidson Fellipe
layout: post
path: /
---

A curated list of Web Performance Optimization. Everyone can contribute here!

## Books

- [HTTP/2 in Action by Barry Pollard](https://www.manning.com/books/http2-in-action)
- [Web Performance in Action by Jeremy Wagner](https://www.manning.com/books/web-performance-in-action)
- [High Performance Browser Networking](http://shop.oreilly.com/product/0636920028048.do) - Ilya Grigorik

## Tools

### Analyzers

- [Lighthouse](https://github.com/GoogleChrome/lighthouse) - Auditing and performance metrics tool
- [WebPageTest](http://www.webpagetest.org/) - Free site speed test from multiple locations

```

--------------------------------

### Running NPM Linting Scripts

Source: https://context7.com/davidsonfellipe/awesome-wpo/llms.txt

Provides bash commands to execute the linting scripts defined in the package.json. One command checks for terminology consistency, and the other verifies the validity of all links.

```bash
# Check terminology consistency across content files
npm run lint

# Verify all links are valid and not broken
npm run lint-no-dead-link
```

--------------------------------

### NPM Package Configuration for Linting

Source: https://context7.com/davidsonfellipe/awesome-wpo/llms.txt

Defines project dependencies and scripts for content quality control using textlint. It specifies textlint and its rules for checking terminology and dead links, along with npm scripts to run these checks.

```json
{
  "name": "awesome-wpo",
  "description": "Awesome web performance",
  "author": "Davidson Fellipe <email@fellipe.com>",
  "dependencies": {
    "textlint": "^11.6.3",
    "textlint-rule-no-dead-link": "^4.6.2",
    "textlint-rule-terminology": "^2.1.4"
  },
  "license": "MIT",
  "scripts": {
    "lint": "textlint --rule textlint-rule-terminology ./content/{ARTICLES,BLOGS,MEETUPS,TALKS}.md",
    "lint-no-dead-link": "textlint --rule textlint-rule-no-dead-link *.md"
  }
}
```

--------------------------------

### Gatsby Site Configuration with Plugins (JavaScript)

Source: https://context7.com/davidsonfellipe/awesome-wpo/llms.txt

Configures a Gatsby site, including metadata, styling, markdown sourcing, remark transformation with PrismJS and image handling, Google Analytics integration, sitemap, and robots.txt. This file defines the site's structure and behavior.

```javascript
// website/gatsby-config.js
module.exports = {
  siteMetadata: {
    siteUrl: "https://awesome-wpo.netlify.app/",
    title: `Awesome WPO`,
    description: `A curated list of Web Performance Optimization. Everyone can contribute here!`,
    author: `@davidsonfellipe`,
  },
  plugins: [
    `gatsby-plugin-styled-components`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `markdown-pages`,
        path: `../content`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              classPrefix: "language-",
              showLineNumbers: false,
            },
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1280,
            },
          },
        ],
      },
    },
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: "UA-169341414-1",
      },
    },
    `gatsby-plugin-sitemap`,
    `gatsby-plugin-robots-txt`,
  ],
}
```

--------------------------------

### Gatsby Dynamic Page Creation from Markdown (JavaScript)

Source: https://context7.com/davidsonfellipe/awesome-wpo/llms.txt

Uses Gatsby's Node.js API to dynamically create pages from markdown files. It queries all markdown remarks, sorts them, and creates a page for each using a specified template. This enables content-driven website generation.

```javascript
// website/gatsby-node.js
const path = require(`path`)

exports.createPages = async ({ actions, graphql, reporter }) => {
  const { createPage } = actions
  const blogPostTemplate = path.resolve(`src/templates/blogTemplate.js`)

  const result = await graphql(`
    {
      allMarkdownRemark(
        sort: { order: DESC, fields: [frontmatter___title] }
        limit: 1000
      ) {
        edges {
          node {
            frontmatter {
              path
            }
          }
        }
      }
    }
  `)

  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`) 
    return
  }

  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: node.frontmatter.path,
      component: blogPostTemplate,
      context: {},
    })
  })
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.