style all elements

src/blog/hello.md

@@ -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)

src/blog/markdown.md

@@ -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^ -->

src/blog/testing.md

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

src/components/Header.tsx

@@ -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; 

src/components/Image.tsx

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

src/components/PostList.tsx

@@ -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 >
+                    <pre style={{
-                    <Link style={{ paddingLeft: ".5rem" }} href={post.link} title={post.title} withArrow />
+                        paddingRight: ".5rem",
+                        paddingBottom: ".5rem"
+                    }} >{post.date}</pre>
+                    <Link href={post.link} title={post.title} withArrow />
                 </li>
             ))}
         </ul>

src/pages/blog/[...slug].tsx

@@ -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 }) => {
+const Post = (props: { post: string, slug: string }) => {
-    console.log(props.post)
+    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', ''))
+    let paths = listFiles(path).map(file => file.replace(path, "/blog").replace(/.mdx?/gmi, ''))
-    // console.log(paths)
     return {
         paths,
-        fallback: 'blocking'
+        fallback: true
     }
 }

src/styles/Header.module.sass

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

src/styles/Index.module.sass

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

src/styles/Link.module.sass

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

src/styles/PostList.module.sass

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

src/styles/Sidebar.module.sass

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

src/styles/_variables.sass

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

src/styles/main.sass

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