feat(docs): layout styles

docs/src/.vuepress/assets/index.css

@@ -1,10 +1,16 @@
 :root {
   --primary: #BB86FC;
   --secondary: #03dac5;
+  --content-width: 100%;
+}
+
+.dark {
+  --c-text-lighter: white !important;
+  --c-text: white !important;
 }
 
 html, body {
-  @apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-gray-300;
+  @apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-black;
 }
 
 .home {
@@ -12,7 +18,16 @@ html, body {
   @apply !px-0;
 }
 
-.container {
+.page, .page-meta, .footer, .sidebar {
+  @apply dark:(!bg-black text-white);
+}
+
+.theme-default-content {
+  @apply overflow-scroll md:overflow-hidden;
+}
+
+.navbar {
+  @apply dark:bg-gray-900;
 }
 
 h1 {

docs/src/.vuepress/theme/layouts/default.vue

@@ -16,10 +16,9 @@ import ParentLayout from '@vuepress/theme-default/lib/client/layouts/Layout.vue'
 </template>
 <style>
 .page-footer {
-  padding: 2.5rem;
+  @apply dark:(text-white bg-black) pt-[2rem];
   border-top: 1px solid var(--c-border);
   text-align: center;
-  color: var(--c-text-lighter);
   transition: border-color var(--t-color);
 }
 </style>

docs/src/.vuepress/windi.config.ts

@@ -7,7 +7,7 @@ export default defineConfig({
   extract: {
     include: [
       resolve(__dirname, '../../components/**/*.{ts,md,vue}'),
-      resolve(__dirname, '../src/**/*.{ts,md,vue}')
+      resolve(__dirname, '../**/*.{ts,md,vue}')
     ],
   },
 

docs/src/examples/index.md

@@ -1,3 +1,25 @@
+---
+title: Basic Example
+tags: ['examples', 'basic', 'get-started', 'quickstart']
+---
+
 # Basic Example
 
+This is a basic example to help you quickly get started building your own graphs. On the bottom left you see the
+Controls and on the bottom right the MiniMap component. You can see different node types (input, default, output), edge
+types (bezier, step and smoothstep), edge labels and custom styles.
 
+<div class="mt-6">
+  <iframe src="https://codesandbox.io/embed/vue-flow-basic-example-3hq147?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FBasic.vue&moduleview=1&theme=dark"
+     class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
+     title="Vue Flow: Basic Example"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
+  <iframe src="https://codesandbox.io/embed/vue-flow-basic-example-3hq147?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FBasic.vue&moduleview=1&theme=light"
+     class="block dark:hidden h-full w-full min-h-[75vh]"
+     title="Vue Flow: Basic Example"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
+</div>