@alphacifer/slidev-academic-theme 0.0.0

package/README.md

@@ -0,0 +1,70 @@
+# Alpha Academic Theme
+
+A light-only Slidev theme for lectures, research presentations, technical
+reports, and thesis defenses.
+
+## Installation
+
+```bash
+pnpm add -D @alphacifer/slidev-theme-alpha-academic
+```
+
+## Usage
+
+```yaml
+---
+theme: '@alphacifer/slidev-theme-alpha-academic'
+---
+```
+
+Combine it with Alpha's reusable Slidev addon when needed:
+
+```yaml
+---
+theme: '@alphacifer/slidev-theme-alpha-academic'
+addons:
+  - '@alphacifer/slidev-addon-theme'
+---
+```
+
+## Layouts
+
+- `cover`: title slide with a restrained academic accent.
+- `default`: standard content slide.
+- `section`: centered section divider.
+- `end`: closing slide.
+
+## Design tokens
+
+Override the CSS custom properties in a deck-level `style.css` to customize the
+theme without replacing its layouts:
+
+```css
+:root {
+  /* Primary Text / Heading Color */
+  --alpha-academic-primary: #0f172a;
+  /* Content Background Color */
+  --alpha-academic-bg: #f8fafc;
+  /* Accent Highlight (e.g. Cover / Badge) */
+  --alpha-academic-accent: #0ea5e9;
+  /* Accent Foreground (e.g. highlighted terms / marks) */
+  --alpha-academic-accent-foreground: #0284c7;
+}
+
+.dark {
+  --alpha-academic-accent: #10b981;
+  --alpha-academic-accent-foreground: #34d399;
+}
+```
+
+## Preview
+
+```bash
+pnpm --filter @alphacifer/slidev-theme-alpha-academic dev
+```
+
+Build the preview without opening a browser:
+
+```bash
+pnpm --filter @alphacifer/slidev-theme-alpha-academic preview:build
+```

package/layouts/cover.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { handleBackground } from '@slidev/client';
+import { computed } from 'vue';
+
+const { background } = defineProps({
+  background: {
+    default: '',
+  },
+});
+
+const style = computed(() => handleBackground(background));
+</script>
+
+<template>
+  <main
+    class="slidev-layout alpha-academic-cover"
+    :style="style"
+  >
+    <div class="alpha-academic-cover__content">
+      <slot />
+    </div>
+  </main>
+</template>

package/layouts/default.vue

@@ -0,0 +1,5 @@
+<template>
+  <main class="slidev-layout alpha-academic-default">
+    <slot />
+  </main>
+</template>

package/layouts/end.vue

@@ -0,0 +1,11 @@
+<template>
+  <main class="slidev-layout alpha-academic-end">
+    <div class="alpha-academic-end__content">
+      <slot />
+      <div
+        aria-hidden="true"
+        class="alpha-academic-end__rule"
+      />
+    </div>
+  </main>
+</template>

package/layouts/section.vue

@@ -0,0 +1,11 @@
+<template>
+  <main class="slidev-layout alpha-academic-section">
+    <div class="alpha-academic-section__content">
+      <slot />
+    </div>
+    <div
+      aria-hidden="true"
+      class="alpha-academic-section__rule"
+    />
+  </main>
+</template>

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@alphacifer/slidev-academic-theme",
+  "version": "0.0.0",
+  "description": "Alpha's light-only academic theme for Slidev",
+  "type": "module",
+  "keywords": [
+    "slidev-theme",
+    "slidev",
+    "academic"
+  ],
+  "files": [
+    "layouts",
+    "setup",
+    "slide-bottom.vue",
+    "style.css",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "author": "Alpha",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zgid123/alpha-dx.git",
+    "directory": "packages/slidev/academic-theme"
+  },
+  "license": "MIT",
+  "slidev": {
+    "colorSchema": "light",
+    "defaults": {
+      "aspectRatio": "16/9",
+      "canvasWidth": 980,
+      "transition": "slide-left",
+      "fonts": {
+        "provider": "none",
+        "sans": "Inter",
+        "serif": "Georgia",
+        "mono": "JetBrains Mono"
+      }
+    }
+  },
+  "peerDependencies": {
+    "@slidev/client": ">=52.18.0",
+    "vue": "^3.5.40"
+  },
+  "devDependencies": {
+    "@slidev/client": "52.19.0",
+    "@slidev/cli": "52.19.0",
+    "vue": "3.5.40"
+  },
+  "scripts": {
+    "dev": "slidev slides.md --open",
+    "preview:build": "slidev build slides.md"
+  }
+}

