From 2222769b50b3baa552031e89d7e4540c63a3f93a Mon Sep 17 00:00:00 2001
From: Jon Udell <jon@jonudell.info>
Date: Fri, 17 Oct 2025 11:21:31 -0700
Subject: [PATCH 1/5] wip

---
 blog/src/Main.xmlui                    | 52 +++++++++++++++++---------
 blog/src/components/BlogOverview.xmlui | 47 +++++++++++++----------
 blog/src/components/BlogPage.xmlui     |  5 ++-
 3 files changed, 65 insertions(+), 39 deletions(-)

diff --git a/blog/src/Main.xmlui b/blog/src/Main.xmlui
index 9de4e44c3..2eeeddc77 100644
--- a/blog/src/Main.xmlui
+++ b/blog/src/Main.xmlui
@@ -1,38 +1,60 @@
 <App
-    layout="vertical-full-header"
-    noScrollbarGutters="false"
-    var.posts = `{[
+    layout="vertical"
+    var.showNavPanelThreshold="{0}"
+    var.posts=`{[
       {
         title: "Welcome to the XMLUI blog!",
         slug: "welcome-to-the-xmlui-blog",
         author: "Jon Udell",
-        date: "2025-09-10",
+        date: "2025-10-20",
         image: "blog-scrabble.png"
       }
-    ]}`
-    >
+    ]}`>
+    <AppState
+        id="navState"
+        initialValue="{{
+            showNavPanel: posts.length > showNavPanelThreshold && mediaSize.sizeIndex > 2,
+            showNavPanelThreshold: showNavPanelThreshold,
+            posts: posts.length
+        }}" />
+       <CHStack>
+           <Logo when="{! (posts.length > showNavPanelThreshold && mediaSize.sizeIndex > 2)}" height="$space-8" />
+        <SpaceFiller />
+        <Search
+            data="{appGlobals.plainTextContent}"
+            when="{mediaSize.sizeIndex > 2}" />
+        </CHStack>
+    <!--
     <AppHeader>
         <property name="logoTemplate">
             <Link to="https://xmlui.org/">
                 <Logo height="$space-8" />
             </Link>
         </property>
+        <Link when="{!['/', '/blog'].includes($pathname)}" to="/">
+            <Button
+                label="Home"
+            >
+            </Button>
+        </Link>
         <SpaceFiller />
         <Search
             data="{appGlobals.plainTextContent}"
             when="{mediaSize.sizeIndex > 2}" />
-        <ToneSwitch />
     </AppHeader>
+    -->
     <NavPanel
-        when="{!window.location.hash.includes('/404') || mediaSize.sizeIndex <= 2}">
+        when="{navState.value.showNavPanel}">
         <Stack
             paddingHorizontal="$space-4"
             paddingBottom="$space-4"
             when="{mediaSize.sizeIndex <= 2}">
             <Search data="{appGlobals.plainTextContent}" />
         </Stack>
-        <NavGroup label="Recent posts" to="/blog" >
-          <NavLink label="Welcome to the XMLUI blog!" to="/blog/{posts[0].slug}" />
+        <NavGroup label="Recent posts" to="/blog">
+            <NavLink
+                label="Welcome to the XMLUI blog!"
+                to="/blog/{posts[0].slug}" />
         </NavGroup>
     </NavPanel>
     <Pages fallbackPath="/404">
@@ -50,14 +72,10 @@
         </Page>
     </Pages>
     <Footer>
-        <CHStack width="*">
+        <CHStack width="100%">
             This site is an XMLUI™ app.
             <SpaceFiller />
-            <Link
-                to="https://github.com/xmlui-org/xmlui/tree/main/docs/src"
-                target="_blank">
-                <Button variant="ghost" icon="github" />
-            </Link>
+            <ToneSwitch />
         </CHStack>
     </Footer>
