docs next (#610)

Co-authored-by: David Moore <[email protected]>
Co-authored-by: Ryan Cartwright <[email protected]>

Author: 3 people

.github/workflows/test.yaml

@@ -14,7 +14,7 @@ jobs:
       NEXT_PUBLIC_VERCEL_URL: nitric.io
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
           node-version: 18
@@ -27,43 +27,25 @@ jobs:
         run: yarn format:check
       - name: Run spellcheck test
         run: yarn test:spellcheck
-      - name: Build Website
-        run: yarn build
-        env:
-          NEXT_PUBLIC_GITHUB_BRANCH: ${{ github.head_ref || github.ref_name }}
-      - name: Cache Build
-        uses: actions/cache@v2
-        id: restore-build
-        with:
-          path: |
-            .next
-            public
-          key: ci-docs-test-${{ github.sha }}
 
   test-broken-links:
     runs-on: ubuntu-latest
     needs: [tests]
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
-      - name: Restore Build
-        uses: actions/cache@v2
-        id: restore-build
-        with:
-          path: |
-            .next
-            public
-          key: ci-docs-test-${{ github.sha }}
+        uses: actions/checkout@v3
       - name: Cypress tests 🧪
         uses: cypress-io/github-action@v5
         with:
           headless: true
           config: video=false
           browser: chrome
           spec: cypress/e2e/broken-links.cy.ts
-          build: node scripts/build-pages-fixture.js
+          build: yarn cypress:build
           start: yarn start
           wait-on: 'http://localhost:3000'
+        env:
+          NEXT_PUBLIC_GITHUB_BRANCH: ${{ github.head_ref || github.ref_name }}
       - name: Upload screenshots
         uses: actions/upload-artifact@v4
         if: failure()
@@ -76,25 +58,19 @@ jobs:
     needs: [tests]
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
-      - name: Restore Build
-        uses: actions/cache@v2
-        id: restore-build
-        with:
-          path: |
-            .next
-            public
-          key: ci-docs-test-${{ github.sha }}
+        uses: actions/checkout@v3
       - name: Cypress tests 🧪
         uses: cypress-io/github-action@v5
         with:
           headless: true
           config: video=false
           browser: chrome
           spec: cypress/e2e/a11y.cy.ts
-          build: node scripts/build-pages-fixture.js
+          build: yarn cypress:build
           start: yarn start
           wait-on: 'http://localhost:3000'
+        env:
+          NEXT_PUBLIC_GITHUB_BRANCH: ${{ github.head_ref || github.ref_name }}
       - name: Upload screenshots
         uses: actions/upload-artifact@v4
         if: failure()
@@ -107,25 +83,19 @@ jobs:
     needs: [tests]
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
-      - name: Restore Build
-        uses: actions/cache@v2
-        id: restore-build
-        with:
-          path: |
-            .next
-            public
-          key: ci-docs-test-${{ github.sha }}
+        uses: actions/checkout@v3
       - name: Cypress tests 🧪
         uses: cypress-io/github-action@v5
         with:
           headless: true
           config: video=false
           browser: chrome
           spec: cypress/e2e/seo.cy.ts
-          build: node scripts/build-pages-fixture.js
+          build: yarn cypress:build
           start: yarn start
           wait-on: 'http://localhost:3000'
+        env:
+          NEXT_PUBLIC_GITHUB_BRANCH: ${{ github.head_ref || github.ref_name }}
       - name: Upload screenshots
         uses: actions/upload-artifact@v4
         if: failure()

.gitignore

@@ -23,10 +23,17 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
 
 # local env files
 .env*.local
 
 # vercel
 .vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.contentlayer
+
+old

.husky/pre-commit

@@ -0,0 +1 @@
+yarn lint-staged

.spellcheckerrc.yml

@@ -1,5 +1,5 @@
 files:
-  - 'src/pages/**/*.{md,mdx}'
+  - 'docs/**/*.{md,mdx}'
 dictionaries:
   - dictionary.txt
 quiet: true

components.json

@@ -1,17 +1,20 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
-  "rsc": false,
+  "style": "new-york",
+  "rsc": true,
   "tsx": true,
   "tailwind": {
-    "config": "tailwind.config.js",
+    "config": "tailwind.config.ts",
     "css": "src/styles/tailwind.css",
-    "baseColor": "slate",
+    "baseColor": "zinc",
     "cssVariables": true,
     "prefix": ""
   },
   "aliases": {
     "components": "@/components",
-    "utils": "@/lib/utils"
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
   }
 }

contentlayer.config.ts

