git.stevedylan.dev

src/components/GuestbookFeed.tsx +16 −9

	username: string;
};

const API_URL = "https://guestbook-db-production.up.railway.app";
// const API_URL = "https://guestbook-db-production.up.railway.app";
const API_URL = "http://localhost:3000";

export function GuestbookFeed() {
export default function GuestbookFeed() {
	const [messages, setMessages] = useState<Message[]>([]);
	const [isLoading, setIsLoading] = useState(true);
	const [isSending, setIsSending] = useState(false);

			<div className="">
				<SignedOut>
					<SignUpButton
						signInForceRedirectUrl="/log"
						signInFallbackRedirectUrl="/log"
						forceRedirectUrl="/log"
						as="button"
						signInForceRedirectUrl="/guestbook"
						signInFallbackRedirectUrl="/guestbook"
						forceRedirectUrl="/guestbook"
						mode="modal"
						className="border-2 border-current rounded-md p-1 cursor-pointer"
						className="border-2 border-current rounded-md py-1 px-2 cursor-pointer"
					>
						Sign in with Github
					</SignUpButton>
				</SignedOut>
				<SignedIn>
					<div className="flex items-start gap-4 w-full">
						<UserButton afterSignOutUrl="/log" />
						<UserButton afterSignOutUrl="/guestbook" />
						<input
							className="p-1 bg-bgColor border-current border-2 rounded-md w-96"
							type="text"

									/>
								</a>
								<div className="flex flex-col justify-between">
									<p className="font-bold text-gray-400">{note.author}</p>
									<a
										href={`https://github.com/${note.username}`}
										className="font-bold text-gray-400"
										target="_blank"
										rel="noreferrer"
									>
										{note.author}
									</a>
									<p className="break-words">{note.note}</p>
								</div>
							</div>

src/components/blog/PostPreview.astro +1 −1


<time datetime={datetime} class="min-w-[120px] text-gray-500">{postDate}</time>
<Element>
	<a href={`/posts/${post.slug}`} class="cactus-link" rel="prefetch">
	<a href={`/posts/${post.slug}`} class="style-link" rel="prefetch">
		{post.data.title}
	</a>
</Element>

src/pages/404.astro +1 −2

---
import PageLayout from "@/layouts/Base";
import { Image } from "astro:assets";
import img from "../assets/512x512.png";

const meta = {
	title: "Oops! You found a missing page!",

	<h1 class="title mb-6">404 | Oops something went wrong</h1>
	<p class="mb-8">Please use the navigation to find your way back</p>
	<div class="my-4 grid justify-center">
		<Image src={img} alt="A cartoon cactus looking at the 'Astro.build' logo" loading="eager" />
		<Image src="/512x512.png" width={256} height={256} alt="logo" loading="eager" />
	</div>
</PageLayout>

src/pages/guestbook.astro (added) +19 −0

1	+	---
2	+	export const prerender = false;
3	+	import PageLayout from "@/layouts/Base";
4	+	import GuestbookFeed from "src/components/GuestbookFeed";
5	+
6	+	const meta = {
7	+	title: "Guestbook",
8	+	description: "Leave a message in my digital guestbook!",
9	+	};
10	+	---
11	+	<PageLayout meta={meta}>
12	+	<div class="space-y-6">
13	+	<div class="flex flex-col gap-2 mb-6">
14	+	<h1 class="font-bold text-2xl">Guestbook</h1>
15	+	<p>Welcome to my little digital guestbook! I built this using PGlite, Railway, Clerk, and <a href="https://pinata.cloud" class="style-link" target="_blank" rel="noreferrer">Pinata</a>. Login with your Github account to leave a message!</p>
16	+	</div>
17	+	<GuestbookFeed client:load />
18	+	</div>
19	+	</PageLayout>

src/pages/index.astro +2 −2

				href="https://snippets.so"
				target="_blank"
				rel="noopener noreferrer"
				class="cactus-link">Snippets.so</a
			>, a clean and simple code sharing tool.
				class="style-link">Snippets.so</a
			>, a clean and simple code sharing tool. Take a look around and be sure to <a class="style-link" href="/guestbook">sign my guestbook</a>!
		</p>
		<SocialList />
		<p>Or anywhere with my handle <span class="text-accent">@stevedylandev</span></p>

src/pages/log.astro (deleted) +0 −19

---
export const prerender = false;
import PageLayout from "@/layouts/Base";
import { GuestbookFeed } from "src/components/GuestbookFeed";

const meta = {
	title: "Log",
	description: "Connect with me on all the things",
};
---
<PageLayout meta={meta}>
  <div class="space-y-6">
  <div class="flex flex-col gap-2 mb-6">
    <h1 class="font-bold text-2xl">Guest Log</h1>
    <p>Come say hello!</p>
    </div>
    <GuestbookFeed client:load />
  </div>
</PageLayout>

tailwind.config.cjs +2 −2

				DEFAULT: {
					css: {
						a: {
							"@apply cactus-link no-underline": "",
							"@apply style-link no-underline": "",
						},
						strong: {
							fontWeight: "700",

		require("@tailwindcss/aspect-ratio"),
		plugin(function ({ addComponents }) {
			addComponents({
				".cactus-link": {
				".style-link": {
					"@apply bg-[size:100%_6px] bg-bottom bg-repeat-x": {},
					backgroundImage:
						"linear-gradient(transparent,transparent 5px,var(--theme-text) 5px,var(--theme-text))",

17	17		username: string;
18	18		};
19	19
20		-	const API_URL = "https://guestbook-db-production.up.railway.app";
	20	+	// const API_URL = "https://guestbook-db-production.up.railway.app";
	21	+	const API_URL = "http://localhost:3000";
21	22
22		-	export function GuestbookFeed() {
	23	+	export default function GuestbookFeed() {
23	24		const [messages, setMessages] = useState<Message[]>([]);
24	25		const [isLoading, setIsLoading] = useState(true);
25	26		const [isSending, setIsSending] = useState(false);

91	92		<div className="">
92	93		<SignedOut>
93	94		<SignUpButton
94		-	signInForceRedirectUrl="/log"
95		-	signInFallbackRedirectUrl="/log"
96		-	forceRedirectUrl="/log"
97		-	as="button"
	95	+	signInForceRedirectUrl="/guestbook"
	96	+	signInFallbackRedirectUrl="/guestbook"
	97	+	forceRedirectUrl="/guestbook"
98	98		mode="modal"
99		-	className="border-2 border-current rounded-md p-1 cursor-pointer"
	99	+	className="border-2 border-current rounded-md py-1 px-2 cursor-pointer"
100	100		>
101	101		Sign in with Github
102	102		</SignUpButton>
103	103		</SignedOut>
104	104		<SignedIn>
105	105		<div className="flex items-start gap-4 w-full">
106		-	<UserButton afterSignOutUrl="/log" />
	106	+	<UserButton afterSignOutUrl="/guestbook" />
107	107		<input
108	108		className="p-1 bg-bgColor border-current border-2 rounded-md w-96"
109	109		type="text"

143	143		/>
144	144		</a>
145	145		<div className="flex flex-col justify-between">
146		-	<p className="font-bold text-gray-400">{note.author}</p>
	146	+	<a
	147	+	href={`https://github.com/${note.username}`}
	148	+	className="font-bold text-gray-400"
	149	+	target="_blank"
	150	+	rel="noreferrer"
	151	+	>
	152	+	{note.author}
	153	+	</a>
147	154		<p className="break-words">{note.note}</p>
148	155		</div>
149	156		</div>

16	16
17	17		<time datetime={datetime} class="min-w-[120px] text-gray-500">{postDate}</time>
18	18		<Element>
19		-	<a href={`/posts/${post.slug}`} class="cactus-link" rel="prefetch">
	19	+	<a href={`/posts/${post.slug}`} class="style-link" rel="prefetch">
20	20		{post.data.title}
21	21		</a>
22	22		</Element>

1	1		---
2	2		import PageLayout from "@/layouts/Base";
3	3		import { Image } from "astro:assets";
4		-	import img from "../assets/512x512.png";
5	4
6	5		const meta = {
7	6		title: "Oops! You found a missing page!",

13	12		<h1 class="title mb-6">404 \| Oops something went wrong</h1>
14	13		<p class="mb-8">Please use the navigation to find your way back</p>
15	14		<div class="my-4 grid justify-center">
16		-	<Image src={img} alt="A cartoon cactus looking at the 'Astro.build' logo" loading="eager" />
	15	+	<Image src="/512x512.png" width={256} height={256} alt="logo" loading="eager" />
17	16		</div>
18	17		</PageLayout>

20	20		href="https://snippets.so"
21	21		target="_blank"
22	22		rel="noopener noreferrer"
23		-	class="cactus-link">Snippets.so</a
24		-	>, a clean and simple code sharing tool.
	23	+	class="style-link">Snippets.so</a
	24	+	>, a clean and simple code sharing tool. Take a look around and be sure to <a class="style-link" href="/guestbook">sign my guestbook</a>!
25	25		</p>
26	26		<SocialList />
27	27		<p>Or anywhere with my handle <span class="text-accent">@stevedylandev</span></p>

1	-	---
2	-	export const prerender = false;
3	-	import PageLayout from "@/layouts/Base";
4	-	import { GuestbookFeed } from "src/components/GuestbookFeed";
5	-
6	-	const meta = {
7	-	title: "Log",
8	-	description: "Connect with me on all the things",
9	-	};
10	-	---
11	-	<PageLayout meta={meta}>
12	-	<div class="space-y-6">
13	-	<div class="flex flex-col gap-2 mb-6">
14	-	<h1 class="font-bold text-2xl">Guest Log</h1>
15	-	<p>Come say hello!</p>
16	-	</div>
17	-	<GuestbookFeed client:load />
18	-	</div>
19	-	</PageLayout>

51	51		DEFAULT: {
52	52		css: {
53	53		a: {
54		-	"@apply cactus-link no-underline": "",
	54	+	"@apply style-link no-underline": "",
55	55		},
56	56		strong: {
57	57		fontWeight: "700",

97	97		require("@tailwindcss/aspect-ratio"),
98	98		plugin(function ({ addComponents }) {
99	99		addComponents({
100		-	".cactus-link": {
	100	+	".style-link": {
101	101		"@apply bg-[size:100%_6px] bg-bottom bg-repeat-x": {},
102	102		backgroundImage:
103	103		"linear-gradient(transparent,transparent 5px,var(--theme-text) 5px,var(--theme-text))",