slidev-theme-the-unnamed 0.0.2 → 0.0.4

package/README.md

@@ -2,8 +2,93 @@
 
 [![NPM version](https://img.shields.io/npm/v/slidev-theme-the-unnamed?color=F141A8&label=)](https://www.npmjs.com/package/slidev-theme-the-unnamed)
 
-TBA
+A [Slidev](https://sli.dev/) theme based on the [The unnamed - VS Code theme](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-unnamed-theme) by [Elio Struyf](https://elio.dev).
+
+## Usage
+
+Add the following frontmatter to your `slides.md`. Start Slidev then it will prompt you to install the theme automatically.
+
+```yaml
+---
+theme: the-unnamed
+---
+```
 
 ## Layouts
 
-## Components
+The theme currently has the following layouts:
+
+- `default`
+- `cover`
+- `section`
+- `about-me`
+- and the ones from Slidev itself
+
+### Cover
+
+![](./assets/001.png)
+
+**Usage**
+
+```yaml
+---
+layout: cover
+background: <image url> (optional)
+---
+```
+
+### About me
+
+![](./assets/002.png)
+
+**Usage**
+
+```yaml
+---
+layout: about-me
+
+helloMsg: Hello!
+name: <name>
+imageSrc: <image url>
+job: <job title>
+line1: 
+line2: 
+social1: 
+social2: 
+social3: 
+---
+```
+
+### Default
+
+![](./assets/005.png)
+
+
+## Cusomizations
+
+You can customize the theme by adding the following frontmatter to your `slides.md`.
+
+```yaml
+themeConfig:
+  background: "#161C2C"
+  color: "#F3EFF5"
+  
+  accents-teal: "#44FFD2"
+  accents-yellow: "#FFE45E"
+  accents-red: "#FE4A49"
+  accents-lightblue: "#15C2CB"
+  accents-blue: "#5EADF2"
+  accents-vulcan: "#0E131F"
+
+  code-background: "#0F131E"
+  code-border: "#242d34"
+```
+
+## Components
+
+*Coming later*
+
+<br />
+<br />
+
+[![Visitors](https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Fgithub.com%2Festruyf%2Fslidev-theme-the-unnamed&countColor=%23F141A8)](https://visitorbadge.io/status?path=https%3A%2F%2Fgithub.com%2Festruyf%2Fslidev-theme-the-unnamed)

package/changelog.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [0.0.4] - 2023-02-02
+
+- Added mermaid styles for `sequenceDiagram`
+- Small fixes
+
+## [0.0.3] - 2023-02-02
+
+- Updated styles for all layouts
+- Added screenshots and documentation
+
 ## [0.0.2] - 2023-01-31
 
 - New layouts

package/example.md

@@ -1,12 +1,104 @@
 ---
 theme: ./
 background: https://source.unsplash.com/collection/94734566/1920x1080
+
+themeConfig:
+  background: "#161C2C"
+  color: "#F3EFF5"
+  accents-teal: "#44FFD2"
+  accents-yellow: "#FFE45E"
+  accents-red: "#FE4A49"
+  accents-lightblue: "#15C2CB"
+  accents-blue: "#5EADF2"
+  accents-vulcan: "#0E131F"
+  code-background: "#0F131E"
+  code-border: "#242d34"
 ---
 
 # Slidev - The Unnamed
 
 Created by [Elio Struyf](https://elio.dev)
 
+---
+layout: about-me
+
+helloMsg: Hello!
+name: Elio Struyf
+imageSrc: https://elio.dev/eliostruyf_2022.jpg
+job: Lead DevTools Engineer @ Rapid 
+line1: "#Stickerpreneur @ pyod.shop"
+line2: "#Maintainer @ Front Matter CMS"
+social1: "@eliostruyf"
+social2: eliostruyf.com
+social3: elio@struyfconsulting.be
+---
+
+---
+layout: cover
+---
+
+# Cover title
+
+Subtitle for the cover
+
+---
+layout: section
+---
+
+# Section title
+
+Subtitle for the section
+
+---
+
+# Code with Shiki and The unnamed theme
+
+The code highlighting is powered by Shiki and [The unnamed - VS Code theme](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-unnamed-theme)
+
+```ts
+interface User {
+  id: number
+  firstName: string
+  lastName: string
+  role: string
+}
+
+function updateUser(id: number, update: Partial<User>) {
+  const user = getUser(id)
+  const newUser = { ...user, ...update }
+  saveUser(id, newUser)
+}
+```
+
+---
+
+# Table 
+
+| Title | Description | Default |
+| --- | --- | --- |
+| `layout` | The layout to use for the slide | `default` |
+| `theme` | The theme to use for the slide | `the-unnamed` |
+| `highlighter` | The highlighter to use for the slide | `shiki` |
+| `background` | The background to use for the slide | `none` |
+
+## Content test underneath
+
+Some content to place here
+
+---
+
+# Heading 1
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
+
+##### Heading 5
+
+> **Info**: This is a note
+
 ---
 
 # What is Slidev?
@@ -74,13 +166,3 @@ class: "text-center"
 # Learn More
 
 [Documentations](https://sli.dev) / [GitHub Repo](https://github.com/slidevjs/slidev)
-
----
-layout: flex
----
-
-# `flex` layout
-
-The `flex` layout is similar to cover, but with a bit more space for the content. Opacity is set to `1`.
-
-> **Info**: This is a note

package/layouts/about-me.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { handleBackground } from '@slidev/client/layoutHelper'
+
+  const props = defineProps<{
+    imageSrc?: string
+    helloMsg?: string
+    name?: string
+    job?: string
+    line1?: string
+    line2?: string
+    email?: string
+    social1?: string
+    social2?: string
+    social3?: string
+  }>()
+
+  const style = computed(() => handleBackground(props.imageSrc, false))
+</script>
+
+<template>
+  <div class="slidev-layout about-me p-0">
+    <div class="flex h-full">
+      <div class="w-1/2 h-full flex flex-col justify-end" :style="style">
+      </div>
+      <div class="w-1/2 flex flex-col justify-between items-end px-8 py-16">
+        <h1 v-if="helloMsg" class="flex">{{ helloMsg }}</h1>
+
+        <div class="flex flex-col justify-end items-end text-right py-16">
+          <h2 class="font-extrabold">{{ name }}</h2>
+
+          <div class="text-2xl space-y-2 mt-4">
+            <p class="job">{{ job }}</p>
+            <p class="line-1">{{ line1 }}</p>
+            <p class="line-2">{{ line2 }}</p>
+          </div>
+
+          <div class="text-2xl space-y-2 mt-4">
+            <p class="social social-1">{{ social1 }}</p>
+            <p class="social social-2">{{ social2 }}</p>
+            <p class="social social-3">{{ social3 }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+

package/layouts/cover.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { handleBackground } from '../layoutHelper'
+import { handleBackground } from '@slidev/client/layoutHelper'
 const props = defineProps({
   background: {
     default: '',

package/layouts/default.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="bg-main slidev-layout default">
+    <div class="my-auto h-full">
+      <slot />
+    </div>
+  </div>
+</template>

package/layouts/section.vue

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-the-unnamed",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "keywords": [
     "slidev-theme",
     "slidev"
@@ -37,5 +37,6 @@
     }
   },
   "author": "Elio Struyf <elio@struyfconsulting.be>",
-  "funding": "https://github.com/sponsors/estruyf"
+  "funding": "https://github.com/sponsors/estruyf",
+  "bugs": "https://github.com/estruyf/slidev-theme-the-unnamed/issues"
 }

package/setup/mermaid.ts

@@ -0,0 +1,35 @@
+import type { MermaidOptions } from '@slidev/types'
+import { defineMermaidSetup } from '@slidev/types'
+
+export default defineMermaidSetup(() => {
+  // eslint-disable-next-line prefer-const
+  let injection_return: MermaidOptions = {
+    theme: 'forest',
+    themeVariables: {
+      // General theme variables
+      noteBkgColor: "#181d29",
+      noteTextColor: "#F3EFF5cc",
+      noteBorderColor: "#404551",
+
+      // Sequence diagram variables
+      actorBkg: "#0E131F",
+      actorBorder: "#44FFD2",
+      actorTextColor: "#F3EFF5",
+      actorLineColor: "#F3EFF5",
+      signalColor: "#F3EFF5",
+      signalTextColor: "#F3EFF5",
+      sequenceNumberColor: "#F3EFF5",
+      labelBoxBorderColor: "#5EADF2",
+      activationBkgColor: "#181d29",
+      activationBorderColor: "#5EADF2",
+    },
+    themeCSS: `
+      polygon.labelBox,
+      polygon.labelBox + text {
+        display: none;
+      }
+    `
+  }
+
+  return injection_return
+})

package/styles/code.css

@@ -1,14 +1,18 @@
 .shiki-dark {
-  background: var(--slidev-code-background) !important;
+  background: var(--slidev-theme-code-background) !important;
 }
 
 :not(pre) > code {
-  background: var(--slidev-code-background) !important;
+  background: var(--slidev-theme-code-background) !important;
 }
 
 .shiki-container {
   @apply mb-4;
 
+  .slidev-code {
+    border: 1px solid var(--slidev-code-border);
+  }
+
   code, pre {
     font-size: 1em;
   }
@@ -20,6 +24,11 @@
   opacity: 0.50;
 }
 
-:not(pre) > code:before {
-  margin-right: -0.08em;
+:not(pre) > code {
+  &:before {
+    margin-right: -0.08em;
+  }
+
+  outline: 1px solid var(--slidev-code-border);
+  @apply rounded-sm;
 }

package/styles/index.ts

@@ -2,3 +2,4 @@
 import '@slidev/client/styles/layouts-base.css'
 import './layout.css'
 import './code.css'
+import './mermaid.css'

package/styles/layout.css

@@ -2,27 +2,90 @@
   // default theme color
   // can be overrided by uses `themeConfig` option
   --slidev-theme-primary: #161C2C;
-  --slidev-slide-container-background: #161C2C;
 
-  // Custom colors
-  --slidev-slide-color: #F3EFF5;
-  --slidev-code-background: #0F131E;
-
-  --slidev-accents-teal: #44FFD2;
-  --slidev-accents-yellow: #FFE45E;
-  --slidev-accents-red: #FE4A49;
-  --slidev-accents-blue: #5EADF2;
+  /* Custom colors*/
+  --slidev-theme-color: #F3EFF5;
+  --slidev-theme-background: #161C2C;
+
+  // Code colors
+  --slidev-theme-code-background: #0F131E;
+  --slidev-theme-code-border: #242d34;
+
+  // Accent colors
+  --slidev-theme-accents-teal: #44FFD2;
+  --slidev-theme-accents-yellow: #FFE45E;
+  --slidev-theme-accents-red: #FE4A49;
+  --slidev-theme-accents-lightblue: #15C2CB;
+  --slidev-theme-accents-blue: #5EADF2;
+  --slidev-theme-accents-vulcan: #0E131F;
 }
 
-
+/* The unnamed styles */ 
 .dark #slide-content,
 .dark .bg-main {
-  background: var(--slidev-slide-container-background);
-  color: var(--slidev-slide-color);
+  background: var(--slidev-theme-background);
+  color: var(--slidev-theme-color);
 }
 
-.slidev-layout h1 + p {
-  opacity: 1;
+// General layout styles
+.slidev-layout {
+  h1 + p {
+    opacity: 1;
+  }
+
+  blockquote {
+    display: flex;
+    align-items: center;
+    background: var(--slidev-theme-code-background);
+    color: var(--slidev-theme-color);
+    border-color: #F141A8;
+    border-left-width: 3px;
+    font-size: 1.1em;
+  }
+
+  h1 {
+    @apply text-4xl;
+  }
+
+  h2 {
+    @apply text-3xl;
+  }
+
+  h3 {
+    @apply text-2xl;
+  }
+
+  h4 {
+    @apply text-xl;
+  }
+
+  h5 {
+    @apply text-base;
+  }
+
+  a {
+    color: inherit;
+
+    &:hover {
+      color: inherit;
+    }
+  }
+
+  h2 + p,
+  h2 + ul {
+    @apply mt-4;
+  }
+
+  p + h2, 
+  ul + h2, 
+  table + h2, 
+  p + blockquote, 
+  h2 + blockquote, 
+  h3 + blockquote, 
+  h4 + blockquote, 
+  h5 + blockquote {
+    @apply mt-8;
+  }
 }
 
 .slidev-layout.cover,
@@ -36,15 +99,14 @@
   h1 + p {
     @apply -mt-2 opacity-50 mb-4;
   }
-
-  p + h2, ul + h2, table + h2 {
-    @apply mt-10;
-  }
 }
 
 .slidev-layout.cover,
+.slidev-layout.section,
+.slidev-layout.intro,
 .slidev-layout.default,
-.slidev-layout.center {
+.slidev-layout.center,
+.slidev-layout[layout="default"] {
   h1 {
     display: inline-block;
     padding: 0.25em;
@@ -63,9 +125,29 @@
       z-index: -1;
       transform: rotate(-1deg);
     }
+
+    code {
+      background: transparent !important;
+      font-size: inherit;
+      outline: 0 !important;
+    }
   }
 }
 
+
+// Default
+.slidev-layout.default,
+.slidev-layout[layout="default"] {
+  h1 {
+    color: var(--slidev-theme-code-background);
+
+    &::before {
+      background: var(--slidev-theme-accents-yellow);
+    }
+  }
+}
+
+// Cover
 .slidev-layout.cover {
 
   &::before {
@@ -81,29 +163,28 @@
   &.slidev-page-1 {
     p {
       font-weight: bold;
-      padding-left: 1.25em;
     }
   }
 
   h1 + p {
     opacity: 0.7;
+    padding-left: 1.25em;
   }
 
   > div {
     z-index: 1;
 
     h1 {
-      color: #0E131F;
+      color: var(--slidev-theme-accents-vulcan);
       padding: .25em .5em;
       margin: 0;
-      font-size: 3em;
 
       &::before {
         width: calc(100% - 0.5em);
         height: calc(100% - 0.25em);
         margin-left: -0.25em;
         margin-top: -0.12em;
-        background: var(--slidev-accents-teal);
+        background: var(--slidev-theme-accents-teal);
       }
     }
 
@@ -115,36 +196,57 @@
 
     h2 {
       margin: .5em 0 0;
+      padding-left: .5em;
     }
 
     code {
-      color: var(--slidev-slide-color);
-      border-radius: 0 !important;
+      color: var(--slidev-theme-color);
     }
   }
 }
 
-.slidev-layout.center {
+// Section
+.slidev-layout.section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  height: 100%;
+  font-size: 1.1rem;
+  line-height: 1;
+  padding-left: 3.5rem;
+  padding-right: 3.5rem;
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+
   h1 {
-    color: var(--slidev-code-background);
-    margin-bottom: 0;
+    color: var(--slidev-theme-code-background);
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+    margin-left: -0.05em;
+    width: fit-content;
+    position: relative;
 
     &::before {
-      background: var(--slidev-accents-blue);
+      background: var(--slidev-theme-accents-lightblue);
     }
+  }
 
-    code {
-      background: transparent !important;
-    }
+  p {
+    font-size: 1.25rem;
+    margin-bottom: 1em;
+    line-height: 1.25em;
   }
 }
 
-.slidev-layout.default {
+// Center
+.slidev-layout.center {
   h1 {
-    color: var(--slidev-code-background);
+    color: var(--slidev-theme-code-background);
+    margin-bottom: 0;
 
     &::before {
-      background: var(--slidev-accents-yellow);
+      background: var(--slidev-theme-accents-blue);
     }
 
     code {
@@ -153,22 +255,13 @@
   }
 }
 
-.slidev-layout blockquote {
-  display: flex;
-  align-items: center;
-  background: var(--slidev-code-background);
-  color: var(--slidev-slide-color);
-  border-color: #F141A8;
-  border-left-width: 3px;
-  font-size: 1.1em;
-}
-
+/* About me slide */
 .about-me {
-  background: var(--slidev-slide-color) !important;
-  color: var(--slidev-code-background) !important;
+  background: var(--slidev-theme-color) !important;
+  color: var(--slidev-theme-code-background) !important;
 
   h1 {
-    background: var(--slidev-accents-yellow);
+    background: var(--slidev-theme-accents-yellow);
     display: inline-block;
     padding: 0.25em;
     font-weight: bold;
@@ -176,7 +269,7 @@
   }
 
   h2 {
-    color: var(--slidev-accents-red);
+    color: var(--slidev-theme-accents-red);
     font-size: 2.5em;
   }
 

package/styles/mermaid.css

@@ -0,0 +1,9 @@
+.mermaid {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    margin: 0 auto;
+  }
+}

package/components/Box.vue

@@ -1,45 +0,0 @@
-<!-- 
-Usage:
-
-<box left="430px" top="350px" width="330px" height="45px" borderColor="#44FFD2" borderWidth="5px" borderStyle="solid" />
--->
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-  const props = defineProps<{
-    x: number | string
-    y: number | string
-    backgroundColor?: string
-    borderColor?: string
-    borderStyle?: string
-    borderWidth?: string
-    width?: string
-    height?: string
-    title?: string
-    description?: string
-    textColor?: string
-  }>()
-
-  const style = computed(() => ({
-    'width': props.width || `100px`,
-    'height': props.height || `100px`,
-    'top': props.y,
-    'left': props.x,
-    'background-color': props.backgroundColor || undefined,
-    'border-color': props.borderColor || `#fff`,
-    'border-width': props.borderWidth || `2px`,
-    'border-style': props.borderStyle || `solid`,
-    'color': props.textColor || undefined,
-    'content': `' '`
-  }))
-</script>
-
-<template>
-  <div 
-    class="absolute flex flex-col justify-center items-center text-base text-center p-4 space-y-2"
-    :style="style">
-    <h2 v-if="title">{{ title }}</h2>
-    <p v-if="description">{{ description }}</p>
-  </div>
-</template>

package/components/Oval.vue

@@ -1,45 +0,0 @@
-<!-- 
-Usage:
-
-<circle left="430px" top="350px" width="330px" height="45px" borderColor="#44FFD2" borderWidth="5px" borderStyle="solid" />
--->
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-const props = defineProps<{
-  x: number | string
-  y: number | string
-  backgroundColor?: string
-  borderColor?: string
-  borderStyle?: string
-  borderWidth?: string
-  width?: string
-  height?: string
-  title?: string
-  description?: string
-  textColor?: string
-}>()
-
-const style = computed(() => ({
-  'width': props.width || `100px`,
-  'height': props.height || `100px`,
-  'top': props.y,
-  'left': props.x,
-  'background-color': props.backgroundColor || undefined,
-  'border-color': props.borderColor || `#fff`,
-  'border-width': props.borderWidth || `2px`,
-  'border-style': props.borderStyle || `solid`,
-  'color': props.textColor || undefined,
-  'content': `' '`
-}))
-</script>
-
-<template>
-  <div 
-    class="absolute flex flex-col justify-center items-center rounded-full text-base text-center p-4 space-y-2"
-    :style="style">
-    <h2 v-if="title">{{ title }}</h2>
-    <p v-if="description">{{ description }}</p>
-  </div>
-</template>

package/components/ShowHide.vue

@@ -1,48 +0,0 @@
-<!-- 
-Example:
-
----
-clicks: 4
----
-
-# Common capabilities of extensions
-
-- Registering commands, configurations, keybindings, or menus
-- Storing workspace or global state
-- Displaying notifications
-- Collect user input
-- Open files, folders, or URLs
-- Theming
-- Language features
-
-<ShowHide show="1" hide="2">
-  Show on click 1, hide on 2, {{ $slidev.nav.clicks }}
-</ShowHide>
-<ShowHide show="2" hide="3">
-  Show on click 1, hide on 2, {{ $slidev.nav.clicks }}
-</ShowHide>
-
--->
-
-
-<script setup lang="ts">
-import { ref, resolveDirective } from 'vue'
-
-const props = defineProps({
-  show: {
-    type: Number,
-    default: null
-  },
-  hide: {
-    type: Number,
-    default: null
-  },
-})
-
-const show = ref(props.show)
-const hide = ref(props.hide)
-</script>
-
-<template>
-  <slot v-if="$slidev.nav.clicks >= parseInt(show) && $slidev.nav.clicks < parseInt(hide)" />
-</template>

package/layouts/flex.vue

@@ -1,83 +0,0 @@
-<template>
-  <div class="flexBox">
-    <slot />
-  </div>
-</template>
-
-<style lang="postcss">
-.flexBox {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-
-  height: 100%;
-  font-size: 1.1rem;
-  line-height: 1;
-  padding-left: 3.5rem;
-  padding-right: 3.5rem;
-  padding-top: 2.5rem;
-  padding-bottom: 2.5rem;
-
-  h1 {
-    /* background: #15C2CB; */
-    display: inline-block;
-    padding: 0.25em;
-    color: #0F131E;
-    margin-bottom: 1em;
-    width: fit-content;
-    position: relative;
-
-    font-size: 2.25rem;
-    line-height: 2.5rem;
-    margin-left: -0.05em;
-
-    &::before {
-      content: " ";
-      display: block;
-      position: absolute;
-      width: calc(100%);
-      height: calc(100%);
-      margin-left: -0.25em;
-      margin-top: -0.25em;
-      background: #15C2CB;
-      z-index: -1;
-      transform: rotate(-1deg);
-    }
-
-    code {
-      background: transparent !important;
-      font-size: 2.25rem;
-    }
-  }
-
-  p {
-    font-size: 1.25rem;
-    margin-bottom: 1em;
-    line-height: 1.25em;
-  }
-
-  code {
-    font-size: 1.10rem;
-  }
-
-  blockquote {
-    display: flex;
-    align-items: center;
-    background: #0F131E;
-    color: #F3EFF5;
-    border-color: #F141A8;
-    border-left-width: 3px;
-    border-radius: 0.25rem;
-    font-size: 1.1em;
-    line-height: 1.25rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-
-    p {
-      margin-bottom: 0;
-    }
-  }
-}
-</style>

package/layouts/intro.vue

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

package/layouts/quote.vue

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

package/layouts/statement.vue

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