Initial commit

.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

README.md

@@ -0,0 +1 @@
+# Personal site using Astro SSR + React + Railway

astro.config.mjs

@@ -0,0 +1,26 @@
+import { defineConfig } from "astro/config";
+import mdx from "@astrojs/mdx";
+import sitemap from "@astrojs/sitemap";
+import tailwind from "@astrojs/tailwind";
+import node from "@astrojs/node";
+
+import react from "@astrojs/react";
+
+// https://astro.build/config
+export default defineConfig({
+  site: "https://atri.dad/",
+  output: "server",
+  adapter: node({
+    mode: "standalone",
+  }),
+  server: {
+    host: "0.0.0.0",
+    port: process.env.PORT || 3000,
+  },
+  integrations: [mdx(), sitemap(), tailwind(), react()],
+  vite: {
+    ssr: {
+      noExternal: ["react-icons"],
+    },
+  },
+});

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "atri-dad",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "node dist/server/entry.mjs",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/mdx": "^0.19.1",
+    "@astrojs/node": "^5.1.3",
+    "@astrojs/react": "^2.1.3",
+    "@astrojs/rss": "^2.4.1",
+    "@astrojs/sitemap": "^1.3.1",
+    "@astrojs/tailwind": "^3.1.2",
+    "@tailwindcss/typography": "^0.5.9",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "astro": "^2.4.5",
+    "daisyui": "^2.51.6",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-icons": "^4.8.0",
+    "tailwindcss": "^3.3.2"
+  }
+}

sandbox.config.json

@@ -0,0 +1,11 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": false,
+  "view": "browser",
+  "template": "node",
+  "container": {
+    "port": 3000,
+    "startScript": "start",
+    "node": "16"
+  }
+}

src/components/BaseHead.astro

@@ -0,0 +1,43 @@
+---
+// Import the global.css file here so that it is included on
+// all pages through the use of the <BaseHead /> component.
+import "../styles/global.css";
+
+export interface Props {
+	title: string;
+	description: string;
+	image?: string;
+}
+
+const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+
+const { title, description, image = "/placeholder-social.jpg" } = Astro.props;
+---
+
+<!-- Global Metadata -->
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<link rel="icon" href="/favicon.ico" />
+<meta name="generator" content={Astro.generator} />
+
+<!-- Canonical URL -->
+<link rel="canonical" href={canonicalURL} />
+
+<!-- Primary Meta Tags -->
+<title>{title}</title>
+<meta name="title" content={title} />
+<meta name="description" content={description} />
+
+<!-- Open Graph / Facebook -->
+<meta property="og:type" content="website" />
+<meta property="og:url" content={Astro.url} />
+<meta property="og:title" content={title} />
+<meta property="og:description" content={description} />
+<meta property="og:image" content={new URL(image, Astro.url)} />
+
+<!-- Twitter -->
+<meta property="twitter:card" content="summary_large_image" />
+<meta property="twitter:url" content={Astro.url} />
+<meta property="twitter:title" content={title} />
+<meta property="twitter:description" content={description} />
+<meta property="twitter:image" content={new URL(image, Astro.url)} />

src/components/FormattedDate.astro

@@ -0,0 +1,17 @@
+---
+export interface Props {
+	date: Date;
+}
+
+const { date } = Astro.props;
+---
+
+<time datetime={date.toISOString()}>
+	{
+		date.toLocaleDateString('en-us', {
+			year: 'numeric',
+			month: 'short',
+			day: 'numeric',
+		})
+	}
+</time>

src/components/Header.astro

@@ -0,0 +1,35 @@
+---
+import HeaderLink from "./HeaderLink.astro";
+import { SITE_TITLE } from "../consts";
+---
+
+<header class="navbar bg-base-100">
+  <div class="navbar-start">
+    <a class="btn btn-ghost normal-case text-xl" href="/">{SITE_TITLE}</a>
+  </div>
+  <div class="navbar-end">
+    <div class="dropdown dropdown-end">
+      <label tabindex="0" class="btn btn-ghost">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-5 w-5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          ><path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 6h16M4 12h8m-8 6h16"></path></svg
+        >
+      </label>
+      <ul
+        tabindex="0"
+        class="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52"
+      >
+        <li><HeaderLink href="/">Home</HeaderLink></li>
+        <li><HeaderLink href="/blog">Blog</HeaderLink></li>
+      </ul>
+    </div>
+  </div>
+</header>

src/components/HeaderLink.astro

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'a'>;
+
+const { href, class: className, ...props } = Astro.props;
+
+const { pathname } = Astro.url;
+const isActive = href === pathname || href === pathname.replace(/\/$/, '');
+---
+
+<a href={href} class:list={[className, { active: isActive }]} {...props}>
+	<slot />
+</a>
+<style>
+	a {
+		display: inline-block;
+		text-decoration: none;
+	}
+	a.active {
+		font-weight: bolder;
+		text-decoration: underline;
+	}
+</style>

src/consts.ts

