mirror of
https://github.com/theoludwig/theoludwig.git
synced 2024-09-09 09:45:52 +02:00
fix: responsive on blog post with code blocks and katex
This commit is contained in:
parent
dc5c3cee41
commit
61e589f0f4
@ -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"
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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} />
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user