atridad/atridotdad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

No more building CSS

Browse Source
This commit is contained in:
Atridad Lahiji
2025-03-31 03:49:05 -06:00
parent 2560ff159c
commit 0a5d5df468
22 changed files with 1541 additions and 528 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
pages/templates/home.html
View File

@ -14,18 +14,18 @@ Atridad Lahiji // Root
{{end}}
{{define "main"}}
<h1 class="text-4xl font-extrabold text-white sm:text-8xl">
<span class="bg-gradient-to-r from-pink-500 to-blue-500 bg-clip-text text-transparent">{{.Title}}</span>
<div class="home-page text-center">
<h1 class="text-4xl font-extrabold sm:text-8xl">
<span class="gradient-text">{{.Title}}</span>
</h1>
<h2 class="text-2xl font-extrabold tracking-tight text-white sm:text-[2rem]">
<h2 class="text-2xl font-extrabold tracking-tight sm:text-[2rem]">
{{.Subtitle}}
</h2>
<span>
<h2 class="mb-2 text-xl text-white sm:text-[1.5rem]">Places I exist:</h2>
<div class="flex flex-row flex-wrap items-center justify-center gap-4 text-center">
<h2 class="mb-2 text-xl sm:text-[1.5rem]">Places I exist:</h2>
<div class="flex flex-row flex-wrap items-center justify-center gap-4">
{{range .Socials}}
{{template "iconlinks" .}}
{{end}}
@ -33,20 +33,21 @@ Atridad Lahiji // Root
</span>
<span>
<h2 class="mb-2 text-xl text-white sm:text-[1.5rem]">Stuff I Use:</h2>
<h2 class="mb-2 text-xl sm:text-[1.5rem]">Stuff I Use:</h2>
<div class="flex flex-row flex-wrap items-center justify-center gap-4 text-center">
<div class="flex flex-row flex-wrap items-center justify-center gap-4">
{{range .Tech}}
{{template "iconlinks" .}}
{{end}}
</div>
</span>
<div class="flex flex-row flex-wrap gap-2 mx-auto justify-center">
<div class="home-buttons-container">
{{range .ButtonsLinks}}
{{template "buttonlinks" .}}
{{end}}
</div>
</div>
{{end}}
{{define "foot"}}

6
pages/templates/layouts/base.html
View File

@ -8,16 +8,14 @@
<title>{{template "title" .}}</title>
<meta name="description" content="{{template "description" .}}">
<script defer src="https://analytics.atri.dad/script.js" data-website-id="0206740c-245f-402a-b433-125d6d48945a"></script>
<link href="/public/css/daisyui.css" rel="stylesheet" type="text/css" />
<link href="/public/css/themes.css" rel="stylesheet" type="text/css" />
<link href="/public/css/styles.css" rel="stylesheet" type="text/css" />
{{template "head" .}}
</head>
<body class="block h-[100%]" hx-ext="preload">
<body>
{{template "header" .}}
<main class="container flex flex-col items-center justify-center gap-3 sm:gap-6 p-4 text-center min-h-[calc(100%-64px)]">
<main class="container flex flex-col items-center justify-center gap-3 sm:gap-6 p-4 text-center">
{{template "main" .}}
</main>
<script src="/public/js/htmx.base.js"></script>

70
pages/templates/layouts/post.html
View File

