From a21e6a493cc57a8f363961560f3cc5a2e99f5a22 Mon Sep 17 00:00:00 2001 From: ZhymabekRoman Date: Thu, 21 Nov 2024 19:58:40 +0500 Subject: [PATCH] feat(new-web): ui design fixes && more md tests --- new-web/README.md | 39 +----- new-web/bun.lockb | Bin 115788 -> 117499 bytes new-web/package.json | 5 +- new-web/src/app.css | 45 +------ .../lib/components/ui/sonner/sonner.svelte | 1 + new-web/src/lib/elements/ArticlePage.svelte | 30 ++++- new-web/src/lib/elements/Header.svelte | 2 +- new-web/src/lib/test/blog01.md | 64 ++++++++++ new-web/src/routes/+layout.svelte | 2 +- new-web/svelte.config.js | 117 +++++++++++++----- new-web/tailwind.config.js | 4 +- 11 files changed, 195 insertions(+), 114 deletions(-) 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 cbfca21655f8bc698b89a1bcdde6dab33ecc012a..bdd21ea97a6f12860f767252ce3607386a369b38 100755 GIT binary patch delta 21172 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 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! + +
    +
  • Point 1
    • +
  • Point 2
    • +
  • Point 3
    • +
+
+ + + +### Custom Styling + +
+

Custom styled content box

+
    +
  • Feature highlight
    • +
  • Important note
    • +
+
+ --- _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;