slidev-theme-the-unnamed 0.0.21 → 0.0.22

package/README.md

@@ -54,6 +54,7 @@ layout: about-me
 helloMsg: Hello!
 name: <name>
 imageSrc: <image url>
+position: <left or right>
 job: <job title>
 line1: 
 line2: 

package/changelog.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## [0.0.22] - 2024-11-08
+
+- Added support for the `about-me` slide to position the image
+- Updated theme name to support Monaco Editor
+
 ## [0.0.21] - 2024-09-28
 
 - Update dependencies and example

package/example.md

@@ -50,7 +50,8 @@ layout: about-me
 
 helloMsg: Hello!
 name: Elio Struyf
-imageSrc: https://elio.dev/eliostruyf_2023.jpg
+imageSrc: https://elio.dev/eliostruyf_2024.webp
+position: left
 job: Struyf Consulting 
 line1: "#Stickerpreneur @ pyod.shop"
 line2: "#Maintainer @ Front Matter CMS"
@@ -214,6 +215,33 @@ function updateUser(id: number, update: Partial<User>) {
 }
 ```
 
+--- 
+
+# Monaco Editor
+
+```ts {monaco}
+interface User {
+  id: number
+  firstName: string
+  lastName: string
+  role: string
+}
+
+function updateUser(id: number, update: Partial<User>) {
+  const user = getUser(id)
+  const newUser = { ...user, ...update }
+  saveUser(id, newUser)
+}
+```
+
+--- 
+
+# Monaco Editor
+
+```ts {monaco-run} {autorun:false}
+console.log('Click the play button to run me')
+```
+
 ---
 layout: center
 class: "text-center"

package/layouts/about-me.vue

@@ -13,20 +13,24 @@
     social1?: string
     social2?: string
     social3?: string
+    position?: string
   }>()
 
   const style = computed(() => handleBackground(props.imageSrc, false))
+  const flexRow = computed(() => props.position === 'left' ? 'flex-row-reverse' : 'flex-row')
+  const textItems = computed(() => props.position === 'left' ? 'items-start' : 'items-end')
+  const textAlign = computed(() => props.position === 'left' ? 'text-left' : 'text-right')
 </script>
 
 <template>
   <div class="slidev-layout about-me p-0">
-    <div class="flex h-full">
+    <div class="flex h-full" :class="flexRow">
       <div class="w-1/2 h-full flex flex-col justify-end" :style="style">
       </div>
-      <div class="w-1/2 flex flex-col justify-between items-end px-8 py-16">
+      <div class="w-1/2 flex flex-col justify-between px-8 py-16" :class="textItems">
         <h1 v-if="helloMsg" class="flex">{{ helloMsg }}</h1>
 
-        <div class="flex flex-col justify-end items-end text-right py-16">
+        <div class="flex flex-col flex flex-col justify-end py-16" :class="[textItems, textAlign]">
           <h2 class="font-extrabold">{{ name }}</h2>
 
           <div class="text-2xl space-y-2 mt-4">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-the-unnamed",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "keywords": [
     "slidev-theme",
     "slidev"
@@ -16,13 +16,13 @@
     "screenshot": "slidev export example.md --format png"
   },
   "dependencies": {
-    "@slidev/types": "^0.49.0",
+    "@slidev/types": "^0.50.0-beta.5",
     "codemirror-theme-vars": "^0.1.1",
     "prism-theme-vars": "^0.2.4",
     "theme-vitesse": "^0.6.2"
   },
   "devDependencies": {
-    "@slidev/cli": "^0.49.0",
+    "@slidev/cli": "^0.50.0-beta.5",
     "@types/node": "^18.13.0"
   },
   "//": "Learn more: https://sli.dev/themes/write-a-theme.html",

package/public/theme/theunnamed-dark-theme.json

@@ -1,6 +1,6 @@
 {
   "$schema": "vscode://schemas/color-theme",
-  "name": "The unnamed",
+  "name": "the-unnamed",
   "type": "dark",
   "colors": {
     "foreground": "#F3EFF5",
@@ -156,8 +156,7 @@
     "terminal.ansiBrightCyan": "#15c2cb",
     "terminal.ansiBrightWhite": "#f3eff5"
   },
-  "tokenColors": [
-    {
+  "tokenColors": [{
       "scope": [
         "meta.paragraph.markdown",
         "string.other.link.description.title.markdown"