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

style all elements

Browse source
This commit is contained in:
Lio 2023-02-19 22:27:55 +01:00
parent 85f8098bf8
commit 28728b8b19
14 changed files with 190 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/blog/hello.md
View file

@ -1,32 +0,0 @@
---
title: Markdown Elements
date: 19/02/2023
---
# Hi ~~Mars~~ Venus!
## Hi ~~Mars~~ Venus!
### Hi ~~Mars~~ Venus!
#### Hi ~~Mars~~ Venus!
##### Hi ~~Mars~~ Venus!
_italics_
**bold**
> blockquote
1. Ordered
2. Lists
- unordered
- lists
`code`
[A Link](../hello.md)
![Alt Text](http://placekitten.com/1000/500)

71
src/blog/markdown.md Normal file
View file

@ -0,0 +1,71 @@
---
title: Markdown Elements
date: 19-02-2023
---
# Hi ~~Mars~~ Venus! 1
## Hi ~~Mars~~ Venus! 2
### Hi ~~Mars~~ Venus! 3
#### Hi ~~Mars~~ Venus! 4
##### Hi ~~Mars~~ Venus! 5
###### Hi ~~Mars~~ Venus! 6
_italics_
**bold**
> blockquote
1. Ordered
2. Lists
- unordered
- lists
`code`
[A Link](../hello.md)
![Alt Text](http://placekitten.com/1000/500)
| Syntax | Description |
| --------- | ----------- |
| Header | Title |
| Paragraph | Text |
---
# fenced code block
```
{
"firstName": "John",
"lastName": "Smith",
"age": 25
}
```
<!-- Here's a sentence with a footnote. [^1]
[^1]: This is the footnote. -->
<!-- ### My Great Heading {#custom-id} -->
<!--
term
: definition -->
<!-- - [x] Write the press release
- [ ] Update the website
- [ ] Contact the media -->
<!-- That is so funny! :joy: -->
<!-- I need to highlight these ==very important words==. -->
<!-- H~2~O -->
<!-- X^2^ -->

6
src/blog/testing.md Normal file
View file

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

38
src/components/Header.tsx Normal file
View file

@ -0,0 +1,38 @@
import HeaderStyle from "@/styles/Header.module.sass"
import NextLink from "next/link"
const Header = ({ href, kind, title, asList = false, withArrow = true }: { href: string, kind: "h1" | "h2" | "h3" | "h4" | "h5" | "h6", title: string, asList?: boolean, withArrow?: boolean }) => {
let head;
switch (kind) {
case "h1":
head = <h1 className={HeaderStyle.link}>{title}{withArrow ? " ↗" : ""}</h1 >
break;
case "h2":
head = <h2 className={HeaderStyle.link}>{title}{withArrow ? " ↗" : ""}</h2 >
break;
case "h3":
head = <h3 className={HeaderStyle.link}>{title}{withArrow ? " ↗" : ""}</h3 >
break;
case "h4":
head = <h4 className={HeaderStyle.link}>{title}{withArrow ? " ↗" : ""}</h4 >
break;
case "h5":
head = <h5 className={HeaderStyle.link}>{title}{withArrow ? " ↗" : ""}</h5 >
break;
case "h6":
head = <h6 className={HeaderStyle.link}>{title}{withArrow ? " ↗" : ""}</h6 >
break;
default:
break;
}
return (
<NextLink href={href}>
{head}
</NextLink>
)
};
export default Header;

2
src/components/Image.tsx
View file

@ -1,3 +1,5 @@
const Image = ({ src, alt }: { src: string, alt: string }) => {
return (
<figure>

7
src/components/PostList.tsx
View file

@ -10,8 +10,11 @@ const PostList = ({ posts }: {
<ul className={styles.blog_posts}>
{posts.map(post => (
<li className={styles.blog_post_row}>
<pre>{post.date}</pre >
<Link style={{ paddingLeft: ".5rem" }} href={post.link} title={post.title} withArrow />
<pre style={{
paddingRight: ".5rem",
paddingBottom: ".5rem"
}} >{post.date}</pre>
<Link href={post.link} title={post.title} withArrow />
</li>
))}
</ul>

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

@ -9,9 +9,12 @@ import listFiles from "@/lib/listFiles";
import Markdown from 'markdown-to-jsx';
import Link from "@/components/Link";
import Image from "@/components/Image";
import Header from "@/components/Header";
import { useRouter } from 'next/router'
const Post = (props: { post: string }) => {
console.log(props.post)
const Post = (props: { post: string, slug: string }) => {
const router = useRouter()
console.log(router.asPath)
let Index = (
<main id={index.layout}>
<Sidebar />
@ -20,17 +23,22 @@ const Post = (props: { post: string }) => {
children={props.post}
options={{
overrides: {
a: ({ ...props }) => <Link href={props.href} title={props.children[0]} withArrow />,
a: ({ ...props }) => <Link href={props.href} title={props.children} withArrow />,
img: ({ ...props }) => <Image src={props.src} alt={props.alt} />,
p: ({ children, ...props }) => {
const ParaComponent = children[0]?.type?.name === 'img' ? 'div' : 'p'
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 }) },
}
}}
/>
</section>
<Lanyard />
</main>
@ -43,10 +51,12 @@ export default Post
export async function getStaticProps(context: any) {
let post = await remark()
.use(remarkFrontmatter)
.process(await read(`${listFiles('./src/blog').filter(file => file.includes(context.params.slug))[0]}`))
.process(await read(`${listFiles('./src/blog').find(file => file.includes(context.params.slug))}`))
// .then(r => r.value.)
return {
props: {
post: (post.value as string).replace(/(---)\n*([a-zA-Z0-9\/_:\s*]*)*(---)/gmi, "")
post: (post.value as string).replace(/(---)\n*([a-zA-Z0-9\/_:-\s*]*)*/mi, ""),
slug: context.params.slug
}
}
}
@ -54,10 +64,9 @@ export async function getStaticProps(context: any) {
export async function getStaticPaths() {
let path = './src/blog'
let paths = listFiles(path).map(file => file.replace(path, "/blog/").replace('.md', '').replace('.mdx', ''))
// console.log(paths)
let paths = listFiles(path).map(file => file.replace(path, "/blog").replace(/.mdx?/gmi, ''))
return {
paths,
fallback: 'blocking'
fallback: true
}
}

11
src/styles/Header.module.sass Normal file
View file

@ -0,0 +1,11 @@
@import "./_variables"
.listLink, .link
color: $link
text-decoration: none
padding-top: .5rem
// padding-bottom: .5rem
padding-left: .5rem
border-radius: 8px
&:hover
background: $link-hover

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

@ -9,6 +9,8 @@
#main
padding-right: 2rem
#blogMain
padding-right: 2rem
// padding-left: 2rem
@media (max-width:600px)
padding: 0
h1
padding: 0 0 1rem 0

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

@ -6,7 +6,6 @@
padding: .2rem
border-radius: 8px
&:hover
background: $link-hover
.listLink

3
src/styles/PostList.module.sass
View file

@ -4,4 +4,7 @@
.blog_post_row
display: flex
align-items: baseline
@media (max-width:600px)
display: block
// padding-left: 2rem

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

@ -1,7 +1,7 @@
@import '_variables'
#sidebar
margin-right: 2rem
min-width: 200px
.me
font-size: $h1-size

10
src/styles/_variables.sass
View file

@ -1,8 +1,16 @@
// colors
$dark: #222
$darker: #111
$darklight: #333
$light: #ffffff
$link: #ff802c
$link-hover: #ff802c48
// font sizes
//
$h1-size: 1.6em
$border-radius: 10px

23
src/styles/main.sass
View file

@ -1,6 +1,6 @@
@import '_variables'
*
*:not(hr,table,th,td)
padding: 0
margin: 0
text-decoration: none
@ -12,6 +12,7 @@ html
color: $light
font-size: 20px
line-height: 1
scroll-behavior: smooth
@font-face
font-family: "Flachbau"
@ -34,6 +35,8 @@ ul,ol
section
display: inline-block
// blog stuff
del
text-decoration: line-through
color: #555
@ -44,7 +47,7 @@ ins
blockquote
padding-left: 15px
border-left: 3px solid #d7d7db
border-left: 5px solid #d7d7db
font-size: 1rem
figure
@ -54,3 +57,19 @@ figure
margin: 1rem auto
img
max-width: 100%
table
background-color: $darklight
color: $light
border-radius: $border-radius
th
// border-bottom: 5px solid $dark
text-align: left
th, td
padding: 1em !important
pre:has(code)
background: $darker
padding: .5rem
// border-radius: $border-radius
border: 3px solid $darklight