@ -9,24 +9,21 @@
<title>{{template "title" .}}</title>
<meta name="description" content="{{template "description" .}}">
<script defer src="https://analytics.atri.dad/script.js" data-website-id="0206740c-245f-402a-b433-125d6d48945a"></script>
<link href="/public/css/daisyui.css" rel="stylesheet" type="text/css" />
<link href="/public/css/styles.css" rel="stylesheet" type="text/css" />
<link href="/public/css/themes.css" rel="stylesheet" type="text/css" />
<link href="/public/css/markdown.css" rel="stylesheet" type="text/css" />
{{template "head" .}}
</head>
<body class="block h-[100%]">
<body>
{{template "header" .}}
<main class="mx-auto p-4 max-w-3xl">
<main class="container mx-auto pt-6 pb-12 px-4 max-w-2xl">
<article>
<h1 class="mx-auto text-2xl sm:text-4xl font-bold tracking-tight text-center mb-4 max-w-[65ch]">{{.Name}}</h1>
<div class="flex flex-row flex-wrap justify-center gap-4 mb-6">
<h1 class="text-3xl font-bold tracking-tight text-center mb-4">{{.Name}}</h1>
<div class="flex flex-row justify-center items-center gap-2">
{{if .Date}}
<p>
<div class="flex flex-row flex-wrap items-center gap-1 text-md">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
<div class="flex flex-row items-center gap-1 text-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-clock-4">
<circle cx="12" cy="12" r="10" />
@ -34,19 +31,18 @@
</svg>
{{.Date}}
</div>
</p>
{{end}}
{{if .Tags}}
<div class="flex flex-row flex-wrap text-center items-center justify-center gap-1">
<div class="flex flex-row items-center gap-1">
{{range .Tags}}
<div class="badge badge-accent">#{{.}}</div>
<span class="project-tag">#{{.}}</span>
{{end}}
</div>
{{end}}
<div id="svgContainer" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-check-circle">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
@ -54,29 +50,33 @@
</svg>
</div>
<button id="copyButton" aria-label="Copy Link to Post" hx-get="/api/post/copy" hx-swap="innerHTML"
hx-trigger="click delay:3s"
_='on click put #svgContainer.innerHTML into me.innerHTML then call navigator.clipboard.writeText(window.location.href)'>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-copy">
<rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
</svg>
</button>
<div class="flex items-center gap-2">
<button id="copyButton" aria-label="Copy Link to Post" hx-get="/api/post/copy" hx-swap="innerHTML"
class="post-icon-button"
hx-trigger="click delay:3s"
_='on click put #svgContainer.innerHTML into me.innerHTML then call navigator.clipboard.writeText(window.location.href)'>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-copy">
<rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
</svg>
</button>
<a href="/posts" class="btn btn-primary btn-outline" preload="mouseover">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-undo-2">
<path d="M9 14 4 9l5-5" />
<path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v0a5.5 5.5 0 0 1-5.5 5.5H11" />
</svg>
Back
</a>
<a href="/posts" class="post-back-button" preload="mouseover">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-undo-2">
<path d="M9 14 4 9l5-5" />
<path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v0a5.5 5.5 0 0 1-5.5 5.5H11" />
</svg>
Back
</a>
</div>
</div>
<hr class="my-6 border-t border-white w-full max-w-2xl mx-auto" />
<div class="markdown text-left mx-auto max-w-2xl">
<hr class="mb-6 mt-2 border-t border-white opacity-20 w-full mx-auto" />
<div class="markdown text-left mx-auto">
{{template "main" .}}
</div>
</article>

18
pages/templates/papers.html
View File

@ -16,19 +16,23 @@ Atridad Lahiji // Papers
{{define "main"}}
{{if .Papers}}
<section class="flex flex-row flex-wrap gap-2 justify-center align-middle">
{{range .Papers}}
{{template "cardlinks" .}}
{{end}}
</section>
<div class="card-grid-container">
<section class="card-grid">
{{range .Papers}}
{{template "cardlinks" .}}
{{end}}
</section>
</div>
{{end}}
{{if not .Papers}}
<section class="flex flex-row flex-wrap gap-2 justify-center align-middle">
<div class="card-grid-container">
<section class="card-grid">
<h2 class="text-2xl font-extrabold tracking-tight text-white sm:text-[2rem]">
Nothing to see here (yet)!
</h2>
</section>
</section>
</div>
{{end}}
{{end}}

26
pages/templates/partials/cardlinks.html
View File

