From 53c37fecad7342e84d6c620c2fdf730a2b92e13c Mon Sep 17 00:00:00 2001
From: mrboxs <rizkywanda200155@gmail.com>
Date: Mon, 9 Nov 2026 05:24:09 +0700
Subject: [PATCH 01/10] feat(web): add favicons to Markdown links

- Show site favicons on ordinary internal and external links
- Keep image links undecorated and hide favicons that fail to load
---
 .../public-content/content-link.tsx           | 40 +++++++++-
 apps/web/tests/admin-blog-editor.test.tsx     | 38 +++++++++
 apps/web/tests/public-content.test.tsx        | 78 ++++++++++++++++++-
 3 files changed, 152 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/public-content/content-link.tsx b/apps/web/src/components/public-content/content-link.tsx
index e1b92de..505921a 100644
--- a/apps/web/src/components/public-content/content-link.tsx
+++ b/apps/web/src/components/public-content/content-link.tsx
@@ -1,6 +1,7 @@
 import { IconExternalLink, IconFolders } from '@tabler/icons-react'
 import { Link, useRouter } from '@tanstack/react-router'
 import type { Element, ElementContent } from 'hast'
+import { useState } from 'react'
 import type { ReactNode } from 'react'
 
 import { env } from '@altstack/env/web'
@@ -47,10 +48,20 @@ export function ContentLink({
 			</a>
 		)
 	}
