feat(katzencore): Device Addon added, with test site

maxlkatze · Aug 14, 2024 · 753a0f2 · 753a0f2
1 parent 3b45836
commit 753a0f2
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 0 deletions.
diff --git a/playground/pages/addon_device.vue b/playground/pages/addon_device.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const { isMobile, isTablet, isDesktop } = useDeviceType()
+</script>
+
+<template>
+  <div>
+    <h1>Device</h1>
+    <p>Mobile: {{ isMobile }}</p>
+    <p>Tablet: {{ isTablet }}</p>
+    <p>Desktop: {{ isDesktop }}</p>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
@@ -56,6 +56,22 @@ const customImage = useKatzeImage({ key: 'custom_image', default: { src: '/image
           :alt="customImage.alt"
         >
       </div>
+
+      <div class="flex flex-row gap-5">
+        <NuxtLink
+          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+          to="/addon_device"
+        >
+          Device Addon
+        </NuxtLink>
+
+        <NuxtLink
+          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+          to="/animation_test"
+        >
+          Animation Addon
+        </NuxtLink>
+      </div>
     </div>
   </div>
 </template>

diff --git a/src/module.ts b/src/module.ts
@@ -105,6 +105,7 @@ export default defineNuxtModule<ModuleOptions>({
     addImportsDir(resolver.resolve('runtime/middleware'))
 
     addPlugin(resolver.resolve('runtime/plugins/chtml.plugin'))
+    addPlugin(resolver.resolve('runtime/plugins/device.plugin'))
 
     addLayout({
       filename: 'cms-layout.vue',