@@ -0,0 +1,82 @@
+import { defineDocumentType, makeSource } from 'contentlayer2/source-files'
+import { extractTocHeadings } from './src/mdx/remark-toc-headings.mjs'
+import path from 'path'
+import fs from 'fs'
+
+const contentDirPath = 'docs'
+
+const branch = process.env.NEXT_PUBLIC_GITHUB_BRANCH || 'main'
+
+const Doc = defineDocumentType(() => ({
+  name: 'Doc',
+  filePathPattern: '**/*.mdx',
+  fields: {
+    title_seo: {
+      type: 'string',
+      description:
+        'The meta title of the doc, this will override the title extracted from the markdown and the nav title',
+    },
+    description: {
+      type: 'string',
+      description: 'The description of the doc',
+    },
+    image: {
+      type: 'string',
+      description: 'The image of the doc',
+    },
+    image_alt: {
+      type: 'string',
+      description: 'The image alt of the doc',
+    },
+    disable_edit: {
+      type: 'boolean',
+      description: 'Disable the github edit button',
+    },
+    tags: {
+      type: 'list',
+      of: {
+        type: 'string',
+      },
+      description: 'The tags of the post, used by guides',
+    },
+  },
+  computedFields: {
+    slug: {
+      type: 'string',
+      resolve: (doc) => doc._raw.flattenedPath,
+    },
+    toc: { type: 'json', resolve: (doc) => extractTocHeadings(doc.body.raw) },
+    title: {
+      type: 'string',
+      resolve: async (doc) => {
+        const headings = await extractTocHeadings(doc.body.raw, [1])
+
+        return headings[0]?.value
+      },
+    },
+    editUrl: {
+      type: 'string',
+      resolve: (doc) =>
+        `https://github.com/nitrictech/docs/edit/${branch}/docs/${doc._raw.sourceFilePath}`,
+    },
+    lastModified: {
+      type: 'date',
+      resolve: (doc) => {
+        // Get the full path to the markdown file
+        const filePath = path.join(
+          process.cwd(),
+          contentDirPath,
+          doc._raw.sourceFilePath,
+        )
+        // Extract and return the last modified date
+        const stats = fs.statSync(filePath)
+        return stats.mtime // This is the last modified date
+      },
+    },
+  },
+}))
+
+export default makeSource({
+  contentDirPath,
+  documentTypes: [Doc],
+})

cypress.config.ts

@@ -4,8 +4,18 @@ export default defineConfig({
   e2e: {
     baseUrl: 'http://localhost:3000',
     setupNodeEvents(on, config) {
-      // require("cypress-fail-fast/plugin")(on, config);
-      return config
+      on('task', {
+        log(message) {
+          console.log(message)
+
+          return null
+        },
+        table(message) {
+          console.table(message)
+
+          return null
+        },
+      })
     },
   },
 })

cypress/e2e/a11y.cy.ts

@@ -2,17 +2,72 @@ import * as pages from '../fixtures/pages.json'
 
 describe('a11y accessiblity test suite', () => {
   pages.forEach((page) => {
-    it(`Should test page ${page} for a11y violations`, () => {
+    it(`Should test page ${page} for a11y violations on desktop`, () => {
       cy.viewport('macbook-16')
       cy.visit(page)
       cy.injectAxe()
-      cy.wait(150)
+      cy.wait(500)
       cy.checkA11y(
         undefined,
         {
           includedImpacts: ['critical'],
         },
-      );
+        (violations) => {
+          cy.task(
+            'log',
+            `${violations.length} accessibility violation${
+              violations.length === 1 ? '' : 's'
+            } ${violations.length === 1 ? 'was' : 'were'} detected`,
+          )
+          // pluck specific keys to keep the table readable
+          const violationData = violations.map(
+            ({ id, impact, description, nodes }) => ({
+              id,
+              impact,
+              description,
+              nodes: nodes.length,
+            }),
+          )
+
+          cy.task('table', violationData)
+
+          // console.error(JSON.stringify(violations));
+        },
+      )
+    })
+
+    it(`Should test page ${page} for a11y violations on mobile`, () => {
+      cy.viewport('iphone-x')
+      cy.visit(page)
+      cy.injectAxe()
+      cy.wait(500)
+      cy.checkA11y(
+        undefined,
+        {
+          includedImpacts: ['critical'],
+        },
+        (violations) => {
+          cy.task(
+            'log',
+            `${violations.length} accessibility violation${
+              violations.length === 1 ? '' : 's'
+            } ${violations.length === 1 ? 'was' : 'were'} detected`,
+          )
+          // pluck specific keys to keep the table readable
+          const violationData = violations.map(
+            ({ id, impact, description, nodes }) => ({
+              id,
+              impact,
+              description,
+              nodes: nodes.length,
+            }),
+          )
+
+          cy.task('table', violationData)
+
+          // console.error(JSON.stringify(violations));
+        },
+      )
     })
   })
 })