slidev-theme-watabegg 1.0.0

package/styles/globals.css

@@ -0,0 +1,160 @@
+/* Google Fonts Import */
+@import url('https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+/* Global Variables */
+:root {
+  --slidev-theme-primary: #448f47;
+  --cover-gradient-start: #A5D6A7;
+  --cover-gradient-end: #2b702e;
+  --cover-accent: #215724;
+  --slidev-theme-background: #FFFFFF;
+  --slidev-theme-text: #333333;
+  --slidev-theme-text-secondary: #666666;
+  --slidev-theme-border: #E0E0E0;
+  --slidev-theme-shadow: rgba(0, 0, 0, 0.1);
+  
+  /* Font settings */
+  --slidev-font-family: 'M PLUS 2', 'Roboto', sans-serif;
+  --slidev-font-mono: 'Fira Code', 'Courier New', monospace;
+  --slidev-font-size-base: 24px;
+  --slidev-line-height: 1.4;
+}
+
+/* Global Layout Styles */
+.slidev-layout {
+  background: var(--slidev-theme-background);
+  font-family: var(--slidev-font-family);
+  font-size: var(--slidev-font-size-base);
+  line-height: var(--slidev-line-height);
+  color: var(--slidev-theme-text);
+  
+  /* Common spacing */
+  padding: 2rem;
+  
+  /* Ensure consistent typography */
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--slidev-font-family);
+    font-weight: 600;
+    color: var(--slidev-theme-text);
+  }
+  
+  h1 {
+    font-size: 2.5rem;
+    margin-bottom: 1.5rem;
+    border-bottom: 3px solid var(--slidev-theme-primary);
+    padding-bottom: 0.5rem;
+  }
+  
+  h2 {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+    color: var(--slidev-theme-primary);
+  }
+  
+  h3 {
+    font-size: 1.5rem;
+    margin-bottom: 0.75rem;
+  }
+  
+  /* Lists */
+  ul, ol {
+    margin: 1rem 0;
+    padding-left: 2rem;
+  }
+  
+  li {
+    margin: 0.5rem 0;
+  }
+  
+  /* Code */
+  code {
+    font-family: var(--slidev-font-mono);
+    background: #f5f5f5;
+    padding: 0.2rem 0.4rem;
+    border-radius: 0.25rem;
+    font-size: 0.9em;
+  }
+  
+  pre {
+    font-family: var(--slidev-font-mono);
+    background: #f8f8f8;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    overflow-x: auto;
+    border-left: 4px solid var(--slidev-theme-primary);
+  }
+  
+  /* Links */
+  a {
+    color: var(--slidev-theme-primary);
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: border-color 0.2s;
+  }
+  
+  a:hover {
+    border-bottom-color: var(--slidev-theme-primary);
+  }
+}
+
+.slidev-layout:not(.cover, .image, .image-scroll) {
+  position: relative;
+  padding-bottom: 4rem; 
+}
+
+.slidev-layout:not(.cover, .image, .image-scroll)::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3rem;
+  border-top: 1px solid var(--slidev-theme-border);
+  background: var(--slidev-theme-background);
+}
+
+/* Global header positioning for non-cover layouts */
+.slidev-layout:not(.cover, .image, .image-scroll) h1:first-child {
+  position: fixed;
+  top: 2rem;
+  left: 2rem;
+  right: 2rem;
+  margin: 0;
+  padding-bottom: 0.5rem;
+  background: var(--slidev-theme-background);
+  z-index: 10;
+  border-bottom: 3px solid var(--slidev-theme-primary);
+}
+
+.slidev-layout:not(.cover) {
+  padding-top: 6rem; /* Space for fixed header */
+}
+
+/* Animation utilities */
+.slide-enter-active,
+.slide-leave-active {
+  transition: all 0.3s ease;
+}
+
+.slide-enter-from {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.slide-leave-to {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+
+/* Utility classes */
+.text-highlight {
+  background: linear-gradient(transparent 60%, #ffeb3b 60%);
+  padding: 0 0.2rem;
+}
+
+.card {
+  background: white;
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  border: 1px solid var(--slidev-theme-border);
+}

package/styles/index.ts

@@ -0,0 +1,5 @@
+// inherit from base layouts, remove it to get full customizations
+// Google Fonts import for M PLUS 2
+import '@slidev/client/styles/layouts-base.css'
+import './layout.css'
+import './globals.css'

package/styles/layout.css

@@ -0,0 +1,142 @@
+/* Layout-specific styles */
+
+/* Cover layout */
+.slidev-layout.cover {
+  @apply h-full grid place-items-center text-center relative;
+  background: #FFFFFF;
+
+
+  h1 {
+    @apply text-7xl leading-tight mb-6;
+    color: white;
+    position: static;
+    border: none;
+    padding: 0;
+    margin-bottom: 1.5rem;
+    z-index: 10;
+    position: relative;
+  }
+
+  h2 {
+    @apply text-3xl opacity-90 mb-8;
+    color: white;
+    z-index: 10;
+    position: relative;
+  }
+
+  .author {
+    position: absolute;
+    bottom: 2rem;
+    right: 2rem;
+    color: var(--cover-accent, #2E7D32);
+    font-weight: 600;
+    font-size: 1.2rem;
+    z-index: 10;
+  }
+
+  .date {
+    position: absolute;
+    bottom: 2rem;
+    left: 2rem;
+    color: #ffffff;
+    font-weight: 600;
+    font-size: 1.2rem;
+    z-index: 10;
+  }
+}
+
+/* Intro layout */
+.slidev-layout.intro {
+  @apply h-full grid place-items-center text-center;
+  
+  h1 {
+    @apply text-6xl leading-20 mb-6;
+    position: static;
+    border: none;
+  }
+
+  h1 + p {
+    @apply -mt-2 opacity-70 mb-4 text-xl;
+  }
+
+  p + h2,
+  ul + h2,
+  table + h2 {
+    @apply mt-10;
+  }
+}
+
+/* Two columns layout */
+.slidev-layout.two-cols {
+  .slidev-grid-container {
+    @apply grid grid-cols-2 gap-8 h-full;
+  }
+  
+  .col-left, .col-right {
+    @apply flex flex-col justify-start;
+  }
+}
+
+/* Answer layout styles are now handled by the QuestionList component */
+
+/* Image layout */
+.slidev-layout.image {
+  position: relative;
+  padding: 0;
+  
+  .background-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: 0;
+  }
+  
+  .content {
+    position: relative;
+    z-index: 1;
+    height: 100%;
+    padding: 2rem;
+  }
+  
+  h1 {
+    position: relative;
+    background-color: rgba(255, 255, 255, 0); 
+  }
+
+}
+
+/* Image scroll layout */
+.slidev-layout.image-scroll {
+  position: relative;
+  padding: 0;
+  overflow: hidden;
+
+  .image-layer {
+    position: absolute;
+    inset: 0;
+    cursor: grab;
+    overflow: hidden;
+  }
+
+  .image-layer.is-panning {
+    cursor: grabbing;
+  }
+
+  .image-layer img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    will-change: transform;
+    transition: transform 80ms ease-out;
+  }
+
+  .content {
+    position: relative;
+    z-index: 1;
+    height: 100%;
+    padding: 2rem;
+  }
+}

package/utils/colors.ts

@@ -0,0 +1,57 @@
+export type ThemeColorKey = 'red' | 'yellow' | 'green' | 'blue' | 'purple'
+
+export interface ThemePalette {
+  primary: string
+  gradientStart: string
+  gradientEnd: string
+  accent: string
+}
+
+export const defaultThemeColor: ThemeColorKey = 'green'
+
+export const themePalettes: Record<ThemeColorKey, ThemePalette> = {
+  red: {
+    primary: '#E53935',
+    gradientStart: '#EF9A9A',
+    gradientEnd: '#B71C1C',
+    accent: '#B71C1C',
+  },
+  yellow: {
+    primary: '#FBC02D',
+    gradientStart: '#FFF59D',
+    gradientEnd: '#F57F17',
+    accent: '#F57F17',
+  },
+  green: {
+    primary: '#448f47',
+    gradientStart: '#A5D6A7',
+    gradientEnd: '#2b702e',
+    accent: '#215724',
+  },
+  blue: {
+    primary: '#1E88E5',
+    gradientStart: '#90CAF9',
+    gradientEnd: '#0D47A1',
+    accent: '#0D47A1',
+  },
+  purple: {
+    primary: '#8E24AA',
+    gradientStart: '#CE93D8',
+    gradientEnd: '#4A148C',
+    accent: '#4A148C',
+  },
+}
+
+export function resolveThemeColor(rawValue: unknown): ThemeColorKey {
+  if (typeof rawValue !== 'string')
+    return defaultThemeColor
+
+  const normalized = rawValue.trim().toLowerCase() as ThemeColorKey
+  return normalized in themePalettes ? normalized : defaultThemeColor
+}
+
+export function getThemePalette(rawValue: unknown): ThemePalette {
+  const key = resolveThemeColor(rawValue)
+  return themePalettes[key]
+}
+

package/utils/link.ts

@@ -0,0 +1,17 @@
+const getLink = ({
+  frontmatter,
+  slidevConfigs,
+}: {
+  frontmatter: Record<string, unknown>
+  slidevConfigs: Record<string, unknown> | undefined
+}) => {
+  if (typeof frontmatter.link === 'string' && frontmatter.link.length > 0)
+    return frontmatter.link
+  
+  const globalLink = slidevConfigs?.['link']
+  return typeof globalLink === 'string' && globalLink.length > 0
+    ? globalLink
+    : undefined
+}
+
+export default getLink

package/utils/render.ts

@@ -0,0 +1,5 @@
+import { marked } from 'marked';
+
+export const renderMarkdown = (text: string) => ({
+  template: `<div class="inline-block">${marked.parse(text)}</div>`
+});

package/utils/useThemePalette.ts

@@ -0,0 +1,49 @@
+import { computed, ref, watchEffect } from 'vue'
+
+import {
+  defaultThemeColor,
+  resolveThemeColor,
+  themePalettes,
+  type ThemeColorKey,
+  type ThemePalette,
+} from './colors'
+
+const activeColorKey = ref<ThemeColorKey>(defaultThemeColor)
+
+function normalizeColor(value: unknown): ThemeColorKey | undefined {
+  if (value === undefined)
+    return undefined
+
+  if (value === null)
+    return defaultThemeColor
+
+  if (typeof value === 'string') {
+    const trimmed = value.trim()
+    if (!trimmed)
+      return defaultThemeColor
+
+    return resolveThemeColor(trimmed)
+  }
+
+  return defaultThemeColor
+}
+
+export function useActiveThemePalette(source: () => unknown) {
+  watchEffect(() => {
+    const normalized = normalizeColor(source())
+    if (normalized !== undefined)
+      activeColorKey.value = normalized
+  })
+
+  const palette = computed<ThemePalette>(() => themePalettes[activeColorKey.value])
+
+  return {
+    palette,
+    colorKey: computed(() => activeColorKey.value),
+  }
+}
+
+export function getActiveThemePalette(): ThemePalette {
+  return themePalettes[activeColorKey.value]
+}
+