Basic Structure and Theme

.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

.prettierrc.toml

@@ -0,0 +1,6 @@
+trailingComma = "none"
+useTabs = true
+semi = true
+singleQuote = false
+tabWidth = 4
+plugins = ["prettier-plugin-astro"]

LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2024 Sammy Shear <sammyshear1@gmail.com>
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

LICENSE-FIRACODE

@@ -0,0 +1,93 @@
+Copyright (c) 2014, The Fira Code Project Authors (https://github.com/tonsky/FiraCode)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

README.md

@@ -0,0 +1,3 @@
+# sshear.dev
+
+My new personal site and blog using Astro.

astro.config.mjs

@@ -0,0 +1,17 @@
+import { defineConfig } from "astro/config";
+
+import tailwind from "@astrojs/tailwind";
+import react from "@astrojs/react";
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [tailwind(), react()],
+	markdown: {
+		shikiConfig: {
+			themes: {
+				light: "catppuccin-latte",
+				dark: "catppuccin-mocha"
+			}
+		}
+	}
+});

package.json

@@ -0,0 +1,30 @@
+{
+	"name": "sshear-dev-new",
+	"type": "module",
+	"version": "1.0.0",
+	"scripts": {
+		"dev": "astro dev",
+		"start": "astro dev",
+		"build": "astro check && astro build",
+		"preview": "astro preview",
+		"astro": "astro",
+		"format": "prettier -w src"
+	},
+	"dependencies": {
+		"@astrojs/check": "^0.5.9",
+		"@astrojs/react": "^3.1.0",
+		"@astrojs/tailwind": "^5.1.0",
+		"@types/react": "^18.2.66",
+		"@types/react-dom": "^18.2.22",
+		"astro": "^4.5.5",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"tailwindcss": "^3.4.1",
+		"typescript": "^5.4.2"
+	},
+	"devDependencies": {
+		"@catppuccin/tailwindcss": "^0.1.6",
+		"prettier": "^3.2.5",
+		"prettier-plugin-astro": "^0.13.0"
+	}
+}

public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

src/components/Header.astro

@@ -0,0 +1,23 @@
+---
+import { SITE } from "../config";
+import ThemeToggle from "./ThemeToggle";
+---
+
+<header
+	class="flex flex-row justify-between w-[90%] sm:w-3/4 md:w-1/2 lg:w-1/3"
+>
+	<a href="/" class="group text-3xl hover:text-ctp-sky">
+		<span></span>
+		<span
+			class="inline-flex overflow-x-hidden animate-type whitespace-nowrap will-change-transform"
+		>
+			{SITE.author}
+		</span>
+		<span
+			class="box-border inline-block w-1 h-10 ml-2 -mb-2 mt-2 group-hover:bg-ctp-sky bg-ctp-text animate-cursor will-change-transform"
+		></span>
+	</a>
+	<span class="text-2xl place-self-end">
+		<ThemeToggle client:only="react" />
+	</span>
+</header>

src/components/ThemeToggle.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+
+export default function ThemeToggle() {
+	const [theme, setTheme] = useState(
+		localStorage.getItem("theme") ?? "light"
+	);
+
+	const handleClick = () => {
+		setTheme(theme === "light" ? "dark" : "light");
+	};
+
+	useEffect(() => {
+		if (theme === "dark") {
+			document.documentElement.classList.add("dark");
+		} else {
+			document.documentElement.classList.remove("dark");
+		}
+		localStorage.setItem("theme", theme);
+	}, [theme]);
+
+	return (
+		<button className="hover:text-ctp-yellow" onClick={handleClick}>
+			{theme === "light" ? "" : ""}
+		</button>
+	);
+}

src/config.ts

@@ -0,0 +1,8 @@
+import type { Site } from "./types";
+
+export const SITE: Site = {
+    title: "sshear.dev",
+    author: "Sammy Shear",
+    lightAndDarkMode: true,
+    postPerPage: 5
+};

src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

src/layouts/Layout.astro

@@ -0,0 +1,47 @@
+---
+import { SITE } from "../config";
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{SITE.title}</title>
+	</head>
+	<body
+		class="flex flex-col place-items-center bg-ctp-base ctp-latte text-ctp-text dark:ctp-mocha"
+	>
+		<slot />
+	</body>
+</html>
+
+<style is:global>
+	@font-face {
+		font-family: "FiraCode NF";
+		src: url("/fonts/FiraCodeNerdFont.ttf");
+	}
+</style>
+
+<script is:inline>
+	const theme = (() => {
+		if (
+			typeof localStorage !== "undefined" &&
+			localStorage.getItem("theme")
+		) {
+			return localStorage.getItem("theme");
+		}
+		if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+			return "dark";
+		}
+		return "light";
+	})();
+
+	if (theme === "light") {
+		document.documentElement.classList.remove("dark");
+	} else {
+		document.documentElement.classList.add("dark");
+	}
+	window.localStorage.setItem("theme", theme);
+</script>

src/pages/index.astro

@@ -0,0 +1,8 @@
+---
+import Header from "../components/Header.astro";
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout>
+	<Header />
+</Layout>

src/types.ts

@@ -0,0 +1,6 @@
+export type Site = {
+	title: string;
+	author: string;
+	lightAndDarkMode: boolean;
+	postPerPage: number;
+};

tailwind.config.mjs

@@ -0,0 +1,40 @@
+import catppuccin from "@catppuccin/tailwindcss";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+	content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+	darkMode: "class",
+	theme: {
+		fontFamily: {
+			sans: ["FiraCode NF"]
+		},
+		animation: {
+			type: "type 1.2s ease-out .4s infinite alternate both",
+			cursor: "cursor .4s linear infinite alternate"
+		},
+		keyframes: {
+			type: {
+				"0%": { width: "0ch" },
+				"5%, 10%": { width: "1ch" },
+				"15%, 20%": { width: "2ch" },
+				"25%, 30%": { width: "3ch" },
+				"35%, 40%": { width: "4ch" },
+				"45%, 50%": { width: "5ch" },
+				"55%, 60%": { width: "6ch" },
+				"65%, 70%": { width: "7ch" },
+				"75%, 80%": { width: "8ch" },
+				"85%, 90%": { width: "9ch" },
+				"95%": { width: "10ch" }
+			},
+			cursor: {
+				"0%, 40%": { opacity: "0" },
+				"60%, 100%": { opacity: "1" }
+			}
+		}
+	},
+	plugins: [
+		catppuccin({
+			prefix: "ctp"
+		})
+	]
+};

tsconfig.json

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