Rewrite app with Remix.js

.gitignore

@@ -8,9 +8,9 @@
 # testing
 /coverage
 
-# next.js
-/.next/
-/out/
+# Remix
+/.cache
+/public/build
 
 # production
 /build
@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

.prettierrc

@@ -1,4 +1,4 @@
 {
   "tabWidth": 2,
-  "useTabs": false
+  "useTabs": true
 }

app/components/BlogPost.tsx

@@ -0,0 +1,37 @@
+import { Link } from "@remix-run/react";
+
+export default function BlogPost({ title, slug, description }: any) {
+	return (
+		<div className="w-full mb-12">
+			<div className="flex flex-col md:flex-row md:items-center mb-4">
+				<Link to={slug} className="w-full">
+					<h4 className="text-xl font-medium font-serif text-gray-900 md:text-3xl">
+						{title}
+					</h4>
+				</Link>
+			</div>
+			<p className="text-gray-600 font-body prose md:prose-xl">{description}</p>
+			<Link
+				to={slug}
+				title={title}
+				className="mt-6 flex text-base md:text-xl text-emerald-500 leading-7 rounded-lg hover:text-emerald-700 transition-all h-6 items-center"
+			>
+				Read post
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					className="h-6 w-6 ml-1"
+				>
+					<path
+						stroke="currentColor"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						strokeWidth={2}
+						d="M17.5 12h-15m11.667-4l3.333 4-3.333-4zm3.333 4l-3.333 4 3.333-4z"
+					/>
+				</svg>
+			</Link>
+		</div>
+	);
+}

app/components/Footer.tsx

