upgrade astro & add more content; start using mdx;

0ctothorp · 0ctothorp · commit bc811d75ecd4 · 2025-01-06T01:39:19.000+01:00
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,7 +1,7 @@
 {
-  "workbench.colorCustomizations": {
-    "activityBar.background": "#352C1F",
-    "titleBar.activeBackground": "#4A3E2C",
-    "titleBar.activeForeground": "#FBFAF8"
-  }
-}
+    "workbench.colorCustomizations": {
+        "activityBar.background": "#352C1F",
+        "titleBar.activeBackground": "#4A3E2C",
+        "titleBar.activeForeground": "#FBFAF8"
+    }
+}
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -1,7 +1,9 @@
 import { defineConfig } from "astro/config";
 import sitemap from "@astrojs/sitemap";
 import tailwind from "@astrojs/tailwind";
+import mdx from "@astrojs/mdx";
 
+// https://astro.build/config
 export default defineConfig({
   site: "https://kamilkaminski.dev",
   integrations: [
@@ -11,5 +13,6 @@ export default defineConfig({
         applyBaseStyles: false,
       },
     }),
+    mdx(),
   ],
 });
diff --git a/package.json b/package.json
@@ -12,10 +12,11 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/rss": "^2.1.0",
-    "@astrojs/sitemap": "^1.0.0",
-    "@astrojs/tailwind": "^3.0.0",
-    "astro": "^2.0.0",
+    "@astrojs/mdx": "^4.0.3",
+    "@astrojs/rss": "^4.0.11",
+    "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/tailwind": "^5.1.4",
+    "astro": "^5.1.2",
     "tailwindcss": "^3.0.24"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/close.svg b/public/close.svg
diff --git a/public/touch.svg b/public/touch.svg
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -71,7 +71,7 @@
     }
   }
 </style>
-<footer class:list={["my-20"]}>
+<footer class:list={["my-12"]}>
   <ul style="
         display: flex;
         justify-content: center;
diff --git a/src/components/LiFingerEmoji.astro b/src/components/LiFingerEmoji.astro
@@ -0,0 +1,3 @@
+<li class="finger-li">
+    <slot />
+</li>
diff --git a/src/components/Todo.astro b/src/components/Todo.astro
@@ -0,0 +1,14 @@
+<span 
+    class:list={[
+        'bg-yellow-400', 
+        'before:content-["(TODO:_"]', 
+        'after:content-[")"]',
+        'after:-ml-1',
+        "text-sm", 
+        "text-gray-800", 
+        'px-1', 
+        'rounded'
+    ]}
+>
+    <slot />
+</span>
diff --git a/src/components/UListInside.astro b/src/components/UListInside.astro
@@ -0,0 +1,3 @@
+<ul class="list-inside">
+    <slot />
+</ul>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -2,6 +2,7 @@
 import { SITE_DESCRIPTION, SITE_TITLE } from "../consts";
 import BaseHead from "../components/BaseHead.astro";
 import '../main.css';
+import Footer from "../components/Footer.astro";
 
 export interface Props {
   title?: string;
@@ -17,6 +18,12 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
     <BaseHead title={title} description={description} />
   </head>
   <body class="bg-[#0a0908] text-slate-300">
-    <slot />
+    <main class:list={["w-11/12 sm:w-[55ch] m-auto py-10 space-y-8 sm:text-lg"]}>
+      <header>
+        <span class="bg-gradient-to-r from-yellow-400 to-indigo-600 bg-clip-text text-xl"><a href="/" class="text-transparent">kamilkaminski.dev</a></span>
+      </header>
+      <slot />
+    </main>
+    <Footer />
   </body>
 </html>
diff --git a/src/main.css b/src/main.css
@@ -10,4 +10,23 @@
   a:hover {
     color: white;
   }
+
+  h1 {
+    @apply text-xl uppercase text-indigo-400;
+  }
+
+  h2 {
+    @apply text-lg uppercase text-indigo-300;
+  }
+}
+
+@layer components {
+  .finger-li {
+    padding-left: 2rem;
+    text-indent: -2rem;
+  }
+
+  .finger-li::before {
+    content: "👉 ";
+  }
 }
