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

Finalized

Browse Source
This commit is contained in:
Atridad Lahiji
2025-05-18 23:21:12 -06:00
parent 3d271e3c7c
commit dba6ebd497
13 changed files with 250 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
Dockerfile Normal file
View File

@ -0,0 +1,27 @@
FROM node:lts-alpine AS builder
WORKDIR /app
RUN npm i -g pnpm
COPY package.json pnpm-lock.yaml ./
RUN pnpm install
COPY . .
RUN pnpm run build
FROM node:lts-alpine AS runtime
WORKDIR /app
RUN npm i -g pnpm
COPY --from=builder /app/dist ./dist
COPY package.json pnpm-lock.yaml ./
RUN pnpm install --prod
ENV HOST=0.0.0.0
ENV PORT=4321
EXPOSE 4321
CMD ["node", "./dist/server/entry.mjs"]

8
docker-compose.yml Normal file
View File

@ -0,0 +1,8 @@
services:
app:
image: ${IMAGE}
ports:
- "${APP_PORT}:4321"
environment:
NODE_ENV: production
restart: unless-stopped

2
src/components/NavigationBar.tsx
View File

@ -1,6 +1,6 @@
import { useComputed, useSignal } from "@preact/signals";
import { useEffect } from "preact/hooks";
import { Home, NotebookPen, FileText, CodeXml, MessageCircle } from 'lucide-preact';
import { Home, NotebookPen, FileText, CodeXml } from 'lucide-preact';
interface NavigationBarProps {
currentPath: string;

37
src/components/PostCard.astro
View File

@ -1,8 +1,8 @@
---
import type { CollectionEntry } from 'astro:content';
import { Icon } from 'astro-icon/components';
export interface Props {
post: CollectionEntry<'blog'>;
post: CollectionEntry<'posts'>;
}
const { post } = Astro.props;
@ -11,19 +11,17 @@ const { slug } = post;
---
<div class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink">
<div class="card-body p-4 sm:p-6">
<h2 class="card-title text-base-100 justify-center text-center break-words h-14 min-h-14 max-h-14 overflow-hidden">
<div class="card-body p-3">
<h2 class="card-title text-base-100 justify-center text-center break-words font-bold text-lg mb-2">
{title}
</h2>
<p class="text-center text-base-100 break-words h-20 min-h-20 max-h-20 overflow-hidden text-ellipsis">
<p class="text-center text-base-100 break-words mb-3 text-base">
{blurb || 'No description available.'}
</p>
<div class="flex flex-wrap items-center justify-center text-base-100 opacity-75 gap-2 text-sm sm:text-base">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div class="flex flex-wrap items-center justify-center text-base-100 opacity-75 gap-2 text-sm mb-2">
<Icon name="mdi:clock" class="text-xl" />
<span>
{new Date(pubDate).toLocaleDateString("en-us", {
month: "long",
@ -33,15 +31,24 @@ const { slug } = post;
</span>
</div>
<div class="card-actions justify-end mt-4">
{post.data.tags && post.data.tags.length > 0 && (
<div class="flex gap-2 flex-wrap mb-2 justify-center">
{post.data.tags.map((tag: string) => (
<span class="flex items-center flex-row gap-2 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
<Icon name="mdi:tag" class="text-lg" />
{tag}
</span>
))}
</div>
)}
<div class="card-actions justify-end mt-2">
<a
href={`/blog/${slug}`}
class="btn btn-circle btn-sm sm:btn-md btn-primary text-accent"
href={`/post/${slug}`}
class="btn btn-circle btn-sm bg-base-100 hover:bg-base-200 text-accent"
aria-label={`Read more about ${title}`}
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-lg">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
</svg>
<Icon name="mdi:arrow-right" class="text-lg" />
</a>
</div>
</div>

40
src/components/ProjectCard.astro Normal file
View File

@ -0,0 +1,40 @@
---
import { Icon } from 'astro-icon/components';
interface Project {
id: string;
name: string;
description: string;
link: string;
}
export interface Props {
project: Project;
}
const { project } = Astro.props;
---
<div class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink">
<div class="card-body p-6">
<h2 class="card-title text-xl md:text-2xl font-bold justify-center text-center break-words text-base-100">
{project.name}
</h2>
<p class="text-center break-words my-4 text-base-100">
{project.description}
</p>
<div class="card-actions justify-end mt-4">
<a
href={project.link}
target="_blank"
rel="noopener noreferrer"
class="btn btn-circle btn-sm bg-base-100 hover:bg-base-200 text-accent"
aria-label={`Visit ${project.name}`}
>
<Icon name="mdi:link" class="text-lg" />
</a>
</div>
</div>
</div>

45
src/components/ScrollUpButton.tsx Normal file
View File

@ -0,0 +1,45 @@
import { useSignal } from "@preact/signals";
import { useEffect } from "preact/hooks";
import { ArrowUp } from 'lucide-preact';
export default function ScrollUpButton() {
const isVisible = useSignal(false);
useEffect(() => {
const checkScroll = () => {
isVisible.value = window.scrollY > 300;
};
checkScroll();
window.addEventListener("scroll", checkScroll);
return () => {
window.removeEventListener("scroll", checkScroll);
};
}, []);
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
};
return (
<button
type="button"
onClick={scrollToTop}
class={`fixed bottom-20 right-4 z-20 bg-secondary hover:bg-primary
p-3 rounded-full shadow-lg transition-all duration-300
${
isVisible.value
? "opacity-70 translate-y-0"
: "opacity-0 translate-y-10 pointer-events-none"
}`}
aria-label="Scroll to top"
>
<ArrowUp class="text-lg" />
</button>
);
}

4
src/content/config.ts
View File

@ -1,6 +1,6 @@
import { defineCollection, z } from 'astro:content';
const blogCollection = defineCollection({
const postsCollection = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
@ -12,5 +12,5 @@ const blogCollection = defineCollection({
});
export const collections = {
'blog': blogCollection,
'posts': postsCollection,
};

29
src/content/posts/favourite-tools.md Normal file
View File

@ -0,0 +1,29 @@
---
title: "Current List of Favourite Tools"
description: "A running list of my favourite tools to use day-to-day."
pubDate: "2025-01-28"
tags: ["list"]
---
I change what I use _constantly_ in order to find something that feels just
right. I wanted to share them here and update them here so when someone asks, I
can just point them to this article.
1. Sublime Text - Currently my favourite text editor. Fast, simple, and
extensible. Just a joy to use!
2. Sublime Merge - Honestly one of the fastest and best looking git GUIs around!
Awesome for visualizing changes when you have larger code changes.
3. Ghostty - A Zig based terminal emulator by one of the founders of Hashicorp.
Runs great on MacOS and Linux. No windows for those who are into that.
4. OrbStack - A faster alternative to Docker Desktop that also runs VMs!
5. Bitwarden - An open-source password manager. Easy to self host with
Vaultwarden and with the recent updates, it has SSH Agent support!
6. iA Writer - A minimalist Markdown editor. For MacOS and Windows only, but
really the MacOS version is the most mature. Awesome for focus.
7. Dataflare - A simple but powerful cross-platform database client. Supports
most common databases, including LibSQL which is rare!
8. Bruno - A simple and powerful API client, similar to Postman. An critical
tool to debug API endpoints.
I hope you found this helpful! This will be periodically updated to avoid
outdated recommendations.

0
src/content/blog/welcome.md → src/content/posts/welcome.md
View File

7
src/layouts/Layout.astro
View File

@ -1,5 +1,7 @@
---
import { ClientRouter } from "astro:transitions";
import NavigationBar from "../components/NavigationBar";
import ScrollUpButton from "../components/ScrollUpButton";
const currentPath = Astro.url.pathname;
import '../styles/global.css';
---
@ -12,12 +14,13 @@ import '../styles/global.css';
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="generator" content={Astro.generator} />
<title>Atridad Lahiji</title>
<ClientRouter />
</head>
<body class="flex flex-col min-h-screen">
<main class="flex-grow flex flex-col gap-4 items-center justify-center">
<slot />
</main>
<NavigationBar currentPath={currentPath} />
<!-- <ScrollUpButton /> -->
<NavigationBar client:load currentPath={currentPath} />
<ScrollUpButton client:load />
</body>
</html>

29
src/pages/blog/[...slug].astro → src/pages/post/[...slug].astro
View File

@ -1,16 +1,17 @@
---
import { getCollection, type CollectionEntry } from 'astro:content';
import { Icon } from 'astro-icon/components';
import Layout from '../../layouts/Layout.astro';
export async function getStaticPaths() {
const posts = await getCollection('blog');
return posts.map((post: CollectionEntry<'blog'>) => ({
const posts = await getCollection('posts');
return posts.map((post: CollectionEntry<'posts'>) => ({
params: { slug: post.slug },
props: { post },
}));
}
const { post }: { post: CollectionEntry<'blog'> } = Astro.props;
const { post }: { post: CollectionEntry<'posts'> } = Astro.props;
const { Content } = await post.render();
---
@ -24,9 +25,7 @@ const { Content } = await post.render();
<div class="flex flex-wrap items-center gap-4 mb-6">
<div class="flex items-center flex-row gap-2 text-base-content opacity-75">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<Icon name="mdi:clock" class="text-xl" />
<time datetime={post.data.pubDate.toISOString()}>
{new Date(post.data.pubDate).toLocaleDateString('en-us', {
month: 'long',
@ -38,20 +37,7 @@ const { Content } = await post.render();
{/* Back button */}
<a href="/posts" class="btn btn-outline btn-primary btn-sm">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 mr-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width={2}
d="M11 17l-5-5m0 0l5-5m-5 5h12"
/>
</svg>
<Icon name="mdi:arrow-left" class="text-lg" />
Back
</a>
</div>
@ -59,7 +45,8 @@ const { Content } = await post.render();
{post.data.tags && post.data.tags.length > 0 && (
<div class="flex gap-2 flex-wrap mb-6">
{post.data.tags.map((tag: string) => (
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
<span class="flex items-center flex-row gap-2 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
<Icon name="mdi:tag" class="text-lg" />
{tag}
</span>
))}

8
src/pages/posts.astro
View File

@ -3,12 +3,12 @@ import Layout from "../layouts/Layout.astro";
import { getCollection, type CollectionEntry } from "astro:content";
import PostCard from "../components/PostCard.astro";
// Get all blog posts from the content collection
const posts = await getCollection("blog");
// Get all posts from the content collection
const posts = await getCollection("posts");
// Sort posts by date, newest first
const sortedPosts = posts.sort(
(a: CollectionEntry<"blog">, b: CollectionEntry<"blog">) => new Date(b.data.pubDate).valueOf() - new Date(a.data.pubDate).valueOf()
(a: CollectionEntry<"posts">, b: CollectionEntry<"posts">) => new Date(b.data.pubDate).valueOf() - new Date(a.data.pubDate).valueOf()
);
---
@ -18,7 +18,7 @@ const sortedPosts = posts.sort(
Posts
</h1>
<div class="flex flex-row flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto">
{sortedPosts.map((post: CollectionEntry<"blog">) => (
{sortedPosts.map((post: CollectionEntry<"posts">) => (
<PostCard post={post} />
))}
</div>

58
src/pages/projects.astro Normal file
View File

@ -0,0 +1,58 @@
---
import Layout from "../layouts/Layout.astro";
import ProjectCard from "../components/ProjectCard.astro";
const projects = [
{
id: "bluesky-pds-manager",
name: "BlueSky PDS Manager",
description:
"A web-based BlueSky PDS Manager. Manage your invite codes and users with a simple web UI.",
link: "https://pdsman.atri.dad",
},
{
id: "pollo",
name: "Pollo",
description: "A dead-simple real-time voting tool.",
link: "https://git.atri.dad/atridad/pollo",
},
{
id: "goth-stack",
name: "GOTH Stack",
description:
"🚀 A Web Application Template Powered by HTMX + Go + Tailwind 🚀",
link: "https://git.atri.dad/atridad/goth.stack",
},
{
id: "himbot",
name: "Himbot",
description:
"A discord bot written in Go. Loosly named after my username online (HimbothySwaggins).",
link: "https://git.atri.dad/atridad/himbot",
},
{
id: "loadr",
name: "loadr",
description:
"A lightweight REST load testing tool with robust support for different verbs, token auth, and performance reports.",
link: "https://git.atri.dad/atridad/loadr",
},
];
---
<Layout>
<div class="min-h-screen p-4 sm:p-8">
<h1 class="text-3xl sm:text-4xl font-bold text-secondary mb-6 sm:mb-8 text-center">
Projects
</h1>
<div class="flex flex-row flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto">
{projects.map((project) => (
<ProjectCard project={project} />
))}
</div>
{projects.length === 0 && (
<p class="text-center text-gray-500 mt-12">No projects available yet. Check back soon!</p>
)}
</div>
</Layout>