Add support for few more item type in blog

Author: VovaStelmashchuk

app/components/blog/ImageItem.vue

@@ -1,11 +1,10 @@
 <template>
-    <div class="mb-4 flex justify-center">
-        <img 
-            :src="imageUrl" 
-            :alt="imageAlt || ''" 
-            class="w-full rounded-lg"
-        />
-    </div>
+    <figure class="mb-4 flex flex-col items-center">
+        <img :src="imageUrl" :alt="imageAlt || ''" class="w-full rounded-lg" />
+        <figcaption v-if="imageAlt" class="mt-2 text-sm text-accent-secondary text-center italic">
+            {{ imageAlt }}
+        </figcaption>
+    </figure>
 </template>
 
 <script setup lang="ts">
@@ -14,4 +13,3 @@ const props = defineProps<{
     imageAlt?: string
 }>()
 </script>
-

app/components/blog/LinkItem.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="mb-4">
+        <a :href="linkUrl" class="inline-flex items-center text-accent-primary hover:underline font-medium"
+            target="_blank" rel="noopener noreferrer">
+            {{ linkText }}
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+            </svg>
+        </a>
+    </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    linkUrl: string
+    linkText: string
+}>()
+</script>

app/components/blog/TagsItem.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="mb-6 flex flex-wrap gap-2">
+        <MainBadge v-for="tag in tags" :key="tag" variant="info" :label="tag" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import MainBadge from '~~/app/components/MainBadge.vue'
+
+defineProps<{
+    tags: string[]
+}>()
+</script>

app/components/blog/TextItem.vue

@@ -19,7 +19,8 @@
                 </code>
             </template>
             <template v-else-if="part.type === 'link'">
-                <a :href="part.url" class="text-accent-primary underline hover:text-accent-primary/80" target="_blank" rel="noopener noreferrer">
+                <a :href="part.url" class="text-accent-primary underline hover:text-accent-primary/80" target="_blank"
+                    rel="noopener noreferrer">
                     {{ part.text }}
                 </a>
             </template>
@@ -29,6 +30,10 @@
             <template v-else-if="part.type === 'linebreak'">
                 <br />
             </template>
+            <template v-else-if="part.type === 'image'">
+                <img :src="part.url" :alt="part.text || ''"
+                    class="inline-block max-w-full h-8 mx-1 align-middle rounded hover:opacity-90 transition-opacity cursor-zoom-in" />
+            </template>
         </span>
     </p>
 </template>