diff --git a/src/pages/cheatsheets/git.mdx b/src/pages/cheatsheets/git.mdx
@@ -0,0 +1,78 @@
+import Layout from "../../layouts/Layout.astro";
+
+<Layout>
+# git cheatsheet
+
+## Worktrees
+
+Creates a new worktree with a new branch:
+
+```sh
+git worktree add <path>/<branch>
+```
+
+Creates a new worktree and checkouts it to existing branch:
+
+```sh
+git worktree add <path> <branch>
+```
+
+Remove a worktree at path:
+
+```sh
+git worktree remove <path>
+```
+
+List your worktrees:
+
+```sh
+git worktree list
+```
+
+## Tags
+
+Create a tag on last commit with name:
+
+```sh
+git tag <name>
+```
+
+Push a single tag to remote:
+
+```sh
+git push origin <tag_name>
+```
+
+## Branches
+
+Change current branch name:
+
+```sh
+git branch -m <new_name>
+```
+
+Change upstream branch:
+
+```sh
+git branch <branch_name> -u <your_new_remote>/<branch_name>
+```
+
+The remote branch needs to be present on the remote, so if you changed the local branch name, first do `git push origin HEAD`.
+
+Remove all branches that are already merged to master. Note: also removes local master branch:
+
+```sh
+git branch --merged master | grep -v '^\*' | xargs -n 1 git branch -d
+```
+
+`grep -v '^\*'` - makes sure that currently checked out branch is not deleted. Is is even possible to remove currently checked out branch?
+
+## Stash
+
+Stash only unstaged changes:
+
+```sh
+git stash push --keep-index
+```
+
+</Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
@@ -0,0 +1,36 @@
+import Layout from "../layouts/Layout.astro";
+import Footer from "../components/Footer.astro";
+import UListInside from "../components/UListInside.astro";
+import LiFingerEmoji from "../components/LiFingerEmoji.astro";
+import Todo from "../components/Todo.astro";
+
+export const components = { ul: UListInside, li: LiFingerEmoji };
+
+<Layout>
+    Hi 👋 My name is Kamil and this is my personal cyber space.
+    
+    I am a web developer by day and at some nights I make [music](https://0cto.link).
+
+    Lately I've been working on a [simple audio visualizer](https://seeaud.io) mostly for my own use.
+
+    <div>
+        Sometimes, I create silly little web games:
+        - my js13k 2023 entry [The Last Tower](https://js13kgames.com/2023/games/the-last-tower)
+        - my updated gamedev.js 2023 entry [Time flies!](https://0ctothorp.itch.io/time-flies)
+            - <Todo>not sure if this is the latest version</Todo>
+        - <Todo>list other games here (yeah I like todos 🙈)</Todo>
+    </div>
+
+    <div>
+        Some blogposts of mine <Todo>move them to this site</Todo>:
+        - [Contain an aspect-ratio element inside a parent with just CSS](https://hungry-midnight-212.notion.site/Contain-an-aspect-ratio-element-inside-a-parent-with-just-CSS-31eb84dada8446fc88bb222bf0cf5daf)
+        - [Pausable and reversible SVG SMIL animations](https://hungry-midnight-212.notion.site/Pausable-and-reversible-SVG-SMIL-animations-4bc0e96b570d48818cc486ec2c4d1aa8)
+        - [Auto-sized modal with scrollable content](https://hungry-midnight-212.notion.site/Auto-sized-modal-with-scrollable-content-28ee5d47910a4741adaf0401d15ee14f)
+    </div>
+
+    <div>
+        Cheatsheets:
+        - [git](/cheatsheets/git)
+    </div>
+
+</Layout>

Original file line number	Diff line number	Diff line change
`@@ -71,7 +71,7 @@`
`71`	`71`	`}`
`72`	`72`	`}`
`73`	`73`	`</style>`
`74`		`-<footer class:list={["my-20"]}>`
	`74`	`+<footer class:list={["my-12"]}>`
`75`	`75`	`<ul style="`
`76`	`76`	`display: flex;`
`77`	`77`	`justify-content: center;`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<li class="finger-li">`
	`2`	`+ <slot />`
	`3`	`+</li>`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<ul class="list-inside">`
	`2`	`+ <slot />`
	`3`	`+</ul>`