upstream #1
@ -4,26 +4,28 @@ 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>
|
||||||
<div className="flex mb-3 space-x-4">
|
<div className="flex flex-col items-center mt-16">
|
||||||
<SocialIcon kind="mail" href={`mailto:${siteMetadata.email}`} size="6" />
|
<div className="flex mb-3 space-x-4">
|
||||||
<SocialIcon kind="github" href={siteMetadata.github} size="6" />
|
<SocialIcon kind="mail" href={`mailto:${siteMetadata.email}`} size="6" />
|
||||||
<SocialIcon kind="facebook" href={siteMetadata.facebook} size="6" />
|
<SocialIcon kind="github" href={siteMetadata.github} size="6" />
|
||||||
<SocialIcon kind="youtube" href={siteMetadata.youtube} size="6" />
|
<SocialIcon kind="facebook" href={siteMetadata.facebook} size="6" />
|
||||||
<SocialIcon kind="linkedin" href={siteMetadata.linkedin} size="6" />
|
<SocialIcon kind="youtube" href={siteMetadata.youtube} size="6" />
|
||||||
<SocialIcon kind="twitter" href={siteMetadata.twitter} size="6" />
|
<SocialIcon kind="linkedin" href={siteMetadata.linkedin} size="6" />
|
||||||
</div>
|
<SocialIcon kind="twitter" href={siteMetadata.twitter} size="6" />
|
||||||
<div className="flex mb-2 space-x-2 text-sm text-gray-500 dark:text-gray-400">
|
</div>
|
||||||
<div>{siteMetadata.author}</div>
|
<div className="flex mb-2 space-x-2 text-sm text-gray-500 dark:text-gray-400">
|
||||||
<div>{` • `}</div>
|
<div>{siteMetadata.author}</div>
|
||||||
<div>{`© ${new Date().getFullYear()}`}</div>
|
<div>{` • `}</div>
|
||||||
<div>{` • `}</div>
|
<div>{`© ${new Date().getFullYear()}`}</div>
|
||||||
<Link href="/">{siteMetadata.title}</Link>
|
<div>{` • `}</div>
|
||||||
</div>
|
<Link href="/">{siteMetadata.title}</Link>
|
||||||
<div className="mb-8 text-sm text-gray-500 dark:text-gray-400">
|
</div>
|
||||||
<Link href="https://github.com/timlrx/tailwind-nextjs-starter-blog">
|
<div className="mb-8 text-sm text-gray-500 dark:text-gray-400">
|
||||||
Tailwind Nextjs Theme
|
<Link href="https://github.com/timlrx/tailwind-nextjs-starter-blog">
|
||||||
</Link>
|
Tailwind Nextjs Theme
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -7,9 +7,10 @@ const postDateTemplate = tinytime('{MMMM} {DD}, {YYYY}')
|
|||||||
|
|
||||||
export default function ListLayout({ posts, title }) {
|
export default function ListLayout({ posts, title }) {
|
||||||
const [searchValue, setSearchValue] = useState('')
|
const [searchValue, setSearchValue] = useState('')
|
||||||
const filteredBlogPosts = posts.filter((frontMatter) =>
|
const filteredBlogPosts = posts.filter((frontMatter) => {
|
||||||
frontMatter.title.toLowerCase().includes(searchValue.toLowerCase())
|
const searchContent = frontMatter.title + frontMatter.summary + frontMatter.tags.join(' ')
|
||||||
)
|
return searchContent.toLowerCase().includes(searchValue.toLowerCase())
|
||||||
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|||||||
@ -19,105 +19,109 @@ export default function PostLayout({ children, frontMatter, next, prev }) {
|
|||||||
return (
|
return (
|
||||||
<SectionContainer>
|
<SectionContainer>
|
||||||
<BlogSeo url={`${siteMetdata.siteUrl}/blog/${frontMatter.slug}`} {...frontMatter} />
|
<BlogSeo url={`${siteMetdata.siteUrl}/blog/${frontMatter.slug}`} {...frontMatter} />
|
||||||
<article className="xl:divide-y xl:divide-gray-200 xl:dark:divide-gray-700">
|
<article>
|
||||||
<header className="pt-6 xl:pb-6">
|
<div className="xl:divide-y xl:divide-gray-200 xl:dark:divide-gray-700">
|
||||||
<div className="space-y-1 text-center">
|
<header className="pt-6 xl:pb-6">
|
||||||
<dl className="space-y-10">
|
<div className="space-y-1 text-center">
|
||||||
<div>
|
<dl className="space-y-10">
|
||||||
<dt className="sr-only">Published on</dt>
|
<div>
|
||||||
<dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
|
<dt className="sr-only">Published on</dt>
|
||||||
<time dateTime={date}>{postDateTemplate.render(new Date(date))}</time>
|
<dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
|
||||||
</dd>
|
<time dateTime={date}>{postDateTemplate.render(new Date(date))}</time>
|
||||||
</div>
|
</dd>
|
||||||
</dl>
|
|
||||||
<div>
|
|
||||||
<PageTitle>{title}</PageTitle>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<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"
|
|
||||||
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 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">
|
|
||||||
<dt className="sr-only">Name</dt>
|
|
||||||
<dd className="text-gray-900 dark:text-gray-100">{siteMetdata.author}</dd>
|
|
||||||
<dt className="sr-only">Twitter</dt>
|
|
||||||
<dd>
|
|
||||||
<Link
|
|
||||||
href={siteMetdata.twitter}
|
|
||||||
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
|
|
||||||
>
|
|
||||||
{siteMetdata.twitter.replace('https://twitter.com/', '@')}
|
|
||||||
</Link>
|
|
||||||
</dd>
|
|
||||||
</dl>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</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="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>
|
|
||||||
{` • `}
|
|
||||||
<Link href={editUrl(fileName)}>{'View on GitHub'}</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<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 text-gray-500 uppercase dark:text-gray-400">
|
|
||||||
Tags
|
|
||||||
</h2>
|
|
||||||
<div className="space-x-3 xl:flex xl:flex-col xl:space-x-0">
|
|
||||||
{tags.map((tag) => (
|
|
||||||
<Tag key={tag} text={tag} />
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
|
</dl>
|
||||||
|
<div>
|
||||||
|
<PageTitle>{title}</PageTitle>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
{(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 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">
|
|
||||||
<Link href={`/blog/${prev.slug}`}>{prev.title}</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{next && (
|
|
||||||
<div>
|
|
||||||
<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">
|
|
||||||
<Link href={`/blog/${next.slug}`}>{next.title}</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="pt-4 xl:pt-8">
|
|
||||||
<Link
|
|
||||||
href="/blog"
|
|
||||||
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
|
|
||||||
>
|
|
||||||
← Back to the blog
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</header>
|
||||||
|
<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"
|
||||||
|
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 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">
|
||||||
|
<dt className="sr-only">Name</dt>
|
||||||
|
<dd className="text-gray-900 dark:text-gray-100">{siteMetdata.author}</dd>
|
||||||
|
<dt className="sr-only">Twitter</dt>
|
||||||
|
<dd>
|
||||||
|
<Link
|
||||||
|
href={siteMetdata.twitter}
|
||||||
|
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
|
||||||
|
>
|
||||||
|
{siteMetdata.twitter.replace('https://twitter.com/', '@')}
|
||||||
|
</Link>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</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="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>
|
||||||
|
{` • `}
|
||||||
|
<Link href={editUrl(fileName)}>{'View on GitHub'}</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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">
|
||||||
|
{tags && (
|
||||||
|
<div className="py-4 xl:py-8">
|
||||||
|
<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">
|
||||||
|
{tags.map((tag) => (
|
||||||
|
<Tag key={tag} text={tag} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{(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 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">
|
||||||
|
<Link href={`/blog/${prev.slug}`}>{prev.title}</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{next && (
|
||||||
|
<div>
|
||||||
|
<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">
|
||||||
|
<Link href={`/blog/${next.slug}`}>{next.title}</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="pt-4 xl:pt-8">
|
||||||
|
<Link
|
||||||
|
href="/blog"
|
||||||
|
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
|
||||||
|
>
|
||||||
|
← Back to the blog
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</SectionContainer>
|
</SectionContainer>
|
||||||
|
|||||||
@ -37,40 +37,45 @@ export default function Home({ posts }) {
|
|||||||
const { slug, date, title, summary, tags } = frontMatter
|
const { slug, date, title, summary, tags } = frontMatter
|
||||||
return (
|
return (
|
||||||
<li key={slug} className="py-12">
|
<li key={slug} className="py-12">
|
||||||
<article className="space-y-2 xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline">
|
<article>
|
||||||
<dl>
|
<div className="space-y-2 xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline">
|
||||||
<dt className="sr-only">Published on</dt>
|
<dl>
|
||||||
<dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
|
<dt className="sr-only">Published on</dt>
|
||||||
<time dateTime={date}>{postDateTemplate.render(new Date(date))}</time>
|
<dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
|
||||||
</dd>
|
<time dateTime={date}>{postDateTemplate.render(new Date(date))}</time>
|
||||||
</dl>
|
</dd>
|
||||||
<div className="space-y-5 xl:col-span-3">
|
</dl>
|
||||||
<div className="space-y-6">
|
<div className="space-y-5 xl:col-span-3">
|
||||||
<div>
|
<div className="space-y-6">
|
||||||
<h2 className="text-2xl font-bold leading-8 tracking-tight">
|
<div>
|
||||||
<Link href={`/blog/${slug}`} className="text-gray-900 dark:text-gray-100">
|
<h2 className="text-2xl font-bold leading-8 tracking-tight">
|
||||||
{title}
|
<Link
|
||||||
</Link>
|
href={`/blog/${slug}`}
|
||||||
</h2>
|
className="text-gray-900 dark:text-gray-100"
|
||||||
<div className="space-x-3">
|
>
|
||||||
{tags.map((tag) => (
|
{title}
|
||||||
<Tag key={tag} text={tag} />
|
</Link>
|
||||||
))}
|
</h2>
|
||||||
|
<div className="space-x-3">
|
||||||
|
{tags.map((tag) => (
|
||||||
|
<Tag key={tag} text={tag} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="prose text-gray-500 max-w-none dark:text-gray-400">
|
||||||
|
{summary}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="prose text-gray-500 max-w-none dark:text-gray-400">
|
<div className="text-base font-medium leading-6">
|
||||||
{summary}
|
<Link
|
||||||
|
href={`/blog/${slug}`}
|
||||||
|
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
|
||||||
|
aria-label={`Read "${title}"`}
|
||||||
|
>
|
||||||
|
Read more →
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<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"
|
|
||||||
aria-label={`Read "${title}"`}
|
|
||||||
>
|
|
||||||
Read more →
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user