add alpine example for Hero

yuheiy · Oct 4, 2023 · 20c3b86 · 20c3b86
1 parent 0f77654
commit 20c3b86
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -10,9 +10,22 @@ type Props<Tag extends HTMLTag> = Polymorphic<{
 const { as: Tag = 'div', class: className, title, description, ...props } = Astro.props;
 ---
 
-<Tag {...props} class:list={['my-12', className]}>
+<Tag x-data="hero" {...props} class:list={['my-12', className]}>
   <h1 class="text-4xl font-bold kerning-all">
     {title}
   </h1>
   {description && <p class="mt-8 text-xl">{description}</p>}
 </Tag>
+
+<script>
+  // eslint-disable-next-line import/no-named-as-default
+  import Alpine from 'alpinejs';
+
+  Alpine.data('hero', () => ({
+    init() {
+      if (import.meta.env.DEV) {
+        console.log('init hero component');
+      }
+    },
+  }));
+</script>
diff --git a/src/scripts/components/example.component.ts b/src/scripts/components/example.component.ts
@@ -4,7 +4,7 @@ export default function (Alpine: Alpine) {
   Alpine.data('example', () => ({
     init() {
       if (import.meta.env.DEV) {
-        console.log('init component');
+        console.log('init example component');
       }
     },
   }));

diff --git a/src/scripts/stores/example.store.ts b/src/scripts/stores/example.store.ts
@@ -4,7 +4,7 @@ export default function (Alpine: Alpine) {
   Alpine.store('example', {
     init() {
       if (import.meta.env.DEV) {
-        console.log('init store');
+        console.log('init example store');
       }
     },
   });