l/twilight
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

updated shit

Browse source
This commit is contained in:
Lio 2023-03-23 22:37:31 +01:00
parent 3b1589dde0
commit c1b0a6a470
14 changed files with 59 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/assets/blog/setup.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 186 KiB

BIN
public/favicon.ico
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 3 KiB

5
src/blog/markdown.md
View file

@ -1,8 +1,11 @@
--- ---
title: Markdown Elements title: Markdown Elements
date: 19-02-2023 date: [2023, 02, 19]
hidden: true
--- ---
> this is my testing page for markdown elements, ignore this
# Hi ~~Mars~~ Venus! 1 # Hi ~~Mars~~ Venus! 1
## Hi ~~Mars~~ Venus! 2 ## Hi ~~Mars~~ Venus! 2

6
src/blog/testing.md
View file

@ -1,6 +0,0 @@
---
title: Testing
date: 19-02-2023
---
# Hi ~~Mars~~ Venus!

2
src/components/PostList.tsx
View file

@ -4,8 +4,6 @@ import styles from "@/styles/PostList.module.sass"
const PostList = ({ posts }: { const PostList = ({ posts }: {
posts: [{ title: string, date: string, link: string }] posts: [{ title: string, date: string, link: string }]
}) => { }) => {
return ( return (
<ul className={styles.blog_posts}> <ul className={styles.blog_posts}>
{posts.map(post => ( {posts.map(post => (

5
src/lib/constants.ts
View file

@ -9,10 +9,9 @@ const constants = {
cohost: "https://cohost.org/lio", cohost: "https://cohost.org/lio",
twitter: "https://twitter.com/@himbolion", twitter: "https://twitter.com/@himbolion",
git: "https://git.lio.cat/l", git: "https://git.lio.cat/l",
github: "https://github.com/@himbolion", github: "https://github.com/himbolion",
libera: "https://liberapay.com/himbolion/",
email: "mailto:twilight@lio.zone", email: "mailto:twilight@lio.zone",
} }
} }
export default constants export default constants

17
src/lib/getFrontmatter.ts
View file

@ -1,7 +1,22 @@
import { readFileSync } from "fs"; import { readFileSync } from "fs";
import matter from "gray-matter"; import matter from "gray-matter";
export default function (path: string) { type Frontmatter<I extends string | Buffer> = {
data: Partial<{
title: string
date: number[]
hidden: boolean
draft: boolean
}>
content: string
excerpt?: string
orig: Buffer | I
language: string
matter: string
stringify(lang: string): string
}
export default function (path: string): Frontmatter<string> {
return matter(readFileSync(path, 'utf8')) return matter(readFileSync(path, 'utf8'))
} }

1
src/lib/profiles.ts
View file

@ -4,6 +4,7 @@ const getProfiles = () => {
return [ return [
{ site: "fediverse", link: constants.socials.fedi }, { site: "fediverse", link: constants.socials.fedi },
{ site: "twitter", link: constants.socials.twitter }, { site: "twitter", link: constants.socials.twitter },
{ site: "liberapay", link: constants.socials.libera },
{ site: "cohost", link: constants.socials.cohost }, { site: "cohost", link: constants.socials.cohost },
{ site: "forgejo", link: constants.socials.git }, { site: "forgejo", link: constants.socials.git },
{ site: "github", link: constants.socials.github }, { site: "github", link: constants.socials.github },

21
src/pages/blog/[...slug].tsx
View file

@ -9,13 +9,15 @@ import listFiles from "@/lib/listFiles";
import Markdown from 'markdown-to-jsx'; import Markdown from 'markdown-to-jsx';
import Link from "@/components/Link"; import Link from "@/components/Link";
import Image from "@/components/Image"; import Image from "@/components/Image";
import Header from "@/components/Header"; import Head from "next/head";
import { useRouter } from 'next/router' import matter from "gray-matter";
const Post = (props: { post: string, slug: string, matter: any }) => {
const Post = (props: { post: string, slug: string }) => {
const router = useRouter()
let Index = ( let Index = (
<main id={index.layout}> <main id={index.layout}>
<Head>
<title>{props.matter.title}</title>
</Head>
<Sidebar /> <Sidebar />
<section id={index.main}> <section id={index.main}>
<Markdown <Markdown
@ -28,13 +30,6 @@ const Post = (props: { post: string, slug: string }) => {
const ParaComponent = children[0]?.type?.name === 'img' ? 'div' : 'p' const ParaComponent = children[0]?.type?.name === 'img' ? 'div' : 'p'
return <ParaComponent {...props}>{children}</ParaComponent> return <ParaComponent {...props}>{children}</ParaComponent>
}, },
// h1: ({ ...props }) => <Header kind="h1" href={`${router.asPath}#${props.id}`} title={props.children} withArrow />,
// h2: ({ ...props }) => <Header kind="h2" href={`${router.asPath}#${props.id}`} title={props.children} withArrow />,
// h3: ({ ...props }) => <Header kind="h3" href={`${router.asPath}#${props.id}`} title={props.children} withArrow />,
// h4: ({ ...props }) => <Header kind="h4" href={`${router.asPath}#${props.id}`} title={props.children} withArrow />,
// h5: ({ ...props }) => <Header kind="h5" href={`${router.asPath}#${props.id}`} title={props.children} withArrow />,
// h6: ({ ...props }) => <Header kind="h6" href={`${router.asPath}#${props.id}`} title={props.children} withArrow />,
// h6: ({ pass_this, ...props }) => { console.log("h6", { pass_this, props }) },
} }
}} }}
/> />
@ -51,10 +46,10 @@ export async function getStaticProps(context: any) {
let post = await remark() let post = await remark()
.use(remarkFrontmatter) .use(remarkFrontmatter)
.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))}`))
// .then(r => r.value.)
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,
slug: context.params.slug slug: context.params.slug
} }
} }

16
src/pages/blog/index.tsx
View file

@ -6,10 +6,14 @@ import Lanyard from "@/components/Lanyard"
import listFiles from "@/lib/listFiles"; import listFiles from "@/lib/listFiles";
import getFrontmatter from "@/lib/getFrontmatter"; import getFrontmatter from "@/lib/getFrontmatter";
import PostList from "@/components/PostList"; import PostList from "@/components/PostList";
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 = ( let Index = (
<main id={index.layout}> <main id={index.layout}>
<Head>
<title>blog</title>
</Head>
<Sidebar /> <Sidebar />
<section id={index.blogMain}> <section id={index.blogMain}>
<h1>blog</h1> <h1>blog</h1>
@ -29,11 +33,21 @@ export async function getStaticProps() {
let posts = listFiles(blogPath) // let posts = listFiles(blogPath) //
let frontmatter = posts.map(post => { let frontmatter = posts.map(post => {
let matter = getFrontmatter(post).data let matter = getFrontmatter(post).data
// @ts-ignore
let date = new Date(matter.date)
return { return {
...matter, ...matter,
link: post.replace(blogPath, "/blog/").replace('.md', "").replace('.mdx', "") sort_date: date.toDateString(),
date: `${date.toLocaleDateString()}`,
link: post.replace(blogPath, "/blog").replace('.md', "").replace('.mdx', "")
} }
}) })
.filter((v, i) => { return !v.hidden })
.filter((v, i) => { return !v.draft })
.sort((a, b) => {
// @ts-ignore
return new Date(b.sort_date) - new Date(a.sort_date)
})
return { return {
props: { props: {
posts: frontmatter posts: frontmatter

13
src/pages/index.tsx
View file

@ -3,17 +3,24 @@ import RenderWithoutJS from "@/components/RenderWithoutJS";
import Sidebar from "@/components/Sidebar"; import Sidebar from "@/components/Sidebar";
import index from "@/styles/Index.module.sass" import index from "@/styles/Index.module.sass"
import Lanyard from "@/components/Lanyard" import Lanyard from "@/components/Lanyard"
import Head from "next/head"
import Link from "@/components/Link";
const IndexPage = () => { const IndexPage = () => {
let Index = ( let Index = (
<main id={index.layout}> <main id={index.layout}>
<Head>
<title>lio</title>
</Head>
<Sidebar /> <Sidebar />
<section id={index.main}> <section id={index.main}>
<h1>hey!</h1> <h1>hi there!</h1>
<p> <p>
my name's Lio, and I code sometimes my name's lio. i'm a 21y/o software engineer and student from germany.
{/* my name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimesmy name's Lio, and I code sometimes */}
</p> </p>
{/* <p>
you might know me from Projects like <Link />
</p> */}
</section> </section>
<Lanyard /> <Lanyard />
{/* <Copyright /> */} {/* <Copyright /> */}

2
src/styles/Index.module.sass
View file

@ -2,7 +2,7 @@
#layout #layout
max-width: 1000px max-width: 1000px
margin: 6rem 0 4rem 4rem margin: 5rem 0 0 1rem
display: inline-flex display: inline-flex
@media (max-width:600px) @media (max-width:600px)
display: inline-block display: inline-block

1
src/styles/Link.module.sass
View file

@ -10,5 +10,6 @@
.listLink .listLink
display: table display: table
line-height: 1rem
@media (max-width:600px) @media (max-width:600px)
display: inline-block display: inline-block

2
src/styles/main.sass
View file

@ -11,7 +11,7 @@ html
background: $dark background: $dark
color: $light color: $light
font-size: 20px font-size: 20px
line-height: 1 line-height: 1.3
scroll-behavior: smooth scroll-behavior: smooth
@font-face @font-face