slidev-theme-underglow 0.1.0 → 0.1.1

package/README.md

@@ -2,26 +2,11 @@
 
 [![NPM version](https://img.shields.io/npm/v/slidev-theme-underglow?color=3AB9D4&label=)](https://www.npmjs.com/package/slidev-theme-underglow)
 
-A (...) theme for [Slidev](https://github.com/slidevjs/slidev).
-
-<!--
-  Learn more about how to write a theme:
-  https://sli.dev/guide/write-theme.html
---->
-
-<!--
-  run `npm run dev` to check out the slides for more details of how to start writing a theme
--->
-
-<!--
-  Put some screenshots here to demonstrate your theme
-
-  Live demo: [...]
--->
+A Slidev theme with gradient underglow effects.
 
 ## Install
 
-Add the following frontmatter to your `slides.md`. Start Slidev then it will prompt you to install the theme automatically.
+Add the following frontmatter to your `slides.md`. Slidev will prompt you to install the theme automatically.
 
 <pre><code>---
 theme: <b>underglow</b>
@@ -29,44 +14,146 @@ theme: <b>underglow</b>
 
 Learn more about [how to use a theme](https://sli.dev/guide/theme-addon#use-theme).
 
-## Theme Configuration
+## Configuration
 
-You can customize the theme's gradient colors using `themeConfig` in your frontmatter:
+### Colors
+
+Customize the theme's gradient colors:
 
 ```yaml
 ---
 theme: underglow
 themeConfig:
-  primary: '#7D1CFE'  # Primary brand color (default: purple)
-  middle: '#176AFA'   # Middle transition color (default: blue)
-  accent: '#01D393'   # Accent color (default: green)
+  primary: '#7D1CFE'  # Gradient start (default: purple)
+  middle: '#176AFA'   # Middle color (default: blue)
+  accent: '#01D393'   # Gradient end (default: green)
 ---
 ```
 
-### Color Options
+### Footer
 
-- **`primary`**: The primary brand color (gradient start). Default: `#7D1CFE` (purple)
-- **`middle`**: The middle transition color. Default: `#176AFA` (blue)
-- **`accent`**: The accent color (gradient end). Default: `#01D393` (green)
+The footer displays event info, logo, and page number. Configure in frontmatter:
 
-These colors are used throughout the theme for gradients, backgrounds, and visual effects.
+```yaml
+---
+theme: underglow
+event:
+  name: Event Name
+  date: Date
+logo: URL to logo  # Optional
+---
+```
+
+To hide the footer on specific slides, use `hideFooter: true` in the slide frontmatter.
 
 ## Layouts
 
 This theme provides the following layouts:
 
-> TODO:
+### `default`
+
+Standard layout with content vertically centered. Use for regular content slides.
+
+### `center`
+
+Centers content both horizontally and vertically. Perfect for single statements or key points.
+
+### `cover`
+
+Title slide layout with full-width content. Use for your presentation cover/title page.
+
+### `intro`
+
+Speaker introduction layout with circular profile image and info display. Requires frontmatter:
+
+```yaml
+---
+layout: intro
+name: Your Name
+jobTitle: Your Job Title
+company: Your Company
+website: your-website.com
+image: /path/to/photo.jpg
+---
+```
+
+### `image-full`
+
+Full-screen background image layout. Requires `image` in frontmatter:
+
+```yaml
+---
+layout: image-full
+image: /path/to/image.jpg
+hideFooter: true  # Optional
+---
+```
+
+### `quote`
+
+Display large quotes with optional background image. Supports frontmatter:
+
+```yaml
+---
+layout: quote
+quote: "Your quote here"
+subtitle: Attribution or source
+link: https://optional-link.com  # Optional
+background: /path/to/image.jpg   # Optional
+overlayOpacity: 0.6              # Optional, default 0.6
+---
+```
+
+### `two-columns`
+
+Split content into two columns. Use named slots:
+
+```md
+---
+layout: two-columns
+---
+
+# Header (spans both columns)
+
+::left::
+Left column content
+
+::right::
+Right column content
+```
+
+### `three-columns`
+
+Split content into three columns. Use named slots:
+
+```md
+---
+layout: three-columns
+---
+
+# Header (spans all columns)
+
+::left::
+Left column content
+
+::middle::
+Middle column content
+
+::right::
+Right column content
+```
 
 ## Components
 
-This theme provides the following components:
+### Footer
+
+Automatically included in all layouts (except when `hideFooter: true`). Displays:
+- Event name and date (if configured)
+- Logo (if configured)
+- Current slide number
 
-> TODO:
+Configure via frontmatter (see [Configuration](#configuration)).
 
 ## 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
+Contributions welcome! See [CONTRIBUTING.md](CONTRIBUTING.md).

package/components/footer.vue

@@ -40,7 +40,6 @@
 
 .footer-logo {
   height: 16px;
-  width: 16px;
   margin: 0 4px;
 }
 

package/layouts/cover.vue

@@ -6,7 +6,21 @@ import Footer from "../components/footer.vue";
   <div class="slidev-layout cover">
     <div class="my-auto w-full">
       <slot />
+      <p v-if="$frontmatter.speakers?.length" class="speakers">
+        {{ $frontmatter.speakers.map(s => s.name).join(' & ') }}
+      </p>
     </div>
   </div>
   <Footer />
 </template>
+
+<style scoped>
+.speakers {
+  width: 100%;
+  text-align: center;
+  font-size: 20px;
+  color: rgba(255, 255, 255, 0.6);
+  margin-top: 32px;
+  padding: 0;
+}
+</style>

package/layouts/intro.vue

@@ -1,60 +1,112 @@
 <script setup>
+import Footer from "../components/footer.vue";
 </script>
+
 <template>
-  <div class="slidev-layout intro">
-    <div class="my-auto w-full container">
-      <div class="image-container">
-        <span class="image-border"/>
-        <img :alt="$frontmatter.name" :src="$frontmatter.image" class="image"/>
+  <!-- Single speaker -->
+  <div v-if="$frontmatter.speakers?.length === 1" class="slidev-layout intro">
+    <div class="my-auto w-full single-container">
+      <div class="image-container image-container--large">
+        <span class="image-border" />
+        <img :alt="$frontmatter.speakers[0].name" :src="$frontmatter.speakers[0].image" class="image" />
       </div>
       <div class="info-container">
         <h2 class="hello">Hello!</h2>
-        <h1 class="name">{{ $frontmatter.name }}</h1>
-        <p class="job-title">🚀&nbsp;&nbsp;{{ $frontmatter.jobTitle }}</p>
-        <p class="job-title">🤝&nbsp;&nbsp;{{ $frontmatter.company }}</p>
-        <p class="website">🔗&nbsp;&nbsp;<a :href=url>{{ $frontmatter.website }}</a></p>
-        <div class="logos">
-          <a v-for="logo in logos" :href="logo.link" target="_blank" style="border: 0">
-            <img :alt="logo.alt" :src="logo.src" class="logo"/>
+        <h1 class="name">{{ $frontmatter.speakers[0].name }}</h1>
+        <p class="detail">🚀&nbsp;&nbsp;{{ $frontmatter.speakers[0].jobTitle }}</p>
+        <p class="detail">🤝&nbsp;&nbsp;{{ $frontmatter.speakers[0].company }}</p>
+        <p class="detail">🔗&nbsp;&nbsp;<a :href="$frontmatter.speakers[0].website">{{ $frontmatter.speakers[0].website }}</a></p>
+        <div v-if="$frontmatter.speakers[0].logos?.length" class="logos">
+          <a v-for="logo in $frontmatter.speakers[0].logos" :href="logo.link" target="_blank" style="border: 0">
+            <img :alt="logo.alt" :src="logo.src" class="logo" />
           </a>
         </div>
       </div>
     </div>
   </div>
+
+  <!-- Two speakers -->
+  <div v-else-if="$frontmatter.speakers?.length === 2" class="slidev-layout intro">
+    <div class="my-auto w-full two-container">
+      <div class="speaker-row">
+        <div class="info-container info-container--left">
+          <h1 class="name">{{ $frontmatter.speakers[0].name }}</h1>
+          <p class="detail">🚀&nbsp;&nbsp;{{ $frontmatter.speakers[0].jobTitle }}</p>
+          <p class="detail">🤝&nbsp;&nbsp;{{ $frontmatter.speakers[0].company }}</p>
+          <p class="detail">🔗&nbsp;&nbsp;<a :href="$frontmatter.speakers[0].website">{{ $frontmatter.speakers[0].website }}</a></p>
+        </div>
+        <div class="image-container image-container--small">
+          <span class="image-border" />
+          <img :alt="$frontmatter.speakers[0].name" :src="$frontmatter.speakers[0].image" class="image" />
+        </div>
+      </div>
+      <div class="speaker-row">
+        <div class="image-container image-container--small">
+          <span class="image-border" />
+          <img :alt="$frontmatter.speakers[1].name" :src="$frontmatter.speakers[1].image" class="image" />
+        </div>
+        <div class="info-container info-container--right">
+          <h1 class="name">{{ $frontmatter.speakers[1].name }}</h1>
+          <p class="detail">🚀&nbsp;&nbsp;{{ $frontmatter.speakers[1].jobTitle }}</p>
+          <p class="detail">🤝&nbsp;&nbsp;{{ $frontmatter.speakers[1].company }}</p>
+          <p class="detail">🔗&nbsp;&nbsp;<a :href="$frontmatter.speakers[1].website">{{ $frontmatter.speakers[1].website }}</a></p>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <Footer />
 </template>
 
 <style scoped>
-.container {
-  width: 100%;
-
+/* ── Single speaker ── */
+.single-container {
   display: flex;
   flex-flow: row;
   gap: 64px;
-
   align-items: center;
   justify-content: space-evenly;
 }
 
+/* ── Two speakers ── */
+.two-container {
+  display: flex;
+  flex-direction: column;
+  gap: 36px;
+}
+
+.speaker-row {
+  display: flex;
+  flex-flow: row;
+  gap: 48px;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ── Shared ── */
 .image-container {
-  display: inline-block;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.image-container--large {
   width: 300px;
   height: 300px;
+}
 
-  position: relative;
+.image-container--small {
+  width: 180px;
+  height: 180px;
 }
 
 .image-border {
   display: inline-block;
   width: 100%;
   height: 100%;
-
   position: absolute;
   top: 0;
   left: 0;
-
   border-radius: 50%;
-
   background: linear-gradient(90deg, var(--slidev-theme-color-primary), var(--slidev-theme-color-middle), var(--slidev-theme-color-accent));
 }
 
@@ -63,34 +115,49 @@
   width: 100%;
   height: 100%;
   padding: 6px;
-
   position: absolute;
   top: 0;
   left: 0;
-
   border-radius: 50%;
   object-fit: cover;
 }
 
 .info-container {
-  height: 100%;
-
   display: flex;
   flex-direction: column;
-  align-items: end;
 }
 
-.name, .hello, .job-title, .website {
+.info-container--left {
+  align-items: flex-end;
+  text-align: right;
+}
+
+.info-container--right {
+  align-items: flex-start;
+  text-align: left;
+}
+
+.name, .hello, .detail {
   margin: 0;
   padding: 0;
 }
 
+.hello {
+  margin-bottom: 8px;
+}
+
 .name {
+  margin: 24px 0 16px;
+}
+
+.single-container .name {
   margin: 48px 0;
 }
 
-.job-title {
-  margin-bottom: 12px;
+.detail {
+  font-size: 20px;
+  line-height: 1.5;
+  padding-bottom: 8px;
 }
 
 .logos {
@@ -104,4 +171,4 @@
   display: inline-block;
   height: 56px;
 }
-</style>
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-underglow",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A gradient Slidev theme with customizable colors",
   "type": "module",
   "author": "Katharina Sick <https://ksick.dev>",
@@ -32,6 +32,12 @@
     "README.md",
     "LICENSE"
   ],
+  "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.11.5"
   },
@@ -47,11 +53,5 @@
         "mono": "Fira Code"
       }
     }
-  },
-  "scripts": {
-    "build": "slidev build example.md",
-    "dev": "slidev example.md --open",
-    "export": "slidev export example.md",
-    "screenshot": "slidev export example.md --format png"
   }
-}
+}