Cleanup theme

slides.md

@@ -1,14 +1,13 @@
 ---
-theme: ./theme
+theme: ./slidev-theme-rkv
-background: ""
 class: text-center
 lineNumbers: false
 transition: slide-left
 title: Radioamaterski tečaj
 favicon: favicon.ico
 defaults:
-  layout: 'flex'
+  layout: flex
-layout: 'cover'
+layout: cover
 download: true
 ---
 

slides_uvod.md

@@ -1,14 +1,13 @@
 ---
-theme: ./theme
+theme: ./slidev-theme-rkv
-background: ""
 class: text-center
 lineNumbers: false
 transition: slide-left
 title: Radioamaterski tečaj
 favicon: favicon.ico
 defaults:
-  layout: 'flex'
+  layout: flex
-layout: 'cover'
+layout: cover
 ---
 
 <div class="flex flex-col gap-10">

slidev-theme-rkv/.gitignore

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

slidev-theme-rkv/.npmrc

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

slidev-theme-rkv/.vscode/extensions.json

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

slidev-theme-rkv/layouts/cover.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="slidev-layout cover">
+    <div class="my-auto w-full">
+      <slot />
+    </div>
+  </div>
+</template>

slidev-theme-rkv/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "slidev-theme-rkv",
+  "version": "0.0.0",
+  "type": "module",
+  "keywords": [
+    "slidev-theme",
+    "slidev"
+  ],
+  "engines": {
+    "node": ">=18.0.0",
+    "slidev": ">=0.19.3"
+  },
+  "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/types": "^0.49.0-beta.1",
+    "codemirror-theme-vars": "^0.1.2",
+    "prism-theme-vars": "^0.2.4"
+  },
+  "devDependencies": {
+    "@slidev/cli": "^0.49.0-beta.1"
+  },
+  "//": "Learn more: https://sli.dev/themes/write-a-theme.html",
+  "slidev": {
+    "colorSchema": "both",
+    "highlighter": "all",
+    "defaults": {
+      "fonts": {
+        "sans": "Nunito Sans",
+        "mono": "Fira Code"
+      }
+    }
+  }
+}

slidev-theme-rkv/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',
+    },
+  }
+})

slidev-theme-rkv/styles/index.ts

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

slidev-theme-rkv/styles/prism.css

@@ -4,12 +4,8 @@
 
 :root {
   --prism-font-family: var(--slidev-code-font-family);
-  --slidev-code-background: var(--prism-background);
+  --prism-background: var(--slidev-code-background);
-}
-
-html:not(.dark) {
   --prism-foreground: #393a34;
-  --prism-background: #f8f8f8;
   --prism-comment: #a0ada0;
   --prism-string: #b56959;
   --prism-literal: #2f8a89;
@@ -31,7 +27,6 @@ html:not(.dark) {
 
 html.dark {
   --prism-foreground: #d4cfbf;
-  --prism-background: #1b1b1b;
   --prism-comment: #758575;
   --prism-string: #d48372;
   --prism-literal: #429988;
@@ -54,19 +49,3 @@ html.dark {
   --prism-line-highlight-background: #444444;
   --prism-selection-background: #444444;
 }
-
-:not(pre) > code {
-  font-size: 0.9em;
-  background: var(--prism-background);
-  @apply font-light py-0.5 rounded;
-}
-
-:not(pre) > code:before,
-:not(pre) > code:after {
-  content: '`';
-  opacity: 0.50;
-}
-
-:not(pre) > code:before {
-  margin-right: -0.08em;
-}

theme/layoutHelper.ts

@@ -1,38 +0,0 @@
-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): CSSProperties {
-  const isColor = background && ['#', 'rgb', 'hsl'].some(v => background.indexOf(v) === 0)
-
-  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: 'cover',
-  }
-
-  if (!style.background)
-    delete style.background
-
-  return style
-}

theme/layouts/cover.vue

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

theme/layouts/fact.vue

@@ -1,7 +0,0 @@
-<template>
-  <div class="slidev-layout fact">
-    <div class="my-auto">
-      <slot />
-    </div>
-  </div>
-</template>

theme/layouts/intro.vue

@@ -1,7 +0,0 @@
-<template>
-  <div class="slidev-layout intro">
-    <div class="my-auto">
-      <slot />
-    </div>
-  </div>
-</template>

theme/layouts/quote.vue

@@ -1,7 +0,0 @@
-<template>
-  <div class="slidev-layout quote">
-    <div class="my-auto">
-      <slot />
-    </div>
-  </div>
-</template>

theme/layouts/row.vue

@@ -1,13 +0,0 @@
-<template>
-  <div class="slidev-layout">
-    <div class="flex flex-col h-full">
-      <div>
-        <slot />
-      </div>
-
-      <div class="flex-1 flex gap-5 items-center justify-evenly">
-        <slot name="images" />
-      </div>
-    </div>
-  </div>
-</template>

theme/layouts/section.vue

@@ -1,7 +0,0 @@
-<template>
-  <div class="slidev-layout section w-full h-full grid">
-    <div class="my-auto text-center">
-      <slot />
-    </div>
-  </div>
-</template>

theme/layouts/statement.vue

@@ -1,7 +0,0 @@
-<template>
-  <div class="slidev-layout statement">
-    <div class="my-auto">
-      <slot />
-    </div>
-  </div>
-</template>

theme/package.json

@@ -1,40 +0,0 @@
-{
-  "name": "@slidev/theme-default",
-  "version": "0.21.2",
-  "engines": {
-    "node": ">=14.0.0",
-    "slidev": ">=0.19.2"
-  },
-  "description": "Default theme for Slidev",
-  "keywords": [
-    "slidev-theme",
-    "slidev"
-  ],
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/slidevjs/themes"
-  },
-  "slidev": {
-    "colorSchema": "both",
-    "highlighter": "all",
-    "defaults": {
-      "fonts": {
-        "mono": "Fira Code",
-        "sans": "Avenir Next,Nunito Sans",
-        "local": "Avenir Next"
-      }
-    }
-  },
-  "funding": "https://github.com/sponsors/antfu",
-  "author": "antfu <anthonyfu117@hotmail.com>",
-  "homepage": "https://sli.dev",
-  "bugs": "https://github.com/slidevjs/themes/issues",
-  "dependencies": {
-    "@slidev/types": "^0.22.7",
-    "codemirror-theme-vars": "^0.1.1",
-    "prism-theme-vars": "^0.2.2",
-    "theme-vitesse": "^0.1.12"
-  },
-  "readme": "# @slidev/theme-default\n\n[![NPM version](https://img.shields.io/npm/v/@slidev/theme-default?color=3AB9D4&label=)](https://www.npmjs.com/package/@slidev/theme-default)\n\nThe default theme for [Slidev](https://github.com/slidevjs/slidev).\n\n## Install\n\nAdd the following frontmatter to your `slides.md`. Start Slidev then it will prompt you to install the theme automatically.\n\n<pre><code>---\ntheme: <b>default</b>\n---</code></pre>\n\nLearn more about [how to use a theme](https://sli.dev/themes/use).\n\n## License\n\nMIT License © 2021 [Anthony Fu](https://github.com/antfu)\n"
-}

theme/setup/monaco.ts

@@ -1,17 +0,0 @@
-import { defineMonacoSetup } from '@slidev/types'
-
-export default defineMonacoSetup(async(monaco) => {
-  await Promise.all([
-    // load theme
-    (async() => {
-      const { default: dark } = await import('theme-vitesse/themes/vitesse-dark.json')
-      const { default: light } = await import('theme-vitesse/themes/vitesse-light.json')
-
-      light.colors['editor.background'] = '#00000000'
-      dark.colors['editor.background'] = '#00000000'
-
-      monaco.editor.defineTheme('vitesse-light', light as any)
-      monaco.editor.defineTheme('vitesse-dark', dark as any)
-    })(),
-  ])
-})

theme/setup/shiki.ts

@@ -1,10 +0,0 @@
-import { defineShikiSetup } from '@slidev/types'
-
-export default defineShikiSetup(async({ loadTheme }) => {
-  return {
-    theme: {
-      dark: await loadTheme(require.resolve('theme-vitesse/themes/vitesse-dark.json')),
-      light: await loadTheme(require.resolve('theme-vitesse/themes/vitesse-light.json')),
-    },
-  }
-})

theme/setup/windicss.ts

@@ -1,16 +0,0 @@
-import { resolve } from 'path'
-import { defineWindiSetup } from '@slidev/types'
-
-export default defineWindiSetup(() => ({
-  extract: {
-    include: [
-      resolve(__dirname, '**/*.vue'),
-    ],
-    exclude: [
-      resolve(__dirname, 'node_modules'),
-    ],
-  },
-  shortcuts: {
-    'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])',
-  },
-}))

theme/styles/index.ts

@@ -1,4 +0,0 @@
-import '@slidev/client/styles/layouts-base.css'
-import './layouts.css'
-import './prism.css'
-import './shiki.css'

theme/styles/shiki.css

@@ -1,7 +0,0 @@
-.shiki-light {
-  background: #f8f8f8 !important;
-}
-
-.shiki-dark {
-  background: #1b1b1b !important;
-}