diff --git a/new-web/README.md b/new-web/README.md index 5ce6766..82645e6 100644 --- a/new-web/README.md +++ b/new-web/README.md @@ -1,38 +1,5 @@ -# create-svelte +# New Freedium Frontend -Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte). +## TODO: -## Creating a project - -If you're seeing this, you've probably already done this step. Congrats! - -```bash -# create a new project in the current directory -npm create svelte@latest - -# create a new project in my-app -npm create svelte@latest my-app -``` - -## Developing - -Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: - -```bash -npm run dev - -# or start the server and open the app in a new browser tab -npm run dev -- --open -``` - -## Building - -To create a production version of your app: - -```bash -npm run build -``` - -You can preview the production build with `npm run preview`. - -> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. +- Migrate to https://github.com/unplugin/unplugin-icons diff --git a/new-web/bun.lockb b/new-web/bun.lockb index cbfca21..bdd21ea 100755 Binary files a/new-web/bun.lockb and b/new-web/bun.lockb differ diff --git a/new-web/package.json b/new-web/package.json index 0d914a2..7ef445b 100644 --- a/new-web/package.json +++ b/new-web/package.json @@ -12,6 +12,7 @@ "format": "prettier --write ." }, "devDependencies": { + "@iconify-json/heroicons-outline": "^1.2.0", "@sveltejs/adapter-auto": "^3.3.1", "@sveltejs/kit": "^2.7.4", "@sveltejs/vite-plugin-svelte": "^3.1.2", @@ -39,9 +40,11 @@ "@iconify/tailwind": "^1.1.3", "bits-ui": "^0.21.16", "copy-to-clipboard": "^3.3.3", - "es-toolkit": "^1.26.1", + "es-toolkit": "^1.27.0", + "hast-util-to-html": "^9.0.3", "mdsvex": "^0.12.3", "medium-zoom": "^1.1.0", + "rehype-external-links": "^3.0.0", "shiki": "^1.23.1", "shiki-transformer-copy-button": "^0.0.3", "svelte-bricks": "^0.2.1", diff --git a/new-web/src/app.css b/new-web/src/app.css index 726e780..d05520c 100644 --- a/new-web/src/app.css +++ b/new-web/src/app.css @@ -86,6 +86,10 @@ html { z-index: 999; } +.medium-zoom-overlay { + @apply !bg-white dark:!bg-zinc-900; +} + @layer base { /** * Shiki @@ -140,44 +144,3 @@ html { background-color: hsla(0 62.8% 30.6% / 0.7); } } - -pre:has(code) { - position: relative; -} - -pre button.copy { - position: absolute; - right: 16px; - top: 16px; - height: 20px; - width: 20px; - padding: 0; - display: flex; - - & span { - width: 100%; - aspect-ratio: 1 / 1; - background-repeat: no-repeat; - background-position: center; - background-size: cover; - } - - & .ready { - background-image: url("data:image/svg+xml;utf8,"); - } - - & .success { - display: none; - background-image: url("data:image/svg+xml;utf8,"); - } - - &.copied { - & .success { - display: block; - } - - & .ready { - display: none; - } - } -} diff --git a/new-web/src/lib/components/ui/sonner/sonner.svelte b/new-web/src/lib/components/ui/sonner/sonner.svelte index dcff20b..2a5b95f 100644 --- a/new-web/src/lib/components/ui/sonner/sonner.svelte +++ b/new-web/src/lib/components/ui/sonner/sonner.svelte @@ -8,6 +8,7 @@ if (browser) { window.addEventListener('toast', (event) => { + console.log(`toast: ${event.detail.message}`); toast.success(event.detail.message); }); } diff --git a/new-web/src/lib/elements/ArticlePage.svelte b/new-web/src/lib/elements/ArticlePage.svelte index d07b5b6..c427294 100644 --- a/new-web/src/lib/elements/ArticlePage.svelte +++ b/new-web/src/lib/elements/ArticlePage.svelte @@ -204,7 +204,7 @@ /* Blockquotes */ :global(.prose blockquote) { - @apply border-l-4 border-gray-200 dark:border-gray-700 pl-4 italic my-6; + @apply border-l-4 border-gray-300 dark:border-gray-700 pl-4 italic my-6; } /* Code blocks */ @@ -212,8 +212,8 @@ @apply rounded-lg p-4 my-6 overflow-x-auto; } - :global(.prose code) { - @apply px-1.5 py-0.5 rounded text-sm font-mono; + :global(.prose code:not(.shiki code)) { + @apply px-1.5 py-0.5 rounded text-sm font-mono bg-gray-200 dark:bg-zinc-700; } :global(.prose pre code) { @@ -238,6 +238,11 @@ @apply text-primary hover:text-primary/90 underline decoration-primary/30 hover:decoration-primary/50; } + :global(.prose a::after) { + content: ""; + @apply icon-[heroicons-outline--external-link] inline-block ml-1 w-3.5 h-3.5 align-text-bottom; + } + /* Horizontal rule */ :global(.prose hr) { @apply border-gray-200 dark:border-gray-700 my-8; @@ -297,4 +302,23 @@ :global(.prose details[open] summary) { @apply mb-3; } + + /* Aside blocks */ + :global(.prose aside) { + @apply my-6 p-4 rounded-lg border-l-4 border-primary bg-primary/5; + } + + :global(.prose aside p) { + @apply m-0; + } + + /* Mark blocks */ + :global(.prose mark) { + @apply bg-primary/20 text-primary px-1.5 py-0.5 rounded; + } + + /* Keyboard blocks */ + :global(.prose kbd) { + @apply px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500; + } diff --git a/new-web/src/lib/elements/Header.svelte b/new-web/src/lib/elements/Header.svelte index b76e68a..1ad3e59 100644 --- a/new-web/src/lib/elements/Header.svelte +++ b/new-web/src/lib/elements/Header.svelte @@ -45,7 +45,7 @@ aria-label="Open search" > - Search articles, topics, and more... + Search articles... diff --git a/new-web/src/lib/test/blog01.md b/new-web/src/lib/test/blog01.md index 33eb71b..87bf3c1 100644 --- a/new-web/src/lib/test/blog01.md +++ b/new-web/src/lib/test/blog01.md @@ -58,6 +58,70 @@ UploadThing now leverages cutting-edge machine learning algorithms to optimize y +## More Formatting Examples + +### Advanced Markdown + +#### Lists and Sublists + +- Main Feature + - Sub-feature 1 + - Sub-feature 2 + - Detailed point + - Another detail +- Another Feature + 1. First step + 2. Second step + 3. Third step + +#### Text Formatting + +_Italic text_ and _another italic_ +**Bold text** and **another bold** +**_Bold and italic_** **_together_** +~~Strikethrough text~~ +`inline code` + +### HTML Elements + +
+