@ -1,51 +1,51 @@
{{define "cardlinks"}}
<div class="card card-compact w-64 bg-secondary shadow-xl">
<div class="card-body text-base-100 flex flex-col">
<h2 class="card-title text-base-100">{{.Name}}</h2>
<div class="project-card">
<div class="project-card-content">
<h2 class="project-card-title">{{.Name}}</h2>
{{if .Description}}
<p>{{.Description}}</p>
<p class="project-card-description">{{.Description}}</p>
{{end}}
{{if .Date}}
<p>
<p class="project-card-date">
<div class="flex flex-row flex-wrap items-center gap-1 text-md">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock-4"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock-4"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
{{.Date}}
</div>
</p>
{{end}}
{{if .Tags}}
<div class="flex flex-row flex-wrap text-center items-center justify-center gap-1">
<div class="project-card-tags">
{{range .Tags}}
<div class="badge badge-accent">#{{.}}</div>
<span class="project-tag">#{{.}}</span>
{{end}}
</div>
{{end}}
{{if .Href}}
<div class="card-actions justify-end">
<div class="project-card-link">
{{if eq true .Internal}}
<a
role="button"
href={{.Href}}
aria-label={{.Name}}
class="btn btn-circle btn-base-100 btn-outline"
class="project-link-button"
preload="mouseover"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
</a>
{{else}}
<a
role="button"
href={{.Href}}
aria-label={{.Name}}
class="btn btn-circle btn-base-100 btn-outline"
class="project-link-button"
target="_blank"
rel="noopener noreferrer"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
</a>
{{end}}
</div>

42
pages/templates/partials/header.html
View File

@ -1,21 +1,49 @@
{{define "header"}}
<header class="navbar bg-base-100">
<header class="navbar">
<div class="navbar-start">
<a class="btn btn-ghost normal-case text-lg sm:text-xl text-white" href="/">{{template "navcontent".}}</a>
<a class="btn btn-ghost normal-case text-xl" href="/">{{template "navcontent".}}</a>
</div>
<div class="navbar-end z-50">
<div class="navbar-end">
<div class="dropdown dropdown-end">
<label tabindex="0" class="btn btn-sm btn-ghost text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
<label tabindex="0" class="btn btn-ghost" id="navbar-toggle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="menu-icon"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
</label>
<ul
tabindex="0"
class="menu menu-sm dropdown-content gap-2 mt-3 p-2 shadow-md bg-base-100 rounded-box"
preload="mouseover"
class="menu dropdown-content mt-3 shadow-md rounded-box z-50 nav-menu"
id="nav-menu"
>
{{template "navitems" .}}
</ul>
</div>
</div>
</header>
<script>
document.addEventListener('DOMContentLoaded', function() {
const navbarToggle = document.getElementById('navbar-toggle');
const navMenu = document.getElementById('nav-menu');
// Toggle menu on hamburger click
navbarToggle.addEventListener('click', function(e) {
e.stopPropagation();
navMenu.classList.toggle('show');
});
// Close menu when clicking outside
document.addEventListener('click', function(e) {
if (!navMenu.contains(e.target) && !navbarToggle.contains(e.target)) {
navMenu.classList.remove('show');
}
});
// Close menu when clicking on a menu item
const menuItems = navMenu.querySelectorAll('a');
menuItems.forEach(item => {
item.addEventListener('click', function() {
navMenu.classList.remove('show');
});
});
});
</script>
{{end}}

2
pages/templates/partials/iconlinks.html
View File

@ -1,5 +1,5 @@
{{define "iconlinks"}}
<a class="fill-white hover:fill-pink-500" href={{.Href}} target="_blank" rel="me" aria-label={{.Name}}>
<a class="icon-link" href={{.Href}} target="_blank" rel="me" aria-label={{.Name}}>
{{.Icon}}
</a>
{{end}}

24
pages/templates/partials/navitems.html
View File

