add landing page screen shot to readme

link repo from footer

package.json

@@ -32,9 +32,9 @@
     "@iconify/svelte": "^3.1.3",
     "@rollup/plugin-yaml": "^4.1.0",
     "@sveltejs/adapter-static": "^2.0.2",
-    "@sveltejs/kit": "^1.18.0",
-    "@typescript-eslint/eslint-plugin": "^5.59.7",
-    "@typescript-eslint/parser": "^5.59.7",
+    "@sveltejs/kit": "^1.20.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.8",
+    "@typescript-eslint/parser": "^5.59.8",
     "devalue": "^4.3.2",
     "eslint": "^8.41.0",
     "eslint-plugin-svelte3": "^4.0.0",
@@ -45,19 +45,19 @@
     "katex": "^0.16.7",
     "mdsvex": "^0.10.6",
     "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.0",
+    "prettier-plugin-svelte": "^2.10.1",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-katex-svelte": "^1.2.0",
     "rehype-slug": "^5.1.0",
     "remark-math": "3.0.0",
     "svelte": "^3.59.1",
-    "svelte-check": "^3.3.2",
+    "svelte-check": "^3.4.3",
     "svelte-multiselect": "^8.6.2",
-    "svelte-preprocess": "^5.0.3",
+    "svelte-preprocess": "^5.0.4",
     "svelte-preprocess-import-assets": "^1.0.0",
-    "svelte-zoo": "^0.4.5",
-    "svelte2tsx": "^0.6.14",
+    "svelte-zoo": "^0.4.6",
+    "svelte2tsx": "^0.6.15",
     "typescript": "^5.0.4",
-    "vite": "^4.3.8"
+    "vite": "^4.3.9"
   }
 }

readme.md

@@ -1,3 +1,5 @@
-# My Blog
+# [My Blog](https://janosh.dev)
 
-I write/plan to write about physics, machine learning, sustainability and web development.
+I write about things I learned in machine learning, data visualization, web development and coding best practices.
+
+![Landing Page](https://github.com/janosh/blog/assets/30958850/962918ab-f9f7-470b-a605-ebbfa11461b2)

src/lib/Footer.svelte

@@ -1,12 +1,25 @@
 <script>
+  import { repository as repo } from '$root/package.json'
   import Icon from '@iconify/svelte'
 </script>
 
 <button on:click={() => document.body.scrollIntoView({ behavior: `smooth` })}>
   <Icon icon="material-symbols:arrow-upward-rounded" />
 </button>
 
+<footer>
+  <a href={repo}><Icon icon="octicon:mark-github" width="20pt" />Source</a>
+</footer>
+
 <style>
+  footer {
+    margin: 3em;
+  }
+  footer a {
+    display: flex;
+    place-content: center;
+    gap: 5pt;
+  }
   button {
     position: absolute;
     bottom: 18pt;

src/routes/+page.svelte

@@ -50,7 +50,7 @@
     object-fit: cover;
     height: 10em;
     width: 10em;
-    margin: 1em auto 0;
+    margin: 4em auto 0;
   }
   h1 {
     margin: 0;

src/routes/posts/+layout.svelte

@@ -20,7 +20,7 @@
   />
 {/if}
 
-<h1>{title}</h1>
+<h1 style="margin: 2em 0 1em;">{title}</h1>
 <time>
   <Icon icon="carbon:calendar" inline />
   {date?.split(`T`)[0]}

src/routes/posts/no-nonsense-copy-buttons/+page.md

@@ -12,13 +12,13 @@ tags:
 
 <!-- also posted at https://github.com/pngwn/MDsveX/issues/385#issuecomment-1565811519 -->
 
-In the age of LLMs, we've entered a copy-paste world. Anything you do 20 times a day should be automated. Manually selecting text in the browser only to have unintended scrolling or weird page flow mess up the selection gets old fast. And don't get me started on mobile devices! Nowadays any blog, docs, and technical writing worth its salt needs proper code block copy buttons!
+Anything you do 20 times a day should be automated. Manually selecting text in the browser only to have unintended scrolling or weird page flow mess up the selection gets old fast. And don't get me started on mobile devices! Any blog, docs, or technical writing worth its salt needs code block with proper copy buttons!
 
-Luckily, the lowest-effort solution turns out to also be the most robust here... like fixing your device by simply turning it off and on again. Robust in the sense that these copy buttons apply to both code blocks in markdown and in Svelte components (which are not processed by MSveX). The only downside is that they flash on page load. Might try to fix that another day.
+Luckily, the lowest-effort solution turns out to be quite robust here... like fixing your device by simply turning it off and on again. Robust in the sense that these copy buttons apply to both code blocks in markdown and in Svelte components (which are not processed by MSveX). The only downside is that they flash on page load. Might try to fix that another day.
 
-## Cut to the Chase
+## 🔥 Cut to the Chase
 
-If your site is built with SvelteKit (as this one is), go to your root `+layout.svelte` file. Many other frameworks will have an equivalent file that wraps the base of your component tree. Using the `afterNavigate` function from SvelteKit's `$app/navigation`, which fires on page load and again on every page navigation, we can easily make the required DOM manipulations to prefix every code block with a Svelte component that renders a copy button. I'll use `CopyButton from 'svelte-zoo'` here but feel free to roll your own.
+If your site is built with SvelteKit (as mine is), go to your root `+layout.svelte` file. Many other frameworks will have an equivalent file that wraps the base of your component tree. Using the `afterNavigate` function from SvelteKit's `$app/navigation`, which fires on page load and again on every page navigation, we can easily make the required DOM manipulations to prefix every code block with a Svelte component that renders a copy button. I'll use `CopyButton from 'svelte-zoo'` here but feel free to roll your own.
 
 ```ts
 import { CopyButton } from 'svelte-zoo'
@@ -61,7 +61,7 @@ button {
 
 </details>
 
-### Caveman Style
+## 🗿 Caveman Style
 
 That's all there is to it in Svelte. But for completeness, let me cover the vanilla JS framework agnostic version. Here's how to insert a copy button imperatively:
 
@@ -82,7 +82,7 @@ afterNavigate(() => {
 })
 ```
 
-### Caveman with Style
+## 🔨 Caveman with Style
 
 If you count yourself a sophisticated caveman, you may not want to forego a pretty SVG icon to decorate your copy button. I got you covered: