jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-13 23:45:30 -04:00
Code Issues Activity

next-mdx-remote v4 (#737)

Browse Source
This commit is contained in:
Jake Jarvis
2022-01-18 09:25:09 -05:00
committed by GitHub
parent 2ef5d06c38
commit a406010bd2
110 changed files with 1009 additions and 1490 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/_app.tsx
View File

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
import { ThemeProvider } from "next-themes";
import { DefaultSeo, SocialProfileJsonLd } from "next-seo";
import * as Fathom from "fathom-client";
import Layout from "../components/Layout";
import Layout from "../components/Layout/Layout";
import * as config from "../lib/config";
import type { AppProps } from "next/app";

27
pages/birthday.tsx
View File

@@ -1,8 +1,8 @@
import { NextSeo } from "next-seo";
import Content from "../components/Content";
import Title from "../components/title/Title";
import Video from "../components/media/Video";
import { TapeIcon } from "../components/icons";
import Content from "../components/Content/Content";
import Title from "../components/Title/Title";
import Video from "../components/Video/Video";
import { TapeIcon } from "../components/Icons";
import thumbnail from "../public/static/images/birthday/thumb.png";
@@ -22,22 +22,9 @@ const Birthday = () => (
<Content>
<Video
url={[
{ src: "/static/images/birthday/birthday.webm", type: "video/webm" },
{ src: "/static/images/birthday/birthday.mp4", type: "video/mp4" },
]}
config={{
// @ts-ignore
file: {
attributes: {
poster: thumbnail.src,
controlsList: "nodownload",
preload: "metadata",
autoPlay: false,
},
},
}}
controls={true}
webm="/static/images/birthday/birthday.webm"
mp4="/static/images/birthday/birthday.mp4"
thumbnail={thumbnail.src}
/>
</Content>
</>

6
pages/cli.tsx
View File

@@ -1,8 +1,8 @@
import Image from "next/image";
import { NextSeo } from "next-seo";
import Content from "../components/Content";
import Title from "../components/title/Title";
import { BotIcon } from "../components/icons";
import Content from "../components/Content/Content";
import Title from "../components/Title/Title";
import { BotIcon } from "../components/Icons";
import cliImg from "../public/static/images/cli/screenshot.png";

8
pages/contact.tsx
View File

@@ -1,8 +1,8 @@
import { NextSeo } from "next-seo";
import Title from "../components/title/Title";
import ContactForm from "../components/contact/ContactForm";
import { MailIcon, LockIcon } from "../components/icons";
import Content from "../components/Content";
import Title from "../components/Title/Title";
import ContactForm from "../components/ContactForm/ContactForm";
import { MailIcon, LockIcon } from "../components/Icons";
import Content from "../components/Content/Content";
const Contact = () => (
<>

35
pages/hillary.tsx
View File

@@ -1,7 +1,7 @@
import { NextSeo } from "next-seo";
import Content from "../components/Content";
import Title from "../components/title/Title";
import Video from "../components/media/Video";
import Content from "../components/Content/Content";
import Title from "../components/Title/Title";
import Video from "../components/Video/Video";
import thumbnail from "../public/static/images/hillary/thumb.png";
@@ -18,31 +18,10 @@ const Hillary = () => (
<Title>My Brief Apperance in Hillary Clinton's DNC Video</Title>
<Content>
<Video
url={[
{ src: "/static/images/hillary/convention-720p.webm", type: "video/webm" },
{ src: "/static/images/hillary/convention-720p.mp4", type: "video/mp4" },
]}
config={{
// @ts-ignore
file: {
attributes: {
poster: thumbnail.src,
controlsList: "nodownload",
preload: "metadata",
autoPlay: false,
},
tracks: [
{
kind: "subtitles",
src: "/static/images/hillary/subs.en.vtt",
srcLang: "en",
label: "English",
default: true,
},
],
},
}}
controls={true}
webm="/static/images/hillary/convention-720p.webm"
mp4="/static/images/hillary/convention-720p.mp4"
thumbnail={thumbnail.src}
subs="/static/images/hillary/subs.en.vtt"
/>
<p className="copyright">

112
pages/index.tsx
View File

@@ -1,5 +1,5 @@
import ColorLink from "../components/home/ColorLink";
import { WaveIcon, LockIcon } from "../components/icons";
import ColorfulLink from "../components/ColorfulLink/ColorfulLink";
import { WaveIcon, LockIcon } from "../components/Icons";
const Index = () => (
<>
@@ -12,7 +12,7 @@ const Index = () => (
<h2>
I'm a frontend web developer based in{" "}
<ColorLink
<ColorfulLink
href="https://www.youtube-nocookie.com/embed/rLwbzGyC6t4?hl=en&amp;fs=1&amp;showinfo=1&amp;rel=0&amp;iv_load_policy=3"
title='"Boston Accent Trailer - Late Night with Seth Meyers" on YouTube'
lightColor="#fb4d42"
@@ -20,13 +20,13 @@ const Index = () => (
external
>
Boston
</ColorLink>
</ColorfulLink>
.
</h2>
<p>
I specialize in{" "}
<ColorLink
<ColorfulLink
href="https://stackoverflow.blog/2018/01/11/brutal-lifecycle-javascript-frameworks/"
title='"The Brutal Lifecycle of JavaScript Frameworks" by Ian Allen'
lightColor="#1091b3"
@@ -34,9 +34,9 @@ const Index = () => (
external
>
modern JS frameworks
</ColorLink>{" "}
</ColorfulLink>{" "}
and{" "}
<ColorLink
<ColorfulLink
href="http://vanilla-js.com/"
title="The best JS framework in the world by Eric Wastl"
lightColor="#f48024"
@@ -44,9 +44,9 @@ const Index = () => (
external
>
vanilla JavaScript
</ColorLink>{" "}
</ColorfulLink>{" "}
to make nifty{" "}
<ColorLink
<ColorfulLink
href="https://jamstack.wtf/"
title="WTF is JAMstack?"
lightColor="#04a699"
@@ -54,9 +54,9 @@ const Index = () => (
external
>
JAMstack sites
</ColorLink>{" "}
</ColorfulLink>{" "}
with dynamic{" "}
<ColorLink
<ColorfulLink
href="https://nodejs.org/en/"
title="Node.js Official Website"
lightColor="#6fbc4e"
@@ -64,9 +64,9 @@ const Index = () => (
external
>
Node.js
</ColorLink>{" "}
</ColorfulLink>{" "}
services. But I'm fluent in non-buzzwords like{" "}
<ColorLink
<ColorfulLink
href="https://stitcher.io/blog/php-in-2020"
title='"PHP in 2020" by Brent Roose'
lightColor="#8892bf"
@@ -74,9 +74,9 @@ const Index = () => (
external
>
PHP
</ColorLink>
</ColorfulLink>
,{" "}
<ColorLink
<ColorfulLink
href="https://www.ruby-lang.org/en/"
title="Ruby Official Website"
lightColor="#d34135"
@@ -84,9 +84,9 @@ const Index = () => (
external
>
Ruby
</ColorLink>
</ColorfulLink>
, and{" "}
<ColorLink
<ColorfulLink
href="https://golang.org/"
title="Golang Official Website"
lightColor="#00acd7"
@@ -94,13 +94,13 @@ const Index = () => (
external
>
Go
</ColorLink>{" "}
</ColorfulLink>{" "}
too.
</p>
<p>
Whenever possible, I also apply my experience in{" "}
<ColorLink
<ColorfulLink
href="https://github.com/jakejarvis/awesome-shodan-queries"
title="jakejarvis/awesome-shodan-queries on GitHub"
lightColor="#00b81a"
@@ -108,9 +108,9 @@ const Index = () => (
external
>
application security
</ColorLink>
</ColorfulLink>
,{" "}
<ColorLink
<ColorfulLink
href="https://www.cloudflare.com/learning/serverless/what-is-serverless/"
title='"What is serverless computing?" on Cloudflare'
lightColor="#0098ec"
@@ -118,9 +118,9 @@ const Index = () => (
external
>
serverless stacks
</ColorLink>
</ColorfulLink>
, and{" "}
<ColorLink
<ColorfulLink
href="https://xkcd.com/1319/"
title='"Automation" on xkcd'
lightColor="#ff6200"
@@ -128,46 +128,46 @@ const Index = () => (
external
>
DevOps automation
</ColorLink>
</ColorfulLink>
.
</p>
<p>
I fell in love with{" "}
<ColorLink
<ColorfulLink
href="/previously/"
title="My Terrible, Horrible, No Good, Very Bad First Websites"
lightColor="#4169e1"
darkColor="#8ca9ff"
>
frontend web design
</ColorLink>{" "}
</ColorfulLink>{" "}
and{" "}
<ColorLink
<ColorfulLink
href="/notes/my-first-code/"
title="Jake's Bulletin Board, circa 2003"
lightColor="#9932cc"
darkColor="#d588fb"
>
backend programming
</ColorLink>{" "}
</ColorfulLink>{" "}
back when my only source of income was{" "}
<span className="birthday">
<ColorLink
<ColorfulLink
href="/birthday/"
title="🎉 Cranky Birthday Boy on VHS Tape 📼"
lightColor="#e40088"
darkColor="#fd40b1"
>
the Tooth Fairy
</ColorLink>
</ColorfulLink>
</span>
. <span className="quiet">I've improved a bit since then, I think...</span>
</p>
<p>
Over the years, some of my side projects{" "}
<ColorLink
<ColorfulLink
href="https://tuftsdaily.com/news/2012/04/06/student-designs-iphone-joeytracker-app/"
title='"Student designs iPhone JoeyTracker app" on The Tufts Daily'
lightColor="#ff1b1b"
@@ -175,16 +175,16 @@ const Index = () => (
external
>
have
</ColorLink>{" "}
<ColorLink
</ColorfulLink>{" "}
<ColorfulLink
href="/leo/"
title="Powncer segment on The Lab with Leo Laporte (G4techTV)"
lightColor="#f78200"
darkColor="#fd992a"
>
been
</ColorLink>{" "}
<ColorLink
</ColorfulLink>{" "}
<ColorfulLink
href="https://www.google.com/books/edition/The_Facebook_Effect/RRUkLhyGZVgC?hl=en&gbpv=1&dq=%22jake%20jarvis%22&pg=PA226&printsec=frontcover&bsq=%22jake%20jarvis%22"
title='"The Facebook Effect" by David Kirkpatrick (Google Books)'
lightColor="#f2b702"
@@ -192,8 +192,8 @@ const Index = () => (
external
>
featured
</ColorLink>{" "}
<ColorLink
</ColorfulLink>{" "}
<ColorfulLink
href="https://money.cnn.com/2007/06/01/technology/facebookplatform.fortune/index.htm"
title='"The new Facebook is on a roll" on CNN Money'
lightColor="#5ebd3e"
@@ -201,8 +201,8 @@ const Index = () => (
external
>
by
</ColorLink>{" "}
<ColorLink
</ColorfulLink>{" "}
<ColorfulLink
href="https://www.wired.com/2007/04/our-web-servers/"
title='"Middio: A YouTube Scraper for Major Label Music Videos" on Wired'
lightColor="#009cdf"
@@ -210,8 +210,8 @@ const Index = () => (
external
>
various
</ColorLink>{" "}
<ColorLink
</ColorfulLink>{" "}
<ColorfulLink
href="https://gigaom.com/2009/10/06/fresh-faces-in-tech-10-kid-entrepreneurs-to-watch/6/"
title='"Fresh Faces in Tech: 10 Kid Entrepreneurs to Watch" on Gigaom'
lightColor="#3e49bb"
@@ -219,8 +219,8 @@ const Index = () => (
external
>
media
</ColorLink>{" "}
<ColorLink
</ColorfulLink>{" "}
<ColorfulLink
href="https://adage.com/article/small-agency-diary/client-ceo-s-son/116723/"
title='"Your Next Client? The CEO&#39;s Son" on Advertising Age'
lightColor="#973999"
@@ -228,13 +228,13 @@ const Index = () => (
external
>
outlets
</ColorLink>
</ColorfulLink>
.
</p>
<p>
You can find more of my work on{" "}
<ColorLink
<ColorfulLink
href="https://github.com/jakejarvis"
title="Jake Jarvis on GitHub"
lightColor="#8d4eff"
@@ -242,9 +242,9 @@ const Index = () => (
external
>
GitHub
</ColorLink>{" "}
</ColorfulLink>{" "}
and{" "}
<ColorLink
<ColorfulLink
href="https://www.linkedin.com/in/jakejarvis/"
title="Jake Jarvis on LinkedIn"
lightColor="#0073b1"
@@ -252,18 +252,18 @@ const Index = () => (
external
>
LinkedIn
</ColorLink>
</ColorfulLink>
. I'm always available to connect over{" "}
<ColorLink href="/contact/" title="Send an email" lightColor="#de0c0c" darkColor="#ff5050">
<ColorfulLink href="/contact/" title="Send an email" lightColor="#de0c0c" darkColor="#ff5050">
email
</ColorLink>{" "}
</ColorfulLink>{" "}
<sup className="monospace pgp_key">
<ColorLink href="/pubkey.asc" title="My Public Key" lightColor="#757575" darkColor="#959595" external>
<ColorfulLink href="/pubkey.asc" title="My Public Key" lightColor="#757575" darkColor="#959595" external>
<LockIcon className="icon" /> 2B0C 9CF2 51E6 9A39
</ColorLink>
</ColorfulLink>
</sup>
,{" "}
<ColorLink
<ColorfulLink
href="https://twitter.com/jakejarvis"
title="Jake Jarvis on Twitter"
lightColor="#00acee"
@@ -271,16 +271,16 @@ const Index = () => (
external
>
Twitter
</ColorLink>
</ColorfulLink>
, or{" "}
<ColorLink
<ColorfulLink
href="sms:+1-617-917-3737"
title="Send SMS to +1 (617) 917-3737"
lightColor="#6fcc01"
darkColor="#8edb34"
>
SMS
</ColorLink>{" "}
</ColorfulLink>{" "}
as well!
</p>

35
pages/leo.tsx
View File

@@ -1,7 +1,7 @@
import { NextSeo } from "next-seo";
import Content from "../components/Content";
import Title from "../components/title/Title";
import Video from "../components/media/Video";
import Content from "../components/Content/Content";
import Title from "../components/Title/Title";
import Video from "../components/Video/Video";
import thumbnail from "../public/static/images/leo/thumb.png";
@@ -19,31 +19,10 @@ const Leo = () => (
<Content>
<Video
url={[
{ src: "/static/images/leo/leo.webm", type: "video/webm" },
{ src: "/static/images/leo/leo.mp4", type: "video/mp4" },
]}
config={{
// @ts-ignore
file: {
attributes: {
poster: thumbnail.src,
controlsList: "nodownload",
preload: "metadata",
autoPlay: false,
},
tracks: [
{
kind: "subtitles",
src: "/static/images/leo/subs.en.vtt",
srcLang: "en",
label: "English",
default: true,
},
],
},
}}
controls={true}
webm="/static/images/leo/leo.webm"
mp4="/static/images/leo/leo.mp4"
thumbnail={thumbnail.src}
subs="/static/images/leo/subs.en.vtt"
/>
<p className="copyright">

6
pages/license.tsx
View File

@@ -1,7 +1,7 @@
import { NextSeo } from "next-seo";
import Content from "../components/Content";
import Title from "../components/title/Title";
import { LicenseIcon } from "../components/icons";
import Content from "../components/Content/Content";
import Title from "../components/Title/Title";
import { LicenseIcon } from "../components/Icons";
const License = () => (
<>

21
pages/notes/[slug].tsx
View File

@@ -1,20 +1,17 @@
import { useMemo } from "react";
import { InView } from "react-intersection-observer";
import { NextSeo, ArticleJsonLd } from "next-seo";
import { MDXRemote } from "next-mdx-remote";
import { escape } from "html-escaper";
import { getMDXComponent } from "mdx-bundler/client";
import Content from "../../components/Content";
import Meta from "../../components/notes/Meta";
import Comments from "../../components/notes/Comments";
import CustomCode from "../../components/code-block/Code";
import Content from "../../components/Content/Content";
import Meta from "../../components/NoteMeta/NoteMeta";
import Comments from "../../components/Comments/Comments";
import * as mdxComponents from "../../lib/mdx-components";
import { getNote, getNoteSlugs } from "../../lib/parse-notes";
import * as config from "../../lib/config";
import type { GetStaticProps, GetStaticPaths } from "next";
import type { NoteType } from "../../types";
const Note = ({ frontMatter, mdxSource }: NoteType) => {
const MDXComponent = useMemo(() => getMDXComponent(mdxSource, { process }), [mdxSource]);
const Note = ({ frontMatter, source }: NoteType) => {
return (
<>
<NextSeo
@@ -56,7 +53,7 @@ const Note = ({ frontMatter, mdxSource }: NoteType) => {
<Meta {...frontMatter} />
<Content>
<MDXComponent components={{ code: CustomCode }} />
<MDXRemote {...source} components={{ ...mdxComponents }} lazy />
</Content>
{frontMatter.noComments !== true && (
<InView rootMargin="140px" triggerOnce={true} fallbackInView={true}>
@@ -72,12 +69,12 @@ const Note = ({ frontMatter, mdxSource }: NoteType) => {
};
export const getStaticProps: GetStaticProps = async ({ params }) => {
const { frontMatter, mdxSource } = await getNote(params.slug as string);
const { frontMatter, source } = await getNote(params.slug as string);
return {
props: {
frontMatter,
mdxSource,
source,
},
};
};

2
pages/notes/index.tsx
View File

@@ -1,6 +1,6 @@
import { NextSeo } from "next-seo";
import { format } from "date-fns";
import List from "../../components/notes/List";
import List from "../../components/NotesList/NotesList";
import { getAllNotes } from "../../lib/parse-notes";
import type { GetStaticProps } from "next";

6
pages/previously.tsx
View File

@@ -1,8 +1,8 @@
import Image from "next/image";
import { NextSeo } from "next-seo";
import Content from "../components/Content";
import Title from "../components/title/Title";
import { FloppyIcon, SirenIcon } from "../components/icons";
import Content from "../components/Content/Content";
import Title from "../components/Title/Title";
import { FloppyIcon, SirenIcon } from "../components/Icons";
/* eslint-disable camelcase */
import img_wayback from "../public/static/images/previously/wayback.png";

8
pages/privacy.tsx
View File

@@ -1,9 +1,9 @@
import Image from "next/image";
import Link from "next/link";
import { NextSeo } from "next-seo";
import Content from "../components/Content";
import Title from "../components/title/Title";
import { PrivacyIcon } from "../components/icons";
import Content from "../components/Content/Content";
import Title from "../components/Title/Title";
import { PrivacyIcon } from "../components/Icons";
import faunaImg from "../public/static/images/privacy/fauna_hits.png";
@@ -75,7 +75,7 @@ const Privacy = () => (
</a>{" "}
and{" "}
<a
href="https://github.com/jakejarvis/jarv.is/blob/main/components/hits/Hits.tsx"
href="https://github.com/jakejarvis/jarv.is/blob/main/components/notes/HitCounter.tsx"
target="_blank"
rel="noopener noreferrer"
>

6
pages/projects.tsx
View File

@@ -1,8 +1,8 @@
import { graphql } from "@octokit/graphql";
import { NextSeo } from "next-seo";
import Title from "../components/title/Title";
import RepoCard from "../components/projects/RepoCard";
import { ProjectsIcon } from "../components/icons";
import Title from "../components/Title/Title";
import RepoCard from "../components/RepositoryCard/RepositoryCard";
import { ProjectsIcon } from "../components/Icons";
import type { GetStaticProps } from "next";
import { RepoType } from "../types";

6
pages/uses.tsx
View File

@@ -1,9 +1,9 @@
import Image from "next/image";
import Link from "next/link";
import { NextSeo } from "next-seo";
import Content from "../components/Content";
import Title from "../components/title/Title";
import { LaptopIcon } from "../components/icons";
import Content from "../components/Content/Content";
import Title from "../components/Title/Title";
import { LaptopIcon } from "../components/Icons";
import desktopImg from "../public/static/images/uses/bigsur.png";