redo the NoJS stuff

This commit is contained in:
Lio 2023-05-27 10:57:07 +02:00
parent c652fd1575
commit ba9c217156
3 changed files with 53 additions and 49 deletions

View file

@ -15,31 +15,33 @@ const Post = (props: { post: string, slug: string, matter: any }) => {
// console.log(props.matter) // console.log(props.matter)
let Index = ( return (
<main id={index.layout}> <RenderWithoutJS>
<Head> <main id={index.layout}>
<title>{props.matter}</title> <Head>
</Head> <title>{props.matter.title} | lio's blog</title>
<Sidebar /> </Head>
<section id={index.main}> <Sidebar />
<Markdown <section id={index.main}>
children={props.post} <Markdown
options={{ children={props.post}
overrides: { options={{
a: ({ ...props }) => <Link href={props.href} title={props.children} withArrow />, overrides: {
img: ({ ...props }) => <Image src={props.src} alt={props.alt} />, a: ({ ...props }) => <Link href={props.href} title={props.children} withArrow />,
p: ({ children, ...props }) => { img: ({ ...props }) => <Image src={props.src} alt={props.alt} />,
const ParaComponent = children[0]?.type?.name === 'img' ? 'div' : 'p' p: ({ children, ...props }) => {
return <ParaComponent {...props}>{children}</ParaComponent> const ParaComponent = children[0]?.type?.name === 'img' ? 'div' : 'p'
}, return <ParaComponent {...props}>{children}</ParaComponent>
} },
}} }
/> }}
</section> />
<Lanyard /> </section>
</main> <Lanyard />
</main>
</RenderWithoutJS>
); );
return <RenderWithoutJS children={Index} />
}; };
export default Post export default Post
@ -50,7 +52,7 @@ export async function getStaticProps(context: any) {
.process(await read(`${listFiles('./src/blog').find(file => file.includes(context.params.slug))}`)) .process(await read(`${listFiles('./src/blog').find(file => file.includes(context.params.slug))}`))
return { return {
props: { props: {
post: (post.value as string).replace(/(---)\n*([a-zA-Z0-9\/\[\]\"_:,\-\s*]*)*/mi, ""), post: (post.value as string).replace(/^(---)\n*([a-zA-Z0-9\/\#[\]\"_:,\-\s*]*)(---)$/mi, ""),
matter: matter(post.value).data, matter: matter(post.value).data,
slug: context.params.slug slug: context.params.slug
} }

View file

@ -9,10 +9,10 @@ import PostList from "@/components/PostList";
import Head from "next/head" import Head from "next/head"
const IndexPage = (props: { posts: [{ title: string, date: string, link: string }] }) => { const IndexPage = (props: { posts: [{ title: string, date: string, link: string }] }) => {
let Index = ( return (<RenderWithoutJS>
<main id={index.layout}> <main id={index.layout}>
<Head> <Head>
<title>blog</title> <title>lio's blog</title>
</Head> </Head>
<Sidebar /> <Sidebar />
<section id={index.blogMain}> <section id={index.blogMain}>
@ -22,8 +22,7 @@ const IndexPage = (props: { posts: [{ title: string, date: string, link: string
<Lanyard /> <Lanyard />
{/* <Copyright /> */} {/* <Copyright /> */}
</main> </main>
); </RenderWithoutJS>)
return <RenderWithoutJS children={Index} />
}; };
export default IndexPage export default IndexPage

View file

@ -13,29 +13,32 @@ function randomHello() {
const IndexPage = () => { const IndexPage = () => {
let Index = ( return (
<main id={index.layout}> <RenderWithoutJS>
<Head>
<title>lio</title> <main id={index.layout}>
</Head> <Head>
<Sidebar /> <title>lio</title>
<section id={index.main}> </Head>
<h1> <Sidebar />
<noscript>Hey there!</noscript> <section id={index.main}>
{randomHello()} <h1>
</h1> <noscript>Hey there!</noscript>
<p> {randomHello()}
my name's lio. i'm a 21y/o software dev student and ui designer from germany. </h1>
</p> <p>
{/* <p> my name's lio. i'm a 21y/o software dev student and ui designer from germany.
</p>
{/* <p>
you might know me from Projects like <Link /> you might know me from Projects like <Link />
</p> */} </p> */}
</section> </section>
<Lanyard /> <Lanyard />
{/* <Copyright /> */} {/* <Copyright /> */}
</main> </main>
</RenderWithoutJS>
); );
return <RenderWithoutJS children={Index} />
}; };
export default IndexPage export default IndexPage