From 90f7da17246ce843327af98ea8e7b5e2cc7bffe8 Mon Sep 17 00:00:00 2001 From: 273* Date: Sun, 26 Jul 2026 14:51:29 +0900 Subject: [PATCH 1/5] feat: add my custom theme --- 273Do-theme/.gitignore | 8 +++ 273Do-theme/.npmrc | 2 + 273Do-theme/.vscode/extensions.json | 3 ++ 273Do-theme/README.md | 50 +++++++++++++++++ 273Do-theme/components/.gitkeep | 0 273Do-theme/example.md | 83 +++++++++++++++++++++++++++++ 273Do-theme/layoutHelper.ts | 37 +++++++++++++ 273Do-theme/layouts/cover.vue | 21 ++++++++ 273Do-theme/layouts/intro.vue | 21 ++++++++ 273Do-theme/package.json | 35 ++++++++++++ 273Do-theme/setup/shiki.ts | 11 ++++ 273Do-theme/styles/index.ts | 3 ++ 273Do-theme/styles/layout.css | 24 +++++++++ 13 files changed, 298 insertions(+) create mode 100644 273Do-theme/.gitignore create mode 100644 273Do-theme/.npmrc create mode 100644 273Do-theme/.vscode/extensions.json create mode 100644 273Do-theme/README.md create mode 100644 273Do-theme/components/.gitkeep create mode 100644 273Do-theme/example.md create mode 100644 273Do-theme/layoutHelper.ts create mode 100644 273Do-theme/layouts/cover.vue create mode 100644 273Do-theme/layouts/intro.vue create mode 100644 273Do-theme/package.json create mode 100644 273Do-theme/setup/shiki.ts create mode 100644 273Do-theme/styles/index.ts create mode 100644 273Do-theme/styles/layout.css diff --git a/273Do-theme/.gitignore b/273Do-theme/.gitignore new file mode 100644 index 0000000..443276e --- /dev/null +++ b/273Do-theme/.gitignore @@ -0,0 +1,8 @@ +node_modules +.DS_Store +dist +*.local +.vite-inspect +.remote-assets +.idea/ +components.d.ts diff --git a/273Do-theme/.npmrc b/273Do-theme/.npmrc new file mode 100644 index 0000000..c1e4d44 --- /dev/null +++ b/273Do-theme/.npmrc @@ -0,0 +1,2 @@ +# for pnpm +shamefully-hoist=true diff --git a/273Do-theme/.vscode/extensions.json b/273Do-theme/.vscode/extensions.json new file mode 100644 index 0000000..61d23ae --- /dev/null +++ b/273Do-theme/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["antfu.slidev"] +} diff --git a/273Do-theme/README.md b/273Do-theme/README.md new file mode 100644 index 0000000..3e147a1 --- /dev/null +++ b/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). + + + + + + + +## Install + +Add the following frontmatter to your `slides.md`. Start Slidev then it will prompt you to install the theme automatically. + +
---
+theme: 273Do-theme
+---
+ +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 diff --git a/273Do-theme/components/.gitkeep b/273Do-theme/components/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/273Do-theme/example.md b/273Do-theme/example.md new file mode 100644 index 0000000..8186045 --- /dev/null +++ b/273Do-theme/example.md @@ -0,0 +1,83 @@ +--- +theme: ./ +background: https://cover.sli.dev +--- + +# Slidev Theme Starter + +Presentation slides for developers + +
+ + Press Space for next page
+ +
+ +--- + +# 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 + +
+
+ +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 + +| | | +| ---------------------------------------------------- | --------------------------- | +| space / tab / right | next animation or slide | +| left / shiftspace | previous animation or slide | +| up | previous slide | +| down | 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) { + 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) diff --git a/273Do-theme/layoutHelper.ts b/273Do-theme/layoutHelper.ts new file mode 100644 index 0000000..f9e24a1 --- /dev/null +++ b/273Do-theme/layoutHelper.ts @@ -0,0 +1,37 @@ +/// +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; +} diff --git a/273Do-theme/layouts/cover.vue b/273Do-theme/layouts/cover.vue new file mode 100644 index 0000000..d32cde9 --- /dev/null +++ b/273Do-theme/layouts/cover.vue @@ -0,0 +1,21 @@ + + + diff --git a/273Do-theme/layouts/intro.vue b/273Do-theme/layouts/intro.vue new file mode 100644 index 0000000..faab623 --- /dev/null +++ b/273Do-theme/layouts/intro.vue @@ -0,0 +1,21 @@ + + + diff --git a/273Do-theme/package.json b/273Do-theme/package.json new file mode 100644 index 0000000..e2754c7 --- /dev/null +++ b/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": "Nunito Sans", + "mono": "Fira Code" + } + } + } +} diff --git a/273Do-theme/setup/shiki.ts b/273Do-theme/setup/shiki.ts new file mode 100644 index 0000000..96214cb --- /dev/null +++ b/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", + }, + }; +}); diff --git a/273Do-theme/styles/index.ts b/273Do-theme/styles/index.ts new file mode 100644 index 0000000..0906279 --- /dev/null +++ b/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"; diff --git a/273Do-theme/styles/layout.css b/273Do-theme/styles/layout.css new file mode 100644 index 0000000..82c91d7 --- /dev/null +++ b/273Do-theme/styles/layout.css @@ -0,0 +1,24 @@ +:root { + /* default theme color */ + /* can be overrided by uses `themeConfig` option */ + --slidev-theme-primary: #5d8392; +} + +.slidev-layout.cover, +.slidev-layout.intro { + @apply h-full grid; + + h1 { + @apply text-6xl leading-20; + } + + h1 + p { + @apply -mt-2 opacity-50 mb-4; + } + + p + h2, + ul + h2, + table + h2 { + @apply mt-10; + } +} From 7e1bd4d21583a4a5405910716f21aec4a656cbd4 Mon Sep 17 00:00:00 2001 From: 273* Date: Sun, 26 Jul 2026 14:52:50 +0900 Subject: [PATCH 2/5] feat: apply custom theme and format --- components/Counter.vue | 6 +- package.json | 6 +- pnpm-lock.yaml | 941 +++++++++++++++++++++++++++++++++++++---- pnpm-workspace.yaml | 12 +- slides.md | 113 +++-- snippets/external.ts | 4 +- vercel.json | 4 +- vite.config.ts | 6 +- 8 files changed, 923 insertions(+), 169 deletions(-) diff --git a/components/Counter.vue b/components/Counter.vue index eaa6a79..faab413 100644 --- a/components/Counter.vue +++ b/components/Counter.vue @@ -1,13 +1,13 @@