Skip to content

Commit

Permalink
feat: viteconf
Browse files Browse the repository at this point in the history
  • Loading branch information
antfu committed Sep 10, 2024
1 parent 91e213a commit ddf51bb
Show file tree
Hide file tree
Showing 50 changed files with 2,629 additions and 1,273 deletions.
24 changes: 4 additions & 20 deletions 2022-01-26/src/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -48,24 +48,8 @@ ul .slidev-vclick-prior {
}

.slidev-page-1 {
background: radial-gradient(
ellipse,
rgba(var(--bg-gradient), 0.9) 40%,
rgba(var(--bg-gradient), 0.4) 120%
),
radial-gradient(
ellipse at top,
rgba(var(--bg-gradient), 0.8) 20%,
rgba(var(--bg-gradient), 0) 100%
),
radial-gradient(
ellipse at left,
rgba(var(--bg-gradient), 0.5) 20%,
rgba(var(--bg-gradient), 0) 100%
),
radial-gradient(
ellipse at right,
rgba(var(--bg-gradient), 0.6) 20%,
rgba(var(--bg-gradient), 0) 100%
);
background: radial-gradient(ellipse, rgba(var(--bg-gradient), 0.9) 40%, rgba(var(--bg-gradient), 0.4) 120%),
radial-gradient(ellipse at top, rgba(var(--bg-gradient), 0.8) 20%, rgba(var(--bg-gradient), 0) 100%),
radial-gradient(ellipse at left, rgba(var(--bg-gradient), 0.5) 20%, rgba(var(--bg-gradient), 0) 100%),
radial-gradient(ellipse at right, rgba(var(--bg-gradient), 0.6) 20%, rgba(var(--bg-gradient), 0) 100%);
}
3 changes: 1 addition & 2 deletions 2024-03-22/src/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,7 @@ h6 {
transform: translateY(6px);
line-height: 100%;
color: #fffc;
--uno: gap-1 transition rounded px1 py1 mx--0.5 important-border-0
font-condensed;
--uno: gap-1 transition rounded px1 py1 mx--0.5 important-border-0 font-condensed;
}

.markdown-magic-link:hover {
Expand Down
6 changes: 3 additions & 3 deletions 2024-06-08/src/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
"export": "slidev export --per-slide --output ../2024-06-08-cityjs-athens-en.pdf"
},
"devDependencies": {
"@antfu/eslint-config": "^2.25.2",
"@eslint/config-inspector": "^0.5.3",
"eslint": "^9.9.0",
"@antfu/eslint-config": "^3.0.0",
"@eslint/config-inspector": "^0.5.4",
"eslint": "^9.9.1",
"vis-timeline": "^7.7.3"
}
}
3 changes: 1 addition & 2 deletions 2024-06-08/src/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,7 @@ h6 {
transform: translateY(5px);
line-height: 100%;
color: #000b;
--uno: gap-1 transition rounded px1 py1 mx--0.5 important-border-0
font-condensed;
--uno: gap-1 transition rounded px1 py1 mx--0.5 important-border-0 font-condensed;
}

.dark .markdown-magic-link {
Expand Down
6 changes: 3 additions & 3 deletions 2024-06-13/src/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
"export": "slidev export --per-slide --output ../2024-06-13-jsnation-en.pdf"
},
"devDependencies": {
"@antfu/eslint-config": "^2.25.2",
"@eslint/config-inspector": "^0.5.3",
"eslint": "^9.9.0",
"@antfu/eslint-config": "^3.0.0",
"@eslint/config-inspector": "^0.5.4",
"eslint": "^9.9.1",
"vis-timeline": "^7.7.3"
}
}
3 changes: 1 addition & 2 deletions 2024-06-13/src/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,7 @@ h6 {
transform: translateY(5px);
line-height: 100%;
color: #000b;
--uno: gap-1 transition rounded px1 py1 mx--0.5 important-border-0
font-condensed;
--uno: gap-1 transition rounded px1 py1 mx--0.5 important-border-0 font-condensed;
}

.dark .markdown-magic-link {
Expand Down
3 changes: 1 addition & 2 deletions 2024-06-14/src/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,7 @@ h6 {
transform: translateY(6px);
line-height: 100%;
color: #fffc;
--uno: gap-1 transition rounded px1 py1 mx--0.5 important-border-0
font-condensed;
--uno: gap-1 transition rounded px1 py1 mx--0.5 important-border-0 font-condensed;
}

.markdown-magic-link:hover {
Expand Down
2 changes: 1 addition & 1 deletion 2024-07-06/src/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"export": "slidev export --per-slide --output ../2024-07-06-vueconf-shenzhen-zh.pdf"
},
"devDependencies": {
"chroma-js": "^2.6.0",
"chroma-js": "^3.0.0",
"vis-data": "^7.1.9",
"vis-network": "^9.1.9"
}
Expand Down
3 changes: 1 addition & 2 deletions 2024-07-06/src/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -133,8 +133,7 @@ iframe {
transform: translateY(6px);
line-height: 100%;
color: #fffc;
--uno: gap-1 transition rounded px1 py1 mx--0.5 important-border-0
font-condensed;
--uno: gap-1 transition rounded px1 py1 mx--0.5 important-border-0 font-condensed;
}

.markdown-magic-link:hover {
Expand Down
3 changes: 1 addition & 2 deletions 2024-07-10/src/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -133,8 +133,7 @@ iframe {
transform: translateY(6px);
line-height: 100%;
color: #fffc;
--uno: gap-1 transition rounded px1 py1 mx--0.5 important-border-0
font-condensed;
--uno: gap-1 transition rounded px1 py1 mx--0.5 important-border-0 font-condensed;
}

.markdown-magic-link:hover {
Expand Down
Binary file added 2024-10-03/2024-10-03-viteconf-en.pdf
Binary file not shown.
5 changes: 5 additions & 0 deletions 2024-10-03/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Anthony's Roads to Open Source - The Progressive Path

2024/10/03 - ViteConf

[ViteConf 2024](https://viteconf.org/)
15 changes: 15 additions & 0 deletions 2024-10-03/src/components/Repo.vue
Original file line number Diff line number Diff line change
@@ -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>
191 changes: 191 additions & 0 deletions 2024-10-03/src/global-bottom.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
<script setup lang="ts">
/**
* 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'
import { useNav } from '@slidev/client'
import seedrandom from 'seedrandom'
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'
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 '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>
10 changes: 10 additions & 0 deletions 2024-10-03/src/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"type": "module",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "slidev",
"build": "slidev build --base /2024/viteconf/ --out ../../dist/2024/viteconf",
"export": "slidev export --per-slide --output ../2024-10-03-viteconf-en.pdf"
}
}
Loading

0 comments on commit ddf51bb

Please sign in to comment.