slidev-theme-meetup 1.0.0

package/components/assets/curve-large.svg

@@ -0,0 +1,3 @@
+<svg width="322" height="279" viewBox="0 0 322 279" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M92.5 38C73.3 18.8 22.8333 4.66666 3.32108e-06 0L0 278.5L322 278.5C316.833 269.167 298.4 248.5 266 240.5C225.5 230.5 187.5 214 176 202C164.5 190 144 158 137 123C130 88 116.5 62 92.5 38Z" fill="#859900" fill-opacity="0.3"/>
+</svg>

package/components/assets/curve-small.svg

@@ -0,0 +1,3 @@
+<svg width="317" height="83" viewBox="0 0 317 83" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.0946 82.9068C3.66097 83.1007 1.61977 83.082 1.65093e-09 82.9068L6.0946 82.9068C22.1913 81.6248 55.4565 71.0434 97.5 34.9068C158 -17.0932 234.5 -18.5932 317 82.9068L6.0946 82.9068Z" fill="#b58900"/>
+</svg>

package/example.md

@@ -0,0 +1,89 @@
+---
+theme: ./
+layout: intro
+themeConfig:
+  title: Welcome to Slidev
+  twitter: tboerger
+  github: tboerger
+---
+# Welcome to Slidev
+
+---
+layout: presenter
+photo: /images/tboerger.jpg
+---
+# Thomas Boerger
+
+Cloud engineer @ cloudpunks GmbH
+
+* Golang
+* Containers
+* Kubernetes
+* Terraform
+* Ansible
+* Prometheus
+
+---
+layout: twocols
+---
+# Twocols Example
+
+::left::
+- This is the left column
+- Sed diam voluptua
+
+::right::
+- This is the right column
+- Lorem ipsum dolor sit amet
+- Consetetur sadipscing elitr
+
+---
+layout: center
+---
+# This is a centered slide
+
+```ts
+const aspectRatioPlugin = plugin(({ addUtilities }) => {
+  const newUtilities = {
+    '.aspect-none': {
+      aspectRatio: 'none',
+    },
+    '.aspect-16-9': {
+      aspectRatio: '16/9',
+    },
+    '.aspect-4-3': {
+      aspectRatio: '4/3',
+    },
+    '.aspect-1-1': {
+      aspectRatio: '1/1',
+    },
+  }
+  addUtilities(newUtilities, ['responsive', 'hover'])
+})
+```
+
+---
+layout: cover
+---
+# This is a cover
+
+---
+layout: default
+---
+# What is Slidev?
+
+Slidev is a slides maker and presenter designed for developers, consist of the following features
+
+- 📝 **Text-based** - focus on the content with Markdown, and then style them later
+- 🎨 **Themable** - theme can be shared and used with npm packages
+- 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion
+- 🤹 **Interactive** - embedding Vue components to enhance your expressions
+- 🎥 **Recording** - built-in recording and camera view
+- 📤 **Portable** - export into PDF, PNGs, or even a hostable SPA
+- 🛠 **Hackable** - anything possible on a webpage
+
+---
+layout: qrcode
+url: https://example.com
+---
+# Link to slides

package/layouts/center.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="slidev-layout text-center">
+    <LayoutHeader class="absolute bottom-0 right-0 transform flip-x" />
+    <div class="my-auto">
+      <slot />
+    </div>
+    <LayoutFooter />
+  </div>
+</template>

package/layouts/cover.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="slidev-layout cover text-center">
+    <LayoutHeader class="absolute bottom-0 right-0 transform flip-x" />
+    <div class="my-auto">
+      <slot />
+    </div>
+    <LayoutFooter />
+  </div>
+</template>

package/layouts/default.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <div class="slidev-layout default col-grid">
+    <div
+      class="top"
+      :class="props.class"
+    >
+      <LayoutHeader class="absolute bottom-0 right-0 transform flip-x" />
+      <slot />
+    </div>
+    <div
+      class="left"
+      :class="props.class"
+    >
+      <slot name="left" />
+    </div>
+    <div
+      class="right"
+      :class="props.class"
+    >
+      <slot name="right" />
+    </div>
+    <div
+      class="bottom"
+      :class="props.class"
+    >
+      <slot name="bottom" />
+      <LayoutFooter />
+    </div>
+  </div>
+</template>
+
+<style>
+.col-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: min-content auto min-content;
+  grid-column-gap: 3rem;
+  grid-row-gap: 0;
+  height: 100%;
+}
+
+.top {
+  grid-area: 1 / 1 / 2 / 3;
+}
+
+.left {
+  grid-area: 2 / 1 / 3 / 2;
+}
+
+.right {
+  grid-area: 2 / 2 / 3 / 3;
+}
+
+.bottom {
+  grid-area: 3 / 1 / 4 / 3;
+}
+</style>

