Update index.md

.cursor/mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "chrome-devtools": {
+      "command": "npx",
+      "args": ["-y", "chrome-devtools-mcp@latest"]
+    }
+  }
+}

.cursor/rules/docusaurus-app-rules.mdc

@@ -0,0 +1,12 @@
+---
+description: Docusaurus App
+alwaysApply: true
+---
+
+# Docusaurus App
+
+- This is a Docusaurus react app, written in Typescript using pnpm package manager.
+- Try to reuse existing state instead of creating new state
+- Check for existing components before suggesting new ones
+- Ensure react code is performance optimized: Use useMemo, useCallback, and React.memo where needed.
+- Ensure minimal re-renders: Suggest best state management practices, as much as possible stay away from external libraries. Let's prioritize React's native state management capabilities.

.github/workflows/ci.yaml

@@ -16,12 +16,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v5
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: markdownlint-cli
-        uses: nosborn/github-action-markdown-cli@v1.1.1
+        uses: nosborn/github-action-markdown-cli@508d6cefd8f0cc99eab5d2d4685b1d5f470042c1 # v3.5.0
         with:
           config_file: ".markdownlintrc"
-          files: .
+          files: src
   yaml_lint:
     name: YAML Lint
     runs-on: ubuntu-latest

.gitignore

@@ -67,3 +67,17 @@ yarn-error.log
 .pnp.js
 # Yarn Integrity file
 .yarn-integrity
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+src/data/device-metadata.json

.markdownlintrc

@@ -1,5 +1,14 @@
 {
-  "MD013": false,
-  "MD034": false,
-  "MD033": { "allowed_elements": ["details", "summary"] }
+  "MD013": {
+    "line_length": 120,
+    "code_blocks": false,
+    "tables": false,
+    "headings": false
+  },
+  "MD033": {
+    "allowed_elements": [
+      "details",
+      "summary"
+    ]
+  }
 }

README.md

@@ -8,24 +8,22 @@ Go to <https://devices.esphome.io> to view the website.
 
 ## How To Contribute
 
-Content on devices.esphome.io is generated by [Gatsby](https://www.gatsbyjs.com/). Pages are written in Markdown which anyone can learn. How to add a new device is [documented here](https://devices.esphome.io/adding-devices).
+Content on devices.esphome.io is generated by [Docusaurus](https://docusaurus.io/). Pages are written in Markdown which anyone can learn. How to add a new device is [documented here](https://devices.esphome.io/adding-devices).
 
 When you create a merge request, Netlify will automatically compile your proposed changes for you to preview what gets rendered. It puts a comment in the PR on Github.
 
 ## Development of site
 
-The site requires Node 18 to build.  Once that is running, to build locally:
+The site requires Node 20 and pnpm to build.  Once that is running, to build locally:
 
 ```bash
-# Now install gatsby as configured in the esphome-devices repository:
-npm install
-# Run a development gatsby server so you can see your copy of the site:
-npm run start
-# Open a browser to http://localhost:8000/
+# Now install Docusaurus as configured in the esphome-devices repository:
+pnpm install
+# Run a development Docusaurus server so you can see your copy of the site:
+pnpm start
+# A browser will open to http://localhost:3000/
 ```
 
-You can learn more about [Gatsby develop mode here](https://www.gatsbyjs.com/docs/reference/gatsby-cli#develop).
-
 ## Code of Conduct
 
 When contributing to this project please abide by our [Code of Conduct](CODE-OF-CONDUCT.md)

docusaurus.config.ts

@@ -0,0 +1,132 @@
+import { themes as prismThemes } from "prism-react-renderer";
+import type { Config } from "@docusaurus/types";
+import type * as Preset from "@docusaurus/preset-classic";
+
+// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
+
+const config: Config = {
+  title: "ESPHome Devices",
+  tagline:
+    "This website is a repository of device configuration templates and setup guides for devices running ESPHome firmware.",
+  favicon: "img/favicon.png",
+
+  // Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future
+  future: {
+    v4: true, // Improve compatibility with the upcoming Docusaurus v4
+  },
+
+  // Set the production url of your site here
+  url: "https://devices.esphome.io",
+  // Set the /<baseUrl>/ pathname under which your site is served
+  // For GitHub pages deployment, it is often '/<projectName>/'
+  baseUrl: "/",
+
+  // GitHub pages deployment config.
+  // If you aren't using GitHub pages, you don't need these.
+  organizationName: "esphome", // Usually your GitHub org/user name.
+  projectName: "esphome-devices", // Usually your repo name.
+
+  onBrokenLinks: "throw",
+
+  // Even if you don't use internationalization, you can use this field to set
+  // useful metadata like html lang. For example, if your site is Chinese, you
+  // may want to replace "en" with "zh-Hans".
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en"],
+  },
+
+  presets: [
+    [
+      "classic",
+      {
+        docs: {
+          sidebarPath: "./sidebars.ts",
+          routeBasePath: "/devices",
+          path: "src/docs/devices",
+
+          // Please change this to your repo.
+          // Remove this to remove the "edit this page" links.
+          editUrl:
+            "https://github.com/esphome/esphome-devices/tree/main/",
+        },
+        blog: false,
+        theme: {
+          customCss: "./src/css/custom.css",
+        },
+      } satisfies Preset.Options,
+    ],
+  ],
+
+  themes: [
+    ["@getcanary/docusaurus-theme-search-pagefind",
+      {
+        styles: { 
+          "--canary-color-primary-c": 0.15, 
+          "--canary-color-primary-h": 150,
+        },
+        includeRoutes: ["/devices/**/*"]
+      }
+    ]
+  ],
+
+  markdown: {
+    hooks: {
+      onBrokenMarkdownImages: "throw",
+    },
+  },
+
+  themeConfig: {
+    // Replace with your project's social card
+    image: "img/social-card.svg",
+    colorMode: {
+      respectPrefersColorScheme: true,
+    },
+    navbar: {
+      title: "ESPHome Devices",
+      logo: {
+        alt: "ESPHome Devices Logo",
+        src: "img/logo.svg",
+      },
+      items: [],
+    },
+    footer: {
+      style: "dark",
+      links: [],
+      copyright: `Built by the ESPHome community.`,
+    },
+    prism: {
+      theme: prismThemes.oneLight,
+      darkTheme: prismThemes.oneDark,
+    },
+    plugins: [
+      [
+        "@docusaurus/plugin-ideal-image",
+        {
+          quality: 70,
+          max: 1030, // max resized image's size.
+          min: 640, // min resized image's size. if original is lower, use that size.
+          steps: 2, // the max number of images generated between min and max (inclusive)
+          disableInDev: true,
+        },
+      ],
+      [
+        "@docusaurus/plugin-sitemap",
+        {
+          lastmod: null,
+          changefreq: "weekly",
+          priority: 0.5,
+          // ignorePatterns: ["/tags/**"],
+          filename: "sitemap.xml",
+          // createSitemapItems: async (params) => {
+          //   const { defaultCreateSitemapItems, ...rest } = params;
+          //   const items = await defaultCreateSitemapItems(rest);
+          //   return items.filter((item) => !item.url.includes("/page/"));
+          // },
+        },
+      ],
+    ],
+  } satisfies Preset.ThemeConfig,
+};
+
+export default config;

netlify.toml

@@ -0,0 +1,3 @@
+[build]
+command = "pnpm build"
+publish = "build"