offload videos to vercel blob

2025-10-18 10:04:25 -04:00 · 2025-04-23 09:34:28 -04:00
parent 6c3cd0afe9
commit 430789c25d
42 changed files with 189 additions and 551 deletions
--- a/app/birthday/birthday.mp4
+++ b/app/birthday/birthday.mp4
--- a/app/birthday/birthday.webm
+++ b/app/birthday/birthday.webm
--- a/app/birthday/page.tsx
+++ b/app/birthday/page.tsx
@@ -5,8 +5,6 @@ import Video from "../../components/Video";
 import { createMetadata } from "../../lib/helpers/metadata";
 import type { VideoObject } from "schema-dts";

-import mp4 from "./birthday.mp4";
-import webm from "./birthday.webm";
 import thumbnail from "./thumbnail.png";

 export const metadata = createMetadata({
@@ -16,7 +14,7 @@ export const metadata = createMetadata({
  openGraph: {
    videos: [
      {
-        url: `${env.NEXT_PUBLIC_BASE_URL}${webm}`,
+        url: "https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/birthday-pavk1LBK4H6xF8ZWeR0oTcaabGuQ8T.webm",
        type: "video/webm",
      },
    ],
@@ -32,7 +30,8 @@ const Page = () => {
          "@type": "VideoObject",
          name: metadata.title as string,
          description: metadata.description as string,
-          contentUrl: `${env.NEXT_PUBLIC_BASE_URL}${webm}`,
+          contentUrl:
+            "https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/birthday-pavk1LBK4H6xF8ZWeR0oTcaabGuQ8T.webm",
          thumbnailUrl: `${env.NEXT_PUBLIC_BASE_URL}${thumbnail.src}`,
          embedUrl: `${env.NEXT_PUBLIC_BASE_URL}/birthday`,
          uploadDate: "1996-02-06T00:00:00Z",
@@ -42,7 +41,13 @@ const Page = () => {

      <PageTitle canonical="/birthday">1996.mov</PageTitle>

-      <Video src={[webm, mp4]} poster={thumbnail.src} />
+      <Video
+        src={[
+          "https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/birthday-pavk1LBK4H6xF8ZWeR0oTcaabGuQ8T.webm",
+          "https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/birthday-EkbYbrKY8reheQ4UPcP22ipzpMZ2MC.mp4",
+        ]}
+        poster={thumbnail.src}
+      />
    </>
  );
 };
--- a/app/cli/opengraph-image.png
+++ b/app/cli/opengraph-image.png
--- a/app/hillary/convention.mp4
+++ b/app/hillary/convention.mp4
--- a/app/hillary/convention.webm
+++ b/app/hillary/convention.webm
--- a/app/hillary/page.tsx
+++ b/app/hillary/page.tsx
@@ -6,9 +6,6 @@ import Video from "../../components/Video";
 import { createMetadata } from "../../lib/helpers/metadata";
 import type { VideoObject } from "schema-dts";

-import webm from "./convention.webm";
-import mp4 from "./convention.mp4";
-import subtitles from "./subs.en.vtt";
 import thumbnail from "./thumbnail.png";

 export const metadata = createMetadata({
@@ -18,7 +15,7 @@ export const metadata = createMetadata({
  openGraph: {
    videos: [
      {
-        url: `${env.NEXT_PUBLIC_BASE_URL}${webm}`,
+        url: "https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/convention-ZTUBLwMcmOE8EJ4tNAhpCli4NAHKcG.webm",
        type: "video/webm",
      },
    ],
@@ -34,7 +31,8 @@ const Page = () => {
          "@type": "VideoObject",
          name: metadata.title as string,
          description: metadata.description as string,
-          contentUrl: `${env.NEXT_PUBLIC_BASE_URL}${webm}`,
+          contentUrl:
+            "https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/convention-ZTUBLwMcmOE8EJ4tNAhpCli4NAHKcG.webm",
          thumbnailUrl: `${env.NEXT_PUBLIC_BASE_URL}${thumbnail.src}`,
          embedUrl: `${env.NEXT_PUBLIC_BASE_URL}/hillary`,
          uploadDate: "2016-07-25T00:00:00Z",
@@ -44,7 +42,14 @@ const Page = () => {

      <PageTitle canonical="/hillary">HRC.mov</PageTitle>

-      <Video src={[webm, mp4, subtitles]} poster={thumbnail.src} />
+      <Video
+        src={[
+          "https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/convention-ZTUBLwMcmOE8EJ4tNAhpCli4NAHKcG.webm",
+          "https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/convention-T6klrrArGL0IO4QPaloIiIH164UqUC.mp4",
+          "https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/convention.en-uHnecgVCrT9xA8EkzdEaeIwB0rHFC9.vtt",
+        ]}
+        poster={thumbnail.src}
+      />

      <p
        style={{
--- a/app/hillary/subs.en.vtt
+++ b/app/hillary/subs.en.vtt
@@ -1,108 +0,0 @@
-WEBVTT
-Kind: captions
-Language: en
-
-00:00:00.030 --> 00:00:03.210
-All right, well let's listen
-here to the video at the Democratic
-
-00:00:03.210 --> 00:00:04.880
-National Convention on this issue.
-
-00:00:04.880 --> 00:00:08.340
-You know, when I came here to New Hampshire
-
-00:00:08.340 --> 00:00:14.269
-the first time in this campaign and
-heard about the heroin epidemic
-
-00:00:14.269 --> 00:00:16.660
-The growing drug problem in our area...
-
-00:00:16.780 --> 00:00:19.604
-We're all losing fathers, brothers, sons, mothers...
-
-00:00:19.604 --> 00:00:22.040
-The numbers of people who are being affected
-
-00:00:22.040 --> 00:00:27.000
-If you have been impacted by your own or
-someone else's use of substances, would
-
-00:00:27.000 --> 00:00:28.510
-you just raise your hand?
-
-00:00:28.510 --> 00:00:31.470
-I didn't even know what was wrong with me until I
-
-00:00:31.470 --> 00:00:35.400
-found out that I was I was an addict.
-
-00:00:35.400 --> 00:00:38.480
-This problem touches everybody...
-
-00:00:38.480 --> 00:00:41.484
-My children suffered, my family suffered...
-
-00:00:41.484 --> 00:00:44.280
-Meeting grandmothers raising their grandchildren...
-
-00:00:44.280 --> 00:00:48.800
-All of my friends are raising
-their grandchildren because of addiction
-
-00:00:48.800 --> 00:00:53.700
-I think you're very brave and
-very loving to take on this responsibility.
-
-00:00:53.700 --> 00:00:56.720
-It is plaguing families.
-I don't want to
-
-00:00:56.730 --> 00:01:00.180
-go to more funerals. I'm going to one this weekend.
-I didn't know if I wanted
-
-00:01:00.180 --> 00:01:04.980
-to do better. Addiction had full control
-over my heart and soul.
-
-00:01:04.980 --> 00:01:10.880
-I wouldn't have necessarily known that if I hadn't been
-sitting in a little cafe in Keene
-
-00:01:10.880 --> 00:01:16.140
-listening to people tell me about what
-was breaking their hearts and what they
-
-00:01:16.140 --> 00:01:19.660
-wanted their president to know.
-
-00:01:19.660 --> 00:01:21.299
-We need the voice of those who are using, that is
-
-00:01:21.299 --> 00:01:24.480
-the way in which we can make an impact
-on this disease.
-
-00:01:24.480 --> 00:01:26.860
-We can't walk away from these stories.
-
-00:01:26.860 --> 00:01:29.900
-These are our children, these are our friends, our neighbors,
-
-00:01:29.900 --> 00:01:34.160
-our loved ones. This is not something we can
-just brush under the rug and wish it would
-
-00:01:34.160 --> 00:01:39.180
-go away. We need to drag it out of the
-shadows, we need to hold it up to the light
-
-00:01:39.180 --> 00:01:41.740
-Everybody should feel that they are
-
-00:01:41.740 --> 00:01:50.960
-valued, they are cared about, and they
-have a president who sees them
-
--- a/app/leo/leo.mp4
+++ b/app/leo/leo.mp4
--- a/app/leo/leo.webm
+++ b/app/leo/leo.webm
--- a/app/leo/page.tsx
+++ b/app/leo/page.tsx
@@ -6,9 +6,6 @@ import Video from "../../components/Video";
 import { createMetadata } from "../../lib/helpers/metadata";
 import type { VideoObject } from "schema-dts";

-import mp4 from "./leo.mp4";
-import webm from "./leo.webm";
-import subtitles from "./subs.en.vtt";
 import thumbnail from "./thumbnail.png";

 export const metadata = createMetadata({
@@ -18,7 +15,7 @@ export const metadata = createMetadata({
  openGraph: {
    videos: [
      {
-        url: `${env.NEXT_PUBLIC_BASE_URL}${webm}`,
+        url: "https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/leo-uoCXHS9gViyRnQhr8CEGXFvj4VGh5Y.webm",
        type: "video/webm",
      },
    ],
@@ -34,7 +31,7 @@ const Page = () => {
          "@type": "VideoObject",
          name: metadata.title as string,
          description: metadata.description as string,
-          contentUrl: `${env.NEXT_PUBLIC_BASE_URL}${webm}`,
+          contentUrl: "https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/leo-uoCXHS9gViyRnQhr8CEGXFvj4VGh5Y.webm",
          thumbnailUrl: `${env.NEXT_PUBLIC_BASE_URL}${thumbnail.src}`,
          embedUrl: `${env.NEXT_PUBLIC_BASE_URL}/leo`,
          uploadDate: "2007-05-10T00:00:00Z",
@@ -44,7 +41,14 @@ const Page = () => {

      <PageTitle canonical="/leo">TheLab.mov</PageTitle>

-      <Video src={[webm, mp4, subtitles]} poster={thumbnail.src} />
+      <Video
+        src={[
+          "https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/leo-uoCXHS9gViyRnQhr8CEGXFvj4VGh5Y.webm",
+          "https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/leo-Blp1bsf872vuY05LuSw7fjZBHURWT1.mp4",
+          "https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/leo.en-TsoyI7XMA10Uaj8EFZV1bQ65At35gz.vtt",
+        ]}
+        poster={thumbnail.src}
+      />

      <p
        style={{
--- a/app/leo/subs.en.vtt
+++ b/app/leo/subs.en.vtt
@@ -1,111 +0,0 @@
-WEBVTT
-
-00:00:00.000 --> 00:00:05.029
-["The Lab" Theme Music]
-
-00:00:05.029 --> 00:00:08.760
-Welcome back to "The Lab with Leo," I'm Kate Abraham and now it's time for our
-
-00:00:08.760 --> 00:00:13.000
-Facebook app of the day. And in honor of
-the lovely Amber – wasn't it great to see Amber?
-
-00:00:13.040 --> 00:00:16.470
-Oh, it was so nice to see her.
-She's looking so tan!
-
-00:00:16.470 --> 00:00:21.140
-Toronto weather.
-Yeah, really? I think she was at Prince Edward Island for a few days
-
-00:00:21.140 --> 00:00:26.380
-for Canada Day.
-So she's out there like this, tanning in the ocean. Good for her.
-
-00:00:26.380 --> 00:00:28.060
-She knows how to enjoy herself.
-[laughs]
-
-00:00:28.060 --> 00:00:30.740
-So in honor of Amber, our Facebook app of the day is
-
-00:00:30.740 --> 00:00:35.360
-Powncer, or Poncer or Punser
-
-00:00:35.360 --> 00:00:39.000
-However you want to say it, I say Powncer.
-So there's your Pownce page.
-
-00:00:39.000 --> 00:00:44.520
-So what you do is, basically, it literally updates your most recent post on Pownce.
-So literally I've just put here
-
-00:00:44.520 --> 00:00:49.200
-"Playing with Pownce," then if I just post this, and what will happen is it'll automatically
-
-00:00:49.200 --> 00:00:52.460
-I bet you've done this in advance, it'll
-automatically go through to my actual
-
-00:00:52.460 --> 00:00:56.420
-site on Facebook and as you can see, you can see exactly what I'm doing
-
-00:00:56.420 --> 00:00:59.000
-And then can they click that and takes
-it to your Pownce page?
-Yeah, then you can
-
-00:00:59.000 --> 00:01:02.860
-reply to me. Oh that's neat!
-Then what'll happen, you can basically send me a reply.
-
-00:01:02.860 --> 00:01:06.460
-You know who wrote that? I don't know.
-Jake Jarvis wrote that.
-
-00:01:06.479 --> 00:01:10.560
-And I know who Jake Jarvis is, he's on my
-Facebook friends list.
-
-00:01:10.560 --> 00:01:14.250
-He's a young guy, I think he's a high school kid, the son of Jeff Jarvis, who's
-
-00:01:14.250 --> 00:01:18.450
-a very well known media critic.
-These kids freak me out. Isn't it neat?
-
-00:01:18.450 --> 00:01:22.590
-Jake's written some great applications
-How old is he?
-I don't know, I think 16 or 17.
-
-00:01:22.590 --> 00:01:26.100
-That scares me.
-He's written a lot, he's one of the best Facebook developers out there.
-
-00:01:26.100 --> 00:01:29.310
-Did a nice job with that.
-That's fantastic.
-Isn't that great? I love it, that's so good.
-
-00:01:29.310 --> 00:01:31.860
-But for more details, obviously Facebook
-apps
-
-00:01:31.860 --> 00:01:37.080
-I said facebook.com/apps.
-There's lots of them, there's thousands.
-So many on there.
-
-00:01:37.080 --> 00:01:41.100
-There's a lot of bad ones but some really good ones.
-Well that's what you're here for, to tell us which ones are good.
-
-00:01:41.100 --> 00:01:44.540
-Exactly, this was a good one, I like it.
-She installs them all so that you can
-
-00:01:44.540 --> 00:01:48.220
-tell, you got like a page this long!
-You just keep scrolling, scrolling, scrolling...
-[laughs]
--- a/app/not-found.mp4
+++ b/app/not-found.mp4
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -2,8 +2,6 @@ import Video from "../components/Video";
 import Link from "../components/Link";
 import type { Metadata } from "next";

-import notFoundVideo from "./not-found.mp4";
-
 export const metadata: Metadata = {
  title: "Page Not Found",
  description: null,
@@ -16,7 +14,11 @@ export const metadata: Metadata = {
 const Page = () => {
  return (
    <>
-      <Video src={notFoundVideo} autoPlay style={{ maxWidth: 480, aspectRatio: "16/11" }} />
+      <Video
+        src="https://ijyxfbpcm3itvdly.public.blob.vercel-storage.com/not-found-SAtLyNyc7gVhveYxr6o1ITd9CSXo5X.mp4"
+        autoPlay
+        style={{ maxWidth: 480, aspectRatio: "16/11" }}
+      />

      <div style={{ textAlign: "center", marginTop: "1.5em" }}>
        <h1 style={{ margin: "0.5em 0", fontSize: "2.2em", fontWeight: 500, lineHeight: 1 }}>Page Not Found</h1>
--- a/app/opengraph-image.jpg
+++ b/app/opengraph-image.jpg
--- a/app/previously/page.mdx
+++ b/app/previously/page.mdx
@@ -85,7 +85,7 @@ _Previously on the [Cringey Chronicles&trade;](https://web.archive.org/web/20010
 <iframe
  src="https://jakejarvis.github.io/my-first-website/"
  title="My Terrible, Horrible, No Good, Very Bad First Website"
-  style={{ height: "500px", width: "100%", marginBottom: "-0.4em" }}
+  style={{ height: "500px", width: "100%", border: "1px solid var(--colors-kinda-light)", marginBottom: "-0.4em" }}
 />
 _[November 2001](https://jakejarvis.github.io/my-first-website/) ([view
 source](https://github.com/jakejarvis/my-first-website))_
--- a/app/projects/github.ts
+++ b/app/projects/github.ts
@@ -2,8 +2,8 @@
 import "server-only";

 import { env } from "../../lib/env";
-import { graphql } from "@octokit/graphql";
 import * as cheerio from "cheerio";
+import { graphql } from "@octokit/graphql";
 import type { Repository, User } from "@octokit/graphql-schema";

 export const getContributions = async (): Promise<
--- a/app/sitemap.ts
+++ b/app/sitemap.ts
@@ -10,8 +10,8 @@ const excludedRoutes = [
  // homepage is already included manually
  "./",
  // other excluded pages
-  "./license",
-  "./privacy",
+  // "./license",
+  // "./privacy",
 ];

 const sitemap = async (): Promise<MetadataRoute.Sitemap> => {