package/layouts/intro.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="slidev-layout intro text-center">
+    <LayoutHeader class="absolute left-0 top-0 transform rotate-90" />
+    <div class="my-auto">
+      <slot />
+    </div>
+    <LayoutFooter />
+  </div>
+</template>

package/layouts/presenter.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { resolveAssetUrl } from '@slidev/client/layoutHelper'
+
+  const props = defineProps({
+    photo: {
+      type: String,
+      default: '',
+    },
+  })
+
+  const photoSrc = computed(() => resolveAssetUrl(props.photo))
+  </script>
+
+<template>
+  <div class="slidev-layout presenter">
+    <LayoutHeader class="absolute bottom-0 right-0 transform flip-x" />
+    <div class="grid grid-cols-2 w-full h-full">
+      <div class="image-right">
+        <slot />
+      </div>
+      <div class="my-14 mr-14">
+        <img
+          v-if="photo"
+          :src="photoSrc"
+          class="
+            rounded-full
+            object-cover
+            object-top
+            h-80
+            w-80
+            border
+            border-8
+            border-secondary-400
+            z-10
+            float-right
+          "
+        >
+      </div>
+    </div>
+    <LayoutFooter />
+  </div>
+</template>

package/layouts/qrcode.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import QRious from 'qrious'
+
+const props = defineProps({
+  url: {
+    type: String,
+    default: '',
+  },
+})
+
+const qrcode = computed(() => {
+    return new QRious({
+        value: props.url,
+        size: 300
+    }).toDataURL()
+})
+</script>
+
+<template>
+  <div class="slidev-layout qrcode text-center">
+    <LayoutHeader class="absolute bottom-0 right-0 transform flip-x" />
+    <slot />
+    <div class="container mx-auto">
+      <img
+        :src="qrcode"
+        alt="QR Code"
+        class="w-m inline-block"
+      >
+    </div>
+    <LayoutFooter />
+  </div>
+</template>

package/layouts/twocols.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="slidev-layout default">
+    <LayoutHeader class="absolute bottom-0 right-0 transform flip-x" />
+    <slot />
+    <div class="flex mt-6 mb-3">
+      <div
+        class="w-1/2 mr-8"
+        :class="props.class"
+      >
+        <slot name="left" />
+      </div>
+      <div
+        class="w-1/2 ml-8"
+        :class="props.class"
+      >
+        <slot name="right" />
+      </div>
+    </div>
+    <div
+      class="bottom"
+      :class="props.class"
+    >
+      <slot name="bottom" />
+      <LayoutFooter />
+    </div>
+  </div>
+</template>

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "slidev-theme-meetup",
+  "version": "1.0.0",
+  "description": "Slidev theme used for talks on meetups",
+  "homepage": "https://github.com/tboerger/slidev-theme-meetup#readme",
+  "license": "CC-BY-SA-4.0",
+  "author": "Thomas Boerger <thomas@boerger.ws>",
+  "repository": "https://github.com/tboerger/slidev-theme-meetup.git",
+  "bugs": {
+    "url": "https://github.com/tboerger/slidev-theme-meetup/issues",
+    "email": "thomas@boerger.ws"
+  },
+  "scripts": {
+    "build": "slidev build example.md",
+    "dev": "slidev example.md --open",
+    "export": "slidev export example.md",
+    "screenshot": "slidev export example.md --format png",
+    "lint": "eslint --ext js --ext ts --ext vue .",
+    "release": "semantic-release"
+  },
+  "dependencies": {
+    "@slidev/types": "0.36.4",
+    "codemirror-theme-vars": "0.1.1",
+    "prism-theme-vars": "0.2.4",
+    "theme-vitesse": "0.4.10",
+    "vite-svg-loader": "3.6.0"
+  },
+  "devDependencies": {
+    "@iconify-json/mdi": "1.1.32",
+    "@semantic-release/changelog": "^6.0.1",
+    "@semantic-release/commit-analyzer": "^9.0.2",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^8.0.6",
+    "@semantic-release/npm": "^9.0.1",
+    "@semantic-release/release-notes-generator": "^10.0.3",
+    "@slidev/cli": "0.36.4",
+    "conventional-changelog-conventionalcommits": "^5.0.0",
+    "eslint": "^8.23.1",
+    "eslint-plugin-vue": "^9.4.0",
+    "playwright-chromium": "1.25.2",
+    "qrious": "4.0.2"
+  },
+  "keywords": [
+    "slidev-theme",
+    "slidev"
+  ],
+  "engines": {
+    "node": ">=14.0.0",
+    "slidev": ">=0.36.4"
+  },
+  "slidev": {
+    "colorSchema": "both",
+    "highlighter": "all",
+    "defaults": {
+      "fonts": {
+        "sans": "Helvetica",
+        "mono": "Fira Code"
+      },
+      "hightlighter": "prism"
+    }
+  }
+}

