Feature/add theme

.github/workflows/ci.yml

@@ -0,0 +1,25 @@
+name: CI
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  check:
+    name: Check
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+
+      - name: Setup Vite+
+        uses: voidzero-dev/setup-vp@2dec1e33f4ab2c6d5bce1b0c4607961bb1a3f7a1 # v1.12.0
+        with:
+          node-version: "24"
+          cache: true
+
+      - name: Install dependencies
+        run: vp install
+
+      - name: Run checks
+        run: vp check

273Do-theme/.gitignore

@@ -0,0 +1,8 @@
+node_modules
+.DS_Store
+dist
+*.local
+.vite-inspect
+.remote-assets
+.idea/
+components.d.ts

273Do-theme/.npmrc

@@ -0,0 +1,2 @@
+# for pnpm
+shamefully-hoist=true

273Do-theme/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["antfu.slidev"]
+}

273Do-theme/README.md

@@ -0,0 +1,50 @@
+# slidev-theme-273Do-theme
+
+[![NPM version](https://img.shields.io/npm/v/slidev-theme-273Do-theme?color=3AB9D4&label=)](https://www.npmjs.com/package/slidev-theme-273Do-theme)
+
+A (...) theme for [Slidev](https://github.com/slidevjs/slidev).
+
+<!--
+  Learn more about how to write a theme:
+  https://sli.dev/guide/write-theme.html
+--->
+
+<!--
+  run `npm run dev` to check out the slides for more details of how to start writing a theme
+-->
+
+<!--
+  Put some screenshots here to demonstrate your theme
+
+  Live demo: [...]
+-->
+
+## Install
+
+Add the following frontmatter to your `slides.md`. Start Slidev then it will prompt you to install the theme automatically.
+
+<pre><code>---
+theme: <b>273Do-theme</b>
+---</code></pre>
+
+Learn more about [how to use a theme](https://sli.dev/guide/theme-addon#use-theme).
+
+## Layouts
+
+This theme provides the following layouts:
+
+> TODO:
+
+## Components
+
+This theme provides the following components:
+
+> TODO:
+
+## Contributing
+
+- `npm install`
+- `npm run dev` to start theme preview of `example.md`
+- Edit the `example.md` and style to see the changes
+- `npm run export` to generate the preview PDF
+- `npm run screenshot` to generate the preview PNG

273Do-theme/example.md

@@ -0,0 +1,83 @@
+---
+theme: ./
+background: https://cover.sli.dev
+---
+
+# Slidev Theme Starter
+
+Presentation slides for developers
+
+<div class="pt-12">
+  <span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer" flex="~ justify-center items-center gap-2" hover="bg-white bg-opacity-10">
+    Press Space for next page <div class="i-carbon:arrow-right inline-block"/>
+  </span>
+</div>
+
+---
+
+# What is Slidev?
+
+Slidev is a slide maker and presentation tool designed for developers. It includes the following features:
+
+- 📝 **Text-based** - focus on your content with Markdown, then style it later
+- 🎨 **Themable** - themes can be shared and reused as npm packages
+- 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion
+- 🤹 **Interactive** - embed Vue components to enhance your expressions
+- 🎥 **Recording** - built-in recording and camera view
+- 📤 **Portable** - export to PDF, PPTX, PNGs, or even a hostable SPA
+- 🛠 **Hackable** - virtually anything that's possible on a webpage is possible in Slidev
+
+<br>
+<br>
+
+Read more about [Why Slidev?](https://sli.dev/guide/why)
+
+---
+
+# Navigation
+
+Hover on the bottom-left corner to see the navigation's controls panel
+
+## Keyboard Shortcuts
+
+|                                                      |                             |
+| ---------------------------------------------------- | --------------------------- |
+| <kbd>space</kbd> / <kbd>tab</kbd> / <kbd>right</kbd> | next animation or slide     |
+| <kbd>left</kbd> / <kbd>shift</kbd><kbd>space</kbd>   | previous animation or slide |
+| <kbd>up</kbd>                                        | previous slide              |
+| <kbd>down</kbd>                                      | next slide                  |
+
+---
+
+layout: image-right
+image: https://cover.sli.dev
+---
+
+# Code
+
+Use code snippets and get the highlighting directly!
+
+```ts
+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);
+}
+```
+
+---
+
+layout: center
+class: "text-center"
+---
+
+# Learn More
+
+[Documentation](https://sli.dev) / [GitHub Repo](https://github.com/slidevjs/slidev)

273Do-theme/layoutHelper.ts

@@ -0,0 +1,37 @@
+/// <reference types="vite/client" />
+import type { CSSProperties } from "vue";
+
+/**
+ * Resolve urls from frontmatter and append with the base url
+ */
+export function resolveAssetUrl(url: string) {
+  if (url.startsWith("/")) return import.meta.env.BASE_URL + url.slice(1);
+  return url;
+}
+
+export function handleBackground(
+  background?: string,
+  dim = false,
+  backgroundSize = "cover",
+): CSSProperties {
+  const isColor = background && (background[0] === "#" || background.startsWith("rgb"));
+
+  const style = {
+    background: isColor ? background : undefined,
+    color: background && !isColor ? "white" : undefined,
+    backgroundImage: isColor
+      ? undefined
+      : background
+        ? dim
+          ? `linear-gradient(#0005, #0008), url(${resolveAssetUrl(background)})`
+          : `url("${resolveAssetUrl(background)}")`
+        : undefined,
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center",
+    backgroundSize,
+  };
+
+  if (!style.background) delete style.background;
+
+  return style;
+}

273Do-theme/layouts/cover.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { handleBackground } from "../layoutHelper";
+import { computed } from "vue";
+
+const props = defineProps({
+  background: {
+    type: String,
+    default: undefined,
+  },
+});
+
+const style = computed(() => handleBackground(props.background));
+</script>
+
+<template>
+  <div class="slidev-layout cover" :style="style">
+    <div class="my-auto w-full">
+      <slot />
+    </div>
+  </div>
+</template>

273Do-theme/layouts/intro.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { handleBackground } from "../layoutHelper";
+import { computed } from "vue";
+
+const props = defineProps({
+  background: {
+    type: String,
+    default: undefined,
+  },
+});
+
+const style = computed(() => handleBackground(props.background));
+</script>
+
+<template>
+  <div class="slidev-layout intro" :style="style">
+    <div class="my-auto">
+      <slot />
+    </div>
+  </div>
+</template>

273Do-theme/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "slidev-theme-273Do-theme",
+  "version": "0.0.0",
+  "keywords": [
+    "slidev",
+    "slidev-theme"
+  ],
+  "type": "module",
+  "scripts": {
+    "build": "slidev build example.md",
+    "dev": "slidev example.md --open",
+    "export": "slidev export example.md",
+    "screenshot": "slidev export example.md --format png"
+  },
+  "dependencies": {
+    "@slidev/client": "^52.18.0",
+    "@slidev/types": "^52.18.0"
+  },
+  "devDependencies": {
+    "@slidev/cli": "^52.18.0"
+  },
+  "engines": {
+    "node": ">=20.12.0"
+  },
+  "//": "Learn more: https://sli.dev/guide/write-theme.html",
+  "slidev": {
+    "colorSchema": "both",
+    "defaults": {
+      "fonts": {
+        "sans": "Zen Old Mincho",
+        "mono": "Fira Code"
+      }
+    }
+  }
+}

273Do-theme/setup/shiki.ts

@@ -0,0 +1,11 @@
+import type { ShikiSetupReturn } from "@slidev/types";
+import { defineShikiSetup } from "@slidev/types";
+
+export default defineShikiSetup((): ShikiSetupReturn => {
+  return {
+    themes: {
+      dark: "vitesse-dark",
+      light: "vitesse-light",
+    },
+  };
+});

273Do-theme/styles/index.ts

@@ -0,0 +1,3 @@
+// inherit from base layouts, remove it to get full customizations
+import "@slidev/client/styles/layouts-base.css";
+import "./layout.css";

273Do-theme/styles/layout.css

@@ -0,0 +1,36 @@
+:root {
+  --slidev-theme-primary: rgb(246, 246, 245);
+  --background: rgb(246, 246, 245);
+  --foreground: rgb(50, 50, 47);
+  --primary: rgb(50, 50, 47);
+  --primary-foreground: rgb(246, 246, 245);
+  --secondary: rgb(236, 236, 234);
+  --secondary-foreground: rgb(50, 50, 47);
+  --muted-foreground: rgb(155, 155, 150);
+}
+
+.slidev-layout {
+  background-color: var(--background);
+  color: var(--foreground);
+
+  h1,
+  h2,
+  h3,
+  .slidev-code-block-title {
+    width: fit-content;
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+
+  .shiki {
+    background-color: var(--foreground) !important;
+  }
+
+  a {
+    transition: opacity 0.2s;
+
+    &:hover {
+      opacity: 0.5;
+    }
+  }
+}

components/Counter.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref } from "vue";
 
 const props = defineProps({
   count: {
     default: 0,
   },
-})
+});
 
-const counter = ref(props.count)
+const counter = ref(props.count);
 </script>
 
 <template>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "slide-template",
-  "type": "module",
   "private": true,
+  "type": "module",
   "scripts": {
     "build": "slidev build",
     "dev": "slidev --open",
@@ -14,8 +14,8 @@
     "@slidev/theme-seriph": "latest",
     "vue": "^3.5.33"
   },
-  "packageManager": "pnpm@11.17.0",
   "devDependencies": {
     "vite-plus": "catalog:"
-  }
+  },
+  "packageManager": "pnpm@11.17.0"
 }