start adding pagefind

.tool-versions

@@ -1,2 +1,3 @@
 erlang 26.2.2
 elixir 1.16.1-otp-26
+nodejs 20.11.1

assets/css/app.css

@@ -2,3 +2,11 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+@media (perfers-color-scheme: dark) {
+  --pagefind-ui-primary: #eeeeee;
+  --pagefind-ui-text: #eeeeee;
+  --pagefind-ui-background: #152028;
+  --pagefind-ui-border: #152028;
+  --pagefind-ui-tag: #152028;
+}
+

assets/js/app.js

@@ -1 +0,0 @@
-console.log('Hello, World!')

assets/tailwind.config.js

@@ -8,6 +8,7 @@ module.exports = {
     './js/**/*.js',
     '../lib/sloane_sh/layouts/*.ex',
     '../priv/site/**/*.*ex',
+    '../priv/site/**/*.md',
   ],
   theme: {
     container: {

config/config.exs

@@ -8,7 +8,7 @@ config :tailwind,
     args: ~w(
       --config=tailwind.config.js
       --input=css/app.css
-      --output=../priv/output/assets/app.css
+      --output=../priv/output/assets/css/app.css
     ),
     cd: Path.expand("../assets", __DIR__)
   ]
@@ -16,7 +16,7 @@ config :tailwind,
 config :esbuild,
   version: "0.20.1",
   default: [
-    args: ~w(js/app.js --bundle --target=es2016 --outdir=../priv/output/assets),
+    args: ~w(js/app.js --bundle --outdir=../priv/output/assets/js),
     cd: Path.expand("../assets", __DIR__),
-    env: %{ "NODE_PATH" => Path.expand("../deps", __DIR__) }
+    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
   ]

lib/sloane_sh/build.ex

@@ -56,7 +56,6 @@ defmodule SloaneSH.Build do
   end
 
   def copy_img(%Context{} = ctx) do
-
     ctx
   end
 end

lib/sloane_sh/layouts/partials.ex

@@ -8,15 +8,13 @@ defmodule SloaneSH.Layouts.Partials do
     :def,
     :header,
     ~S"""
-    <header class="flex flex-row justify-between gap-2 border-b border-neutral-700 pb-4 mb-2">
+    <header class="flex flex-row justify-between gap-2 border-b border-neutral-700 pb-4 mb-2" data-pagefind-ignore>
-      <%= if attrs[:title] do %>
+      <div class="flex flex-col gap-2">
-        <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">
+        <nav class="flex flex-row gap-2 text-xl">
           <a href="/" class="<%= cx(underline: attrs[:permalink] == "/") %>">home</a>
-          <a href="/writing" class="<%= cx(underline: Map.get(attrs, :permalink, "") =~ ~r[^/posts]) %>">writing</a>
+          <a href="/posts" class="<%= cx(underline: Map.get(attrs, :permalink, "") =~ ~r[^/posts]) %>">posts</a>
+          <a href="/search" class="<%= cx(underline: attrs[:permalink] == "/search") %>">search</a>
         </nav>
       </div>
     </header>

lib/sloane_sh/markdown.ex

@@ -12,22 +12,20 @@ defmodule SloaneSH.Markdown do
   typedstruct do
     field :attrs, map(), default: %{}
     field :html, String.t(), default: ""
+    field :text, String.t(), default: ""
   end
 
   def transform(%Context{} = ctx, data) when is_binary(data) do
-    data
+    with {:ok, attrs, body} <- FrontMatter.parse(data, ctx),
-    |> FrontMatter.parse(ctx)
+         {:ok, html, msgs} <- Earmark.as_html(body),
-    |> parse_markdown(ctx)
+         {:ok, html_tree} <- Floki.parse_fragment(html) do
-  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)
 
       {:ok,
        %Markdown{
          attrs: attrs,
-         html: html
+         html: html,
+         text: Floki.text(html_tree, sep: " ")
        }}
     else
       {:error, _, msgs} ->
@@ -38,6 +36,4 @@ defmodule SloaneSH.Markdown do
         :error
     end
   end
-
-  defp parse_markdown(other, _ctx), do: other
 end

mix.exs

@@ -30,13 +30,18 @@ defmodule SloaneSH.MixProject do
       {:bandit, "~> 1.2"},
       {:tailwind, "~> 0.2"},
       {:toml, "~> 0.7"},
-      {:esbuild, "~> 0.8"}
+      {:esbuild, "~> 0.8"},
+      {:floki, "~> 0.35"}
     ]
   end
 
   defp aliases do
     [
-      "assets.deploy": ["tailwind default --minify"]
+      "assets.deploy": [
+        "tailwind default --minify",
+        "esbuild default --minify --sourcemap --target=chrome58,firefox57,safari11,edge16"
+      ],
+      "site.index": "cmd npx -y pagefind --site priv/output/"
     ]
   end
 end

mix.lock

@@ -5,6 +5,7 @@
   "earmark_parser": {:hex, :earmark_parser, "1.4.39", "424642f8335b05bb9eb611aa1564c148a8ee35c9c8a8bba6e129d51a3e3c6769", [:mix], [], "hexpm", "06553a88d1f1846da9ef066b87b57c6f605552cfbe40d20bd8d59cc6bde41944"},
   "esbuild": {:hex, :esbuild, "0.8.1", "0cbf919f0eccb136d2eeef0df49c4acf55336de864e63594adcea3814f3edf41", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:jason, "~> 1.4", [hex: :jason, repo: "hexpm", optional: false]}], "hexpm", "25fc876a67c13cb0a776e7b5d7974851556baeda2085296c14ab48555ea7560f"},
   "file_system": {:hex, :file_system, "1.0.0", "b689cc7dcee665f774de94b5a832e578bd7963c8e637ef940cd44327db7de2cd", [:mix], [], "hexpm", "6752092d66aec5a10e662aefeed8ddb9531d79db0bc145bb8c40325ca1d8536d"},
+  "floki": {:hex, :floki, "0.35.4", "cc947b446024732c07274ac656600c5c4dc014caa1f8fb2dfff93d275b83890d", [:mix], [], "hexpm", "27fa185d3469bd8fc5947ef0f8d5c4e47f0af02eb6b070b63c868f69e3af0204"},
   "hpax": {:hex, :hpax, "0.1.2", "09a75600d9d8bbd064cdd741f21fc06fc1f4cf3d0fcc335e5aa19be1a7235c84", [:mix], [], "hexpm", "2c87843d5a23f5f16748ebe77969880e29809580efdaccd615cd3bed628a8c13"},
   "jason": {:hex, :jason, "1.4.1", "af1504e35f629ddcdd6addb3513c3853991f694921b1b9368b0bd32beb9f1b63", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "fbb01ecdfd565b56261302f7e1fcc27c4fb8f32d56eab74db621fc154604a7a1"},
   "mime": {:hex, :mime, "2.0.5", "dc34c8efd439abe6ae0343edbb8556f4d63f178594894720607772a041b04b02", [:mix], [], "hexpm", "da0d64a365c45bc9935cc5c8a7fc5e49a0e0f9932a761c55d6c52b142780a05c"},

priv/site/layouts/page.html.eex

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

priv/site/layouts/post.html.eex

@@ -1,5 +1,5 @@
 <%= header(ctx, attrs) %>
 
-<article class="prose-neutral prose prose-xl dark:prose-invert">
+<article class="prose-neutral prose prose-xl dark:prose-invert" data-pagefind-body>
   <%= inner_content %>
 </article>

priv/site/layouts/root.html.eex

@@ -1,14 +1,14 @@
 <!DOCTYPE html>
-<html class="m-4 flex flex-row justify-center">
+<html class="m-4 flex flex-row justify-center" lang="en-US">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/x-icon" sizes="32x32" href="/assets/img/favicon-32x32.png">
     <title><%= prefix_title("sloane.sh", attrs[:page_title]) %></title>
-    <link rel="stylesheet" href="/assets/app.css" />
+    <link rel="stylesheet" href="/assets/css/app.css" />
   </head>
-  <body class="w-full max-w-3xl bg-white text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100">
+  <body class="w-full max-w-3xl bg-white text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100 dark">
     <%= inner_content %>
-    <script defer src="/assets/app.js"></script>
+    <script defer src="/assets/js/app.js"></script>
   </body>
 </html>

priv/site/pages/search.md

@@ -0,0 +1,13 @@
++++
+permalink = "/search"
++++
+
+<div class="mt-6" id="search"></div>
+
+<link rel="stylesheet" href="/pagefind/pagefind-ui.css" />
+<script src="/pagefind/pagefind-ui.js"></script>
+<script>
+window.addEventListener('DOMContentLoaded', () => {
+  new PagefindUI({ element: '#search', showSubResults: true });
+});
+</script>

priv/site/posts/2024-02-16-test-post.md

@@ -1,7 +1,10 @@
 +++
 title = "Test Post"
+page_title = "Test Post"
 +++
 
+# Test Post
+
 this is just a test of the posts functionality
 
 Does this work ?