blog render improvements

package.json

@@ -16,7 +16,18 @@
   },
   "type": "module",
   "dependencies": {
+    "katex": "^0.15.2",
     "luxon": "^2.3.1",
+    "rehype-autolink-headings": "^6.1.1",
+    "rehype-katex-svelte": "^1.0.3",
+    "rehype-slug": "^5.0.1",
+    "remark-extended-table": "^1.0.0",
+    "remark-gfm": "^3.0.1",
+    "remark-math": "2",
+    "remark-parse": "^10.0.1",
+    "remark-twemoji": "^0.1.1",
+    "twemoji": "^13.1.0",
+    "unist-util-visit": "2",
     "xterm": "^4.18.0"
   }
 }

src/lib/components/heroPost.svelte

@@ -10,7 +10,9 @@
 </script>
 
 <a href={path} class="post">
-    <img src={bigThumbnail} width="800" height="400" alt="Thumbnail" class="thumbnail" draggable={false}>
+    {#if bigThumbnail}
+        <img src={bigThumbnail} styles="width: 800px; height: 400px;" alt="Thumbnail" class="thumbnail" draggable={false}>
+    {/if}
     <div class="data">
         <!-- <div class="categories">
             {#each categories as category}

src/lib/components/post.svelte

@@ -7,6 +7,7 @@
     export var authorIcon;
     export var currentHover;
     export var path;
+    export var description
     
     var grayscale = false;
     $: grayscale = currentHover && currentHover !== title;
@@ -20,7 +21,11 @@
 </script>
 
 <a href={path} class="post" class:grayscale on:mouseenter={mouseenter} on:mouseleave={mouseleave}>
-    <img src={thumbnail} height="256" width="256" alt="Thumbnail" class="thumbnail" draggable={false}>
+    {#if thumbnail}
+        <img src={thumbnail} alt="Thumbnail" class="thumbnail" draggable={false}>
+    {:else}
+        <div style="width: 150px; height: 150px;"></div>
+    {/if}
     <div class="data">
         <!-- <div class="categories">
             {#each categories as category}
@@ -28,6 +33,7 @@
             {/each}
         </div> -->
         <h4>{title}</h4>
+        <p>{description}</p>
         <div class="author">
             <img src={authorIcon} alt="Avatar of author" draggable={false}>
             <span class="spacer">—</span>
@@ -58,14 +64,16 @@
     h4 {
         margin: 5px 0;
         font-weight: 400;
-        font-size: 18px;
+        font-size: 22px;
     }
-    .categories {
+    /* .categories {
         color: #0054E2;
-    }
+    } */
     .thumbnail {
         width: 150px;
+        height: 150px;
         margin-right: 15px;
+        object-fit: cover;
     }
     img {
         height: 100%;

src/lib/components/posts.svelte

@@ -9,7 +9,7 @@
     var currentHover = null;
 </script>
 
-<h2>Posts</h2>
+<h2><a href="/posts">Posts</a></h2>
 <div class="main">
     <div class="hero">
         <HeroPost {...heroPost} />

src/lib/layouts/post.svelte

@@ -23,7 +23,7 @@
     <meta property="og:type" content="article" />
     <meta property="og:article:published_time" content={date} />
     <meta property="og:article:author" content="Daniel Bulant" />
-    <meta property="og:article:tag" content={categories.join(" ")} />
+    <meta property="og:article:tag" content={categories && categories.join(" ") || ""} />
     <meta property="og:image" content={bigThumbnail} />
     <meta property="og:image:width" content="800" />
     <meta property="og:image:height" content="400" />
@@ -59,6 +59,44 @@
     }
     :global(body .post-layout a:hover) {
         color: rgb(2, 218, 218);
+    }
+    :global(body .post-layout table) {
+        border-spacing: 0;
+    }
+    :global(body .post-layout table thead tr th:first-child) {
+        border-top-left-radius: 5px;
+    }
+    :global(body .post-layout table thead tr th:last-child) {
+        border-top-right-radius: 5px;
+    }
+    :global(body .post-layout table th) {
+        border: 2px solid rgb(0, 0, 0);
+        background-color: rgb(211, 211, 211);
+        padding: 6px;
+    }
+    :global(.dark .post-layout table th) {
+        border: 2px solid white;
+        background-color: rgb(39, 39, 39);
+    }
+    :global(body .post-layout table td) {
+        border: 1px solid rgb(0, 0, 0);
+        padding: 4px;
+    }
+    :global(.dark .post-layout table td) {
+        border: 1px solid white;
+        padding: 4px;
+    }
+    :global(body .post-layout table tr:hover) {
+        background: rgb(196, 196, 196);
+    }
+    :global(.dark .post-layout table tr:hover) {
+        background: rgb(54, 54, 54);
+    }
+    :global(body .post-layout table tr:last-child td:first-child) {
+        border-bottom-left-radius: 5px;
+    }
+    :global(body .post-layout table tr:last-child td:last-child) {
+        border-bottom-right-radius: 5px;
     }
 	main {
         margin: 0 auto;

src/routes/posts/__layout.svelte

@@ -2,6 +2,10 @@
     import Navbar from "$lib/components/navbar.svelte";
 </script>
 
+<svelte:head>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css" integrity="sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ" crossorigin="anonymous">
+</svelte:head>
+
 <Navbar/>
 
-<slot />
+<slot />

src/routes/posts/writing-personal-home-page/index.md

@@ -3,8 +3,8 @@ title: Writing my personal home page
 date: 2022-03-05
 author: Daniel Bulant
 authorIcon: /logo.png
-thumbnail: https://picsum.photos/256?random=1
-bigThumbnail: https://picsum.photos/800/400?random=1
+thumbnail: /posts/writing-personal-home-page/2020-website-square.png
+bigThumbnail: /posts/writing-personal-home-page/2020-website.png
 categories: [programming, svelte]
 description: So I added blog to my personal home page.
 ---
@@ -13,14 +13,13 @@ description: So I added blog to my personal home page.
     import Button from "$lib/components/button.svelte";
     import darkmode from "$lib/stores/darkmode";
     import ExampleWrapper from "$lib/components/posts/exampleWrapper.svelte";
-    import Screenshot2020 from "./2020-website.png";
     import SimpleExample from "./_comp/simpleExample.svelte";
     import BidiExample from "./_comp/bidiExample.svelte";
 </script>
 
 I'm mainly a web developer, yet for quite a while, my personal site looked like this:
 
-<Image src={Screenshot2020}>
+<Image src="/posts/writing-personal-home-page/2020-website.png">
     Website from 2020. <a href="https://web.archive.org/web/20200807000708/https://danbulant.eu/">Snapshot on Wayback machine.</a>
 </Image>
 
@@ -135,7 +134,7 @@ After a while (*oh wait it's already a year*) I wanted to write some blog posts.
 
 The design from Carl was only a single page, but it did include some list of posts there (see the home page, also reused in the posts page), and I felt confident enough that I could code at least a text-first website without a design.
 
-To more easily write blog posts without writing HTML, I decided to use <img src="/tech/markdown.png" height="20px"> [Markdown](https://www.markdownguide.org/basic-syntax/).  
+To more easily write blog posts without writing HTML, I decided to use <img src="/tech/markdown.png" alt="" aria-hidden="true"  height="20px"> [Markdown](https://www.markdownguide.org/basic-syntax/).  
 To add more to that, I found [mdsvex](https://mdsvex.pngwn.io/), which allows one to use markdown from svelte, and use svelte from markdown.  
 Their website only specifies how to use it on classic Svelte (via rollup or webpack), but Svelte Kit hides this configuration (in addition to using vite in dev mode).
 
@@ -257,7 +256,7 @@ First iteration of this new design wasn't actually Svelte Kit, but only ``plain'
 
 This meant that the page was only client side, and the server only pre-compiled JS and sent only minimal HTML markup (which mostly just linked JS which did everything else). This meant the page didn't work without JS and took a bit to load.
 
-To fix that, I later moved it into Svelte Kit page (Svelte does support SSR, but it's easier to use Svelte Kit) and used the `static` adapter which meant that all the pages are now prerendered and work without JS. This also means it's fast to load (especially when using CDN, such as <img src="/tech/cloudflare.png" height="20px"> [Cloudflare](https://cloudflare.com), which this website does use. Not affiliated with them).
+To fix that, I later moved it into Svelte Kit page (Svelte does support SSR, but it's easier to use Svelte Kit) and used the `static` adapter which meant that all the pages are now prerendered and work without JS. This also means it's fast to load (especially when using CDN, such as <img src="/tech/cloudflare.png" alt="" aria-hidden="true" height="20px"> [Cloudflare](https://cloudflare.com), which this website does use. Not affiliated with them).
 
 If you use the `adapter-auto`, deploying to Cloudflare pages should work nearly as is, you just need to set `NODE_VERSION` environment variable to `14` or `16`, as it's by default set to `12` which is too old for Svelte kit to work.
 

static/global.css

@@ -89,4 +89,8 @@ body::-webkit-scrollbar {
 body::-webkit-scrollbar-thumb {
 	background-color: darkgrey;
 	outline: 1px solid slategrey;
+}
+
+p img.emoji {
+	height: 1em;
 }

svelte.config.js

@@ -1,5 +1,12 @@
 import adapter from '@sveltejs/adapter-static';
 import { mdsvex } from 'mdsvex';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeSlug from 'rehype-slug';
+import remarkMath from 'remark-math';
+import remarkTwemoji from 'remark-twemoji';
+import remarkGfm from 'remark-gfm';
+import remarkExtendedTable from 'remark-extended-table';
+import rehypeKatexSvelte from "rehype-katex-svelte";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -19,7 +26,18 @@ const config = {
 			smartypants: {
 				quotes: false,
 				backticks: "all"
-			}
+			},
+			rehypePlugins: [
+				rehypeSlug,
+				rehypeAutolinkHeadings,
+				rehypeKatexSvelte
+			],
+			remarkPlugins: [
+				remarkGfm,
+				remarkMath,
+				remarkTwemoji,
+				remarkExtendedTable
+			]
 		})
 	]
 };