lint and format

This commit is contained in:
Timothy 2021-01-12 23:35:36 +08:00
parent 126e30393b
commit f5b68672eb
24 changed files with 1740 additions and 78 deletions

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,
},
}

View File

@ -5,7 +5,7 @@ import SocialIcon from '@/components/social-icons'
export default function Footer() {
return (
<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="github" href={siteMetadata.github} 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="twitter" href={siteMetadata.twitter} size="6" />
</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>{``}</div>
<div>{`© ${new Date().getFullYear()}`}</div>
<div>{``}</div>
<Link href="/">{siteMetadata.title}</Link>
</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">
Tailwind Nextjs Theme
</Link>

View File

@ -10,16 +10,16 @@ import ThemeSwitch from './ThemeSwitch'
const LayoutWrapper = ({ children }) => {
return (
<SectionContainer>
<div className="flex flex-col h-screen justify-between">
<header className="flex justify-between items-center py-10">
<div className="flex flex-col justify-between h-screen">
<header className="flex items-center justify-between py-10">
<div>
<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">
<Logo />
</div>
{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}
</div>
) : (
@ -34,7 +34,7 @@ const LayoutWrapper = ({ children }) => {
<Link
key={link.title}
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>

View File

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

View File

@ -21,7 +21,7 @@ const MobileNav = () => {
<div className="sm:hidden">
<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"
onClick={onToggleNav}
>
@ -54,12 +54,12 @@ const MobileNav = () => {
<button
type="button"
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}
></button>
<nav className="h-full mt-8 fixed">
<nav className="fixed h-full mt-8">
{headerNavLinks.map((link) => (
<div key={link.title} className="py-4 px-12">
<div key={link.title} className="px-12 py-4">
<Link
href={link.href}
className="text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100"

View File

@ -1,6 +1,6 @@
export default function PageTitle({ children }) {
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}
</h1>
)

View File

@ -1,3 +1,3 @@
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>
}

View File

@ -4,7 +4,7 @@ import kebabCase from 'just-kebab-case'
const Tag = ({ text }) => {
return (
<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('-')}
</a>
</Link>

View File

@ -7,7 +7,7 @@ const ThemeSwitch = () => {
<button
aria-label="Toggle Dark Mode"
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')}
>
<svg

View File

@ -21,7 +21,7 @@ const SocialIcon = ({ kind, href, size = 8 }) => {
return (
<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"
rel="noopener noreferrer"
href={href}

View File

@ -3,7 +3,7 @@
@tailwind utilities;
.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 {

View File

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

View File

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

View File

@ -15,7 +15,7 @@ export default function ListLayout({ posts, title }) {
<>
<div className="divide-y">
<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}
</h1>
<div className="relative max-w-lg">
@ -24,10 +24,10 @@ export default function ListLayout({ posts, title }) {
type="text"
onChange={(e) => setSearchValue(e.target.value)}
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
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"
fill="none"
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">
<dl>
<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>
</dd>
</dl>
<div className="space-y-3 xl:col-span-3">
<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">
{title}
</Link>
@ -68,7 +68,7 @@ export default function ListLayout({ posts, title }) {
))}
</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}
</div>
</div>

View File

@ -25,7 +25,7 @@ export default function PostLayout({ children, frontMatter, next, prev }) {
<dl className="space-y-10">
<div>
<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>
</dd>
</div>
@ -36,13 +36,13 @@ export default function PostLayout({ children, frontMatter, next, prev }) {
</div>
</header>
<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' }}
>
<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>
<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">
<img src={siteMetdata.image} alt="avatar" className="w-10 h-10 rounded-full" />
<dl className="text-sm font-medium leading-5 whitespace-nowrap">
@ -63,8 +63,8 @@ export default function PostLayout({ children, frontMatter, next, prev }) {
</dd>
</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="prose dark:prose-dark max-w-none pt-10 pb-8">{children}</div>
<div className="text-sm pt-6 pb-6 text-gray-700 dark:text-gray-300">
<div className="pt-10 pb-8 prose dark:prose-dark max-w-none">{children}</div>
<div className="pt-6 pb-6 text-sm text-gray-700 dark:text-gray-300">
<Link href={discussUrl(slug)} rel="nofollow">
{'Discuss on Twitter'}
</Link>
@ -72,10 +72,10 @@ export default function PostLayout({ children, frontMatter, next, prev }) {
<Link href={editUrl(fileName)}>{'View on GitHub'}</Link>
</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 && (
<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
</h2>
<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">
{prev && (
<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
</h2>
<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 && (
<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
</h2>
<div className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">

1607
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -41,8 +41,16 @@
"devDependencies": {
"@next/bundle-analyzer": "^10.0.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",
"globby": "11.0.1",
"husky": "^4.3.7",
"lint-staged": "^10.5.3",
"next-compose-plugins": "^2.2.1",
"prettier": "2.2.1",
"rehype": "11.0.0",
@ -51,5 +59,18 @@
"remark-stringify": "9.0.0",
"unified": "9.2.0",
"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"
]
}
}

View File

@ -1,18 +1,18 @@
export default function FourZeroFour() {
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">
<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
</h1>
</div>
<div class="max-w-md">
<p class="text-xl md:text-2xl mb-4 font-bold leading-normal">
<div className="max-w-md">
<p className="mb-4 text-xl font-bold leading-normal md:text-2xl">
Sorry we couldn't find this page.
</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
</button>
</div>

View File

@ -75,7 +75,7 @@ class MyDocument extends Document {
crossOrigin="anonymous"
/>
</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 />
<NextScript />
</body>

View File

@ -1,4 +1,3 @@
import { NextSeo } from 'next-seo'
import siteMetadata from '@/data/siteMetadata'
import SocialIcon from '@/components/social-icons'
import { PageSeo } from '@/components/SEO'
@ -13,14 +12,14 @@ export default function About() {
/>
<div className="divide-y">
<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
</h1>
</div>
<div className="space-y-2 xl:grid xl:grid-cols-3 xl:gap-x-8 xl:space-y-0 items-start">
<div className="flex flex-col items-center space-x-2 pt-8">
<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">
<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}
</h3>
<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} />
</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>
Tails Azimuth is a professor of atmospheric sciences at the Stanford AI Lab. His
research interests includes complexity modelling of tailwinds, headwinds and

View File

@ -24,7 +24,7 @@ export default function Home({ posts }) {
/>
<div className="divide-y divide-gray-200 dark:divide-gray-700">
<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
</h1>
<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">
<dl>
<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>
</dd>
</dl>
<div className="space-y-5 xl:col-span-3">
<div className="space-y-6">
<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">
{title}
</Link>
@ -58,11 +58,11 @@ export default function Home({ posts }) {
))}
</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}
</div>
</div>
<div className="text-base leading-6 font-medium">
<div className="text-base font-medium leading-6">
<Link
href={`/blog/${slug}`}
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
@ -79,7 +79,7 @@ export default function Home({ posts }) {
</ul>
</div>
{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
href="/blog"
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"

View File

@ -20,13 +20,13 @@ export default function Tags({ tags }) {
description="Things I blog about"
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">
<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
</h1>
</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.'}
{sortedTags.map((t) => {
return (
@ -34,7 +34,7 @@ export default function Tags({ tags }) {
<Tag text={t} />
<Link
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]})`}
</Link>

View File

@ -1,14 +1,14 @@
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-96x96.png",
"sizes": "96x96",
"type": "image/png"
}
],
"theme_color": "#000000",
"background_color": "#000000",
"display": "standalone"
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-96x96.png",
"sizes": "96x96",
"type": "image/png"
}
],
"theme_color": "#000000",
"background_color": "#000000",
"display": "standalone"
}