Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add commit changes to blog #259

Merged
merged 2 commits into from Jan 12, 2022
Merged

add commit changes to blog #259

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6f08859
feat(blog): add see changes button
theodorusclarence Jan 12, 2022
41d6efa
refactor: change links to constant
theodorusclarence Jan 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
43 changes: 31 additions & 12 deletions src/pages/blog/[slug].tsx
View file
Open in desktop
Expand Up @@ -4,6 +4,7 @@ import { getMDXComponent } from 'mdx-bundler/client';
import { GetStaticPaths, GetStaticProps } from 'next';
import * as React from 'react';
import { HiOutlineClock, HiOutlineEye } from 'react-icons/hi';
import { MdHistory } from 'react-icons/md';

import { trackEvent } from '@/lib/analytics';
import { cleanBlogPrefix } from '@/lib/helper';
Expand All @@ -26,6 +27,7 @@ import CloudinaryImg from '@/components/images/CloudinaryImg';
import Layout from '@/components/layout/Layout';
import CustomLink from '@/components/links/CustomLink';
import ShareTweetButton from '@/components/links/ShareTweetButton';
import UnstyledLink from '@/components/links/UnstyledLink';
import Seo from '@/components/Seo';
import Tooltip from '@/components/Tooltip';

Expand All @@ -47,6 +49,12 @@ export default function SingleBlogPage({
recommendations
);

//#region //*=========== Link Constants ===========
const COMMIT_HISTORY_LINK = `https://github.com/theodorusclarence/theodorusclarence.com/commits/main/src/contents/blog/${frontmatter.slug}.mdx`;
const GITHUB_EDIT_LINK = `https://github.com/theodorusclarence/theodorusclarence.com/blob/main/src/contents/blog/${frontmatter.slug}.mdx`;
const OG_BANNER_LINK = `https://res.cloudinary.com/theodorusclarence/image/upload/f_auto,c_fill,ar_4:5,w_1200/theodorusclarence/banner/${frontmatter.banner}`;
//#endregion //*======== Link Constants ===========

//#region //*=========== Blog Language ===========
const cleanSlug = cleanBlogPrefix(frontmatter.slug);
const isEnglish = cleanSlug === frontmatter.slug;
Expand Down Expand Up @@ -86,7 +94,7 @@ export default function SingleBlogPage({
templateTitle={frontmatter.title}
description={frontmatter.description}
isBlog
banner={`https://res.cloudinary.com/theodorusclarence/image/upload/f_auto,c_fill,ar_4:5,w_1200/theodorusclarence/banner/${frontmatter.banner}`}
banner={OG_BANNER_LINK}
date={new Date(
frontmatter.lastUpdated ?? frontmatter.publishedAt
).toISOString()}
Expand All @@ -111,15 +119,28 @@ export default function SingleBlogPage({
Written on{' '}
{format(new Date(frontmatter.publishedAt), 'MMMM dd, yyyy')} by
Theodorus Clarence.
{frontmatter.lastUpdated && (
<span className='font-medium text-gray-700 dark:text-gray-200'>
{' '}
</p>
{frontmatter.lastUpdated && (
<div className='flex flex-wrap gap-2 mt-2 text-sm text-gray-700 dark:text-gray-200'>
<p>
Last updated{' '}
{format(new Date(frontmatter.lastUpdated), 'MMMM dd, yyyy')}
</span>
)}
</p>
<div className='flex gap-2 justify-start items-center mt-2 text-sm font-medium text-gray-600 dark:text-gray-300'>
.
</p>
<UnstyledLink
href={COMMIT_HISTORY_LINK}
className={clsx(
'inline-flex gap-1 items-center font-medium rounded-sm',
'text-gray-600 dark:hover:text-primary-300 dark:text-gray-300 hover:text-gray-900',
'focus:outline-none focus-visible:ring focus-visible:ring-primary-300'
)}
>
<MdHistory className='text-lg' />
<span>See changes</span>
</UnstyledLink>
</div>
)}
<div className='flex gap-2 justify-start items-center mt-6 text-sm font-medium text-gray-600 dark:text-gray-300'>
<div className='flex gap-1 items-center'>
<HiOutlineClock className='inline-block text-base' />
<Accent>{frontmatter.readingTime.text}</Accent>
Expand Down Expand Up @@ -151,7 +172,7 @@ export default function SingleBlogPage({
{!frontmatter?.englishOnly && (
<CustomLink
href={`/blog/${isEnglish ? 'id-' : ''}${cleanSlug}`}
className='mt-2'
className='mt-4'
>
Read in {isEnglish ? 'Bahasa Indonesia' : 'English'}
</CustomLink>
Expand Down Expand Up @@ -219,9 +240,7 @@ export default function SingleBlogPage({
<SubscribeCard className='mt-12' title='Enjoying this post?' />

<div className='flex flex-col gap-4 items-start mt-8 md:flex-row-reverse md:justify-between'>
<CustomLink
href={`https://github.com/theodorusclarence/theodorusclarence.com/blob/main/src/contents/blog/${frontmatter.slug}.mdx`}
>
<CustomLink href={GITHUB_EDIT_LINK}>
Edit this on GitHub
</CustomLink>
<CustomLink href='/blog'>← Back to blog</CustomLink>
Expand Down