Merge pull request #4 from FaberVitale/feat/add-dark-theme

Feat/add dark theme
Roma-JS · Dec 19, 2023 · 6f69e4d · 6f69e4d
2 parents 659eadf + 18897fb
commit 6f69e4d
Show file tree

Hide file tree

Showing 7 changed files with 521 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,35 @@
 # RomaJS intro slides
 
+Intro slides used at the beginning of RomaJS meetings.
+
+## Development
+
+### Requirements
+
+This project requires [node 20](https://nodejs.org/en/) and uses [`pnpm`](https://pnpm.io/) as package manager.
+
+If you have [`nvm`](https://github.com/nvm-sh/nvm) installed run
+
+```bash
+nvm use
+```
+
+#### pnpm & corepack
+
+You do not need to install [`pnpm`](https://pnpm.io), you just need have [`node 20`](https://nodejs.org/en/) installed and then enable [`corepack`](https://nodejs.org/api/corepack.html):
+
+```bash
+corepack enable
+```
+
+You should then be able to run pnpm normally in this project, e.g.
+
+```bash
+pnpm run build
+```
+
+### Start project
+
 To start the slide show:
 
 - `pnpm install`
@@ -9,3 +39,35 @@ To start the slide show:
 Edit the [slides.md](./slides.md) to see the changes.
 
 Learn more about Slidev on [documentations](https://sli.dev/).
+
+### Build
+
+```bash
+pnpm run build
+```
+
+### Preview
+
+exec [build](#build) script then run:
+
+```bash
+pnpm run preview
+```
+
+### Deployment
+
+There's a [github action](.github/workflows/deploy.yml) that publishes the slides on Github pages
+whenever [main](https://github.com/Roma-JS/roma-js-opening-slides/tree/main) is updated.
+
+### Change theme
+
+Add or update the theme config object in the frontmatter of [slides.md](./slides.md).
+
+```yaml
+# used for theme customization, will inject root styles as `--slidev-theme-x` for attribute `x`
+themeConfig:
+  primary: '#ffb200'
+  bg-primary: '#111'
+```
+
+See https://sli.dev/custom/ for more details.
diff --git a/components/Snowfall.vue b/components/Snowfall.vue
@@ -0,0 +1,33 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import ConfettiGenerator from "confetti-js";
+
+// declare a ref to hold the element reference
+// the name must match template ref value
+const canvas = ref(null);
+
+onMounted(() => {
+  // https://www.npmjs.com/package/confetti-js#options
+  const confettiSettings = { 
+    target: canvas.value, 
+    props: ['circle'], 
+    colors: [[150,150,150], [200,200,200], [244,244,244], [255,255,255]],
+  };
+  const confetti = new ConfettiGenerator(confettiSettings);
+  confetti.render();
+});
+</script>
+
+<style>
+.confetti {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+</style>
+
+<template>
+  <canvas class="confetti" ref="canvas"></canvas>
+</template>
diff --git a/components/SocialIcon.vue b/components/SocialIcon.vue
@@ -0,0 +1,42 @@
+<script setup>
+  const props = defineProps({
+    type: {
+      validator(value) {
+        return ['discord', 'facebook', 'github', 'slack', 'twitter', 'youtube'].includes(value)
+      }
+    },
+    size: {
+      type: [Number, String],
+      default: 24
+    },
+    class: {
+      type: String
+    }
+  });
+</script>
+
+<template>
+<svg v-if="type === 'discord'" :width="props.size" :height="props.size" :class="props.class" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path d="M14.86 11.5C14.86 12.11 14.41 12.61 13.84 12.61C13.28 12.61 12.82 12.11 12.82 11.5C12.82 10.89 13.27 10.39 13.84 10.39C14.41 10.39 14.86 10.89 14.86 11.5ZM10.19 10.39C9.62 10.39 9.17 10.89 9.17 11.5C9.17 12.11 9.63 12.61 10.19 12.61C10.76 12.61 11.21 12.11 11.21 11.5C11.22 10.89 10.76 10.39 10.19 10.39ZM20.75 4.06V22C18.2307 19.7737 19.0364 20.5106 16.11 17.79L16.64 19.64H5.3C4.17 19.64 3.25 18.72 3.25 17.58V4.06C3.25 2.92 4.17 2 5.3 2H18.7C19.83 2 20.75 2.92 20.75 4.06ZM17.9 13.54C17.9 10.32 16.46 7.71 16.46 7.71C15.02 6.63 13.65 6.66 13.65 6.66L13.51 6.82C15.21 7.34 16 8.09 16 8.09C13.6246 6.78809 10.8342 6.78785 8.53 7.8C8.16 7.97 7.94 8.09 7.94 8.09C7.94 8.09 8.77 7.3 10.57 6.78L10.47 6.66C10.47 6.66 9.1 6.63 7.66 7.71C7.66 7.71 6.22 10.32 6.22 13.54C6.22 13.54 7.06 14.99 9.27 15.06C9.27 15.06 9.64 14.61 9.94 14.23C8.67 13.85 8.19 13.05 8.19 13.05C8.33711 13.153 8.57969 13.2864 8.6 13.3C10.2879 14.2452 12.6855 14.5549 14.84 13.65C15.19 13.52 15.58 13.33 15.99 13.06C15.99 13.06 15.49 13.88 14.18 14.25C14.48 14.63 14.84 15.06 14.84 15.06C17.05 14.99 17.9 13.54 17.9 13.54Z" fill="currentColor"/>
+</svg>
+
+<svg v-if="type === 'facebook'" :width="props.size" :height="props.size" :class="props.class" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path d="M22 12.0605C22 6.53629 17.5242 2.06049 12 2.06049C6.47581 2.06049 2 6.53629 2 12.0605C2 17.0516 5.65685 21.1887 10.4375 21.9395V14.9512H7.89718V12.0605H10.4375V9.85726C10.4375 7.35121 11.9294 5.96694 14.2145 5.96694C15.3089 5.96694 16.4532 6.1621 16.4532 6.1621V8.62178H15.1919C13.95 8.62178 13.5625 9.39274 13.5625 10.1835V12.0605H16.3359L15.8923 14.9512H13.5625V21.9395C18.3431 21.1887 22 17.0516 22 12.0605Z" fill="currentColor" />
+</svg>
+
+<svg v-if="type === 'github'" :width="props.size" :height="props.size" :class="props.class"  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path d="M8.68952 17.9515C8.68952 18.0321 8.59677 18.0967 8.47984 18.0967C8.34677 18.1088 8.25403 18.0442 8.25403 17.9515C8.25403 17.8708 8.34677 17.8063 8.46371 17.8063C8.58468 17.7942 8.68952 17.8587 8.68952 17.9515ZM7.43548 17.77C7.40726 17.8507 7.4879 17.9434 7.60887 17.9676C7.71371 18.0079 7.83468 17.9676 7.85887 17.887C7.88306 17.8063 7.80645 17.7136 7.68548 17.6773C7.58065 17.6491 7.46371 17.6894 7.43548 17.77ZM9.21774 17.7015C9.10081 17.7297 9.02016 17.8063 9.03226 17.8991C9.04435 17.9797 9.14919 18.0321 9.27016 18.0039C9.3871 17.9757 9.46774 17.8991 9.45564 17.8184C9.44355 17.7418 9.33468 17.6894 9.21774 17.7015ZM11.871 2.24988C6.27823 2.24988 2 6.49585 2 12.0886C2 16.5604 4.81452 20.387 8.83468 21.7338C9.35081 21.8265 9.53226 21.5079 9.53226 21.2458C9.53226 20.9958 9.52016 19.6168 9.52016 18.77C9.52016 18.77 6.69758 19.3749 6.10484 17.5684C6.10484 17.5684 5.64516 16.395 4.98387 16.0926C4.98387 16.0926 4.06048 15.4596 5.04839 15.4717C5.04839 15.4717 6.05242 15.5523 6.60484 16.512C7.4879 18.0684 8.96774 17.6208 9.54435 17.3547C9.6371 16.7096 9.89919 16.262 10.1895 15.9958C7.93548 15.7458 5.66129 15.4192 5.66129 11.5402C5.66129 10.4313 5.96774 9.87488 6.6129 9.1652C6.50806 8.9031 6.16532 7.82246 6.71774 6.4273C7.56048 6.1652 9.5 7.51601 9.5 7.51601C10.3065 7.2902 11.1734 7.17327 12.0323 7.17327C12.8911 7.17327 13.7581 7.2902 14.5645 7.51601C14.5645 7.51601 16.504 6.16117 17.3468 6.4273C17.8992 7.82649 17.5565 8.9031 17.4516 9.1652C18.0968 9.87891 18.4919 10.4354 18.4919 11.5402C18.4919 15.4313 16.1169 15.7418 13.8629 15.9958C14.2339 16.3144 14.5484 16.9192 14.5484 17.8668C14.5484 19.2257 14.5363 20.9071 14.5363 21.2378C14.5363 21.4999 14.7218 21.8184 15.2339 21.7257C19.2661 20.387 22 16.5604 22 12.0886C22 6.49585 17.4637 2.24988 11.871 2.24988ZM5.91935 16.1571C5.86694 16.1975 5.87903 16.2902 5.94758 16.3668C6.0121 16.4313 6.10484 16.4596 6.15726 16.4071C6.20968 16.3668 6.19758 16.2741 6.12903 16.1975C6.06452 16.1329 5.97177 16.1047 5.91935 16.1571ZM5.48387 15.8305C5.45565 15.8829 5.49597 15.9475 5.57661 15.9878C5.64113 16.0281 5.72177 16.016 5.75 15.9596C5.77823 15.9071 5.7379 15.8426 5.65726 15.8023C5.57661 15.7781 5.5121 15.7902 5.48387 15.8305ZM6.79032 17.266C6.72581 17.3184 6.75 17.4394 6.84274 17.516C6.93548 17.6088 7.05242 17.6208 7.10484 17.5563C7.15726 17.5039 7.13306 17.3829 7.05242 17.3063C6.96371 17.2136 6.84274 17.2015 6.79032 17.266ZM6.33065 16.6733C6.26613 16.7136 6.26613 16.8184 6.33065 16.9112C6.39516 17.0039 6.50403 17.0442 6.55645 17.0039C6.62097 16.9515 6.62097 16.8467 6.55645 16.7539C6.5 16.6612 6.39516 16.6208 6.33065 16.6733Z" fill="currentColor" />
+</svg>
+
+<svg v-if="type === 'slack'" :width="props.size" :height="props.size" :class="props.class" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path d="M6.20179 14.6384C6.20179 15.7946 5.25714 16.7393 4.10089 16.7393C2.94464 16.7393 2 15.7946 2 14.6384C2 13.4821 2.94464 12.5375 4.10089 12.5375H6.20179V14.6384ZM7.26071 14.6384C7.26071 13.4821 8.20536 12.5375 9.36161 12.5375C10.5179 12.5375 11.4625 13.4821 11.4625 14.6384V19.8991C11.4625 21.0554 10.5179 22 9.36161 22C8.20536 22 7.26071 21.0554 7.26071 19.8991V14.6384ZM9.36161 6.20179C8.20536 6.20179 7.26071 5.25714 7.26071 4.10089C7.26071 2.94464 8.20536 2 9.36161 2C10.5179 2 11.4625 2.94464 11.4625 4.10089V6.20179H9.36161ZM9.36161 7.26071C10.5179 7.26071 11.4625 8.20536 11.4625 9.36161C11.4625 10.5179 10.5179 11.4625 9.36161 11.4625H4.10089C2.94464 11.4625 2 10.5179 2 9.36161C2 8.20536 2.94464 7.26071 4.10089 7.26071H9.36161ZM17.7982 9.36161C17.7982 8.20536 18.7429 7.26071 19.8991 7.26071C21.0554 7.26071 22 8.20536 22 9.36161C22 10.5179 21.0554 11.4625 19.8991 11.4625H17.7982V9.36161ZM16.7393 9.36161C16.7393 10.5179 15.7946 11.4625 14.6384 11.4625C13.4821 11.4625 12.5375 10.5179 12.5375 9.36161V4.10089C12.5375 2.94464 13.4821 2 14.6384 2C15.7946 2 16.7393 2.94464 16.7393 4.10089V9.36161ZM14.6384 17.7982C15.7946 17.7982 16.7393 18.7429 16.7393 19.8991C16.7393 21.0554 15.7946 22 14.6384 22C13.4821 22 12.5375 21.0554 12.5375 19.8991V17.7982H14.6384ZM14.6384 16.7393C13.4821 16.7393 12.5375 15.7946 12.5375 14.6384C12.5375 13.4821 13.4821 12.5375 14.6384 12.5375H19.8991C21.0554 12.5375 22 13.4821 22 14.6384C22 15.7946 21.0554 16.7393 19.8991 16.7393H14.6384Z" fill="currentColor" />
+</svg>
+
+<svg v-if="type === 'twitter'" :height="props.size" viewBox="0 0 24 24" :class="props.class" fill="none" :width="props.size" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path d="M19.8571 2H4.14286C2.95982 2 2 2.95982 2 4.14286V19.8571C2 21.0402 2.95982 22 4.14286 22H19.8571C21.0402 22 22 21.0402 22 19.8571V4.14286C22 2.95982 21.0402 2 19.8571 2ZM17.6741 9.08929C17.683 9.21429 17.683 9.34375 17.683 9.46875C17.683 13.3393 14.7366 17.7991 9.35268 17.7991C7.69196 17.7991 6.15179 17.317 4.85714 16.4866C5.09375 16.5134 5.32143 16.5223 5.5625 16.5223C6.93304 16.5223 8.19196 16.058 9.19643 15.2723C7.91071 15.2455 6.83036 14.4018 6.45982 13.2411C6.91071 13.308 7.31696 13.308 7.78125 13.1875C6.44196 12.9152 5.4375 11.7366 5.4375 10.3125V10.2768C5.82589 10.4955 6.28125 10.6295 6.75893 10.6473C6.35733 10.3802 6.02812 10.0178 5.80066 9.59248C5.5732 9.16716 5.45457 8.69214 5.45536 8.20982C5.45536 7.66518 5.59821 7.16518 5.85268 6.73214C7.29464 8.50893 9.45982 9.66964 11.8884 9.79464C11.4732 7.80804 12.9598 6.19643 14.7455 6.19643C15.5893 6.19643 16.3482 6.54911 16.8839 7.12054C17.5446 6.99554 18.1786 6.75 18.7411 6.41518C18.5223 7.09375 18.0625 7.66518 17.4554 8.02679C18.0446 7.96429 18.6161 7.79911 19.1429 7.57143C18.7455 8.15625 18.2455 8.67411 17.6741 9.08929Z" fill="currentColor" />
+</svg>
+
+<svg v-if="type === 'youtube'" :width="props.size" :height="props.size" :class="props.class" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path d="M21.5821 7.16905C21.3521 6.30296 20.6744 5.62086 19.8139 5.38938C18.2542 4.96875 12 4.96875 12 4.96875C12 4.96875 5.74586 4.96875 4.18613 5.38938C3.32565 5.6209 2.64794 6.30296 2.41792 7.16905C2 8.73889 2 12.0142 2 12.0142C2 12.0142 2 15.2895 2.41792 16.8593C2.64794 17.7254 3.32565 18.3791 4.18613 18.6106C5.74586 19.0312 12 19.0312 12 19.0312C12 19.0312 18.2541 19.0312 19.8139 18.6106C20.6744 18.3791 21.3521 17.7254 21.5821 16.8593C22 15.2895 22 12.0142 22 12.0142C22 12.0142 22 8.73889 21.5821 7.16905ZM9.95453 14.9879V9.04046L15.1818 12.0143L9.95453 14.9879Z" fill="currentColor" />
+</svg>
+</template>
diff --git a/package.json b/package.json
@@ -6,12 +6,16 @@
   "scripts": {
     "build": "slidev build",
     "dev": "slidev --open",
-    "export": "slidev export"
+    "export": "slidev export",
+    "preview": "serve -s dist -l 3030"
   },
   "dependencies": {
     "@slidev/cli": "^0.43.13",
     "@slidev/theme-default": "latest",
     "@slidev/theme-seriph": "latest",
     "confetti-js": "^0.0.18"
+  },
+  "devDependencies": {
+    "serve": "^14.2.1"
   }
 }