1
1
mirror of https://github.com/theoludwig/theoludwig.git synced 2024-12-08 00:44:30 +01:00

fix: responsive on blog post with code blocks and katex

This commit is contained in:
Divlo 2023-05-21 18:21:46 +02:00
parent dc5c3cee41
commit 61e589f0f4
No known key found for this signature in database
GPG Key ID: 8F9478F220CE65E9
6 changed files with 77 additions and 58 deletions

View File

@ -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"
}
}

View File

@ -21,6 +21,7 @@ export const Header: React.FC<HeaderProps> = (props) => {
height={60}
src='/images/divlo_icon_small.png'
alt='Divlo'
priority
/>
<strong className='ml-1 hidden font-headline font-semibold text-yellow dark:text-yellow-dark xs:block'>
Divlo
@ -37,7 +38,7 @@ export const Header: React.FC<HeaderProps> = (props) => {
Blog
</Link>
</div>
{showLanguage && <Language />}
{showLanguage ? <Language /> : null}
<SwitchTheme />
</div>
</header>

View File

@ -6,7 +6,7 @@ export const ProfileDescriptionBottom: React.FC = () => {
return (
<p className='mb-8 mt-8 text-base font-normal text-gray dark:text-gray-dark'>
{t('home:about.description-bottom')}
{lang === 'fr' && (
{lang === 'fr' ? (
<>
<br />
<br />
@ -17,7 +17,7 @@ export const ProfileDescriptionBottom: React.FC = () => {
Curriculum vitæ
</a>
</>
)}
) : null}
</p>
)
}

View File

@ -23,7 +23,9 @@ export const Section: React.FC<SectionProps> = (props) => {
<div className='w-full px-3'>
<ShadowContainer style={{ marginTop: 50 }}>
<section {...rest}>
{heading != null && <SectionHeading>{heading}</SectionHeading>}
{heading != null ? (
<SectionHeading>{heading}</SectionHeading>
) : null}
<div className='w-full px-3'>{children}</div>
</section>
</ShadowContainer>
@ -34,7 +36,7 @@ export const Section: React.FC<SectionProps> = (props) => {
if (withoutShadowContainer) {
return (
<section {...rest}>
{heading != null && <SectionHeading>{heading}</SectionHeading>}
{heading != null ? <SectionHeading>{heading}</SectionHeading> : null}
<div className='w-full px-3'>{children}</div>
</section>
)
@ -42,16 +44,18 @@ export const Section: React.FC<SectionProps> = (props) => {
return (
<section {...rest}>
{heading != null && (
<SectionHeading style={{ ...(description != null && { margin: 0 }) }}>
{heading != null ? (
<SectionHeading
style={{ ...(description != null ? { margin: 0 } : {}) }}
>
{heading}
</SectionHeading>
)}
{description != null && (
) : null}
{description != null ? (
<p style={{ marginTop: 7 }} className='text-center'>
{description}
</p>
)}
) : null}
<div className='w-full px-3'>
<ShadowContainer>
<div className='w-full px-16 py-4 leading-8'>{children}</div>

View File

@ -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<BlogPostPageProps> = (props) => {
/>
<Header />
<main className='flex flex-1 flex-col flex-wrap items-center'>
<div className='my-10 flex flex-col items-center'>
<main className='break-wrap-words flex flex-1 flex-col flex-wrap items-center'>
<div className='my-10 flex flex-col items-center text-center'>
<h1 className='text-3xl font-semibold'>{post.frontmatter.title}</h1>
<p className='mt-2' data-cy='blog-post-date'>
{date.format(new Date(post.frontmatter.publishedOn), 'DD/MM/YYYY')}
</p>
</div>
<div className='prose mb-10 px-8'>
<MDXRemote
{...post.source}
components={{
img: (properties) => {
const { src, alt, ...props } = properties
let source = src
source = src?.replace('../public/', '/')
return (
<span className='flex flex-col items-center justify-center'>
<img src={source} alt={alt} {...props} />
</span>
)
},
a: (props) => {
if (props.href?.startsWith('#') ?? false) {
return <a {...props} />
<div className='prose mb-10'>
<div className='px-8'>
<MDXRemote
{...post.source}
components={{
img: (properties) => {
const { src = '', alt = 'Blog Image' } = properties
const source = src.replace('../public/', '/')
return (
<span className='flex flex-col items-center justify-center'>
<Image
src={source}
alt={alt}
width={1000}
height={1000}
className='h-auto w-auto'
/>
</span>
)
},
a: (props) => {
if (props.href?.startsWith('#') ?? false) {
return <a {...props} />
}
return (
<a target='_blank' rel='noopener noreferrer' {...props} />
)
}
return (
<a target='_blank' rel='noopener noreferrer' {...props} />
)
}
}}
/>
<Giscus
id='comments'
repo='Divlo/Divlo'
repoId='MDEwOlJlcG9zaXRvcnkzNTg5NDg1NDQ='
category='General'
categoryId='DIC_kwDOFWUewM4CQ_WK'
mapping='pathname'
reactionsEnabled='1'
emitMetadata='0'
inputPosition='top'
theme={theme}
lang='en'
loading='lazy'
/>
}}
/>
<Giscus
id='comments'
repo='Divlo/Divlo'
repoId='MDEwOlJlcG9zaXRvcnkzNTg5NDg1NDQ='
category='General'
categoryId='DIC_kwDOFWUewM4CQ_WK'
mapping='pathname'
reactionsEnabled='1'
emitMetadata='0'
inputPosition='top'
theme={theme}
lang='en'
loading='lazy'
/>
</div>
</div>
</main>
<Footer version={version} />

View File

@ -2,8 +2,13 @@
@tailwind components;
@tailwind utilities;
.break-wrap-words {
word-wrap: break-word;
word-break: break-word;
}
.prose {
@apply !max-w-4xl text-gray dark:text-gray-300;
@apply !max-w-5xl text-gray dark:text-gray-300;
}
.prose a,
@ -28,8 +33,6 @@
}
.shiki {
white-space: pre-wrap !important;
word-break: normal !important;
word-wrap: normal;
}
code {
counter-reset: step;
@ -43,4 +46,12 @@ code .line::before {
display: inline-block;
text-align: right;
color: rgba(133, 133, 133, 0.8);
word-wrap: normal;
word-break: normal;
}
.katex .base {
display: inline !important;
white-space: normal !important;
width: 100% !important;
}