-</App>
+</App>
\ No newline at end of file
diff --git a/blog/src/components/BlogOverview.xmlui b/blog/src/components/BlogOverview.xmlui
index 8c59fd3b2..f5773fd0b 100644
--- a/blog/src/components/BlogOverview.xmlui
+++ b/blog/src/components/BlogOverview.xmlui
@@ -1,27 +1,34 @@
 <Component name="BlogOverview">
-  <Stack width="85%">
-    <H1>XMLUI Blog</H1>
-    <Text>Latest updates, tutorials, and insights for building with XMLUI</Text>
-  </Stack>
-  <List
-    data="{
+  <Debug />
+  <CVStack>
+    <VStack width="100%">
+      <H1>
+        XMLUI Blog
+      </H1>
+      <Text>
+        Latest updates, tutorials, and insights for building with XMLUI
+      </Text>
+      <List
+        data="{
       $props.posts.sort(function(a, b) {
         return new Date(b.date) - new Date(a.date);
       })
     }">
-    <VStack gap="$space-2" width="90%">
-      <Link to="/blog/{$item.slug}">
-        <Text fontSize="larger">
-          {$item.title}
-        </Text>
-      </Link>
-      <Text>
-        {$item.date} • {$item.author}
-      </Text>
-      <Link to="/blog/{$item.slug}">
-        <Image src="/blog/images/{$item.image}" />
-      </Link>
-    <Stack height="3rem" />
+        <VStack gap="$space-2">
+          <Link to="/blog/{$item.slug}">
+            <Text fontSize="larger">
+              {$item.title}
+            </Text>
+          </Link>
+          <Text>
+            {$item.date} • {$item.author}
+          </Text>
+          <Link to="/blog/{$item.slug}">
+            <Image src="/blog/images/{$item.image}" />
+          </Link>
+          <Stack height="3rem" />
+        </VStack>
+      </List>
     </VStack>
-  </List>
+  </CVStack>
 </Component>
\ No newline at end of file
diff --git a/blog/src/components/BlogPage.xmlui b/blog/src/components/BlogPage.xmlui
index 619b7f55f..ca9be8ee4 100644
--- a/blog/src/components/BlogPage.xmlui
+++ b/blog/src/components/BlogPage.xmlui
@@ -1,10 +1,11 @@
 <Component name="BlogPage">
-  <VStack width="{$props.width ? $props.width : '85%'}">
+  <Debug/>
+  <Stack width="100%">
     <VStack gap="0">
       <H1>{$props.post.title}</H1>
       <Text>{$props.post.date} • {$props.post.author}</Text>
     </VStack>
     <Image src="/blog/images/{$props.post.image}" />
     <Markdown marginTop="$space-4" data="/blog/{$props.post.slug}.md" />
-  </VStack>
+  </Stack>
 </Component>

From 9ac34ae3ac24c74f10df61b2a6be7fba5dda6ff5 Mon Sep 17 00:00:00 2001
From: Jon Udell <jon@jonudell.info>
Date: Fri, 17 Oct 2025 11:37:41 -0700
Subject: [PATCH 2/5] wip

---
 blog/src/Main.xmlui | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/blog/src/Main.xmlui b/blog/src/Main.xmlui
index 2eeeddc77..a93b79ab6 100644
--- a/blog/src/Main.xmlui
+++ b/blog/src/Main.xmlui
@@ -13,16 +13,21 @@
     <AppState
         id="navState"
         initialValue="{{
-            showNavPanel: posts.length > showNavPanelThreshold && mediaSize.sizeIndex > 2,
+            showNavPanel: showNav(),
             showNavPanelThreshold: showNavPanelThreshold,
             posts: posts.length
         }}" />
-       <CHStack>
-           <Logo when="{! (posts.length > showNavPanelThreshold && mediaSize.sizeIndex > 2)}" height="$space-8" />
+       <CHStack width="100%">
+        <Logo when="{! showNav()}" height="$space-6"/>
+        <SpaceFiller when="{! showNav()}" />
+        <Link when="{!['/', '/blog'].includes($pathname)}" to="/">
+            <Button
+                label="Home"
+            >
+            </Button>
+        </Link>
         <SpaceFiller />
