more style / layout updates

assets/tailwind.config.js

@@ -17,6 +17,7 @@ module.exports = {
   },
   plugins: [
     require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
     plugin(({addVariant}) => addVariant('phx-no-feedback', ['&.phx-no-feedback', '.phx-no-feedback &'])),
     plugin(({addVariant}) => addVariant('phx-click-loading', ['&.phx-click-loading', '.phx-click-loading &'])),
     plugin(({addVariant}) => addVariant('phx-submit-loading', ['&.phx-submit-loading', '.phx-submit-loading &'])),

lib/sloane_sh/config.ex

@@ -9,7 +9,7 @@ defmodule SloaneSH.Config do
   typedstruct do
     field :pages_dir, String.t(), enforce: true
     field :posts_dir, String.t(), enforce: true
-    field :output, String.t(), enforce: true
+    field :output_dir, String.t(), enforce: true
   end
 
   def default do
@@ -18,7 +18,7 @@ defmodule SloaneSH.Config do
     %Config{
       pages_dir: Path.join(priv, "site/pages"),
       posts_dir: Path.join(priv, "site/posts"),
-      output: Path.join(priv, "output")
+      output_dir: Path.join(priv, "output")
     }
   end
 

lib/sloane_sh/layouts.ex

@@ -24,4 +24,7 @@ defmodule SloaneSH.Layouts do
     :attrs,
     :inner_content
   ])
+
+  defp prefix_title(prefix, nil), do: prefix
+  defp prefix_title(prefix, page_title), do: [prefix, " | ", page_title]
 end

lib/sloane_sh/layouts/partials.ex

@@ -8,13 +8,18 @@ defmodule SloaneSH.Layouts.Partials do
     :def,
     :header,
     ~S"""
-      <header class="flex flex-col gap-2">
-        <a href="/"><h1 class="text-xl">sloane.sh</h1></a>
-        <nav class="flex flex-row gap-2">
+    <header class="flex flex-row justify-between gap-2 border-b border-neutral-700 pb-4 mb-2">
+      <%= if attrs[:title] do %>
+        <h1 class="text-3xl font-bold"><%= attrs[:title] %></h1>
+      <% end %>
+    <div class="flex flex-col gap-2 <%= cx("items-end": attrs[:title]) %>">
+        <a href="/"><h1 class="text-2xl">sloane.sh</h1></a>
+        <nav class="flex flex-row gap-2 text-lg">
           <a href="/" class="<%= cx(underline: attrs[:permalink] == "/") %>">home</a>
-          <a href="/about" class="<%= cx(underline: attrs[:permalink] == "/about") %>">about</a>
+          <a href="/writing" class="<%= cx(underline: Map.get(attrs, :permalink, "") =~ ~r[^/posts]) %>">writing</a>
         </nav>
-      </header>
+      </div>
+    </header>
     """,
     [:ctx, :attrs]
   )

lib/sloane_sh/markdown.ex

@@ -6,6 +6,7 @@ defmodule SloaneSH.Markdown do
   use TypedStruct
 
   alias SloaneSH.Context
+  alias SloaneSH.FrontMatter
   alias __MODULE__
 
   typedstruct do
@@ -15,22 +16,10 @@ defmodule SloaneSH.Markdown do
 
   def transform(%Context{} = ctx, data) when is_binary(data) do
     data
-    |> parse_attrs(ctx)
+    |> FrontMatter.parse(ctx)
     |> parse_markdown(ctx)
   end
 
-  defp parse_attrs("+++" <> rest, _ctx) do
-    [toml, body] = String.split(rest, ["+++\n", "+++\r\n"], parts: 2)
-
-    with {:ok, attrs} <- Toml.decode(toml, keys: :atoms) do
-      {:ok, attrs, body}
-    end
-  end
-
-  defp parse_attrs(body, _ctx) do
-    {:ok, %{}, body}
-  end
-
   defp parse_markdown({:ok, attrs, body}, _ctx) do
     with {:ok, html, msgs} <- Earmark.as_html(body) do
       for msg <- msgs, do: Logger.warning(msg)

lib/sloane_sh/write.ex

@@ -12,7 +12,7 @@ defmodule SloaneSH.Write do
   end
 
   def write(ctx, name, data) do
-    path = Path.join(ctx.config.output, name)
+    path = Path.join(ctx.config.output_dir, name)
 
     with :ok <- File.mkdir_p(Path.dirname(path)) do
       File.write(path, data)

priv/site/layouts/page.html.eex

@@ -1 +1,4 @@
-<%= inner_content %>
+<%= header(ctx, attrs) %>
+<main class="prose-neutral prose prose-xl dark:prose-invert">
+  <%= inner_content %>
+</main>

priv/site/layouts/post.html.eex

@@ -1,5 +1,5 @@
-<%= if attrs[:title] do %>
-  <h2 class="font-sans font-bold text-lg"><%= attrs[:title] %></h2>
-<% end %>
+<%= header(ctx, attrs) %>
 
-<%= inner_content %>
+<article class="prose-neutral prose prose-xl dark:prose-invert">
+  <%= inner_content %>
+</article>

priv/site/layouts/root.html.eex

@@ -3,13 +3,10 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>sloane.sh | <%= attrs[:title] %></title>
+    <title><%= prefix_title("sloane.sh", attrs[:page_title]) %></title>
     <link rel="stylesheet" href="/assets/app.css" />
   </head>
-  <body class="w-full max-w-3xl bg-white text-black dark:bg-neutral-800 dark:text-neutral-100">
-    <%= header(ctx, attrs) %>
-    <main class="mt-6">
-      <%= inner_content %>
-    </main>
+  <body class="w-full max-w-3xl bg-white text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100">
+    <%= inner_content %>
   </body>
 </html>

priv/site/pages/about.md

@@ -1,6 +0,0 @@
-+++
-permalink = "/about"
-title = "about"
-+++
-
-Yes it does!!

priv/site/pages/index.md

@@ -1,12 +1,12 @@
 +++
 permalink = "/"
-title = "home"
+page_title = "home"
 +++
 
-# Hello, World!
+hey, i'm sloane! i'm a professional software engineer and an amateur musician, photographer, wife, chef, and pet mom.
 
-my name is sloane. i am a software engineer.
+#### around the web
 
-i'm on the fediverse [@sloane@tech.lgbt](https://tech.lgbt/@sloane)
-
-also on [github](https://github.com/sloanelybutsurely).
+- [@sloane](https://tech.lgbt/@sloane) on the fediverse
+- [@sloanelybutsurely](https://github.com/sloanelybutsurely) on github
+- [@sloane_of_arc](https://instagram.com/sloane_of_arc) on instagram