feature: ENG-967 - Add dynamic app catalog (pluralsh#102)

* Populate app pages dynamically from GraphQL recipe API

* Run graphql-codegen

* Separate type imports / exports

* Fix app links

* Fix app catalog routing / menu

* Fix react error

* More type safe conversion from Provider to provider name

* lint

* package upgrades

* Remove unused query

* Static app page generation

* More strictly enforced import order

* Fix build error

* cache filtered repos results

* Upgrade react-aria/ssr to prevent warning about <SSRProvider>

* Better caching of repos

* re-org

* Much cleaner mixing of markdoc and API data for application pages

* Fix lint and TS errors

* Show configuration from API if markdoc doesn’t contain a section with “configuration” in its title

* Fix problem where all non-app pages wouldn’t render

* Remove test code

* Remove no longer necessary auth-token for api access

* Fix build errors

* Add basic instructions for `/applications` pages.

* Apply suggestions from code review

Co-authored-by: Abhi Vaidyanatha <[email protected]>

* Make sure arrow shows up for Application Catalog nav item

But doesn’t rotate when that category is selected

* Improved side nav functionality

* Catalog name improvements

* fix

* Make it possible to set meta title and meta description separately from display title and display description.

And set a specific meta description for app catalog pages

* formatting

* More efficient repo filtering / normalizing

And safer TS typing

* Package upgrades

* Friendlier 404s

Co-authored-by: Abhi Vaidyanatha <[email protected]>

.env.local → .env.development

@@ -2,4 +2,4 @@ NEXT_PUBLIC_ALGOLIA_APP_ID=YTTFBOBVDJ
 NEXT_PUBLIC_ALGOLIA_INDEX_NAME=plural
 NEXT_PUBLIC_ALGOLIA_APP_ID_KEY=7a4dbe4b26eb19140c283ff40ff536b5
 NEXT_PUBLIC_GITHUB_BRANCH_NAME=nextjs-markdoc
-NEXT_PUBLIC_ROOT_URL="https://docs.plural.sh"
+NEXT_PUBLIC_ROOT_URL="https://docs.plural.sh"

.eslintrc.js

@@ -1,14 +1,39 @@
 module.exports = {
-  extends: [
-    '@pluralsh/eslint-config-typescript',
-  ],
+  parserOptions: {
+    project: './tsconfig.json',
+  },
+  extends: ['@pluralsh/eslint-config-typescript'],
   globals: {
     JSX: true,
   },
   rules: {
+    '@typescript-eslint/consistent-type-exports': 'error',
+    '@typescript-eslint/consistent-type-imports': 'error',
+    'import-newlines/enforce': 'error',
     'import/order': [
       'error',
       {
+        'newlines-between': 'always',
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true,
+        },
+        pathGroups: [
+          {
+            pattern: 'react',
+            group: 'builtin',
+            position: 'after',
+          },
+          {
+            pattern: '{next,next/*,@pluralsh/design-system,honorable}',
+            group: 'external',
+            position: 'before',
+          },
+        ],
+        pathGroupsExcludedImportTypes: [
+          'react',
+          '{next/*,next,@pluralsh/design-system,honorable}',
+        ],
         groups: [
           'builtin',
           'external',
@@ -17,10 +42,19 @@ module.exports = {
           'sibling',
           'index',
           'object',
-          'type',
           'unknown',
+          'type',
         ],
       },
     ],
   },
+  overrides: [
+    {
+      files: ['.eslintrc.js', 'next.config.js'],
+      parserOptions: {
+        project: null,
+      },
+    },
+  ],
+  ignorePatterns: ['src/gql/**/*'],
 }

.gitignore

@@ -26,3 +26,4 @@ yarn-error.log*
 # production
 /build
 /dist
+.env.local

codegen.ts

@@ -0,0 +1,15 @@
+import type { CodegenConfig } from '@graphql-codegen/cli'
+
+const config: CodegenConfig = {
+  overwrite: true,
+  schema: 'https://app.plural.sh/gql',
+  documents: ['src/**/*.(tsx|ts)', '!src/gql/**/*'],
+  generates: {
+    'src/gql/': {
+      preset: 'client',
+      plugins: [],
+    },
+  },
+}
+
+export default config

next.config.js

@@ -13,7 +13,7 @@ module.exports = () => {
   const plugins = [withMarkdoc, withTM]
 
   return plugins.reduce((acc, next) => next(acc), {
-    reactStrictMode: true,
+    reactStrictMode: false,
     compiler: {
       // https://nextjs.org/docs/advanced-features/compiler#styled-components
       styledComponents: true,
@@ -213,12 +213,5 @@ module.exports = () => {
         },
       ]
     },
-    // webpack: (config) => {
-    //   config.module.rules.push({
-    //     test: /\.md$/,
-    //     use: 'raw-loader',
-    //   });
-    //   return config;
-    // },
   })
 }

package.json

@@ -4,32 +4,37 @@
     "node": ">=18"
   },
   "scripts": {
-    "dev": "next dev",
+    "dev": "concurrently \"next dev\" \"graphql-codegen --watch --config codegen.ts \" ",
     "build": "next build",
     "start": "next start",
     "lint": "eslint {src,pages} --ext ts,tsx,js,jsx",
-    "fix": "eslint --fix {src,pages} --ext ts,tsx,js,jsx"
+    "fix": "eslint --fix {src,pages} --ext ts,tsx,js,jsx",
+    "generate": "graphql-codegen --config codegen.ts"
   },
   "dependencies": {
-    "@docsearch/react": "3.2.2",
-    "@emotion/react": "11.10.4",
-    "@emotion/styled": "11.10.4",
+    "@apollo/client": "3.7.1",
+    "@docsearch/react": "3.3.0",
+    "@emotion/react": "11.10.5",
+    "@emotion/styled": "11.10.5",
     "@loomhq/loom-embed": "1.5.0",
-    "@markdoc/markdoc": "0.1.13",
-    "@markdoc/next.js": "0.1.10",
-    "@pluralsh/design-system": "1.292.4",
-    "@react-aria/ssr": "3.3.0",
+    "@markdoc/markdoc": "0.2.1",
+    "@markdoc/next.js": "0.2.1",
+    "@pluralsh/design-system": "1.293.5",
+    "@react-aria/ssr": "3.4.0",
     "@react-stately/list": "3.5.4",
     "@react-stately/select": "3.3.2",
     "@tanstack/react-table": "8.5.28",
     "algoliasearch": "4.14.2",
     "classnames": "2.3.2",
     "deep-freeze": "0.0.1",
-    "honorable": "0.144.0",
-    "honorable-theme-default": "0.65.0",
+    "graphql": "16.6.0",
+    "honorable": "0.194.0",
+    "honorable-theme-default": "0.77.0",
+    "immer": "9.0.16",
     "js-yaml": "4.1.0",
     "lodash": "4.17.21",
-    "next": "13.0.1",
+    "memoize-one": "6.0.0",
+    "next": "13.0.6",
     "next-compose-plugins": "2.2.1",
     "next-transpile-modules": "10.0.0",
     "qs": "6.11.0",
@@ -42,27 +47,31 @@
     "react-spring": "9.5.5",
     "react-transition-group": "4.4.5",
     "react-use-measure": "2.1.1",
-    "rooks": "7.4.0",
+    "rooks": "7.4.2",
     "styled-components": "5.3.6",
     "swr": "1.3.0",
     "tslib": "2.4.1",
     "usehooks-ts": "2.9.1"
   },
   "devDependencies": {
-    "@pluralsh/eslint-config-typescript": "2.4.0",
-    "@types/node": "18.11.9",
-    "@types/react": "18.0.24",
-    "@types/react-dom": "18.0.8",
+    "@graphql-codegen/cli": "2.15.0",
+    "@graphql-codegen/client-preset": "1.2.1",
+    "@pluralsh/eslint-config-typescript": "2.5.9",
+    "@types/node": "18.11.10",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.9",
     "@types/styled-components": "5.1.26",
-    "@typescript-eslint/eslint-plugin": "5.42.0",
-    "eslint": "8.27.0",
+    "@typescript-eslint/eslint-plugin": "5.45.0",
+    "concurrently": "7.6.0",
+    "eslint": "8.28.0",
+    "eslint-config-next": "13.0.6",
     "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-import-newlines": "1.2.3",
+    "eslint-plugin-import-newlines": "1.3.0",
     "eslint-plugin-jsx-a11y": "6.6.1",
-    "eslint-plugin-react": "7.31.10",
+    "eslint-plugin-react": "7.31.11",
     "eslint-plugin-react-hooks": "4.6.0",
     "react-hooks": "1.0.1",
-    "typescript": "4.8.4"
+    "typescript": "4.9.3"
   },
   "packageManager": "[email protected]"
 }

pages/404.tsx

@@ -0,0 +1,16 @@
+import { ContentHeader } from '../src/components/MainContent'
+import Link from '../src/components/md/Link'
+
+export default function Docs404() {
+  return (
+    <ContentHeader
+      title="Page not found"
+      description={(
+        <>
+          Sorry, this page doesn't appear to exist. Would you like to vist the{' '}
+          <Link href="/">home page</Link>?{' '}
+        </>
+      )}
+    />
+  )
+}