move web to use tw v4

Author: spences10

.eslintignore

@@ -1,3 +1,3 @@
 # SvelteKit Embed 🌱
 
-[docs](../../README.md)
+[docs](../../README.md)

.eslintrc.cjs

@@ -16,37 +16,37 @@
 		"build:packages": "pnpm -r --filter=\"../../packages/*\" run build"
 	},
 	"devDependencies": {
+		"@eslint/compat": "^1.2.9",
+		"@eslint/js": "^9.27.0",
 		"@playwright/test": "^1.52.0",
-		"@sveltejs/adapter-auto": "^4.0.0",
-		"@sveltejs/kit": "^2.20.7",
+		"@sveltejs/adapter-auto": "^6.0.1",
+		"@sveltejs/kit": "^2.21.1",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@tailwindcss/typography": "^0.5.16",
-		"@types/eslint": "^9.6.1",
-		"@typescript-eslint/eslint-plugin": "^8.31.0",
-		"@typescript-eslint/parser": "^8.31.0",
-		"autoprefixer": "^10.4.21",
-		"daisyui": "^4.12.23",
-		"eslint": "^9.25.1",
-		"eslint-config-prettier": "^10.1.2",
-		"eslint-plugin-svelte": "^2.46.1",
+		"@tailwindcss/vite": "^4.1.7",
+		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/svelte": "^5.2.8",
+		"daisyui": "^5.0.38",
+		"eslint": "^9.27.0",
+		"eslint-config-prettier": "^10.1.5",
+		"eslint-plugin-svelte": "^3.9.0",
 		"fathom-client": "^3.7.2",
-		"mdsvex": "^0.12.3",
-		"postcss": "^8.5.3",
-		"postcss-load-config": "^6.0.1",
+		"mdsvex": "^0.12.6",
 		"prettier": "^3.5.3",
-		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-svelte": "^3.4.0",
 		"prettier-plugin-tailwindcss": "^0.6.11",
 		"rehype-autolink-headings": "^7.1.0",
+		"rehype-external-links": "^3.0.0",
 		"rehype-slug": "^6.0.0",
 		"svead": "^0.0.4",
-		"svelte": "5.33.1",
-		"svelte-check": "^4.1.6",
+		"svelte": "5.33.4",
+		"svelte-check": "^4.2.1",
 		"sveltekit-embed": "workspace:*",
-		"tailwindcss": "^3.4.17",
-		"tslib": "^2.8.1",
+		"tailwindcss": "^4.1.7",
 		"typescript": "^5.8.3",
-		"vite": "^6.3.3",
-		"vitest": "^3.1.2"
+		"typescript-eslint": "^8.33.0",
+		"vite": "^6.3.5",
+		"vitest": "^3.1.4"
 	},
 	"type": "module"
-}
+}

apps/web/README.md

@@ -0,0 +1,9 @@
+@import 'tailwindcss';
+
+/* Plugin configurations */
+@plugin "@tailwindcss/typography";
+@plugin "daisyui" {
+	themes:
+		light --default,
+		dark --prefersdark;
+}

apps/web/mdsvex.config.js

@@ -1,9 +1,9 @@
 <script lang="ts">
-	export let width: string = '25'
-	export let height: string = '25'
-	export let fill: string = 'fill-current'
+	export let width: string = '25';
+	export let height: string = '25';
+	export let fill: string = 'fill-current';
 
-	let svgClass: string = `${fill} text-primary-content transition hover:text-secondary-focus`
+	let svgClass: string = `${fill} text-primary-content transition hover:text-secondary-focus`;
 </script>
 
 <svg

apps/web/package.json

@@ -1,3 +1,3 @@
-export { default as GitHub } from './git-hub.svelte'
-export { default as Twitter } from './twitter.svelte'
-export { default as YouTube } from './you-tube.svelte'
+export { default as GitHub } from './git-hub.svelte';
+export { default as Twitter } from './twitter.svelte';
+export { default as YouTube } from './you-tube.svelte';

apps/web/postcss.config.cjs

@@ -4,7 +4,7 @@
 	viewBox="0 0 24 24"
 	height="25"
 	width="25"