@@ -0,0 +1,5 @@
+// Place any global data in this file.
+// You can import this data from anywhere in your site by using the `import` keyword.
+
+export const SITE_TITLE = "[atri.dad]";
+export const SITE_DESCRIPTION = "It's me, hi, I'm the problem, it's me!";

src/content/blog/first-post.md

@@ -0,0 +1,7 @@
+---
+title: "Welcome to my site!"
+description: "Welcome to my site!"
+pubDate: "March 26 2023"
+---
+
+Hello and welcome to my small corner of the internet! I will post some content here about the tech I work with, and other things that excite me. **Thanks for stopping by**!

src/content/config.ts

@@ -0,0 +1,20 @@
+import { defineCollection, z } from "astro:content";
+
+const blog = defineCollection({
+  // Type-check frontmatter using a schema
+  schema: z.object({
+    title: z.string(),
+    description: z.string(),
+    // Transform string to Date object
+    pubDate: z
+      .string()
+      .or(z.date())
+      .transform((val) => new Date(val)),
+    updatedDate: z
+      .string()
+      .optional()
+      .transform((str) => (str ? new Date(str) : undefined)),
+  }),
+});
+
+export const collections = { blog };

src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />

src/layouts/BlogPost.astro

@@ -0,0 +1,35 @@
+---
+import type { CollectionEntry } from "astro:content";
+import BaseHead from "../components/BaseHead.astro";
+import Header from "../components/Header.astro";
+import FormattedDate from "../components/FormattedDate.astro";
+
+type Props = CollectionEntry<"blog">["data"];
+
+const { title, description, pubDate, updatedDate } = Astro.props;
+---
+
+<html lang="en" data-theme="night">
+  <head>
+    <BaseHead title={title} description={description} />
+  </head>
+
+  <body>
+    <Header />
+    <main class="prose prose-invert mx-auto p-4">
+      <article>
+        <h1 class="title">{title}</h1>
+        <FormattedDate date={pubDate} />
+        {
+          updatedDate && (
+            <div class="last-updated-on">
+              Last updated on <FormattedDate date={updatedDate} />
+            </div>
+          )
+        }
+        <hr />
+        <slot />
+      </article>
+    </main>
+  </body>
+</html>

src/pages/blog/[...slug].astro

@@ -0,0 +1,18 @@
+---
+import { CollectionEntry, getCollection } from "astro:content";
+import BlogPost from "../../layouts/BlogPost.astro";
+
+const posts = await getCollection("blog");
+type Props = CollectionEntry<"blog">;
+
+const { slug } = Astro.params;
+const post = posts.find((page) => page.slug === slug);
+if (!post) {
+	return Astro.redirect("/404");
+}
+const { Content } = await post.render();
+---
+
+<BlogPost {...post.data}>
+	<Content />
+</BlogPost>

src/pages/blog/index.astro

