hazemKrimi/personal-website
1
0
Fork 0
mirror of https://github.com/hazemKrimi/personal-website.git synced 2026-05-01 18:00:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add reading time

Browse Source
This commit is contained in:
Hazem Krimi
2021-08-17 14:41:46 +01:00
parent d08a4a12ca
commit 462bf261cf
3 changed files with 13 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -20,6 +20,7 @@
"prism-react-renderer": "^1.1.1", "prism-react-renderer": "^1.1.1",
"react": "17.0.1", "react": "17.0.1",
"react-dom": "17.0.1", "react-dom": "17.0.1",
"reading-time": "^1.4.0",
"styled-components": "^5.2.1" "styled-components": "^5.2.1"
}, },
"devDependencies": { "devDependencies": {
pages/blog/[slug].tsx
+7 -3
View File
@@ -13,10 +13,12 @@ import AllComponents from '../../components/All';
import Head from 'next/head'; import Head from 'next/head';
import IconButton from '../../components/IconButton'; import IconButton from '../../components/IconButton';
import CodeBlock from '../../components/CodeBlock'; import CodeBlock from '../../components/CodeBlock';
import readingTime from 'reading-time';
interface Props { interface Props {
source: MdxRemote.Source; source: MdxRemote.Source;
frontMatter: any; frontMatter: any;
text: string;
} }
const Wrapper = styled.div` const Wrapper = styled.div`
@@ -97,9 +99,10 @@ const Wrapper = styled.div`
const components = AllComponents; const components = AllComponents;
const BlogPost: FC<Props> = ({ source, frontMatter }) => { const BlogPost: FC<Props> = ({ source, frontMatter, text }) => {
const content = hydrate(source, { components }); const content = hydrate(source, { components });
const router = useRouter(); const router = useRouter();
const stats = readingTime(text);
useEffect(() => { useEffect(() => {
window.scrollTo(0, 0); window.scrollTo(0, 0);
@@ -149,7 +152,7 @@ const BlogPost: FC<Props> = ({ source, frontMatter }) => {
<h1>{frontMatter.title}</h1> <h1>{frontMatter.title}</h1>
<p>{frontMatter.description}</p> <p>{frontMatter.description}</p>
<p> <p>
Written by <b>{frontMatter.author}</b> on <b>{frontMatter.date}</b> By <b>{frontMatter.author}</b> on <b>{frontMatter.date}</b> ({stats.text})
</p> </p>
{frontMatter.tags && ( {frontMatter.tags && (
<div className='tags-wrapper'> <div className='tags-wrapper'>
@@ -190,7 +193,8 @@ export const getStaticProps: GetStaticProps = async ({ params }: any) => {
return { return {
props: { props: {
source: mdxSource, source: mdxSource,
frontMatter: data frontMatter: data,
text: content
} }
}; };
}; };
yarn.lock
+5
View File
@@ -3098,6 +3098,11 @@ readdirp@~3.5.0:
dependencies: dependencies:
picomatch "^2.2.1" picomatch "^2.2.1"
reading-time@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/reading-time/-/reading-time-1.4.0.tgz#53fd822ceed6ca44e07497b3e975af1712ba5a86"
integrity sha512-0I9aP583rqQhm6T6Y+pYgYaM4w649VHgQPC24xSWXpn/4qRs08Zu6KgXRf0da6/k7IHoC6idm76fU6vz4mmzHQ==
regenerate-unicode-properties@^8.2.0: regenerate-unicode-properties@^8.2.0:
version "8.2.0" version "8.2.0"
resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec" resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"