add story: og images

Author: sacrosanctic

.storybook/preview.ts

@@ -8,6 +8,50 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    viewport: {
+      viewports: {
+        mobile1: {
+          name: 'Small mobile',
+          styles: {
+            width: '320px',
+            height: '568px',
+          },
+          type: 'mobile',
+        },
+        mobile2: {
+          name: 'Large mobile',
+          styles: {
+            width: '414px',
+            height: '896px',
+          },
+          type: 'mobile',
+        },
+        tablet: {
+          name: 'Tablet',
+          styles: {
+            width: '834px',
+            height: '1112px',
+          },
+          type: 'tablet',
+        },
+        desktop: {
+          name: 'Desktop',
+          styles: {
+            width: '1024px',
+            height: '1280px',
+          },
+          type: 'desktop',
+        },
+        ogImage: {
+          name: 'OG Image (1200×630)',
+          styles: {
+            width: '1200px',
+            height: '630px',
+          },
+          type: 'desktop',
+        },
+      },
+    },
   },
 }
 

app/components/OgImage/Default.stories.ts

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@nuxtjs/storybook'
+import Component from './Default.vue'
+
+const meta = {
+  component: Component,
+  tags: ['autodocs'],
+  decorators: [
+    () => ({
+      template: '<div style="width:1200px;height:630px; outline:1px solid red"><story/></div>',
+    }),
+  ],
+  argTypes: {
+    primaryColor: {
+      control: { type: 'color' },
+      description: 'Primary color used throughout the OG image',
+    },
+    title: {
+      control: { type: 'text' },
+      description: 'Main title displayed in the OG image',
+    },
+    description: {
+      control: { type: 'text' },
+      description: 'Description text (supports **bold** markdown)',
+    },
+  },
+} satisfies Meta<typeof Component>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const CustomContent: Story = {
+  args: {
+    title: 'Custom Package',
+    description: 'an awesome **customizable** OG image generator',
+    primaryColor: '#f59e0b',
+  },
+}

app/components/OgImage/Package.stories.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@nuxtjs/storybook'
+import Component from './Package.vue'
+
+const meta = {
+  component: Component,
+  decorators: [
+    () => ({
+      template: '<div style="width:1200px;height:630px; outline:1px solid red"><story/></div>',
+    }),
+  ],
+} satisfies Meta<typeof Component>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Package: Story = {
+  args: { name: 'vue', version: 'latest' },
+}