feat(katzencore): Added Animation Library and added back default Video

playground/nuxt.config.ts

@@ -10,7 +10,7 @@ export default defineNuxtConfig({
       {
         name: 'admin',
         password: 'admin123',
-      }
-    ]
+      },
+    ],
   },
 })

playground/pages/animation_test.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-
 const section1 = ref<HTMLElement | null>(null)
-const animation = useScrollAnimation({element:section1})
+const animation = useScrollAnimation({ element: section1 })
 
-const globalScroll = useScrollAnimation({global: true})
-const screenScroll = useScrollAnimation({screenHeight: true})
+const globalScroll = useScrollAnimation({ global: true })
+const screenScroll = useScrollAnimation({ screenHeight: true })
 </script>
 
 <template>
@@ -16,19 +15,20 @@ const screenScroll = useScrollAnimation({screenHeight: true})
       </div>
     </div>
 
-
-    <div class="fixed top-0 left-0 font-bold text-2xl text-black bg-white p-4 border border-black rounded-lg">
-      <span>GlobalScroll: {{globalScroll}}</span>
+    <div class="fixed bottom-0 left-0 font-bold text-2xl text-black bg-white p-4 border border-black rounded-lg">
+      <span>GlobalScroll: {{ globalScroll }}</span>
 
       <br>
 
-      <span>ScreenScroll: {{screenScroll}}</span>
-
+      <span>ScreenScroll: {{ screenScroll }}</span>
     </div>
 
-    <div class="h-screen w-full bg-gray-100 flex flex-col items-center justify-between" ref="section1">
+    <div
+      ref="section1"
+      class="h-screen w-full bg-gray-100 flex flex-col items-center justify-between"
+    >
       <h2>SECTION 1</h2>
-      <p>{{animation}}</p>
+      <p>{{ animation }}</p>
     </div>
     <div class="h-screen w-full bg-red-100 flex flex-col items-center justify-center">
       <h2>SECTION 2</h2>

playground/pages/index.vue

@@ -8,10 +8,19 @@ const buttonText = useKatzeText({ key: 'button_text', default: 'The text on this
 const richTextExample = useKatzeRichText({ key: 'rich_text_example',
   default: '<span>This is a rich text example. You can edit this text add italics and boldness and more.</span>',
 })
+
+const customImage = useKatzeImage({ key: 'custom_image', default: { src: '/images/test.svg', alt: 'Placeholder Image' }})
 </script>
 
 <template>
   <div class="size-full flex flex-col items-center">
+    <NuxtLink
+      class="bg-red-500 hover:bg-red-700 text-white font-bold p-4 m-2 w-1/2 text-center transition-colors
+       rounded"
+      to="/cms"
+    >
+      Go to CMS
+    </NuxtLink>
     <h1 class="text-4xl font-bold font-mono py-20">
       Katze CMS Playground
     </h1>
@@ -22,19 +31,31 @@ const richTextExample = useKatzeRichText({ key: 'rich_text_example',
       >
         {{ editableText }}
       </p>
-      <button
+      <NuxtLink
         class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
         kat-e="button_text"
+        to="/animation_test"
       >
-        {{ buttonText }}
-      </button>
+        Hardcoded Text and {{ buttonText }}
+      </NuxtLink>
 
       <p
         class="text-2xl"
         kat-e="rich_text_example"
       >
         <katze-rich-text :content="richTextExample" />
       </p>
+
+      <div
+        class="w-52 h-52"
+        kat-e="custom_image"
+      >
+        <img
+          class="size-full"
+          :src="customImage.src"
+          :alt="customImage.alt"
+        >
+      </div>
     </div>
   </div>
 </template>

src/runtime/components/views/EditView.vue

@@ -101,12 +101,19 @@ onMounted(
               element.addEventListener('mouseleave', () => {
                 hoveredElement.value = null
               })
+              element.removeAttribute('href')
+              element.removeAttribute('target')
               element.addEventListener('click', (event) => {
                 if (selectedElement.value === element) {
                   return
                 }
                 selectedElement.value = element
 
+                //cancel click event
+                event.preventDefault()
+                event.stopPropagation()
+                event.stopImmediatePropagation()
+
                 const attribute = selectedElement.value.getAttribute('kat-e')
                 if (attribute) {
                   const component = uiStore.getComponents(attribute)

src/runtime/composables/useUiComponents.ts

@@ -1,14 +1,19 @@
 import { storeToRefs } from 'pinia'
 import { ref, watch } from 'vue'
 import { ComponentType, useUiStore } from '../stores/UiStore'
-import type { KatzenUIComponent, KatzenUIOptions } from '~/src/runtime/stores/UiStore'
+import type { KatzenUIComponent } from '../stores/UiStore'
 import { useRuntimeConfig } from '#imports'
 
 export interface ImageContent {
   src: string
   alt: string
 }
 
+export interface KatzenUIOptions {
+  key: string
+  default?: string | ImageContent
+}
+
 let fetchedContent: Record<string, unknown> | undefined
 
 export const setFetchedContent = (content: Record<string, unknown>) => {
@@ -22,7 +27,7 @@ export const getContent = () => {
   return useRuntimeConfig().public.content as Record<string, unknown> || {}
 }
 
-export const getContentByKey = <T = string>(key: string, defaultValue: string = '') => {
+export const getContentByKey = <T = string>(key: string, defaultValue: string|ImageContent = '') => {
   const content = getContent()
   if (content[key]) {
     return content[key] as T || defaultValue
@@ -39,7 +44,7 @@ export const useKatzeRichText = (options: KatzenUIOptions) => {
 
 export const useKatzeImage = (options: KatzenUIOptions) => {
   const uiStore = useUiStore()
-  const component: KatzenUIComponent = { type: ComponentType.Image, options, content: getContentByKey(options.key) }
+  const component: KatzenUIComponent = { type: ComponentType.Image, options, content: getContentByKey(options.key, options.default) }
   uiStore.addToContextStack(component)
   return reactiveProperty<ImageContent>(options.key)
 }

src/runtime/stores/UiStore.ts

@@ -1,9 +1,5 @@
 import { defineStore } from 'pinia'
-
-export interface KatzenUIOptions {
-  key: string
-  default?: string
-}
+import type {KatzenUIOptions} from '../composables/useUiComponents';
 
 export enum ComponentType {
   Text = 'text',