Documentation for Nestri (#116)

I have made documentation for Nestri, so everybody easy can find instructions to get started. It will also make it easier for people to help contribute to the documentation. The documentation is built with Nuxt3, [Docus ](https://github.com/nuxt-themes) which uses Nuxt Content. ![image](https://github.com/user-attachments/assets/b30258c3-2267-4710-b8f4-48145e7c98d0) ![image](https://github.com/user-attachments/assets/6ccad52e-b6e1-4c8d-9c0c-bc4fae0227f1)
2025-12-12 08:45:38 +02:00 · 2024-09-27 00:22:53 +02:00
parent bae089e223
commit 390ee2ac0f
32 changed files with 16811 additions and 0 deletions
--- a/apps/docs/tokens.config.ts
+++ b/apps/docs/tokens.config.ts
@@ -0,0 +1,218 @@
+import { defineTheme } from 'pinceau'
+
+export default defineTheme({
+  color: {
+    black: '#0B0A0A',
+    // Primary is modified lightblue
+    primary: {
+      50:  '#fff6ec',
+      100: '#ffebd3',
+      200: '#ffd4a5',
+      300: '#ffb56d',
+      400: '#ff8a32',
+      500: '#ff680a',
+      600: '#ff4f01',
+      700: '#cc3602',
+      800: '#a12b0b',
+      900: '#82260c'
+    },
+    gray: {
+      50: '#FBFBFB',
+      100: '#F6F5F4',
+      200: '#ECEBE8',
+      300: '#DBD9D3',
+      400: '#ADA9A4',
+      500: '#97948F',
+      600: '#67635D',
+      700: '#36332E',
+      800: '#201E1B',
+      900: '#121110'
+    },
+    red: {
+      50: '#FFF9F8',
+      100: '#FFF3F0',
+      200: '#FFDED7',
+      300: '#FFA692',
+      400: '#FF7353',
+      500: '#FF3B10',
+      600: '#BB2402',
+      700: '#701704',
+      800: '#340A01',
+      900: '#1C0301'
+    },
+    blue: {
+      50: '#F2FAFF',
+      100: '#DFF3FF',
+      200: '#C6EAFF',
+      300: '#A1DDFF',
+      400: '#64C7FF',
+      500: '#1AADFF',
+      600: '#0069A6',
+      700: '#014267',
+      800: '#002235',
+      900: '#00131D'
+    },
+    green: {
+      50: '#ECFFF7',
+      100: '#DEFFF1',
+      200: '#C3FFE6',
+      300: '#86FBCB',
+      400: '#3CEEA5',
+      500: '#0DD885',
+      600: '#00B467',
+      700: '#006037',
+      800: '#002817',
+      900: '#00190F'
+    },
+    yellow: {
+      50: '#FFFCEE',
+      100: '#FFF6D3',
+      200: '#FFF0B1',
+      300: '#FFE372',
+      400: '#FFDC4E',
+      500: '#FBCA05',
+      600: '#CBA408',
+      700: '#614E02',
+      800: '#292100',
+      900: '#1B1500'
+    },
+    shadow: {
+      initial: '{color.gray.400}',
+      dark: '{color.gray.800}'
+    }
+  },
+  shadow: {
+    xs: '0px 1px 2px 0px {color.shadow}',
+    sm: '0px 1px 3px 0px {color.shadow}, 0px 1px 2px -1px {color.shadow}',
+    md: '0px 4px 6px -1px {color.shadow}, 0px 2px 4px -2px {color.shadow}',
+    lg: '0px 10px 15px -3px {color.shadow}, 0px 4px 6px -4px {color.shadow}',
+    xl: '0px 20px 25px -5px {color.shadow}, 0px 8px 10px -6px {color.shadow}',
+    '2xl': '0px 25px 50px -12px {color.shadow}',
+    none: '0px 0px 0px 0px transparent'
+  },
+  docus: {
+    $schema: {
+      title: 'All the configurable tokens from Docus.',
+      tags: [
+        '@studioIcon material-symbols:docs'
+      ]
+    },
+    body: {
+      backgroundColor: {
+        initial: '{color.white}',
+        dark: '{color.black}'
+      },
+      color: {
+        initial: '{color.gray.800}',
+        dark: '{color.gray.200}'
+      },
+      fontFamily: '{font.sans}'
+    },
+    header: {
+      height: '64px',
+      logo: {
+        height: {
+          initial: '{space.6}',
+          sm: '{space.7}'
+        }
+      },
+      title: {
+        fontSize: '{fontSize.2xl}', 
+        fontWeight: '{fontWeight.bold}', 
+        color: {
+          static: {
+            initial: '{color.gray.900}', 
+            dark: '{color.gray.100}', 
+          },
+          hover: '{color.primary.500}', 
+        }
+      }
+    },
+    footer: { height: { initial: '145px', sm: '100px' }, padding: '{space.4} 0' },
+    readableLine: '78ch',
+    loadingBar: {
+      height: '3px',
+      gradientColorStop1: '#00dc82',
+      gradientColorStop2: '#34cdfe',
+      gradientColorStop3: '#0047e1'
+    },
+    search: {
+      backdropFilter: 'blur(24px)',
+      input: {
+        borderRadius: '{radii.2xs}',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: {
+          initial: '{color.gray.200}',
+          dark: 'transparent'
+        },
+        fontSize: '{fontSize.sm}',
+        gap: '{space.2}',
+        padding: '{space.2} {space.4}',
+        backgroundColor: {
+          initial: '{color.gray.200}',
+          dark: '{color.gray.800}'
+        },
+      },
+      results: {
+        window: {
+          marginX: {
+            initial: '0',
+            sm: '{space.4}'
+          },
+          borderRadius: {
+            initial: 'none',
+            sm: '{radii.xs}'
+          },
+          marginTop: {
+            initial: '0',
+            sm: '20vh'
+          },
+          maxWidth: '640px',
+          maxHeight: {
+            initial: '100%',
+            sm: '320px'
+          },
+        },
+        selected: {
+          backgroundColor: {
+            initial: '{color.gray.300}',
+            dark: '{color.gray.700}'
+          },
+        },
+        highlight: {
+          color: 'white',
+          backgroundColor: '{color.primary.500}'
+        }
+      }
+    }
+  },
+  typography: {
+    color: {
+      primary: {
+        50: '{color.primary.50}',
+        100: '{color.primary.100}',
+        200: '{color.primary.200}',
+        300: '{color.primary.300}',
+        400: '{color.primary.400}',
+        500: '{color.primary.500}',
+        600: '{color.primary.600}',
+        700: '{color.primary.700}',
+        800: '{color.primary.800}',
+        900: '{color.primary.900}'
+      },
+      secondary: {
+        50: '{color.gray.50}',
+        100: '{color.gray.100}',
+        200: '{color.gray.200}',
+        300: '{color.gray.300}',
+        400: '{color.gray.400}',
+        500: '{color.gray.500}',
+        600: '{color.gray.600}',
+        700: '{color.gray.700}',
+        800: '{color.gray.800}',
+        900: '{color.gray.900}'
+      }
+    }
+  }
+})