@ -1,20 +1,8 @@
{{define "navitems"}}
<li>
<a class="no-underline" href="/"> Home </a>
</li>
<li>
<a class="no-underline" href="/projects"> Projects </a>
</li>
<li>
<a class="no-underline" href="/papers"> Papers </a>
</li>
<li>
<a class="no-underline" href="/talks"> Talks </a>
</li>
<li>
<a class="no-underline" href="/posts"> Posts </a>
</li>
<li>
<a class="no-underline" href="/tools"> Tools </a>
</li>
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/papers">Papers</a></li>
<li><a href="/talks">Talks</a></li>
<li><a href="/posts">Posts</a></li>
<li><a href="/tools">Tools</a></li>
{{end}}

18
pages/templates/posts.html
View File

@ -16,19 +16,23 @@ Atridad Lahiji // Posts
{{define "main"}}
{{if .Posts}}
<section class="flex flex-row flex-wrap gap-2 justify-center align-middle">
{{range .Posts}}
{{template "cardlinks" .}}
{{end}}
</section>
<div class="card-grid-container">
<section class="card-grid">
{{range .Posts}}
{{template "cardlinks" .}}
{{end}}
</section>
</div>
{{end}}
{{if not .Posts}}
<section class="flex flex-row flex-wrap gap-2 justify-center align-middle">
<div class="card-grid-container">
<section class="card-grid">
<h2 class="text-2xl font-extrabold tracking-tight text-white sm:text-[2rem]">
Nothing to see here (yet)!
</h2>
</section>
</section>
</div>
{{end}}
{{end}}

12
pages/templates/projects.html
View File

@ -16,19 +16,23 @@ Atridad Lahiji // Projects
{{define "main"}}
{{if .Projects}}
<section class="flex flex-row flex-wrap gap-2 justify-center align-middle">
<div class="card-grid-container">
<section class="card-grid">
{{range .Projects}}
{{template "cardlinks" .}}
{{end}}
</section>
</section>
</div>
{{end}}
{{if not .Projects}}
<section class="flex flex-row flex-wrap gap-2 justify-center align-middle">
<div class="card-grid-container">
<section class="card-grid">
<h2 class="text-2xl font-extrabold tracking-tight text-white sm:text-[2rem]">
Nothing to see here (yet)!
</h2>
</section>
</section>
</div>
{{end}}
{{end}}

18
pages/templates/talks.html
View File

@ -16,19 +16,23 @@ Atridad Lahiji // Talks
{{define "main"}}
{{if .Talks}}
<section class="flex flex-row flex-wrap gap-2 justify-center align-middle">
{{range .Talks}}
{{template "cardlinks" .}}
{{end}}
</section>
<div class="card-grid-container">
<section class="card-grid">
{{range .Talks}}
{{template "cardlinks" .}}
{{end}}
</section>
</div>
{{end}}
{{if not .Talks}}
<section class="flex flex-row flex-wrap gap-2 justify-center align-middle">
<div class="card-grid-container">
<section class="card-grid">
<h2 class="text-2xl font-extrabold tracking-tight text-white sm:text-[2rem]">
Nothing to see here (yet)!
</h2>
</section>
</section>
</div>
{{end}}
{{end}}

34
pages/templates/tools.html
View File

@ -15,21 +15,27 @@ Atridad Lahiji // Tools
{{define "main"}}
{{if .Tools}}
<section class="flex flex-row flex-wrap gap-2 justify-center align-middle">
{{range .Tools}}
{{template "cardlinks" .}}
{{end}}
</section>
{{end}}
<div class="tools-page">
{{if .Tools}}
<div class="card-grid-container">
<section class="card-grid">
{{range .Tools}}
{{template "cardlinks" .}}
{{end}}
</section>
</div>
{{end}}
{{if not .Tools}}
<section class="flex flex-row flex-wrap gap-2 justify-center align-middle">
<h2 class="text-2xl font-extrabold tracking-tight text-white sm:text-[2rem]">
Nothing to see here (yet)!
</h2>
</section>
{{end}}
{{if not .Tools}}
<div class="card-grid-container">
<section class="card-grid">
<h2 class="text-2xl font-extrabold tracking-tight text-white sm:text-[2rem]">
Nothing to see here (yet)!
</h2>
</section>
</div>
{{end}}
</div>
{{end}}

