feat: Add various styles

2023-09-23 17:15:30 +00:00 · 2023-09-23 17:15:30 +00:00 · caa1e26a93
commit caa1e26a93
parent 005d0f6515
5 changed files with 102 additions and 43 deletions
--- a/assets/css/app.css
+++ b/assets/css/app.css
@ -3,18 +3,31 @@
@import "tailwindcss/utilities";

 html {
-    --base-font-size: 16.666667;
-    --base-line-height: 1.32;
+    --base-font-size: 20;
+    --base-line-height: 1.3;
    --font-size: calc(var(--base-font-size) * 1px);
    --line-height: calc(var(--base-line-height) * 1rem);
    --base-vspace: calc(var(--base-line-height) * var(--base-font-size));
    --vspace: calc(var(--base-vspace) * 1px);
+    --line-trim: -0.6666666666666667px;
    font-size: var(--font-size);
    line-height: var(--line-height);
 }

 .container {
-    max-width: 80ch;
+    max-width: 65ch;
+}
+
+a {
+    @apply text-blue;
+}
+
+a::before {
+    /* content: "⇲"; */
+}
+
+nav a {
+    @apply text-dark;
 }

 .box {
@ -28,6 +41,14 @@ p {
    margin-bottom: var(--vspace);
 }

+a {
+    display: inline-block;
+}
+
+a:hover {
+    @apply bg-light text-dark;
+}
+
@font-face {
    font-family: "JetBrainsMono";
    src: url("/fonts/JetBrainsMono-VariableFont_wght.ttf");
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@ -17,7 +17,7 @@ module.exports = {
            blue: 'rgb(93, 110, 238)',
            magenta: 'rgb(211, 48, 233)',
            cyan: 'rgb(139, 243, 231)',
-            light: 'rgb(181, 190, 255)'
+            light: 'rgb(218, 222, 255)'// 'rgb(181, 190, 255)'
        },
        fontSize: {
            // xs: ['0.75rem', { lineHeight: '1rem' }],
--- a/lib/pre_dot_hn.ex
+++ b/lib/pre_dot_hn.ex
@ -37,27 +37,61 @@ defmodule PreDotHn do
  def validate(other), do: {:ok, other}

  def run() do
-    "site/**/*.md"
-    |> Path.wildcard()
-    |> Enum.map(&read/1)
-    |> Enum.map(&validate/1)
-    |> Enum.filter(fn
-      {:error, error} ->
-        Logger.warn(error)
+    posts =
+      "site/**/*.md"
+      |> Path.wildcard()
+      |> Enum.map(&read/1)
+      |> Enum.map(&validate/1)
+      |> Enum.filter(fn
+        {:error, error} ->
+          Logger.warn(error)

-        false
+          false

-      {:ok, _other} ->
-        true
-    end)
-    |> Enum.map(fn {:ok, page} ->
-      page =
-        page |> Enum.map(fn {key, value} -> {String.to_atom(key), value} end) |> Enum.into(%{})
+        {:ok, _other} ->
+          true
+      end)
+      |> Enum.map(&elem(&1, 1))
+      |> Enum.sort_by(&Map.get(&1, "date"), :desc)
+      |> Enum.map(&atomize_keys/1)

-      write_page(page)
-    end)
+    index = make_index(posts)
+
+    Enum.map([index | posts], &write_page/1)
  end

+  def atomize_keys(page) do
+    page
+    |> Enum.map(fn {key, value} -> {String.to_atom(key), value} end)
+    |> Enum.into(%{})
+  end
+
+  def make_index(posts) do
+    assigns = %{posts: posts}
+
+    body =
+      ~H"""
+      <ul>
+        <%= for post <- @posts do %>
+          <li style="margin-bottom: 1rem">
+            <span class="text-yellow align-top"><%= post.date %></span>&nbsp;
+            <a class="text-ellipsis overflow-hidden" style="max-width: 40ch" href={"/#{post.slug}/"}><%= post.title %></a>
+          </li>
+        <% end %>
+      </ul>
+      """
+      |> rendered_to_string()
+
+    %{
+      title: "Blog",
+      slug: "blog",
+      date: "2023-09-23",
+      body: body
+    }
+  end
+
+  attr(:title, :string, required: true)
+  attr(:description, :string)
  slot(:inner_block, required: true)

  def layout(assigns) do
@ -68,9 +102,11 @@ defmodule PreDotHn do
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">

-      <title>A Basic HTML5 Template</title>
-      <meta name="description" content="A simple HTML5 Template for new projects.">
-      <meta name="author" content="SitePoint">
+      <title><%= @title %> | Robert Prehn</title>
+      <%= if assigns[:description] do %>
+        <meta name="description" content={@description} />
+      <% end %>
+      <meta name="author" content="Robert Prehn">

      <link rel="icon" href="/favicon.ico">
      <link rel="icon" href="/favicon.svg" type="image/svg+xml">
@ -81,18 +117,34 @@ defmodule PreDotHn do
    </head>

    <body class="bg-dark font-mono text-light">
-        <%= render_slot(@inner_block) %>
+      <.menu />
+      <%= render_slot(@inner_block) %>
    </body>
    </html>
    """
  end

+  def menu(assigns) do
+    ~H"""
+    <nav class="block bg-blue text-dark">
+      &nbsp;<a href="/">About Me</a>
+      &nbsp;<a href="/blog">Blog</a>
+    </nav>
+    """
+  end
+
  def write_page(%{slug: slug} = assigns) do
-    filename = "#{slug}.html"
-    path = Path.join(["priv", "static", filename])
+    path =
+      if slug == "index" do
+        Path.join(["priv", "static", "index.html"])
+      else
+        directory = Path.join(["priv", "static", slug])
+        File.mkdir_p!(directory)
+        Path.join(["priv", "static", slug, "index.html"])
+      end

    ~H"""
-    <.layout>
+    <.layout title={@title} description={assigns[:description]}>
      <main class="container mx-auto">
        <section class="box border border-light">
          <%= {:safe, @body} %>
--- a/lib/pre_dot_hn/markdown.ex
+++ b/lib/pre_dot_hn/markdown.ex
@ -19,20 +19,6 @@ defmodule PreDotHn.Markdown do
    |> Earmark.Transform.transform()
  end

-  defp transformer({"a", attrs, ignored, %{wikilink: true} = meta}) do
-    attrs =
-      attrs
-      |> Enum.map(fn
-        {"href", href} ->
-          {"href", "/notes#{href}"}
-
-        other ->
-          other
-      end)
-
-    {"a", attrs, ignored, meta}
-  end
-
  defp transformer({"a", attrs, ignored, meta}) do
    href = Enum.find_value(attrs, "", fn {key, value} -> key == "href" && value end)
    href_uri = URI.parse(href)
--- a/site/pages/about.md
+++ b/site/pages/about.md
@ -6,11 +6,11 @@ slug: index

 My name is Robert Prehn.

-I'm a software engineering leader and independent consultant. You can hire me to help your software team to ship products better and faster. I'm also a Worker-Owner at [Mythic Insight](https: //www.mythicinsight.com/).
+I'm a software engineering leader and independent consultant. You can hire me to help your software team to ship products better and faster. I'm also a Worker-Owner at [Mythic Insight](https://www.mythicinsight.com/).

 A better future is possible!

 <p class="h-card">
  <img alt="Photo of Robert Prehn" class="Gravatar u-photo" src="https://www.gravatar.com/avatar/925bde4cfd5d42530618204b73200d52">
-  <a class="p-name u-url" href="https://pre.hn">Robert Prehn</a> | <a class="u-key" href="https://keybase.io/prehnra/pgp_keys.asc">Public Key</a> | <a href="https://github.com/prehnRA" rel="me">GitHub</a> | <a href="https://keybase.io/prehnra" rel="me">Keybase</a> | <a href="https://mastodon.social/@prehnra" rel="me">Fediverse</a>
+  <a class="p-name u-url" href="https://pre.hn" target="_blank">Robert Prehn</a> | <a class="u-key" href="https://keybase.io/prehnra/pgp_keys.asc" target="_blank">Public Key</a> | <a href="https://github.com/prehnRA" rel="me" target="_blank">GitHub</a> | <a href="https://keybase.io/prehnra" rel="me" target="_blank">Keybase</a> | <a href="https://mastodon.social/@prehnra" rel="me" target="_blank">Fediverse</a>
 </p>