Rewriting Strange Leaflet in Phoenix and LiveSvelte

Again? Rewriting this blog again? Yes! This blog is now a Phoenix app and using LiveSvelte for frontend components. All the power of Phoenix + all the power of Svelte == awesome.

SvelteKit

SvelteKit was great and I still say it’s an interesting approach. Its foundational integration with Svelte itself is, of course, wonderful.

But check out the src/routes directory structure I had grown for Strange Leaflet

src/routes
├── +layout.svelte
├── +page.svelte
├── about
│  └── +page.svelte
├── api
│  └── blog
│     ├── +server.js
│     ├── featured
│     │  └── +server.js
│     ├── gitblogs
│     │  └── +server.js
│     ├── micro
│     │  └── +server.js
│     ├── posts
│     │  └── +server.js
│     └── search
│        └── +server.js
├── blog
│  ├── +layout.js
│  ├── +page.js
│  ├── +page.svelte
│  ├── featured
│  │  ├── +layout.js
│  │  ├── +page.server.js
│  │  └── +page.svelte
│  ├── feed[[format]]
│  │  └── +server.js
│  ├── gitblogs
│  │  ├── +layout.js
│  │  ├── +page.server.js
│  │  ├── +page.svelte
│  │  ├── [post]
│  │  │  ├── +layout.js
│  │  │  ├── +page.js
│  │  │  └── +page.svelte
│  │  └── mdsvex.svelte
│  ├── mdsvex.svelte
│  ├── micro
│  │  ├── +layout.js
│  │  ├── +page.server.js
│  │  ├── +page.svelte
│  │  └── [post]
│  │     ├── +layout.js
│  │     ├── +page.js
│  │     └── +page.svelte
│  └── posts
│     ├── +layout.js
│     ├── +page.server.js
│     ├── +page.svelte
│     ├── [post]
│     │  ├── +layout.js
│     │  ├── +page.js
│     │  └── +page.svelte
│     └── mdsvex.svelte
├── contact
│  └── +page.svelte
├── feed[[format]]
│  └── +server.js
└── search
   ├── +page.server.js
   └── +page.svelte

Not terrible but I found myself editing the wrong +page.svelte file or +server.js file more than once. And any additional routes would compound the problem.

Here’s the complexity around getting blog posts

const blogItems = (globbed) => {
  return Object.entries(globbed)
    .map(([path, meta]) => {
      meta.metadata.date = new Date(meta.metadata.date);

      return {
        path: path
          .replace(/^\/src\/lib/, "")
          .replace(/\.svx$/, "")
          .replace(/\/index$/, ""),
        ...meta,
      };
    })
    .sort((a, b) => {
      return b.metadata.date - a.metadata.date;
    });
};

export const fetchPosts = async () => {
  const postFiles = import.meta.glob("/src/lib/blog/posts/**/*.svx", {
    eager: true,
  });
  return blogItems(postFiles);
};

Phoenix

Conversely this is the lib directory tree for this Phoenix app

lib
├── mix
│  └── tasks
│     └── strangeleaflet.blog.gen.feed.ex
├── strange_leaflet
│  ├── application.ex
│  ├── blog
│  │  ├── blog.ex
│  │  └── post.ex
│  └── mailer.ex
├── strange_leaflet.ex
├── strange_leaflet_web
│  ├── components
│  │  ├── core_components.ex
│  │  ├── layouts
│  │  │  ├── app.html.heex
│  │  │  └── root.html.heex
│  │  └── layouts.ex
│  ├── controllers
│  │  ├── blog_controller.ex
│  │  ├── blog_html
│  │  │  ├── index.html.heex
│  │  │  ├── pagination.html.heex
│  │  │  ├── show.html.heex
│  │  │  ├── tagged.html.heex
│  │  │  └── tags.html.heex
│  │  ├── blog_html.ex
│  │  ├── error_html
│  │  │  ├── 404.html.heex
│  │  │  └── 500.html.heex
│  │  ├── error_html.ex
│  │  ├── error_json.ex
│  │  ├── page_controller.ex
│  │  ├── page_html
│  │  │  ├── about.html.heex
│  │  │  └── homepage.html.heex
│  │  ├── page_html.ex
│  │  ├── widget_controller.ex
│  │  └── widget_html.ex
│  ├── endpoint.ex
│  ├── gettext.ex
│  ├── router.ex
│  └── telemetry.ex
└── strange_leaflet_web.ex

Much easier to follow and organize concepts, at least for me. Certainly easier to wire up new routes!

get "/widgets", WidgetController, :index
get "/widgets/:id", WidgetController, :show

And because it’s Elixir I can run my application and connect Livebook to that running application and interact with my code using Livebook as a wonderful REPL. Here’s me figuring out the code to build up the list of tags and counts from posts.

LiveSvelte

Thanks to LiveSvelte I don’t have to give up the power of Svelte components for the frontend! Everything in /widgets is currently a Svelte component. I could add LiveView components as well. I could even have Svelte components wired up to LiveView!

The navigation header you see is still a Flowbite-Svelte component. I still have my customized penguin component.

Svelte

How’s the Svelte component experience? Pretty great!

I have assets/svelte and all the Svelte components are in that directory. If I want to use any npm packages such as the excellent Flowbite Svelte I simply add them in the assets directory which has a normal package.json and them they’re available to use in a Svelte component.

import { Pagination } from "flowbite-svelte";

NimblePublisher

Instead of mdsvex to organize .svx (Svelte + Markdown) files as blog posts I’m using NimblePublisher from Dashbit. It serves a similar purpose but I get to use Elixir and a well thought out developer experience to organize blog posts.

Elixir school has an excellent tutorial on using NimblePublisher if you’re interested.

Here’s how I tell NimblePublisher where and what to find as blog posts.

use NimblePublisher,
  build: Post,
  from: Application.app_dir(:strange_leaflet, "priv/posts/**/*.md"),
  as: :posts,
  highlighters: [:makeup_elixir, :makeup_erlang, :makeup_json, :makeup_js]

And to have a sorted set of @posts?

@posts Enum.sort_by(@posts, & &1.date, {:desc, Date})

Here’s how I build up my tag list.

@tags @posts
      |> Enum.flat_map(& &1.tags)
      |> Enum.frequencies()
      |> Enum.sort_by(fn {_tag, count} -> count end, :desc)

This experience being so smooth and easy is key for me since I want to introduce a “leaflet” concept separate from blog posts.

I have a great blog writing experience, a powerful web backend, and a powerful web frontend: all in one app!