Centered Content

+

This content is centered using `HTML`

+
+ +Ctrl + C to copy + +Highlighted text + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
+ +
+Click to expand +This is hidden content that can be expanded! + + +
+ + + +### Custom Styling + +
+

Custom styled content box

+ +
+ --- _For more information, visit our [documentation](https://docs.uploadthing.com)._ diff --git a/new-web/src/routes/+layout.svelte b/new-web/src/routes/+layout.svelte index 71c6849..068c471 100644 --- a/new-web/src/routes/+layout.svelte +++ b/new-web/src/routes/+layout.svelte @@ -3,5 +3,5 @@ import { Toaster } from '$lib/components/ui/sonner'; - + diff --git a/new-web/svelte.config.js b/new-web/svelte.config.js index 58dafd3..92e6aa1 100644 --- a/new-web/svelte.config.js +++ b/new-web/svelte.config.js @@ -1,39 +1,97 @@ import { mdsvex, escapeSvelte } from 'mdsvex'; +import rehypeExternalLinks from 'rehype-external-links'; import { createHighlighter } from 'shiki'; import adapter from '@sveltejs/adapter-auto'; +import { toHtml } from 'hast-util-to-html'; import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; - import { h } from 'hastscript'; -export function addCopyButton(options = {}) { +const readySvg = + "data:image/svg+xml;utf8,"; + +const successSvg = + "data:image/svg+xml;utf8,"; + +export function renderCodeCopyButton(code, options = {}) { const toggleMs = options.toggle || 3000; + const button = h( + 'button', + { + 'data-code': code, + style: ` + position: absolute; + right: 1rem; + top: 0.8rem; + height: 2rem; + width: 2rem; + padding: 0.4rem; + display: flex; + align-items: center; + justify-content: center; + background-color: rgba(0, 0, 0, 0.5); + border-radius: 6px; + transition: background-color 0.2s ease; + cursor: pointer; + `, + onmouseover: ` + this.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; + `, + onmouseout: ` + this.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; + `, + onclick: ` + if (this.classList.contains('copied')) return; + navigator.clipboard.writeText(this.dataset.code); + this.classList.add('copied'); + const ready = this.querySelector('.ready'); + const success = this.querySelector('.success'); + ready.style.display = 'none'; + success.style.display = 'block'; + setTimeout(() => { + this.classList.remove('copied'); + ready.style.display = 'block'; + success.style.display = 'none'; + }, ${toggleMs}); + window.dispatchEvent(new CustomEvent('toast', { detail: { message: 'Copied to clipboard' } })); + ` + }, + [ + h('span', { + class: 'ready', + style: ` + width: 100%; + aspect-ratio: 1 / 1; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + background-image: url("${readySvg}"); + z-index: 99; + display: block; + ` + }), + h('span', { + class: 'success', + style: ` + width: 100%; + aspect-ratio: 1 / 1; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + background-image: url("${successSvg}"); + z-index: 99; + display: none; + ` + }) + ] + ); - return { - name: 'shiki-transformer-copy-button', - pre(node) { - const button = h( - 'button', - { - class: 'copy', - 'data-code': this.source, - onclick: ` - navigator.clipboard.writeText(this.dataset.code); - this.classList.add('copied'); - setTimeout(() => this.classList.remove('copied'), ${toggleMs}); - window.dispatchEvent(new CustomEvent('toast', { detail: { message: 'Copied to clipboard' } })); - ` - }, - [h('span', { class: 'ready' }), h('span', { class: 'success' })] - ); - - node.children.push(button); - } - }; + return toHtml(button); } /** @type {import('mdsvex').MdsvexOptions} */ const mdsvexOptions = { extensions: ['.md'], + rehypePlugins: [[rehypeExternalLinks, { target: '_blank', rel: ['nofollow'] }]], highlight: { highlighter: async (code, lang = 'text') => { const highlighter = await createHighlighter({ @@ -41,13 +99,12 @@ const mdsvexOptions = { langs: ['javascript', 'typescript'] }); await highlighter.loadLanguage('javascript', 'typescript'); - const html = escapeSvelte( - highlighter.codeToHtml(code, { - lang, - theme: 'poimandres', - transformers: [addCopyButton({ toggle: 1200 })] - }) - ); + const result = highlighter.codeToHtml(code, { + lang, + theme: 'poimandres' + }); + const buttonHtml = renderCodeCopyButton(code, { toggle: 1200 }); + const html = escapeSvelte(`
${buttonHtml}${result}
`); return `{@html \`${html}\` }`; } } diff --git a/new-web/tailwind.config.js b/new-web/tailwind.config.js index 85f1c78..9228ccf 100644 --- a/new-web/tailwind.config.js +++ b/new-web/tailwind.config.js @@ -1,4 +1,5 @@ import { fontFamily } from 'tailwindcss/defaultTheme'; +import { addDynamicIconSelectors } from '@iconify/tailwind'; /** @type {import('tailwindcss').Config} */ const config = { @@ -58,7 +59,8 @@ const config = { sans: [...fontFamily.sans] } } - } + }, + plugins: [addDynamicIconSelectors()] }; export default config;