jblu/jonbio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upstream #1

Merged
jblu merged 1007 commits from upstream into main 2024-11-04 22:35:57 -06:00
Conversation 0 Commits 1007 Files Changed 24 +92 -82
26 changed files with 92 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2eaac5ae31 - Show all commits

10
components/Card.js
View File

@ -2,11 +2,11 @@ import Image from './Image'
import Link from './Link' import Link from './Link'
const Card = ({ title, description, imgSrc, href }) => ( const Card = ({ title, description, imgSrc, href }) => (
<div className="p-4 md:w-1/2 md" style={{ maxWidth: '544px' }}> <div className="md p-4 md:w-1/2" style={{ maxWidth: '544px' }}>
<div <div
className={`${ className={`${
imgSrc && 'h-full' imgSrc && 'h-full'
} overflow-hidden border-2 border-gray-200 rounded-md border-opacity-60 dark:border-gray-700`} } overflow-hidden rounded-md border-2 border-gray-200 border-opacity-60 dark:border-gray-700`}
> >
{imgSrc && {imgSrc &&
(href ? ( (href ? (
@ -14,7 +14,7 @@ const Card = ({ title, description, imgSrc, href }) => (
<Image <Image
alt={title} alt={title}
src={imgSrc} src={imgSrc}
className="object-cover object-center lg:h-48 md:h-36" className="object-cover object-center md:h-36 lg:h-48"
width={544} width={544}
height={306} height={306}
/> />
@ -23,7 +23,7 @@ const Card = ({ title, description, imgSrc, href }) => (
<Image <Image
alt={title} alt={title}
src={imgSrc} src={imgSrc}
className="object-cover object-center lg:h-48 md:h-36" className="object-cover object-center md:h-36 lg:h-48"
width={544} width={544}
height={306} height={306}
/> />
@ -38,7 +38,7 @@ const Card = ({ title, description, imgSrc, href }) => (
title title
)} )}
</h2> </h2>
<p className="mb-3 prose text-gray-500 max-w-none dark:text-gray-400">{description}</p> <p className="prose mb-3 max-w-none text-gray-500 dark:text-gray-400">{description}</p>
{href && ( {href && (
<Link <Link
href={href} href={href}

6
components/Footer.js
View File

@ -5,8 +5,8 @@ import SocialIcon from '@/components/social-icons'
export default function Footer() { export default function Footer() {
return ( return (
<footer> <footer>
<div className="flex flex-col items-center mt-16"> <div className="mt-16 flex flex-col items-center">
<div className="flex mb-3 space-x-4"> <div className="mb-3 flex space-x-4">
<SocialIcon kind="mail" href={`mailto:${siteMetadata.email}`} size="6" /> <SocialIcon kind="mail" href={`mailto:${siteMetadata.email}`} size="6" />
<SocialIcon kind="github" href={siteMetadata.github} size="6" /> <SocialIcon kind="github" href={siteMetadata.github} size="6" />
<SocialIcon kind="facebook" href={siteMetadata.facebook} size="6" /> <SocialIcon kind="facebook" href={siteMetadata.facebook} size="6" />
@ -14,7 +14,7 @@ export default function Footer() {
<SocialIcon kind="linkedin" href={siteMetadata.linkedin} size="6" /> <SocialIcon kind="linkedin" href={siteMetadata.linkedin} size="6" />
<SocialIcon kind="twitter" href={siteMetadata.twitter} size="6" /> <SocialIcon kind="twitter" href={siteMetadata.twitter} size="6" />
</div> </div>
<div className="flex mb-2 space-x-2 text-sm text-gray-500 dark:text-gray-400"> <div className="mb-2 flex space-x-2 text-sm text-gray-500 dark:text-gray-400">
<div>{siteMetadata.author}</div> <div>{siteMetadata.author}</div>
<div>{` • `}</div> <div>{` • `}</div>
<div>{`© ${new Date().getFullYear()}`}</div> <div>{`© ${new Date().getFullYear()}`}</div>

4
components/LayoutWrapper.js
View File

@ -10,7 +10,7 @@ import ThemeSwitch from './ThemeSwitch'
const LayoutWrapper = ({ children }) => { const LayoutWrapper = ({ children }) => {
return ( return (
<SectionContainer> <SectionContainer>
<div className="flex flex-col justify-between h-screen"> <div className="flex h-screen flex-col justify-between">
<header className="flex items-center justify-between py-10"> <header className="flex items-center justify-between py-10">
<div> <div>
<Link href="/" aria-label={siteMetadata.headerTitle}> <Link href="/" aria-label={siteMetadata.headerTitle}>
@ -34,7 +34,7 @@ const LayoutWrapper = ({ children }) => {
<Link <Link
key={link.title} key={link.title}
href={link.href} href={link.href}
className="p-1 font-medium text-gray-900 sm:p-4 dark:text-gray-100" className="p-1 font-medium text-gray-900 dark:text-gray-100 sm:p-4"
> >
{link.title} {link.title}
</Link> </Link>

8
components/MobileNav.js
View File

@ -21,7 +21,7 @@ const MobileNav = () => {
<div className="sm:hidden"> <div className="sm:hidden">
<button <button
type="button" type="button"
className="w-8 h-8 py-1 ml-1 mr-1 rounded" className="ml-1 mr-1 h-8 w-8 rounded py-1"
aria-label="Toggle Menu" aria-label="Toggle Menu"
onClick={onToggleNav} onClick={onToggleNav}
> >
@ -47,17 +47,17 @@ const MobileNav = () => {
</svg> </svg>
</button> </button>
<div <div
className={`fixed w-full h-full top-24 right-0 bg-gray-200 dark:bg-gray-800 opacity-95 z-10 transform ease-in-out duration-300 ${ className={`fixed top-24 right-0 z-10 h-full w-full transform bg-gray-200 opacity-95 duration-300 ease-in-out dark:bg-gray-800 ${
navShow ? 'translate-x-0' : 'translate-x-full' navShow ? 'translate-x-0' : 'translate-x-full'
}`} }`}
> >
<button <button
type="button" type="button"
aria-label="toggle modal" aria-label="toggle modal"
className="fixed w-full h-full cursor-auto focus:outline-none" className="fixed h-full w-full cursor-auto focus:outline-none"
onClick={onToggleNav} onClick={onToggleNav}
></button> ></button>
<nav className="fixed h-full mt-8"> <nav className="fixed mt-8 h-full">
{headerNavLinks.map((link) => ( {headerNavLinks.map((link) => (
<div key={link.title} className="px-12 py-4"> <div key={link.title} className="px-12 py-4">
<Link <Link

12
components/NewsletterForm.js
View File

@ -44,7 +44,7 @@ const NewsletterForm = ({ title = 'Subscribe to the newsletter' }) => {
</label> </label>
<input <input
autoComplete="email" autoComplete="email"
className="px-4 rounded-md w-72 dark:bg-black focus:outline-none focus:ring-2 focus:border-transparent focus:ring-primary-600" className="w-72 rounded-md px-4 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary-600 dark:bg-black"
id="email-input" id="email-input"
name="email" name="email"
placeholder={subscribed ? "You're subscribed ! 🎉" : 'Enter your email'} placeholder={subscribed ? "You're subscribed ! 🎉" : 'Enter your email'}
@ -54,11 +54,11 @@ const NewsletterForm = ({ title = 'Subscribe to the newsletter' }) => {
disabled={subscribed} disabled={subscribed}
/> />
</div> </div>
<div className="flex w-full mt-2 rounded-md shadow-sm sm:mt-0 sm:ml-3"> <div className="mt-2 flex w-full rounded-md shadow-sm sm:mt-0 sm:ml-3">
<button <button
className={`py-2 sm:py-0 w-full bg-primary-500 px-4 rounded-md font-medium text-white ${ className={`w-full rounded-md bg-primary-500 py-2 px-4 font-medium text-white sm:py-0 ${
subscribed ? 'cursor-default' : 'hover:bg-primary-700 dark:hover:bg-primary-400' subscribed ? 'cursor-default' : 'hover:bg-primary-700 dark:hover:bg-primary-400'
} focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-600 dark:ring-offset-black`} } focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-2 dark:ring-offset-black`}
type="submit" type="submit"
disabled={subscribed} disabled={subscribed}
> >
@ -67,7 +67,7 @@ const NewsletterForm = ({ title = 'Subscribe to the newsletter' }) => {
</div> </div>
</form> </form>
{error && ( {error && (
<div className="pt-2 text-sm text-red-500 w-72 sm:w-96 dark:text-red-400">{message}</div> <div className="w-72 pt-2 text-sm text-red-500 dark:text-red-400 sm:w-96">{message}</div>
)} )}
</div> </div>
) )
@ -77,7 +77,7 @@ export default NewsletterForm
export const BlogNewsletterForm = ({ title }) => ( export const BlogNewsletterForm = ({ title }) => (
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">
<div className="p-6 bg-gray-100 dark:bg-gray-800 sm:px-14 sm:py-8"> <div className="bg-gray-100 p-6 dark:bg-gray-800 sm:px-14 sm:py-8">
<NewsletterForm title={title} /> <NewsletterForm title={title} />
</div> </div>
</div> </div>

2
components/Pagination.js
View File

@ -5,7 +5,7 @@ export default function Pagination({ totalPages, currentPage }) {
const nextPage = parseInt(currentPage) + 1 <= parseInt(totalPages) const nextPage = parseInt(currentPage) + 1 <= parseInt(totalPages)
return ( return (
<div className="pt-6 pb-8 space-y-2 md:space-y-5"> <div className="space-y-2 pt-6 pb-8 md:space-y-5">
<nav className="flex justify-between"> <nav className="flex justify-between">
{!prevPage && ( {!prevPage && (
<button rel="previous" className="cursor-auto disabled:opacity-50" disabled={!prevPage}> <button rel="previous" className="cursor-auto disabled:opacity-50" disabled={!prevPage}>

4
components/Pre.js
View File

@ -26,9 +26,9 @@ const Pre = (props) => {
<button <button
aria-label="Copy code" aria-label="Copy code"
type="button" type="button"
className={`absolute right-2 top-2 w-8 h-8 p-1 rounded border-2 bg-gray-700 dark:bg-gray-800 ${ className={`absolute right-2 top-2 h-8 w-8 rounded border-2 bg-gray-700 p-1 dark:bg-gray-800 ${
copied copied
? 'focus:outline-none focus:border-green-400 border-green-400' ? 'border-green-400 focus:border-green-400 focus:outline-none'
: 'border-gray-300' : 'border-gray-300'
}`} }`}
onClick={onCopy} onClick={onCopy}

10
components/ScrollTopAndComment.js
View File

@ -23,15 +23,15 @@ const ScrollTopAndComment = () => {
} }
return ( return (
<div <div
className={`fixed flex-col hidden gap-3 right-8 bottom-8 ${show ? 'md:flex' : 'md:hidden'}`} className={`fixed right-8 bottom-8 hidden flex-col gap-3 ${show ? 'md:flex' : 'md:hidden'}`}
> >
<button <button
aria-label="Scroll To Comment" aria-label="Scroll To Comment"
type="button" type="button"
onClick={handleScrollToComment} onClick={handleScrollToComment}
className="p-2 text-gray-500 transition-all bg-gray-200 rounded-full dark:text-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 hover:bg-gray-300" className="rounded-full bg-gray-200 p-2 text-gray-500 transition-all hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600"
> >
<svg className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor"> <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path <path
fillRule="evenodd" fillRule="evenodd"
d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z"
@ -43,9 +43,9 @@ const ScrollTopAndComment = () => {
aria-label="Scroll To Top" aria-label="Scroll To Top"
type="button" type="button"
onClick={handleScrollTop} onClick={handleScrollTop}
className="p-2 text-gray-500 transition-all bg-gray-200 rounded-full dark:text-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 hover:bg-gray-300" className="rounded-full bg-gray-200 p-2 text-gray-500 transition-all hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600"
> >
<svg className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor"> <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path <path
fillRule="evenodd" fillRule="evenodd"
d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"

2
components/SectionContainer.js
View File

@ -1,3 +1,3 @@
export default function SectionContainer({ children }) { export default function SectionContainer({ children }) {
return <div className="max-w-3xl px-4 mx-auto sm:px-6 xl:max-w-5xl xl:px-0">{children}</div> return <div className="mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0">{children}</div>
} }

2
components/TOCInline.js
View File

@ -51,7 +51,7 @@ const TOCInline = ({
<> <>
{asDisclosure ? ( {asDisclosure ? (
<details open> <details open>
<summary className="pt-2 pb-2 ml-6 text-xl font-bold">Table of Contents</summary> <summary className="ml-6 pt-2 pb-2 text-xl font-bold">Table of Contents</summary>
<div className="ml-6">{tocList}</div> <div className="ml-6">{tocList}</div>
</details> </details>
) : ( ) : (

2
components/ThemeSwitch.js
View File

@ -12,7 +12,7 @@ const ThemeSwitch = () => {
<button <button
aria-label="Toggle Dark Mode" aria-label="Toggle Dark Mode"
type="button" type="button"
className="w-8 h-8 p-1 ml-1 mr-1 rounded sm:ml-4" className="ml-1 mr-1 h-8 w-8 rounded p-1 sm:ml-4"
onClick={() => setTheme(theme === 'dark' || resolvedTheme === 'dark' ? 'light' : 'dark')} onClick={() => setTheme(theme === 'dark' || resolvedTheme === 'dark' ? 'light' : 'dark')}
> >
<svg <svg

2
components/comments/Utterances.js
View File

@ -44,7 +44,7 @@ const Utterances = ({ issueTerm }) => {
return ( return (
<div className="pt-6 pb-6 text-center text-gray-700 dark:text-gray-300"> <div className="pt-6 pb-6 text-center text-gray-700 dark:text-gray-300">
{enableLoadComments && <button onClick={LoadComments}>Load Comments</button>} {enableLoadComments && <button onClick={LoadComments}>Load Comments</button>}
<div className="relative utterances-frame" id={COMMENTS_ID} /> <div className="utterances-frame relative" id={COMMENTS_ID} />
</div> </div>
) )
} }

2
components/social-icons/index.js
View File

@ -31,7 +31,7 @@ const SocialIcon = ({ kind, href, size = 8 }) => {
> >
<span className="sr-only">{kind}</span> <span className="sr-only">{kind}</span>
<SocialSvg <SocialSvg
className={`fill-current text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 h-${size} w-${size}`} className={`fill-current text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 h-${size} w-${size}`}
/> />
</a> </a>
) )

8
css/prism.css
View File

@ -7,7 +7,7 @@
/* Code title styles */ /* Code title styles */
.remark-code-title { .remark-code-title {
@apply px-5 py-3 font-mono text-sm font-bold text-gray-200 bg-gray-700 rounded-t; @apply rounded-t bg-gray-700 px-5 py-3 font-mono text-sm font-bold text-gray-200;
} }
.remark-code-title + div > pre { .remark-code-title + div > pre {
@ -20,7 +20,7 @@
} }
.code-line { .code-line {
@apply block pl-4 pr-4 -mx-4 border-l-4 border-transparent; @apply -mx-4 block border-l-4 border-transparent pl-4 pr-4;
} }
.code-line.inserted { .code-line.inserted {
@ -32,11 +32,11 @@
} }
.highlight-line { .highlight-line {
@apply -mx-4 bg-gray-700 bg-opacity-50 border-l-4 border-primary-500; @apply -mx-4 border-l-4 border-primary-500 bg-gray-700 bg-opacity-50;
} }
.line-number::before { .line-number::before {
@apply inline-block w-4 mr-4 -ml-2 text-right text-gray-400; @apply mr-4 -ml-2 inline-block w-4 text-right text-gray-400;
content: attr(line); content: attr(line);
} }

10
layouts/AuthorLayout.js
View File

@ -9,31 +9,31 @@ export default function AuthorLayout({ children, frontMatter }) {
<> <>
<PageSEO title={`About - ${name}`} description={`About me - ${name}`} /> <PageSEO title={`About - ${name}`} description={`About me - ${name}`} />
<div className="divide-y"> <div className="divide-y">
<div className="pt-6 pb-8 space-y-2 md:space-y-5"> <div className="space-y-2 pt-6 pb-8 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14"> <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
About About
</h1> </h1>
</div> </div>
<div className="items-start space-y-2 xl:grid xl:grid-cols-3 xl:gap-x-8 xl:space-y-0"> <div className="items-start space-y-2 xl:grid xl:grid-cols-3 xl:gap-x-8 xl:space-y-0">
<div className="flex flex-col items-center pt-8 space-x-2"> <div className="flex flex-col items-center space-x-2 pt-8">
<Image <Image
src={avatar} src={avatar}
alt="avatar" alt="avatar"
width="192px" width="192px"
height="192px" height="192px"
className="w-48 h-48 rounded-full" className="h-48 w-48 rounded-full"
/> />
<h3 className="pt-4 pb-2 text-2xl font-bold leading-8 tracking-tight">{name}</h3> <h3 className="pt-4 pb-2 text-2xl font-bold leading-8 tracking-tight">{name}</h3>
<div className="text-gray-500 dark:text-gray-400">{occupation}</div> <div className="text-gray-500 dark:text-gray-400">{occupation}</div>
<div className="text-gray-500 dark:text-gray-400">{company}</div> <div className="text-gray-500 dark:text-gray-400">{company}</div>
<div className="flex pt-6 space-x-3"> <div className="flex space-x-3 pt-6">
<SocialIcon kind="mail" href={`mailto:${email}`} /> <SocialIcon kind="mail" href={`mailto:${email}`} />
<SocialIcon kind="github" href={github} /> <SocialIcon kind="github" href={github} />
<SocialIcon kind="linkedin" href={linkedin} /> <SocialIcon kind="linkedin" href={linkedin} />
<SocialIcon kind="twitter" href={twitter} /> <SocialIcon kind="twitter" href={twitter} />
</div> </div>
</div> </div>
<div className="pt-8 pb-8 prose dark:prose-dark max-w-none xl:col-span-2">{children}</div> <div className="prose max-w-none pt-8 pb-8 dark:prose-dark xl:col-span-2">{children}</div>
</div> </div>
</div> </div>
</> </>

10
layouts/ListLayout.js
View File

@ -19,7 +19,7 @@ export default function ListLayout({ posts, title, initialDisplayPosts = [], pag
return ( return (
<> <>
<div className="divide-y"> <div className="divide-y">
<div className="pt-6 pb-8 space-y-2 md:space-y-5"> <div className="space-y-2 pt-6 pb-8 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14"> <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
{title} {title}
</h1> </h1>
@ -29,10 +29,10 @@ export default function ListLayout({ posts, title, initialDisplayPosts = [], pag
type="text" type="text"
onChange={(e) => setSearchValue(e.target.value)} onChange={(e) => setSearchValue(e.target.value)}
placeholder="Search articles" placeholder="Search articles"
className="block w-full px-4 py-2 text-gray-900 bg-white border border-gray-300 rounded-md dark:border-gray-900 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-800 dark:text-gray-100" className="block w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-900 dark:bg-gray-800 dark:text-gray-100"
/> />
<svg <svg
className="absolute w-5 h-5 text-gray-400 right-3 top-3 dark:text-gray-300" className="absolute right-3 top-3 h-5 w-5 text-gray-400 dark:text-gray-300"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -53,7 +53,7 @@ export default function ListLayout({ posts, title, initialDisplayPosts = [], pag
const { slug, date, title, summary, tags } = frontMatter const { slug, date, title, summary, tags } = frontMatter
return ( return (
<li key={slug} className="py-4"> <li key={slug} className="py-4">
<article className="space-y-2 xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline"> <article className="space-y-2 xl:grid xl:grid-cols-4 xl:items-baseline xl:space-y-0">
<dl> <dl>
<dt className="sr-only">Published on</dt> <dt className="sr-only">Published on</dt>
<dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400"> <dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
@ -73,7 +73,7 @@ export default function ListLayout({ posts, title, initialDisplayPosts = [], pag
))} ))}
</div> </div>
</div> </div>
<div className="prose text-gray-500 max-w-none dark:text-gray-400"> <div className="prose max-w-none text-gray-500 dark:text-gray-400">
{summary} {summary}
</div> </div>
</div> </div>

22
layouts/PostLayout.js
View File

@ -47,13 +47,13 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
</div> </div>
</header> </header>
<div <div
className="pb-8 divide-y divide-gray-200 xl:divide-y-0 dark:divide-gray-700 xl:grid xl:grid-cols-4 xl:gap-x-6" className="divide-y divide-gray-200 pb-8 dark:divide-gray-700 xl:grid xl:grid-cols-4 xl:gap-x-6 xl:divide-y-0"
style={{ gridTemplateRows: 'auto 1fr' }} style={{ gridTemplateRows: 'auto 1fr' }}
> >
<dl className="pt-6 pb-10 xl:pt-11 xl:border-b xl:border-gray-200 xl:dark:border-gray-700"> <dl className="pt-6 pb-10 xl:border-b xl:border-gray-200 xl:pt-11 xl:dark:border-gray-700">
<dt className="sr-only">Authors</dt> <dt className="sr-only">Authors</dt>
<dd> <dd>
<ul className="flex justify-center space-x-8 xl:block sm:space-x-12 xl:space-x-0 xl:space-y-8"> <ul className="flex justify-center space-x-8 sm:space-x-12 xl:block xl:space-x-0 xl:space-y-8">
{authorDetails.map((author) => ( {authorDetails.map((author) => (
<li className="flex items-center space-x-2" key={author.name}> <li className="flex items-center space-x-2" key={author.name}>
{author.avatar && ( {author.avatar && (
@ -62,10 +62,10 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
width="38px" width="38px"
height="38px" height="38px"
alt="avatar" alt="avatar"
className="w-10 h-10 rounded-full" className="h-10 w-10 rounded-full"
/> />
)} )}
<dl className="text-sm font-medium leading-5 whitespace-nowrap"> <dl className="whitespace-nowrap text-sm font-medium leading-5">
<dt className="sr-only">Name</dt> <dt className="sr-only">Name</dt>
<dd className="text-gray-900 dark:text-gray-100">{author.name}</dd> <dd className="text-gray-900 dark:text-gray-100">{author.name}</dd>
<dt className="sr-only">Twitter</dt> <dt className="sr-only">Twitter</dt>
@ -85,8 +85,8 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
</ul> </ul>
</dd> </dd>
</dl> </dl>
<div className="divide-y divide-gray-200 dark:divide-gray-700 xl:pb-0 xl:col-span-3 xl:row-span-2"> <div className="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
<div className="pt-10 pb-8 prose dark:prose-dark max-w-none">{children}</div> <div className="prose max-w-none pt-10 pb-8 dark:prose-dark">{children}</div>
<div className="pt-6 pb-6 text-sm text-gray-700 dark:text-gray-300"> <div className="pt-6 pb-6 text-sm text-gray-700 dark:text-gray-300">
<Link href={discussUrl(slug)} rel="nofollow"> <Link href={discussUrl(slug)} rel="nofollow">
{'Discuss on Twitter'} {'Discuss on Twitter'}
@ -97,10 +97,10 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
<Comments frontMatter={frontMatter} /> <Comments frontMatter={frontMatter} />
</div> </div>
<footer> <footer>
<div className="text-sm font-medium leading-5 divide-gray-200 xl:divide-y dark:divide-gray-700 xl:col-start-1 xl:row-start-2"> <div className="divide-gray-200 text-sm font-medium leading-5 dark:divide-gray-700 xl:col-start-1 xl:row-start-2 xl:divide-y">
{tags && ( {tags && (
<div className="py-4 xl:py-8"> <div className="py-4 xl:py-8">
<h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400"> <h2 className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
Tags Tags
</h2> </h2>
<div className="flex flex-wrap"> <div className="flex flex-wrap">
@ -114,7 +114,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
<div className="flex justify-between py-4 xl:block xl:space-y-8 xl:py-8"> <div className="flex justify-between py-4 xl:block xl:space-y-8 xl:py-8">
{prev && ( {prev && (
<div> <div>
<h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400"> <h2 className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
Previous Article Previous Article
</h2> </h2>
<div className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"> <div className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
@ -124,7 +124,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
)} )}
{next && ( {next && (
<div> <div>
<h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400"> <h2 className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
Next Article Next Article
</h2> </h2>
<div className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"> <div className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">

8
layouts/PostSimple.js
View File

@ -17,7 +17,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
<article> <article>
<div> <div>
<header> <header>
<div className="pb-10 space-y-1 text-center border-b border-gray-200 dark:border-gray-700"> <div className="space-y-1 border-b border-gray-200 pb-10 text-center dark:border-gray-700">
<dl> <dl>
<div> <div>
<dt className="sr-only">Published on</dt> <dt className="sr-only">Published on</dt>
@ -32,11 +32,11 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
</div> </div>
</header> </header>
<div <div
className="pb-8 divide-y divide-gray-200 xl:divide-y-0 dark:divide-gray-700 " className="divide-y divide-gray-200 pb-8 dark:divide-gray-700 xl:divide-y-0 "
style={{ gridTemplateRows: 'auto 1fr' }} style={{ gridTemplateRows: 'auto 1fr' }}
> >
<div className="divide-y divide-gray-200 dark:divide-gray-700 xl:pb-0 xl:col-span-3 xl:row-span-2"> <div className="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
<div className="pt-10 pb-8 prose dark:prose-dark max-w-none">{children}</div> <div className="prose max-w-none pt-10 pb-8 dark:prose-dark">{children}</div>
</div> </div>
<Comments frontMatter={frontMatter} /> <Comments frontMatter={frontMatter} />
<footer> <footer>

5
lib/utils/files.js
View File

@ -1,7 +1,10 @@
import fs from 'fs' import fs from 'fs'
import path from 'path' import path from 'path'
const pipe = (...fns) => (x) => fns.reduce((v, f) => f(v), x) const pipe =
(...fns) =>
(x) =>
fns.reduce((v, f) => f(v), x)
const flattenArray = (input) => const flattenArray = (input) =>
input.reduce((acc, item) => [...acc, ...(Array.isArray(item) ? item : [item])], []) input.reduce((acc, item) => [...acc, ...(Array.isArray(item) ? item : [item])], [])

12
package-lock.json generated
View File

@ -8166,9 +8166,9 @@
"dev": true "dev": true
}, },
"prettier": { "prettier": {
"version": "2.2.1", "version": "2.5.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz", "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz",
"integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==", "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==",
"dev": true "dev": true
}, },
"prettier-linter-helpers": { "prettier-linter-helpers": {
@ -8180,6 +8180,12 @@
"fast-diff": "^1.1.2" "fast-diff": "^1.1.2"
} }
}, },
"prettier-plugin-tailwindcss": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.4.tgz",
"integrity": "sha512-kt3YFWqxcG9+bilBI0hPF7RjQZNtgBRvjJZGw6B2MNAjPqlfcYIiZnNaIEnq4XimKLTzZYxz6jQnUXmSQ/5njg==",
"dev": true
},
"prismjs": { "prismjs": {
"version": "1.25.0", "version": "1.25.0",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz",

3
package.json
View File

@ -57,7 +57,8 @@
"inquirer": "^8.1.1", "inquirer": "^8.1.1",
"lint-staged": "^11.0.0", "lint-staged": "^11.0.0",
"next-remote-watch": "^1.0.0", "next-remote-watch": "^1.0.0",
"prettier": "2.2.1", "prettier": "^2.5.1",
"prettier-plugin-tailwindcss": "^0.1.4",
"socket.io": "^4.4.0", "socket.io": "^4.4.0",
"socket.io-client": "^4.4.0" "socket.io-client": "^4.4.0"
}, },

8
pages/404.js
View File

@ -2,9 +2,9 @@ import Link from '@/components/Link'
export default function FourZeroFour() { export default function FourZeroFour() {
return ( return (
<div className="flex flex-col items-start justify-start md:justify-center md:items-center md:flex-row md:space-x-6 md:mt-24"> <div className="flex flex-col items-start justify-start md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6">
<div className="pt-6 pb-8 space-x-2 md:space-y-5"> <div className="space-x-2 pt-6 pb-8 md:space-y-5">
<h1 className="text-6xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 md:text-8xl md:leading-14 md:border-r-2 md:px-6"> <h1 className="text-6xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 md:border-r-2 md:px-6 md:text-8xl md:leading-14">
404 404
</h1> </h1>
</div> </div>
@ -14,7 +14,7 @@ export default function FourZeroFour() {
</p> </p>
<p className="mb-8">But dont worry, you can find plenty of other things on our homepage.</p> <p className="mb-8">But dont worry, you can find plenty of other things on our homepage.</p>
<Link href="/"> <Link href="/">
<button className="inline px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-blue-600 border border-transparent rounded-lg shadow focus:outline-none focus:shadow-outline-blue hover:bg-blue-700 dark:hover:bg-blue-500"> <button className="focus:shadow-outline-blue inline rounded-lg border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium leading-5 text-white shadow transition-colors duration-150 hover:bg-blue-700 focus:outline-none dark:hover:bg-blue-500">
Back to homepage Back to homepage
</button> </button>
</Link> </Link>

2
pages/_document.js
View File

@ -34,7 +34,7 @@ class MyDocument extends Document {
crossOrigin="anonymous" crossOrigin="anonymous"
/> />
</Head> </Head>
<body className="antialiased text-black bg-white dark:bg-gray-900 dark:text-white"> <body className="bg-white text-black antialiased dark:bg-gray-900 dark:text-white">
<Main /> <Main />
<NextScript /> <NextScript />
</body> </body>

6
pages/index.js
View File

@ -20,7 +20,7 @@ export default function Home({ posts }) {
<> <>
<PageSEO title={siteMetadata.title} description={siteMetadata.description} /> <PageSEO title={siteMetadata.title} description={siteMetadata.description} />
<div className="divide-y divide-gray-200 dark:divide-gray-700"> <div className="divide-y divide-gray-200 dark:divide-gray-700">
<div className="pt-6 pb-8 space-y-2 md:space-y-5"> <div className="space-y-2 pt-6 pb-8 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14"> <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
Latest Latest
</h1> </h1>
@ -35,7 +35,7 @@ export default function Home({ posts }) {
return ( return (
<li key={slug} className="py-12"> <li key={slug} className="py-12">
<article> <article>
<div className="space-y-2 xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline"> <div className="space-y-2 xl:grid xl:grid-cols-4 xl:items-baseline xl:space-y-0">
<dl> <dl>
<dt className="sr-only">Published on</dt> <dt className="sr-only">Published on</dt>
<dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400"> <dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
@ -59,7 +59,7 @@ export default function Home({ posts }) {
))} ))}
</div> </div>
</div> </div>
<div className="prose text-gray-500 max-w-none dark:text-gray-400"> <div className="prose max-w-none text-gray-500 dark:text-gray-400">
{summary} {summary}
</div> </div>
</div> </div>

4
pages/projects.js
View File

@ -8,7 +8,7 @@ export default function Projects() {
<> <>
<PageSEO title={`Projects - ${siteMetadata.author}`} description={siteMetadata.description} /> <PageSEO title={`Projects - ${siteMetadata.author}`} description={siteMetadata.description} />
<div className="divide-y divide-gray-200 dark:divide-gray-700"> <div className="divide-y divide-gray-200 dark:divide-gray-700">
<div className="pt-6 pb-8 space-y-2 md:space-y-5"> <div className="space-y-2 pt-6 pb-8 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14"> <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
Projects Projects
</h1> </h1>
@ -17,7 +17,7 @@ export default function Projects() {
</p> </p>
</div> </div>
<div className="container py-12"> <div className="container py-12">
<div className="flex flex-wrap -m-4"> <div className="-m-4 flex flex-wrap">
{projectsData.map((d) => ( {projectsData.map((d) => (
<Card <Card
key={d.title} key={d.title}

10
pages/tags.js
View File

@ -16,13 +16,13 @@ export default function Tags({ tags }) {
return ( return (
<> <>
<PageSEO title={`Tags - ${siteMetadata.author}`} description="Things I blog about" /> <PageSEO title={`Tags - ${siteMetadata.author}`} description="Things I blog about" />
<div className="flex flex-col items-start justify-start divide-y divide-gray-200 dark:divide-gray-700 md:justify-center md:items-center md:divide-y-0 md:flex-row md:space-x-6 md:mt-24"> <div className="flex flex-col items-start justify-start divide-y divide-gray-200 dark:divide-gray-700 md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6 md:divide-y-0">
<div className="pt-6 pb-8 space-x-2 md:space-y-5"> <div className="space-x-2 pt-6 pb-8 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14 md:border-r-2 md:px-6"> <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:border-r-2 md:px-6 md:text-6xl md:leading-14">
Tags Tags
</h1> </h1>
</div> </div>
<div className="flex flex-wrap max-w-lg"> <div className="flex max-w-lg flex-wrap">
{Object.keys(tags).length === 0 && 'No tags found.'} {Object.keys(tags).length === 0 && 'No tags found.'}
{sortedTags.map((t) => { {sortedTags.map((t) => {
return ( return (
@ -30,7 +30,7 @@ export default function Tags({ tags }) {
<Tag text={t} /> <Tag text={t} />
<Link <Link
href={`/tags/${kebabCase(t)}`} href={`/tags/${kebabCase(t)}`}
className="-ml-2 text-sm font-semibold text-gray-600 uppercase dark:text-gray-300" className="-ml-2 text-sm font-semibold uppercase text-gray-600 dark:text-gray-300"
> >
{` (${tags[t]})`} {` (${tags[t]})`}
</Link> </Link>