prehnra/pre.hn
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Add various styles

Browse source
This commit is contained in:
Robert Prehn 2023-09-23 17:15:30 +00:00
parent 005d0f6515
commit caa1e26a93
No known key found for this signature in database
5 changed files with 102 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
assets/css/app.css
View file

@ -3,18 +3,31 @@
@import "tailwindcss/utilities"; @import "tailwindcss/utilities";
html { html {
--base-font-size: 16.666667; --base-font-size: 20;
--base-line-height: 1.32; --base-line-height: 1.3;
--font-size: calc(var(--base-font-size) * 1px); --font-size: calc(var(--base-font-size) * 1px);
--line-height: calc(var(--base-line-height) * 1rem); --line-height: calc(var(--base-line-height) * 1rem);
--base-vspace: calc(var(--base-line-height) * var(--base-font-size)); --base-vspace: calc(var(--base-line-height) * var(--base-font-size));
--vspace: calc(var(--base-vspace) * 1px); --vspace: calc(var(--base-vspace) * 1px);
--line-trim: -0.6666666666666667px;
font-size: var(--font-size); font-size: var(--font-size);
line-height: var(--line-height); line-height: var(--line-height);
} }
.container { .container {
max-width: 80ch; max-width: 65ch;
}
a {
@apply text-blue;
}
a::before {
/* content: "⇲"; */
}
nav a {
@apply text-dark;
} }
.box { .box {
@ -28,6 +41,14 @@ p {
margin-bottom: var(--vspace); margin-bottom: var(--vspace);
} }
a {
display: inline-block;
}
a:hover {
@apply bg-light text-dark;
}
@font-face { @font-face {
font-family: "JetBrainsMono"; font-family: "JetBrainsMono";
src: url("/fonts/JetBrainsMono-VariableFont_wght.ttf"); src: url("/fonts/JetBrainsMono-VariableFont_wght.ttf");

2
assets/tailwind.config.js
View file

@ -17,7 +17,7 @@ module.exports = {
blue: 'rgb(93, 110, 238)', blue: 'rgb(93, 110, 238)',
magenta: 'rgb(211, 48, 233)', magenta: 'rgb(211, 48, 233)',
cyan: 'rgb(139, 243, 231)', cyan: 'rgb(139, 243, 231)',
light: 'rgb(181, 190, 255)' light: 'rgb(218, 222, 255)'// 'rgb(181, 190, 255)'
}, },
fontSize: { fontSize: {
// xs: ['0.75rem', { lineHeight: '1rem' }], // xs: ['0.75rem', { lineHeight: '1rem' }],

74
lib/pre_dot_hn.ex
View file

@ -37,6 +37,7 @@ defmodule PreDotHn do
def validate(other), do: {:ok, other} def validate(other), do: {:ok, other}
def run() do def run() do
posts =
"site/**/*.md" "site/**/*.md"
|> Path.wildcard() |> Path.wildcard()
|> Enum.map(&read/1) |> Enum.map(&read/1)
@ -50,14 +51,47 @@ defmodule PreDotHn do
{:ok, _other} -> {:ok, _other} ->
true true
end) end)
|> Enum.map(fn {:ok, page} -> |> Enum.map(&elem(&1, 1))
page = |> Enum.sort_by(&Map.get(&1, "date"), :desc)
page |> Enum.map(fn {key, value} -> {String.to_atom(key), value} end) |> Enum.into(%{}) |> Enum.map(&atomize_keys/1)
write_page(page) index = make_index(posts)
end)
Enum.map([index | posts], &write_page/1)
end 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) slot(:inner_block, required: true)
def layout(assigns) do def layout(assigns) do
@ -68,9 +102,11 @@ defmodule PreDotHn do
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>A Basic HTML5 Template</title> <title><%= @title %> | Robert Prehn</title>
<meta name="description" content="A simple HTML5 Template for new projects."> <%= if assigns[:description] do %>
<meta name="author" content="SitePoint"> <meta name="description" content={@description} />
<% end %>
<meta name="author" content="Robert Prehn">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="icon" href="/favicon.svg" type="image/svg+xml">
@ -81,18 +117,34 @@ defmodule PreDotHn do
</head> </head>
<body class="bg-dark font-mono text-light"> <body class="bg-dark font-mono text-light">
<.menu />
<%= render_slot(@inner_block) %> <%= render_slot(@inner_block) %>
</body> </body>
</html> </html>
""" """
end 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 def write_page(%{slug: slug} = assigns) do
filename = "#{slug}.html" path =
path = Path.join(["priv", "static", filename]) 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""" ~H"""
<.layout> <.layout title={@title} description={assigns[:description]}>
<main class="container mx-auto"> <main class="container mx-auto">
<section class="box border border-light"> <section class="box border border-light">
<%= {:safe, @body} %> <%= {:safe, @body} %>

14
lib/pre_dot_hn/markdown.ex
View file

@ -19,20 +19,6 @@ defmodule PreDotHn.Markdown do
|> Earmark.Transform.transform() |> Earmark.Transform.transform()
end 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 defp transformer({"a", attrs, ignored, meta}) do
href = Enum.find_value(attrs, "", fn {key, value} -> key == "href" && value end) href = Enum.find_value(attrs, "", fn {key, value} -> key == "href" && value end)
href_uri = URI.parse(href) href_uri = URI.parse(href)

4
site/pages/about.md
View file

@ -6,11 +6,11 @@ slug: index
My name is Robert Prehn. 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! A better future is possible!
<p class="h-card"> <p class="h-card">
<img alt="Photo of Robert Prehn" class="Gravatar u-photo" src="https://www.gravatar.com/avatar/925bde4cfd5d42530618204b73200d52"> <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> </p>