38
pages/templates/tools.resize.html
View File

@ -14,20 +14,30 @@ Atridad Lahiji // Tools // Resizer
{{end}}
{{define "main"}}
<h2 class="text-2xl font-extrabold tracking-tight text-white sm:text-[2rem]">Image Resizer</h2>
<form action="/api/tools/resize" method="post" enctype="multipart/form-data" class="flex-col flex gap-4">
Select image to resize:
<input type="file" name="image" accept=".png,.jpg,.jpeg"
class="file-input file-input-bordered file-input-secondary w-full max-w-xs" required />
<br>
New width (px):
<input type="number" id="newWidth" name="width" min="1" class="input input-bordered w-full max-w-xs" required>
<br>
New height (px):
<input type="number" id="newHeight" name="height" min="1" class="input input-bordered w-full max-w-xs" required>
<br>
<button type="submit" class="btn btn-secondary">Resize Image</button>
</form>
<div class="tool-page">
<h1>Image Resizer</h1>
<p>Upload and resize your images quickly and easily. Select an image file, specify dimensions, and get a resized version instantly.</p>
<form action="/api/tools/resize" method="post" enctype="multipart/form-data" class="form-group">
<div class="form-group">
<label for="image">Select image to resize:</label>
<input type="file" id="image" name="image" accept=".png,.jpg,.jpeg" required />
</div>
<div class="form-group">
<label for="newWidth">New width (px):</label>
<input type="number" id="newWidth" name="width" min="1" required />
</div>
<div class="form-group">
<label for="newHeight">New height (px):</label>
<input type="number" id="newHeight" name="height" min="1" required />
</div>
<button type="submit" class="tool-button">Resize Image</button>
</form>
</div>
{{end}}
{{define "foot"}}

33
pages/templates/tools.ssedemo.html
View File

@ -14,25 +14,26 @@ A demo of my SSE implementation.
{{end}}
{{define "main"}}
<h2 class="text-2xl font-extrabold tracking-tight text-white sm:text-[2rem]">Server Sent Events Demo</h2>
<div class="tool-page">
<h1>Server Sent Events Demo</h1>
<p class="text-lg">This page demonstrates the use of the <a href="https://htmx.org/extensions/sse/">HTMX SSE
Extension</a> to receive Server Sent Events on the "default" channel.</p>
<p class="text-lg">Any events received on the "default" channel will appear below:</p>
<div hx-ext="sse" sse-connect="/api/sse" sse-swap="message">
Waiting for SSE Message...
</div>
<p class="text-lg">Here you can send messages on the default channel:</p>
<form hx-post="/api/tools/sendsse" hx-trigger="submit" hx-swap="none" class="flex-col flex gap-2">
<div class="label">
<span class="label-text">Message</span>
<p>This page demonstrates the use of the <a href="https://htmx.org/extensions/sse/" class="tool-link">HTMX SSE
Extension</a> to receive Server Sent Events on the "default" channel.</p>
<p>Any events received on the "default" channel will appear below:</p>
<div hx-ext="sse" sse-connect="/api/sse" sse-swap="message" class="sse-message-container">
Waiting for SSE Message...
</div>
<input type="text" name="message" value="Hello world!" placeholder="Enter your message here"
class="input input-bordered input-primary w-full max-w-xs" />
<button type="submit" class="btn btn-primary">Send Event</button>
</form>
<p>Here you can send messages on the default channel:</p>
<form hx-post="/api/tools/sendsse" hx-trigger="submit" hx-swap="none" class="form-group">
<div class="form-group">
<label for="message">Message</label>
<input type="text" id="message" name="message" value="Hello world!" placeholder="Enter your message here" />
</div>
<button type="submit" class="tool-button">Send Event</button>
</form>
</div>
{{end}}
{{define "foot"}}