feat: new documentation design (#1365)

--------- Co-authored-by: Florent Delerue <florentdelerue@hotmail.com> Co-authored-by: Sébastien Chopin <seb@nuxt.com> Co-authored-by: Daniel Roe <daniel@roe.dev> Co-authored-by: Sébastien Chopin <seb@nuxtlabs.com>
nuxt · Oct 18, 2023 · 1fc7b03 · 1fc7b03
1 parent b605738
commit 1fc7b03
Show file tree

Hide file tree

Showing 590 changed files with 8,992 additions and 23,117 deletions.
diff --git a/.env.example b/.env.example
@@ -1,9 +1,10 @@
 # Specify the path of the docs/ directory of nuxt/nuxt locally
 NUXT_DOCS_PATH=
-
-NUXT_OPEN_COLLECTIVE_API_KEY=
-NUXT_GITHUB_TOKEN=
-
-NUXT_SENDGRID_API_KEY=
-NUXT_SENDGRID_LIST_ID=
-NUXT_TEST_EMAIL=
+# Specify the path of the .docs/ directory of nuxt/examples locally
+NUXT_EXAMPLES_PATH=
+# Specify the path of @nuxt/ui-pro locally
+NUXT_UI_PRO_PATH=
+# Production token for @nuxt/ui-pro, purchase on https://ui.nuxt.com/pro/purchase
+NUXT_UI_PRO_TOKEN=
+# Used when pre-rendering the docs for dynamic OG images
+NUXT_PUBLIC_SITE_URL=
diff --git a/.eslintrc b/.eslintrc
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,43 @@
+module.exports = {
+  root: true,
+  extends: ['@nuxt/eslint-config'],
+  rules: {
+    // General
+    semi: ['error', 'never'],
+    quotes: ['error', 'single'],
+    'comma-dangle': ['error', 'never'],
+    'comma-spacing': ['error', { before: false, after: true }],
+    'keyword-spacing': ['error', { before: true, after: true }],
+    'space-before-function-paren': ['error', 'always'],
+    'object-curly-spacing': ['error', 'always'],
+    'arrow-spacing': ['error', { before: true, after: true }],
+    'key-spacing': ['error', { beforeColon: false, afterColon: true, mode: 'strict' }],
+    'space-before-blocks': ['error', 'always'],
+    'space-infix-ops': ['error', { int32Hint: false }],
+
+    // Typescript
+    '@typescript-eslint/type-annotation-spacing': 'error',
+
+    // Vuejs
+    'vue/multi-word-component-names': 0,
+    'vue/html-indent': ['error', 2],
+    'vue/script-indent': ['error', 2, { baseIndent: 0 }],
+    'vue/keyword-spacing': ['error', { before: true, after: true }],
+    'vue/object-curly-spacing': ['error', 'always'],
+    'vue/key-spacing': ['error', { beforeColon: false, afterColon: true, mode: 'strict' }],
+    'vue/arrow-spacing': ['error', { before: true, after: true }],
+    'vue/array-bracket-spacing': ['error', 'never'],
+    'vue/block-spacing': ['error', 'always'],
+    'vue/brace-style': ['error', 'stroustrup', { allowSingleLine: true }],
+    'vue/space-infix-ops': ['error', { int32Hint: false }],
+    'vue/max-attributes-per-line': [
+      'error',
+      {
+        singleline: {
+          max: 5
+        }
+      }
+    ],
+    'vue/padding-line-between-blocks': ['error', 'always']
+  }
+}
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022-2023 NuxtLabs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,5 +1,9 @@
+![nuxt-website](https://github.com/nuxt/nuxt.com/assets/904724/7453c94f-1733-45b6-ae11-ca889a9b9f1b)
+
 # nuxt.com
 
+Welcome to the Nuxt website repository available on [nuxt.com](https://nuxt.com).
+
 ## Setup
 
 Make sure to install the dependencies
@@ -22,20 +26,26 @@ pwd
 
 Copy the output of the command above and paste it in the `NUXT_DOCS_PATH` variable in the `.env` file.
 
-For the other env variables, you can ask the team for the values.
-
 ## Development
 
-Start the development server in the `docs/` directory of the framework.
+Start the development server:
 
 ```bash
-pnpm run dev
+npm run dev
 ```
 
 ## Production
 
+In order to build the application for production, you need to have a [Nuxt UI Pro license](https://ui.nuxt.com/pro/purchase) and set the `NUXT_UI_PRO_LICENSE` variable in the `.env` file.
+
+Note that this is not required to run in development and contribute to the Nuxt website or documentation.
+
 Build the application for production:
 
 ```bash
-pnpm run build
+npm run generate
 ```
+
+## License
+
+[MIT License](./LICENSE)
diff --git a/app.config.ts b/app.config.ts
@@ -0,0 +1,176 @@
+export default defineAppConfig({
+  ui: {
+    primary: 'green',
+    gray: 'slate',
+    avatar: {
+      default: {
+        icon: 'i-ph-image'
+      }
+    },
+    button: {
+      default: {
+        loadingIcon: 'i-ph-spinner'
+      }
+    },
+    input: {
+      default: {
+        loadingIcon: 'i-ph-spinner'
+      }
+    },
+    select: {
+      default: {
+        loadingIcon: 'i-ph-spinner',
+        trailingIcon: 'i-ph-caret-down'
+      }
+    },
+    selectMenu: {
+      default: {
+        selectedIcon: 'i-ph-check'
+      }
+    },
+    notification: {
+      default: {
+        closeButton: {
+          icon: 'i-ph-x'
+        }
+      }
+    },
+    commandPalette: {
+      default: {
+        icon: 'i-ph-magnifying-glass-duotone',
+        loadingIcon: 'i-ph-spinner',
+        selectedIcon: 'i-ph-check',
+        emptyState: {
+          icon: 'i-ph-magnifying-glass-duotone'
+        },
+        closeButton: {
+          icon: 'i-ph-x'
+        }
+      }
+    },
+    table: {
+      default: {
+        sortAscIcon: 'i-ph-sort-ascending',
+        sortDescIcon: 'i-ph-sort-descending',
+        sortButton: {
+          icon: 'i-ph-list'
+        },
+        loadingState: {
+          icon: 'i-ph-spinner'
+        },
+        emptyState: {
+          icon: 'i-ph-database'
+        }
+      }
+    },
+    pagination: {
+      default: {
+        prevButton: {
+          icon: 'i-ph-arrow-left'
+        },
+        nextButton: {
+          icon: 'i-ph-arrow-right'
+        }
+      }
+    },
+    card: {
+      rounded: 'rounded-xl'
+    },
+    tooltip: {
+      background: '!bg-background'
+    },
+    // `@nuxt/ui-pro` specific
+    variables: {
+      dark: {
+        background: 'var(--color-gray-950)'
+      },
+      header: {
+        height: '5rem'
+      }
+    },
+    icons: {
+      dark: 'i-ph-moon-duotone',
+      light: 'i-ph-sun-duotone',
+      search: 'i-ph-magnifying-glass-duotone',
+      external: 'i-ph-arrow-up-right',
+      chevron: 'i-ph-caret-down',
+      hash: 'i-ph-hash-duotone'
+    },
+    header: {
+      wrapper: 'lg:mb-0 lg:border-0',
+      links: {
+        trailingIcon: {
+          base: 'w-4 h-4'
+        }
+      },
+      popover: {
+        links: {
+          active: 'dark:bg-gray-950/50',
+          inactive: 'dark:hover:bg-gray-950/50'
+        }
+      },
+      button: {
+        icon: {
+          open: 'i-ph-list',
+          close: 'i-ph-x'
+        }
+      }
+    },
+    navigation: {
+      accordion: {
+        button: {
+          trailingIcon: {
+            base: 'w-4 h-4'
+          }
+        }
+      }
+    },
+    page: {
+      card: {
+        to: 'dark:hover:bg-gray-900/50'
+      }
+    },
+    docs: {
+      search: {
+        fileIcon: {
+          name: 'i-ph-file-text-duotone'
+        }
+      },
+      toc: {
+        button: {
+          trailingIcon: {
+            base: 'w-4 h-4'
+          }
+        }
+      },
+      surround: {
+        icon: {
+          prev: 'i-ph-arrow-left',
+          next: 'i-ph-arrow-right'
+        }
+      }
+    },
+    content: {
+      collapsible: {
+        button: {
+          icon: {
+            base: 'w-3 h-3'
+          }
+        }
+      },
+      prose: {
+        code: {
+          button: {
+            icon: {
+              copy: 'i-ph-copy-duotone',
+              copied: 'i-ph-check-square-duotone'
+            }
+          },
+          icon: {
+            terminal: 'i-ph-terminal-window-duotone'
+          }
+        }
+      }
+    }
+  }
+})