Skip to content

Commit dce0715

Browse files
Chocolate1999Chocolate1999
committed
feat: 完成博客详情页改造 & 移动端适配
1 parent 5bf68da commit dce0715

File tree

10 files changed

+112
-83
lines changed

10 files changed

+112
-83
lines changed

‎src/components/content/Comment.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,10 @@ import { Theme } from '@giscus/react';
22
import Giscus from '@giscus/react';
33
import { useTheme } from 'next-themes';
44

5-
import { commentFlag } from '@/constants/env';
6-
75
export default function Comment() {
86
const { theme } = useTheme();
97

10-
return commentFlag ? (
8+
return (
119
<Giscus
1210
key={theme}
1311
repo='Chocolate1999/nextjs-tailwind-blog'
@@ -20,5 +18,5 @@ export default function Comment() {
2018
loading='lazy'
2119
theme={theme as Theme}
2220
/>
23-
) : null;
21+
);
2422
}

‎src/components/content/TableOfContents.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export default function TableOfContents({
5959
id='toc-container'
6060
className='block max-h-[calc(100vh-9rem-113px)] overflow-auto pb-4'
6161
>
62-
<h3 className='text-xl text-gray-900 dark:text-gray-100'>
62+
<h3 className='text-xl text-gray-900 dark:text-gray-100 dark:opacity-90'>
6363
Table of Contents
6464
</h3>
6565
<div className='mt-4 flex flex-col space-y-2 text-sm'>

‎src/components/layout/Layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
88
<>
99
<Header />
1010
<div className='layout'>
11-
<div className='mx-8'>
11+
<div className='mx-8 mb:mx-4'>
1212
{children}
1313
<Footer />
1414
</div>

‎src/components/links/TOCLink.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,12 @@ export default function TOCLink({
2424
id={`link-${id}`}
2525
className={clsx(
2626
'font-medium hover:text-gray-700 focus:outline-none dark:hover:text-gray-200',
27-
'focus-visible:text-gray-700 dark:focus-visible:text-gray-200',
27+
'focus-visible:text-gray-700 dark:opacity-90 dark:focus-visible:text-gray-200',
2828
activeSection === id
2929
? 'text-gray-900 dark:text-gray-100'
3030
: 'text-gray-400 dark:text-gray-500'
3131
)}
32-
style={{ marginLeft: (level - minLevel) * 16 }}
32+
style={{ marginLeft: (level - minLevel) * 8 }}
3333
>
3434
{text}
3535
</UnstyledLink>

‎src/pages/blog/[slug].tsx‎

Lines changed: 62 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import useScrollSpy from '@/hooks/useScrollspy';
1515

1616
import BlogCard from '@/components/content/blog/BlogCard';
1717
import Comment from '@/components/content/Comment';
18-
import LikeButton from '@/components/content/LikeButton';
1918
import MDXComponents from '@/components/content/MDXComponents';
2019
import ReloadDevtool from '@/components/content/ReloadDevtool';
2120
import TableOfContents, {
@@ -96,71 +95,69 @@ export default function SingleBlogPage({
9695

9796
<main>
9897
<ReloadDevtool />
99-
<section className='pt-[60px]'>
98+
<section className=''>
10099
<div className='layout pt-8'>
101-
<div className='rounded-[8px] bg-white p-4 shadow dark:border-gray-600 dark:bg-[#121212]'>
102-
<h1 className='mt-4 text-3xl dark:text-gray-100'>
103-
{frontmatter.title}
104-
</h1>
105-
106-
<p className='mt-2 text-sm text-gray-600 dark:text-gray-300'>
107-
Written on{' '}
108-
{format(new Date(frontmatter.publishedAt), 'MMMM dd, yyyy')} by
109-
Chocolate.
110-
</p>
111-
{frontmatter.lastUpdated && (
112-
<div className='mt-2 flex flex-wrap gap-2 text-sm text-gray-700 dark:text-gray-200'>
113-
<p>
114-
Last updated{' '}
115-
{format(new Date(frontmatter.lastUpdated), 'MMMM dd, yyyy')}
116-
.
117-
</p>
118-
<UnstyledLink
119-
href={COMMIT_HISTORY_LINK}
120-
className={clsx(
121-
'inline-flex items-center gap-1 rounded-sm font-medium',
122-
'text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-primary-300',
123-
'focus:outline-none focus-visible:ring focus-visible:ring-primary-300'
124-
)}
125-
>
126-
<MdHistory className='text-lg' />
127-
<span>See changes</span>
128-
</UnstyledLink>
129-
</div>
130-
)}
131-
<div className='mt-6 flex items-center justify-start gap-2 text-sm font-medium text-gray-600 dark:text-gray-300'>
132-
<div className='flex items-center gap-1'>
133-
<HiOutlineClock className='inline-block text-base' />
134-
{frontmatter.readingTime.text}
135-
</div>
136-
{meta?.devtoViews ? (
137-
<Tooltip
138-
content={
139-
<>
140-
{meta.devtoViews.toLocaleString()} views on{' '}
141-
<CustomLink href='https://dev.to/theodorusclarence'>
142-
dev.to
143-
</CustomLink>
144-
</>
145-
}
146-
position='bottom'
147-
>
100+
<section className='grid grid-cols-[auto,334px] gap-8 mid:grid-cols-none'>
101+
<article className='mdx prose dark:prose-invert mx-auto mt-4 w-full rounded-[8px] border border-white bg-white px-8 py-6 shadow transition-colors dark:border-gray-600 dark:bg-[#121212] mb:px-4 mb:pt-0'>
102+
<span className='mt-0 block border-b-[1px] border-solid border-b-[#eee] pb-[0.2em] text-3xl font-normal leading-normal text-[#1f2d3d] dark:border-b-gray-600 dark:text-[#fff] dark:opacity-90'>
103+
{frontmatter.title}
104+
</span>
105+
<p className='mt-2 text-sm text-gray-600 dark:text-gray-300'>
106+
Written on{' '}
107+
{format(new Date(frontmatter.publishedAt), 'MMMM dd, yyyy')}
108+
</p>
109+
{frontmatter.lastUpdated && (
110+
<div className='mt-2 flex flex-wrap gap-2 text-sm text-gray-700 dark:text-gray-200'>
111+
<p>
112+
Last updated{' '}
113+
{format(
114+
new Date(frontmatter.lastUpdated),
115+
'MMMM dd, yyyy'
116+
)}
117+
.
118+
</p>
119+
<UnstyledLink
120+
href={COMMIT_HISTORY_LINK}
121+
className={clsx(
122+
'inline-flex items-center gap-1 rounded-sm font-medium',
123+
'text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-primary-300',
124+
'focus:outline-none focus-visible:ring focus-visible:ring-primary-300'
125+
)}
126+
>
127+
<MdHistory className='text-lg' />
128+
<span>See changes</span>
129+
</UnstyledLink>
130+
</div>
131+
)}
132+
<div className='mt-2 flex items-center justify-start gap-2 text-sm font-medium text-gray-600 dark:text-gray-300'>
133+
<div className='flex items-center gap-1'>
134+
<HiOutlineClock className='inline-block text-base' />
135+
{frontmatter.readingTime.text}
136+
</div>
137+
{meta?.devtoViews ? (
138+
<Tooltip
139+
content={
140+
<>
141+
{meta.devtoViews.toLocaleString()} views on{' '}
142+
<CustomLink href='https://dev.to/theodorusclarence'>
143+
dev.to
144+
</CustomLink>
145+
</>
146+
}
147+
position='bottom'
148+
>
149+
<div className='flex items-center gap-1'>
150+
<HiOutlineEye className='inline-block text-base' />
151+
{meta?.views?.toLocaleString() ?? '-'} views
152+
</div>
153+
</Tooltip>
154+
) : (
148155
<div className='flex items-center gap-1'>
149156
<HiOutlineEye className='inline-block text-base' />
150157
{meta?.views?.toLocaleString() ?? '-'} views
151158
</div>
152-
</Tooltip>
153-
) : (
154-
<div className='flex items-center gap-1'>
155-
<HiOutlineEye className='inline-block text-base' />
156-
{meta?.views?.toLocaleString() ?? '-'} views
157-
</div>
158-
)}
159-
</div>
160-
</div>
161-
162-
<section className='grid grid-cols-[auto,250px] gap-8'>
163-
<article className='mdx prose dark:prose-invert mx-auto mt-4 w-full rounded-[8px] bg-white px-4 py-6 shadow transition-colors dark:bg-[#121212]'>
159+
)}
160+
</div>
164161
<Component
165162
components={
166163
{
@@ -171,16 +168,16 @@ export default function SingleBlogPage({
171168
/>
172169
</article>
173170

174-
<aside className='py-4'>
171+
<aside className='py-4 mid:hidden'>
175172
<div className='sticky top-[84px] rounded-[8px] bg-white px-4 py-5 shadow dark:bg-[#121212]'>
176173
<TableOfContents
177174
toc={toc}
178175
minLevel={minLevel}
179176
activeSection={decodeURI(activeSection as string)}
180177
/>
181-
<div className='flex items-center justify-center py-8'>
178+
{/* <div className='flex items-center justify-center py-8'>
182179
<LikeButton slug={contentSlug} />
183-
</div>
180+
</div> */}
184181
</div>
185182
</aside>
186183
</section>
@@ -192,7 +189,7 @@ export default function SingleBlogPage({
192189
{populatedRecommendations.length > 0 && (
193190
<div className='mt-20 dark:text-gray-200'>
194191
<h2>Other posts that you might like</h2>
195-
<ul className='sm:grid-cols-2 mt-4 grid grid-cols-3 gap-4'>
192+
<ul className='mt-4 grid grid-cols-1 gap-4'>
196193
{populatedRecommendations.map((post, i) => (
197194
<BlogCard
198195
onClick={() => {

‎src/pages/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,8 +111,8 @@ export default function HomePage() {
111111

112112
<div data-fade='5' className='mt-4 flex'>
113113
<CustomLink href='/blog'>To Blog</CustomLink>
114-
<CustomLink href='/about' className='ml-6'>
115-
Learn more about me
114+
<CustomLink href='/projects' className='ml-6'>
115+
To Projects
116116
</CustomLink>
117117
</div>
118118
</div>

‎src/styles/globals.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,19 @@
2424
--color-primary-700: rgb(var(--tw-color-primary-700)); /* #0369a1 */
2525
--color-primary-800: rgb(var(--tw-color-primary-800)); /* #075985 */
2626
--color-primary-900: rgb(var(--tw-color-primary-900)); /* #0c4a6e */
27+
28+
--c-bg: #fff;
29+
--c-scrollbar: #eee;
30+
--c-scrollbar-hover: #bbb;
2731
/* #endregion /**======== Primary Color =========== */
2832
}
2933

34+
html.dark {
35+
--c-bg: #050505;
36+
--c-scrollbar: #111;
37+
--c-scrollbar-hover: #222;
38+
}
39+
3040
@layer base {
3141
/* inter var - latin */
3242
@font-face {
@@ -146,3 +156,22 @@
146156
@apply after:absolute after:inset-0 after:z-[-1] after:opacity-0 after:transition-opacity hover:after:opacity-100;
147157
@apply after:shadow-md dark:after:shadow-none;
148158
}
159+
160+
::-webkit-scrollbar {
161+
width: 6px;
162+
}
163+
::-webkit-scrollbar:horizontal {
164+
height: 6px;
165+
}
166+
::-webkit-scrollbar-track,
167+
::-webkit-scrollbar-corner {
168+
background: var(--c-bg);
169+
border-radius: 10px;
170+
}
171+
::-webkit-scrollbar-thumb {
172+
background: var(--c-scrollbar);
173+
border-radius: 10px;
174+
}
175+
::-webkit-scrollbar-thumb:hover {
176+
background: var(--c-scrollbar-hover);
177+
}

‎src/styles/mdx.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ li {
1010
}
1111

1212
.shadow {
13-
box-shadow: 3px 8px 6px rgba(7, 17, 27, 0.06);
13+
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.06);
1414
}
1515

1616
.prose code:not(:where([data-code-type='code-block'])) {
@@ -69,19 +69,19 @@ li {
6969
}
7070

7171
.mdx.prose h3 {
72-
font-size: 1em;
72+
font-size: 1.3em;
7373
}
7474

7575
.mdx.prose :where(h1, h2, h3, h4) {
76-
color: #06f;
76+
color: #1f2d3d;
7777
scroll-margin-top: 100px;
7878
position: relative;
7979
display: block;
80-
margin-right: 0.5rem;
81-
width: -moz-fit-content;
8280
width: fit-content;
81+
margin-right: 0.5rem;
8382
margin-bottom: 1rem;
8483
margin-top: 1.5rem;
84+
@apply dark:text-[#fff] dark:opacity-90;
8585
}
8686

8787
.mdx.prose :where(h1, h2, h3, h4) > a {

‎src/styles/nprogress.css‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,12 @@
44
}
55

66
#nprogress .bar {
7-
background: #0066ff;
8-
opacity: 0.8;
7+
background: #395;
8+
opacity: 0.75;
99
position: fixed;
1010
z-index: 1031;
1111
top: 0;
1212
left: 0;
13-
1413
width: 100%;
1514
height: 2px;
1615
}

‎tailwind.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@ module.exports = {
77
darkMode: 'class',
88
theme: {
99
screens: {
10+
lg: {
11+
max: '1920px',
12+
},
13+
mid: {
14+
max: '1320px',
15+
},
1016
laptop: {
1117
max: '1024px',
1218
},

0 commit comments

Comments
 (0)