Finalized
This commit is contained in:
27
Dockerfile
Normal file
27
Dockerfile
Normal 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
8
docker-compose.yml
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
services:
|
||||||
|
app:
|
||||||
|
image: ${IMAGE}
|
||||||
|
ports:
|
||||||
|
- "${APP_PORT}:4321"
|
||||||
|
environment:
|
||||||
|
NODE_ENV: production
|
||||||
|
restart: unless-stopped
|
@ -1,6 +1,6 @@
|
|||||||
import { useComputed, useSignal } from "@preact/signals";
|
import { useComputed, useSignal } from "@preact/signals";
|
||||||
import { useEffect } from "preact/hooks";
|
import { useEffect } from "preact/hooks";
|
||||||
import { Home, NotebookPen, FileText, CodeXml, MessageCircle } from 'lucide-preact';
|
import { Home, NotebookPen, FileText, CodeXml } from 'lucide-preact';
|
||||||
|
|
||||||
interface NavigationBarProps {
|
interface NavigationBarProps {
|
||||||
currentPath: string;
|
currentPath: string;
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
---
|
---
|
||||||
import type { CollectionEntry } from 'astro:content';
|
import type { CollectionEntry } from 'astro:content';
|
||||||
|
import { Icon } from 'astro-icon/components';
|
||||||
export interface Props {
|
export interface Props {
|
||||||
post: CollectionEntry<'blog'>;
|
post: CollectionEntry<'posts'>;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { post } = Astro.props;
|
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 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">
|
<div class="card-body p-3">
|
||||||
<h2 class="card-title text-base-100 justify-center text-center break-words h-14 min-h-14 max-h-14 overflow-hidden">
|
<h2 class="card-title text-base-100 justify-center text-center break-words font-bold text-lg mb-2">
|
||||||
{title}
|
{title}
|
||||||
</h2>
|
</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.'}
|
{blurb || 'No description available.'}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="flex flex-wrap items-center justify-center text-base-100 opacity-75 gap-2 text-sm sm:text-base">
|
<div class="flex flex-wrap items-center justify-center text-base-100 opacity-75 gap-2 text-sm mb-2">
|
||||||
<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">
|
<Icon name="mdi:clock" class="text-xl" />
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
||||||
</svg>
|
|
||||||
<span>
|
<span>
|
||||||
{new Date(pubDate).toLocaleDateString("en-us", {
|
{new Date(pubDate).toLocaleDateString("en-us", {
|
||||||
month: "long",
|
month: "long",
|
||||||
@ -33,15 +31,24 @@ const { slug } = post;
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</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
|
<a
|
||||||
href={`/blog/${slug}`}
|
href={`/post/${slug}`}
|
||||||
class="btn btn-circle btn-sm sm:btn-md btn-primary text-accent"
|
class="btn btn-circle btn-sm bg-base-100 hover:bg-base-200 text-accent"
|
||||||
aria-label={`Read more about ${title}`}
|
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">
|
<Icon name="mdi:arrow-right" class="text-lg" />
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
|
|
||||||
</svg>
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
40
src/components/ProjectCard.astro
Normal file
40
src/components/ProjectCard.astro
Normal 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
45
src/components/ScrollUpButton.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
@ -1,6 +1,6 @@
|
|||||||
import { defineCollection, z } from 'astro:content';
|
import { defineCollection, z } from 'astro:content';
|
||||||
|
|
||||||
const blogCollection = defineCollection({
|
const postsCollection = defineCollection({
|
||||||
type: 'content',
|
type: 'content',
|
||||||
schema: z.object({
|
schema: z.object({
|
||||||
title: z.string(),
|
title: z.string(),
|
||||||
@ -12,5 +12,5 @@ const blogCollection = defineCollection({
|
|||||||
});
|
});
|
||||||
|
|
||||||
export const collections = {
|
export const collections = {
|
||||||
'blog': blogCollection,
|
'posts': postsCollection,
|
||||||
};
|
};
|
29
src/content/posts/favourite-tools.md
Normal file
29
src/content/posts/favourite-tools.md
Normal 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.
|
@ -1,5 +1,7 @@
|
|||||||
---
|
---
|
||||||
|
import { ClientRouter } from "astro:transitions";
|
||||||
import NavigationBar from "../components/NavigationBar";
|
import NavigationBar from "../components/NavigationBar";
|
||||||
|
import ScrollUpButton from "../components/ScrollUpButton";
|
||||||
const currentPath = Astro.url.pathname;
|
const currentPath = Astro.url.pathname;
|
||||||
import '../styles/global.css';
|
import '../styles/global.css';
|
||||||
---
|
---
|
||||||
@ -12,12 +14,13 @@ import '../styles/global.css';
|
|||||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||||
<meta name="generator" content={Astro.generator} />
|
<meta name="generator" content={Astro.generator} />
|
||||||
<title>Atridad Lahiji</title>
|
<title>Atridad Lahiji</title>
|
||||||
|
<ClientRouter />
|
||||||
</head>
|
</head>
|
||||||
<body class="flex flex-col min-h-screen">
|
<body class="flex flex-col min-h-screen">
|
||||||
<main class="flex-grow flex flex-col gap-4 items-center justify-center">
|
<main class="flex-grow flex flex-col gap-4 items-center justify-center">
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
<NavigationBar currentPath={currentPath} />
|
<NavigationBar client:load currentPath={currentPath} />
|
||||||
<!-- <ScrollUpButton /> -->
|
<ScrollUpButton client:load />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -1,16 +1,17 @@
|
|||||||
---
|
---
|
||||||
import { getCollection, type CollectionEntry } from 'astro:content';
|
import { getCollection, type CollectionEntry } from 'astro:content';
|
||||||
|
import { Icon } from 'astro-icon/components';
|
||||||
import Layout from '../../layouts/Layout.astro';
|
import Layout from '../../layouts/Layout.astro';
|
||||||
|
|
||||||
export async function getStaticPaths() {
|
export async function getStaticPaths() {
|
||||||
const posts = await getCollection('blog');
|
const posts = await getCollection('posts');
|
||||||
return posts.map((post: CollectionEntry<'blog'>) => ({
|
return posts.map((post: CollectionEntry<'posts'>) => ({
|
||||||
params: { slug: post.slug },
|
params: { slug: post.slug },
|
||||||
props: { post },
|
props: { post },
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
const { post }: { post: CollectionEntry<'blog'> } = Astro.props;
|
const { post }: { post: CollectionEntry<'posts'> } = Astro.props;
|
||||||
const { Content } = await post.render();
|
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 flex-wrap items-center gap-4 mb-6">
|
||||||
<div class="flex items-center flex-row gap-2 text-base-content opacity-75">
|
<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">
|
<Icon name="mdi:clock" class="text-xl" />
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
||||||
</svg>
|
|
||||||
<time datetime={post.data.pubDate.toISOString()}>
|
<time datetime={post.data.pubDate.toISOString()}>
|
||||||
{new Date(post.data.pubDate).toLocaleDateString('en-us', {
|
{new Date(post.data.pubDate).toLocaleDateString('en-us', {
|
||||||
month: 'long',
|
month: 'long',
|
||||||
@ -38,20 +37,7 @@ const { Content } = await post.render();
|
|||||||
|
|
||||||
{/* Back button */}
|
{/* Back button */}
|
||||||
<a href="/posts" class="btn btn-outline btn-primary btn-sm">
|
<a href="/posts" class="btn btn-outline btn-primary btn-sm">
|
||||||
<svg
|
<Icon name="mdi:arrow-left" class="text-lg" />
|
||||||
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>
|
|
||||||
Back
|
Back
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@ -59,7 +45,8 @@ const { Content } = await post.render();
|
|||||||
{post.data.tags && post.data.tags.length > 0 && (
|
{post.data.tags && post.data.tags.length > 0 && (
|
||||||
<div class="flex gap-2 flex-wrap mb-6">
|
<div class="flex gap-2 flex-wrap mb-6">
|
||||||
{post.data.tags.map((tag: string) => (
|
{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}
|
{tag}
|
||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
@ -3,12 +3,12 @@ import Layout from "../layouts/Layout.astro";
|
|||||||
import { getCollection, type CollectionEntry } from "astro:content";
|
import { getCollection, type CollectionEntry } from "astro:content";
|
||||||
import PostCard from "../components/PostCard.astro";
|
import PostCard from "../components/PostCard.astro";
|
||||||
|
|
||||||
// Get all blog posts from the content collection
|
// Get all posts from the content collection
|
||||||
const posts = await getCollection("blog");
|
const posts = await getCollection("posts");
|
||||||
|
|
||||||
// Sort posts by date, newest first
|
// Sort posts by date, newest first
|
||||||
const sortedPosts = posts.sort(
|
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
|
Posts
|
||||||
</h1>
|
</h1>
|
||||||
<div class="flex flex-row flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto">
|
<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} />
|
<PostCard post={post} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
58
src/pages/projects.astro
Normal file
58
src/pages/projects.astro
Normal 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>
|
Reference in New Issue
Block a user