@@ -0,0 +1,37 @@
+---
+import BaseHead from "../../components/BaseHead.astro";
+import Header from "../../components/Header.astro";
+import { SITE_TITLE, SITE_DESCRIPTION } from "../../consts";
+import { getCollection } from "astro:content";
+import FormattedDate from "../../components/FormattedDate.astro";
+
+const posts = (await getCollection("blog")).sort(
+  (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
+);
+---
+
+<!DOCTYPE html>
+<html lang="en" data-theme="night">
+  <head>
+    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+  </head>
+  <body class="block h-[100%]">
+    <Header />
+    <main
+      class="prose prose-invert container flex flex-col items-center justify-center gap-3 sm:gap-6 px-4 py-16 text-center mx-auto min-h-[calc(100%-64px)]"
+    >
+      <section>
+        <ul>
+          {
+            posts.map((post) => (
+              <li>
+                <FormattedDate date={post.data.pubDate} />
+                <a href={`/blog/${post.slug}/`}>{post.data.title}</a>
+              </li>
+            ))
+          }
+        </ul>
+      </section>
+    </main>
+  </body>
+</html>

src/pages/index.astro

@@ -0,0 +1,158 @@
+---
+import BaseHead from "../components/BaseHead.astro";
+import Header from "../components/Header.astro";
+import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
+
+import {
+  SiGithub,
+  SiLinkedin,
+  SiNextdotjs,
+  SiPrisma,
+  SiSpotify,
+  SiTwitch,
+  SiTwitter,
+  SiYoutube,
+  SiAstro,
+  SiSvelte,
+  SiPostgresql,
+  SiRedis,
+  SiRailway,
+} from "react-icons/si";
+---
+
+<!DOCTYPE html>
+<html lang="en" data-theme="night">
+  <head>
+    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+  </head>
+  <body class="block h-[100%]">
+    <Header title={SITE_TITLE} />
+    <main
+      class="container flex flex-col items-center justify-center gap-3 sm:gap-6 px-4 py-16 text-center mx-auto min-h-[calc(100%-64px)]"
+    >
+      <h1 class="text-4xl font-extrabold text-white sm:text-8xl">
+        Hi, I&apos;m <span class="text-pink-500">Atridad</span>
+      </h1>
+
+      <h2
+        class="text-2xl font-extrabold tracking-tight text-white sm:text-[2rem]"
+      >
+        I&apos;m a <span class="text-green-500">persian</span> -
+        <span class="text-red-500">canadian</span>{" "}
+        <span
+          class="bg-gradient-to-r from-pink-500 to-blue-500 bg-clip-text text-transparent"
+        >
+          queer
+        </span>{" "}
+        software developer who loves making things for the web.
+      </h2>
+
+      <h2
+        class="text-xl font-extrabold tracking-tight text-white sm:text-[1.5rem]"
+      >
+        Pronouns: (he/<span class="text-pink-500">they</span>)
+      </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"
+        >
+          <a
+            href={"https://www.linkedin.com/in/atridad/"}
+            target="_blank"
+            aria-label="Linkedin"
+          >
+            <SiLinkedin className="text-2xl hover:text-pink-500 sm:text-4xl" />
+          </a>
+          <a
+            href={"https://twitter.com/atridadl/"}
+            target="_blank"
+            aria-label="Twitter"
+          >
+            <SiTwitter className="text-2xl hover:text-pink-500 sm:text-4xl" />
+          </a>
+          <a
+            href={"https://github.com/atridadl"}
+            target="_blank"
+            aria-label="Github"
+          >
+            <SiGithub className="text-2xl hover:text-pink-500 sm:text-4xl" />
+          </a>
+          <a
+            href={"https://open.spotify.com/user/31v3p4oq6im7fvpqhhbju222pbr4?si=d75830b95ed94d4f"}
+            target="_blank"
+            aria-label="Spotify"
+          >
+            <SiSpotify className="text-2xl hover:text-pink-500 sm:text-4xl" />
+          </a>
+          <a
+            href={"https://www.twitch.tv/himbothyswaggins"}
+            target="_blank"
+            aria-label="Twitch.tv"
+          >
+            <SiTwitch className="text-2xl hover:text-pink-500 sm:text-4xl" />
+          </a>
+          <a
+            href={"https://www.youtube.com/@himbothyswaggins"}
+            target="_blank"
+            aria-label="YouTube"
+          >
+            <SiYoutube className="text-2xl hover:text-pink-500 sm:text-4xl" />
+          </a>
+        </div>
+      </span>
+
+      <span>
+        <h2 class="mb-2 text-xl text-white sm:text-[1.5rem]">Stuff I use:</h2>
+        <div
+          class="flex flex-row flex-wrap items-center justify-center gap-4 text-center"
+        >
+          <a href={"https://nextjs.org/"} target="_blank" aria-label="Next.js">
+            <SiNextdotjs className="text-2xl hover:text-pink-500 sm:text-4xl" />
+          </a>
+
+          <a href={"https://astro.build/"} target="_blank" aria-label="Astro">
+            <SiAstro className="text-2xl hover:text-pink-500 sm:text-4xl" />
+          </a>
+
+          <a
+            href={"https://kit.svelte.dev/"}
+            target="_blank"
+            aria-label="SvelteKit"
+          >
+            <SiSvelte className="text-2xl hover:text-pink-500 sm:text-4xl" />
+          </a>
+
+          <a
+            href={"https://www.prisma.io/"}
+            target="_blank"
+            aria-label="Prisma"
+          >
+            <SiPrisma className="text-2xl hover:text-pink-500 sm:text-4xl" />
+          </a>
+
+          <a
+            href={"https://www.postgresql.org/"}
+            target="_blank"
+            aria-label="PostgreSQL"
+          >
+            <SiPostgresql
+              className="text-2xl hover:text-pink-500 sm:text-4xl"
+            />
+          </a>
+
+          <a href={"https://redis.io/"} target="_blank" aria-label="Redis">
+            <SiRedis className="text-2xl hover:text-pink-500 sm:text-4xl" />
+          </a>
+
+          <a href={"https://railway.app/"} target="_blank" aria-label="Railway">
+            <SiRailway className="text-2xl hover:text-pink-500 sm:text-4xl" />
+          </a>
+        </div>
+      </span>
+    </main>
+  </body>
+</html>

src/pages/rss.xml.js

@@ -0,0 +1,16 @@
+import rss from '@astrojs/rss';
+import { getCollection } from 'astro:content';
+import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
+
+export async function get(context) {
+	const posts = await getCollection('blog');
+	return rss({
+		title: SITE_TITLE,
+		description: SITE_DESCRIPTION,
+		site: context.site,
+		items: posts.map((post) => ({
+			...post.data,
+			link: `/blog/${post.slug}/`,
+		})),
+	});
+}

src/styles/global.css

@@ -0,0 +1,12 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+container,
+body {
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  position: fixed;
+}

tailwind.config.cjs

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("@tailwindcss/typography"), require("daisyui")],
+};

tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "strictNullChecks": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}