@@ -0,0 +1,273 @@
+import { Link } from "@remix-run/react";
+
+const Mastodon = () => {
+	return (
+		<a
+			href="https://indieweb.social/@ThePaulMcBride"
+			target="_blank"
+			rel="noopener noreferrer me"
+			aria-label="Follow me on Mastodon"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="32"
+				height="32"
+				viewBox="0 0 32 32"
+				className="w-6 h-6"
+				fill="currentColor"
+			>
+				<path
+					fill="currentColor"
+					fillRule="evenodd"
+					d="M30.921 10.505c0-6.943-4.547-8.975-4.547-8.975-2.292-1.057-6.229-1.5-10.323-1.531h-0.099c-4.089 0.031-8.027 0.473-10.317 1.531 0 0-4.553 2.032-4.553 8.975 0 1.588-0.031 3.489 0.021 5.505 0.167 6.792 1.245 13.479 7.521 15.14 2.896 0.767 5.38 0.928 7.38 0.819 3.631-0.204 5.667-1.297 5.667-1.297l-0.12-2.636c0 0-2.593 0.819-5.505 0.719-2.885-0.099-5.932-0.307-6.396-3.853-0.047-0.328-0.067-0.661-0.067-0.995 0 0 2.832 0.692 6.427 0.859 2.192 0.099 4.249-0.129 6.344-0.38 4.005-0.473 7.5-2.948 7.937-5.203 0.687-3.552 0.629-8.677 0.629-8.677zM25.557 19.453h-3.328v-8.161c0-1.719-0.724-2.595-2.172-2.595-1.599 0-2.401 1.037-2.401 3.084v4.469h-3.312v-4.469c0-2.047-0.803-3.084-2.401-3.084-1.448 0-2.172 0.876-2.172 2.595v8.156h-3.328v-8.401c0-1.719 0.437-3.083 1.317-4.093 0.907-1.011 2.089-1.532 3.563-1.532 1.704 0 2.995 0.657 3.849 1.969l0.828 1.391 0.828-1.391c0.855-1.312 2.145-1.969 3.849-1.969 1.473 0 2.661 0.521 3.568 1.532 0.875 1.011 1.312 2.375 1.312 4.093z"
+				/>
+			</svg>
+		</a>
+	);
+};
+
+const Twitter = () => {
+	return (
+		<a
+			href="https://twitter.com/thepaulmcbride"
+			target="_blank"
+			rel="noopener noreferrer me"
+			aria-label="Visit my Twitter"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="20"
+				viewBox="0 0 24 20"
+			>
+				<path
+					fill="currentColor"
+					fillRule="evenodd"
+					d="M24,2.96470588 C23.1,3.40941176 22.2,3.55764706 21.15,3.70588235 C22.2,3.11294118 22.95,2.22352941 23.25,1.03764706 C22.35,1.63058824 21.3,1.92705882 20.1,2.22352941 C19.2,1.33411765 17.85,0.741176471 16.5,0.741176471 C13.95,0.741176471 11.7,2.96470588 11.7,5.63294118 C11.7,6.07764706 11.7,6.37411765 11.85,6.67058824 C7.8,6.52235294 4.05,4.59529412 1.65,1.63058824 C1.2,2.37176471 1.05,3.11294118 1.05,4.15058824 C1.05,5.78117647 1.95,7.26352941 3.3,8.15294118 C2.55,8.15294118 1.8,7.85647059 1.05,7.56 C1.05,7.56 1.05,7.56 1.05,7.56 C1.05,9.93176471 2.7,11.8588235 4.95,12.3035294 C4.5,12.4517647 4.05,12.4517647 3.6,12.4517647 C3.3,12.4517647 3,12.4517647 2.7,12.3035294 C3.3,14.2305882 5.1,15.7129412 7.35,15.7129412 C5.7,17.0470588 3.6,17.7882353 1.2,17.7882353 C0.75,17.7882353 0.45,17.7882353 0,17.7882353 C2.25,19.1223529 4.8,20.0117647 7.5,20.0117647 C16.5,20.0117647 21.45,12.6 21.45,6.22588235 C21.45,6.07764706 21.45,5.78117647 21.45,5.63294118 C22.5,4.89176471 23.4,4.00235294 24,2.96470588 Z"
+				/>
+			</svg>
+		</a>
+	);
+};
+
+export const GitHub = () => {
+	return (
+		<a
+			href="https://github.com/thepaulmcbride"
+			target="_blank"
+			rel="noopener noreferrer me"
+			aria-label="Visit my GitHub"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="23"
+				height="23"
+				viewBox="0 0 23 23"
+			>
+				<path
+					fill="currentColor"
+					fillRule="evenodd"
+					d="M11.2941176,0.279031142 C5.08235294,0.279031142 0,5.3015917 0,11.4402768 C0,16.3233218 3.24705882,20.5087889 7.76470588,22.0434602 C8.32941176,22.1829758 8.47058824,21.7644291 8.47058824,21.4853979 C8.47058824,21.2063668 8.47058824,20.5087889 8.47058824,19.5321799 C5.36470588,20.2297578 4.65882353,18.1370242 4.65882353,18.1370242 C4.09411765,16.8813841 3.38823529,16.4628374 3.38823529,16.4628374 C2.4,15.7652595 3.52941176,15.7652595 3.52941176,15.7652595 C4.65882353,15.9047751 5.22352941,16.8813841 5.22352941,16.8813841 C6.21176471,18.6950865 7.90588235,18.1370242 8.47058824,17.8579931 C8.61176471,17.1604152 8.89411765,16.6023529 9.17647059,16.3233218 C6.63529412,16.0442907 4.09411765,15.0676817 4.09411765,10.742699 C4.09411765,9.48705882 4.51764706,8.51044983 5.22352941,7.81287197 C5.08235294,7.53384083 4.65882353,6.41771626 5.36470588,4.88304498 C5.36470588,4.88304498 6.35294118,4.60401384 8.47058824,5.99916955 C9.31764706,5.72013841 10.3058824,5.58062284 11.2941176,5.58062284 C12.2823529,5.58062284 13.2705882,5.72013841 14.1176471,5.99916955 C16.2352941,4.60401384 17.2235294,4.88304498 17.2235294,4.88304498 C17.7882353,6.41771626 17.5058824,7.53384083 17.3647059,7.81287197 C18.0705882,8.6499654 18.4941176,9.62657439 18.4941176,10.742699 C18.4941176,15.0676817 15.8117647,15.9047751 13.2705882,16.1838062 C13.6941176,16.7418685 14.1176471,17.4394464 14.1176471,18.4160554 C14.1176471,19.9507266 14.1176471,21.0668512 14.1176471,21.4853979 C14.1176471,21.7644291 14.2588235,22.1829758 14.9647059,22.0434602 C19.4823529,20.5087889 22.7294118,16.3233218 22.7294118,11.4402768 C22.5882353,5.3015917 17.5058824,0.279031142 11.2941176,0.279031142 Z"
+				/>
+			</svg>
+		</a>
+	);
+};
+
+export const Youtube = () => {
+	return (
+		<a
+			href="https://youtube.com/@thepaulmcbride"
+			target="_blank"
+			rel="noopener noreferrer me"
+			aria-label="Visit my YouTube channel"
+		>
+			<svg
+				fill="#000000"
+				version="1.1"
+				xmlns="http://www.w3.org/2000/svg"
+				width="23"
+				height="23"
+				viewBox="0 0 96.875 96.875"
+			>
+				<g>
+					<path
+						fill="currentColor"
+						fillRule="evenodd"
+						d="M95.201,25.538c-1.186-5.152-5.4-8.953-10.473-9.52c-12.013-1.341-24.172-1.348-36.275-1.341
+		c-12.105-0.007-24.266,0-36.279,1.341c-5.07,0.567-9.281,4.368-10.467,9.52C0.019,32.875,0,40.884,0,48.438
+		C0,55.992,0,64,1.688,71.336c1.184,5.151,5.396,8.952,10.469,9.52c12.012,1.342,24.172,1.349,36.277,1.342
+		c12.107,0.007,24.264,0,36.275-1.342c5.07-0.567,9.285-4.368,10.471-9.52c1.689-7.337,1.695-15.345,1.695-22.898
+		C96.875,40.884,96.889,32.875,95.201,25.538z M35.936,63.474c0-10.716,0-21.32,0-32.037c10.267,5.357,20.466,10.678,30.798,16.068
+		C56.434,52.847,46.23,58.136,35.936,63.474z"
+					/>
+				</g>
+			</svg>
+		</a>
+	);
+};
+
+export const Twitch = () => {
+	return (
+		<a
+			href="https://twitch.tv/thepaulmcbride"
+			target="_blank"
+			rel="noopener noreferrer me"
+			aria-label="Visit my Twitch channel"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+			>
+				<path
+					d="M2.149 0l-1.612 4.119v16.836h5.731v3.045h3.224l3.045-3.045h4.657l6.269-6.269v-14.686h-21.314zm19.164 13.612l-3.582 3.582h-5.731l-3.045 3.045v-3.045h-4.836v-15.045h17.194v11.463zm-3.582-7.343v6.262h-2.149v-6.262h2.149zm-5.731 0v6.262h-2.149v-6.262h2.149z"
+					fill="currentColor"
+					fillRule="evenodd"
+				/>
+			</svg>
+		</a>
+	);
+};
+
+export const RSS = () => {
+	return (
+		<a href="https://paulmcbride.com/feed" aria-label="Subscibe to my RSS feed">
+			<svg
+				className="w-6 h-6"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					strokeWidth="2"
+					d="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-6 0a1 1 0 11-2 0 1 1 0 012 0z"
+				></path>
+			</svg>
+		</a>
+	);
+};
+
+export default function Footer() {
+	return (
+		<footer className="grid grid-cols-main [&>*]:col-start-2 [&>*]:col-end-3 mb-8 px-8">
+			<hr className="w-full border-1 border-gray-200 mb-8" />
+			<div className="grid sm:grid-cols-3 justify-between mb-8 space-y-3 sm:space-y-0">
+				<ul className="text-sm text-gray-600 list-none space-y-3">
+					<li>
+						<Link to="/" className="hover:text-emerald-500 transition-colors">
+							Home
+						</Link>
+					</li>
+					<li>
+						<Link
+							to="/posts"
+							className="hover:text-emerald-500 transition-colors"
+						>
+							Posts
+						</Link>
+					</li>
+					<li>
+						<Link
+							to="/now"
+							className="hover:text-emerald-500 transition-colors"
+						>
+							Now
+						</Link>
+					</li>
+					<li>
+						<a
+							href="/feed"
+							className="hover:text-emerald-500 transition-colors"
+							target="_blank"
+						>
+							Feed
+						</a>
+					</li>
+				</ul>
+
+				<ul className="text-sm text-gray-600 list-none space-y-3">
+					<li>
+						<a
+							href="https://indieweb.social/@ThePaulMcBride"
+							target="_blank"
+							rel="noopener noreferrer me"
+							aria-label="Follow me on Mastodon"
+							className="hover:text-emerald-500 transition-colors"
+						>
+							Mastodon
+						</a>
+					</li>
+					<li>
+						<a
+							href="https://github.com/thepaulmcbride"
+							target="_blank"
+							rel="noopener noreferrer me"
+							aria-label="Visit my GitHub"
+							className="hover:text-emerald-500 transition-colors"
+						>
+							Github
+						</a>
+					</li>
+					<li>
+						<a
+							href="https://youtube.com/@thepaulmcbride"
+							target="_blank"
+							rel="noopener noreferrer me"
+							aria-label="Visit my YouTube channel"
+							className="hover:text-emerald-500 transition-colors"
+						>
+							Youtube
+						</a>
+					</li>
+					<li>
+						<a
+							href="https://twitter.com/thepaulmcbride"
+							target="_blank"
+							rel="noopener noreferrer me"
+							aria-label="Follow me on Twitter"
+							className="hover:text-emerald-500 transition-colors"
+						>
+							Twitter
+						</a>
+					</li>
+				</ul>
+				<ul className="text-sm text-gray-600 list-none space-y-3">
+					<li>
+						<a
+							className="hover:text-emerald-500 transition-colors"
+							href="https://egghead.io/q/resources-by-paul-mcbride?af=auhexg"
+							target="_blank"
+							rel="noopener noreferrer me"
+						>
+							Lessons
+						</a>
+					</li>
+					<li>
+						<a
+							className="hover:text-emerald-500 transition-colors"
+							href="mailto:[email protected]"
+						>
+							Email
+						</a>
+					</li>
+					<li>
+						<Link
+							className="hover:text-emerald-500 transition-colors"
+							to="/colophon"
+						>
+							Colophon
+						</Link>
+					</li>
+				</ul>
+			</div>
+			<div className="flex justify-between w-full text-base text-gray-600">
+				<span>{`Paul McBride \u00A9 ${new Date().getFullYear()}`}</span>
+			</div>
+		</footer>
+	);
+}

app/components/LoadingSpinner.tsx

@@ -0,0 +1,24 @@
+export default function LoadingSpinner() {
+	return (
+		<svg
+			className="animate-spin h-5 w-5 text-gray-900"
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+		>
+			<circle
+				className="opacity-25"
+				cx="12"
+				cy="12"
+				r="10"
+				stroke="currentColor"
+				strokeWidth="4"
+			/>
+			<path
+				className="opacity-75"
+				fill="currentColor"
+				d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+			/>
+		</svg>
+	);
+}