feat: add sitemap and improve typography for selfhosting

Author: codebender828

app.vue

@@ -16,8 +16,6 @@
     </NuxtLayout>
   </div>
 </template>
-
-<script>
-import '@fontsource/ibm-plex-mono';
-import '@fontsource/dm-sans';
-</script>
+<style>
+@import url('@/styles/typography/all.css');
+</style>

assets/fonts/dm-sans-all-400-normal.woff

@@ -34,13 +34,13 @@
           font-size="1.8em"
           :as="feature.icon"
         />
-        <chakra.h3
+        <chakra.h2
           :color="useColorModeValue('emerald.600', 'white').value"
           font-weight="bold"
           font-size="1.1rem"
         >
           {{ feature.title }}
-        </chakra.h3>
+        </chakra.h2>
         <chakra.p>
           {{ feature.description }}
         </chakra.p>

assets/fonts/dm-sans-all-500-normal.woff

@@ -1,11 +1,10 @@
-const baseUrl = 'https://github.com/chakra-ui/chakra-ui-vue-next'
+const baseUrl = 'https://github.com/chakra-ui/chakra-ui-vue-next';
 
-const siteUrl = 'https://vue.chakra-ui.com'
+const siteUrl = 'https://vue.chakra-ui.com';
 const siteDescription =
-  'Simple, Modular and Accessible UI Components for your Vue Applications.'
-const siteName =
-  'Chakra UI Vue: Simple, Modular and Accessible UI Components for your Vue Applications.'
-const siteLang = 'en'
+  'Simple, Modular and Accessible UI Components for your Vue Applications.';
+const siteName = 'Chakra UI Vue | Build accessible Vue apps with speed';
+const siteLang = 'en';
 
 const siteConfig = {
   repo: {
@@ -52,7 +51,7 @@ const siteConfig = {
       ]
     }
   }
-}
+};
 
-export default siteConfig
-export { baseUrl, siteDescription, siteLang, siteName, siteUrl }
+export default siteConfig;
+export { baseUrl, siteDescription, siteLang, siteName, siteUrl };

assets/fonts/dm-sans-all-700-normal.woff

@@ -22,8 +22,8 @@ const breakpoints = {
   md: '48em', // 768px
   lg: '62em', // 992px
   xl: '80em', // 1280px
-  '2xl': '96em', // 1536px
-}
+  '2xl': '96em' // 1536px
+};
 ```
 
 To make styles responsive, you can use either the array or object syntax.
@@ -35,19 +35,15 @@ is the recommended method.
 
 Let's say you have a `CBox` with the following properties:
 
-```vue
-<c-box bg='red.200' w='400px'>
-  This is a box
-</c-box>
+```html
+<c-box bg="red.200" w="400px"> This is a box </c-box>
 ```
 
 To make the `width` or `w` responsive using the array syntax, here's what you
 need to do:
 
-```vue
-<c-box bg='red.200' :w='[300, 400, 500]'>
-  This is a box
-</c-box>
+```html
+<c-box bg="red.200" :w="[300, 400, 500]"> This is a box </c-box>
 ```
 
 To interpret array responsive values, Chakra UI Vue converts the values defined in
@@ -61,11 +57,11 @@ const breakpoints = {
   md: '48em', // 768px
   lg: '62em', // 992px
   xl: '80em', // 1280px
-  '2xl': '96em', // 1536px
-}
+  '2xl': '96em' // 1536px
+};
 
 // Internally, we transform to this
-const breakpoints = ['0em', '30em', '48em', '62em', '80em', '96em']
+const breakpoints = ['0em', '30em', '48em', '62em', '80em', '96em'];
 ```
 
 Here's how to interpret this syntax:
@@ -84,14 +80,14 @@ undefined alias key will define the base, non-responsive value.
 
 Let's say you have a `CText` that looks like this:
 
-```vue
-<c-text fontSize='40px'>This is a text</c-text>
+```html
+<c-text fontSize="40px">This is a text</c-text>
 ```
 
 To make the `fontSize` responsive using the object syntax, here's what you need
 to do:
 
-```vue
+```html
 <c-text :fontSize="{ base: '24px', md: '40px', lg: '56px' }">
   This is responsive text
 </c-text>
@@ -111,15 +107,15 @@ Here's how to interpret this syntax:
 This works for every style prop in the theme specification, which means you can
 change the style of most properties at a given breakpoint.
 
-```vue
+```html
 <div>
   <c-box
     :height="{
       base: '100%', // 0-48em
       md: '50%', // 48em-80em,
       xl: '25%', // 80em+
     }"
-    bg='teal.400'
+    bg="teal.400"
     :width="[
       '100%', // 0-30em
       '50%', // 30em-48em
@@ -130,11 +126,9 @@ change the style of most properties at a given breakpoint.
   {/* responsive font size */}
   <c-box :fontSize="['sm', 'md', 'lg', 'xl']">Font Size</c-box>
   {/* responsive margin */}
-  <c-box :mt="[2, 4, 6, 8]" width='full' height='24px' bg='tomato' />
+  <c-box :mt="[2, 4, 6, 8]" width="full" height="24px" bg="tomato" />
   {/* responsive padding */}
-  <c-box bg='papayawhip' :p="[2, 4, 6, 8]">
-    Padding
-  </c-box>
+  <c-box bg="papayawhip" :p="[2, 4, 6, 8]"> Padding </c-box>
 </div>
 ```
 
@@ -143,7 +137,7 @@ change the style of most properties at a given breakpoint.
 This shortcut is an alternative to writing media queries out by hand. Given the
 following:
 
