first commit

.github/workflows/deploy.yml

@@ -0,0 +1,46 @@
+name: Deploy pages
+
+on:
+  workflow_dispatch: {}
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 'lts/*'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Install slidev
+        run:  npm i -g @slidev/cli
+
+      - name: Build
+        run: slidev build --base /<name_of_repo>/
+
+      - uses: actions/configure-pages@v3
+
+      - uses: actions/upload-pages-artifact@v1
+        with:
+          path: dist
+
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v2

.gitignore

@@ -0,0 +1,7 @@
+node_modules
+.DS_Store
+dist
+*.local
+index.html
+.remote-assets
+components.d.ts

.npmrc

@@ -0,0 +1,3 @@
+# for pnpm
+shamefully-hoist=true
+auto-install-peers=true

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": false
+}

README.md

@@ -0,0 +1,11 @@
+# RomaJS intro slides
+
+To start the slide show:
+
+- `pnpm install`
+- `pnpm run dev`
+- visit http://localhost:3030
+
+Edit the [slides.md](./slides.md) to see the changes.
+
+Learn more about Slidev on [documentations](https://sli.dev/).

components/Logo.vue

@@ -0,0 +1,154 @@
+<style>
+:root {
+  --logo-width: 150px;
+}
+
+.logo {
+  margin: auto;
+  border-radius: 17px;
+  width: var(--logo-width);
+  height: var(--logo-width);
+  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.middleRow {
+  animation: middleRowAnimation 600ms ease-out;
+}
+
+@keyframes middleRowAnimation {
+  from {
+    transform: translateY(33px);
+  }
+}
+
+.topRow {
+  animation: topRowAnimation 600ms ease-out;
+  animation-delay: 300ms;
+  animation-fill-mode: backwards;
+}
+
+@keyframes topRowAnimation {
+  from {
+    transform: translateY(66px);
+  }
+}
+
+.diagonalLine {
+  animation: diagonalLineAnimation 600ms ease-out;
+  transform-origin: center;
+  animation-delay: 300ms;
+  animation-fill-mode: backwards;
+}
+
+@keyframes diagonalLineAnimation {
+  from {
+    transform: scaleY(0);
+  }
+}
+
+.letter {
+  animation: letterAnimation 600ms ease-out;
+  animation-delay: 900ms;
+  animation-fill-mode: backwards;
+}
+
+@keyframes letterAnimation {
+  from {
+    fill: var(--brand-primary);
+  }
+
+  to {
+    fill: var(--brand-secondary);
+  }
+}
+</style>
+
+<template>
+  <svg
+    class="logo"
+    width="64"
+    height="64"
+    viewBox="0 0 224 224"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    transition:name="logo"
+  >
+    <path
+      d="M223.955 0.271484H0.407227V223.819H223.955V0.271484Z"
+      fill="#8F001C"
+    />
+    <path
+      class="letter"
+      d="M88.8307 190.966L102.497 182.684C105.122 187.345 107.52 191.328 113.267 191.328C118.788 191.328 122.272 189.156 122.272 180.784V123.72H139.061V181.01C139.061 198.387 128.879 206.306 113.991 206.306C100.596 206.306 92.8129 199.337 88.8307 190.966Z"
+      fill="#FFB200"
+    />
+    <path
+      class="letter"
+      d="M148.202 189.156L161.868 181.236C165.443 187.119 170.149 191.418 178.431 191.418C185.4 191.418 189.834 187.934 189.834 183.137C189.834 177.39 185.264 175.354 177.616 172.005L173.408 170.195C161.28 165.036 153.27 158.565 153.27 144.899C153.27 132.318 162.864 122.725 177.842 122.725C188.522 122.725 196.17 126.436 201.691 136.165L188.613 144.537C185.716 139.378 182.639 137.341 177.842 137.341C172.91 137.341 169.833 140.464 169.833 144.537C169.833 149.56 172.955 151.596 180.15 154.718L184.359 156.528C198.613 162.638 206.668 168.882 206.668 182.911C206.668 198.025 194.812 206.306 178.838 206.306C163.181 206.306 153.089 198.885 148.202 189.156Z"
+      fill="#FFB200"
+    />
+    <g class="bottomRow">
+      <path
+        d="M152.546 85.7083H142.998V110.145H152.546V85.7083Z"
+        fill="#FFB200"
+      />
+      <path
+        d="M133.178 85.7083H123.63V110.145H133.178V85.7083Z"
+        fill="#FFB200"
+      />
+      <path
+        d="M113.855 85.7083H104.307V110.145H113.855V85.7083Z"
+        fill="#FFB200"
+      />
+      <path
+        d="M55.8416 85.7083H46.2933V110.145H55.8416V85.7083Z"
+        fill="#FFB200"
+      />
+      <path
+        d="M75.1644 85.7083H65.6161V110.145H75.1644V85.7083Z"
+        fill="#FFB200"
+      />
+      <path
+        d="M36.4735 85.7083H26.9253V110.145H36.4735V85.7083Z"
+        fill="#FFB200"
+      />
+    </g>
+    <g class="middleRow">
+      <path
+        d="M152.546 53.1717H142.998V77.6081H152.546V53.1717Z"
+        fill="#FFB200"
+      />
+      <path
+        d="M133.178 53.1717H123.63V77.6081H133.178V53.1717Z"
+        fill="#FFB200"
+      />
+      <path
+        d="M94.5325 53.1717H84.9843V77.6081H94.5325V53.1717Z"
+        fill="#FFB200"
+      />
+      <path
+        d="M113.855 53.1717H104.307V77.6081H113.855V53.1717Z"
+        fill="#FFB200"
+      />
+      <path
+        d="M55.8416 53.1717H46.2933V77.6081H55.8416V53.1717Z"
+        fill="#FFB200"
+      />
+      <path
+        d="M36.4735 53.1717H26.9253V77.6081H36.4735V53.1717Z"
+        fill="#FFB200"
+      />
+    </g>
+
+    <path
+      class="diagonalLine"
+      d="M99.0125 109.964L55.2533 20.8162H45.705L89.419 109.964H99.0125Z"
+      fill="#FFB200"
+    />
+    <path
+      class="topRow"
+      d="M36.4735 20.6351H26.9253V45.0715H36.4735V20.6351Z"
+      fill="#FFB200"
+    />
+  </svg>
+</template>

netlify.toml

@@ -0,0 +1,16 @@
+[build.environment]
+  NODE_VERSION = "18"
+
+[build]
+  publish = "dist"
+  command = "npm run build"
+
+[[redirects]]
+  from = "/.well-known/*"
+  to = "/.well-known/:splat"
+  status = 200
+
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200

package.json

@@ -0,0 +1,16 @@
+{
+  "name": "romajs-intro",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "slidev build",
+    "dev": "slidev --open",
+    "export": "slidev export"
+  },
+  "dependencies": {
+    "@slidev/cli": "^0.43.13",
+    "@slidev/theme-default": "latest",
+    "@slidev/theme-seriph": "latest",
+    "confetti-js": "^0.0.18"
+  }
+}