mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2026-06-05 19:15:30 -04:00
homebrew comments system
This commit is contained in:
@@ -0,0 +1,4 @@
|
||||
import { auth } from "@/lib/auth";
|
||||
import { toNextJsHandler } from "better-auth/next-js";
|
||||
|
||||
export const { POST, GET } = toNextJsHandler(auth);
|
||||
@@ -1,7 +1,6 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { unstable_cache as cache } from "next/cache";
|
||||
import { getViews as _getViews } from "@/lib/posts";
|
||||
import { POSTS_DIR } from "@/lib/config/constants";
|
||||
import { getViews as _getViews } from "@/lib/server/views";
|
||||
|
||||
const getViews = cache(_getViews, undefined, {
|
||||
revalidate: 300, // 5 minutes
|
||||
@@ -25,9 +24,9 @@ export const GET = async (): Promise<
|
||||
const total = {
|
||||
hits: Object.values(views).reduce((acc, curr) => acc + curr, 0),
|
||||
};
|
||||
const pages = Object.entries(views).map(([slug, hits]) => ({
|
||||
slug: `${POSTS_DIR}/${slug}`,
|
||||
hits,
|
||||
const pages = Object.entries(views).map(([slug, views]) => ({
|
||||
slug,
|
||||
hits: views,
|
||||
}));
|
||||
|
||||
pages.sort((a, b) => b.hits - a.hits);
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import PageTitle from "@/components/layout/page-title";
|
||||
import Comments from "@/components/comments";
|
||||
import { createMetadata } from "@/lib/metadata";
|
||||
|
||||
export const metadata = createMetadata({
|
||||
@@ -35,7 +34,3 @@ npx @jakejarvis/cli
|
||||
## License
|
||||
|
||||
MIT © [Jake Jarvis](https://jarv.is/), [Sindre Sorhus](https://sindresorhus.com/)
|
||||
|
||||
---
|
||||
|
||||
<Comments title="CLI" />
|
||||
|
||||
@@ -1,107 +0,0 @@
|
||||
"use server";
|
||||
|
||||
import { env } from "@/lib/env";
|
||||
import { headers } from "next/headers";
|
||||
import * as v from "valibot";
|
||||
import { Resend } from "resend";
|
||||
import siteConfig from "@/lib/config/site";
|
||||
|
||||
const ContactSchema = v.object({
|
||||
name: v.message(v.pipe(v.string(), v.trim(), v.nonEmpty()), "Your name is required."),
|
||||
email: v.message(v.pipe(v.string(), v.trim(), v.nonEmpty(), v.email()), "Your email address is required."),
|
||||
message: v.message(v.pipe(v.string(), v.trim(), v.minLength(15)), "Your message must be at least 15 characters."),
|
||||
"cf-turnstile-response": v.message(
|
||||
v.pipe(
|
||||
// token wasn't submitted at _all_, most likely a direct POST request by a spam bot
|
||||
v.string(),
|
||||
// form submitted properly but token was missing, might be a forgetful human
|
||||
v.nonEmpty(),
|
||||
// very rudimentary length check based on Cloudflare's docs
|
||||
// https://developers.cloudflare.com/turnstile/troubleshooting/testing/
|
||||
// https://developers.cloudflare.com/turnstile/get-started/server-side-validation/
|
||||
v.maxLength(2048),
|
||||
v.readonly()
|
||||
),
|
||||
"Are you sure you're not a robot...? 🤖"
|
||||
),
|
||||
});
|
||||
|
||||
export type ContactInput = v.InferInput<typeof ContactSchema>;
|
||||
|
||||
export type ContactState = {
|
||||
success: boolean;
|
||||
message: string;
|
||||
errors?: v.FlatErrors<typeof ContactSchema>["nested"];
|
||||
};
|
||||
|
||||
export const send = async (state: ContactState, payload: FormData): Promise<ContactState> => {
|
||||
// TODO: remove after debugging why automated spam entries are causing 500 errors
|
||||
console.debug("[/contact] received payload:", payload);
|
||||
|
||||
try {
|
||||
const data = v.safeParse(ContactSchema, Object.fromEntries(payload));
|
||||
|
||||
if (!data.success) {
|
||||
return {
|
||||
success: false,
|
||||
message: "Please make sure all fields are filled in.",
|
||||
errors: v.flatten(data.issues).nested,
|
||||
};
|
||||
}
|
||||
|
||||
// try to get the client IP (for turnstile accuracy, not logging!) but no biggie if we can't
|
||||
let remoteip;
|
||||
try {
|
||||
remoteip = (await headers()).get("x-forwarded-for");
|
||||
} catch {} // eslint-disable-line no-empty
|
||||
|
||||
// validate captcha
|
||||
const turnstileResponse = await fetch("https://challenges.cloudflare.com/turnstile/v0/siteverify", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
secret: env.TURNSTILE_SECRET_KEY,
|
||||
response: data.output["cf-turnstile-response"],
|
||||
remoteip,
|
||||
}),
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
if (!turnstileResponse || !turnstileResponse.ok) {
|
||||
throw new Error(`[/contact] turnstile validation failed: ${turnstileResponse.status}`);
|
||||
}
|
||||
|
||||
const turnstileData = (await turnstileResponse.json()) as { success: boolean };
|
||||
|
||||
if (!turnstileData.success) {
|
||||
return {
|
||||
success: false,
|
||||
message: "Did you complete the CAPTCHA? (If you're human, that is...)",
|
||||
};
|
||||
}
|
||||
|
||||
if (env.RESEND_FROM_EMAIL === "onboarding@resend.dev") {
|
||||
// https://resend.com/docs/api-reference/emails/send-email
|
||||
console.warn("[/contact] 'RESEND_FROM_EMAIL' is not set, falling back to onboarding@resend.dev.");
|
||||
}
|
||||
|
||||
// send email
|
||||
const resend = new Resend(env.RESEND_API_KEY);
|
||||
await resend.emails.send({
|
||||
from: `${data.output.name} <${env.RESEND_FROM_EMAIL || "onboarding@resend.dev"}>`,
|
||||
replyTo: `${data.output.name} <${data.output.email}>`,
|
||||
to: [env.RESEND_TO_EMAIL],
|
||||
subject: `[${siteConfig.name}] Contact Form Submission`,
|
||||
text: data.output.message,
|
||||
});
|
||||
|
||||
return { success: true, message: "Thanks! You should hear from me soon." };
|
||||
} catch (error) {
|
||||
console.error("[/contact] fatal error:", error);
|
||||
|
||||
return {
|
||||
success: false,
|
||||
message: "Internal server error. Please try again later or shoot me an email.",
|
||||
};
|
||||
}
|
||||
};
|
||||
@@ -1,144 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { env } from "@/lib/env";
|
||||
import { useActionState, useState } from "react";
|
||||
import { Turnstile } from "@marsidev/react-turnstile";
|
||||
import { SendIcon, Loader2Icon, CheckIcon, XIcon } from "lucide-react";
|
||||
import Link from "@/components/link";
|
||||
import Input from "@/components/ui/input";
|
||||
import Textarea from "@/components/ui/textarea";
|
||||
import Button from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
import { send, type ContactState, type ContactInput } from "./action";
|
||||
|
||||
const ContactForm = () => {
|
||||
const [formState, formAction, pending] = useActionState<ContactState, FormData>(send, {
|
||||
success: false,
|
||||
message: "",
|
||||
});
|
||||
|
||||
// keep track of input so we can repopulate the fields if the form fails
|
||||
const [formFields, setFormFields] = useState<Partial<ContactInput>>({
|
||||
name: "",
|
||||
email: "",
|
||||
message: "",
|
||||
});
|
||||
|
||||
return (
|
||||
<form action={formAction} className="my-6 space-y-4">
|
||||
<div>
|
||||
<Input
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="Name"
|
||||
value={formFields.name}
|
||||
onChange={(e) => {
|
||||
setFormFields({ ...formFields, name: e.target.value });
|
||||
}}
|
||||
disabled={pending || formState.success}
|
||||
aria-invalid={formState.errors?.name ? "true" : undefined}
|
||||
/>
|
||||
{formState.errors?.name && (
|
||||
<span className="text-destructive text-[0.8rem] font-semibold">{formState.errors.name[0]}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Input
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
inputMode="email"
|
||||
value={formFields.email}
|
||||
onChange={(e) => {
|
||||
setFormFields({ ...formFields, email: e.target.value });
|
||||
}}
|
||||
disabled={pending || formState.success}
|
||||
aria-invalid={formState.errors?.email ? "true" : undefined}
|
||||
/>
|
||||
{formState.errors?.email && (
|
||||
<span className="text-destructive text-[0.8rem] font-semibold">{formState.errors.email[0]}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Textarea
|
||||
name="message"
|
||||
placeholder="Write something..."
|
||||
value={formFields.message}
|
||||
onChange={(e) => {
|
||||
setFormFields({ ...formFields, message: e.target.value });
|
||||
}}
|
||||
disabled={pending || formState.success}
|
||||
aria-invalid={formState.errors?.message ? "true" : undefined}
|
||||
className="min-h-[6lh] resize-y"
|
||||
/>
|
||||
{formState.errors?.message && (
|
||||
<span className="text-destructive text-[0.8rem] font-semibold">{formState.errors.message[0]}</span>
|
||||
)}
|
||||
|
||||
<div className="text-foreground/85 my-2 text-[0.8rem] leading-relaxed">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0"
|
||||
viewBox="0 0 24 24"
|
||||
className="mr-1 inline-block size-4 align-text-top"
|
||||
>
|
||||
<path d="M22.27 19.385H1.73A1.73 1.73 0 010 17.655V6.345a1.73 1.73 0 011.73-1.73h20.54A1.73 1.73 0 0124 6.345v11.308a1.73 1.73 0 01-1.73 1.731zM5.769 15.923v-4.5l2.308 2.885 2.307-2.885v4.5h2.308V8.078h-2.308l-2.307 2.885-2.308-2.885H3.46v7.847zM21.232 12h-2.309V8.077h-2.307V12h-2.308l3.461 4.039z" />
|
||||
</svg>{" "}
|
||||
Basic{" "}
|
||||
<Link href="https://commonmark.org/help/" title="Markdown reference sheet" className="font-semibold">
|
||||
Markdown syntax
|
||||
</Link>{" "}
|
||||
is allowed here, e.g.: <strong>**bold**</strong>, <em>_italics_</em>, [
|
||||
<Link href="https://jarv.is" className="hover:no-underline">
|
||||
links
|
||||
</Link>
|
||||
](https://jarv.is), and <code>`code`</code>.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Turnstile siteKey={env.NEXT_PUBLIC_TURNSTILE_SITE_KEY} />
|
||||
{formState.errors?.["cf-turnstile-response"] && (
|
||||
<span className="text-destructive text-[0.8rem] font-semibold">
|
||||
{formState.errors["cf-turnstile-response"][0]}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex min-h-16 items-center space-x-4">
|
||||
{!formState.success && (
|
||||
<Button type="submit" size="lg" disabled={pending}>
|
||||
{pending ? (
|
||||
<>
|
||||
<Loader2Icon className="animate-spin" /> Sending...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<SendIcon /> Send
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{!pending && formState.message && (
|
||||
<div
|
||||
className={cn(
|
||||
"space-x-0.5 text-[0.9rem] font-semibold",
|
||||
formState.success ? "text-success" : "text-destructive"
|
||||
)}
|
||||
>
|
||||
{formState.success ? <CheckIcon className="inline size-4" /> : <XIcon className="inline size-4" />}{" "}
|
||||
<span>{formState.message}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactForm;
|
||||
@@ -1,9 +1,8 @@
|
||||
import PageTitle from "@/components/layout/page-title";
|
||||
import Link from "@/components/link";
|
||||
import ContactForm from "@/components/contact-form";
|
||||
import { createMetadata } from "@/lib/metadata";
|
||||
|
||||
import ContactForm from "./form";
|
||||
|
||||
export const metadata = createMetadata({
|
||||
title: "Contact Me",
|
||||
description: "Fill out this quick form and I'll get back to you as soon as I can.",
|
||||
|
||||
@@ -5,6 +5,7 @@ import { ThemeProvider, ThemeScript } from "@/components/layout/theme-context";
|
||||
import Header from "@/components/layout/header";
|
||||
import Footer from "@/components/layout/footer";
|
||||
import SkipNavButton, { SKIP_NAV_ID } from "@/components/layout/skip-nav";
|
||||
import Toaster from "@/components/ui/sonner";
|
||||
import { defaultMetadata } from "@/lib/metadata";
|
||||
import { GeistMono, GeistSans } from "@/lib/fonts";
|
||||
import siteConfig from "@/lib/config/site";
|
||||
@@ -73,6 +74,8 @@ const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
|
||||
|
||||
<Footer className="my-6 w-full" />
|
||||
</div>
|
||||
|
||||
<Toaster position="bottom-center" />
|
||||
</ThemeProvider>
|
||||
|
||||
<Analytics />
|
||||
|
||||
+22
-26
@@ -1,12 +1,12 @@
|
||||
import { env } from "@/lib/env";
|
||||
import { Suspense } from "react";
|
||||
import { JsonLd } from "react-schemaorg";
|
||||
import { formatDate, formatDateISO } from "@/lib/date";
|
||||
import { CalendarDaysIcon, TagIcon, SquarePenIcon, EyeIcon } from "lucide-react";
|
||||
import Link from "@/components/link";
|
||||
import Time from "@/components/time";
|
||||
import Comments from "@/components/comments";
|
||||
import Loading from "@/components/loading";
|
||||
import ViewCounter from "@/components/view-counter";
|
||||
import Comments from "@/components/comments/comments";
|
||||
import CommentsSkeleton from "@/components/comments/comments-skeleton";
|
||||
import { getSlugs, getFrontMatter } from "@/lib/posts";
|
||||
import { createMetadata } from "@/lib/metadata";
|
||||
import siteConfig from "@/lib/config/site";
|
||||
@@ -91,7 +91,9 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
|
||||
className={"text-foreground/70 flex flex-nowrap items-center gap-x-2 whitespace-nowrap hover:no-underline"}
|
||||
>
|
||||
<CalendarDaysIcon className="inline size-4 shrink-0" />
|
||||
<Time date={frontmatter!.date} format="MMMM d, y" />
|
||||
<time dateTime={formatDateISO(frontmatter!.date)} title={formatDate(frontmatter!.date, "MMM d, y, h:mm a O")}>
|
||||
{formatDate(frontmatter!.date, "MMMM d, y")}
|
||||
</time>
|
||||
</Link>
|
||||
|
||||
{frontmatter!.tags && (
|
||||
@@ -119,18 +121,16 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
|
||||
<span>Improve This Post</span>
|
||||
</Link>
|
||||
|
||||
{env.NEXT_PUBLIC_ENV === "production" && (
|
||||
<div className="flex min-w-14 flex-nowrap items-center gap-x-2 whitespace-nowrap">
|
||||
<EyeIcon className="inline size-4 shrink-0" />
|
||||
<Suspense
|
||||
// when this loads, the component will count up from zero to the actual number of hits, so we can simply
|
||||
// show a zero here as a "loading indicator"
|
||||
fallback={<span>0</span>}
|
||||
>
|
||||
<ViewCounter slug={`${POSTS_DIR}/${frontmatter!.slug}`} />
|
||||
</Suspense>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex min-w-14 flex-nowrap items-center gap-x-2 whitespace-nowrap">
|
||||
<EyeIcon className="inline size-4 shrink-0" />
|
||||
<Suspense
|
||||
// when this loads, the component will count up from zero to the actual number of hits, so we can simply
|
||||
// show a zero here as a "loading indicator"
|
||||
fallback={<span>0</span>}
|
||||
>
|
||||
<ViewCounter slug={`${POSTS_DIR}/${frontmatter!.slug}`} />
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 className="mt-2 mb-3 text-3xl/10 font-bold md:text-4xl/12">
|
||||
@@ -143,17 +143,13 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
|
||||
|
||||
<MDXContent />
|
||||
|
||||
{env.NEXT_PUBLIC_ENV === "production" && (
|
||||
<div id="comments" className="mt-8 min-h-36 border-t-2 pt-8">
|
||||
{!frontmatter!.noComments ? (
|
||||
<Suspense fallback={<Loading boxes={3} width={40} className="mx-auto my-8 block" />}>
|
||||
<Comments title={frontmatter!.title} />
|
||||
</Suspense>
|
||||
) : (
|
||||
<div className="text-foreground/85 text-center font-medium">Comments are disabled for this post.</div>
|
||||
)}
|
||||
<section id="comments" className="isolate mt-8 mb-10 min-h-36 w-full border-t-2 pt-8">
|
||||
<div className="mx-auto w-full max-w-3xl">
|
||||
<Suspense fallback={<CommentsSkeleton />}>
|
||||
<Comments slug={`${POSTS_DIR}/${frontmatter!.slug}`} closed={frontmatter!.noComments} />
|
||||
</Suspense>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
+10
-4
@@ -1,11 +1,12 @@
|
||||
import { env } from "@/lib/env";
|
||||
import { EyeIcon } from "lucide-react";
|
||||
import Link from "@/components/link";
|
||||
import Time from "@/components/time";
|
||||
import { getFrontMatter, getViews } from "@/lib/posts";
|
||||
import { getFrontMatter } from "@/lib/posts";
|
||||
import { createMetadata } from "@/lib/metadata";
|
||||
import { formatDate, formatDateISO } from "@/lib/date";
|
||||
import authorConfig from "@/lib/config/author";
|
||||
import { POSTS_DIR } from "@/lib/config/constants";
|
||||
import { getViews } from "@/lib/server/views";
|
||||
import type { ReactElement } from "react";
|
||||
import type { FrontMatter } from "@/lib/posts";
|
||||
|
||||
@@ -29,7 +30,7 @@ const Page = async () => {
|
||||
const year = new Date(post.date).getUTCFullYear();
|
||||
(postsByYear[year] || (postsByYear[year] = [])).push({
|
||||
...post,
|
||||
views: views[post.slug] || 0,
|
||||
views: views[`${POSTS_DIR}/${post.slug}`] || 0,
|
||||
});
|
||||
});
|
||||
|
||||
@@ -44,13 +45,18 @@ const Page = async () => {
|
||||
<ul className="space-y-4">
|
||||
{posts.map(({ slug, date, title, htmlTitle, views }) => (
|
||||
<li className="flex text-base leading-relaxed" key={slug}>
|
||||
<Time date={date} format="MMM d" className="text-muted-foreground w-18 shrink-0 md:w-22" />
|
||||
<span className="text-muted-foreground w-18 shrink-0 md:w-22">
|
||||
<time dateTime={formatDateISO(date)} title={formatDate(date, "MMM d, y, h:mm a O")}>
|
||||
{formatDate(date, "MMM d")}
|
||||
</time>
|
||||
</span>
|
||||
<div className="space-x-2.5">
|
||||
<Link
|
||||
dynamicOnHover
|
||||
href={`/${POSTS_DIR}/${slug}`}
|
||||
dangerouslySetInnerHTML={{ __html: htmlTitle || title }}
|
||||
/>
|
||||
|
||||
{views > 0 && (
|
||||
<span className="bg-muted text-muted-foreground inline-flex h-5 flex-nowrap items-center gap-1 rounded-md px-1.5 align-text-top text-xs font-semibold text-nowrap shadow select-none">
|
||||
<EyeIcon className="inline-block size-4 shrink-0" />
|
||||
|
||||
+2
-19
@@ -1,6 +1,6 @@
|
||||
import PageTitle from "@/components/layout/page-title";
|
||||
import Marquee from "@/components/marquee";
|
||||
import Comments from "@/components/comments";
|
||||
import { Win95Icon } from "@/components/icons";
|
||||
import { createMetadata } from "@/lib/metadata";
|
||||
import { ComicNeue } from "@/lib/fonts";
|
||||
|
||||
@@ -49,19 +49,6 @@ export const PageStyles = () => (
|
||||
</style>
|
||||
);
|
||||
|
||||
export const WindowsLogo = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0"
|
||||
viewBox="0 0 24 24"
|
||||
className="inline size-4 align-text-top"
|
||||
>
|
||||
<path d="M5.712 1.596l-.756.068-.238.55.734-.017zm1.39.927l-.978.137-.326.807.96-.12.345-.824zM4.89 3.535l-.72.05-.24.567.721-.017zm3.724.309l-1.287.068-.394.96 1.27-.052zm1.87.566l-1.579.069-.566 1.357 1.596-.088.548-1.338zm-4.188.037l-.977.153-.343.806.976-.12zm6.144.668l-1.87.135-.637 1.527 1.87-.154zm2.925.219c-.11 0-.222 0-.334.002l-.767 1.85c1.394-.03 2.52.089 3.373.38l-1.748 4.201c-.955-.304-2.082-.444-3.36-.394l-.54 1.305a8.762 8.762 0 0 1 3.365.396l-1.663 4.014c-1.257-.27-2.382-.395-3.387-.344l-.782 1.887c3.363-.446 6.348.822 9.009 3.773L24 9.23c-2.325-2.575-5.2-3.88-8.637-3.896zm-.644.002l-2.024.12-.687 1.68 2.025-.19zm-10.603.05l-.719.036-.224.566h.703l.24-.601zm3.69.397l-1.287.069-.395.959 1.27-.05zM5.54 6.3l-.994.154-.344.807.98-.121zm4.137.066l-1.58.069L7.53 7.77l1.596-.085.55-1.32zm1.955.688l-1.87.135-.636 1.527 1.887-.154zm2.282.19l-2.01.136-.7 1.682 2.04-.19.67-1.63zm-10.57.066l-.739.035-.238.564h.72l.257-.6zm3.705.293l-1.303.085-.394.96 1.287-.034zm11.839.255a6.718 6.718 0 0 1 2.777 1.717l-1.75 4.237c-.617-.584-1.15-.961-1.611-1.149l-1.201-.498zM4.733 8.22l-.976.154-.344.807.961-.12.36-.841zm4.186 0l-1.594.052-.549 1.354L8.37 9.54zm1.957.668L8.99 9.04l-.619 1.508 1.87-.135.636-1.527zm2.247.275l-2.007.12-.703 1.665 2.042-.156zM2.52 9.267l-.718.033-.24.549.718-.016zm3.725.273l-1.289.07-.41.96 1.287-.03.412-1zm1.87.6l-1.596.05-.55 1.356 1.598-.084.547-1.322zm-4.186.037l-.979.136-.324.805.96-.119zm6.14.633l-1.87.154-.653 1.527 1.906-.154zm2.267.275l-2.026.12-.686 1.663 2.025-.172zm-10.569.031l-.739.037-.238.565.72-.016zm3.673.362l-1.289.068-.41.978 1.305-.05zm-2.285.533l-.976.154-.326.805.96-.12.342-.84zm4.153.07l-1.596.066-.565 1.356 1.612-.084zm1.957.666l-1.889.154-.617 1.526 1.886-.15zm2.28.223l-2.025.12-.685 1.665 2.041-.172.67-1.613zm-10.584.05l-.738.053L0 13.64l.72-.02.24-.6zm3.705.31l-1.285.07-.395.976 1.287-.05.393-.997zm11.923.07c1.08.29 2.024.821 2.814 1.613l-1.715 4.183c-.892-.754-1.82-1.32-2.814-1.664l1.715-4.133zm-10.036.515L4.956 14l-.549 1.32 1.578-.066.567-1.338zm-4.184.014l-.996.156-.309.79.961-.106zm6.14.67l-1.904.154-.617 1.527 1.89-.154.632-1.527zm2.231.324l-2.025.123-.686 1.682 2.026-.174zm-6.863.328l-1.3.068-.397.98 1.285-.054zm1.871.584l-1.578.068-.566 1.334 1.595-.064zm1.953.701l-1.867.137-.635 1.51 1.87-.137zm2.23.31l-2.005.122-.703 1.68 2.04-.19.67-1.61z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
<PageStyles />
|
||||
|
||||
<PageTitle canonical="/previously" className="font-semibold">
|
||||
@@ -75,7 +62,7 @@ _Previously on the [Cringey Chronicles™](https://web.archive.org/web/20010
|
||||
|
||||
<WarningMarquee />
|
||||
|
||||
[<WindowsLogo /> Click here for the _full_ experience (at your own risk).](https://y2k.pages.dev)
|
||||
[<Win95Icon className="inline size-4 align-text-top" /> Click here for the _full_ experience (at your own risk).](https://y2k.pages.dev)
|
||||
|
||||
<iframe
|
||||
src="https://jakejarvis.github.io/my-first-website/"
|
||||
@@ -149,7 +136,3 @@ _[April 2018](https://hungry-mayer-40e790.netlify.app/) ([view source](https://g
|
||||
|
||||
|
||||
_[March 2020](https://quiet-truffle-92842d.netlify.app/) ([view source](https://github.com/jakejarvis/jarv.is-hugo))_
|
||||
|
||||
---
|
||||
|
||||
<Comments title="Previously on..." />
|
||||
|
||||
@@ -21,12 +21,16 @@ For a likely excessive level of privacy and security, this website is also mirro
|
||||
|
||||
## Analytics
|
||||
|
||||
A very simple hit counter on each blog post tallies an aggregate number of pageviews (i.e. `hits = hits + 1`) in a [Upstash Redis](https://upstash.com/) database. Individual views and identifying (or non-identifying) details are **never stored or logged**.
|
||||
A very simple hit counter on each blog post tallies an aggregate number of pageviews (i.e. `hits = hits + 1`) in a [Neon Postgres](https://neon.tech/) database. Individual views and identifying (or non-identifying) details are **never stored or logged**.
|
||||
|
||||
The [server component](https://github.com/jakejarvis/jarv.is/blob/main/app/notes/%5Bslug%5D/counter.tsx) and [API endpoint](https://github.com/jakejarvis/jarv.is/blob/main/app/api/hits/route.ts) are open source, and [snapshots of the database](https://github.com/jakejarvis/website-stats) are public.
|
||||
The [server component](https://github.com/jakejarvis/jarv.is/blob/main/components/view-counter.tsx) and [API endpoint](https://github.com/jakejarvis/jarv.is/blob/main/app/api/hits/route.ts) are open source, and [snapshots of the database](https://github.com/jakejarvis/website-stats) are public.
|
||||
|
||||
[**Vercel Analytics**](https://vercel.com/docs/analytics) is also used to gain insights into referrers, search terms, etc. [without collecting anything identifiable](https://vercel.com/docs/analytics/privacy-policy) about you.
|
||||
|
||||
## Comments
|
||||
|
||||
Post comments are similarly stored in a Postgres database. Authentication is provided via GitHub, from which the account's username, email, and avatar URL are stored.
|
||||
|
||||
## Third-Party Content
|
||||
|
||||
Occasionally, embedded content from third-party services is included in posts, and some may contain tracking code that is outside of my control. Please refer to their privacy policies for more information:
|
||||
|
||||
@@ -1,144 +0,0 @@
|
||||
// https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#keeping-server-only-code-out-of-the-client-environment
|
||||
import "server-only";
|
||||
|
||||
import { env } from "@/lib/env";
|
||||
import * as cheerio from "cheerio";
|
||||
import { graphql } from "@octokit/graphql";
|
||||
import type { Repository, User } from "@octokit/graphql-schema";
|
||||
|
||||
export const getContributions = async (): Promise<
|
||||
Array<{
|
||||
date: string;
|
||||
count: number;
|
||||
level: number;
|
||||
}>
|
||||
> => {
|
||||
// thanks @grubersjoe! :) https://github.com/grubersjoe/github-contributions-api/blob/main/src/scrape.ts
|
||||
try {
|
||||
const response = await fetch(`https://github.com/users/${env.NEXT_PUBLIC_GITHUB_USERNAME}/contributions`, {
|
||||
headers: {
|
||||
referer: `https://github.com/${env.NEXT_PUBLIC_GITHUB_USERNAME}`,
|
||||
"x-requested-with": "XMLHttpRequest",
|
||||
},
|
||||
cache: "force-cache",
|
||||
next: {
|
||||
revalidate: 3600, // 1 hour
|
||||
tags: ["github-contributions"],
|
||||
},
|
||||
});
|
||||
|
||||
const $ = cheerio.load(await response.text());
|
||||
|
||||
const days = $(".js-calendar-graph-table .ContributionCalendar-day")
|
||||
.get()
|
||||
.sort((a, b) => {
|
||||
const dateA = a.attribs["data-date"] ?? "";
|
||||
const dateB = b.attribs["data-date"] ?? "";
|
||||
|
||||
return dateA.localeCompare(dateB, "en");
|
||||
});
|
||||
|
||||
const dayTooltips = $(".js-calendar-graph tool-tip")
|
||||
.toArray()
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
.reduce<Record<string, any>>((map, elem) => {
|
||||
map[elem.attribs["for"]] = elem;
|
||||
return map;
|
||||
}, {});
|
||||
|
||||
return days.map((day) => {
|
||||
const attr = {
|
||||
id: day.attribs["id"],
|
||||
date: day.attribs["data-date"],
|
||||
level: day.attribs["data-level"],
|
||||
};
|
||||
|
||||
let count = 0;
|
||||
if (dayTooltips[attr.id]) {
|
||||
const text = dayTooltips[attr.id].firstChild;
|
||||
if (text) {
|
||||
const countMatch = text.data.trim().match(/^\d+/);
|
||||
if (countMatch) {
|
||||
count = parseInt(countMatch[0]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const level = parseInt(attr.level);
|
||||
|
||||
return {
|
||||
date: attr.date,
|
||||
count,
|
||||
level,
|
||||
};
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("[/projects] Failed to fetch contributions:", error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const getRepos = async (): Promise<Repository[] | undefined> => {
|
||||
try {
|
||||
// https://docs.github.com/en/graphql/reference/objects#repository
|
||||
const { user } = await graphql<{ user: User }>(
|
||||
`
|
||||
query ($username: String!, $sort: RepositoryOrderField!, $limit: Int) {
|
||||
user(login: $username) {
|
||||
repositories(
|
||||
first: $limit
|
||||
isLocked: false
|
||||
isFork: false
|
||||
ownerAffiliations: OWNER
|
||||
privacy: PUBLIC
|
||||
orderBy: { field: $sort, direction: DESC }
|
||||
) {
|
||||
edges {
|
||||
node {
|
||||
name
|
||||
url
|
||||
description
|
||||
pushedAt
|
||||
stargazerCount
|
||||
forkCount
|
||||
primaryLanguage {
|
||||
name
|
||||
color
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
{
|
||||
username: env.NEXT_PUBLIC_GITHUB_USERNAME,
|
||||
sort: "STARGAZERS",
|
||||
limit: 12,
|
||||
headers: {
|
||||
accept: "application/vnd.github.v3+json",
|
||||
authorization: `token ${env.GITHUB_TOKEN}`,
|
||||
},
|
||||
request: {
|
||||
// override fetch() to use next's extension to cache the response
|
||||
// https://nextjs.org/docs/app/api-reference/functions/fetch#fetchurl-options
|
||||
fetch: (url: string | URL | Request, options?: RequestInit) => {
|
||||
return fetch(url, {
|
||||
...options,
|
||||
cache: "force-cache",
|
||||
next: {
|
||||
revalidate: 3600, // 1 hour
|
||||
tags: ["github-repos"],
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
return user.repositories.edges?.map((edge) => edge!.node as Repository);
|
||||
} catch (error) {
|
||||
console.error("[/projects] Failed to fetch repositories:", error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
+3
-10
@@ -6,9 +6,10 @@ import PageTitle from "@/components/layout/page-title";
|
||||
import Link from "@/components/link";
|
||||
import RelativeTime from "@/components/relative-time";
|
||||
import ActivityCalendar from "@/components/activity-calendar";
|
||||
import { GitHubIcon } from "@/components/icons";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { createMetadata } from "@/lib/metadata";
|
||||
import { getContributions, getRepos } from "./api";
|
||||
import { getContributions, getRepos } from "@/lib/server/github";
|
||||
|
||||
export const metadata = createMetadata({
|
||||
title: "Projects",
|
||||
@@ -111,15 +112,7 @@ const Page = async () => {
|
||||
|
||||
<p className="mt-6 mb-0 text-center text-base font-medium">
|
||||
<Link href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_USERNAME}`} className="hover:no-underline">
|
||||
View more on{" "}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
className="fill-foreground/80 mx-0.5 inline size-5 align-text-top"
|
||||
>
|
||||
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
|
||||
</svg>{" "}
|
||||
GitHub.
|
||||
View more on <GitHubIcon className="fill-foreground/80 mx-0.5 inline size-5 align-text-top" /> GitHub.
|
||||
</Link>
|
||||
</p>
|
||||
</>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import PageTitle from "@/components/layout/page-title";
|
||||
import Comments from "@/components/comments";
|
||||
import { createMetadata } from "@/lib/metadata";
|
||||
|
||||
export const metadata = createMetadata({
|
||||
@@ -165,7 +164,3 @@ Other geeky stuff:
|
||||
- 2x [**ecobee3 lite**](https://www.ecobee.com/en-us/smart-thermostats/smart-wifi-thermostat/)
|
||||
- 2x [**Sonos One**](https://www.sonos.com/en-us/shop/one.html) (with Alexa turned off...hopefully? 🤫)
|
||||
- 2x [**Apple TV 4K** (2021)](https://www.apple.com/apple-tv-4k/)
|
||||
|
||||
---
|
||||
|
||||
<Comments title="/uses" />
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import PageTitle from "@/components/layout/page-title";
|
||||
import Comments from "@/components/comments";
|
||||
import { createMetadata } from "@/lib/metadata";
|
||||
|
||||
import backgroundImg from "./sundar.jpg";
|
||||
@@ -72,7 +71,3 @@ A little-known monopolistic internet conglomorate simply unleashed [multiple](ht
|
||||
- **Kaspersky:** [Beware the .zip and .mov domains!](https://usa.kaspersky.com/blog/zip-mov-domain-extension-confusion/28351/)
|
||||
- **Palo Alto Networks:** [New Top Level Domains .zip and .mov open the door for new attacks](https://knowledgebase.paloaltonetworks.com/KCSArticleDetail?id=kA14u000000g1wOCAQ)
|
||||
- **Google, twenty years ago:** ["Don't be evil"](https://web.archive.org/web/20050204181615/http://investor.google.com/conduct.html)
|
||||
|
||||
---
|
||||
|
||||
<Comments title="fuckyougoogle.zip" />
|
||||
|
||||
Reference in New Issue
Block a user