-        <Search
-            data="{appGlobals.plainTextContent}"
-            when="{mediaSize.sizeIndex > 2}" />
+        <Search data="{appGlobals.plainTextContent}" />
         </CHStack>
     <!--
     <AppHeader>

From 56211abd8b7f313772a2f1866df1675b1446ccf1 Mon Sep 17 00:00:00 2001
From: Jon Udell <jon@jonudell.info>
Date: Fri, 17 Oct 2025 13:01:47 -0700
Subject: [PATCH 3/5] wip

---
 blog/public/blog/welcome-to-the-xmlui-blog.md | 229 +++---------------
 blog/src/Main.xmlui                           |  33 +--
 blog/src/components/BlogOverview.xmlui        |  14 +-
 blog/src/components/BlogPage.xmlui            |   3 -
 4 files changed, 45 insertions(+), 234 deletions(-)

diff --git a/blog/public/blog/welcome-to-the-xmlui-blog.md b/blog/public/blog/welcome-to-the-xmlui-blog.md
index 62883c51f..6e03829a9 100644
--- a/blog/public/blog/welcome-to-the-xmlui-blog.md
+++ b/blog/public/blog/welcome-to-the-xmlui-blog.md
@@ -1,6 +1,4 @@
-In this inaugural post we'll explore the development of the blog engine we're using on this site. Our tagline is *Practical User Interfaces Built Simply*  and creating this blog couldn't have been simpler. The whole site, of which the blog is now a part, is an XMLUI app built with components including [NavPanel](https://docs.xmlui.org/components/NavPanel), [NavLink](https://docs.xmlui.org/components/NavLink), [Pages](https://docs.xmlui.org/components/Pages), [Page](https://docs.xmlui.org/components/Page), and [Markdown](https://docs.xmlui.org/components/Markdown).
-
-Let's see how it evolved.
+In this inaugural post we'll explore the development of the blog engine we're using on this site. Our tagline is *Practical User Interfaces Built Simply*  and creating this blog couldn't have been simpler. It's an XMLUI app built with a handful of core components (including [NavPanel](https://docs.xmlui.org/components/NavPanel), [NavLink](https://docs.xmlui.org/components/NavLink), [Pages](https://docs.xmlui.org/components/Pages), [Page](https://docs.xmlui.org/components/Page), and [Markdown](https://docs.xmlui.org/components/Markdown)) and a couple of [user-defined components](https://docs.xmlui.org/user-defined-components).
 
 ## The simplest possible thing
 
@@ -50,7 +48,7 @@ We started with the simplest possible approach: post metadata and data as litera
 
 You can use it right here or you can click the ![](/resources/pg-popout.svg) icon to open a playground where you can make live changes.
 
-This is a pretty good start! We can write posts, arrange them in reverse chronological order, and hey, it's the essence of a blog. Since it's a blog about XMLUI the live playground is a nice bonus that any XMLUI app might put to good use. The user interfaces that you build with XMLUI will require some explaining, it's handy to explain with working examples as well as images, text, and video.
+This is a pretty good start! We can write posts, arrange them in reverse chronological order, and hey, it's the essence of a blog. The live playground is a nice bonus that any XMLUI app might put to good use. The user interfaces that you build with XMLUI will require some explaining, it's handy to explain with working examples as well as images, text, and video.
 
 Let's unpack how this works, there isn't much to it. The `App` declared in `Main.xmlui` sets up navigation.
 
@@ -66,9 +64,9 @@ Let's unpack how this works, there isn't much to it. The `App` declared in `Main
 </App>
 ```
 
-Each Page contains a [user-defined component](https://docs.xmlui.org/user-defined-components) called `BlogPage`. In the prototype, the `BlogPage` component receives page content as `$props.content`.
+Each Page contains a user-defined component called `BlogPage` that receives the properties `content`, `title`, `author`, and `date`.
 
-```xmlui copy {4}
+```xmlui
 <Pages>
   <Page url="/newest-post">
     <BlogPage
@@ -80,21 +78,16 @@ Each Page contains a [user-defined component](https://docs.xmlui.org/user-define
 </Pages>
 ```
 
-Here's how the prototype `BlogPage` assembles data and metadata to create a post.
+Here's how `BlogPage` assembles data and metadata to create a post.
 
-```xmlui copy {4, 6, 8, 11}
+```xmlui /$props/
 <Component name="BlogPage">
-  <VStack width="85%">
-    <VStack>
-      <H1>{$props.title}</H1>
-      <HStack gap="$space-2">
-        <Text>{$props.date}</Text>
-        <Text> - </Text>
-        <Text>{$props.author}</Text>
-      </HStack>
+    <VStack gap="0">
+      <H1>{$props.post.title}</H1>
+      <Text>{$props.post.date} • {$props.post.author}</Text>
     </VStack>
-    <Markdown content="{$props.content}" />
-  </VStack>
+    <Image src="/blog/images/{$props.post.image}" />
+    <Markdown marginTop="$space-4" data="/blog/{$props.post.slug}.md" />
 </Component>
 ```
 
@@ -192,7 +185,7 @@ The `NavLink` uses the post's slug to bind to its corresponding `Page`.
 </Page>
 ```
 
-And the `Page` passes the complete post object to `BlogPage`. In v1 we used the `content` property of the `Markdown` component to pass a string. In v2 we use the `data` property to pass an URL constructed from the post slug.
+And the `Page` passes the complete post object to `BlogPage`. In v1 we used the `content` property of the `Markdown` component to pass a string. In v2 we use the `data` property to pass a URL constructed from the post slug.
 
 ```xmlui copy {11}
 <Component name="BlogPage">
@@ -216,31 +209,32 @@ Although it's feasible to use a `NavGroup` to list the posts, a blog should real
 
 ```xmlui copy
 <Component name="BlogOverview">
-  <Stack width="85%">
-    <H1>XMLUI Blog</H1>
-    <Text>Latest updates, tutorials, and insights for building with XMLUI</Text>
-  </Stack>
-  <List
-    data="{
+  <CVStack>
+    <VStack width="100%">
+      <H1>XMLUI Blog</H1>
+      <Text>Latest updates, tutorials, and insights for building with XMLUI</Text>
+      <List  data="{
       $props.posts.sort(function(a, b) {
         return new Date(b.date) - new Date(a.date);
       })
     }">
-    <VStack gap="$space-2" width="90%">
-      <Link to="/blog/{$item.slug}">
-        <Text fontSize="larger">
-          {$item.title}
-        </Text>
-      </Link>
-      <Text>
-        {$item.date} • {$item.author}
-      </Text>
-      <Link to="/blog/{$item.slug}">
-        <Image src="/blog/images/{$item.image}" />
-      </Link>
-    <Stack height="3rem" />
+        <VStack gap="$space-2">
+          <Link to="/blog/{$item.slug}">
+            <Text fontSize="larger">
+              {$item.title}
+            </Text>
+          </Link>
+          <Text>
+            {$item.date} • {$item.author}
+          </Text>
+          <Link to="/blog/{$item.slug}">
+            <Image src="/blog/images/{$item.image}" />
+          </Link>
+          <Stack height="$space-8" />
+        </VStack>
+      </List>
     </VStack>
-  </List>
+  </CVStack>
 </Component>
 ```
 
@@ -271,7 +265,8 @@ We can't call it a blog unless it provides an RSS feed. For that we've added a s
 
 ## Deploy standalone
 
-Suppose you wanted to decouple the blog engine from the monorepo and use it standalone? Let's start with this footprint.
+Our blog lives in the XMLUI monorepo where it coordinates with the landing page and docs.
+But it can exist standalone, you only need a folder with a handful of files.
 
 
 ```
@@ -303,168 +298,16 @@ Here's the `index.html`.
   <title>XMLUI blog test</title>
   <script src="xmlui/xmlui-0.10.8.js"></script>
   <script src="xmlui/xmlui-playground.js"></script>
-<script>
-</script>
 </head>
 <body>
 </body>
 </html>
 ```
 
-And here's `Main.xmlui`.
-
-```xmlui copy
-<Fragment>
-    <App
-        layout="vertical-full-header"
-        noScrollbarGutters="false"
-        when="{!window.location.hash.includes('/playground')}"
-        var.posts = `{[
-          {
-            title: "Welcome to the XMLUI blog!",
-            slug: "welcome-to-the-xmlui-blog",
-            author: "Jon Udell",
-            date: "2025-09-01",
-            image: "blog-scrabble.png"
-          },
-          {
-            title: "Lorem Ipsum!",
-            slug: "lorem-ipsum",
-            author: "H. Rackham",
-            date: "1914-06-03",
-            image: "lorem-ipsum.png"
-          }
-        ]}`
-        >
-        <AppHeader>
-            <property name="logoTemplate">
-                <Link to="https://xmlui.org/">
-                    <Logo height="$space-8" />
-                </Link>
-            </property>
-            <SpaceFiller />
-            <Search
-                data="{appGlobals.plainTextContent}"
-                when="{mediaSize.sizeIndex > 2}" />
-            <ToneSwitch />
-        </AppHeader>
-        <NavPanel when="{ mediaSize.sizeIndex > 2 && (searchState.value.searchResults.length === 0 || !searchState.value.searchQuery)}">
-            <Stack
-              paddingHorizontal="$space-4"
-              paddingBottom="$space-4"
-              when="{mediaSize.sizeIndex <= 2}">
-            <Search data="{appGlobals.plainTextContent}" />
-          </Stack>
-          <NavGroup label="Recent posts" to="/blog" >
-            <NavLink label="Welcome to the XMLUI blog!" to="/blog/{posts[0].slug}" />
-            <NavLink label="Loreum ipsum" to="/blog/{posts[1].slug}" />
-          </NavGroup>
-        </NavPanel>
-        <Pages fallbackPath="/404">
-            <Page url="/blog">
-                <BlogOverview posts="{posts}" />
-            </Page>
-            <Page url="/blog/{posts[0].slug}">
-                <BlogPage post="{posts[0]}" />
-            </Page>
-            <Page url="/blog/{posts[1].slug}">
-                <BlogPage post="{posts[1]}" />
-            </Page>
-            <Page url="/404">
-                <PageNotFound />
-            </Page>
-        </Pages>
-        <Footer>
-            <CHStack width="*">
-                This site is an XMLUI™ app.
-                <SpaceFiller />
-                <Link
-                    to="https://github.com/xmlui-org/xmlui/tree/main/docs/src"
-                    target="_blank">
-                    <Button variant="ghost" icon="github" />
-                </Link>
-            </CHStack>
-        </Footer>
-    </App>
-    <StandalonePlayground when="{window.location.hash.includes('/playground')}" />
-</Fragment>
-```
-
-That's all we need to serve the blog. Note that we include `xmlui-playground.js`. The live playgrounds you can use here are provided by an extension, and a standalone app can use that extension in the same way our main site does. So when you serve the blog from a static webserver, the playground examples work the same way.
-
-You can host the standalone blog on any static webserver. We'll do that, but first let's create a search mechanism that's decoupled from the monorepo's build and works entirely client-side. We'll create two user-defined components: `SearchPrep` and `BlogSearch`.
-
-```xmlui copy
-<Page url="/search">
-  <SearchPrep posts="{posts}" />
-  <BlogSearch posts="{posts}" searchIndex="{window.getblogPosts()}" />
-</Page>
-```
-
-Here is `SearchPrep`. It uses `DataSource` in a `List` to read posts, and calls global functions to process them.
-
-```xmlui copy
-<Component name="SearchPrep" var.count="{0}">
-
-    <List when="{count <= $props.posts.length}" data="{$props.posts}">
-        <DataSource
-          url="/blog/{$item.slug}.md"
-          onLoaded="(data) => {
-            // Set indexing state on first load;
-            if (window.blogIsIndexing === '') {
-              window.setBlogIndexing();
-            }
-
-            window.setBlogSearchEntry('/blog/' + $item.slug, $item.title + '\n' + data);
-            console.log('Added to blogPosts:', '/blog/' + $item.slug);
-            count++;
-
-            if (window.getBlogSearchCount() >= $props.posts.length) {
-              window.stopBlogIndexing();
-              console.log('Blog indexing complete!');
-
-            }
-          }" />
-
-    </List>
-
-</Component>
-```
-
-Here is `BlogSearch`. It provides a reactive search box so as you type, another global function finds fragments in posts that match your current query.
-
-```xmlui copy
-<Component name="BlogSearch">
-  <VStack gap="$space-4">
-    <TextBox
-      id="searchQuery"
-      placeholder="Search blog posts..."
-      width="15rem"
-    />
-    <List data="{
-      window.searchBlogPosts($props.posts, $props.searchIndex, searchQuery.value)
-    }">
-      <VStack gap="$space-2">
-        <Link to="/blog/{$item.post.slug}">
-          <H2 value="{$item.post.title}" />
-        </Link>
-        <List data="{$item.matches}">
-          <Card>
-            <Text backgroundColor="$color-warn-100" value="{$item.context}" />
-          </Card>
-        </List>
-      </VStack>
-    </List>
-  </VStack>
-</Component>
-```
-
-With these ingredients in place, I dragged the folder containing the standalone app onto Netlify's drop target. Check it out!
+I dragged the folder containing the standalone app onto Netlify's drop target. Check it out!
 
 [https://test-xmlui-blog.netlify.app/](https://test-xmlui-blog.netlify.app/)
 
-The post you are reading here was deployed in a similar way.
-
 ## XMLUI for publishing
 
 We get it, blog engines are a dime a dozen. We made this one because XMLUI was already a strong publishing system that we use for the [docs](https://docs.xmlui.org), [demo](https://demo.xmlui.org), and [landing page](https://xmlui.org). The `Markdown` component, with its support for playgrounds, works really well and it made sense to leverage that for our blog. We're not saying that you *should* build a blog engine with XMLUI but it's clearly something you *could* do. We think it's pretty easy to create a competent engine that makes life easy for authors and readers.
diff --git a/blog/src/Main.xmlui b/blog/src/Main.xmlui
index a93b79ab6..bd6548933 100644
--- a/blog/src/Main.xmlui
+++ b/blog/src/Main.xmlui
@@ -17,37 +17,14 @@
             showNavPanelThreshold: showNavPanelThreshold,
             posts: posts.length
         }}" />
-       <CHStack width="100%">
-        <Logo when="{! showNav()}" height="$space-6"/>
-        <SpaceFiller when="{! showNav()}" />
-        <Link when="{!['/', '/blog'].includes($pathname)}" to="/">
-            <Button
-                label="Home"
-            >
-            </Button>
-        </Link>
+    <CHStack marginTop="$space-4" width="98%">
+        <Logo when="{! showNav()}" height="$space-6" />
         <SpaceFiller />
-        <Search data="{appGlobals.plainTextContent}" />
-        </CHStack>
-    <!--
-    <AppHeader>
-        <property name="logoTemplate">
-            <Link to="https://xmlui.org/">
-                <Logo height="$space-8" />
-            </Link>
-        </property>
         <Link when="{!['/', '/blog'].includes($pathname)}" to="/">
-            <Button
-                label="Home"
-            >
-            </Button>
+            <Button label="Home" />
         </Link>
-        <SpaceFiller />
-        <Search
-            data="{appGlobals.plainTextContent}"
-            when="{mediaSize.sizeIndex > 2}" />
-    </AppHeader>
-    -->
+        <Search data="{appGlobals.plainTextContent}" />
+    </CHStack>
     <NavPanel
         when="{navState.value.showNavPanel}">
         <Stack
diff --git a/blog/src/components/BlogOverview.xmlui b/blog/src/components/BlogOverview.xmlui
index f5773fd0b..5b0438bb3 100644
--- a/blog/src/components/BlogOverview.xmlui
+++ b/blog/src/components/BlogOverview.xmlui
@@ -1,15 +1,9 @@
 <Component name="BlogOverview">
-  <Debug />
   <CVStack>
     <VStack width="100%">
-      <H1>
-        XMLUI Blog
-      </H1>
-      <Text>
-        Latest updates, tutorials, and insights for building with XMLUI
-      </Text>
-      <List
-        data="{
+      <H1>XMLUI Blog</H1>
+      <Text>Latest updates, tutorials, and insights for building with XMLUI</Text>
+      <List  data="{
       $props.posts.sort(function(a, b) {
         return new Date(b.date) - new Date(a.date);
       })
@@ -26,7 +20,7 @@
           <Link to="/blog/{$item.slug}">
             <Image src="/blog/images/{$item.image}" />
           </Link>
-          <Stack height="3rem" />
+          <Stack height="$space-8" />
         </VStack>
       </List>
     </VStack>
diff --git a/blog/src/components/BlogPage.xmlui b/blog/src/components/BlogPage.xmlui
index ca9be8ee4..2b6fde7d2 100644
--- a/blog/src/components/BlogPage.xmlui
+++ b/blog/src/components/BlogPage.xmlui
@@ -1,11 +1,8 @@
 <Component name="BlogPage">
-  <Debug/>
-  <Stack width="100%">
     <VStack gap="0">
       <H1>{$props.post.title}</H1>
       <Text>{$props.post.date} • {$props.post.author}</Text>
     </VStack>
     <Image src="/blog/images/{$props.post.image}" />
     <Markdown marginTop="$space-4" data="/blog/{$props.post.slug}.md" />
-  </Stack>
 </Component>

From 1d2a0002de69fa89955521786ecfbe410dc1205f Mon Sep 17 00:00:00 2001
From: Jon Udell <jon@jonudell.info>
Date: Fri, 17 Oct 2025 14:29:54 -0700
Subject: [PATCH 4/5] wip

---
 blog/src/Main.xmlui | 25 +++++++++----------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/blog/src/Main.xmlui b/blog/src/Main.xmlui
index bd6548933..e811ddcac 100644
--- a/blog/src/Main.xmlui
+++ b/blog/src/Main.xmlui
@@ -17,23 +17,16 @@
             showNavPanelThreshold: showNavPanelThreshold,
             posts: posts.length
         }}" />
-    <CHStack marginTop="$space-4" width="98%">
-        <Logo when="{! showNav()}" height="$space-6" />
-        <SpaceFiller />
-        <Link when="{!['/', '/blog'].includes($pathname)}" to="/">
-            <Button label="Home" />
-        </Link>
-        <Search data="{appGlobals.plainTextContent}" />
-    </CHStack>
-    <NavPanel
-        when="{navState.value.showNavPanel}">
-        <Stack
-            paddingHorizontal="$space-4"
-            paddingBottom="$space-4"
-            when="{mediaSize.sizeIndex <= 2}">
+    <AppHeader>
+        <property name="profileMenuTemplate">
+            <Link when="{!['/', '/blog'].includes($pathname)}" to="/">
+                <Button label="Home" />
+            </Link>
             <Search data="{appGlobals.plainTextContent}" />
-        </Stack>
-        <NavGroup label="Recent posts" to="/blog">
+        </property>
+    </AppHeader>
+    <NavPanel when="{showNav()}">
+       <NavGroup label="Recent posts" to="/blog">
             <NavLink
                 label="Welcome to the XMLUI blog!"
                 to="/blog/{posts[0].slug}" />

From 901270bf83c007dd2dc19a8d0e54feda2a88a943 Mon Sep 17 00:00:00 2001
From: Jon Udell <jon@jonudell.info>
Date: Fri, 17 Oct 2025 19:13:53 -0700
Subject: [PATCH 5/5] finalize new layout and content

---
 blog/src/Main.xmlui                    | 14 ++++++++++----
 blog/src/Main.xmlui.xs                 |  3 +++
 blog/src/components/BlogOverview.xmlui |  2 --
 blog/src/components/Debug.xmlui        |  6 ++++++
 4 files changed, 19 insertions(+), 6 deletions(-)
 create mode 100644 blog/src/Main.xmlui.xs
 create mode 100644 blog/src/components/Debug.xmlui

diff --git a/blog/src/Main.xmlui b/blog/src/Main.xmlui
index e811ddcac..75f214237 100644
--- a/blog/src/Main.xmlui
+++ b/blog/src/Main.xmlui
@@ -1,6 +1,6 @@
 <App
     layout="vertical"
-    var.showNavPanelThreshold="{0}"
+    var.showNavPanelThreshold="{6}"
     var.posts=`{[
       {
         title: "Welcome to the XMLUI blog!",
@@ -18,14 +18,20 @@
             posts: posts.length
         }}" />
     <AppHeader>
+        <property name="logoTemplate">
+          <CHStack height="$space-6">
+            <Logo />
+            <Text variant="em">Tutorials, tips, best practices</Text>
+          </CHStack>
+        </property>
         <property name="profileMenuTemplate">
+            <SpaceFiller />
             <Link when="{!['/', '/blog'].includes($pathname)}" to="/">
-                <Button label="Home" />
+                <Button height="$space-6" padding="$space-2" label="All Posts" />
             </Link>
-            <Search data="{appGlobals.plainTextContent}" />
         </property>
     </AppHeader>
-    <NavPanel when="{showNav()}">
+    <NavPanel>
        <NavGroup label="Recent posts" to="/blog">
             <NavLink
                 label="Welcome to the XMLUI blog!"
diff --git a/blog/src/Main.xmlui.xs b/blog/src/Main.xmlui.xs
new file mode 100644
index 000000000..e40fdd8e7
--- /dev/null
+++ b/blog/src/Main.xmlui.xs
@@ -0,0 +1,3 @@
+function showNav() {
+    return posts.length > showNavPanelThreshold && mediaSize.sizeIndex > 2;
+}
\ No newline at end of file
diff --git a/blog/src/components/BlogOverview.xmlui b/blog/src/components/BlogOverview.xmlui
index 5b0438bb3..5e70207a5 100644
--- a/blog/src/components/BlogOverview.xmlui
+++ b/blog/src/components/BlogOverview.xmlui
@@ -1,8 +1,6 @@
 <Component name="BlogOverview">
   <CVStack>
     <VStack width="100%">
-      <H1>XMLUI Blog</H1>
-      <Text>Latest updates, tutorials, and insights for building with XMLUI</Text>
       <List  data="{
       $props.posts.sort(function(a, b) {
         return new Date(b.date) - new Date(a.date);
diff --git a/blog/src/components/Debug.xmlui b/blog/src/components/Debug.xmlui
new file mode 100644
index 000000000..d73e37255
--- /dev/null
+++ b/blog/src/components/Debug.xmlui
@@ -0,0 +1,6 @@
+<Component name="Debug">
+  <AppState id="navState" />
+  <Text>
+    navState: {JSON.stringify(navState.value)},  sizeIndex {JSON.stringify(mediaSize.sizeIndex)}, path {$pathname}
+  </Text>
+</Component>
\ No newline at end of file