Initial commit

.gitignore

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

.npmrc

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

README.md

@@ -0,0 +1,73 @@
+# Svelte: A fresh approach to web development
+
+## Building a Todo app, step-by-step
+
+Presented by *Papa Elhadj Abdoulaye NDOYE*
+
+- **#1 tetris player** in the country
+- frontend developer
+- Admin Member of Galsen DEV
+
+---
+
+# What is Svelte
+
+- a radical new approach to building user interfaces (UI)
+- compiles your components into highly efficient JavaScript
+- let's you write less code, do more
+- ~no virtual DOM~ (this might be too technical for them)
+- reactive programming made easy
+
+---
+
+# Comparison with other framworks
+
+> [!NOTE]
+> fill this later...
+
+---
+
+# Overview of the syntax
+
+# Setting up the environment
+
+- install **Node.js** and **npm**
+- create a new svelte project
+
+```bash
+npx sv create todo-app
+```
+
+- basic project structure
+
+```
+├── package.json
+├── README.md
+├── src
+│   ├── app.d.ts
+│   ├── app.html
+│   ├── lib
+│   │   └── index.ts
+│   └── routes
+│       └── +page.svelte
+├── static
+│   └── favicon.pn/g
+├── svelte.config.js
+├── tsconfig.json
+└── vite.config.ts
+```
+
+> [!INFO]
+> Most of the magic happens in the `./src` folder, the rest is used by Svelte for configuration purposes.
+
+---
+
+# What we'll build
+
+![app-mockup](./svelte-todo.png)
+
+> [!DANGER]
+> make the image and the text side-by-side
+
+> [!INFO]
+> transition into coding session.

components/Counter.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps({
+  count: {
+    default: 0,
+  },
+})
+
+const counter = ref(props.count)
+</script>
+
+<template>
+  <div flex="~" w="min" border="~ main rounded-md">
+    <button
+      border="r main"
+      p="2"
+      font="mono"
+      outline="!none"
+      hover:bg="gray-400 opacity-20"
+      @click="counter -= 1"
+    >
+      -
+    </button>
+    <span m="auto" p="2">{{ counter }}</span>
+    <button
+      border="l main"
+      p="2"
+      font="mono"
+      outline="!none"
+      hover:bg="gray-400 opacity-20"
+      @click="counter += 1"
+    >
+      +
+    </button>
+  </div>
+</template>

components/GalsenIcon.vue

@@ -0,0 +1,42 @@
+<template>
+  <svg class="h-9 w-9" viewBox="0 0 52 52" fill="none">
+    <g clip-path="url(#clip0_119_120)">
+      <circle
+        cx="26"
+        cy="26"
+        r="25"
+        fill="url(#paint0_linear_119_120)"
+        stroke="white"
+        stroke-width="2"
+      ></circle>
+      <path
+        d="M32.3991 10.1016C33.1716 10.4006 33.5555 11.2693 33.2564 12.0419L22.3394 40.2442C22.0404 41.0168 21.1716 41.4006 20.3991 41.1016C19.6265 40.8025 19.2427 39.9338 19.5417 39.1612L30.4587 10.9589C30.7578 10.1863 31.6265 9.80249 32.3991 10.1016Z"
+        fill="white"
+      ></path>
+      <path
+        d="M6.70915 25.06L17.7092 16.56C19.4806 15.6743 21.2087 17.56 19.2092 19.0601C18.3965 19.6698 16.6424 21.0714 14.8152 22.5314C12.8268 24.1202 10.7517 25.7783 9.70945 26.56C11.7095 28.06 19.7092 34.5601 19.7092 34.5601C21.2087 36.06 19.4762 37.9735 17.7092 36.5601C16.6909 35.7457 15.1754 34.5996 13.5338 33.3582C11.1442 31.5511 8.48747 29.542 6.70915 28.0601C5.81973 27.318 5.70911 26.06 6.70915 25.06Z"
+        fill="white"
+      ></path>
+      <path
+        d="M34.5714 16.56L45.5714 25.06C46.5714 26.06 46.4608 27.318 45.5714 28.0601C43.7931 29.542 41.1365 31.551 38.7469 33.3581C37.1052 34.5995 35.5896 35.7457 34.5714 36.5601C32.8044 37.9735 31.0718 36.06 32.5714 34.5601C32.5714 34.5601 40.5711 28.06 42.5711 26.56C41.5288 25.7783 39.4538 24.1203 37.4653 22.5314C35.6381 21.0714 33.884 19.6698 33.0714 19.0601C31.0718 17.56 32.7999 15.6743 34.5714 16.56Z"
+        fill="white"
+      ></path>
+    </g>
+    <defs>
+      <linearGradient
+        id="paint0_linear_119_120"
+        x1="1.31288e-07"
+        y1="29"
+        x2="67"
+        y2="26"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#4986FF"></stop>
+        <stop offset="1" stop-color="#0C48AE"></stop>
+      </linearGradient>
+      <clipPath id="clip0_119_120">
+        <rect width="52" height="52" fill="white"></rect>
+      </clipPath>
+    </defs>
+  </svg>
+</template>

components/MyAvatar.vue

@@ -0,0 +1,7 @@
+<template>
+  <div
+    class="w-[250px] h-[250px] overflow-hidden rounded-full border-3 border-dashed border-gray-500 grayscale"
+  >
+    <img src="/avatar-p4p1.png" alt="My ugly photo" />
+  </div>
+</template>

components/SvelteIcon.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 128 128"
+  >
+    <path
+      fill="#ff3e00"
+      d="M110.43 16.936C98.553-.076 75.09-5.118 58.13 5.696l-29.792 19a34.2 34.2 0 0 0-15.48 22.897a25.478 30.64 0 0 0-.572 6.396a36.15 36.15 0 0 0 4.163 16.73A34.4 34.4 0 0 0 11.34 83.5a25.348 30.483 0 0 0 .345 14.412a36.5 36.5 0 0 0 5.9 13.152c11.878 17.01 35.394 22.053 52.3 11.24l29.762-19.001a34.13 34.13 0 0 0 15.438-22.918a35.5 35.5 0 0 0 .572-6.386a36.2 36.2 0 0 0-4.112-16.71a34.4 34.4 0 0 0 5.112-12.77c.369-2.11.557-4.245.562-6.386a36.4 36.4 0 0 0-6.787-21.178z"
+    ></path>
+    <path
+      fill="#fff"
+      d="M55.219 112.662a28.463 34.23 0 0 1-5.954.76a23.64 23.64 0 0 1-19.435-10.187a21.9 21.9 0 0 1-4.08-12.74a15.658 18.83 0 0 1 .333-3.833a15.425 18.55 0 0 1 .72-2.782l.561-1.708l1.52 1.156a38.7 38.7 0 0 0 11.658 5.834l1.104.333l-.104 1.104v.573a6.63 6.63 0 0 0 1.228 3.854a7.1 7.1 0 0 0 2.538 2.288a8.262 9.936 0 0 0 3.312.837a8.251 9.923 0 0 0 1.79-.229a7.272 8.745 0 0 0 1.833-.802l29.76-19.094a6.26 6.26 0 0 0 2.904-5.302a6.62 6.62 0 0 0-1.26-3.844a7.14 7.14 0 0 0-2.553-2.252a8.313 9.997 0 0 0-3.307-.81a8.246 9.917 0 0 0-1.79.23a6.938 8.344 0 0 0-1.822.801l-11.346 7.25a24.376 29.314 0 0 1-6.048 2.656a23.64 23.64 0 0 1-25.39-9.416a21.94 21.94 0 0 1-4.08-12.74c.002-1.285.114-2.567.333-3.833a20.65 20.65 0 0 1 9.286-13.781l29.792-18.99a21.9 21.9 0 0 1 6.048-2.667a24 24 0 0 1 5.954-.75A23.68 23.68 0 0 1 98.22 24.745a21.94 21.94 0 0 1 4.029 12.75a15.748 18.939 0 0 1-.334 3.844a15.407 18.529 0 0 1-.718 2.781l-.562 1.708l-1.52-1.114a38.4 38.4 0 0 0-11.658-5.834l-1.104-.343l.104-1.105v-.572a6.7 6.7 0 0 0-1.228-3.865a7.1 7.1 0 0 0-2.55-2.25a8.309 9.992 0 0 0-3.3-.813a8.221 9.887 0 0 0-1.77.271a6.819 8.2 0 0 0-1.831.802l-29.793 18.99a5.88 7.071 0 0 0-1.836 1.79a4.75 5.713 0 0 0-.963 2.377a5.037 6.057 0 0 0-.136 1.104a6.62 6.62 0 0 0 1.228 3.844a7.1 7.1 0 0 0 2.549 2.25a8.299 9.98 0 0 0 3.301.812a8.247 9.918 0 0 0 1.79-.23a6.943 8.35 0 0 0 1.833-.801l11.367-7.292a24.218 29.125 0 0 1 6.048-2.656a28.526 34.305 0 0 1 5.954-.76A23.66 23.66 0 0 1 96.566 60.61a21.94 21.94 0 0 1 3.737 16.614a20.6 20.6 0 0 1-9.286 13.781l-29.74 18.99a24.308 29.233 0 0 1-6.057 2.667z"
+    ></path>
+  </svg>
+</template>

netlify.toml

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

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "slides",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "slidev build",
+    "dev": "slidev --open",
+    "export": "slidev export"
+  },
+  "dependencies": {
+    "@slidev/cli": "^0.50.0-beta.10",
+    "@slidev/theme-default": "latest",
+    "@slidev/theme-seriph": "latest",
+    "slidev-theme-excali-slide": "^1.3.0",
+    "vue": "^3.5.13"
+  },
+  "packageManager": "[email protected]+sha512.6e2baf77d06b9362294152c851c4f278ede37ab1eba3a55fda317a4a17b209f4dbb973fb250a77abc463a341fcb1f17f17cfa24091c4eb319cda0d9b84278387",
+  "devDependencies": {
+    "playwright-chromium": "^1.49.1"
+  }
+}