mirror of https://github.com/vuejs/vitepress
feat(theme): native rtl support (#5437)
Co-authored-by: Rami Yushuvaev <ramiy@elementor.com> Co-authored-by: ws-rush <wusaby.rush@zohomail.com> Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>pull/5439/head
Divyansh Singh
2 weeks ago
committed by
GitHub
parent
5f69cc9d90
commit
304207c497
@ -0,0 +1,53 @@
|
|||||||
|
---
|
||||||
|
dir: rtl
|
||||||
|
---
|
||||||
|
|
||||||
|
# RTL Page
|
||||||
|
|
||||||
|
با `--flag` اجرا کنید و `useData()` را بخوانید. این یک [پیوند بیرونی](https://vitepress.dev/) است.
|
||||||
|
|
||||||
|
## Section One
|
||||||
|
|
||||||
|
```js:line-numbers
|
||||||
|
const a = 1
|
||||||
|
```
|
||||||
|
|
||||||
|
> A blockquote keeps its bar on the reading side.
|
||||||
|
|
||||||
|
| Column | Value |
|
||||||
|
| ------ | ----- |
|
||||||
|
| a | 1 |
|
||||||
|
|
||||||
|
Filler paragraph one. Filler paragraph one. Filler paragraph one. Filler paragraph one.
|
||||||
|
|
||||||
|
Filler paragraph two. Filler paragraph two. Filler paragraph two. Filler paragraph two.
|
||||||
|
|
||||||
|
Filler paragraph three. Filler paragraph three. Filler paragraph three. Filler paragraph three.
|
||||||
|
|
||||||
|
Filler paragraph four. Filler paragraph four. Filler paragraph four. Filler paragraph four.
|
||||||
|
|
||||||
|
Filler paragraph five. Filler paragraph five. Filler paragraph five. Filler paragraph five.
|
||||||
|
|
||||||
|
Filler paragraph six. Filler paragraph six. Filler paragraph six. Filler paragraph six.
|
||||||
|
|
||||||
|
Filler paragraph seven. Filler paragraph seven. Filler paragraph seven. Filler paragraph seven.
|
||||||
|
|
||||||
|
Filler paragraph eight. Filler paragraph eight. Filler paragraph eight. Filler paragraph eight.
|
||||||
|
|
||||||
|
## Section Two
|
||||||
|
|
||||||
|
Filler paragraph nine. Filler paragraph nine. Filler paragraph nine. Filler paragraph nine.
|
||||||
|
|
||||||
|
Filler paragraph ten. Filler paragraph ten. Filler paragraph ten. Filler paragraph ten.
|
||||||
|
|
||||||
|
Filler paragraph eleven. Filler paragraph eleven. Filler paragraph eleven. Filler paragraph eleven.
|
||||||
|
|
||||||
|
Filler paragraph twelve. Filler paragraph twelve. Filler paragraph twelve. Filler paragraph twelve.
|
||||||
|
|
||||||
|
Filler paragraph thirteen. Filler paragraph thirteen. Filler paragraph thirteen. Filler paragraph thirteen.
|
||||||
|
|
||||||
|
Filler paragraph fourteen. Filler paragraph fourteen. Filler paragraph fourteen. Filler paragraph fourteen.
|
||||||
|
|
||||||
|
Filler paragraph fifteen. Filler paragraph fifteen. Filler paragraph fifteen. Filler paragraph fifteen.
|
||||||
|
|
||||||
|
Filler paragraph sixteen. Filler paragraph sixteen. Filler paragraph sixteen. Filler paragraph sixteen.
|
||||||
@ -0,0 +1,146 @@
|
|||||||
|
const box = (selector: string) =>
|
||||||
|
page
|
||||||
|
.locator(selector)
|
||||||
|
.first()
|
||||||
|
.evaluate((el) => {
|
||||||
|
const { x, y, width, height } = el.getBoundingClientRect()
|
||||||
|
return { x, y, width, height, right: x + width, bottom: y + height }
|
||||||
|
})
|
||||||
|
|
||||||
|
// screen positions of the first and last characters of an element's text,
|
||||||
|
// which is how the bidi algorithm's reordering shows up
|
||||||
|
const glyphEnds = (selector: string) =>
|
||||||
|
page
|
||||||
|
.locator(selector)
|
||||||
|
.first()
|
||||||
|
.evaluate((el) => {
|
||||||
|
const node = el.firstChild as Text
|
||||||
|
const range = document.createRange()
|
||||||
|
range.setStart(node, 0)
|
||||||
|
range.setEnd(node, 1)
|
||||||
|
const first = range.getBoundingClientRect().x
|
||||||
|
range.setStart(node, node.length - 1)
|
||||||
|
range.setEnd(node, node.length)
|
||||||
|
const last = range.getBoundingClientRect().x
|
||||||
|
return { first, last }
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('rtl', () => {
|
||||||
|
beforeAll(async () => {
|
||||||
|
await goto('/rtl/')
|
||||||
|
})
|
||||||
|
|
||||||
|
afterAll(async () => {
|
||||||
|
await page.setViewportSize({ width: 1280, height: 720 })
|
||||||
|
})
|
||||||
|
|
||||||
|
test('sets the direction on the html element', async () => {
|
||||||
|
expect(await page.getAttribute('html', 'dir')).toBe('rtl')
|
||||||
|
if (process.env['VITE_TEST_BUILD']) {
|
||||||
|
const html = await (await page.request.get(page.url())).text()
|
||||||
|
expect(html).toContain('<html lang="en-US" dir="rtl">')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
test('lays the page out from the right', async () => {
|
||||||
|
const width = await page.evaluate(() => innerWidth)
|
||||||
|
const sidebar = await box('.VPSidebar')
|
||||||
|
expect(sidebar.right).toBeGreaterThan(width - 1)
|
||||||
|
expect(sidebar.x).toBeGreaterThan(width / 2)
|
||||||
|
|
||||||
|
const heading = await box('.vp-doc h1')
|
||||||
|
const title = await glyphEnds('.vp-doc h1')
|
||||||
|
expect(title.last).toBeGreaterThan(heading.x + heading.width / 2)
|
||||||
|
|
||||||
|
const anchor = await box('.vp-doc h2 .header-anchor')
|
||||||
|
const h2 = await box('.vp-doc h2')
|
||||||
|
expect(anchor.x).toBeGreaterThan(h2.x + h2.width / 2)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('keeps the outline marker on the reading side and moving', async () => {
|
||||||
|
const outline = await box('.VPDocAsideOutline .content')
|
||||||
|
await page.evaluate(() =>
|
||||||
|
document.querySelector('#section-one')!.scrollIntoView()
|
||||||
|
)
|
||||||
|
await page.waitForSelector('.outline-link.active[href="#section-one"]')
|
||||||
|
const before = await box('.outline-marker')
|
||||||
|
expect(before.x).toBeGreaterThan(outline.x + outline.width / 2)
|
||||||
|
|
||||||
|
await page.evaluate(() =>
|
||||||
|
document.querySelector('#section-two')!.scrollIntoView()
|
||||||
|
)
|
||||||
|
await page.waitForSelector('.outline-link.active[href="#section-two"]')
|
||||||
|
const after = await box('.outline-marker')
|
||||||
|
expect(after.y).toBeGreaterThan(before.y)
|
||||||
|
expect(Math.abs(after.x - before.x)).toBeLessThan(1)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('mirrors the sidebar caret when a group collapses', async () => {
|
||||||
|
const group = page.locator('.VPSidebarItem.level-0.collapsible').first()
|
||||||
|
await group.locator('.caret').first().click()
|
||||||
|
expect(
|
||||||
|
await group.evaluate((el) => el.classList.contains('collapsed'))
|
||||||
|
).toBe(true)
|
||||||
|
expect(
|
||||||
|
await group
|
||||||
|
.locator('.caret-icon')
|
||||||
|
.first()
|
||||||
|
.evaluate((el) => getComputedStyle(el).scale)
|
||||||
|
).toBe('-1 1')
|
||||||
|
await group.locator('.caret').first().click()
|
||||||
|
})
|
||||||
|
|
||||||
|
test('keeps code left-to-right', async () => {
|
||||||
|
const wrapper = page.locator('.vp-doc div[class*="language-"]').first()
|
||||||
|
expect(await wrapper.getAttribute('dir')).toBe('ltr')
|
||||||
|
expect(
|
||||||
|
await wrapper
|
||||||
|
.locator('pre')
|
||||||
|
.evaluate((el) => getComputedStyle(el).direction)
|
||||||
|
).toBe('ltr')
|
||||||
|
|
||||||
|
const block = await box('.vp-doc div[class*="language-"]')
|
||||||
|
const copy = await box('.vp-doc div[class*="language-"] > button.copy')
|
||||||
|
const gutter = await box(
|
||||||
|
'.vp-doc div[class*="language-"] > .line-numbers-wrapper'
|
||||||
|
)
|
||||||
|
expect(copy.x).toBeGreaterThan(block.x + block.width / 2)
|
||||||
|
expect(gutter.right).toBeLessThan(block.x + block.width / 2)
|
||||||
|
|
||||||
|
const flag = await glyphEnds('.vp-doc p code')
|
||||||
|
expect(flag.first).toBeLessThan(flag.last)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('mirrors the external link icon', async () => {
|
||||||
|
const mask = await page
|
||||||
|
.locator('.vp-doc a[href^="https://"]')
|
||||||
|
.first()
|
||||||
|
.evaluate((el) => {
|
||||||
|
const style = getComputedStyle(el, '::after')
|
||||||
|
return style.maskImage || style.webkitMaskImage
|
||||||
|
})
|
||||||
|
expect(mask).toContain('matrix(-1 0 0 1 24 0)')
|
||||||
|
})
|
||||||
|
|
||||||
|
test('slides the mobile sidebar in from the right', async () => {
|
||||||
|
await page.setViewportSize({ width: 375, height: 812 })
|
||||||
|
await goto('/rtl/')
|
||||||
|
const viewport = await page.evaluate(
|
||||||
|
() => document.documentElement.clientWidth
|
||||||
|
)
|
||||||
|
const closed = await box('.VPSidebar')
|
||||||
|
expect(closed.x).toBeGreaterThanOrEqual(viewport - 1)
|
||||||
|
|
||||||
|
await page.locator('.VPLocalNav .menu').click()
|
||||||
|
await page.waitForSelector('.VPSidebar.open')
|
||||||
|
// wait for the slide-in transition to settle against the right edge
|
||||||
|
await page.waitForFunction(() => {
|
||||||
|
const { right } = document
|
||||||
|
.querySelector('.VPSidebar')!
|
||||||
|
.getBoundingClientRect()
|
||||||
|
return Math.abs(right - innerWidth) < 1
|
||||||
|
})
|
||||||
|
const open = await box('.VPSidebar')
|
||||||
|
expect(open.x).toBeLessThan(375)
|
||||||
|
})
|
||||||
|
})
|
||||||
@ -0,0 +1,84 @@
|
|||||||
|
import { readdirSync, readFileSync } from 'node:fs'
|
||||||
|
import { fileURLToPath } from 'node:url'
|
||||||
|
|
||||||
|
// the default theme is laid out with logical properties so that `dir: 'rtl'`
|
||||||
|
// mirrors it without a build step; this keeps physical inline-axis
|
||||||
|
// declarations from creeping back in
|
||||||
|
|
||||||
|
const root = fileURLToPath(
|
||||||
|
new URL('../../../../src/client/theme-default/', import.meta.url)
|
||||||
|
)
|
||||||
|
|
||||||
|
// declarations that must stay physical: centering paired with
|
||||||
|
// translate(-50%), which anchoring the inline-start edge would push
|
||||||
|
// off-centre in rtl
|
||||||
|
const physicalByDesign: Record<string, string[]> = {
|
||||||
|
'components/VPHero.vue': ['left: 50%', 'left: 50%']
|
||||||
|
}
|
||||||
|
|
||||||
|
// a declaration starts a block, follows another declaration, or sits on its
|
||||||
|
// own line, so one-line rules are scanned like any other
|
||||||
|
const physicalInlineAxis =
|
||||||
|
/(?<=^|[{;])\s*(?:(?:margin|padding|border|inset|scroll-margin|scroll-padding)-(?:left|right)(?:-[a-z]+)?|left|right|border-(?:top|bottom)-(?:left|right)-radius)\s*:[^;}]*|(?<=^|[{;])\s*(?:text-align|float|clear)\s*:\s*(?:left|right)\b|(?<=^|[{;])\s*(?:background-position(?:-x)?|(?:-webkit-)?mask-position|object-position|transform-origin|perspective-origin)\s*:[^;}]*\b(?:left|right)\b/gm
|
||||||
|
|
||||||
|
// shorthands set the two inline sides independently; they are physical
|
||||||
|
// whenever those values differ (values with function calls are skipped)
|
||||||
|
const shorthand =
|
||||||
|
/(?<=^|[{;])\s*(?:(margin|padding|inset)[ \t]*:(?![^;}]*\()[ \t]*([^\s;{}!]+)[ \t]+([^\s;{}!]+)[ \t]+([^\s;{}!]+)[ \t]+([^\s;{}!]+)|(border-radius)[ \t]*:(?![^;}]*\()[ \t]*([^\s;{}!]+)[ \t]+([^\s;{}!]+)(?:[ \t]+([^\s;{}!]+))?(?:[ \t]+([^\s;{}!]+))?)[ \t]*(?:!important)?[ \t]*(?=[;}])/gm
|
||||||
|
|
||||||
|
function styles(file: string): string {
|
||||||
|
const source = readFileSync(root + file, 'utf8')
|
||||||
|
if (file.endsWith('.css')) return source
|
||||||
|
return Array.from(
|
||||||
|
source.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/g),
|
||||||
|
(m) => m[1]
|
||||||
|
).join('\n')
|
||||||
|
}
|
||||||
|
|
||||||
|
function physicalDeclarations(css: string): string[] {
|
||||||
|
const found = Array.from(css.matchAll(physicalInlineAxis), (m) => m[0].trim())
|
||||||
|
for (const m of css.matchAll(shorthand)) {
|
||||||
|
const decl = m[0].trim()
|
||||||
|
if (m[1]) {
|
||||||
|
// top right bottom left
|
||||||
|
if (m[3] !== m[5]) found.push(decl)
|
||||||
|
} else {
|
||||||
|
// top-left top-right bottom-right bottom-left, expanded from the
|
||||||
|
// two- and three-value forms
|
||||||
|
const [tl, tr, br, bl] =
|
||||||
|
m[10] !== undefined
|
||||||
|
? [m[7], m[8], m[9], m[10]]
|
||||||
|
: m[9] !== undefined
|
||||||
|
? [m[7], m[8], m[9], m[8]]
|
||||||
|
: [m[7], m[8], m[7], m[8]]
|
||||||
|
if (tl !== tr || br !== bl) found.push(decl)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return found
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('client/theme-default/logical-properties', () => {
|
||||||
|
const files = readdirSync(root, { recursive: true, encoding: 'utf8' })
|
||||||
|
.map((file) => file.replaceAll('\\', '/'))
|
||||||
|
.filter((file) => /\.(vue|css)$/.test(file))
|
||||||
|
.sort()
|
||||||
|
|
||||||
|
test('every allowlisted file still exists', () => {
|
||||||
|
expect(
|
||||||
|
Object.keys(physicalByDesign).filter((file) => !files.includes(file))
|
||||||
|
).toEqual([])
|
||||||
|
})
|
||||||
|
|
||||||
|
test.each(files)('%s uses no physical inline-axis properties', (file) => {
|
||||||
|
const found = physicalDeclarations(styles(file))
|
||||||
|
const allowed = [...(physicalByDesign[file] ?? [])]
|
||||||
|
const unexpected = found.filter((decl) => {
|
||||||
|
const i = allowed.indexOf(decl)
|
||||||
|
if (i === -1) return true
|
||||||
|
allowed.splice(i, 1)
|
||||||
|
return false
|
||||||
|
})
|
||||||
|
expect(unexpected).toEqual([])
|
||||||
|
expect(allowed).toEqual([])
|
||||||
|
})
|
||||||
|
})
|
||||||
@ -1,8 +0,0 @@
|
|||||||
{
|
|
||||||
"plugins": {
|
|
||||||
"postcss-rtlcss": {
|
|
||||||
"ltrPrefix": ":where([dir=\"ltr\"])",
|
|
||||||
"rtlPrefix": ":where([dir=\"rtl\"])"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in new issue