Merge branch 'slidev-test' into 'main'

feat: slidev cheatsheet team

Closes #3 and #2

See merge request !1

.gitignore

+node_modules
+.DS_Store
+dist
+*.local
+index.html
+.remote-assets
+.idea/
+components.d.ts

.npmrc

+# for pnpm
+shamefully-hoist=true

.vscode/extensions.json

+{
+  "recommendations": ["antfu.slidev"]
+}

README.md

-# slidev-theme-cheatsheet
+# slidev-theme-alpaga
 
+Alpaga is a simple and quick to set up theme for [Slidev](https://github.com/slidevjs/slidev). It's ideal for Markdown notes, booklets or cheatsheets as you can easily customize it to your business colors and identity and export to PDF. 
 
+[![NPM version](https://img.shields.io/npm/v/slidev-theme-slidev-theme?color=3AB9D4&label=)](https://www.npmjs.com/package/slidev-theme-slidev-theme)
 
-## Getting started
+Alpaga theme for [Slidev](https://github.com/slidevjs/slidev).
 
-To make it easy for you to get started with GitLab, here's a list of recommended next steps.
+## Install
 
-Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
+Add the following frontmatter to your `slides.md`. Start Slidev then it will prompt you to install the theme automatically.
 
-## Add your files
+<pre><code>---
+theme: <b>alpaga</b>
+---</code></pre>
 
-- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
-- [ ] [Add files using the command line](https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command:
+Learn more about [how to use a theme](https://sli.dev/themes/use).
 
-```
-cd existing_repo
-git remote add origin https://lab.frogg.it/lydra/www/slidev-theme-cheatsheet.git
-git branch -M main
-git push -uf origin main
-```
-
-## Integrate with your tools
-
-- [ ] [Set up project integrations](https://lab.frogg.it/lydra/www/slidev-theme-cheatsheet/-/settings/integrations)
-
-## Collaborate with your team
-
-- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
-- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
-- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
-- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
-- [ ] [Automatically merge when pipeline succeeds](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
-
-## Test and Deploy
-
-Use the built-in continuous integration in GitLab.
-
-- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/index.html)
-- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing(SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
-- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
-- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
-- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
-
-***
-
-# Editing this README
+## Customization
 
-When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thank you to [makeareadme.com](https://www.makeareadme.com/) for this template.
+### Theme and colors 
 
-## Suggestions for a good README
-Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
-
-## Name
-Choose a self-explaining name for your project.
-
-## Description
-Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
+The color schema and the general colors are customisable in the frontmatter with `colorSchema` and `themeConfig` respectively.
+```
+colorSchema: 'dark'
+themeConfig:
+  primary: '#00FF7F'
+  secondary: '#66CDAA'
+  code: 'black'
+```
+You can change the code colors independantly of the theme so it is always adapted to the code snippets background color. 
 
-## Badges
-On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
+### Overlay Configuration
 
-## Visuals
-Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
+You can configure the overlay in the frontmatter as well.
+```
+themeConfig:
+  subtitle: "Slidev Alpaga Theme"
+  logoSrc: "/img/dummy-logo.png"
+  licenseImg: "/img/license.png"
+  author: "Celeste"
+  version: "0.1"
+```
 
-## Installation
-Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
+### Fonts 
 
-## Usage
-Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
+The fonts are customizable in your slides frontmatter as well, it will automatically import [Google Fonts](https://fonts.google.com/), you just have to type the name in. 
+If you wish to use local fonts see [this documentation](https://sli.dev/custom/fonts.html#local-fonts)
 
-## Support
-Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
 
-## Roadmap
-If you have ideas for releases in the future, it is a good idea to list them in the README.
+```
+fonts:
+  sans: 'Montserrat'
+  serif: 'Comfortaa'
+  mono: 'Fira Code'
+```
 
 ## Contributing
-State if you are open to contributions and what your requirements are for accepting them.
-
-For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
-
-You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
 
-## Authors and acknowledgment
-Show your appreciation to those who have contributed to the project.
+- `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
 
 ## License
-For open source projects, say how it is licensed.
 
-## Project status
-If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.
+[![slidev-theme-alpaga Copyright 2023 Lydra](https://www.gnu.org/graphics/gplv3-with-text-136x68.png)](https://choosealicense.com/licenses/gpl-3.0/)

example.md

+---
+theme: ./
+colorSchema: 'light'
+themeConfig:
+  primary: '#fb7756'
+  secondary: '#cc7b4b'
+  code: 'white'
+  subtitle: "Slidev Alpaga Theme"
+  logoSrc: "/img/alpaga-logo.png"
+  logoUrl: ""
+  licenseUrl: "https://creativecommons.org/licenses/by-sa/4.0/deed.fr"
+  licenseImg: "/img/license.png"
+  authorUrl: "https://lydra.fr"
+  author: "Author's Name"
+  version: "0.1"
+
+class: text-center
+aspectRatio: '4/3'
+fonts:
+  # basically the text
+  sans: 'Montserrat'
+  # titles
+  serif: 'Comfortaa'
+  # for code blocks, inline code, etc.
+  mono: 'Fira Code'
+title: Example
+titleTemplate: '%s - Alpaga'
+layout: two-cols
+---
+
+<template v-slot:default>
+
+# Theme for Slidev
+
+Alpaga is a simple and quick to set up theme for Slidev. It's ideal for Markdown notes, booklets or cheatsheets as you can easily customize it to your business colors and identity and export to PDF. 
+
+## Customization 
+
+**Light theme, fonts, colors** are customizable from your slides frontmatter like you would do with other [Slidev Themes](https://sli.dev/custom/#frontmatter-configures).
+
+
+**Logo, author, license and more** on the layout are customizable from the `themeConfig` part of the frontmatter as follows: 
+
+```
+themeConfig:
+  subtitle: "Slidev Alpaga Theme"
+  logoSrc: "/img/dummy-logo.png"
+  logoUrl: ""
+  license: "https://creativecommons.org"
+  licenseImg: "/img/license.png"
+  authorUrl: "https://lydra.fr"
+  author: "Author's Name"
+  version: "0.1"
+```
+[**To export your booklet**](https://sli.dev/guide/exporting.html) use `slidev export` with the Slidev CLI.  
+You can specify the output file name with:  
+`slidev export --output my-pdf-export`  
+
+**Enjoy ! 🦙** 
+
+</template>
+<template v-slot:right>
+
+Aenean sit amet porta sapien, et tempor nunc. Integer finibus consectetur arcu quis sodales. In sed mattis neque, a maximus nunc. Vivamus in pharetra velit. Praesent auctor bibendum convallis. 
+
+## Curabitur sed risus rutrum
+
+![a llama](/img/pexels-anastasia-yudin-5580714.jpg)
+*Photo by [Anastasia Yudin on pexels](https://www.pexels.com/fr-fr/@anastasia-yudin-2240500/)*
+
+Aenean sed ultricies sapien, ut aliquet libero. Vestibulum felis libero, tempus et magna consequat, ultricies rhoncus dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras sodales, felis non semper sagittis, dui nibh rhoncus leo, a pretium libero lorem eu magna. Integer at tellus tempor, consequat est at, pharetra lacus. Sed vitae leo lectus. 
+
+
+</template>
+<!--
+Here is another comment.
+-->
+
+---
+layout: two-cols
+---
+
+<template v-slot:default>
+
+## 💻 Some Code !
+
+<article class="forecast">
+    <h2>Weather forecast for Seattle</h2>
+    <article class="day-forecast">
+      <div>
+          <h3>03 March 2018</h3>
+          <span>Rain.</span>
+      </div>
+      <span class="icon"> 🌧️ </span> 
+    </article>
+    <article class="day-forecast">
+    <div>
+        <h3>04 March 2018</h3>
+        <span>Periods of rain.</span>
+    </div>
+    <span class="icon"> ☁️ </span> 
+    </article>
+</article>
+
+<style>
+.forecast {
+    margin: 1rem;
+    padding: 0.3rem;
+    background-color: #eee;
+    font-size: 16px;
+    color: black;
+    h2 {
+      font-size: 1.2rem;
+      text-align: center;
+    }
+}
+.day-forecast {
+    margin: 0.5rem;
+    padding: 0.3rem;
+    font-size: 0.5em;
+    display: flex; 
+    justify-content: space-between;
+}
+
+.day-forecast {
+    background: white;
+}
+
+.icon {
+  font-size: 3rem;
+}
+
+</style>
+
+### 🦙 Curabitur sed risus
+
+```
+<article class="forecast">
+    <h1>Weather forecast for Seattle</h1>
+    <article class="day-forecast">
+        <h2>03 March 2018</h2>
+        <p>Rain.</p>
+    </article>
+    <article class="day-forecast">
+        <h2>04 March 2018</h2>
+        <p>Periods of rain.</p>
+    </article>
+    <article class="day-forecast">
+        <h2>05 March 2018</h2>
+        <p>Heavy rain.</p>
+    </article>
+</article>
+```
+</template>
+
+<template v-slot:right>
+
+  ## 😎 Nullam suscipit dolor
+
+```mermaid
+    gitGraph
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       checkout main
+       commit
+
+```
+
+  ## 🐄 Curabitur sit amet
+  Nam viverra tincidunt consectetur. Ut congue commodo urna et tincidunt. Nunc diam nibh, consectetur sit amet tristique porttitor, maximus a ligula. 
+
+  - `article` in sem molestie `main`
+  - `h1`, `h2` & `h3` fringilla odio ut scelerisque molestie.
+  - `header` Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque auctor pellentesque neque, `footer` id faucibus mi.
+  - `footer`, quisque porta dictum pellentesque. 
+
+Sed commodo gravida odio sed finibus. Quisque auctor pellentesque neque, id faucibus mi. Morbi vehicula pharetra molestie. Nulla facilisi. Aliquam erat volutpat. Sed vitae ullamcorper eros. 
+
+</template>
+
+---
+layout: two-cols
+---
+
+<template v-slot:default>
+
+## 🐐 Nullam suscipit dolor
+
+Maecenas non arcu in sem molestie aliquet. Fusce tristique efficitur urna, in sagittis nunc suscipit ut. Aenean felis erat, feugiat sit amet tincidunt at, congue in mi. Curabitur non vehicula mauris. In dui turpis, commodo sit amet auctor a, pretium id elit. Proin elit lectus, luctus a sollicitudin id, tempus placerat ex. Morbi luctus facilisis nunc, at rutrum magna interdum in. Suspendisse pellentesque tincidunt facilisis. Aenean dapibus faucibus sapien non maximus. 
+
+
+## 🐐 Nullam suscipit dolor
+
+Fusce tristique efficitur urna, in sagittis nunc suscipit ut  
+`a --> b & c--> d c --> a`
+
+<center> 
+```mermaid
+flowchart LR
+   a --> b & c--> d 
+   c --> a
+```
+</center>
+
+Suspendisse pellentesque tincidunt facilisis. Aenean dapibus faucibus sapien non maximus. 
+</template>
+
+<template v-slot:right>
+
+![another llama](/img/pexels-laraine-davis-1578484.jpg)
+*Photo by [Laraine Davis on pexels](https://www.pexels.com/fr-fr/@laraine-davis-734364/)*
+
+</template>

global-bottom.vue

+<!-- global-bottom.vue -->
+
+<script>
+export default {
+  data() {
+    return {
+    date: new Date().toLocaleDateString(),
+    }
+  }
+}
+</script>
+<template>
+  <footer class="absolute flex justify-between bottom-8 left-16 z-60 right-16 ">
+    <span v-if="$slidev.themeConfigs.version"> V {{ $slidev.themeConfigs.version }} of {{ date }}  </span> 
+    <a :href="$slidev.themeConfigs.licenseUrl"> <img class="w-24" :src="$slidev.themeConfigs.licenseImg"/></a> 
+    <span v-if="$slidev.themeConfigs.authorUrl">Author : <a  :href="$slidev.themeConfigs.authorUrl" target="_blank"> {{  $slidev.themeConfigs.author  }} </a>  </span>
+    <span v-else-if="$slidev.themeConfigs.author">Author : <span class="secondary-color"> {{  $slidev.themeConfigs.author  }} </span>  </span>
+  </footer>
+</template>

global-top.vue

+<!-- global-bottom.vue -->
+<template>
+<header class="absolute flex justify-between top-8 left-16 z-60 right-16">
+  <a v-if="$slidev.themeConfigs.logoUrl" :href="$slidev.themeConfigs.logoUrl" target="_blank"> <img class="h-12" :src="$slidev.themeConfigs.logoSrc"/></a> 
+ <img v-else-if="$slidev.themeConfigs.logoSrc" class="h-12" :src="$slidev.themeConfigs.logoSrc"/>
+
+  <span v-if="$slidev.themeConfigs.subtitle" class="secondary-color"> {{ $slidev.themeConfigs.subtitle }}</span>
+
+</header>
+</template>

package.json

+{
+  "name": "slidev-theme-alpaga",
+  "version": "0.1.0",
+  "authors": [
+    "Celeste Robert",
+    "Lydra.fr"
+  ],
+  "keywords": [
+    "slidev",
+    "theme",
+    "alpaga",
+    "cheatsheet",
+    "alpaga-theme",
+    "theme"
+  ],
+  "engines": {
+    "node": ">=14.0.0",
+    "slidev": ">=0.19.3"
+  },
+  "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": "^0.40.3",
+    "codemirror-theme-vars": "^0.1.1",
+    "prism-theme-vars": "^0.2.4",
+    "theme-vitesse": "^0.6.2"
+  },
+  "devDependencies": {
+    "@iconify-json/fa": "^1.1.4",
+    "@slidev/cli": "^0.40.3",
+    "playwright-chromium": "^1.31.2"
+  },
+  "//": "Learn more: https://sli.dev/themes/write-a-theme.html",
+  "slidev": {
+    "colorSchema": "both",
+    "highlighter": "all",
+    "defaults": {
+      "fonts": {
+        "sans": "Nunito Sans",
+        "mono": "Fira Code"
+      },
+      "hightlighter": "prism"
+    }
+  }
+}

setup/shiki.ts

+import { defineShikiSetup } from '@slidev/types'
+
+export default defineShikiSetup(async ({ loadTheme }) => {
+  return {
+    theme: {
+      dark: await loadTheme(require.resolve('theme-vitesse/themes/vitesse-dark.json')),
+      light: await loadTheme(require.resolve('theme-vitesse/themes/vitesse-light.json')),
+    },
+  }
+})

setup/windicss.ts

+import { resolve } from 'path'
+import { defineWindiSetup } from '@slidev/types'
+
+export default defineWindiSetup(() => ({
+  extract: {
+    include: [
+      resolve(__dirname, '../**/*.{vue,ts}'),
+    ],
+  },
+  shortcuts: {
+    // custom the default background
+    'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])',
+  },
+}))

styles/index.ts

+// inherit from base layouts, remove it to get full customizations
+import '@slidev/client/styles/layouts-base.css'
+import './layout.css'

styles/layout.css

+:root {
+  // default theme color
+  // can be overrided by uses `themeConfig` option
+  --slidev-theme-primary: #5d8392;
+  --slidev-theme-secondary: red;
+  --slidev-theme-code: white; 
+
+}
+
+a, .secondary-color {
+  color: var(--slidev-theme-primary);
+}
+
+.slidev-layout {
+  @apply py-20 px-16;
+
+  p, ul {
+    @apply text-xs text-left mr-2;
+  }
+
+  li {
+    @apply text-left;
+    list-style: inside
+  }
+
+  p + h2, ul + h2, table + h2 {
+    @apply mt-10;
+  }
+
+  h1 {
+    @apply text-4xl font-serif font-bold;
+    color: var(--slidev-theme-primary)
+  }
+
+  h1 + p {
+    @apply text-center;
+  }
+
+  :not(pre) > code {
+    font-size: 0.9em;
+    padding: 0 0.2rem;
+    background: var(--slidev-theme-secondary);
+    color: var(--slidev-theme-code);
+    @apply font-light py-0.5 rounded;
+  }
+
+  pre {
+    background: var(--slidev-theme-secondary);
+    color: var(--slidev-theme-code);
+    @apply font-light px-4 py-2 text-left rounded text-xs mb-6 mt-4 mr-4;
+  }
+
+  img {
+    @apply rounded;
+  }
+}
+
+.slidev-layout.cover,
+.slidev-layout.intro {
+  @apply h-full grid;
+
+  h1 {
+    @apply text-6xl leading-20;
+  }
+
+  h1 + p {
+    @apply -mt-2 opacity-50 mb-4;
+  }
+
+  p + h2, ul + h2, table + h2 {
+    @apply mt-10;
+  }
+}