From 074798b00ad5182aed4ce146f6fa4587a2d7b521 Mon Sep 17 00:00:00 2001 From: Niko Date: Thu, 5 Jun 2025 18:19:21 +0200 Subject: [PATCH 1/5] Fixed YouTube Player --- astro.config.mjs | 25 ++++++----- package.json | 1 + pnpm-lock.yaml | 8 ++-- src/components/ui/Markdown.astro | 3 +- src/components/ui/YouTube.astro | 77 +++++++++++++++++++++++++++----- src/utils/markdown.ts | 30 +++++++++++++ 6 files changed, 118 insertions(+), 26 deletions(-) create mode 100644 src/utils/markdown.ts diff --git a/astro.config.mjs b/astro.config.mjs index bde439617..0cc501afb 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -26,6 +26,8 @@ if (!gitVersion) { } } +const fastBuild= true; + function dontDie() { return { name: "dont-die", @@ -113,20 +115,23 @@ export default defineConfig({ }, integrations: [ mdx(), - sitemap(), - metaTags(), - deleteUnusedImages(), svelte(), - compress({ - HTML: false, - CSS: false, - SVG: false, - }), - dontDie(), + ...(fastBuild? [] : [ + sitemap(), + metaTags(), + deleteUnusedImages(), + compress({ + HTML: false, + JavaScript: false, + CSS: false, + SVG: false, + }), + dontDie(), + ]), ], output: "static", build: { - minify: true, + ...(fastBuild? {} : { minify: true,}), }, image: { remotePatterns: [{ protocol: "https" }], diff --git a/package.json b/package.json index 658267a51..865517c3b 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "date-fns-tz": "^3.2.0", "hastscript": "^9.0.1", "js-yaml": "^4.1.0", + "lite-youtube-embed": "^0.3.3", "marked": "^15.0.12", "nanostores": "^1.0.1", "pagefind": "^1.3.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 95ccea1ee..6acedacf7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -71,6 +71,9 @@ importers: js-yaml: specifier: ^4.1.0 version: 4.1.0 + lite-youtube-embed: + specifier: ^0.3.3 + version: 0.3.3 marked: specifier: ^15.0.12 version: 15.0.12 @@ -2637,9 +2640,6 @@ packages: engines: {node: '>=14.0.0'} hasBin: true - tailwindcss@4.1.7: - resolution: {integrity: sha512-kr1o/ErIdNhTz8uzAYL7TpaUuzKIE6QPQ4qmSdxnoX/lo+5wmUHQA6h3L5yIqEImSRnAAURDirLu/BgiXGPAhg==} - tailwindcss@4.1.8: resolution: {integrity: sha512-kjeW8gjdxasbmFKpVGrGd5T4i40mV5J2Rasw48QARfYeQ8YS9x02ON9SFWax3Qf616rt4Cp3nVNIj6Hd1mP3og==} @@ -6336,8 +6336,6 @@ snapshots: csso: 5.0.5 picocolors: 1.1.1 - tailwindcss@4.1.7: {} - tailwindcss@4.1.8: {} tapable@2.2.2: {} diff --git a/src/components/ui/Markdown.astro b/src/components/ui/Markdown.astro index ca465b4a9..044cf035f 100644 --- a/src/components/ui/Markdown.astro +++ b/src/components/ui/Markdown.astro @@ -1,12 +1,13 @@ --- import { marked } from 'marked'; +import { replaceYouTubeLinks } from "@utils/markdown"; interface Props { content: string; } const { content } = Astro.props; -const html = marked.parse(content); +const html = marked.parse(await replaceYouTubeLinks(content) ); ---
diff --git a/src/components/ui/YouTube.astro b/src/components/ui/YouTube.astro index ed5b26625..2b2c584f2 100644 --- a/src/components/ui/YouTube.astro +++ b/src/components/ui/YouTube.astro @@ -1,21 +1,78 @@ --- -import { YouTube as Player } from "@astro-community/astro-embed-youtube"; -type Props = { - id?: string; - class?: string; - [key: string]: any; +import 'lite-youtube-embed/src/lite-yt-embed.css'; +import liteJS from 'lite-youtube-embed/src/lite-yt-embed.js?url'; + +const urlPattern = + /(?=(\s*))\1(?:]*?>)??(?=(\s*))\2(?:https?:\/\/)??(?:w{3}\.)??(?:youtube\.com|youtu\.be)\/(?:watch\?v=|embed\/|shorts\/)??([A-Za-z0-9-_]{11})(?:[^\s<>]*)(?=(\s*))\4(?:<\/a>)??(?=(\s*))\5/; + +function urlMatcher(url: string): string | undefined { + const match = url.match(urlPattern); + return match?.[3]; +} + +export interface Props extends astroHTML.JSX.HTMLAttributes { + id: string; + poster?: string; + posterQuality?: 'max' | 'high' | 'default' | 'low'; + params?: string; + playlabel?: string; } const { + id, + poster, + posterQuality = 'default', + title, class: userClass = '', - ...attrs -} = Astro.props; - -const attrId = attrs.id || ''; + ...attrs +} = Astro.props as Props; const defaultClass = 'border-4 border-white rounded-lg shadow-lg'; const className = `${defaultClass} ${userClass}`.trim(); + +const idRegExp = /^[A-Za-z0-9-_]+$/; + +function extractID(idOrUrl: string) { + if (idRegExp.test(idOrUrl)) return idOrUrl; + return urlMatcher(idOrUrl); +} + +const videoid = extractID(id); +const posterFile = + { + max: 'maxresdefault', + high: 'sddefault', + default: 'hqdefault', + low: 'default', + }[posterQuality] || 'hqdefault'; +const posterURL = + poster || `https://i.ytimg.com/vi/${videoid}/${posterFile}.jpg`; +const href = `https://youtube.com/watch?v=${videoid}`; --- - + + + {attrs.playlabel || 'Play'} + + + + + + diff --git a/src/utils/markdown.ts b/src/utils/markdown.ts new file mode 100644 index 000000000..1a3fe4e52 --- /dev/null +++ b/src/utils/markdown.ts @@ -0,0 +1,30 @@ +import { experimental_AstroContainer } from "astro/container"; +import YouTube from "@ui/YouTube.astro"; + +export async function replaceYouTubeLinks( + markdownContent: string +): Promise { + const youtubeRegex = + /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([^\s'"()[\]<>]+)/gi; + + const matches = [...markdownContent.matchAll(youtubeRegex)]; + if (matches.length === 0) return markdownContent; + + const container = await experimental_AstroContainer.create(); + let updatedContent = markdownContent; + + for (const match of matches) { + const fullUrl = match[0]; + const id = match[1]; + + if (!id) continue; + + const html = await container.renderToString(YouTube, { + props: { id, alt: "Embedded YouTube video" }, + }); + + updatedContent = updatedContent.replace(fullUrl, html); + } + + return updatedContent; +} From b4d938e28da04ef75149089ab1e2963a91bb1455 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Thu, 5 Jun 2025 17:29:02 +0000 Subject: [PATCH 2/5] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- astro.config.mjs | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/astro.config.mjs b/astro.config.mjs index 880faad6b..59a3a4a0b 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -120,21 +120,23 @@ export default defineConfig({ serviceWorker({ workbox: { inlineWorkboxRuntime: true }, }), - ...(fastBuild? [] : [ - sitemap(), - metaTags(), - deleteUnusedImages(), - compress({ - HTML: false, - CSS: false, - SVG: false, - }), - dontDie(), - ]), + ...(fastBuild + ? [] + : [ + sitemap(), + metaTags(), + deleteUnusedImages(), + compress({ + HTML: false, + CSS: false, + SVG: false, + }), + dontDie(), + ]), ], output: "static", build: { - ...(fastBuild? {} : { minify: true,}), + ...(fastBuild ? {} : { minify: true }), }, image: { remotePatterns: [{ protocol: "https" }], From b49e2b0be446367a6f38a4db094305cd87007dc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niko=C5=9B?= Date: Sun, 8 Jun 2025 07:45:45 +0200 Subject: [PATCH 3/5] Update src/components/ui/YouTube.astro MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Mia Bajić <38294198+clytaemnestra@users.noreply.github.com> --- src/components/ui/YouTube.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/YouTube.astro b/src/components/ui/YouTube.astro index 2b2c584f2..00fb889b9 100644 --- a/src/components/ui/YouTube.astro +++ b/src/components/ui/YouTube.astro @@ -31,7 +31,7 @@ const { const defaultClass = 'border-4 border-white rounded-lg shadow-lg'; const className = `${defaultClass} ${userClass}`.trim(); -const idRegExp = /^[A-Za-z0-9-_]+$/; +const idRegExp = /^[A-Za-z0-9-_]{11}$/; function extractID(idOrUrl: string) { if (idRegExp.test(idOrUrl)) return idOrUrl; From 62bc74f2ff11ca390247487307e5981b4b3adb86 Mon Sep 17 00:00:00 2001 From: Niko Date: Mon, 9 Jun 2025 08:20:03 +0200 Subject: [PATCH 4/5] Fix astro check errors --- src/components/InstallPWA.astro | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/InstallPWA.astro b/src/components/InstallPWA.astro index bbcf7b131..df48f0750 100644 --- a/src/components/InstallPWA.astro +++ b/src/components/InstallPWA.astro @@ -29,11 +29,12 @@