@@ -41,7 +46,7 @@ const props = defineProps<{
 }>()
 
 interface TextPart {
-    type: 'text' | 'bold' | 'italic' | 'boldItalic' | 'code' | 'link' | 'strikethrough' | 'linebreak'
+    type: 'text' | 'bold' | 'italic' | 'boldItalic' | 'code' | 'link' | 'strikethrough' | 'linebreak' | 'image'
     content?: string
     text?: string
     url?: string
@@ -50,7 +55,7 @@ interface TextPart {
 const parsedParts = computed((): TextPart[] => {
     const parts: TextPart[] = []
     const text = props.text
-    
+
     if (!text) {
         return parts
     }
@@ -66,51 +71,54 @@ const parsedParts = computed((): TextPart[] => {
     const findMatches = (regex: RegExp, type: string) => {
         const matches: Array<{ type: string; start: number; end: number; groups: RegExpMatchArray }> = []
         let match: RegExpExecArray | null
-        
+
         // Reset regex lastIndex
         regex.lastIndex = 0
-        
+
         while ((match = regex.exec(text)) !== null) {
             matches.push({
                 type,
                 start: match.index,
                 end: match.index + match[0].length,
                 groups: match
             })
-            
+
             // Prevent infinite loop on zero-length matches
             if (match[0].length === 0) {
                 regex.lastIndex++
             }
         }
-        
+
         return matches
     }
 
     // Find all matches for each pattern type
     // Order matters: process more specific patterns first (e.g., boldItalic before bold/italic)
     const allMatches: Array<{ type: string; start: number; end: number; groups: RegExpMatchArray }> = []
-    
+
     // Bold+Italic (***text*** or ___text___)
     allMatches.push(...findMatches(/(\*\*\*|___)(.+?)\1/g, 'boldItalic'))
-    
+
     // Code (inline code - process first to avoid parsing inside code blocks)
     allMatches.push(...findMatches(/`([^`\n]+)`/g, 'code'))
-    
+
     // Links ([text](url))
     allMatches.push(...findMatches(/\[([^\]]+)\]\(([^)]+)\)/g, 'link'))
-    
+
+    // Inline Images (![alt](url))
+    allMatches.push(...findMatches(/!\[([^\]]*)\]\(([^)]+)\)/g, 'image'))
+
     // Strikethrough (~~text~~)
     allMatches.push(...findMatches(/~~(.+?)~~/g, 'strikethrough'))
-    
+
     // Bold (**text** or __text__)
     // Note: We check these are not part of boldItalic by processing boldItalic first and filtering overlaps
     allMatches.push(...findMatches(/(\*\*|__)([^*_\n]+?)\1/g, 'bold'))
-    
+
     // Italic (*text* or _text_)
     // Must have word boundary to avoid matching parts of bold or code
     allMatches.push(...findMatches(/(?<![*_])(?<!\w)(\*|_)([^*_\n]+?)\1(?![*_])(?!\w)/g, 'italic'))
-    
+
     // Line breaks (two spaces + newline or double newline)
     allMatches.push(...findMatches(/  \n|\n\n/g, 'linebreak'))
 
@@ -122,17 +130,17 @@ const parsedParts = computed((): TextPart[] => {
     for (let i = 0; i < allMatches.length; i++) {
         const current = allMatches[i] as { type: string; start: number; end: number; groups: RegExpMatchArray }
         let shouldAdd = true
-        
+
         // Check if current overlaps with any already filtered match
         for (let j = filteredMatches.length - 1; j >= 0; j--) {
             const existing = filteredMatches[j] as { type: string; start: number; end: number; groups: RegExpMatchArray }
             const overlaps = !(current.end <= existing.start || current.start >= existing.end)
-            
+
             if (overlaps) {
                 // If current is longer, replace the existing match
                 const currentLength = current.end - current.start
                 const existingLength = existing.end - existing.start
-                
+
                 if (currentLength > existingLength) {
                     filteredMatches.splice(j, 1)
                 } else {
@@ -142,24 +150,24 @@ const parsedParts = computed((): TextPart[] => {
                 }
             }
         }
-        
+
         if (shouldAdd) {
             filteredMatches.push(current)
         }
     }
-    
+
     // Re-sort after filtering (positions may have changed)
     filteredMatches.sort((a, b) => a.start - b.start)
 
     // Build parts array
     let lastPos = 0
-    
+
     for (const match of filteredMatches) {
         // Add text before this match
         if (match.start > lastPos) {
             addText(text.substring(lastPos, match.start))
         }
-        
+
         // Add the matched part
         switch (match.type) {
             case 'boldItalic':
@@ -177,17 +185,20 @@ const parsedParts = computed((): TextPart[] => {
             case 'link':
                 parts.push({ type: 'link', text: match.groups[1], url: match.groups[2] })
                 break
+            case 'image':
+                parts.push({ type: 'image', text: match.groups[1], url: match.groups[2] })
+                break
             case 'strikethrough':
                 parts.push({ type: 'strikethrough', content: match.groups[1] })
                 break
             case 'linebreak':
                 parts.push({ type: 'linebreak' })
                 break
         }
-        
+
         lastPos = match.end
     }
-    
+
     // Add remaining text
     if (lastPos < text.length) {
         addText(text.substring(lastPos))
@@ -201,4 +212,3 @@ const parsedParts = computed((): TextPart[] => {
     return parts
 })
 </script>
-

app/pages/admin/blog/[slug].vue

@@ -23,8 +23,7 @@
                 <textarea v-model="markdown" rows="24" placeholder="markdown"
                     class="w-full p-3 rounded bg-transparent border border-separator-primary text-label-primary font-mono"></textarea>
                 <div class="flex items-center gap-2">
-                    <button class="bg-accent-primary text-white px-4 py-2 rounded hover:opacity-90" @click="save"
-                        :disabled="saving">{{ saving ? 'Saving…' : 'Save' }}</button>
+                    <MainButton @click="save" :disabled="saving">{{ saving ? 'Saving…' : 'Save' }}</MainButton>
                     <span v-if="saveMsg" class="text-green-600">{{ saveMsg }}</span>
                     <span v-if="errorMsg" class="text-red-500">{{ errorMsg }}</span>
                 </div>

app/pages/admin/blog/index.vue

@@ -15,8 +15,9 @@
                     </select>
                     <textarea v-model="createForm.markdown" rows="8" placeholder="markdown"
                         class="w-full p-2 rounded bg-transparent border border-separator-primary text-label-primary"></textarea>
-                    <button class="bg-accent-primary text-white px-4 py-2 rounded hover:opacity-90"
-                        :disabled="creating">{{ creating ? 'Creating…' : 'Create' }}</button>
+                    <MainButton type="submit" :disabled="creating">
+                        {{ creating ? 'Creating…' : 'Create' }}
+                    </MainButton>
                 </form>
                 <p v-if="createError" class="text-red-500 mt-2">{{ createError }}</p>
                 <p v-if="createOk" class="text-green-600 mt-2">Created</p>

app/pages/blog/[article_slug].vue

@@ -3,27 +3,20 @@
         <div v-if="pending" class="text-center py-12">
             <p class="text-accent-primary">Loading article...</p>
         </div>
-        
+
         <div v-else-if="error" class="text-center py-12">
             <p class="text-red-500">Error loading article: {{ error.message }}</p>
         </div>
-        
-        <div v-else-if="content">
+
+        <div v-else-if="content" class="space-y-4">
             <template v-for="(block, index) in content.blocks" :key="index">
-                <BlogHeaderItem 
-                    v-if="block.type === 'header'" 
-                    :title="block.title || ''" 
-                    :size="block.size || '1'" 
-                />
-                <BlogTextItem 
-                    v-else-if="block.type === 'text'" 
-                    :text="block.content || ''" 
-                />
-                <BlogImageItem 
-                    v-else-if="block.type === 'image'" 
-                    :image-url="block.imageUrl || ''" 
-                    :image-alt="block.imageAlt || ''" 
-                />
+                <BlogHeaderItem v-if="block.type === 'header'" :title="block.title || ''" :size="block.size || '1'" />
+                <BlogTextItem v-else-if="block.type === 'text'" :text="block.content || ''" />
+                <BlogImageItem v-else-if="block.type === 'image'" :image-url="block.imageUrl || ''"
+                    :image-alt="block.imageAlt || ''" />
+                <BlogLinkItem v-else-if="block.type === 'link'" :link-url="block.linkUrl || ''"
+                    :link-text="block.linkText || ''" />
+                <BlogTagsItem v-else-if="block.type === 'tags'" :tags="block.tags || []" />
             </template>
         </div>
     </div>
@@ -51,4 +44,3 @@ const { data: content, pending, error } = await useFetch<ContentResponse>(
     `/api/content/${mdFileName}`
 )
 </script>
-

app/pages/design/index.vue

@@ -0,0 +1,59 @@
+<template>
+    <div class="min-h-screen bg-background-primary">
+        <div class="container mx-auto px-6 py-16">
+            <h1 class="text-4xl font-bold mb-8 text-accent-primary">
+                Design System
+            </h1>
+            <p class="text-xl mb-16 text-accent-primary opacity-80">
+                Central hub for all design system components and guidelines.
+            </p>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Buttons Card -->
+                <NuxtLink to="/design/buttons" class="block group h-full">
+                    <div
+                        class="p-6 bg-fill-secondary rounded-xl border border-separator-primary hover:border-accent-primary transition-colors h-full flex flex-col">
+                        <h2
+                            class="text-2xl font-semibold mb-4 text-accent-primary group-hover:opacity-80 transition-opacity">
+                            Buttons
+                        </h2>
+                        <div class="flex flex-wrap gap-2 mb-6 pointer-events-none">
+                            <MainButton buttonStyle="primary" size="S" label="Primary" />
+                            <MainButton buttonStyle="secondary" size="S" label="Secondary" />
+                        </div>
+                        <p class="text-accent-primary opacity-70 mt-auto">
+                            Button styles, sizes, and states.
+                        </p>
+                    </div>
+                </NuxtLink>
+
+                <!-- Badges Card -->
+                <NuxtLink to="/design/badges" class="block group h-full">
+                    <div
+                        class="p-6 bg-fill-secondary rounded-xl border border-separator-primary hover:border-accent-primary transition-colors h-full flex flex-col">
+                        <h2
+                            class="text-2xl font-semibold mb-4 text-accent-primary group-hover:opacity-80 transition-opacity">
+                            Badges
+                        </h2>
+                        <div class="flex flex-wrap gap-2 mb-6 pointer-events-none">
+                            <MainBadge variant="info" label="Info" />
+                            <MainBadge variant="success" label="Success" />
+                        </div>
+                        <p class="text-accent-primary opacity-70 mt-auto">
+                            Status indicators and labels.
+                        </p>
+                    </div>
+                </NuxtLink>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { trackEvent } from '~~/app/utils/track'
+
+onMounted(() => {
+    trackEvent('page_view', { page: 'design_system_index' })
+})
+</script>

app/pages/home/index.vue

@@ -44,7 +44,7 @@ const cards = [
         description: 'Переглянути рейтинг та карму всіх учасників спільноти',
     },
     {
-        route: '/design/buttons',
+        route: '/design',
         icon: 'mdi:palette',
         title: 'Подивитися на дизайн систему',
         description: 'Вивчити компоненти та стилі дизайн системи',