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 ``` -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 ``` -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/ - - -

{$props.title}

- - {$props.date} - - - {$props.author} - + +

{$props.post.title}

+ {$props.post.date} • {$props.post.author} - - + + ``` @@ -192,7 +185,7 @@ The `NavLink` uses the post's slug to bind to its corresponding `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} @@ -216,31 +209,32 @@ Although it's feasible to use a `NavGroup` to list the posts, a blog should real ```xmlui copy - -

XMLUI Blog

- Latest updates, tutorials, and insights for building with XMLUI - - +

XMLUI Blog

+ Latest updates, tutorials, and insights for building with XMLUI + - - - - {$item.title} - - - - {$item.date} • {$item.author} - - - - - + + + + {$item.title} + + + + {$item.date} • {$item.author} + + + + + + + - + ``` @@ -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`. XMLUI blog test - ``` -And here's `Main.xmlui`. - -```xmlui copy - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - This site is an XMLUI™ app. - - -
- - - -``` - -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 - - - - -``` - -Here is `SearchPrep`. It uses `DataSource` in a `List` to read posts, and calls global functions to process them. - -```xmlui copy - - - - - - - - -``` - -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 - - - - - - -

- - - - - - - - - - -``` - -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 9de4e44c3..75f214237 100644 --- a/blog/src/Main.xmlui +++ b/blog/src/Main.xmlui @@ -1,38 +1,41 @@ + ]}`> + - - + + + Tutorials, tips, best practices + + + + + +