From 61e589f0f4c82259ae7e9eb80a5d908affc08b79 Mon Sep 17 00:00:00 2001 From: Divlo Date: Sun, 21 May 2023 18:21:46 +0200 Subject: [PATCH] fix: responsive on blog post with code blocks and katex --- .eslintrc.json | 7 +- components/Header/index.tsx | 3 +- .../Profile/ProfileDescriptionBottom.tsx | 4 +- components/design/Section/index.tsx | 18 ++-- pages/blog/[slug].tsx | 86 ++++++++++--------- styles/global.css | 17 +++- 6 files changed, 77 insertions(+), 58 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 43b3b06..28c658f 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -4,12 +4,7 @@ "parserOptions": { "project": "./tsconfig.json" }, - "env": { - "node": true, - "browser": true - }, "rules": { - "prettier/prettier": "error", - "@next/next/no-img-element": "off" + "prettier/prettier": "error" } } diff --git a/components/Header/index.tsx b/components/Header/index.tsx index 52c7114..e60be63 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -21,6 +21,7 @@ export const Header: React.FC = (props) => { height={60} src='/images/divlo_icon_small.png' alt='Divlo' + priority /> Divlo @@ -37,7 +38,7 @@ export const Header: React.FC = (props) => { Blog - {showLanguage && } + {showLanguage ? : null} diff --git a/components/Profile/ProfileDescriptionBottom.tsx b/components/Profile/ProfileDescriptionBottom.tsx index 1ed5d73..22eea36 100644 --- a/components/Profile/ProfileDescriptionBottom.tsx +++ b/components/Profile/ProfileDescriptionBottom.tsx @@ -6,7 +6,7 @@ export const ProfileDescriptionBottom: React.FC = () => { return (

{t('home:about.description-bottom')} - {lang === 'fr' && ( + {lang === 'fr' ? ( <>

@@ -17,7 +17,7 @@ export const ProfileDescriptionBottom: React.FC = () => { Curriculum vitæ - )} + ) : null}

) } diff --git a/components/design/Section/index.tsx b/components/design/Section/index.tsx index 5073571..a2abf15 100644 --- a/components/design/Section/index.tsx +++ b/components/design/Section/index.tsx @@ -23,7 +23,9 @@ export const Section: React.FC = (props) => {
- {heading != null && {heading}} + {heading != null ? ( + {heading} + ) : null}
{children}
@@ -34,7 +36,7 @@ export const Section: React.FC = (props) => { if (withoutShadowContainer) { return (
- {heading != null && {heading}} + {heading != null ? {heading} : null}
{children}
) @@ -42,16 +44,18 @@ export const Section: React.FC = (props) => { return (
- {heading != null && ( - + {heading != null ? ( + {heading} - )} - {description != null && ( + ) : null} + {description != null ? (

{description}

- )} + ) : null}
{children}
diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx index b900bac..4f5012a 100644 --- a/pages/blog/[slug].tsx +++ b/pages/blog/[slug].tsx @@ -1,4 +1,5 @@ import type { GetStaticProps, GetStaticPaths, NextPage } from 'next' +import Image from 'next/image' import { MDXRemote } from 'next-mdx-remote' import date from 'date-and-time' import Giscus from '@giscus/react' @@ -29,51 +30,58 @@ const BlogPostPage: NextPage = (props) => { />
-
-
+
+

{post.frontmatter.title}

{date.format(new Date(post.frontmatter.publishedOn), 'DD/MM/YYYY')}

-
- { - const { src, alt, ...props } = properties - let source = src - source = src?.replace('../public/', '/') - return ( - - {alt} - - ) - }, - a: (props) => { - if (props.href?.startsWith('#') ?? false) { - return +