package/slide-bottom.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useSlideContext } from '@slidev/client';
+import { computed } from 'vue';
+
+const { $frontmatter } = useSlideContext();
+
+const isVisible = computed(() => !$frontmatter.hidePagy);
+</script>
+
+<template>
+  <div
+    v-if="isVisible"
+    aria-label="Slide pagination"
+    class="alpha-academic-pagy"
+  >
+    <SlideCurrentNo />
+    <span aria-hidden="true">/</span>
+    <SlidesTotal />
+  </div>
+</template>

package/style.css

@@ -0,0 +1,116 @@
+:root {
+  /* --alpha-academic-primary: #0369a1; */
+  --alpha-academic-primary: #0f172a;
+  --alpha-academic-bg: #f8fafc;
+  --alpha-academic-accent: #0ea5e9;
+  --alpha-academic-accent-foreground: #0284c7;
+}
+
+.dark,
+html.dark {
+  --alpha-academic-accent: #10b981;
+  --alpha-academic-accent-foreground: #34d399;
+  --slidev-code-background: #f5f5f5;
+  --slidev-code-foreground: #1b1b1b;
+  --slidev-code-tab-divider: #e5e5e5;
+  --slidev-code-tab-text-color: #67676c;
+  --slidev-code-tab-active-text-color: #3c3c43;
+}
+
+/* Force Shiki syntax tokens to always use light-mode colors */
+html.dark .shiki {
+  --twoslash-popup-bg: var(--shiki-light-bg, inherit);
+  color: var(--shiki-light, inherit);
+}
+
+html.dark pre.shiki span {
+  color: var(--shiki-light, inherit);
+}
+
+.slidev-page {
+  background-color: var(--alpha-academic-bg);
+}
+
+.alpha-bg-center {
+  /* Neutralise the dark gradient overlay injected by handleBackground(bg, true).
+     screen(black, X) = X, so the background image renders at its original brightness. */
+  background-blend-mode: screen;
+}
+
+.slidev-layout {
+  height: 100%;
+  padding: 2.5rem 3rem;
+  color: var(--alpha-academic-primary);
+}
+
+.slidev-layout mark {
+  font-weight: bold;
+  color: var(--alpha-academic-accent-foreground);
+  background-color: transparent;
+}
+
+.slidev-layout p {
+  font-size: 1.25rem;
+}
+
+.alpha-academic-cover {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+.alpha-academic-cover__content {
+  width: 100%;
+}
+
+.slidev-layout h1 {
+  margin-bottom: 0.5rem;
+  font-size: 2.5rem;
+  font-weight: bold;
+  color: var(--alpha-academic-primary);
+}
+
+.alpha-academic-cover.slidev-layout h1 {
+  margin: 0;
+  font-size: 3.75rem;
+  font-weight: bold;
+  color: var(--alpha-academic-accent);
+}
+
+.alpha-speaker {
+  font-size: 20px;
+}
+
+.alpha-academic-pagy {
+  position: absolute;
+  right: 3rem;
+  bottom: 2.5rem;
+  z-index: 50;
+  display: flex;
+  gap: 0.4rem;
+  font-size: 1.2rem;
+  font-weight: bold;
+  font-variant-numeric: tabular-nums;
+  color: var(--alpha-academic-primary);
+}
+
+.slidev-page:has(.alpha-academic-cover) .alpha-academic-pagy,
+.slidev-page:has(.alpha-arc-toc) .alpha-academic-pagy,
+.slidev-page:has(.alpha-bg-center) .alpha-academic-pagy {
+  display: none;
+}
+
+.alpha-arc-toc.slidev-layout .alpha-arc-toc__heading,
+.alpha-arc-toc.slidev-layout .alpha-arc-toc__heading h1 {
+  font-size: 2.5rem;
+}
+
+.slidev-page .alpha-arc-toc.slidev-layout .alpha-arc-toc__item > a {
+  font-size: 1.25rem;
+}
+
+.alpha-bg-center .alpha-bg-center__index {
+  color: var(--alpha-academic-accent-foreground);
+}