package/setup/windicss.ts

@@ -0,0 +1,53 @@
+import { resolve } from 'path'
+import { defineWindiSetup } from '@slidev/types'
+
+const plugin = require('windicss/plugin')
+
+const aspectRatioPlugin = plugin(({ addUtilities }) => {
+  const newUtilities = {
+    '.aspect-none': {
+      aspectRatio: 'none',
+    },
+    '.aspect-16-9': {
+      aspectRatio: '16/9',
+    },
+    '.aspect-4-3': {
+      aspectRatio: '4/3',
+    },
+    '.aspect-1-1': {
+      aspectRatio: '1/1',
+    },
+  }
+  addUtilities(newUtilities, ['responsive', 'hover'])
+})
+
+export default defineWindiSetup(() => ({
+  extract: {
+    include: [
+      resolve(__dirname, '../**/*.{vue,ts}'),
+    ],
+  },
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Nunito', 'system-ui', 'sans-serif'],
+        title: ['Georgia', 'serif'],
+        mono: ['Fira Code', 'ui-monospace'],
+      },
+    }
+  },
+  plugins: [
+    aspectRatioPlugin,
+    plugin(function ({ addUtilities, variants }) {
+      const newUtilities = {
+        '.flip-y': {
+          '--tw-scale-y': '-1 !important',
+        },
+        '.flip-x': {
+          '--tw-scale-x': '-1 !important',
+        },
+      }
+      addUtilities(newUtilities, variants('flip'))
+    }),
+  ],
+}))

package/styles/code.css

@@ -0,0 +1,76 @@
+@import 'prism-theme-vars/base.css';
+@import 'codemirror-theme-vars/base.css';
+@import 'prism-theme-vars/to-codemirror.css';
+
+:root {
+    --prism-font-family: var(--slidev-code-font-family);
+}
+
+html:not(.dark) {
+    --prism-foreground: #393a34;
+    --prism-background: #f8f8f8;
+    --prism-comment: #a0ada0;
+    --prism-string: #b56959;
+    --prism-literal: #2f8a89;
+    --prism-number: #296aa3;
+    --prism-keyword: #1c6b48;
+    --prism-function: #6c7834;
+    --prism-boolean: #1c6b48;
+    --prism-constant: #a65e2b;
+    --prism-deleted: #a14f55;
+    --prism-class: #2993a3;
+    --prism-builtin: #ab5959;
+    --prism-property: #b58451;
+    --prism-namespace: #b05a78;
+    --prism-punctuation: #8e8f8b;
+    --prism-decorator: #bd8f8f;
+    --prism-regex: #ab5e3f;
+    --prism-json-property: #698c96;
+}
+
+html.dark {
+    --prism-foreground: #d4cfbf;
+    --prism-background: #1b1b1b;
+    --prism-comment: #758575;
+    --prism-string: #d48372;
+    --prism-literal: #429988;
+    --prism-keyword: #4d9375;
+    --prism-boolean: #1c6b48;
+    --prism-number: #6394bf;
+    --prism-variable: #c2b36e;
+    --prism-function: #a1b567;
+    --prism-deleted: #a14f55;
+    --prism-class: #54b1bf;
+    --prism-builtin: #e0a569;
+    --prism-property: #dd8e6e;
+    --prism-namespace: #db889a;
+    --prism-punctuation: #858585;
+    --prism-decorator: #bd8f8f;
+    --prism-regex: #ab5e3f;
+    --prism-json-property: #6b8b9e;
+    --prism-line-number: #888888;
+    --prism-line-number-gutter: #eeeeee;
+    --prism-line-highlight-background: #444444;
+    --prism-selection-background: #444444;
+}
+
+pre[class*='language-'] {
+    @apply p-2;
+}
+
+:not(pre) > code {
+    font-size: 0.9em;
+    background: var(--prism-background);
+    @apply font-light py-0.5 rounded;
+}
+
+
+:not(pre) > code:before,
+:not(pre) > code:after {
+    content: '`';
+    opacity: 0.50;
+}
+
+:not(pre) > code:before {
+    margin-right: -0.08em;
+}

