Feat/landing page hero

.eslintrc

@@ -13,20 +13,19 @@
   "rules": {
     "no-console": "off",
     "no-debugger": "off",
+    "prefer-arrow-callback": "off",
     "vue/script-setup-uses-vars": "error",
     "vue/multi-word-component-names": "off",
     "vue/define-macros-order": "off",
-    "tailwindcss/no-custom-classname": [
-      "error",
-      { "whitelist": ["^ninja-(.*)$"] }
-    ],
+    "tailwindcss/no-custom-classname": "off",
+    "tailwindcss/classnames-order": "off",
     "prettier-vue/prettier": [
       "error",
       {
         "printWidth": 80,
         "singleQuote": true,
         "semi": false,
-        "trailingComma": "none"
+        // "trailingComma": "none"
       }
     ]
   }

.npmrc

@@ -0,0 +1,2 @@
+strict-peer-dependencies=false
+shamefully-hoist=true

package.json

@@ -32,12 +32,19 @@
     "@antfu/eslint-config": "^0.27.0",
     "@nuxt/module-builder": "latest",
     "@nuxt/schema": "^3.0.0-rc.11",
-    "eslint": "8.23.1",
+    "@nuxtjs/tailwindcss": "^5.3.3",
+    "@types/prismjs": "^1.26.0",
+    "eslint": "8.24.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-prettier-vue": "4.2.0",
     "eslint-plugin-tailwindcss": "3.6.1",
     "eslint-plugin-vuejs-accessibility": "1.2.0",
     "nuxt": "^3.0.0-rc.11",
-    "standard-version": "^9.5.0"
+    "prism-theme-vars": "0.2.3",
+    "prismjs": "1.28.0",
+    "standard-version": "^9.5.0",
+    "vue-prism-component": "2.0.0",
+    "vue-scrollto": "^2.20.0",
+    "vue3-markdown-it": "^1.0.10"
   }
 }

playground/app.config.ts

@@ -1,5 +1,5 @@
 export default defineAppConfig({
   toaster: {
-    maxToasts: 10
-  }
+    maxToasts: 10,
+  },
 })

playground/app.vue

@@ -1,153 +1,18 @@
-<script setup>
-import { h } from 'vue'
-import CustomToast from './components/CustomToast.vue'
-import AdvancedToast from './components/AdvancedToast.vue'
-import { useNuxtApp } from '#app'
-
-const { $nt } = useNuxtApp()
-let i = 0
-
-function showBasicToast() {
-  i++
-  $nt.show(`Hello, ${i} world!`)
-}
-
-function showCustomToast() {
-  i++
-  $nt.show({
-    content: () =>
-      h(CustomToast, {
-        message: `Hello ${i} from Nuxt module playground!`
-      }),
-    transition: {
-      name: 'toaster'
-    },
-    maxToasts: 5,
-    theme: {
-      containerId: 'nt-container-bottom-right',
-      containerClass: [
-        'absolute',
-        'inset-0',
-        'pointer-events-none',
-        'p-4',
-        'flex',
-        'flex-col-reverse',
-        'items-start',
-        'gap-2'
-      ],
-      wrapperClass: 'pointer-events-auto cursor-pointer'
-    }
-  })
-}
-
-async function showAdvancedToast() {
-  i++
-  const toast = await $nt.show({
-    content: () =>
-      h(AdvancedToast, {
-        message: `Hello ${i} from Nuxt module playground!`
-      }),
-    dismissible: false,
-    maxToasts: 1,
-    theme: {
-      containerId: 'nt-container-top-left',
-      containerClass: [
-        'absolute',
-        'inset-0',
-        'pointer-events-none',
-        'p-4',
-        'flex',
-        'flex-col',
-        'items-end',
-        'gap-2'
-      ],
-      wrapperClass: [
-        'pointer-events-auto',
-        'rounded',
-        'outline-slate-300',
-        'outline-offset-2',
-        'focus:outline',
-        'focus:outline-2',
-        'focus-within:outline',
-        'focus-within:outline-2'
-      ]
-    },
-    transition: {
-      enterActiveClass: 'transition duration-300 ease-out',
-      enterFromClass: 'transform translate-x-full opacity-0',
-      enterToClass: 'transform translate-x-0 opacity-100',
-      leaveActiveClass: 'transition duration-300 ease-in',
-      leaveFromClass: 'transform translate-x-0 opacity-100',
-      leaveToClass: 'transform translate-x-full opacity-0'
-    }
-  })
-
-  toast.el.focus()
-}
-function clearAllToast() {
-  $nt.clearAll()
-}
-function clearTopLeftToast() {
-  $nt.clear('nt-container-top-left')
-}
+<script setup lang="ts">
+const { isDark } = useDarkmode()
 </script>
 
 <template>
-  <div>
-    <p>Nuxt module playground!</p>
-    <button
-      class="m-1 rounded border border-slate-200 px-2 py-1"
-      @click="showBasicToast"
-    >
-      show basic toast
-    </button>
-    <button
-      class="m-1 rounded border border-slate-200 px-2 py-1"
-      @click="showCustomToast"
-    >
-      show custom toast
-    </button>
-    <button
-      class="m-1 rounded border border-slate-200 px-2 py-1"
-      @click="showAdvancedToast"
-    >
-      show advanced toast
-    </button>
-    <button
-      class="m-1 rounded border border-slate-200 px-2 py-1"
-      @click="clearTopLeftToast"
-    >
-      clear advanced toasts
-    </button>
-    <button
-      class="m-1 rounded border border-slate-200 px-2 py-1"
-      @click="clearAllToast"
-    >
-      clear all toast
-    </button>
+  <div :class="isDark ? 'dark' : ''">
+    <Navigation />
+    <NuxtPage />
+    <Footer />
   </div>
 </template>
 
 <style>
-.toaster-enter-active,
-.toaster-leave-active {
-  transform: translateY(0);
-  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
-}
-
-.toaster-enter-from {
-  transform: translateY(100%);
-  opacity: 0;
-}
-
-.toaster-leave-to {
-  opacity: 0;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .toaster-enter-active,
-  .toaster-leave-active {
-    transition: none;
-  }
+html,
+body {
+  font-family: 'Inter', sans-serif;
 }
-</style>
+</style>

playground/assets/css/main.css

@@ -0,0 +1,7 @@
+@import './modules/utilities.css';
+@import './modules/accessibility.css';
+@import './modules/nt.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

playground/assets/css/modules/accessibility.css

@@ -0,0 +1,9 @@
+@layer utilities {
+  .tw-accessibility {
+    @apply outline-none focus-visible:outline-none focus-visible:outline-dashed focus-visible:outline-muted-300 dark:focus-visible:outline-muted-600 focus-visible:outline-offset-2;
+  }
+
+  .tw-accessibility-static {
+    @apply outline-dashed outline-muted-300 dark:outline-muted-600 outline-offset-2;
+  }
+}