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 +1740 -78
24 changed files with 1740 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f5b68672eb - Show all commits

1
.eslintignore Normal file
View File

@ -0,0 +1 @@
node_modules

41
.eslintrc.js Normal file
View File

@ -0,0 +1,41 @@
module.exports = {
root: true,
parserOptions: {
ecmaVersion: 2020,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
settings: {
react: {
version: 'detect',
},
},
env: {
browser: true,
amd: true,
node: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:jsx-a11y/recommended',
'plugin:prettier/recommended',
],
rules: {
'prettier/prettier': 'error',
'react/react-in-jsx-scope': 'off',
'jsx-a11y/anchor-is-valid': [
'error',
{
components: ['Link'],
specialLink: ['hrefLeft', 'hrefRight'],
aspects: ['invalidHref', 'preferButton'],
},
],
'react/prop-types': 0,
'no-unused-vars': 0,
'react/no-unescaped-entities': 0,
},
}

6
components/Footer.js
View File

@ -5,7 +5,7 @@ import SocialIcon from '@/components/social-icons'
export default function Footer() { export default function Footer() {
return ( return (
<footer className="flex flex-col items-center mt-16"> <footer className="flex flex-col items-center mt-16">
<div className="flex space-x-4 mb-3"> <div className="flex mb-3 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" />
@ -13,14 +13,14 @@ 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 space-x-2 mb-2 text-sm text-gray-500 dark:text-gray-400"> <div className="flex mb-2 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>
<div>{` • `}</div> <div>{` • `}</div>
<Link href="/">{siteMetadata.title}</Link> <Link href="/">{siteMetadata.title}</Link>
</div> </div>
<div className="text-sm text-gray-500 dark:text-gray-400 mb-8"> <div className="mb-8 text-sm text-gray-500 dark:text-gray-400">
<Link href="https://github.com/timlrx/tailwind-nextjs-starter-blog"> <Link href="https://github.com/timlrx/tailwind-nextjs-starter-blog">
Tailwind Nextjs Theme Tailwind Nextjs Theme
</Link> </Link>

10
components/LayoutWrapper.js
View File

@ -10,16 +10,16 @@ import ThemeSwitch from './ThemeSwitch'
const LayoutWrapper = ({ children }) => { const LayoutWrapper = ({ children }) => {
return ( return (
<SectionContainer> <SectionContainer>
<div className="flex flex-col h-screen justify-between"> <div className="flex flex-col justify-between h-screen">
<header className="flex justify-between items-center py-10"> <header className="flex items-center justify-between py-10">
<div> <div>
<Link href="/" aria-label="Tailwind CSS Blog"> <Link href="/" aria-label="Tailwind CSS Blog">
<div className="flex justify-between items-center"> <div className="flex items-center justify-between">
<div className="mr-3"> <div className="mr-3">
<Logo /> <Logo />
</div> </div>
{typeof siteMetadata.headerTitle === 'string' ? ( {typeof siteMetadata.headerTitle === 'string' ? (
<div className="hidden sm:block h-6 text-2xl font-semibold"> <div className="hidden h-6 text-2xl font-semibold sm:block">
{siteMetadata.headerTitle} {siteMetadata.headerTitle}
</div> </div>
) : ( ) : (
@ -34,7 +34,7 @@ const LayoutWrapper = ({ children }) => {
<Link <Link
key={link.title} key={link.title}
href={link.href} href={link.href}
className="p-1 sm:p-4 font-medium text-gray-900 dark:text-gray-100" className="p-1 font-medium text-gray-900 sm:p-4 dark:text-gray-100"
> >
{link.title} {link.title}
</Link> </Link>

1
components/Link.js
View File

@ -1,3 +1,4 @@
/* eslint-disable jsx-a11y/anchor-has-content */
import Link from 'next/link' import Link from 'next/link'
const CustomLink = ({ href, ...rest }) => { const CustomLink = ({ href, ...rest }) => {

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="rounded ml-1 mr-1 h-8 w-8" className="w-8 h-8 ml-1 mr-1 rounded"
aria-label="Toggle Menu" aria-label="Toggle Menu"
onClick={onToggleNav} onClick={onToggleNav}
> >
@ -54,12 +54,12 @@ const MobileNav = () => {
<button <button
type="button" type="button"
aria-label="toggle modal" aria-label="toggle modal"
className="w-full h-full fixed cursor-auto focus:outline-none" className="fixed w-full h-full cursor-auto focus:outline-none"
onClick={onToggleNav} onClick={onToggleNav}
></button> ></button>
<nav className="h-full mt-8 fixed"> <nav className="fixed h-full mt-8">
{headerNavLinks.map((link) => ( {headerNavLinks.map((link) => (
<div key={link.title} className="py-4 px-12"> <div key={link.title} className="px-12 py-4">
<Link <Link
href={link.href} href={link.href}
className="text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100" className="text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100"

2
components/PageTitle.js
View File

@ -1,6 +1,6 @@
export default function PageTitle({ children }) { export default function PageTitle({ children }) {
return ( return (
<h1 className="text-3xl leading-9 font-extrabold text-gray-900 dark:text-gray-100 tracking-tight sm:text-4xl sm:leading-10 md:text-5xl 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-5xl md:leading-14">
{children} {children}
</h1> </h1>
) )

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 mx-auto px-4 sm:px-6 xl:max-w-5xl xl:px-0">{children}</div> return <div className="max-w-3xl px-4 mx-auto sm:px-6 xl:max-w-5xl xl:px-0">{children}</div>
} }

2
components/Tag.js
View File

@ -4,7 +4,7 @@ import kebabCase from 'just-kebab-case'
const Tag = ({ text }) => { const Tag = ({ text }) => {
return ( return (
<Link href={`/tags/${kebabCase(text)}`}> <Link href={`/tags/${kebabCase(text)}`}>
<a className="uppercase text-sm font-medium text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"> <a className="text-sm font-medium text-blue-500 uppercase hover:text-blue-600 dark:hover:text-blue-400">
{text.split(' ').join('-')} {text.split(' ').join('-')}
</a> </a>
</Link> </Link>

2
components/ThemeSwitch.js
View File

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

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

@ -21,7 +21,7 @@ const SocialIcon = ({ kind, href, size = 8 }) => {
return ( return (
<a <a
className="text-sm text-gray-500 hover:text-gray-600 transition" className="text-sm text-gray-500 transition hover:text-gray-600"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
href={href} href={href}

2
css/tailwind.css
View File

@ -3,7 +3,7 @@
@tailwind utilities; @tailwind utilities;
.remark-code-title { .remark-code-title {
@apply text-gray-200 px-5 py-3 rounded-t bg-gray-700 text-sm font-mono font-bold; @apply px-5 py-3 font-mono text-sm font-bold text-gray-200 bg-gray-700 rounded-t;
} }
.remark-code-title + pre { .remark-code-title + pre {

6
data/blog/code-sample.md
View File

@ -18,10 +18,10 @@ Some Javascript code
```javascript ```javascript
var num1, num2, sum var num1, num2, sum
num1 = prompt("Enter first number") num1 = prompt('Enter first number')
num2 = prompt("Enter second number") num2 = prompt('Enter second number')
sum = parseInt(num1) + parseInt(num2) // "+" means "add" sum = parseInt(num1) + parseInt(num2) // "+" means "add"
alert("Sum = " + sum) // "+" means combine into a string alert('Sum = ' + sum) // "+" means combine into a string
``` ```
Some Python code 🐍 Some Python code 🐍

2
jsconfig.json
View File

@ -6,7 +6,7 @@
"@/data/*": ["data/*"], "@/data/*": ["data/*"],
"@/layouts/*": ["layouts/*"], "@/layouts/*": ["layouts/*"],
"@/lib/*": ["lib/*"], "@/lib/*": ["lib/*"],
"@/css/*": ["css/*"], "@/css/*": ["css/*"]
} }
} }
} }

12
layouts/ListLayout.js
View File

@ -15,7 +15,7 @@ export default function ListLayout({ posts, title }) {
<> <>
<div className="divide-y"> <div className="divide-y">
<div className="pt-6 pb-8 space-y-2 md:space-y-5"> <div className="pt-6 pb-8 space-y-2 md:space-y-5">
<h1 className="text-3xl leading-9 font-extrabold text-gray-900 dark:text-gray-100 tracking-tight 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>
<div className="relative max-w-lg"> <div className="relative max-w-lg">
@ -24,10 +24,10 @@ export default function ListLayout({ posts, title }) {
type="text" type="text"
onChange={(e) => setSearchValue(e.target.value)} onChange={(e) => setSearchValue(e.target.value)}
placeholder="Search articles" placeholder="Search articles"
className="px-4 py-2 border border-gray-300 dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 block w-full rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100" 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-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-gray-100"
/> />
<svg <svg
className="absolute right-3 top-3 h-5 w-5 text-gray-400 dark:text-gray-300" className="absolute w-5 h-5 text-gray-400 right-3 top-3 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"
@ -51,13 +51,13 @@ export default function ListLayout({ posts, title }) {
<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:space-y-0 xl:items-baseline">
<dl> <dl>
<dt className="sr-only">Published on</dt> <dt className="sr-only">Published on</dt>
<dd className="text-base leading-6 font-medium text-gray-500 dark:text-gray-400"> <dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
<time dateTime={date}>{postDateTemplate.render(new Date(date))}</time> <time dateTime={date}>{postDateTemplate.render(new Date(date))}</time>
</dd> </dd>
</dl> </dl>
<div className="space-y-3 xl:col-span-3"> <div className="space-y-3 xl:col-span-3">
<div> <div>
<h3 className="text-2xl leading-8 font-bold tracking-tight"> <h3 className="text-2xl font-bold leading-8 tracking-tight">
<Link href={`/blog/${slug}`} className="text-gray-900 dark:text-gray-100"> <Link href={`/blog/${slug}`} className="text-gray-900 dark:text-gray-100">
{title} {title}
</Link> </Link>
@ -68,7 +68,7 @@ export default function ListLayout({ posts, title }) {
))} ))}
</div> </div>
</div> </div>
<div className="prose max-w-none text-gray-500 dark:text-gray-400"> <div className="prose text-gray-500 max-w-none dark:text-gray-400">
{summary} {summary}
</div> </div>
</div> </div>

18
layouts/PostLayout.js
View File

@ -25,7 +25,7 @@ export default function PostLayout({ children, frontMatter, next, prev }) {
<dl className="space-y-10"> <dl className="space-y-10">
<div> <div>
<dt className="sr-only">Published on</dt> <dt className="sr-only">Published on</dt>
<dd className="text-base leading-6 font-medium text-gray-500 dark:text-gray-400"> <dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
<time dateTime={date}>{postDateTemplate.render(new Date(date))}</time> <time dateTime={date}>{postDateTemplate.render(new Date(date))}</time>
</dd> </dd>
</div> </div>
@ -36,13 +36,13 @@ export default function PostLayout({ children, frontMatter, next, prev }) {
</div> </div>
</header> </header>
<div <div
className="divide-y xl:divide-y-0 divide-gray-200 dark:divide-gray-700 xl:grid xl:grid-cols-4 xl:gap-x-6 pb-8" 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"
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:pt-11 xl:border-b xl:border-gray-200 xl:dark:border-gray-700">
<dt className="sr-only">Authors</dt> <dt className="sr-only">Authors</dt>
<dd> <dd>
<ul className="flex justify-center xl:block space-x-8 sm:space-x-12 xl:space-x-0 xl:space-y-8"> <ul className="flex justify-center space-x-8 xl:block sm:space-x-12 xl:space-x-0 xl:space-y-8">
<li className="flex items-center space-x-2"> <li className="flex items-center space-x-2">
<img src={siteMetdata.image} alt="avatar" className="w-10 h-10 rounded-full" /> <img src={siteMetdata.image} alt="avatar" className="w-10 h-10 rounded-full" />
<dl className="text-sm font-medium leading-5 whitespace-nowrap"> <dl className="text-sm font-medium leading-5 whitespace-nowrap">
@ -63,8 +63,8 @@ export default function PostLayout({ children, frontMatter, next, prev }) {
</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:pb-0 xl:col-span-3 xl:row-span-2">
<div className="prose dark:prose-dark max-w-none pt-10 pb-8">{children}</div> <div className="pt-10 pb-8 prose dark:prose-dark max-w-none">{children}</div>
<div className="text-sm pt-6 pb-6 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'}
</Link> </Link>
@ -72,10 +72,10 @@ export default function PostLayout({ children, frontMatter, next, prev }) {
<Link href={editUrl(fileName)}>{'View on GitHub'}</Link> <Link href={editUrl(fileName)}>{'View on GitHub'}</Link>
</div> </div>
</div> </div>
<footer className="text-sm font-medium leading-5 xl:divide-y divide-gray-200 dark:divide-gray-700 xl:col-start-1 xl:row-start-2"> <footer 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">
{tags && ( {tags && (
<div className="py-4 xl:py-8"> <div className="py-4 xl:py-8">
<h2 className="text-xs tracking-wide uppercase text-gray-500 dark:text-gray-400"> <h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">
Tags Tags
</h2> </h2>
<div className="space-x-3 xl:flex xl:flex-col xl:space-x-0"> <div className="space-x-3 xl:flex xl:flex-col xl:space-x-0">
@ -89,7 +89,7 @@ export default function PostLayout({ children, frontMatter, next, prev }) {
<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 uppercase text-gray-500 dark:text-gray-400"> <h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">
Previous Article Previous Article
</h2> </h2>
<div className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"> <div className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">
@ -99,7 +99,7 @@ export default function PostLayout({ children, frontMatter, next, prev }) {
)} )}
{next && ( {next && (
<div> <div>
<h2 className="text-xs tracking-wide uppercase text-gray-500 dark:text-gray-400"> <h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">
Next Article Next Article
</h2> </h2>
<div className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"> <div className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">

1607
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

21
package.json
View File

@ -41,8 +41,16 @@
"devDependencies": { "devDependencies": {
"@next/bundle-analyzer": "^10.0.0", "@next/bundle-analyzer": "^10.0.0",
"@svgr/webpack": "^5.5.0", "@svgr/webpack": "^5.5.0",
"eslint": "^7.17.0",
"eslint-config-prettier": "^7.1.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"file-loader": "^6.0.0", "file-loader": "^6.0.0",
"globby": "11.0.1", "globby": "11.0.1",
"husky": "^4.3.7",
"lint-staged": "^10.5.3",
"next-compose-plugins": "^2.2.1", "next-compose-plugins": "^2.2.1",
"prettier": "2.2.1", "prettier": "2.2.1",
"rehype": "11.0.0", "rehype": "11.0.0",
@ -51,5 +59,18 @@
"remark-stringify": "9.0.0", "remark-stringify": "9.0.0",
"unified": "9.2.0", "unified": "9.2.0",
"unist-util-visit": "2.0.3" "unist-util-visit": "2.0.3"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.+(js|jsx|ts|tsx)": [
"eslint --fix"
],
"*.+(js|jsx|ts|tsx|json|css|md|mdx)": [
"prettier --write"
]
} }
} }

12
pages/404.js
View File

@ -1,18 +1,18 @@
export default function FourZeroFour() { export default function FourZeroFour() {
return ( return (
<div className="flex items-start justify-start flex-col 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:justify-center md:items-center md:flex-row md:space-x-6 md:mt-24">
<div className="pt-6 pb-8 space-x-2 md:space-y-5"> <div className="pt-6 pb-8 space-x-2 md:space-y-5">
<h1 className="text-6xl leading-9 font-extrabold text-gray-900 dark:text-gray-100 tracking-tight 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:text-8xl md:leading-14 md:border-r-2 md:px-6">
404 404
</h1> </h1>
</div> </div>
<div class="max-w-md"> <div className="max-w-md">
<p class="text-xl md:text-2xl mb-4 font-bold leading-normal"> <p className="mb-4 text-xl font-bold leading-normal md:text-2xl">
Sorry we couldn't find this page. Sorry we couldn't find this page.
</p> </p>
<p class="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>
<button class="px-4 inline py-2 text-sm font-medium leading-5 shadow text-white transition-colors duration-150 border border-transparent rounded-lg focus:outline-none focus:shadow-outline-blue bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-500"> <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">
Back to Homepage Back to Homepage
</button> </button>
</div> </div>

2
pages/_document.js
View File

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

11
pages/about.js
View File

@ -1,4 +1,3 @@
import { NextSeo } from 'next-seo'
import siteMetadata from '@/data/siteMetadata' import siteMetadata from '@/data/siteMetadata'
import SocialIcon from '@/components/social-icons' import SocialIcon from '@/components/social-icons'
import { PageSeo } from '@/components/SEO' import { PageSeo } from '@/components/SEO'
@ -13,14 +12,14 @@ export default function About() {
/> />
<div className="divide-y"> <div className="divide-y">
<div className="pt-6 pb-8 space-y-2 md:space-y-5"> <div className="pt-6 pb-8 space-y-2 md:space-y-5">
<h1 className="text-3xl leading-9 font-extrabold text-gray-900 dark:text-gray-100 tracking-tight 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="space-y-2 xl:grid xl:grid-cols-3 xl:gap-x-8 xl:space-y-0 items-start"> <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 space-x-2 pt-8"> <div className="flex flex-col items-center pt-8 space-x-2">
<img src={siteMetadata.image} alt="avatar" className="w-48 h-48 rounded-full" /> <img src={siteMetadata.image} alt="avatar" className="w-48 h-48 rounded-full" />
<h3 className="text-2xl leading-8 font-bold tracking-tight pt-4 pb-2"> <h3 className="pt-4 pb-2 text-2xl font-bold leading-8 tracking-tight">
{siteMetadata.author} {siteMetadata.author}
</h3> </h3>
<div className="text-gray-500 dark:text-gray-400">Professor of Atmospheric Science</div> <div className="text-gray-500 dark:text-gray-400">Professor of Atmospheric Science</div>
@ -34,7 +33,7 @@ export default function About() {
<SocialIcon kind="twitter" href={siteMetadata.twitter} /> <SocialIcon kind="twitter" href={siteMetadata.twitter} />
</div> </div>
</div> </div>
<div className="prose dark:prose-dark max-w-none pt-8 pb-8 xl:col-span-2"> <div className="pt-8 pb-8 prose dark:prose-dark max-w-none xl:col-span-2">
<p> <p>
Tails Azimuth is a professor of atmospheric sciences at the Stanford AI Lab. His Tails Azimuth is a professor of atmospheric sciences at the Stanford AI Lab. His
research interests includes complexity modelling of tailwinds, headwinds and research interests includes complexity modelling of tailwinds, headwinds and

12
pages/index.js
View File

@ -24,7 +24,7 @@ export default function Home({ posts }) {
/> />
<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="pt-6 pb-8 space-y-2 md:space-y-5">
<h1 className="text-3xl leading-9 font-extrabold text-gray-900 dark:text-gray-100 tracking-tight 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>
<p className="text-lg leading-7 text-gray-500 dark:text-gray-400"> <p className="text-lg leading-7 text-gray-500 dark:text-gray-400">
@ -40,14 +40,14 @@ export default function Home({ posts }) {
<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:space-y-0 xl:items-baseline">
<dl> <dl>
<dt className="sr-only">Published on</dt> <dt className="sr-only">Published on</dt>
<dd className="text-base leading-6 font-medium text-gray-500 dark:text-gray-400"> <dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
<time dateTime={date}>{postDateTemplate.render(new Date(date))}</time> <time dateTime={date}>{postDateTemplate.render(new Date(date))}</time>
</dd> </dd>
</dl> </dl>
<div className="space-y-5 xl:col-span-3"> <div className="space-y-5 xl:col-span-3">
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<h2 className="text-2xl leading-8 font-bold tracking-tight"> <h2 className="text-2xl font-bold leading-8 tracking-tight">
<Link href={`/blog/${slug}`} className="text-gray-900 dark:text-gray-100"> <Link href={`/blog/${slug}`} className="text-gray-900 dark:text-gray-100">
{title} {title}
</Link> </Link>
@ -58,11 +58,11 @@ export default function Home({ posts }) {
))} ))}
</div> </div>
</div> </div>
<div className="prose max-w-none text-gray-500 dark:text-gray-400"> <div className="prose text-gray-500 max-w-none dark:text-gray-400">
{summary} {summary}
</div> </div>
</div> </div>
<div className="text-base leading-6 font-medium"> <div className="text-base font-medium leading-6">
<Link <Link
href={`/blog/${slug}`} href={`/blog/${slug}`}
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400" className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
@ -79,7 +79,7 @@ export default function Home({ posts }) {
</ul> </ul>
</div> </div>
{posts.length > MAX_DISPLAY && ( {posts.length > MAX_DISPLAY && (
<div className="flex justify-end text-base leading-6 font-medium"> <div className="flex justify-end text-base font-medium leading-6">
<Link <Link
href="/blog" href="/blog"
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400" className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"

8
pages/tags.js
View File

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