+	const imageLink = node && containsImage(node)
+	const faviconSrc = target.internal
+		? '/favicon.svg'
+		: `https://www.google.com/s2/favicons?domain=${encodeURIComponent(target.url.hostname)}&sz=32`
+	const linkContent = (
+		<>
+			{!imageLink && <LinkFavicon key={faviconSrc} src={faviconSrc} />}
+			{children}
+		</>
+	)
 	if (!target.internal) {
 		return (
 			<a href={href} title={title} target="_blank" rel="noopener noreferrer">
-				{children}
+				{linkContent}
 				<IconExternalLink
 					className="ml-0.5 inline size-3.5 align-baseline"
 					aria-hidden="true"
@@ -67,7 +78,6 @@ export function ContentLink({
 		target.collectionSlug && Object.hasOwn(collections, target.collectionSlug)
 			? collections[target.collectionSlug]
 			: undefined
-	const imageLink = node && containsImage(node)
 	return (
 		<InternalContentLink
 			url={target.url}
@@ -75,11 +85,35 @@ export function ContentLink({
 			project={imageLink ? undefined : project}
 			collection={imageLink ? undefined : collection}
 		>
-			{children}
+			{linkContent}
 		</InternalContentLink>
 	)
 }
 
+function LinkFavicon({ src }: { src: string }) {
+	const [failed, setFailed] = useState(false)
+	if (failed) return null
+	return (
+		<img
+			src={src}
+			alt=""
+			aria-hidden="true"
+			width={16}
+			height={16}
+			loading="lazy"
+			decoding="async"
+			referrerPolicy="no-referrer"
+			className="not-prose me-1 inline-block size-4 object-contain align-[-0.125em]"
+			ref={(element) => {
+				if (element?.complete) {
+					void element.decode().catch(() => setFailed(true))
+				}
+			}}
+			onError={() => setFailed(true)}
+		/>
+	)
+}
+
 function InternalContentLink({
 	url,
 	title,
diff --git a/apps/web/tests/admin-blog-editor.test.tsx b/apps/web/tests/admin-blog-editor.test.tsx
index 0f9487c..8dff0b0 100644
--- a/apps/web/tests/admin-blog-editor.test.tsx
+++ b/apps/web/tests/admin-blog-editor.test.tsx
@@ -16,6 +16,7 @@ import {
 	render,
 	screen,
 	waitFor,
+	within,
 } from '@testing-library/react'
 import { useImperativeHandle, useRef } from 'react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vite-plus/test'
@@ -93,6 +94,43 @@ async function mount(existing?: typeof initial) {
 	return router
 }
 describe('admin blog editor', () => {
+	it('previews link favicons and saves the original Markdown after changing a failed destination', async () => {
+		await mount({
+			...initial,
+			content: '[Docs](https://example.com/guide) [About](/about)',
+		})
+		fireEvent.click(screen.getByRole('button', { name: 'Preview content' }))
+		const preview = screen.getByRole('region', { name: 'Markdown preview' })
+		const docs = within(preview).getByRole('link', { name: /Docs/ })
+		expect(docs.querySelector('img')?.getAttribute('src')).toContain(
+			'domain=example.com'
+		)
+		expect(
+			within(preview)
+				.getByRole('link', { name: 'About' })
+				.querySelector('img')
+				?.getAttribute('src')
+		).toBe('/favicon.svg')
+		fireEvent.error(docs.querySelector('img')!)
+		expect(docs.querySelector('img')).toBeNull()
+
+		const content = '[Docs](https://docs.example.org/start) [About](/about)'
+		fireEvent.change(screen.getByLabelText('Markdown editor'), {
+			target: { value: content },
+		})
+		expect(
+			within(preview)
+				.getByRole('link', { name: /Docs/ })
+				.querySelector('img')
+				?.getAttribute('src')
+		).toContain('domain=docs.example.org')
+		fireEvent.click(screen.getByRole('button', { name: 'Save draft' }))
+		await screen.findByText('Blog directory')
+		expect(
+			rpc.mock.calls.find(([path]) => path.at(-1) === 'update')?.[1]
+		).toMatchObject({ body: { content } })
+	})
+
 	it('confirms deletion with the displayed revision and refreshes the admin list', async () => {
 		let posts = [initial]
 		rpc.mockImplementation((path) => {
diff --git a/apps/web/tests/public-content.test.tsx b/apps/web/tests/public-content.test.tsx
index 52fb3b7..f9b0b65 100644
--- a/apps/web/tests/public-content.test.tsx
+++ b/apps/web/tests/public-content.test.tsx
@@ -91,6 +91,76 @@ async function documentRouter(
 }
 
 describe('public Markdown rendering', () => {
+	it('decorates ordinary web links without changing their names or destinations', async () => {
+		const router = await documentRouter(
+			'[internal](/about?ref=docs#team) [same origin](https://altstack.test/blogs) [relative](./guide) [external](https://docs.example.com:8443/guide?ref=docs#setup) [protocol relative](//docs.example.com/other)'
+		)
+		render(<RouterProvider router={router} />)
+		for (const name of ['internal', 'same origin', 'relative']) {
+			const link = screen.getByRole('link', { name })
+			const icon = link.querySelector('img')!
+			expect(icon.getAttribute('src')).toBe('/favicon.svg')
+			expect(icon.getAttribute('alt')).toBe('')
+			expect(icon.getAttribute('aria-hidden')).toBe('true')
+			expect(icon.getAttribute('width')).toBe('16')
+			expect(icon.getAttribute('height')).toBe('16')
+			expect(link.firstElementChild).toBe(icon)
+		}
+		for (const name of ['external', 'protocol relative']) {
+			const link = screen.getByRole('link', {
+				name: new RegExp(`^${name}\\s*\\(opens in a new tab\\)$`),
+			})
+			const icon = link.querySelector('img')!
+			const source = new URL(icon.src)
+			expect(source.origin).toBe('https://www.google.com')
+			expect([...source.searchParams]).toEqual([
+				['domain', 'docs.example.com'],
+				['sz', '32'],
+			])
+			expect(icon.getAttribute('referrerpolicy')).toBe('no-referrer')
+			expect(link.firstElementChild).toBe(icon)
+			expect(link.getAttribute('target')).toBe('_blank')
+			expect(link.getAttribute('rel')).toBe('noopener noreferrer')
+		}
+		expect(
+			screen.getByRole('link', { name: /external/ }).getAttribute('href')
+		).toBe('https://docs.example.com:8443/guide?ref=docs#setup')
+		fireEvent.click(screen.getByRole('link', { name: 'internal' }))
+		await waitFor(() => expect(router.state.location.pathname).toBe('/about'))
+		expect(router.state.location.search).toEqual({ ref: 'docs' })
+		expect(router.state.location.hash).toBe('team')
+	})
+
+	it('leaves anchors, email, telephone and image links undecorated', async () => {
+		const router = await documentRouter(
+			'[section](#section) [email](mailto:hello@example.com) [phone](tel:+123456789)\n\n[![internal badge](https://img.test/internal.svg)](/about)\n\n[![external badge](https://img.test/external.svg)](https://example.com)\n\n[text ![mixed badge](https://img.test/mixed.svg)](https://example.com/mixed)'
+		)
+		render(<RouterProvider router={router} />)
+		for (const name of ['section', 'email']) {
+			expect(screen.getByRole('link', { name }).querySelector('img')).toBeNull()
+		}
+		expect(
+			screen.getByText('phone').closest('a')?.querySelector('img')
+		).toBeNull()
+		for (const name of ['internal badge', 'external badge', 'mixed badge']) {
+			const badge = screen.getByAltText(name)
+			expect(badge.closest('a')?.querySelectorAll('img')).toHaveLength(1)
+		}
+	})
+
+	it.each(['/about', 'https://example.com'])(
+		'falls back to an ordinary link when its favicon fails: %s',
+		async (href) => {
+			const router = await documentRouter(`[destination](${href})`)
+			render(<RouterProvider router={router} />)
+			const link = screen.getByRole('link', { name: /destination/ })
+			fireEvent.error(link.querySelector('img')!)
+			expect(link.querySelector('img')).toBeNull()
+			expect(link.textContent).toContain('destination')
+			expect(link.getAttribute('href')).toBe(href)
+		}
+	)
+
 	it('renders collection badges, opens their preview on focus and navigates to the collection', async () => {
 		const prepared = emptyPublicContent()
 		prepared.collectionsBySlug.frontend = {
@@ -112,6 +182,7 @@ describe('public Markdown rendering', () => {
 			'/collections/frontend?ref=docs#members'
 		)
 		expect(chips[0].getAttribute('data-collection-mention')).toBe('frontend')
+		expect(chips[0].querySelector('img')).toBeNull()
 		expect(
 			screen
 				.getByAltText('badge')
@@ -186,6 +257,7 @@ describe('public Markdown rendering', () => {
 		expect(chips[0].querySelector('img')?.getAttribute('src')).toBe(
 			'https://storage.test/projects/supabase/logo.png'
 		)
+		expect(chips[0].querySelectorAll('img')).toHaveLength(1)
 		fireEvent.error(chips[0].querySelector('img')!)
 		expect(chips[0].querySelector('img')).toBeNull()
 		expect(chips[0].textContent).toContain('S')
@@ -327,7 +399,7 @@ describe('public Markdown rendering', () => {
 			},
 		}
 		const router = await documentRouter(
-			'```js\nconst x = 1\n```\n\n[db](/supabase) [tools](/collections/frontend)',
+			'```js\nconst x = 1\n```\n\n[db](/supabase) [tools](/collections/frontend) [about](/about) [docs](https://docs.example.com/start)',
 			prepared
 		)
 		const html = renderToString(<RouterProvider router={router} />)
@@ -335,6 +407,10 @@ describe('public Markdown rendering', () => {
 		expect(html).toContain('--code-dark-color:#abcdef')
 		expect(html).toContain('data-project-mention="supabase"')
 		expect(html).toContain('data-collection-mention="frontend"')
+		expect(html).toContain('src="/favicon.svg"')
+		expect(html).toContain(
+			'src="https://www.google.com/s2/favicons?domain=docs.example.com&amp;sz=32"'
+		)
 		const container = document.createElement('div')
 		container.innerHTML = html
 		const parsedHtml = container.innerHTML

From 66730bd59bc556594565f5af383ed370d9cf99ea Mon Sep 17 00:00:00 2001
From: mrboxs <rizkywanda200155@gmail.com>
Date: Mon, 9 Nov 2026 05:29:17 +0700
Subject: [PATCH 02/10] feat(web): add hover transitions to Markdown links

---
 apps/web/src/components/public-content/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/public-content/index.tsx b/apps/web/src/components/public-content/index.tsx
index df1eb1f..f970004 100644
--- a/apps/web/src/components/public-content/index.tsx
+++ b/apps/web/src/components/public-content/index.tsx
@@ -45,7 +45,7 @@ export function PublicContent({
 			aria-label={
 				headingMode === 'article' ? 'Article content' : 'Project documentation'
 			}
-			className="prose max-w-none min-w-0 wrap-anywhere prose-neutral dark:prose-invert"
+			className="prose max-w-none min-w-0 wrap-anywhere prose-neutral dark:prose-invert prose-a:decoration-transparent prose-a:transition-all prose-a:duration-300 prose-a:ease-in-out prose-a:hover:decoration-current prose-a:motion-reduce:transition-none"
 		>
 			<Markdown
 				remarkPlugins={

From 791d475e9615b8dccc68aa4842fb276404a74c3c Mon Sep 17 00:00:00 2001
From: mrboxs <rizkywanda200155@gmail.com>
Date: Mon, 9 Nov 2026 17:50:38 +0700
Subject: [PATCH 03/10] fix(ui): keep select popups inside their container

- Add an optional portal container to SelectContent
- Cover block style selection and saving in the About editor
---
 apps/web/tests/browser/about.browser.tsx | 47 ++++++++++++++++++++++++
 packages/ui/src/components/select.tsx    |  6 ++-
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/apps/web/tests/browser/about.browser.tsx b/apps/web/tests/browser/about.browser.tsx
index c4698ae..cd2afd9 100644
--- a/apps/web/tests/browser/about.browser.tsx
+++ b/apps/web/tests/browser/about.browser.tsx
@@ -172,4 +172,51 @@ describe('About page in Chromium', () => {
 		await screen.findByRole('heading', { name: defaultAboutPage.title })
 		expect(screen.queryByRole('alertdialog')).toBeNull()
 	})
+	it.each(['pointer', 'keyboard'] as const)(
+		'opens the block style menu for a partial selection with %s and saves the heading',
+		async (interaction) => {
+			await page.viewport(1440, 900)
+			await mount(true, interaction === 'pointer' ? 'light' : 'dark')
+			const editor = document.querySelector<HTMLElement>(
+				'.bn-editor[contenteditable="true"]'
+			)!
+			editor.focus()
+			await userEvent.keyboard(
+				'{Control>}{End}{/Control}{Shift>}{ArrowLeft}{ArrowLeft}{ArrowLeft}{/Shift}'
+			)
+			expect(window.getSelection()?.toString()).toMatch(/^\w{1,3}\.$/)
+			const blockStyle = page.getByRole('toolbar').getByRole('combobox')
+			if (interaction === 'pointer') {
+				await blockStyle.click()
+			} else {
+				blockStyle.element().focus()
+				await userEvent.keyboard('{ArrowDown}')
+			}
+			const list = page.getByRole('listbox')
+			await expect.element(list).toBeVisible()
+			expect(editor.closest('.bn-container')?.contains(list.element())).toBe(
+				true
+			)
+			if (interaction === 'pointer') {
+				await page
+					.getByRole('option', { name: 'Heading 2', exact: true })
+					.click()
+			} else {
+				await userEvent.keyboard('{Home}{ArrowDown}{ArrowDown}{Enter}')
+			}
+			await waitFor(() => {
+				expect(editor.querySelector('h2')?.textContent).toBe('Our directory')
+				expect(editor.querySelectorAll('h2')).toHaveLength(2)
+				expect(editor.querySelectorAll('h2')[1]?.textContent).toBe(
+					'Find useful software.'
+				)
+			})
+			await page.getByRole('button', { name: 'Save changes' }).click()
+			await screen.findByText('About us saved. Your changes are live.')
+			const request = z
+				.object({ body: aboutUpdateSchema })
+				.parse(rpc.mock.calls[0]?.[1])
+			expect(request.body.content).toContain('## Find useful software.')
+		}
+	)
 })
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index 53d2ea1..12a64f5 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -68,14 +68,16 @@ function SelectContent({
 	align = 'center',
 	alignOffset = 0,
 	alignItemWithTrigger = true,
+	container,
 	...props
 }: SelectPrimitive.Popup.Props &
 	Pick<
 		SelectPrimitive.Positioner.Props,
 		'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'
-	>) {
+	> &
+	Pick<SelectPrimitive.Portal.Props, 'container'>) {
 	return (
-		<SelectPrimitive.Portal>
+		<SelectPrimitive.Portal container={container}>
 			<SelectPrimitive.Positioner
 				side={side}
 				sideOffset={sideOffset}

From 396cdd203031081027c896295886cc53a24f0902 Mon Sep 17 00:00:00 2001
From: mrboxs <rizkywanda200155@gmail.com>
Date: Mon, 9 Nov 2026 17:58:10 +0700
Subject: [PATCH 04/10] feat(web): add PowerShell syntax highlighting

- Bundle PowerShell and its `ps1` alias on demand
- Verify editor and public Markdown highlighting
---
 apps/web/src/utils/shiki.bundle.ts            |  5 +++
 apps/web/tests/public-content-prepare.test.ts | 41 +++++++++++++++++++
 2 files changed, 46 insertions(+)

diff --git a/apps/web/src/utils/shiki.bundle.ts b/apps/web/src/utils/shiki.bundle.ts
index 756bceb..5a96748 100644
--- a/apps/web/src/utils/shiki.bundle.ts
+++ b/apps/web/src/utils/shiki.bundle.ts
@@ -64,6 +64,8 @@ type BundledLanguage =
 	| 'php'
 	| 'plsql'
 	| 'postcss'
+	| 'powershell'
+	| 'ps1'
 	| 'prisma'
 	| 'python'
 	| 'py'
@@ -163,6 +165,7 @@ export const SHIKI_BUNDLED_LANGUAGE_GROUPS = [
 	{ id: 'php', name: 'PHP' },
 	{ id: 'plsql', name: 'PL/SQL' },
 	{ id: 'postcss', name: 'PostCSS' },
+	{ id: 'powershell', name: 'PowerShell', aliases: ['ps1'] },
 	{ id: 'prisma', name: 'Prisma' },
 	{ id: 'python', name: 'Python', aliases: ['py'] },
 	{ id: 'ruby', name: 'Ruby', aliases: ['rb'] },
@@ -270,6 +273,8 @@ const bundledLanguages = {
 	php: () => import('@shikijs/langs/php'),
 	plsql: () => import('@shikijs/langs/plsql'),
 	postcss: () => import('@shikijs/langs/postcss'),
+	powershell: () => import('@shikijs/langs/powershell'),
+	ps1: () => import('@shikijs/langs/powershell'),
 	prisma: () => import('@shikijs/langs/prisma'),
 	python: () => import('@shikijs/langs/python'),
 	py: () => import('@shikijs/langs/python'),
diff --git a/apps/web/tests/public-content-prepare.test.ts b/apps/web/tests/public-content-prepare.test.ts
index f4d5dcd..047c8fe 100644
--- a/apps/web/tests/public-content-prepare.test.ts
+++ b/apps/web/tests/public-content-prepare.test.ts
@@ -150,6 +150,47 @@ describe('public Markdown preparation', () => {
 		expect(result.projectsBySlug).toEqual({})
 	})
 
+	it.each(['powershell', 'ps1'] as const)(
+		'loads %s on demand for editor and public highlighting',
+		async (language) => {
+			const code = '$name = "AltStack"\nWrite-Host $name -ForegroundColor Green'
+			const highlighter = await shiki.createHighlighter({
+				themes: [shiki.CODE_BLOCK_SHIKI_THEME],
+				langs: [],
+			})
+			try {
+				await highlighter.loadLanguage(language)
+				const { tokens } = highlighter.codeToTokens(code, {
+					lang: language,
+					theme: shiki.CODE_BLOCK_SHIKI_THEME,
+				})
+				expect(
+					new Set(tokens.flat().map((token) => token.color)).size
+				).toBeGreaterThan(1)
+			} finally {
+				highlighter.dispose()
+			}
+
+			const result = await prepareContent({
+				slug: 'source',
+				content: `\`\`\`${language}\n${code}\n\`\`\``,
+			})
+			const block = result.codeBlocks[0]
+			expect(block.language).toBe(language)
+			expect(
+				block.tokens
+					?.map((line) => line.map((token) => token.content).join(''))
+					.join('\n')
+			).toBe(code)
+			expect(
+				new Set(block.tokens?.flat().map((token) => token.light.color)).size
+			).toBeGreaterThan(1)
+			expect(
+				new Set(block.tokens?.flat().map((token) => token.dark.color)).size
+			).toBeGreaterThan(1)
+		}
+	)
+
 	it('falls back per block when the highlighter fails', async () => {
 		vi.spyOn(shiki, 'getSingletonHighlighter').mockRejectedValueOnce(
 			new Error('grammar unavailable')

From d261eafd2312e036c5bd0731ff12e7a5a4065d9a Mon Sep 17 00:00:00 2001
From: mrboxs <rizkywanda200155@gmail.com>
Date: Mon, 9 Nov 2026 18:11:58 +0700
Subject: [PATCH 05/10] fix(web): align Markdown code themes with app colors

---
 .../features/public-content/prepare.server.ts    | 15 ++++++++++-----
 apps/web/tests/public-content-prepare.test.ts    | 16 ++++++++++++++--
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/features/public-content/prepare.server.ts b/apps/web/src/features/public-content/prepare.server.ts
index a6c8bf0..5dfc557 100644
--- a/apps/web/src/features/public-content/prepare.server.ts
+++ b/apps/web/src/features/public-content/prepare.server.ts
@@ -15,10 +15,15 @@ import {
 	emptyPublicContent,
 } from '#/features/public-content/model'
 import type { PreparedCodeBlock } from '#/features/public-content/model'
-import { bundledLanguages, getSingletonHighlighter } from '#/utils/shiki.bundle'
+import {
+	CODE_BLOCK_SHIKI_THEME,
+	bundledLanguages,
+	getSingletonHighlighter,
+} from '#/utils/shiki.bundle'
 import type { BundledLanguage } from '#/utils/shiki.bundle'
 
 const parser = unified().use(remarkParse).use(remarkGfm)
+const codeThemes = { light: 'one-light', dark: CODE_BLOCK_SHIKI_THEME } as const
 
 function isBundledLanguage(language: string): language is BundledLanguage {
 	return Object.hasOwn(bundledLanguages, language)
@@ -30,12 +35,12 @@ async function highlight(node: Code): Promise<PreparedCodeBlock> {
 	if (!isBundledLanguage(language)) return block
 	try {
 		const highlighter = await getSingletonHighlighter({
-			themes: ['github-light', 'github-dark'],
+			themes: Object.values(codeThemes),
 			langs: [language],
 		})
 		const tokens = highlighter.codeToTokensWithThemes(node.value, {
 			lang: language,
-			themes: { light: 'github-light', dark: 'github-dark' },
+			themes: codeThemes,
 		})
 		block.tokens = tokens.map((line) =>
 			line.map((token) => {
@@ -46,8 +51,8 @@ async function highlight(node: Code): Promise<PreparedCodeBlock> {
 				}
 			})
 		)
-		const light = highlighter.getTheme('github-light')
-		const dark = highlighter.getTheme('github-dark')
+		const light = highlighter.getTheme(codeThemes.light)
+		const dark = highlighter.getTheme(codeThemes.dark)
 		block.colors = {
 			light: { color: light.fg, bgColor: light.bg },
 			dark: { color: dark.fg, bgColor: dark.bg },
diff --git a/apps/web/tests/public-content-prepare.test.ts b/apps/web/tests/public-content-prepare.test.ts
index 047c8fe..84ec7b8 100644
--- a/apps/web/tests/public-content-prepare.test.ts
+++ b/apps/web/tests/public-content-prepare.test.ts
@@ -115,7 +115,7 @@ describe('public Markdown preparation', () => {
 	})
 
 	it('highlights with both themes and preserves code including tabs and trailing blank lines', async () => {
-		const code = '\tconst value = "<script>";  \n\n'
+		const code = '\tconst value = render("<script>");  \n\n'
 		const content = `Intro\n\n\`\`\`ts\n${code}\n\`\`\``
 		const result = await prepareContent({ slug: 'source', content })
 		const block = result.codeBlocks[content.indexOf('```')]
@@ -130,7 +130,19 @@ describe('public Markdown preparation', () => {
 				?.flat()
 				.some((token) => token.light.color !== token.dark.color)
 		).toBe(true)
-		expect(block.colors?.light.bgColor).not.toBe(block.colors?.dark.bgColor)
+		expect(block.colors).toEqual({
+			light: { color: '#383A42', bgColor: '#FAFAFA' },
+			dark: { color: '#abb2bf', bgColor: '#282c34' },
+		})
+		expect(
+			block.tokens
+				?.flat()
+				.some(
+					(token) =>
+						token.content === 'render' &&
+						((token.dark.fontStyle ?? 0) & 2) !== 0
+				)
+		).toBe(true)
 		expect(JSON.parse(JSON.stringify(result))).toEqual(result)
 	})
 

From d8192cddffbe56cfff0a6c5bdff538fbfb97e968 Mon Sep 17 00:00:00 2001
From: mrboxs <rizkywanda200155@gmail.com>
Date: Mon, 9 Nov 2026 18:18:25 +0700
Subject: [PATCH 06/10] fix(web): align light code theme with app colors

---
 .../features/public-content/prepare.server.ts |  6 ++-
 apps/web/src/utils/shiki.bundle.ts            | 42 +++++++++++++------
 apps/web/tests/public-content-prepare.test.ts |  4 +-
 3 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/features/public-content/prepare.server.ts b/apps/web/src/features/public-content/prepare.server.ts
index 5dfc557..335cc39 100644
--- a/apps/web/src/features/public-content/prepare.server.ts
+++ b/apps/web/src/features/public-content/prepare.server.ts
@@ -16,6 +16,7 @@ import {
 } from '#/features/public-content/model'
 import type { PreparedCodeBlock } from '#/features/public-content/model'
 import {
+	CODE_BLOCK_SHIKI_LIGHT_THEME,
 	CODE_BLOCK_SHIKI_THEME,
 	bundledLanguages,
 	getSingletonHighlighter,
@@ -23,7 +24,10 @@ import {
 import type { BundledLanguage } from '#/utils/shiki.bundle'
 
 const parser = unified().use(remarkParse).use(remarkGfm)
-const codeThemes = { light: 'one-light', dark: CODE_BLOCK_SHIKI_THEME } as const
+const codeThemes = {
+	light: CODE_BLOCK_SHIKI_LIGHT_THEME,
+	dark: CODE_BLOCK_SHIKI_THEME,
+} as const
 
 function isBundledLanguage(language: string): language is BundledLanguage {
 	return Object.hasOwn(bundledLanguages, language)
diff --git a/apps/web/src/utils/shiki.bundle.ts b/apps/web/src/utils/shiki.bundle.ts
index 5a96748..05e2f51 100644
--- a/apps/web/src/utils/shiki.bundle.ts
+++ b/apps/web/src/utils/shiki.bundle.ts
@@ -4,6 +4,7 @@ import {
 } from '@shikijs/core'
 import { createJavaScriptRegexEngine } from '@shikijs/engine-javascript'
 import oneDarkProTheme from '@shikijs/themes/one-dark-pro'
+import oneLightTheme from '@shikijs/themes/one-light'
 /* Generate by @shikijs/codegen */
 import type {
 	DynamicImportLanguageRegistration,
@@ -14,6 +15,7 @@ import type {
 } from '@shikijs/types'
 
 export const CODE_BLOCK_SHIKI_THEME = 'altstack-code-dark'
+export const CODE_BLOCK_SHIKI_LIGHT_THEME = 'altstack-code-light'
 
 type BundledLanguage =
 	| 'angular-html'
@@ -101,6 +103,7 @@ type BundledTheme =
 	| 'github-light'
 	| 'github-dark'
 	| typeof CODE_BLOCK_SHIKI_THEME
+	| typeof CODE_BLOCK_SHIKI_LIGHT_THEME
 type Highlighter = HighlighterGeneric<BundledLanguage, BundledTheme>
 
 const CODE_BLOCK_BOLD_SCOPES = [
@@ -210,19 +213,30 @@ export type ShikiBundledLanguageCoverage = AssertNever<
 	Exclude<BundledLanguage, ShikiLanguageGroupAlias>
 >
 
-const codeBlockShikiTheme = Object.freeze({
-	...oneDarkProTheme,
-	name: CODE_BLOCK_SHIKI_THEME,
-	tokenColors: [
-		...(oneDarkProTheme.tokenColors ?? []),
-		{
-			scope: [...CODE_BLOCK_BOLD_SCOPES],
-			settings: {
-				fontStyle: 'bold',
+function withCodeBlockBoldTokens(theme: ThemeRegistration, name: string) {
+	return Object.freeze({
+		...theme,
+		name,
+		tokenColors: [
+			...(theme.tokenColors ?? []),
+			{
+				scope: [...CODE_BLOCK_BOLD_SCOPES],
+				settings: {
+					fontStyle: 'bold',
+				},
 			},
-		},
-	],
-}) satisfies ThemeRegistration
+		],
+	}) satisfies ThemeRegistration
+}
+
+const codeBlockShikiTheme = withCodeBlockBoldTokens(
+	oneDarkProTheme,
+	CODE_BLOCK_SHIKI_THEME
+)
+const codeBlockShikiLightTheme = withCodeBlockBoldTokens(
+	oneLightTheme,
+	CODE_BLOCK_SHIKI_LIGHT_THEME
+)
 
 const bundledLanguages = {
 	'angular-html': () => import('@shikijs/langs/angular-html'),
@@ -315,6 +329,10 @@ const bundledThemes = {
 		Promise.resolve({
 			default: codeBlockShikiTheme,
 		}),
+	[CODE_BLOCK_SHIKI_LIGHT_THEME]: () =>
+		Promise.resolve({
+			default: codeBlockShikiLightTheme,
+		}),
 } as Record<BundledTheme, DynamicImportThemeRegistration>
 
 function getFontStyleHtmlStyle(token: ThemedToken) {
diff --git a/apps/web/tests/public-content-prepare.test.ts b/apps/web/tests/public-content-prepare.test.ts
index 84ec7b8..972eb90 100644
--- a/apps/web/tests/public-content-prepare.test.ts
+++ b/apps/web/tests/public-content-prepare.test.ts
@@ -140,7 +140,9 @@ describe('public Markdown preparation', () => {
 				.some(
 					(token) =>
 						token.content === 'render' &&
-						((token.dark.fontStyle ?? 0) & 2) !== 0
+						[token.light, token.dark].every(
+							(style) => ((style.fontStyle ?? 0) & 2) !== 0
+						)
 				)
 		).toBe(true)
 		expect(JSON.parse(JSON.stringify(result))).toEqual(result)

From fb74f6d418291dfbefd37a6ce7eeef7ecb4c4d51 Mon Sep 17 00:00:00 2001
From: mrboxs <rizkywanda200155@gmail.com>
Date: Mon, 9 Nov 2026 18:24:56 +0700
Subject: [PATCH 07/10] fix(web): remove code block background fills

---
 apps/web/src/components/public-content/code-block.tsx | 2 +-
 apps/web/src/styles.css                               | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/public-content/code-block.tsx b/apps/web/src/components/public-content/code-block.tsx
index d034275..d9754c2 100644
--- a/apps/web/src/components/public-content/code-block.tsx
+++ b/apps/web/src/components/public-content/code-block.tsx
@@ -50,7 +50,7 @@ export function PublicCodeBlock({ block }: { block: PreparedCodeBlock }) {
 			className="not-prose my-6 overflow-hidden rounded-lg border border-border"
 			data-code-block
 		>
-			<div className="flex items-center justify-between gap-3 border-b border-border bg-muted px-3 py-2">
+			<div className="flex items-center justify-between gap-3 border-b border-border bg-transparent px-3 py-2">
 				<span className="truncate font-mono text-xs text-muted-foreground">
 					{block.language}
 				</span>
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 43d6ae3..ff0caab 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -6,7 +6,7 @@
 .public-code,
 .public-code-token {
 	color: var(--code-light-color, var(--foreground));
-	background-color: var(--code-light-bg, transparent);
+	background-color: transparent;
 	font-style: var(--code-light-style, normal);
 	font-weight: var(--code-light-weight, 400);
 	text-decoration: var(--code-light-decoration, none);
@@ -15,7 +15,6 @@
 .dark .public-code,
 .dark .public-code-token {
 	color: var(--code-dark-color, var(--foreground));
-	background-color: var(--code-dark-bg, transparent);
 	font-style: var(--code-dark-style, normal);
 	font-weight: var(--code-dark-weight, 400);
 	text-decoration: var(--code-dark-decoration, none);

From 9e9b641fa6beb29322d240f09cc5185c96b486c1 Mon Sep 17 00:00:00 2001
From: mrboxs <rizkywanda200155@gmail.com>
Date: Mon, 9 Nov 2026 18:52:52 +0700
Subject: [PATCH 08/10] feat(web): add word wrap controls to code blocks

- Add a toggle to wrap code and icon-only copy feedback
---
 .../components/public-content/code-block.tsx  | 82 ++++++++++++++-----
 apps/web/tests/public-content.test.tsx        |  5 +-
 2 files changed, 65 insertions(+), 22 deletions(-)

diff --git a/apps/web/src/components/public-content/code-block.tsx b/apps/web/src/components/public-content/code-block.tsx
index d9754c2..16d59eb 100644
--- a/apps/web/src/components/public-content/code-block.tsx
+++ b/apps/web/src/components/public-content/code-block.tsx
@@ -1,8 +1,15 @@
-import { IconCheck, IconCopy } from '@tabler/icons-react'
+import { IconCheck, IconCopy, IconTextWrap, IconX } from '@tabler/icons-react'
+import { cn } from 'cn'
 import { Fragment, useEffect, useRef, useState } from 'react'
 import type { CSSProperties } from 'react'
 
 import { Button } from '@altstack/ui/components/button'
+import { Toggle } from '@altstack/ui/components/toggle'
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from '@altstack/ui/components/tooltip'
 
 import type {
 	CodeTokenStyle,
@@ -26,6 +33,7 @@ function themeStyles(light: CodeTokenStyle, dark: CodeTokenStyle) {
 }
 
 export function PublicCodeBlock({ block }: { block: PreparedCodeBlock }) {
+	const [wordWrap, setWordWrap] = useState(false)
 	const [copyState, setCopyState] = useState<'idle' | 'copied' | 'failed'>(
 		'idle'
 	)
@@ -54,24 +62,55 @@ export function PublicCodeBlock({ block }: { block: PreparedCodeBlock }) {
 				<span className="truncate font-mono text-xs text-muted-foreground">
 					{block.language}
 				</span>
-				<Button
-					type="button"
-					variant="ghost"
-					size="xs"
-					onClick={copyCode}
-					aria-label="Copy code"
-				>
-					{copyState === 'copied' ? (
-						<IconCheck data-icon="inline-start" />
-					) : (
-						<IconCopy data-icon="inline-start" />
-					)}
-					{copyState === 'copied'
-						? 'Copied'
-						: copyState === 'failed'
-							? 'Copy failed'
-							: 'Copy'}
-				</Button>
+				<div className="flex shrink-0 items-center gap-1">
+					<Tooltip>
+						<TooltipTrigger
+							render={
+								<Toggle
+									size="sm"
+									className="size-7 p-0"
+									pressed={wordWrap}
+									onPressedChange={setWordWrap}
+									aria-label="Word wrap"
+								/>
+							}
+						>
+							<IconTextWrap aria-hidden="true" />
+						</TooltipTrigger>
+						<TooltipContent>
+							{wordWrap ? 'Disable word wrap' : 'Enable word wrap'}
+						</TooltipContent>
+					</Tooltip>
+					<Tooltip>
+						<TooltipTrigger
+							render={
+								<Button
+									type="button"
+									variant="ghost"
+									size="sm"
+									className="size-7 p-0"
+									onClick={copyCode}
+									aria-label="Copy code"
+								/>
+							}
+						>
+							{copyState === 'copied' ? (
+								<IconCheck aria-hidden="true" />
+							) : copyState === 'failed' ? (
+								<IconX aria-hidden="true" />
+							) : (
+								<IconCopy aria-hidden="true" />
+							)}
+						</TooltipTrigger>
+						<TooltipContent>
+							{copyState === 'copied'
+								? 'Copied'
+								: copyState === 'failed'
+									? 'Copy failed'
+									: 'Copy code'}
+						</TooltipContent>
+					</Tooltip>
+				</div>
 				<output className="sr-only">
 					{copyState === 'copied'
 						? 'Code copied to clipboard.'
@@ -81,7 +120,10 @@ export function PublicCodeBlock({ block }: { block: PreparedCodeBlock }) {
 				</output>
 			</div>
 			<pre
-				className="public-code m-0 overflow-x-auto p-4 text-sm leading-6"
+				className={cn(
+					'public-code m-0 overflow-x-auto p-4 text-sm leading-6',
+					wordWrap ? 'wrap-anywhere whitespace-pre-wrap' : 'whitespace-pre'
+				)}
 				style={
 					block.colors
 						? themeStyles(block.colors.light, block.colors.dark)
diff --git a/apps/web/tests/public-content.test.tsx b/apps/web/tests/public-content.test.tsx
index f9b0b65..d3d6857 100644
--- a/apps/web/tests/public-content.test.tsx
+++ b/apps/web/tests/public-content.test.tsx
@@ -349,14 +349,15 @@ describe('public Markdown rendering', () => {
 		const router = await documentRouter(`\`\`\`unknown\n${code}\n\`\`\``)
 		render(<RouterProvider router={router} />)
 		expect(screen.getByLabelText('unknown code').textContent).toBe(code)
+		fireEvent.click(screen.getByRole('button', { name: 'Word wrap' }))
 		fireEvent.click(screen.getByRole('button', { name: 'Copy code' }))
-		await screen.findByText('Copied')
+		await screen.findByText('Code copied to clipboard.')
 		expect(writeText).toHaveBeenCalledExactlyOnceWith(code)
 		writeText.mockRejectedValueOnce(new Error('denied'))
 		fireEvent.click(screen.getByRole('button', { name: 'Copy code' }))
 		await screen.findByText('Unable to copy code. Select and copy it manually.')
 		expect(screen.getByRole('button', { name: 'Copy code' }).textContent).toBe(
-			'Copy failed'
+			''
 		)
 	})
 

From 74eed798f8091757c5dc881827e008527c20a5c5 Mon Sep 17 00:00:00 2001
From: mrboxs <rizkywanda200155@gmail.com>
Date: Mon, 9 Nov 2026 19:02:02 +0700
Subject: [PATCH 09/10] docs: prepare rollout notes since v1.1.0

---
 CHANGELOG.md         | 32 ++++++++++++++++++++++++++++++++
 docs/architecture.md | 23 +++++++++++++++++++----
 docs/prd.md          |  9 +++++++++
 3 files changed, 60 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7ea308e..bf79c32 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,38 @@ have not been reconstructed. See [release note guidance](CONTRIBUTING.md#documen
 
 ## [Unreleased]
 
+### Added
+
+- Favicons beside ordinary internal and external Markdown links in public content
+  and admin previews, with a text-only fallback when an icon cannot load.
+- PowerShell syntax highlighting, including the `ps1` alias, in the shared editor
+  language picker and public Markdown renderer.
+- An independent word-wrap toggle on every public code block, including short
+  blocks. Wrapping changes presentation without changing copied code.
+
+### Changed
+
+- Public Markdown links reveal their underline on hover with a 300 ms transition.
+  Project and collection mentions retain their existing badges and icons.
+- Public code blocks use custom One Light and One Dark Pro syntax palettes with
+  matching bold-token rules, transparent bodies and headers, and equally sized
+  icon-only copy and wrap controls with hover and keyboard-focus tooltips.
+- Update oRPC to `2.0.0-beta.49` and tsrs to `0.23.0-ts7.1.0-beta`.
+
+### Fixed
+
+- Keep BlockNote's block-style select inside its editor portal so selecting part
+  of a paragraph and opening the toolbar menu does not dismiss it. Heading
+  changes remain available through the pointer and keyboard.
+- Generate a name-based avatar when an account has no image.
+
+### Upgrade notes
+
+- Deploy matching API and web revisions. Changes since `v1.1.0` add no database
+  migrations or environment variables; existing Markdown needs no migration.
+- External-link favicons use Google S2 with only the destination hostname and no
+  referrer. If that service is unavailable, links remain usable without icons.
+
 ## [1.1.0] - 2026-11-05
 
 ### Added
diff --git a/docs/architecture.md b/docs/architecture.md
index 6f11db5..1f83a10 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -147,10 +147,25 @@ do not replace API authorization.
 Markdown rendering supports GFM, project mentions, and server-prepared highlighted
 code through [PublicContent](../apps/web/src/components/public-content/index.tsx).
 Public blog, collection, and About bodies use that renderer with raw HTML disabled;
-BlockNote is used for admin authoring. README import normalizes repository-relative links and drops unsupported
-unsafe markup. Storage uploads start as temporary objects and are validated and
-promoted before final keys are persisted; member grants bind uploads to account
-and project.
+BlockNote is used for admin authoring. Ordinary web links receive favicons at
+render time without changing stored Markdown. Internal links use the local
+favicon; external icons use Google S2 with only the destination hostname and
+`no-referrer`. Icon failures leave the text link intact. Project and collection
+mentions keep their own icons; anchors, email/telephone targets, and image links
+do not receive favicons.
+
+The shared Shiki bundle supplies PowerShell and its `ps1` alias to both editor and
+public code blocks. Public blocks receive custom One Light and One Dark Pro token
+palettes during server preparation, with the same bold-token scopes in both.
+CSS switches palettes with the site theme while keeping code backgrounds
+transparent. Per-block word wrapping is local presentation state; the copy action
+always writes the original source. Tooltip-backed copy and wrap controls retain
+accessible names. The shared Select forwards its portal container so BlockNote's
+formatting menu stays inside the editor UI when focus leaves the selected text.
+
+README import normalizes repository-relative links and drops unsupported unsafe
+markup. Storage uploads start as temporary objects and are validated and promoted
+before final keys are persisted; member grants bind uploads to account and project.
 
 The [SEO feature](../apps/web/src/features/seo) builds canonical URLs from public
 configuration, serves sitemap/robots routes, and renders social images with local
diff --git a/docs/prd.md b/docs/prd.md
index e7de5d2..a4ce8ba 100644
--- a/docs/prd.md
+++ b/docs/prd.md
@@ -319,6 +319,15 @@ Both use the existing public Markdown renderer with raw HTML disabled. BlockNote
 is the admin authoring interface, not the public renderer. About has canonical
 metadata and a sitemap entry; it is not a general-purpose CMS or a draft workflow.
 
+Public Markdown and admin previews show favicons beside ordinary web links and
+reveal link underlines on hover. Catalogue mentions retain their badges. Public
+code blocks use transparent headers and bodies with custom One Light/One Dark Pro
+syntax highlighting, including bold tokens and PowerShell support. Every block
+has equally sized icon-only copy and word-wrap controls with tooltips. Wrapping
+is off initially, is independent for each block, and preserves the copied source.
+The editor's Paragraph menu supports changing a partially selected block to a
+heading using the pointer or keyboard.
+
 ### Advertising and guest orders
 
 `/advertise` offers one-month Core (US$15, Tier 1), Plus (US$29, Tier 2), and

From 802064de1709ab733d88fae7dc7799bea492597b Mon Sep 17 00:00:00 2001
From: mrboxs <rizkywanda200155@gmail.com>
Date: Mon, 9 Nov 2026 19:09:19 +0700
Subject: [PATCH 10/10] test(web): stabilize Markdown rollout checks

---
 apps/web/tests/blog.test.tsx                  |  2 +-
 apps/web/tests/public-content-prepare.test.ts | 32 ++++++++++++-------
 apps/web/vitest.config.ts                     |  1 +
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/apps/web/tests/blog.test.tsx b/apps/web/tests/blog.test.tsx
index 35ca6d5..5e55c77 100644
--- a/apps/web/tests/blog.test.tsx
+++ b/apps/web/tests/blog.test.tsx
@@ -87,7 +87,7 @@ describe('blog article HTML and anchors', () => {
 		container.innerHTML = renderToString(<RouterProvider router={router} />)
 		expect(
 			container
-				.querySelector('[data-code-block] button')
+				.querySelector('[data-code-block] button[aria-label="Copy code"]')
 				?.getAttribute('aria-label')
 		).toBe('Copy code')
 		expect(
diff --git a/apps/web/tests/public-content-prepare.test.ts b/apps/web/tests/public-content-prepare.test.ts
index 972eb90..eb153f0 100644
--- a/apps/web/tests/public-content-prepare.test.ts
+++ b/apps/web/tests/public-content-prepare.test.ts
@@ -116,6 +116,20 @@ describe('public Markdown preparation', () => {
 
 	it('highlights with both themes and preserves code including tabs and trailing blank lines', async () => {
 		const code = '\tconst value = render("<script>");  \n\n'
+		const themes = {
+			light: shiki.CODE_BLOCK_SHIKI_LIGHT_THEME,
+			dark: shiki.CODE_BLOCK_SHIKI_THEME,
+		} as const
+		const highlighter = await shiki.getSingletonHighlighter({
+			themes: Object.values(themes),
+			langs: ['ts'],
+		})
+		// Cold regex compilation can exhaust Shiki's 500 ms token budget.
+		highlighter.codeToTokensWithThemes(code, {
+			lang: 'ts',
+			themes,
+			tokenizeTimeLimit: 0,
+		})
 		const content = `Intro\n\n\`\`\`ts\n${code}\n\`\`\``
 		const result = await prepareContent({ slug: 'source', content })
 		const block = result.codeBlocks[content.indexOf('```')]
@@ -134,17 +148,13 @@ describe('public Markdown preparation', () => {
 			light: { color: '#383A42', bgColor: '#FAFAFA' },
 			dark: { color: '#abb2bf', bgColor: '#282c34' },
 		})
-		expect(
-			block.tokens
-				?.flat()
-				.some(
-					(token) =>
-						token.content === 'render' &&
-						[token.light, token.dark].every(
-							(style) => ((style.fontStyle ?? 0) & 2) !== 0
-						)
-				)
-		).toBe(true)
+		const functionToken = block.tokens
+			?.flat()
+			.find((token) => token.content.includes('render'))
+		expect(functionToken).toMatchObject({
+			light: { fontStyle: 2 },
+			dark: { fontStyle: 2 },
+		})
 		expect(JSON.parse(JSON.stringify(result))).toEqual(result)
 	})
 
diff --git a/apps/web/vitest.config.ts b/apps/web/vitest.config.ts
index e100ee3..c499802 100644
--- a/apps/web/vitest.config.ts
+++ b/apps/web/vitest.config.ts
@@ -22,6 +22,7 @@ export default defineConfig({
 				optimizeDeps: {
 					include: [
 						'reicon-react',
+						'@shikijs/langs/powershell',
 						'@altstack/ui > @base-ui/react/accordion',
 						'@altstack/ui > @base-ui/react/avatar',
 						'@altstack/ui > @base-ui/react/checkbox',