-```vue
+```html
 <c-box :width="[1, 1 / 2, 1 / 4]" />
 ```
 
@@ -180,23 +174,12 @@ To define custom breakpoints, just pass them as an object into the theme.
 > Note: Ensure the css unit of your breakpoints are the same. Use all `px` or
 > all `em`, don't mix them.
 
-```vue
-// 1. Import the utilities
-import { extendTheme } from '@chakra-ui/vue-next'
-
-// 2. Update the breakpoints as key-value pairs
-const breakpoints = {
-  sm: '320px',
-  md: '768px',
-  lg: '960px',
-  xl: '1200px',
-  '2xl': '1536px',
-}
-
-// 3. Extend the theme
-const theme = extendTheme({ breakpoints })
-
-// 4. Now you can use the custom breakpoints
+```html
+// 1. Import the utilities import { extendTheme } from '@chakra-ui/vue-next' //
+2. Update the breakpoints as key-value pairs const breakpoints = { sm: '320px',
+md: '768px', lg: '960px', xl: '1200px', '2xl': '1536px', } // 3. Extend the
+theme const theme = extendTheme({ breakpoints }) // 4. Now you can use the
+custom breakpoints
 <template>
   <c-box :width="{ base: '100%', sm: '50%', md: '25%' }" />
 </template>
@@ -212,40 +195,40 @@ Here's a simple example of a marketing page component that uses a stacked layout
 on small screens, and a side-by-side layout on larger screens **(resize your
 browser to see it in action)**:
 
-```vue
-<c-box p='4' :display="{ md: 'flex' }">
-  <c-box flexShrink='0'>
+```html
+<c-box p="4" :display="{ md: 'flex' }">
+  <c-box flexShrink="0">
     <c-image
-      borderRadius='lg'
+      borderRadius="lg"
       :width="{ md: 40 }"
-      src='https://bit.ly/2jYM25F'
-      alt='Woman paying for a purchase'
+      src="https://bit.ly/2jYM25F"
+      alt="Woman paying for a purchase"
     />
   </c-box>
   <c-box :mt="{ base: 4, md: 0 }" :ml="{ md: 6 }">
     <c-text
-      fontWeight='bold'
-      textTransform='uppercase'
-      fontSize='sm'
-      letterSpacing='wide'
-      color='teal.600'
+      fontWeight="bold"
+      textTransform="uppercase"
+      fontSize="sm"
+      letterSpacing="wide"
+      color="teal.600"
     >
       Marketing
     </c-text>
     <c-link
-      mt='1'
-      display='block'
-      fontSize='lg'
-      lineHeight='normal'
-      fontWeight='semibold'
-      href='#'
+      mt="1"
+      display="block"
+      fontSize="lg"
+      lineHeight="normal"
+      fontWeight="semibold"
+      href="#"
     >
       Finding customers for your new business
     </c-link>
-    <c-text mt='2' color='gray.500'>
+    <c-text mt="2" color="gray.500">
       Getting a new business off the ground is a lot of hard work. Here are five
       ideas you can use to find your first customers.
     </c-text>
   </c-box>
 </c-box>
-```
+```

assets/fonts/dm-sans-latin-400-normal.woff2

@@ -11,10 +11,13 @@ export default defineNuxtConfig({
     prerender: {
       routes: [
         '/',
-        '/getting-started',
+        '/getting-started/**/*',
+        '/styled-system/**/*',
+        '/components/**/*',
+        '/sitemap.xml'
       ]
     },
-    serveStatic: true,
+    serveStatic: true
   },
   app: {
     head: {
@@ -39,10 +42,21 @@ export default defineNuxtConfig({
   modules: [
     '@nuxt/content',
     '~/modules/content-chunks.module.ts',
-    '@chakra-ui/nuxt-next'
+    '@chakra-ui/nuxt-next',
+    '@nuxtjs/fontaine',
+    '@nuxtjs/html-validator',
+    '@nuxtjs/robots'
   ],
-  plugins: ['~/plugins/typography.ts'],
-  css: ['~/styles/fonts.scss', '~/styles/prism.scss'],
+  fontMetrics: {
+    fonts: [
+      'DM Sans',
+      {
+        family: 'DM Sans',
+        src: '@/styles/typography/files/dm-sans-all-400-normal.woff2'
+      }
+    ]
+  },
+  css: ['@/styles/typography/all.css', '~/styles/prism.scss'],
   content: {
     // documentDriven: true,
     markdown: {

assets/fonts/dm-sans-latin-500-normal.woff2

@@ -21,14 +21,16 @@
     "@commitlint/config-conventional": "^17.3.0",
     "@nuxt/content": "^2.4.3",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
+    "@nuxtjs/fontaine": "^0.2.5",
+    "@nuxtjs/html-validator": "^1.2.5",
     "@typescript-eslint/parser": "^5.47.0",
     "add": "^2.0.6",
     "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.8.0",
     "husky": "^8.0.2",
-    "nuxt": "^3.3.1",
+    "nuxt": "^3.4.2",
     "prettier": "^2.8.1",
     "typescript": "^4.9.4"
   },
@@ -41,6 +43,7 @@
     "@fontsource/ibm-plex-mono": "^4.5.13",
     "@nuxt/vite-builder": "^3.0.0",
     "@nuxtjs/color-mode": "^3.2.0",
+    "@nuxtjs/robots": "^3.0.0",
     "@types/prismjs": "^1.26.0",
     "@vueuse/core": "^9.13.0",
     "add": "^2.0.6",
@@ -51,6 +54,7 @@
     "rehype-prism-plus": "^1.5.0",
     "remark-prism": "^1.3.6",
     "sass": "^1.56.2",
+    "sitemap": "^7.1.1",
     "slugify": "^1.6.5",
     "unplugin-vue-components": "^0.24.0",
     "vue": "^3.2.47",