diff --git a/.gitignore b/.gitignore index f559e55..ac22028 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ _build/ vendor/bundle -.vscode/ \ No newline at end of file +.vscode/ +node_modules/ diff --git a/.radicle/native.yaml b/.radicle/native.yaml index 7f8785b..6d7302d 100644 --- a/.radicle/native.yaml +++ b/.radicle/native.yaml @@ -1,3 +1,4 @@ shell: | + npm ci podman run -it -v .:/site:z quay.io/aspr/phlexite:latest - cp -r _build/* /srv/farthergate.com/ \ No newline at end of file + cp -r _build/* /srv/farthergate.com/ diff --git a/assets/newhaven.jpg b/assets/newhaven.jpg new file mode 100644 index 0000000..0cbdd21 Binary files /dev/null and b/assets/newhaven.jpg differ diff --git a/assets/site.css b/assets/site.css deleted file mode 100644 index 092542f..0000000 --- a/assets/site.css +++ /dev/null @@ -1,75 +0,0 @@ -@font-face { - font-family: "DM Mono"; - src: url("DM_Mono/DMMono-Regular.ttf") format("opentype"); -} - -@font-face { - font-family: "DM Mono"; - font-weight: 500; - src: url("DM_Mono/DMMono-Medium.ttf") format("opentype"); -} - -@font-face { - font-family: "DM Mono"; - font-style: italic; - src: url("DM_Mono/DMMono-Italic.ttf") format("opentype"); -} - -@font-face { - font-family: "DM Mono"; - font-weight: 500; - font-style: italic; - src: url("DM_Mono/DMMono-MediumItalic.ttf") format("opentype"); -} - -:root { - font-family: "DM Mono", "Courier New", Courier, monospace; - background-color: hsl(224, 44%, 95%); - --color-theme-1: #ff3e00; -} - -body { - max-width: 700px; - padding: 20px; - margin: auto; -} - -nav { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - padding: 20px; - gap: 15px; -} - -a { - color: var(--color-theme-1); - text-decoration: none; - transition-duration: 0.5s; -} - -a:hover { - text-decoration: underline; -} - -nav a { - color: gray; - transition-property: color; - transition-duration: 0.5s; - text-decoration: none; - border: none; -} - -nav a:hover, -nav a.active { - color: inherit; - text-decoration: none; -} - -@media (prefers-color-scheme: dark) { - :root { - background-color: hsl(205.18, 14.29%, 10.94%); - color: rgba(255, 255, 255, 0.9); - } -} diff --git a/assets/trees.jpg b/assets/trees.jpg new file mode 100644 index 0000000..4c9da06 Binary files /dev/null and b/assets/trees.jpg differ diff --git a/build.rb b/build.rb index 85c6821..2517dc6 100644 --- a/build.rb +++ b/build.rb @@ -21,7 +21,7 @@ Phlexite::Site.new { |s| s.mount "assets", on: "/" - # Tailwindcss::Phlexite.build s, 'input.css', 'tailwind.css' + Tailwindcss::Phlexite.build s, 'input.css', 'tailwind.css' s.page "index.html", Pages::Home.new s.page "blog/index.html", Pages::Blog.new @@ -32,6 +32,6 @@ Phlexite::Site.new { |s| end go_modules.each do |import, repo| - s.page "#{import.to_s.delete_prefix('farthergate.com/')}", Pages::GoMod.new(import, repo) + s.page import.to_s.delete_prefix('farthergate.com/'), Pages::GoMod.new(import, repo) end } diff --git a/input.css b/input.css index d3af4de..0f8661e 100644 --- a/input.css +++ b/input.css @@ -1,7 +1,9 @@ -@import "tailwindcss"; -@layer base; -@layer components; -@layer utilities; -@layer theme; +@import url(https://fonts.bunny.net/css?family=bricolage-grotesque:400,700|dm-mono:400,400i,500,500i); -@source "./pages"; +@import "tailwindcss"; +@plugin "@tailwindcss/typography"; + +@theme { + --font-sans: "Bricolage Grotesque", sans-serif; + --font-mono: "DM Mono", monospace; +} diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..a98aea6 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,91 @@ +{ + "name": "farthergate.com", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "devDependencies": { + "@tailwindcss/typography": "^0.5.16" + } + }, + "node_modules/@tailwindcss/typography": { + "version": "0.5.16", + "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.16.tgz", + "integrity": "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==", + "dev": true, + "license": "MIT", + "dependencies": { + "lodash.castarray": "^4.4.0", + "lodash.isplainobject": "^4.0.6", + "lodash.merge": "^4.6.2", + "postcss-selector-parser": "6.0.10" + }, + "peerDependencies": { + "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1" + } + }, + "node_modules/cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true, + "license": "MIT", + "bin": { + "cssesc": "bin/cssesc" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/lodash.castarray": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz", + "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==", + "dev": true, + "license": "MIT" + }, + "node_modules/lodash.isplainobject": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", + "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==", + "dev": true, + "license": "MIT" + }, + "node_modules/lodash.merge": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/postcss-selector-parser": { + "version": "6.0.10", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz", + "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==", + "dev": true, + "license": "MIT", + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/tailwindcss": { + "version": "4.1.8", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.8.tgz", + "integrity": "sha512-kjeW8gjdxasbmFKpVGrGd5T4i40mV5J2Rasw48QARfYeQ8YS9x02ON9SFWax3Qf616rt4Cp3nVNIj6Hd1mP3og==", + "dev": true, + "license": "MIT", + "peer": true + }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", + "dev": true, + "license": "MIT" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..96dd7a8 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "devDependencies": { + "@tailwindcss/typography": "^0.5.16" + } +} diff --git a/pages/blog.rb b/pages/blog.rb index 6c91edb..f22919b 100644 --- a/pages/blog.rb +++ b/pages/blog.rb @@ -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'] } } } } diff --git a/pages/home.rb b/pages/home.rb index 1082336..4f0bd6d 100644 --- a/pages/home.rb +++ b/pages/home.rb @@ -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" ) } } diff --git a/pages/layout.rb b/pages/layout.rb index d4ac023..094f81f 100644 --- a/pages/layout.rb +++ b/pages/layout.rb @@ -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 diff --git a/pages/post.rb b/pages/post.rb index ff5c274..4b4a442 100644 --- a/pages/post.rb +++ b/pages/post.rb @@ -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) } }