Merge v2-local: add global state, preview action, and selective rendering

Author: eldomagan

composer.json

@@ -27,7 +27,7 @@
     "andreiio/blade-remix-icon": "^3.6",
     "blade-ui-kit/blade-heroicons": "^2.4",
     "blade-ui-kit/blade-icons": "^1.7",
-    "craftile/laravel": "^0.3.1",
+    "craftile/laravel": "^0.4.0",
     "illuminate/contracts": "^10.0||^11.0",
     "mallardduck/blade-lucide-icons": "^1.23",
     "matthieumastadenis/couleur": "^0.1.2",

docs/.vitepress/config.ts

@@ -1,6 +1,10 @@
 import { defineConfig } from 'vitepress';
 import tabsPlugin from '@red-asuka/vitepress-plugin-tabs';
 import llmstxt from 'vitepress-plugin-llms';
+import { genFeed } from './genFeed';
+import { getVersion } from './version';
+
+const version = getVersion();
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -14,8 +18,22 @@ export default defineConfig({
     nav: [
       { text: 'Guide', link: '/introduction/getting-started' },
       { text: 'Theme Editor', link: '/theme-editor/overview' },
+      { text: 'Blog', link: '/blog/' },
       { text: 'Demo', link: 'https://visual-debut-demo.bagistoplus.com' },
       { text: 'Sections Pack', link: 'https://bagistosectionspro.com/?ref=doc' },
+      {
+        text: version,
+        items: [
+          {
+            text: 'v1 Docs',
+            link: 'https://visual-v1.bagistoplus.com',
+          },
+          {
+            text: 'Changelog',
+            link: 'https://github.com/bagistoplus/visual/blob/main/CHANGELOG.md',
+          },
+        ],
+      },
       // { text: 'GitHub', link: 'https://github.com/bagistoplus/visual' },
     ],
 
@@ -40,20 +58,26 @@ export default defineConfig({
               collapsed: true,
               items: [
                 { text: 'Overview', link: '/core-concepts/templates/overview' },
-                { text: 'JSON Template', link: '/core-concepts/templates/json-template' },
+                { text: 'JSON & YAML', link: '/core-concepts/templates/json-yaml' },
+                { text: 'PHP Templates', link: '/core-concepts/templates/php-templates' },
                 { text: 'Available templates', link: '/core-concepts/templates/available' },
               ],
             },
             { text: 'Sections', link: '/core-concepts/sections' },
+            { text: 'Regions', link: '/core-concepts/regions' },
+            { text: 'Blocks', link: '/core-concepts/blocks' },
+            { text: 'Presets', link: '/core-concepts/presets' },
             {
               text: 'Settings',
               collapsed: true,
               items: [
                 { text: 'Overview', link: '/core-concepts/settings/overview' },
                 { text: 'Setting types', link: '/core-concepts/settings/types' },
                 { text: 'Theme settings', link: '/core-concepts/settings/theme-settings' },
+                { text: 'Conditional visibility', link: '/core-concepts/settings/conditional-visibility' },
               ],
             },
+            { text: 'Dynamic Sources', link: '/core-concepts/dynamic-sources' },
           ],
         },
         {
@@ -69,23 +93,30 @@ export default defineConfig({
                 { text: 'Overview', link: '/building-theme/adding-sections/overview' },
                 { text: 'Creating a section', link: '/building-theme/adding-sections/creating-section' },
                 { text: 'Section attributes', link: '/building-theme/adding-sections/section-attributes' },
-                {
-                  text: 'Defining settings and blocks',
-                  link: '/building-theme/adding-sections/defining-section-schema',
-                },
                 { text: 'Writing the section view', link: '/building-theme/adding-sections/writing-section-view' },
                 {
                   text: 'Using section in templates',
                   link: '/building-theme/adding-sections/using-section',
                 },
-                { text: 'Integrating with the editor', link: '/building-theme/adding-sections/integrating-editor' },
+              ],
+            },
+            {
+              text: 'Adding Blocks',
+              collapsed: true,
+              items: [
+                { text: 'Overview', link: '/building-theme/adding-blocks/overview' },
+                { text: 'Creating a block', link: '/building-theme/adding-blocks/creating-block' },
+                { text: 'Block schema', link: '/building-theme/adding-blocks/block-schema' },
+                { text: 'Static blocks', link: '/building-theme/adding-blocks/static-blocks' },
+                { text: 'Container blocks', link: '/building-theme/adding-blocks/container-blocks' },
               ],
             },
             {
               text: 'Best practices',
               collapsed: true,
               items: [
                 { text: 'Overview', link: '/building-theme/best-practices/overview' },
+                { text: 'Integrating with the editor', link: '/building-theme/best-practices/integrating-editor' },
                 { text: 'Styling and Color System', link: '/building-theme/best-practices/styling' },
                 { text: 'Accessibility', link: '/building-theme/best-practices/accessibility' },
                 { text: 'Performance', link: '/building-theme/best-practices/performance' },
@@ -153,4 +184,6 @@ export default defineConfig({
   sitemap: {
     hostname: 'https://visual.bagistoplus.com',
   },
+
+  buildEnd: genFeed,
 });

docs/.vitepress/genFeed.ts

@@ -0,0 +1,45 @@
+import path from 'path';
+import { writeFileSync } from 'fs';
+import { Feed } from 'feed';
+import { createContentLoader, type SiteConfig } from 'vitepress';
+
+const baseUrl = 'https://visual.bagistoplus.com';
+
+export async function genFeed(config: SiteConfig) {
+  const feed = new Feed({
+    title: 'Bagisto Visual Blog',
+    description: 'Updates, tutorials, and insights from the Bagisto Visual team',
+    id: baseUrl,
+    link: baseUrl,
+    language: 'en',
+    image: `${baseUrl}/bagistoplus-visual-logo.png`,
+    favicon: `${baseUrl}/favicon.ico`,
+    copyright: 'Copyright © 2025 BagistoPlus',
+  });
+
+  const posts = await createContentLoader('blog/*.md', {
+    excerpt: true,
+    render: true,
+  }).load();
+
+  posts.sort((a, b) => +new Date(b.frontmatter.date) - +new Date(a.frontmatter.date));
+
+  for (const { url, excerpt, frontmatter, html } of posts) {
+    feed.addItem({
+      title: frontmatter.title,
+      id: `${baseUrl}${url}`,
+      link: `${baseUrl}${url}`,
+      description: excerpt,
+      content: html,
+      author: [
+        {
+          name: frontmatter.author,
+          link: frontmatter.twitter ? `https://twitter.com/${frontmatter.twitter.replace('@', '')}` : undefined,
+        },
+      ],
+      date: new Date(frontmatter.date),
+    });
+  }
+
+  writeFileSync(path.join(config.outDir, 'feed.rss'), feed.rss2());
+}

docs/.vitepress/theme/Layout.vue

@@ -1,10 +1,22 @@
 <script setup>
-  import DefaultTheme from "vitepress/theme";
+import DefaultTheme from "vitepress/theme";
+import { useData, useRoute } from 'vitepress';
+import { computed } from 'vue';
+import BlogHome from './components/BlogHome.vue';
+import BlogPost from './components/BlogPost.vue';
+
+const { frontmatter } = useData();
+const route = useRoute();
+
+const isBlogPost = computed(() => route.path.startsWith('/blog/') && route.path !== '/blog/');
+const isLandingPage = computed(() => frontmatter.value.pageClass === 'landing');
 </script>
 
 <template>
-  <DefaultTheme.Layout>
-    <template #home-hero-image>
+  <BlogHome v-if="frontmatter.layout === 'blog'" />
+  <BlogPost v-else-if="isBlogPost" />
+  <DefaultTheme.Layout v-else :class="frontmatter.pageClass">
+    <template v-if="!isLandingPage" #home-hero-image>
       <iframe
         class="video"
         src="https://www.youtube.com/embed/fB7ik1hOWMc?loop=1&playlist=fB7ik1hOWMc&start=7&modestbranding=1&showinfo=0&rel=0"
@@ -14,6 +26,9 @@
         allowfullscreen
       ></iframe>
     </template>
+    <template #layout-top>
+      <slot name="layout-top" />
+    </template>
   </DefaultTheme.Layout>
 </template>
 

docs/.vitepress/theme/blog.data.ts

@@ -0,0 +1,48 @@
+import { createContentLoader } from 'vitepress';
+
+export interface Post {
+  title: string;
+  url: string;
+  date: {
+    time: number;
+    string: string;
+  };
+  excerpt: string | undefined;
+  author: string;
+  gravatar?: string;
+  twitter?: string;
+}
+
+declare const data: Post[];
+export { data };
+
+function formatDate(raw: string): Post['date'] {
+  const date = new Date(raw);
+  date.setUTCHours(12);
+  return {
+    time: +date,
+    string: date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    }),
+  };
+}
+
+export default createContentLoader('blog/*.md', {
+  excerpt: true,
+  transform(raw): Post[] {
+    return raw
+      .filter(({ url }) => url !== '/blog/')
+      .map(({ url, frontmatter, excerpt }) => ({
+        title: frontmatter.title,
+        url,
+        excerpt: frontmatter.excerpt || excerpt,
+        date: formatDate(frontmatter.date),
+        author: frontmatter.author,
+        gravatar: frontmatter.gravatar,
+        twitter: frontmatter.twitter,
+      }))
+      .sort((a, b) => b.date.time - a.date.time);
+  },
+});