Redesign with Tailwind

This commit is contained in:
Aleks Rutins 2025-06-09 21:50:52 -04:00
parent b29b35e166
commit 3a25e0b4b0
Signed by: asr
SSH key fingerprint: SHA256:DBype7RrB3qCdOLdkvecD2Y3THOYgYOVw6jAHVgsGRQ
13 changed files with 161 additions and 121 deletions

View file

@ -2,17 +2,20 @@ class Pages::Blog < ::Phlex::HTML
include Util::PostLoader
def view_template
render ::Pages::Layout.new(:blog) {
ul {
render ::Pages::Layout.new(:blog, banner: '/trees.jpg') {
h1(class: 'font-bold text-center') { 'Blog' }
table {
posts.each { |post|
meta = post[:data].front_matter
return unless meta.key?('published_on')
li {
p {
time(datetime: meta['published_on']) { meta['published_on'] }
a(href: '/p/' + post[:slug], style: "padding-left: 10px;") { meta['title'] }
tr {
td {
time(datetime: meta['published_on'], class: 'text-gray-500') { meta['published_on'] }
}
td {
a(href: '/p/' + post[:slug], class: 'pl-2') { meta['title'] }
}
}
}

View file

@ -1,52 +1,52 @@
class Pages::Home < ::Phlex::HTML
def project_link(name:, url:, desc:)
li {
a(href: url) { name }
span { " - " + desc }
a(class: 'flex flex-col border border-gray-300 p-2 rounded gap-1', href: url) {
h3(class: 'font-bold') { name }
span { desc }
}
end
def view_template
render ::Pages::Layout.new(:home) {
p { "i'm aleks rūtiņš." }
p { "i'm a student and programmer, skilled with a wide variety of languages and tools." }
render ::Pages::Layout.new(:home, banner: '/newhaven.jpg') {
p(class: "text-center font-bold") { "Aleks Rūtiņš" }
p(class: "text-center") { "developer ~ designer ~ musician" }
h2 { "featured projects" }
ul {
h2(class: "my-2 text-lg font-bold") { "Featured Projects" }
div(class: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 justify-stretch') {
project_link(
name: "phlexite",
url: "https://git.farthergate.com/p/rad:z4VDVahjKBJYSqR8uRo7UrKZDuXQ6",
desc: "a simple static site generator using phlex for templating"
url: "https://docs.farthergate.com/phlexite",
desc: "A simple static site generator using phlex for templating"
)
project_link(
name: "phlexite-docker",
url: "https://git.farthergate.com/p/rad:z3PY7qd21HkdCEG7uBXnxHrtVTLiP",
desc: "build your phlexite site without worrying about a ruby environment"
desc: "Build your phlexite site without worrying about a ruby environment"
)
project_link(
name: "mzk",
url: "https://sr.ht/~aleksrutins/mzk/",
desc: "bash scripts to help you manage your zettelkasten"
desc: "Bash scripts to help you manage your zettelkasten"
)
project_link(
name: "dynamite",
url: "https://sr.ht/~aleksrutins/dynamite/",
desc: "a customizable lv2 distortion plugin"
desc: "A customizable LV2 distortion plugin"
)
project_link(
name: "packsnap",
url: "https://packsnap.farthergate.com/",
desc: "a reproducible container build system"
desc: "A reproducible container build system"
)
project_link(
name: "biocircuits for mere mortals",
url: "https://bc.farthergate.com/",
desc: "a daunting topic broken down in a (hopefully) friendly way"
desc: "A daunting topic broken down in a (hopefully) friendly way"
)
}
}

View file

@ -12,20 +12,17 @@ module Pages
about: {
title: "About",
url: "/about"
},
garden: {
title: "Garden",
url: "https://garden.farthergate.com"
},
}
}
def initialize(page, meta: {})
def initialize(page, banner: nil, meta: {})
@page = page
if @page.is_a? Symbol
@page_info = pages[page]
else
@page_info = @page
end
@banner = banner
@meta = meta
end
def view_template
@ -36,9 +33,7 @@ module Pages
title { @page_info[:title] + " | Aleks Rūtiņš" }
meta(charset: "utf-8")
meta(name: "viewport", content: "width=device-width, initial-scale=1.0")
link(rel: "prefetch", href: "/DM_Mono/DMMono-Regular.ttf")
link(rel: "prefetch", href: "/DM_Mono/DMMono-Medium.ttf")
link(rel: "stylesheet", href: "/site.css")
link(rel: "stylesheet", href: "/tailwind.css")
script(defer: true, 'data-domain' => "farthergate.com", src: "https://plausible.farthergate.com/js/script.js")
@ -46,15 +41,30 @@ module Pages
meta(name: name, content: content)
}
}
body(class: 'm-0 p-0') {
header(class: 'sticky top-0 bg-white/50 backdrop-blur-md border-gray-500 border-b flex p-3 justify-center') {
nav(class: 'flex gap-4') {
body(class: 'm-0 p-0 font-sans') {
header(class: "#{@banner ? 'fixed' : 'sticky'} top-0 w-screen bg-transparent pointer-events-none flex p-3 items-center justify-center") {
nav(class: 'flex gap-2 p-2 rounded-full border border-gray-300 bg-white/50 backdrop-blur-md pointer-events-auto') {
pages.each { |key, page|
a(href: page[:url], class: key == @page ? "active" : "") { page[:title].downcase }
a(href: page[:url], class: "block rounded-full px-3 py-1 #{key == @page ? 'bg-gray-100/50' : ''}") { page[:title] }
}
}
}
yield
img(src: @banner, class: 'w-full h-[400px] object-cover') if @banner
main(class: 'p-6 max-w-4xl mx-auto') {
yield
}
footer(class: 'text-gray-500 py-4 text-center flex flex-col items-center gap-3') {
p {
a(href: 'https://git.farthergate.com/p') { 'git' }
plain ' ~ '
a(href: 'https://bsky.app/profile/farthergate.com') { 'bsky' }
plain ' ~ '
a(href: 'https://git.farthergate.com/p/rad:z3eNe9ayEhwgxmeJb92jwiY1QsANh') { 'source' }
}
p { "built with phlexite and tailwindcss" }
p { "© #{Time.now.year} Aleks Rūtiņš" }
}
}
}
end

View file

@ -6,10 +6,12 @@ class Pages::Post < ::Phlex::HTML
def view_template
meta = @post[:data].front_matter
render ::Pages::Layout.new({title: meta['title']}) {
p {
article(class: 'prose prose-lg m-auto') {
h1 { meta['title'] }
time(datetime: meta['published_on']) { meta['published_on'] }
hr
render ::Phlex::Markdown.new(@post[:data].content)
}
}