diff --git a/src/lib/components/HomeCanvas.svelte b/src/lib/components/HomeCanvas.svelte index 0d547b5..ce6a074 100644 --- a/src/lib/components/HomeCanvas.svelte +++ b/src/lib/components/HomeCanvas.svelte @@ -60,12 +60,32 @@ onMount(()=>{ let center = [0.5, 0.5]; let bulgefilter = new BulgePinchFilter(); bulgefilter.radius = xFrac(0.45); - bulgefilter.strength = 0.5; + bulgefilter.strength = 0; bulgefilter.center = center; bulgefilter.resolution = 2; app.stage.filters = [bulgefilter]; - + gsap.to(bulgefilter, { + strength: 0.5, + duration: 2, + delay: 1, + ease: 'elastic.out', + }); + + window.addEventListener('mousedown', ()=>{ + gsap.to(bulgefilter, { + strength: 0, + duration: 1, + ease: 'elastic.out', + }); + }) + window.addEventListener('mouseup', ()=>{ + gsap.to(bulgefilter, { + strength: 0.5, + duration: 2, + ease: 'elastic.out', + }); + }) /*---------------------------------- * Convert text to canvas using @@ -134,13 +154,27 @@ onMount(()=>{ /*---------------------------------- * Mousemove events *----------------------------------*/ + let tween = { + x: 0.5, + y: 0.5, + }; + window.addEventListener('mousemove', (e) => { const pointerX = e.clientX / window.innerWidth; const pointerY = e.clientY / window.innerHeight; const pointerXfrac = pointerX - 0.5; const pointerYfrac = pointerY - 0.5; - center = [(0.5 + pointerXfrac/10),(0.5 + pointerYfrac/10)]; + // center = [(0.5 + pointerXfrac/10),(0.5 + pointerYfrac/10)]; + + gsap.to(tween, { + duration: .5, + ease: 'power3.out', + overwrite: true, + x: 0.5 + pointerXfrac/10, + y: 0.5 + pointerYfrac/10, + }) + }) @@ -151,7 +185,7 @@ onMount(()=>{ app.ticker.add((delta) => { elapsed += delta; - bulgefilter.center = [(center[0] + Math.sin(elapsed/200)/20 ),(center[1] + Math.cos(elapsed/200)/20 )]; + bulgefilter.center = [(tween.x + Math.sin(elapsed/200)/20 ),(tween.y + Math.cos(elapsed/200)/20 )]; updateImgs(); updateText(); }) diff --git a/src/lib/components/Logo.svelte b/src/lib/components/Logo.svelte index f5eac38..8d1facb 100644 --- a/src/lib/components/Logo.svelte +++ b/src/lib/components/Logo.svelte @@ -1,4 +1,4 @@ -≡ + × + + + + + \ No newline at end of file diff --git a/src/lib/components/WorkCanvas.svelte b/src/lib/components/WorkCanvas.svelte index 8d0c514..441af5a 100644 --- a/src/lib/components/WorkCanvas.svelte +++ b/src/lib/components/WorkCanvas.svelte @@ -61,16 +61,16 @@ onMount(()=>{ let center = [0.5, 0.5]; let bulgefilter = new BulgePinchFilter(); - bulgefilter.radius = xFrac(0.6); + bulgefilter.radius = xFrac(0.5); bulgefilter.strength = bulgeFactor; bulgefilter.center = center; bulgefilter.resolution = 2; // app.stage.filters = [bulgefilter]; - let rgbFilter = new RGBSplitFilter(); - rgbFilter.red = [0, 0]; - rgbFilter.green = [0, 0]; - rgbFilter.blue = [0, 0]; - rgbFilter.resolution = 2; + // let rgbFilter = new RGBSplitFilter(); + // rgbFilter.red = [0, 0]; + // rgbFilter.green = [0, 0]; + // rgbFilter.blue = [0, 0]; + // rgbFilter.resolution = 2; app.stage.filters = [bulgefilter]; @@ -130,7 +130,7 @@ onMount(()=>{ image.position.set(imagePosition.x, imagePosition.y); image.width = imagePosition.width; image.height = imagePosition.height; - // image.alpha = imgElems[index].style.opacity as unknown as number; + image.zIndex = imgElems[index].style.zIndex as unknown as number; image.alpha = window.getComputedStyle(imgElems[index]).opacity as unknown as number; }) } @@ -146,17 +146,17 @@ onMount(()=>{ /*---------------------------------- * Mousemove events *----------------------------------*/ - let tween = { - x: 0, - y: 0, - }; + let tween = { + x: 0, + y: 0, + }; window.addEventListener('mousemove', (e) => { const pointerX = e.clientX / window.innerWidth; const pointerY = e.clientY / window.innerHeight; const pointerXfrac = pointerX - 0.5; const pointerYfrac = pointerY - 0.5; - rgbFilter.red = [pointerXfrac * 10, pointerYfrac * 10]; - rgbFilter.green = [pointerXfrac * -10, pointerYfrac * -10]; + // rgbFilter.red = [pointerXfrac * 10, pointerYfrac * 10]; + // rgbFilter.green = [pointerXfrac * -10, pointerYfrac * -10]; gsap.to(tween, { duration: .5, diff --git a/src/lib/importMarkdown.ts b/src/lib/importMarkdown.ts index f7cf472..94b1e8e 100644 --- a/src/lib/importMarkdown.ts +++ b/src/lib/importMarkdown.ts @@ -15,13 +15,13 @@ type Post = { export const fetchMarkdownPosts = async () => { // eslint-disable-next-line no-useless-escape - const allPostFiles = import.meta.glob('/src/routes/work/\*.md') + const allPostFiles = import.meta.glob('/src/routes/work/md/\*.md') const iterablePostFiles = Object.entries(allPostFiles) const allPosts = await Promise.all( iterablePostFiles.map(async ([path, resolver]) => { - const postPath = path.slice(11, -3) + const postPath = path.slice(11, -3).replace('work/md/','work/') const data: unknown = await resolver() const postData = data as Post const content = postData.default.render() as unknown as { html: string } diff --git a/src/lib/styles/global.scss b/src/lib/styles/global.scss index 52cdde0..0aa939f 100644 --- a/src/lib/styles/global.scss +++ b/src/lib/styles/global.scss @@ -1,11 +1,27 @@ :root { --spacing-outer: 5vw; + --spacing-nav: 5vw; + // --color-bg: #FFF; + // --color-text: #000; --color-bg: #00117f; --color-text: #FF9494; + --aspect-ratio-heroes: 1.5; + --font-size-p: clamp(20px, 1.6vw, 1.6vw); + + @media screen and (min-width: 768px) { + --spacing-outer: 5vw; + --spacing-nav: 2.5vw; + } +} +body { + cursor: url('/cursor.svg'), auto; +} +a:hover, input:hover, button:hover { + cursor: url('/pointer.svg'), auto; } body { font-family: stratos, sans-serif; - font-size: 20px; + font-size: var(--font-size-p); padding: 0; margin: 0; background-color: var(--color-bg); @@ -16,12 +32,21 @@ body * { box-sizing: border-box; } h1, h2, h3, h4, h5 { - font-size: 1em; + font-size: 2em; + line-height: 1.2; font-weight: 900; + font-style: italic; + letter-spacing: -0.02em; } -p { +ul, ol { + padding-left: 0; +} +ul { + list-style: '▪︎ '; +} +p, li { font-weight: 400; - font-size: clamp(20px, 1.6vw, 1.6vw); + font-size: var(--font-size-p); line-height: 1.3; } a { @@ -88,4 +113,22 @@ a { letter-spacing: 0; } } +} +.infobox { + // border-top: 2px solid var(--color-text); + // border-bottom: 2px solid var(--color-text); + padding: 1.5em 0; + font-size: var(--font-size-p); + + & li { + border-bottom: 1px solid; + padding: 0.5em 0; + } + + & > :first-child { + margin-top: 0; + } + & > :last-child { + margin-bottom: 0; + } } \ No newline at end of file diff --git a/src/lib/utils/stores.ts b/src/lib/utils/stores.ts new file mode 100644 index 0000000..ee7de27 --- /dev/null +++ b/src/lib/utils/stores.ts @@ -0,0 +1,3 @@ +import { writable } from 'svelte/store'; + +export const workbulge = writable(0.25); diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index d499cfd..3533e8d 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,139 +1,33 @@ - -
- - - - -
-
- -
+ + + +{#key data.pathname} +
+ +
+{/key} \ No newline at end of file diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts new file mode 100644 index 0000000..2fffad0 --- /dev/null +++ b/src/routes/+layout.ts @@ -0,0 +1,7 @@ +export const load = ({ url }) => { + const { pathname } = url + + return { + pathname + } +} \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index b76ba45..6bf4146 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -3,63 +3,65 @@ import { gsap } from 'gsap'; import ScrollTrigger from 'gsap/dist/ScrollTrigger'; import SplitText from 'gsap/dist/SplitText'; - import { onMount } from 'svelte'; + import { onMount, onDestroy } from 'svelte'; let canvasElems: Array; - onMount(() => { - gsap.registerPlugin( ScrollTrigger, SplitText ); - - const sections = document.querySelectorAll('section'); - - sections.forEach( (section) => { - if ( section.classList.contains('splash')){ - let split = new SplitText(section.querySelectorAll('h1'), { type: 'lines', linesClass: 'lineChildren' }); - gsap.set(split.lines, { - opacity: 0, - y: window.innerHeight * 0.25, - }) - gsap.to(split.lines, { - duration: 1, - opacity: 1, - y: 0, - stagger: 0.075, - ease: 'power4.out', - }) - } - else { - let split = new SplitText(section.querySelectorAll('h2'), { type: 'lines', linesClass: 'lineChildren' }); - gsap.set(split.lines, { transformOrigin: '0% 100%' }); - gsap.set(split.lines, { yPercent: 100, opacity: 0 }); - gsap.to(split.lines, { duration: 1, yPercent: 0, opacity: 1, stagger: 0.1, ease: 'power4.out', - scrollTrigger: { trigger: split.lines, start: 'top 90%', end: 'bottom 70%', scrub: true } + onMount(() => { + + gsap.registerPlugin( ScrollTrigger, SplitText ); + + const sections = document.querySelectorAll('section'); + + sections.forEach( (section) => { + if ( section.classList.contains('splash')){ + let split = new SplitText(section.querySelectorAll('h1'), { type: 'lines', linesClass: 'lineChildren' }); + gsap.set(split.lines, { + opacity: 1, + y: window.innerHeight, + }) + gsap.to(split.lines, { + duration: 1, + opacity: 1, + y: 0, + stagger: 0.075, + ease: 'power4.out', + }) + } + else { + let split = new SplitText(section.querySelectorAll('h2'), { type: 'lines', linesClass: 'lineChildren' }); + gsap.set(split.lines, { transformOrigin: '0% 100%' }); + gsap.set(split.lines, { yPercent: 100, opacity: 0 }); + gsap.to(split.lines, { duration: 1, yPercent: 0, opacity: 1, stagger: 0.1, ease: 'power4.out', + scrollTrigger: { scroller: '.scroller', trigger: split.lines, start: 'top 90%', end: 'bottom 70%', scrub: true, id: 'sth2' } + }) + if (section.querySelector('p')) { + let splitp = new SplitText(section.querySelectorAll('p'), { type: 'lines', linesClass: 'lineChildren' }); + gsap.set(splitp.lines, { transformOrigin: '0% 100%' }); + gsap.set(splitp.lines, { yPercent: 100, autoAlpha: 0 }); + gsap.to(splitp.lines, { duration: 1, yPercent: 0, autoAlpha: 1, stagger: 0.05, ease: 'power4.out', + scrollTrigger: { scroller: '.scroller', trigger: splitp.lines, start: 'top 80%', end: 'bottom 40%', scrub: true } }) - if (section.querySelector('p')) { - let splitp = new SplitText(section.querySelectorAll('p'), { type: 'lines', linesClass: 'lineChildren' }); - gsap.set(splitp.lines, { transformOrigin: '0% 100%' }); - gsap.set(splitp.lines, { yPercent: 100, autoAlpha: 0 }); - gsap.to(splitp.lines, { duration: 1, yPercent: 0, autoAlpha: 1, stagger: 0.05, ease: 'power4.out', - scrollTrigger: { trigger: splitp.lines, start: 'top 80%', end: 'bottom 40%', scrub: true } - }) - } } - if (section.querySelector('.cols-2')){ - gsap.set(section.querySelector('.cols-2'), { autoAlpha: 0 }); - gsap.to(section.querySelector('.cols-2'), { duration: 1, autoAlpha: 1, ease: 'power4.out', - scrollTrigger: { trigger: section.querySelector('.cols-2'), start: 'top 80%', end: 'bottom 40%', scrub: true } - }) - } - }) - canvasElems = Array.from(document.querySelectorAll('.lineChildren')); + } + if (section.querySelector('.cols-2')){ + gsap.set(section.querySelector('.cols-2'), { autoAlpha: 0 }); + gsap.to(section.querySelector('.cols-2'), { duration: 1, autoAlpha: 1, ease: 'power4.out', + scrollTrigger: { scroller: '.scroller', trigger: section.querySelector('.cols-2'), start: 'top 80%', end: 'bottom 40%', scrub: true } + }) + } + }) + canvasElems = Array.from(document.querySelectorAll('.lineChildren')); }); + -
+

Simon Flöter creates products that stand out.

-

As a Creative Frontend Developer ...

+

As a Creative Web Developer ...

I specialise in delivering beautifully crafted bespoke websites.

@@ -100,8 +102,14 @@ \ No newline at end of file + \ No newline at end of file diff --git a/src/routes/work/[slug]/+page.server.ts b/src/routes/work/[slug]/+page.server.ts index fc0a5b5..2adf61d 100644 --- a/src/routes/work/[slug]/+page.server.ts +++ b/src/routes/work/[slug]/+page.server.ts @@ -1,14 +1,16 @@ export async function load({ params }){ try { - const post = await import(`../${params.slug}.md`) - const { title, date, header_bg_image } = post.metadata + const post = await import(`../md/${params.slug}.md`) + const { title, date, header_bg_image, svg, video } = post.metadata const Content = post.default.render() return { title, date, header_bg_image, - Content + svg, + video, + Content, } } catch (error) { console.error(error) diff --git a/src/routes/work/[slug]/+page.svelte b/src/routes/work/[slug]/+page.svelte index 8368a9c..63f4bb0 100644 --- a/src/routes/work/[slug]/+page.svelte +++ b/src/routes/work/[slug]/+page.svelte @@ -1,45 +1,160 @@ -
+
{data.title} + +
+
+ ← Back +
+
{#if visible} -

{data.title}

-

{@html data.Content.html}

+
+

{@html data.svg}

+
+ {@html data.Content.html} +
+
{/if}
\ No newline at end of file diff --git a/src/routes/work/adidas.md b/src/routes/work/adidas.md deleted file mode 100644 index b1e963f..0000000 --- a/src/routes/work/adidas.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Adidas -header_bg_image: /work/adidas/adidas_hero.jpg -order: 12 -description: Adidas, as you might have heard, is an international sports and lifestyle clothing brand. I worked on several digital campaigns as a graphic designer and illustrator. -svg: ' - - ' ---- -
-

Client: Adidas E-commerce dept

- Tasks: -
    -
  • Visual Design
    • -
  • Campaign asset production
    • -
  • Illustration
    • -
-
-
-

Adidas, as you might have heard, is an international sports and lifestyle clothing brand. I worked on several digital campaigns as a graphic designer and illustrator.

-
diff --git a/src/routes/work/formo.md b/src/routes/work/formo.md deleted file mode 100644 index aa6f9f1..0000000 --- a/src/routes/work/formo.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Formo.bio -header_bg_image: /work/formo/formo_hero.png -order: 12 -description: Formo, as you might have heard, is an international sports and lifestyle clothing brand. I worked on several digital campaigns as a graphic designer and illustrator. -svg: ' - - ' ---- -
-

Client: Adidas E-commerce dept

- Tasks: -
    -
  • Visual Design
    • -
  • Campaign asset production
    • -
  • Illustration
    • -
-
-
-

Adidas, as you might have heard, is an international sports and lifestyle clothing brand. I worked on several digital campaigns as a graphic designer and illustrator.

-
diff --git a/src/routes/work/md/adidas.md b/src/routes/work/md/adidas.md new file mode 100644 index 0000000..883a677 --- /dev/null +++ b/src/routes/work/md/adidas.md @@ -0,0 +1,9 @@ +--- +title: Adidas +header_bg_image: /work/adidas/adidas_hero.jpg +order: 12 +description: Adidas, as you might have heard, is an international sports and lifestyle clothing brand. I worked on several digital campaigns as a graphic designer and illustrator. +svg: '' +--- +Adidas, as you might have heard, is an international sports and lifestyle clothing brand. I worked on several digital campaigns as a graphic designer and illustrator. + diff --git a/src/routes/work/md/formo.md b/src/routes/work/md/formo.md new file mode 100644 index 0000000..b8afcaa --- /dev/null +++ b/src/routes/work/md/formo.md @@ -0,0 +1,15 @@ +--- +title: Formo.bio +header_bg_image: /work/formo/formo_hero.png +video: /work/formo/formo-rec.webm +order: 12 +description: Formo, as you might have heard, is an international sports and lifestyle clothing brand. I worked on several digital campaigns as a graphic designer and illustrator. +svg: '' +--- +## A website for the future of dairy. + +Formo is using precision fermentation instead of cows to make dairy products and save the world. + +Formo's previous website was lacking an easy way for the team to create new, visually engaging content without technical knowledge. After consulting with the team, we decided to use the latest version of WordPress which offers full support for the powerful Gutenberg editor. + +We built custom content blocks for the team to use and combine when creating new pages and articles. \ No newline at end of file diff --git a/src/routes/work/jpl.md b/src/routes/work/md/jpl.md similarity index 100% rename from src/routes/work/jpl.md rename to src/routes/work/md/jpl.md diff --git a/src/routes/work/work.scss b/src/routes/work/work.scss new file mode 100644 index 0000000..f0fb534 --- /dev/null +++ b/src/routes/work/work.scss @@ -0,0 +1,80 @@ +h1 { + font-size: 12vw; + font-style: italic; + margin: 0.5em 0 0.5em 0; + letter-spacing: -0.04em; + text-align: center; + position: fixed; + top: 0; + width: 100%; + visibility: hidden; + + @media screen and (min-width: 768px) { + font-size: 7vw; + } + + & span { + display: inline-block; + padding: 0 0.25em; + } +} +h2 { + line-height: 1.1; + letter-spacing: -0.025em; + // font-weight: 400; + font-size: 2.5vw; + // visibility: hidden; + opacity: 0; + position: absolute; + left: .5em; + bottom: .5em; + transform: scale(0.8) translateY(100%); + margin: 0; + padding: 0.1em 0.4em 0.2em 0.4em; + // border-radius: .25em; + text-align: center; + transform-origin: center center; + width: auto; + margin: 0; + background-color: var(--color-bg); + color: var(--color-text); + transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); + + .works .work:not(.active):hover & { + opacity: 1; + transform: scale(1) translateY(0); + } +} +.works { + padding: 15vw 0.5em 0.5em 0.5em; + display: flex; + gap: 0.5em; + flex-wrap: wrap; + @media screen and (min-width: 768px) { + gap: 0.25em; + padding: 8.5vw 0.5em 0.5em 0.5em; + width: 100%; + padding-bottom: 20svh; + } +} +.work { + flex: 0 0 100%; + display: block; + position: relative; + padding: 0; + transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); + text-decoration: none; + overflow: hidden; + + @media screen and (min-width: 768px) { + flex: 0 0 calc(33% - .125em); + + } +} +.workhero { + width: 100%; + aspect-ratio: var(--aspect-ratio-heroes); + object-fit: fill; + visibility: hidden; + display: block; +} \ No newline at end of file diff --git a/src/routes/work/workUtils.ts b/src/routes/work/workUtils.ts new file mode 100644 index 0000000..9b33f9b --- /dev/null +++ b/src/routes/work/workUtils.ts @@ -0,0 +1,106 @@ +import { goto } from '$app/navigation'; +import gsap from 'gsap'; +import SplitText from 'gsap/dist/SplitText'; +import { workbulge } from '$lib/utils/stores'; + +const bulge = {factor: 0}; +workbulge.subscribe(value => { + bulge.factor = value; +}) + +export function workClickHandler(e:Event){ + e.preventDefault(); + const target = e.target as HTMLElement; + const originalLink = target.getAttribute('href') as string; + const targetImg = target.querySelector('.workhero') as HTMLElement; + const targetImgRect = targetImg.getBoundingClientRect(); + const targetImgAspectRatio = targetImgRect.width / targetImgRect.height; + target.classList.add('active'); + targetImg.style.width = `${targetImgRect.width}px`; + targetImg.style.height = `${targetImgRect.height}px`; + targetImg.style.top = `${targetImgRect.top}px`; + targetImg.style.left = `${targetImgRect.left}px`; + targetImg.style.position = 'fixed'; + + gsap.to('.work:not(.active) .workhero', { + duration: .3, + opacity: 0, + yPercent: 10, + ease: 'power4.out', + }) + gsap.set(targetImg, { + zIndex: 100, + }) + gsap.to(targetImg, { + duration: .3, + top: 0, + left: 0, + width: window.innerWidth, + height: window.innerWidth / targetImgAspectRatio, + ease: 'circ.inOut', + delay: 0.3, + }) + gsap.to(bulge, { + duration: .3, + factor: 0, + ease: 'circ.inOut', + onUpdate: () => { + workbulge.set(bulge.factor); + } + }) + gsap.to('h1', { + duration: .3, + yPercent: -200, + ease: 'circ.inOut', + }) + + setTimeout(() => { + goto(originalLink); + }, 600); +} + +export function initWorkPage( h1: HTMLElement, canvasImgElems: Array) { + + workbulge.set(0.25); + + gsap.registerPlugin( SplitText ); + + console.log('initWorkPage:', h1); + const h1Text = h1?.innerHTML || ''; + h1.innerHTML = h1Text + h1Text + h1Text + h1Text || ''; + h1.style.overflow = 'hidden'; + h1.style.whiteSpace = 'nowrap'; + + h1.querySelectorAll('span').forEach((span) => { + gsap.to(span, {xPercent: -100, duration: 4, ease: 'none', repeat: -1 }) + }); + + const split = new SplitText(h1, { type: 'words', wordsClass: 'words' }); + + gsap.set(split.words, { + opacity: 0, yPercent: -10 + }) + gsap.to(split.words, { + duration: 1, + opacity: 1, + yPercent: 0, + stagger: 0.1, + ease: 'power4.out', + }) + + gsap.set(canvasImgElems, { + opacity: 1, yPercent: 100 + }) + gsap.to(canvasImgElems, { + duration: 1, + opacity: 1, + yPercent: 0, + stagger: 0.05, + ease: 'power4.out', + }) + + return { + text: Array.from(split.words), + images: canvasImgElems + } +} \ No newline at end of file diff --git a/static/cursor.png b/static/cursor.png new file mode 100644 index 0000000..cf601be Binary files /dev/null and b/static/cursor.png differ diff --git a/static/cursor.svg b/static/cursor.svg new file mode 100644 index 0000000..affb47f --- /dev/null +++ b/static/cursor.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/pointer.png b/static/pointer.png new file mode 100644 index 0000000..d422e48 Binary files /dev/null and b/static/pointer.png differ diff --git a/static/pointer.svg b/static/pointer.svg new file mode 100644 index 0000000..2d71e4b --- /dev/null +++ b/static/pointer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/work/formo/formo-rec.mp4 b/static/work/formo/formo-rec.mp4 new file mode 100644 index 0000000..d779f44 Binary files /dev/null and b/static/work/formo/formo-rec.mp4 differ diff --git a/static/work/formo/formo-rec.webm b/static/work/formo/formo-rec.webm new file mode 100644 index 0000000..9765a14 Binary files /dev/null and b/static/work/formo/formo-rec.webm differ diff --git a/svelte.config.js b/svelte.config.js index 4c2f87e..2a24cb5 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -1,5 +1,6 @@ import adapter from '@sveltejs/adapter-auto'; import { vitePreprocess } from '@sveltejs/kit/vite'; +import preprocess from 'svelte-preprocess'; import { mdsvex } from 'mdsvex' /** @type {import('@sveltejs/kit').Config} */ @@ -7,6 +8,7 @@ const config = { // Consult https://kit.svelte.dev/docs/integrations#preprocessors // for more information about preprocessors preprocess: [ + preprocess(), vitePreprocess(), mdsvex({ extensions: ['.md']