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

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}