Skip to content

Commit 8773b3b

Browse files
timlrxtimlrx
authored
Merge pull request #4 from timlrx/fix/safari
Fix/safari
2 parents 84a2bce + 146cd66 commit 8773b3b

File tree

4 files changed

+152
-140
lines changed

4 files changed

+152
-140
lines changed

‎components/Footer.js‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,28 @@ import SocialIcon from '@/components/social-icons'
44

55
export default function Footer() {
66
return (
7-
<footer className="flex flex-col items-center mt-16">
8-
<div className="flex mb-3 space-x-4">
9-
<SocialIcon kind="mail" href={`mailto:${siteMetadata.email}`} size="6" />
10-
<SocialIcon kind="github" href={siteMetadata.github} size="6" />
11-
<SocialIcon kind="facebook" href={siteMetadata.facebook} size="6" />
12-
<SocialIcon kind="youtube" href={siteMetadata.youtube} size="6" />
13-
<SocialIcon kind="linkedin" href={siteMetadata.linkedin} size="6" />
14-
<SocialIcon kind="twitter" href={siteMetadata.twitter} size="6" />
15-
</div>
16-
<div className="flex mb-2 space-x-2 text-sm text-gray-500 dark:text-gray-400">
17-
<div>{siteMetadata.author}</div>
18-
<div>{` • `}</div>
19-
<div>{`© ${new Date().getFullYear()}`}</div>
20-
<div>{` • `}</div>
21-
<Link href="/">{siteMetadata.title}</Link>
22-
</div>
23-
<div className="mb-8 text-sm text-gray-500 dark:text-gray-400">
24-
<Link href="https://github.com/timlrx/tailwind-nextjs-starter-blog">
25-
Tailwind Nextjs Theme
26-
</Link>
7+
<footer>
8+
<div className="flex flex-col items-center mt-16">
9+
<div className="flex mb-3 space-x-4">
10+
<SocialIcon kind="mail" href={`mailto:${siteMetadata.email}`} size="6" />
11+
<SocialIcon kind="github" href={siteMetadata.github} size="6" />
12+
<SocialIcon kind="facebook" href={siteMetadata.facebook} size="6" />
13+
<SocialIcon kind="youtube" href={siteMetadata.youtube} size="6" />
14+
<SocialIcon kind="linkedin" href={siteMetadata.linkedin} size="6" />
15+
<SocialIcon kind="twitter" href={siteMetadata.twitter} size="6" />
16+
</div>
17+
<div className="flex mb-2 space-x-2 text-sm text-gray-500 dark:text-gray-400">
18+
<div>{siteMetadata.author}</div>
19+
<div>{` • `}</div>
20+
<div>{`© ${new Date().getFullYear()}`}</div>
21+
<div>{` • `}</div>
22+
<Link href="/">{siteMetadata.title}</Link>
23+
</div>
24+
<div className="mb-8 text-sm text-gray-500 dark:text-gray-400">
25+
<Link href="https://github.com/timlrx/tailwind-nextjs-starter-blog">
26+
Tailwind Nextjs Theme
27+
</Link>
28+
</div>
2729
</div>
2830
</footer>
2931
)

‎layouts/ListLayout.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ const postDateTemplate = tinytime('{MMMM} {DD}, {YYYY}')
77

88
export default function ListLayout({ posts, title }) {
99
const [searchValue, setSearchValue] = useState('')
10-
const filteredBlogPosts = posts.filter((frontMatter) =>
11-
frontMatter.title.toLowerCase().includes(searchValue.toLowerCase())
12-
)
10+
const filteredBlogPosts = posts.filter((frontMatter) => {
11+
const searchContent = frontMatter.title + frontMatter.summary + frontMatter.tags.join(' ')
12+
return searchContent.toLowerCase().includes(searchValue.toLowerCase())
13+
})
1314

1415
return (
1516
<>

‎layouts/PostLayout.js‎

Lines changed: 91 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -19,105 +19,109 @@ export default function PostLayout({ children, frontMatter, next, prev }) {
1919
return (
2020
<SectionContainer>
2121
<BlogSeo url={`${siteMetdata.siteUrl}/blog/${frontMatter.slug}`} {...frontMatter} />
22-
<article className="xl:divide-y xl:divide-gray-200 xl:dark:divide-gray-700">
23-
<header className="pt-6 xl:pb-6">
24-
<div className="space-y-1 text-center">
25-
<dl className="space-y-10">
22+
<article>
23+
<div className="xl:divide-y xl:divide-gray-200 xl:dark:divide-gray-700">
24+
<header className="pt-6 xl:pb-6">
25+
<div className="space-y-1 text-center">
26+
<dl className="space-y-10">
27+
<div>
28+
<dt className="sr-only">Published on</dt>
29+
<dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
30+
<time dateTime={date}>{postDateTemplate.render(new Date(date))}</time>
31+
</dd>
32+
</div>
33+
</dl>
2634
<div>
27-
<dt className="sr-only">Published on</dt>
28-
<dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
29-
<time dateTime={date}>{postDateTemplate.render(new Date(date))}</time>
30-
</dd>
35+
<PageTitle>{title}</PageTitle>
3136
</div>
32-
</dl>
33-
<div>
34-
<PageTitle>{title}</PageTitle>
35-
</div>
36-
</div>
37-
</header>
38-
<div
39-
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"
40-
style={{ gridTemplateRows: 'auto 1fr' }}
41-
>
42-
<dl className="pt-6 pb-10 xl:pt-11 xl:border-b xl:border-gray-200 xl:dark:border-gray-700">
43-
<dt className="sr-only">Authors</dt>
44-
<dd>
45-
<ul className="flex justify-center space-x-8 xl:block sm:space-x-12 xl:space-x-0 xl:space-y-8">
46-
<li className="flex items-center space-x-2">
47-
<img src={siteMetdata.image} alt="avatar" className="w-10 h-10 rounded-full" />
48-
<dl className="text-sm font-medium leading-5 whitespace-nowrap">
49-
<dt className="sr-only">Name</dt>
50-
<dd className="text-gray-900 dark:text-gray-100">{siteMetdata.author}</dd>
51-
<dt className="sr-only">Twitter</dt>
52-
<dd>
53-
<Link
54-
href={siteMetdata.twitter}
55-
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
56-
>
57-
{siteMetdata.twitter.replace('https://twitter.com/', '@')}
58-
</Link>
59-
</dd>
60-
</dl>
61-
</li>
62-
</ul>
63-
</dd>
64-
</dl>
65-
<div className="divide-y divide-gray-200 dark:divide-gray-700 xl:pb-0 xl:col-span-3 xl:row-span-2">
66-
<div className="pt-10 pb-8 prose dark:prose-dark max-w-none">{children}</div>
67-
<div className="pt-6 pb-6 text-sm text-gray-700 dark:text-gray-300">
68-
<Link href={discussUrl(slug)} rel="nofollow">
69-
{'Discuss on Twitter'}
70-
</Link>
71-
{` • `}
72-
<Link href={editUrl(fileName)}>{'View on GitHub'}</Link>
7337
</div>
74-
</div>
75-
<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">
76-
{tags && (
77-
<div className="py-4 xl:py-8">
78-
<h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">
79-
Tags
80-
</h2>
81-
<div className="space-x-3 xl:flex xl:flex-col xl:space-x-0">
82-
{tags.map((tag) => (
83-
<Tag key={tag} text={tag} />
84-
))}
85-
</div>
38+
</header>
39+
<div
40+
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"
41+
style={{ gridTemplateRows: 'auto 1fr' }}
42+
>
43+
<dl className="pt-6 pb-10 xl:pt-11 xl:border-b xl:border-gray-200 xl:dark:border-gray-700">
44+
<dt className="sr-only">Authors</dt>
45+
<dd>
46+
<ul className="flex justify-center space-x-8 xl:block sm:space-x-12 xl:space-x-0 xl:space-y-8">
47+
<li className="flex items-center space-x-2">
48+
<img src={siteMetdata.image} alt="avatar" className="w-10 h-10 rounded-full" />
49+
<dl className="text-sm font-medium leading-5 whitespace-nowrap">
50+
<dt className="sr-only">Name</dt>
51+
<dd className="text-gray-900 dark:text-gray-100">{siteMetdata.author}</dd>
52+
<dt className="sr-only">Twitter</dt>
53+
<dd>
54+
<Link
55+
href={siteMetdata.twitter}
56+
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
57+
>
58+
{siteMetdata.twitter.replace('https://twitter.com/', '@')}
59+
</Link>
60+
</dd>
61+
</dl>
62+
</li>
63+
</ul>
64+
</dd>
65+
</dl>
66+
<div className="divide-y divide-gray-200 dark:divide-gray-700 xl:pb-0 xl:col-span-3 xl:row-span-2">
67+
<div className="pt-10 pb-8 prose dark:prose-dark max-w-none">{children}</div>
68+
<div className="pt-6 pb-6 text-sm text-gray-700 dark:text-gray-300">
69+
<Link href={discussUrl(slug)} rel="nofollow">
70+
{'Discuss on Twitter'}
71+
</Link>
72+
{` • `}
73+
<Link href={editUrl(fileName)}>{'View on GitHub'}</Link>
8674
</div>
87-
)}
88-
{(next || prev) && (
89-
<div className="flex justify-between py-4 xl:block xl:space-y-8 xl:py-8">
90-
{prev && (
91-
<div>
75+
</div>
76+
<footer>
77+
<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">
78+
{tags && (
79+
<div className="py-4 xl:py-8">
9280
<h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">
93-
Previous Article
81+
Tags
9482
</h2>
95-
<div className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">
96-
<Link href={`/blog/${prev.slug}`}>{prev.title}</Link>
83+
<div className="space-x-3 xl:flex xl:flex-col xl:space-x-0">
84+
{tags.map((tag) => (
85+
<Tag key={tag} text={tag} />
86+
))}
9787
</div>
9888
</div>
9989
)}
100-
{next && (
101-
<div>
102-
<h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">
103-
Next Article
104-
</h2>
105-
<div className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">
106-
<Link href={`/blog/${next.slug}`}>{next.title}</Link>
107-
</div>
90+
{(next || prev) && (
91+
<div className="flex justify-between py-4 xl:block xl:space-y-8 xl:py-8">
92+
{prev && (
93+
<div>
94+
<h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">
95+
Previous Article
96+
</h2>
97+
<div className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">
98+
<Link href={`/blog/${prev.slug}`}>{prev.title}</Link>
99+
</div>
100+
</div>
101+
)}
102+
{next && (
103+
<div>
104+
<h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">
105+
Next Article
106+
</h2>
107+
<div className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">
108+
<Link href={`/blog/${next.slug}`}>{next.title}</Link>
109+
</div>
110+
</div>
111+
)}
108112
</div>
109113
)}
110114
</div>
111-
)}
112-
<div className="pt-4 xl:pt-8">
113-
<Link
114-
href="/blog"
115-
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
116-
>
117-
&larr; Back to the blog
118-
</Link>
119-
</div>
120-
</footer>
115+
<div className="pt-4 xl:pt-8">
116+
<Link
117+
href="/blog"
118+
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
119+
>
120+
&larr; Back to the blog
121+
</Link>
122+
</div>
123+
</footer>
124+
</div>
121125
</div>
122126
</article>
123127
</SectionContainer>

‎pages/index.js‎

Lines changed: 35 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -37,40 +37,45 @@ export default function Home({ posts }) {
3737
const { slug, date, title, summary, tags } = frontMatter
3838
return (
3939
<li key={slug} className="py-12">
40-
<article className="space-y-2 xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline">
41-
<dl>
42-
<dt className="sr-only">Published on</dt>
43-
<dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
44-
<time dateTime={date}>{postDateTemplate.render(new Date(date))}</time>
45-
</dd>
46-
</dl>
47-
<div className="space-y-5 xl:col-span-3">
48-
<div className="space-y-6">
49-
<div>
50-
<h2 className="text-2xl font-bold leading-8 tracking-tight">
51-
<Link href={`/blog/${slug}`} className="text-gray-900 dark:text-gray-100">
52-
{title}
53-
</Link>
54-
</h2>
55-
<div className="space-x-3">
56-
{tags.map((tag) => (
57-
<Tag key={tag} text={tag} />
58-
))}
40+
<article>
41+
<div className="space-y-2 xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline">
42+
<dl>
43+
<dt className="sr-only">Published on</dt>
44+
<dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
45+
<time dateTime={date}>{postDateTemplate.render(new Date(date))}</time>
46+
</dd>
47+
</dl>
48+
<div className="space-y-5 xl:col-span-3">
49+
<div className="space-y-6">
50+
<div>
51+
<h2 className="text-2xl font-bold leading-8 tracking-tight">
52+
<Link
53+
href={`/blog/${slug}`}
54+
className="text-gray-900 dark:text-gray-100"
55+
>
56+
{title}
57+
</Link>
58+
</h2>
59+
<div className="space-x-3">
60+
{tags.map((tag) => (
61+
<Tag key={tag} text={tag} />
62+
))}
63+
</div>
64+
</div>
65+
<div className="prose text-gray-500 max-w-none dark:text-gray-400">
66+
{summary}
5967
</div>
6068
</div>
61-
<div className="prose text-gray-500 max-w-none dark:text-gray-400">
62-
{summary}
69+
<div className="text-base font-medium leading-6">
70+
<Link
71+
href={`/blog/${slug}`}
72+
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
73+
aria-label={`Read "${title}"`}
74+
>
75+
Read more &rarr;
76+
</Link>
6377
</div>
6478
</div>
65-
<div className="text-base font-medium leading-6">
66-
<Link
67-
href={`/blog/${slug}`}
68-
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
69-
aria-label={`Read "${title}"`}
70-
>
71-
Read more &rarr;
72-
</Link>
73-
</div>
7479
</div>
7580
</article>
7681
</li>

0 commit comments

Comments
 (0)