package/styles/index.ts

@@ -0,0 +1,4 @@
+import '@slidev/client/styles/layouts-base.css'
+
+import './layout.css'
+import './code.css'

package/styles/layout.css

@@ -0,0 +1,178 @@
+@import url(http://fonts.googleapis.com/css?family=Nunito);
+@import url(http://fonts.googleapis.com/css?family=Georgia);
+@import url(http://fonts.googleapis.com/css?family=Fira+Code);
+
+:root {
+  --slidev-theme-primary: #5d8392;
+  --slidev-code-font-size: 0.95rem;
+  --slidev-code-line-height: 1.25rem;
+}
+
+html, body {
+	background-color: #fdf6e3;
+	color: #839496;
+}
+
+html:not(.dark) {
+  a, a:visited, a:active {
+    color: #2aa198;
+    border-color: #eee8d5;
+  }
+
+  a:hover {
+    background-color: #eee8d5;
+    border-color: #eee8d5;
+    color: #2aa198;
+  }
+
+  h1, h2, h3 {
+    color: #cb4b16;
+  }
+
+  h1 a, h1 a:visited, h1 a:active {
+    color: #cb4b16;
+  }
+
+  h1 a:hover {
+    background-color: #eee8d5;
+    border-color: #eee8d5;
+  }
+
+  article h1 a.anchor {
+    color: #2aa198;
+  }
+
+  blockquote {
+    border-color: #cb4b16;
+  }
+}
+
+html.dark {
+  a, a:visited, a:active {
+    color: #2aa198;
+    border-color: #073642;
+  }
+
+  a:hover {
+    background-color: #073642;
+    border-color: #073642;
+    color: #2aa198;
+  }
+
+  h1, h2, h3 {
+    color: #cb4b16;
+  }
+
+  h1 a, h1 a:visited, h1 a:active {
+    color: #cb4b16;
+  }
+
+  h1 a:hover {
+    background-color: #073642;
+    border-color: #073642;
+    color: #cb4b16;
+  }
+
+  article h1 a.anchor {
+    color: #2aa198;
+  }
+
+  blockquote {
+    border-color: #cb4b16;
+  }
+}
+
+.slidev-layout {
+  font-variant-ligatures: none;
+  text-align: justify;
+
+  h1, h2, h3, h4, p, div {
+    @apply select-text;
+  }
+
+  h1 {
+    @apply font-bold;
+  }
+
+  h1 + h2 {
+    @apply -mt-4;
+  }
+
+  h2 {
+    @apply text-2xl font-bold;
+  }
+
+  h3 {
+    @apply text-xl font-bold;
+  }
+
+  p {
+    @apply mt-4 mb-4;
+  }
+
+  p:first-child {
+    @apply mt-0 mb-4;
+  }
+
+  p:last-child {
+    @apply mb-0;
+  }
+
+  p + h2, ul + h2, table + h2 {
+    @apply mt-10;
+  }
+
+  blockquote > * {
+    @apply my-0;
+  }
+
+  ul {
+    list-style: disc;
+  }
+
+  li > ul,
+  li > ol,
+  ul:first-child,
+  ol:first-child {
+    margin-top: 0;
+  }
+
+  :not(pre) > code:before,
+  :not(pre) > code:after {
+    content: '\2005';
+  }
+
+  .katex-display {
+    @apply my-0
+  }
+
+  th {
+    @apply font-bold;
+  }
+
+  td {
+    @apply py-1.5;
+  }
+
+  li {
+    line-height: 1.6em;
+  }
+}
+
+.slidev-layout.intro,
+.slidev-layout.cover {
+  @apply h-full grid;
+
+  h1 {
+    @apply text-6xl font-700 leading-20;
+  }
+
+  h1 + p {
+    @apply font-700 -mt-4 text-2xl;
+  }
+}
+
+:not(li) > ul > li:not(li:first-child),
+:not(li) > ol > li:not(li:first-child) {
+  margin-top: 1rem;
+}

package/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import svgLoader from 'vite-svg-loader'
+
+export default defineConfig({
+  plugins: [svgLoader()],
+})