From 3dd9ec8916084e465f809faf0353e3d6f69dd25c Mon Sep 17 00:00:00 2001 From: ZhymabekRoman Date: Wed, 27 Nov 2024 22:14:29 +0500 Subject: [PATCH] feat(article): add mixtape embed functionality and styles --- new-web/bun.lockb | Bin 119538 -> 119570 bytes new-web/package.json | 3 +- new-web/src/lib/elements/ArticlePage.svelte | 43 +++++++++++++++++- new-web/src/lib/test/blog01.md | 4 ++ new-web/src/lib/utils/remark/mixtape-embed.js | 41 +++++++++++++++++ new-web/svelte.config.js | 2 + 6 files changed, 91 insertions(+), 2 deletions(-) create mode 100644 new-web/src/lib/utils/remark/mixtape-embed.js diff --git a/new-web/bun.lockb b/new-web/bun.lockb index 07d55d53a06724894e3f085dcbfdf5fedf5c3a21..f3b54dc3c116b6d537aad0a8b137a12e2b5e999b 100755 GIT binary patch delta 11340 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 delta 11318 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 diff --git a/new-web/src/lib/test/blog01.md b/new-web/src/lib/test/blog01.md index 87bf3c1..064119d 100644 --- a/new-web/src/lib/test/blog01.md +++ b/new-web/src/lib/test/blog01.md @@ -129,3 +129,7 @@ _For more information, visit our [documentation](https://docs.uploadthing.com)._ ```js console.log('Hello, world!'); ``` + +[![Why React Hooks are the Future of React Development](https://medium.com/@johndoe/why-react-hooks-are-the-future)](https://miro.medium.com/v2/resize:fit:320/1*abc123.jpg) +> **Why React Hooks are the Future of React Development** +> Learn how React Hooks are revolutionizing the way we write components and manage state in React applications. Discover the benefits and best practices. diff --git a/new-web/src/lib/utils/remark/mixtape-embed.js b/new-web/src/lib/utils/remark/mixtape-embed.js new file mode 100644 index 0000000..52c08ce --- /dev/null +++ b/new-web/src/lib/utils/remark/mixtape-embed.js @@ -0,0 +1,41 @@ +import { visit } from 'unist-util-visit'; + +function remarkMixtapeEmbed() { + return (tree) => { + visit(tree, 'paragraph', (node) => { + const text = node.children[0].value; + const mixtapeRegex = /\[!\[(.*?)\]\((.*?)\)\]\((.*?)\)\n>(.*?)\n>(.*?)\n/; + + const match = mixtapeRegex.exec(text); + if (match) { + const [, altText, linkUrl, imageUrl, title, description] = match; + const siteName = new URL(linkUrl).hostname; + + node.type = 'html'; + node.value = ` +

+ `; + node.children = undefined; + } + }); + }; +} + +export default remarkMixtapeEmbed; diff --git a/new-web/svelte.config.js b/new-web/svelte.config.js index 92e6aa1..df87e43 100644 --- a/new-web/svelte.config.js +++ b/new-web/svelte.config.js @@ -5,6 +5,7 @@ import adapter from '@sveltejs/adapter-auto'; import { toHtml } from 'hast-util-to-html'; import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; import { h } from 'hastscript'; +import remarkMixtapeEmbed from './src/lib/utils/remark/mixtape-embed.js'; const readySvg = "data:image/svg+xml;utf8,"; @@ -91,6 +92,7 @@ export function renderCodeCopyButton(code, options = {}) { /** @type {import('mdsvex').MdsvexOptions} */ const mdsvexOptions = { extensions: ['.md'], + remarkPlugins: [remarkMixtapeEmbed], rehypePlugins: [[rehypeExternalLinks, { target: '_blank', rel: ['nofollow'] }]], highlight: { highlighter: async (code, lang = 'text') => {