New website (#1629)

# Todo
- [x] NextJS boilerplate
- [x] Layout
  - [x] Flowbite react components
  - [x] footer
  - [x] docs layout
    - [x] max container width
    - [x] toggle sidebar (hamburger) on small screens
    - [x] sidebar search box
    - [x] fix sidebar chevrons
- [x] fix sidebar left margin for nested collapse (use className
directly)
  - [x] blog layout
    - [x] all articles
    - [x] single article
  - [x] marketing layout
    - [x] landing page / home
    - [x] fix contact / newsletter form
    - [x] reusable contact / sales form
    - [x] team page
- [ ] Content
  - [ ] Team Bios
  - [x] sitemap
  - [x] custom 404 and 500 pages
  - [x] favicon
  - [x] fix navbar link collapse on small devices
  - [x] customize `format`-enabled sections
  - [x] convert `<a>` to `<Link>`
  - [x] download images from githubusercontent
  - [x] fix TabsGroup styling
  - [x] fix Alert styling
  - [x] disable darkmode
  - [x] Add MDX support
  - [ ] ~~migrate blog/web/docs pages to React Components~~
  - [x] Replace Docusaurus components and MDX blocks with alternatives
- [x] CI
  - [x] Static analysis for ts/md(x)/js/css/html
  - [x] Build site to smoke test
  - [x] Rename `www` to `website`

## Saving for part 2
- [ ] Publish
- [x] Move from Github Pages to Vercel to avoid possible [usage policy
violations](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#usage-limits)
  - [x] Add PostHog analytics
  - [ ] Update DNS records
  - [ ] Check Google search console
  - [ ] Check for JS errors
  - [x] Check page speed / optimization
  - [x] Reconfigure Algolia Docsearch

.codespellrc

@@ -1,3 +1,3 @@
 [codespell]
-skip = ./www/docs/reference/api/*.mdx,./erl_crash.dump,./apps/fz_http/erl_crash.dump,./cover,./vendor,./omnibus,*.json,yarn.lock,seeds.exs,./**/node_modules,./deps,./priv/static,./priv/plts,./**/priv/static,./.git,./www/build,./_build
+skip = ./website/.next,./website/pnpm-lock.yaml,./www/docs/reference/api/*.mdx,./erl_crash.dump,./apps/fz_http/erl_crash.dump,./cover,./vendor,./omnibus,*.json,yarn.lock,seeds.exs,./**/node_modules,./deps,./priv/static,./priv/plts,./**/priv/static,./.git,./www/build,./_build
 ignore-words-list = crate,keypair,keypairs,iif,statics,wee,anull

.github/workflows/static_analysis.yml

@@ -15,11 +15,10 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '18'
           cache: 'yarn'
           cache-dependency-path: |
-            apps/fz_http/assets/package-lock.json
-            www/yarn.lock
+            apps/fz_http/assets/yarn.lock
       - uses: ruby/setup-ruby@v1
         with:
           ruby-version: '2.7'
@@ -81,10 +80,6 @@ jobs:
       - name: Create PLTs
         if: steps.plt_cache.outputs.cache-hit != 'true'
         run: mix dialyzer --plt
-      - name: Install node modules
-        run: |
-          cd www/
-          yarn install --frozen-lockfile
       - name: Run pre-commit
         run: |
           pre-commit install

.pre-commit-config.yaml

@@ -35,12 +35,6 @@ repos:
         language: system
         pass_filenames: false
         files: \.rb$
-      - id: markdownlint
-        name: 'nodejs: markdownlint'
-        entry: ./docs/node_modules/markdownlint-cli/markdownlint.js
-        language: system
-        pass_filenames: true
-        files: docs/.*\.md$
 
   # Standard pre-commit hooks
   - repo: https://github.com/pre-commit/pre-commit-hooks

.tool-versions

@@ -1,6 +1,6 @@
 # These are used for the dev environment.
 # This should match the versions used in the built product.
-nodejs 16.19.0
+nodejs 18.16.0
 elixir 1.14.3-otp-25
 erlang 25.2.1
 

website/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# Sitemap generator artifacts
+public/robots.txt
+public/sitemap.xml
+public/sitemap-*.xml
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

website/.npmrc

@@ -0,0 +1,2 @@
+//.npmrc
+enable-pre-post-scripts=true

website/README.md

@@ -0,0 +1,46 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with
+[`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the
+result.
+
+You can start editing the page by modifying `app/page.tsx`. The page
+auto-updates as you edit the file.
+
+This project uses
+[`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to
+automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
+  features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out
+[the Next.js GitHub repository](https://github.com/vercel/next.js) - your
+feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the
+[Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme)
+from the creators of Next.js.
+
+Check out our
+[Next.js deployment documentation](https://nextjs.org/docs/deployment) for more
+details.

website/mdx-components.js

@@ -0,0 +1,9 @@
+// This file is required to use @next/mdx in the `app` directory.
+export function useMDXComponents(components) {
+  return components;
+  // Allows customizing built-in components, e.g. to add styling.
+  // return {
+  //   h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
+  //   ...components,
+  // }
+}

website/next-sitemap.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next-sitemap').IConfig} */
+module.exports = {
+  siteUrl: process.env.SITE_URL || "https://firezone.dev",
+  generateRobotsTxt: true, // (optional)
+  // ...other options
+};

website/next.config.mjs

@@ -0,0 +1,94 @@
+// Adds GitHub-flavored markdown support to MDX
+import nextMDX from "@next/mdx";
+import remarkGfm from "remark-gfm";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
+import rehypeHighlight from "rehype-highlight";
+
+// Add IDs to headings
+import rehypeSlug from "rehype-slug";
+
+// Add anchor links to headings with IDs
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
+import { s } from "hastscript";
+
+// Highlight.js languages
+import langElixir from "highlight.js/lib/languages/elixir";
+import langYaml from "highlight.js/lib/languages/yaml";
+import langJson from "highlight.js/lib/languages/json";
+import langBash from "highlight.js/lib/languages/bash";
+import langRust from "highlight.js/lib/languages/rust";
+import langRuby from "highlight.js/lib/languages/ruby";
+
+const highlightLanguages = {
+  elixir: langElixir,
+  yaml: langYaml,
+  json: langJson,
+  bash: langBash,
+  rust: langRust,
+  ruby: langRuby,
+};
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
+  images: {
+    dangerouslyAllowSVG: true,
+    remotePatterns: [
+      {
+        hostname: "img.shields.io",
+      },
+      {
+        hostname: "www.gravatar.com",
+      },
+    ],
+  },
+};
+
+const withMDX = nextMDX({
+  extension: /\.mdx?$/,
+  options: {
+    remarkPlugins: [remarkGfm, remarkParse, remarkRehype],
+    rehypePlugins: [
+      rehypeSlug,
+      [
+        rehypeAutolinkHeadings,
+        {
+          behavior: "append",
+          // We want to render a link icon from HeroIcons
+          content(node) {
+            return [
+              s(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  width: 10,
+                  height: 10,
+                  color: "black",
+                },
+                s("path", {
+                  fill: "currentColor",
+                  fillRule: "evenodd",
+                  d: "M19.902 4.098a3.75 3.75 0 00-5.304 0l-4.5 4.5a3.75 3.75 0 001.035 6.037.75.75 0 01-.646 1.353 5.25 5.25 0 01-1.449-8.45l4.5-4.5a5.25 5.25 0 117.424 7.424l-1.757 1.757a.75.75 0 11-1.06-1.06l1.757-1.757a3.75 3.75 0 000-5.304zm-7.389 4.267a.75.75 0 011-.353 5.25 5.25 0 011.449 8.45l-4.5 4.5a5.25 5.25 0 11-7.424-7.424l1.757-1.757a.75.75 0 111.06 1.06l-1.757 1.757a3.75 3.75 0 105.304 5.304l4.5-4.5a3.75 3.75 0 00-1.035-6.037.75.75 0 01-.354-1z",
+                  clipRule: "evenodd",
+                })
+              ),
+            ];
+          },
+        },
+      ],
+      rehypeStringify,
+      [
+        rehypeHighlight,
+        {
+          ignoreMissing: true,
+          languages: highlightLanguages,
+        },
+      ],
+    ],
+  },
+});
+
+export default withMDX(nextConfig);

website/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "www2",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "postbuild": "next-sitemap",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@docsearch/react": "3",
+    "@heroicons/react": "^2.0.18",
+    "@mdx-js/loader": "^2.3.0",
+    "@mdx-js/react": "^2.3.0",
+    "@next/mdx": "^13.4.4",
+    "@types/mdx": "^2.0.5",
+    "@types/node": "20.2.3",
+    "@types/react": "18.2.6",
+    "@types/react-dom": "18.2.4",
+    "@types/react-syntax-highlighter": "^15.5.7",
+    "asciinema-player": "^3.4.0",
+    "autoprefixer": "10.4.14",
+    "flowbite": "^1.6.5",
+    "flowbite-react": "^0.4.4",
+    "highlight.js": "^11.8.0",
+    "md5": "^2.3.0",
+    "next": "13.4.4",
+    "next-sitemap": "^4.1.3",
+    "postcss": "8.4.23",
+    "posthog-js": "^1.67.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-markdown": "^8.0.7",
+    "react-syntax-highlighter": "^15.5.0",
+    "rehype-autolink-headings": "^6.1.1",
+    "rehype-highlight": "^6.0.0",
+    "rehype-slug": "^5.1.0",
+    "rehype-stringify": "^9.0.3",
+    "remark-gfm": "^3.0.1",
+    "remark-parse": "^10.0.2",
+    "remark-rehype": "^10.1.0",
+    "tailwindcss": "3.3.2"
+  },
+  "devDependencies": {
+    "flowbite-typography": "^1.0.3",
+    "hastscript": "^7.2.0",
+    "typescript": "5.0.4"
+  }
+}