-	class="fill-current text-primary-content transition hover:text-secondary-focus"
+	class="text-primary-content hover:text-secondary-focus fill-current transition"
 >
 	<path
 		d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"

apps/web/src/app.css

@@ -4,7 +4,7 @@
 	viewBox="0 0 24 24"
 	height="25"
 	width="25"
-	class="fill-current text-primary-content transition hover:text-secondary-focus"
+	class="text-primary-content hover:text-secondary-focus fill-current transition"
 >
 	<path
 		d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"

apps/web/src/app.pcss

@@ -9,8 +9,9 @@
 code[class*='language-'],
 pre[class*='language-'] {
 	color: #d6deeb;
-	font-family: 'Victor Mono', Consolas, Monaco, 'Andale Mono',
-		'Ubuntu Mono', monospace;
+	font-family:
+		'Victor Mono', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono',
+		monospace;
 	text-align: left;
 	white-space: pre;
 	word-spacing: normal;

apps/web/src/lib/icons/git-hub.svelte

@@ -9,7 +9,7 @@
 	import spencee_img from '$lib/images/spencee.png';
 	import * as Fathom from 'fathom-client';
 	import { onMount } from 'svelte';
-	import '../app.pcss';
+	import '../app.css';
 	import '../prism.css';
 
 	export let data;

apps/web/src/lib/icons/index.ts

@@ -794,8 +794,8 @@ Output:
 - `modestBranding`: Use minimal YouTube branding (default: false)
 - `rel`: Show related videos at the end (default: false)
 - `aspectRatio`: Set the aspect ratio (default: '16:9')
-- `skipTo`: Start at specific timestamp (default: { h: 0, m: 0, s: 0
-  })
+- `skipTo`: Start at specific timestamp (default:
+  `{ h: 0, m: 0, s: 0 }`)
 - `disable_observer`: Disable lazy loading (default: false)
 - `iframe_styles`: Custom CSS styles for the iframe
 

apps/web/src/lib/icons/twitter.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { fly } from 'svelte/transition'
+	import { fly } from 'svelte/transition';
 
-	let showScrollButton = false
+	let showScrollButton = false;
 
 	function scrollToTop() {
 		window.scrollTo({
 			top: 0,
 			behavior: 'smooth',
-		})
+		});
 	}
 
 	function handleScroll() {
-		showScrollButton = window.pageYOffset > 0
+		showScrollButton = window.pageYOffset > 0;
 	}
 </script>
 
@@ -21,7 +21,7 @@
 	<button
 		on:click={scrollToTop}
 		transition:fly={{ y: 200, duration: 300 }}
-		class="fixed bottom-8 right-8 btn btn-secondary normal-case shadow-2xl"
+		class="btn btn-secondary fixed bottom-8 right-8 normal-case shadow-2xl"
 	>
 		Back to top
 	</button>

apps/web/src/lib/icons/you-tube.svelte

@@ -1,22 +1,33 @@
-import { mdsvex } from 'mdsvex';
-import mdsvexConfig from './mdsvex.config.js';
 import adapter from '@sveltejs/adapter-auto';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import { mdsvex } from 'mdsvex';
+import autolinkHeadings from 'rehype-autolink-headings';
+import rehypeExternalLinks from 'rehype-external-links';
+import slugPlugin from 'rehype-slug';
 
-/** @type {import('@sveltejs/kit').Config} */
 const config = {
-	extensions: ['.svelte', ...mdsvexConfig.extensions],
-
-	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
-	// for more information about preprocessors
-	preprocess: [vitePreprocess({}), mdsvex(mdsvexConfig)],
-
-	kit: {
-		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
-		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter(),
-	},
+	preprocess: [
+		vitePreprocess({}),
+		mdsvex({
+			extensions: ['.md'],
+			smartypants: true,
+			rehypePlugins: [
+				slugPlugin,
+				[
+					autolinkHeadings,
+					{
+						behavior: 'wrap',
+					},
+				],
+				[
+					rehypeExternalLinks,
+					{ target: '_blank', rel: 'noopener noreferrer' },
+				],
+			],
+		}),
+	],
+	kit: { adapter: adapter() },
+	extensions: ['.svelte', '.md'],
 };
 
 export default config;