chore: add wip slides

2023-10-28/src/unocss.config.ts

@@ -1,6 +1,6 @@
-import { defineConfig } from 'unocss/vite'
 import config from '@slidev/client/uno.config'
 import { presetWebFonts } from 'unocss'
+import { defineConfig } from 'unocss/vite'
 
 export default defineConfig({
   ...config,

2024-10-19/README.md

@@ -0,0 +1,5 @@
+# Anthony's Roads to Open Source - Yak Shaving
+
+2024/10/19
+
+[Vue Fes Japan 2024](https://vuefes.jp/2024/en)

2024-10-19/src/components/Repo.vue

@@ -0,0 +1,15 @@
+<script setup>
+defineProps({
+  name: String,
+  hideOwner: Boolean,
+})
+</script>
+
+<template>
+  <span>
+    <carbon-logo-github mr="2" opacity="60" class="transform translate-y-1px" />
+    <a :href="`https://github.com/${name}`" target="_blank" border="!0" font="mono" opacity="80">
+      {{ hideOwner ? name.split('/')[1] : name }}
+    </a>
+  </span>
+</template>

2024-10-19/src/components/YakMap.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useDarkMode, useSlideContext } from '@slidev/client'
+import Yak from '../yak-shaving-map/components/YakMap.vue'
+
+const { isDark } = useDarkMode()
+const { $clicks } = useSlideContext()
+</script>
+
+<template>
+  <Yak
+    :is-dark="isDark"
+    :clicks="+$clicks + 1"
+    :focus-scale="1.5"
+    :show-secondary="true"
+    mode="steps"
+  />
+</template>

2024-10-19/src/global-bottom.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { useNav } from '@slidev/client'
+import seedrandom from 'seedrandom'
+/**
+ * A new glow effect system powered by blured polygons
+ *
+ * Credits to @pi0 @Atinux
+ *
+ * Properties:
+ * - glow: 'left' | 'right' | 'top' | 'bottom' | 'full' -  Distribution of the polygons points
+ * - glowOpacity: number - Opacity of the polygons (4)
+ * - glowHue: number - Hue shift for the polygons (default: 0)
+ * - glowSeed: string | false - Seed for the stable random distribution (default: 'default')
+ */
+import { computed, ref, watch } from 'vue'
+
+const { currentSlideRoute } = useNav()
+
+export type Range = [number, number]
+
+export type Distribution =
+  | 'full'
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'center'
+  | 'topmost'
+
+const formatter = computed(() => (currentSlideRoute.value.meta?.slide as any)?.frontmatter || {})
+const distribution = computed(() => (formatter.value.glow || 'full') as Distribution)
+const opacity = computed<number>(() => +(formatter.value.glowOpacity ?? 0.4))
+const hue = computed<number>(() => +(formatter.value.glowHue || 0))
+const seed = computed<string>(() => (formatter.value.glowSeed === 'false' || formatter.value.glowSeed === false)
+  ? Date.now().toString()
+  : formatter.value.glowSeed || 'default',
+)
+const overflow = 0.3
+const disturb = 0.3
+const disturbChance = 0.3
+
+function distributionToLimits(distribution: Distribution) {
+  const min = -0.2
+  const max = 1.2
+  let x: Range = [min, max]
+  let y: Range = [min, max]
+
+  function intersection(a: Range, b: Range): Range {
+    return [Math.max(a[0], b[0]), Math.min(a[1], b[1])]
+  }
+
+  const limits = distribution.split('-')
+
+  for (const limit of limits) {
+    switch (limit) {
+      case 'topmost':
+        y = intersection(y, [-0.5, 0])
+        break
+      case 'top':
+        y = intersection(y, [min, 0.6])
+        break
+      case 'bottom':
+        y = intersection(y, [0.4, max])
+        break
+      case 'left':
+        x = intersection(x, [min, 0.6])
+        break
+      case 'right':
+        x = intersection(x, [0.4, max])
+        break
+      case 'xcenter':
+        x = intersection(x, [0.25, 0.75])
+        break
+      case 'ycenter':
+        y = intersection(y, [0.25, 0.75])
+        break
+      case 'center':
+        x = intersection(x, [0.25, 0.75])
+        y = intersection(y, [0.25, 0.75])
+        break
+      case 'full':
+        x = intersection(x, [0, 1])
+        y = intersection(y, [0, 1])
+        break
+      default:
+        break
+    }
+  }
+
+  return { x, y }
+}
+
+function distance2([x1, y1]: Range, [x2, y2]: Range) {
+  return (x2 - x1) ** 2 + (y2 - y1) ** 2
+}
+
+function usePloy(number = 16) {
+  function getPoints(): Range[] {
+    const limits = distributionToLimits(distribution.value)
+    const rng = seedrandom(`${seed.value}-${currentSlideRoute.value.no}`)
+    function randomBetween([a, b]: Range) {
+      return rng() * (b - a) + a
+    }
+    function applyOverflow(random: number, overflow: number) {
+      random = random * (1 + overflow * 2) - overflow
+      return rng() < disturbChance ? random + (rng() - 0.5) * disturb : random
+    }
+    return Array.from({ length: number })
+      .fill(0)
+      .map(() => [
+        applyOverflow(randomBetween(limits.x), overflow),
+        applyOverflow(randomBetween(limits.y), overflow),
+      ])
+  }
+
+  const points = ref(getPoints())
+  const poly = computed(() => points.value.map(([x, y]) => `${x * 100}% ${y * 100}%`).join(', '))
+
+  function jumpPoints() {
+    const newPoints = new Set(getPoints())
+    points.value = points.value.map((o) => {
+      let minDistance = Number.POSITIVE_INFINITY
+      let closest: Range | undefined
+      for (const n of newPoints) {
+        const d = distance2(o, n)
+        if (d < minDistance) {
+          minDistance = d
+          closest = n
+        }
+      }
+      newPoints.delete(closest)
+      return closest
+    })
+  }
+
+  watch(currentSlideRoute, () => {
+    jumpPoints()
+  })
+
+  return poly
+}
+
+const poly1 = usePloy(10)
+const poly2 = usePloy(6)
+const poly3 = usePloy(3)
+</script>
+
+<template>
+  <div
+    class="bg transform-gpu overflow-hidden pointer-events-none"
+    :style="{ filter: `blur(70px) hue-rotate(${hue}deg)` }"
+    aria-hidden="true"
+  >
+    <div
+      class="clip bg-gradient-to-r from-[#00DC82] to-white/10"
+      :style="{ 'clip-path': `polygon(${poly1})`, 'opacity': opacity }"
+    />
+    <div
+      class="clip bg-gradient-to-l from-[#2f96ad] to-white/10"
+      :style="{ 'clip-path': `polygon(${poly2})`, 'opacity': opacity }"
+    />
+    <div
+      class="clip bg-gradient-to-t from-lime to-white/10"
+      :style="{ 'clip-path': `polygon(${poly3})`, 'opacity': 0.2 }"
+    />
+  </div>
+</template>
+
+<style scoped>
+.bg,
+.clip {
+  transition: all 2.5s ease;
+}
+
+.bg {
+  position: absolute;
+  inset: 0;
+  z-index: -10;
+}
+
+.clip {
+  clip-path: circle(75%);
+  aspect-ratio: 16 / 9;
+  position: absolute;
+  inset: 0;
+}
+
+.light .clip {
+  opacity: 1 !important;
+}
+</style>

2024-10-19/src/package.json

@@ -0,0 +1,15 @@
+{
+  "type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "slidev",
+    "build": "slidev build --base /2024/vue-fes-japan/ --out ../../dist/2024/vue-fes-japan",
+    "export": "slidev export --per-slide --output ../2024-10-19-vue-fes-japan-en.pdf"
+  },
+  "devDependencies": {
+    "chroma-js": "catalog:",
+    "vis-data": "catalog:",
+    "vis-network": "catalog:"
+  }
+}