feat: Add various styles
This commit is contained in:
parent
005d0f6515
commit
caa1e26a93
5 changed files with 102 additions and 43 deletions
|
@ -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");
|
||||||
|
|
|
@ -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' }],
|
||||||
|
|
|
@ -37,27 +37,61 @@ defmodule PreDotHn do
|
||||||
def validate(other), do: {:ok, other}
|
def validate(other), do: {:ok, other}
|
||||||
|
|
||||||
def run() do
|
def run() do
|
||||||
"site/**/*.md"
|
posts =
|
||||||
|> Path.wildcard()
|
"site/**/*.md"
|
||||||
|> Enum.map(&read/1)
|
|> Path.wildcard()
|
||||||
|> Enum.map(&validate/1)
|
|> Enum.map(&read/1)
|
||||||
|> Enum.filter(fn
|
|> Enum.map(&validate/1)
|
||||||
{:error, error} ->
|
|> Enum.filter(fn
|
||||||
Logger.warn(error)
|
{:error, error} ->
|
||||||
|
Logger.warn(error)
|
||||||
|
|
||||||
false
|
false
|
||||||
|
|
||||||
{: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>
|
||||||
|
<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">
|
||||||
<%= render_slot(@inner_block) %>
|
<.menu />
|
||||||
|
<%= render_slot(@inner_block) %>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def menu(assigns) do
|
||||||
|
~H"""
|
||||||
|
<nav class="block bg-blue text-dark">
|
||||||
|
<a href="/">About Me</a>
|
||||||
|
<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} %>
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue