slidev-theme-cyberpunk-ide 0.1.0

package/README.md

@@ -0,0 +1,216 @@
+# slidev-theme-cyberpunk-ide
+
+[![NPM version](https://img.shields.io/npm/v/slidev-theme-cyberpunk-ide?color=3AB9D4&label=)](https://www.npmjs.com/package/slidev-theme-cyberpunk-ide)
+
+A cyberpunk IDE-style theme for [Slidev](https://github.com/slidevjs/slidev), designed for teaching computer science. Each slide looks like a file open in a dark IDE, complete with title bar, tab bar, and status bar.
+
+## Install
+
+Add the following frontmatter to your `slides.md`:
+
+```yaml
+---
+theme: cyberpunk-ide
+---
+```
+
+## Fonts
+
+The theme uses **Monaspace Neon** (body and code) and **Monaspace Radon** (comments in code blocks). Both variable fonts are bundled with the theme — no manual download or configuration required. They are licensed under the [SIL Open Font License 1.1](public/fonts/LICENSE).
+
+## Layouts
+
+### `cover` (default for slide 1)
+
+Title slide with a cyberpunk grid background, scan lines, and an animated gradient on the heading.
+
+```yaml
+---
+layout: cover
+---
+
+# Course Title
+
+Subtitle or description
+```
+
+**Optional named slots:**
+
+| Slot             | Position     | Purpose                    |
+| ---------------- | ------------ | -------------------------- |
+| `::logo::`       | Top-left     | School or institution logo |
+| `::logo-right::` | Top-right    | Department or course logo  |
+| `::sponsors::`   | Bottom strip | Sponsor / partner logos    |
+
+The top bar is only rendered if at least one of `logo` or `logo-right` is provided. The sponsors strip is only rendered if `sponsors` is provided.
+
+```markdown
+---
+layout: cover
+---
+
+# Course Title
+
+Subtitle
+
+::logo::
+<img src="/logo-school.png" alt="School" />
+
+::logo-right::
+<img src="/logo-dept.png" alt="Department" />
+
+::sponsors::
+<img src="/sponsor1.png" alt="Sponsor A" />
+<img src="/sponsor2.png" alt="Sponsor B" />
+```
+
+Images are automatically constrained (`max-height: 44px` for logos, `28px` for sponsors). Place image files in your presentation's `public/` folder and reference them with a leading `/`.
+
+### `default`
+
+Standard content slide wrapped in the IDE (title bar, tab bar, editor area, status bar).
+
+```yaml
+---
+filename: algorithms.py   # tab name and title bar — default: main.py
+language: Python         # status bar right — default: Python
+branch: 03/recursion    # status bar left — default: main
+repo: ComputerScience101    # status bar left (repo name) — default: cyberpunk-ide
+---
+
+# Slide title
+```
+
+### `section`
+
+Full-screen section divider with a grid background and a glowing accent line.
+
+```yaml
+---
+layout: section
+section: Module 2        # label shown above the title — default: Modulo
+---
+
+# *Chapter* Title
+```
+
+Wrap a word in `*...*` (em) to apply the neon purple accent color.
+
+## Tab bar
+
+The tab bar shows one chip-style tab per slide, auto-scrolling to keep the active one visible. Clicking any tab navigates to that slide.
+
+### Hiding slides from the tab bar
+
+By default, slides with `layout: cover` or `layout: section` are **hidden** from the tab bar (they don't have IDE chrome anyway).
+
+To **show all slides** including cover and section slides:
+
+```yaml
+---
+# in the presentation headmatter (first slide)
+themeConfig:
+  tabsShowAll: true
+---
+```
+
+To **hide a specific slide** from the tab bar regardless of the global setting:
+
+```yaml
+---
+hideTab: true
+---
+```
+
+## Status bar
+
+| Position | Content                          | Frontmatter key | Default                     |
+| -------- | -------------------------------- | --------------- | --------------------------- |
+| Left     | Repo name (GitHub icon)          | `repo`          | `cyberpunk-ide`             |
+| Left     | Branch / topic (git branch icon) | `branch`        | `main`                      |
+| Right    | Language                         | `language`      | `Python`                    |
+| Right    | Encoding                         | —               | `UTF-8` (fixed)             |
+| Right    | Slide counter                    | —               | `current / total` (dynamic) |
+
+## Line numbers
+
+Line numbers are **enabled by default** by the theme. The scope of control is:
+
+| Level                            | How                                |
+| -------------------------------- | ---------------------------------- |
+| Whole presentation (disable)     | `lineNumbers: false` in headmatter |
+| Single code block (disable)      | ` ```python {lineNumbers:false} `  |
+| Single code block (custom start) | ` ```python {startLine:10} `       |
+
+## Syntax highlighting
+
+Code blocks use the **Tokyo Night** theme via Shiki. Comment tokens are automatically rendered in **Monaspace Radon** (cursive/calligraphic style) to visually distinguish them from code.
+
+## Callouts
+
+Six callout types are available for highlighting definitions, tips, warnings, and learning objectives.
+
+```markdown
+:::definition Definition
+An **algorithm** is a finite sequence of unambiguous instructions.
+:::
+
+:::info Useful Information
+You can use `len()` to get the length of any sequence.
+:::
+
+:::warning Warning
+Do not modify a list while iterating over it.
+:::
+
+:::clean Clean Code
+Use descriptive names: `number_of_students` is better than `n`.
+:::
+
+:::code Python Syntax
+`for item in list:` iterates without using indices.
+:::
+
+:::learn What You Will Learn
+In this module you will see **recursion** in action.
+:::
+```
+
+| Type         | Color  | Use for                      |
+| ------------ | ------ | ---------------------------- |
+| `definition` | brown  | Formal definitions           |
+| `info`       | yellow | Tips and notes               |
+| `warning`    | red    | Pitfalls and gotchas         |
+| `clean`      | cyan   | Best practices / clean code  |
+| `code`       | grey   | Syntax reminders / code tips |
+| `learn`      | purple | Learning objectives          |
+
+**Custom icon and color** — each callout accepts optional `icon` and `color` props to override the preset:
+
+```markdown
+<Callout type="info" title="Nota" icon="i-ph-star" color="#9ece6a">
+
+Custom icon (any UnoCSS / Phosphor icon class) and hex color.
+
+</Callout>
+```
+
+> Icons used by the presets (`paper.png`, `bulb.png`, etc.) must be present in `public/callouts/` of the presentation folder.
+
+## Glossary tooltips
+
+Add a `glossary` map to a slide's frontmatter to automatically wrap matching terms with interactive tooltips. Hovering (or focusing) the term shows its definition inline.
+
+```yaml
+---
+filename: recursion.py
+glossary:
+  algorithm: A finite sequence of **unambiguous** instructions that solves a problem
+  recursion: A technique where a function calls `itself` to solve sub-problems
+  base case: The condition that stops the recursion, preventing a stack overflow
+---
+```
+
+Definitions support inline formatting: `**bold**`, `*italic*`, `` `code` ``.
+
+Terms inside fenced code blocks and inline code spans are left untouched.

package/UNLICENSE

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org/>

package/components/Callout.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const props = defineProps<{
+  type?: string
+  title: string
+  icon?: string
+  color?: string
+}>()
+
+const presets: Record<string, { icon: string; color: string }> = {
+  definition: { icon: '/callouts/paper.png',  color: '#a9836e' },
+  info:       { icon: '/callouts/bulb.png',   color: '#e0af68' },
+  warning:    { icon: '/callouts/fire.png',   color: '#f7768e' },
+  clean:      { icon: '/callouts/clean.png',  color: '#7dcfff' },
+  code:       { icon: '/callouts/code.png',   color: '#565f89' },
+  learn:      { icon: '/callouts/brain.png',  color: '#bb9af7' },
+}
+
+const preset = props.type ? presets[props.type] : undefined
+const resolvedColor = props.color ?? preset?.color ?? '#7dcfff'
+const resolvedIcon  = props.icon  ?? preset?.icon  ?? 'i-ph-info'
+
+// true = UnoCSS icon class, false = image path
+const isUnoIcon = resolvedIcon.startsWith('i-')
+</script>
+
+<template>
+  <div class="callout" :data-type="type" :style="{ '--callout-color': resolvedColor }">
+    <div class="callout-header">
+      <span v-if="isUnoIcon"  class="callout-icon" :class="resolvedIcon" />
+      <img  v-else            class="callout-icon" :src="resolvedIcon" aria-hidden="true" />
+      <span class="callout-title">{{ title }}</span>
+    </div>
+    <div class="callout-body">
+      <slot />
+    </div>
+  </div>
+</template>

package/components/IdeFrame.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { configs } from '@slidev/client'
+import { useNav } from '@slidev/client'
+import { computed, nextTick, ref, watch } from 'vue'
+
+withDefaults(defineProps<{
+  filename?: string
+  language?: string
+  branch?: string
+  repo?: string
+}>(), {
+  filename: 'main.py',
+  language: 'Python',
+  branch: 'main',
+  repo: 'cyberpunk-ide',
+})
+
+const { slides, currentPage, total, go } = useNav()
+
+// themeConfig.tabsShowAll: true  → show every slide in the tab bar
+// default (false/unset)          → hide slides with layout cover or section
+const tabsShowAll = computed(() => {
+  const v = configs.themeConfig?.tabsShowAll
+  return v === true || v === 'true' || v === 1
+})
+
+const visibleSlides = computed(() => {
+  return slides.value.filter((slide) => {
+    const fm = slide?.meta?.slide?.frontmatter ?? {}
+    // Per-slide explicit opt-out
+    if (fm.hideTab === true || fm.hideTab === 'true') return false
+    // Global filter: skip cover/section layouts unless tabsShowAll is set
+    if (!tabsShowAll.value) {
+      const layout = (slide?.meta as any)?.layout ?? fm.layout
+      if (layout === 'cover' || layout === 'section') return false
+    }
+    return true
+  })
+})
+
+function slideFilename(no: number): string {
+  const slide = slides.value.find(s => s.no === no)
+  return slide?.meta?.slide?.frontmatter?.filename ?? `slide-${no}.md`
+}
+
+const tabbarEl = ref<HTMLElement>()
+
+watch(currentPage, async () => {
+  await nextTick()
+  const active = tabbarEl.value?.querySelector<HTMLElement>('.ide-tab.active')
+  if (active) active.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' })
+}, { immediate: true })
+</script>
+
+<template>
+  <div class="ide-frame">
+
+    <!-- Title Bar -->
+    <div class="ide-titlebar">
+      <div class="ide-traffic-lights">
+        <span class="traffic-close" />
+        <span class="traffic-minimize" />
+        <span class="traffic-maximize" />
+      </div>
+      <div class="ide-titlebar-text">{{ filename }} — Cyberpunk IDE</div>
+    </div>
+
+    <!-- Tab Bar -->
+    <div ref="tabbarEl" class="ide-tabbar">
+      <div
+        v-for="slide in visibleSlides"
+        :key="slide.no"
+        class="ide-tab"
+        :class="{ active: slide.no === currentPage }"
+        @click="go(slide.no)"
+      >
+        <span class="ide-tab-icon">⬡</span>
+        <span class="ide-tab-name">{{ slideFilename(slide.no) }}</span>
+        <span class="ide-tab-close">×</span>
+      </div>
+    </div>
+
+    <!-- Editor -->
+    <div class="ide-editor">
+      <div class="ide-gutter" />
+      <div class="ide-content">
+        <slot />
+      </div>
+    </div>
+
+    <!-- Status Bar -->
+    <div class="ide-statusbar">
+      <div class="status-left">
+        <span class="status-item">
+          <span class="i-ph-github-logo status-icon" />
+          {{ repo }}
+        </span>
+        <span class="status-sep">›</span>
+        <span class="status-item">
+          <span class="i-ph-git-branch status-icon" />
+          {{ branch }}
+        </span>
+      </div>
+      <div class="status-right">
+        <span class="status-item">{{ language }}</span>
+        <span class="status-item">UTF-8</span>
+        <span class="status-item">
+          <span class="i-ph-hash status-icon" />
+          {{ currentPage }} / {{ total }}
+        </span>
+      </div>
+    </div>
+
+  </div>
+</template>

package/components/Tooltip.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+const props = defineProps<{ text: string }>()
+
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
+const rendered = computed(() =>
+  escapeHtml(props.text)
+    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+    .replace(/&#96;(.*?)&#96;/g, '<code>$1</code>')
+    .replace(/`(.*?)`/g, '<code>$1</code>')
+    .replace(/\*(.*?)\*/g, '<em>$1</em>'),
+)
+
+const boxRef = ref<HTMLElement>()
+
+function adjust() {
+  const box = boxRef.value
+  if (!box) return
+
+  // Reset so we measure the natural position
+  box.style.left = ''
+  box.style.right = ''
+  box.style.transform = ''
+
+  const rect = box.getBoundingClientRect()
+
+  // Clamp horizontally inside the viewport
+  if (rect.right > window.innerWidth - 8) {
+    box.style.left = 'auto'
+    box.style.right = '0'
+    box.style.transform = 'none'
+  }
+  else if (rect.left < 8) {
+    box.style.left = '0'
+    box.style.right = 'auto'
+    box.style.transform = 'none'
+  }
+}
+</script>
+
+<template>
+  <span class="cp-tooltip-trigger" tabindex="0" @mouseenter="adjust" @focus="adjust">
+    <slot />
+    <span ref="boxRef" class="cp-tooltip-box" v-html="rendered" />
+  </span>
+</template>

package/layouts/cover.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="slidev-layout cover">
+    <div class="cover-bracket-tl" />
+    <div class="cover-bracket-br" />
+
+    <!-- Top bar: logo slots (only rendered if used) -->
+    <div v-if="$slots.logo || $slots['logo-right']" class="cover-topbar">
+      <div class="cover-logo-left">
+        <slot name="logo" />
+      </div>
+      <div class="cover-logo-right">
+        <slot name="logo-right" />
+      </div>
+    </div>
+
+    <!-- Main content -->
+    <div class="cover-inner">
+      <slot />
+    </div>
+
+    <!-- Bottom sponsors strip (only rendered if used) -->
+    <div v-if="$slots.sponsors" class="cover-sponsors">
+      <slot name="sponsors" />
+    </div>
+  </div>
+</template>

package/layouts/default.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="slidev-layout default">
+    <IdeFrame
+      :filename="$frontmatter.filename ?? 'main.py'"
+      :language="$frontmatter.language ?? 'Python'"
+      :branch="$frontmatter.branch ?? 'main'"
+      :repo="$frontmatter.repo ?? 'cyberpunk-ide'"
+    >
+      <slot />
+    </IdeFrame>
+  </div>
+</template>

package/layouts/intro.vue

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

package/layouts/section.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="slidev-layout section">
+    <div class="section-inner">
+      <div class="section-eyebrow">{{ $frontmatter.section ?? 'Modulo' }}</div>
+      <slot />
+      <div class="section-bar" />
+    </div>
+  </div>
+</template>

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "slidev-theme-cyberpunk-ide",
+  "version": "0.1.0",
+  "description": "A cyberpunk IDE-style Slidev theme for teaching computer science",
+  "author": "Marco Farina",
+  "license": "Unlicense",
+  "type": "module",
+  "keywords": [
+    "slidev-theme",
+    "slidev"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/marcofarina/slidev-theme-cyberpunk-ide.git"
+  },
+  "homepage": "https://github.com/marcofarina/slidev-theme-cyberpunk-ide",
+  "files": [
+    "components/",
+    "layouts/",
+    "public/",
+    "setup/",
+    "styles/",
+    "vite.config.ts",
+    "README.md",
+    "UNLICENSE"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "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": "^52.14.1"
+  },
+  "devDependencies": {
+    "@slidev/cli": "^52.14.1",
+    "@types/markdown-it-container": "^4.0.0",
+    "markdown-it-container": "^4.0.0"
+  },
+  "//": "Learn more: https://sli.dev/guide/write-theme.html",
+  "slidev": {
+    "colorSchema": "dark",
+    "defaults": {
+      "lineNumbers": true,
+      "fonts": {
+        "sans": "Monaspace Neon",
+        "mono": "Monaspace Neon",
+        "local": [
+          "Monaspace Neon",
+          "Monaspace Radon"
+        ],
+        "provider": "none"
+      }
+    }
+  }
+}

package/public/callouts/LICENSE

@@ -0,0 +1,7 @@
+<a href="https://www.flaticon.com/free-icons/brain" title="brain icons">Brain icons created by Freepik - Flaticon</a>
+<a href="https://www.flaticon.com/free-icons/idea" title="idea icons">Idea icons created by Freepik - Flaticon</a>
+<a href="https://www.flaticon.com/free-icons/clean" title="clean icons">Clean icons created by Freepik - Flaticon</a>
+<a href="https://www.flaticon.com/free-icons/keyboard-key" title="keyboard-key icons">Keyboard-key icons created by
+    littleicon - Flaticon</a>
+<a href="https://www.flaticon.com/free-icons/fire" title="fire icons">Fire icons created by pocike - Flaticon</a>
+<a href="https://www.flaticon.com/free-icons/scroll" title="scroll icons">Scroll icons created by Freepik - Flaticon</a>