Commit067fa19

committed

feat(sites/ui): allow focusing lines, inpsired by shiki focus transformer

1 parent044a3b8 commit067fa19Copy full SHA for 067fa19

File tree

+52

-1

lines changed

.changeset
- olive-laws-refuse.md
libs/ui/src
- css/typography/base
  - prose.css
- lib/preprocessors/mdsvex
  - shiki.js
sites/www/src/routes/(localized)/design/blog/code/_page
- content.md.svelte
- examples
  - meta-block-focus.md.svelte

+52

-1

lines changed

Lines changed: 5 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,5 @@`
	`1`	`+---`
	`2`	`+'@sveltevietnam/ui':minor`
	`3`	`+---`
	`4`	`+`
	`5`	+`:::focus` metaline for codeblock

Lines changed: 13 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -212,6 +212,19 @@`
`212`	`212`	`}`
`213`	`213`	`}`
`214`	`214`	`}`
	`215`	`+`
	`216`	`+&:has([data-focus]) {`
	`217`	`+& .line:not([data-focus]) {`
	`218`	`+opacity:0.5;`
	`219`	`+filter:blur(0.095rem);`
	`220`	`+transition: filter200ms ease-out;`
	`221`	`+}`
	`222`	`+`
	`223`	`+&:is(:focus,:hover) .line:not([data-focus]) {`
	`224`	`+opacity:1;`
	`225`	`+filter:blur(0);`
	`226`	`+}`
	`227`	`+}`
`215`	`228`	`}`
`216`	`229`	`}`
`217`	`230`

Lines changed: 13 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -116,7 +116,8 @@ function transformer() {`
`116`	`116`
`117`	`117`	`/*@typedef {{ type: 'diff'; variant: '-' \| '+' }} BlockDiff /`
`118`	`118`	`/*@typedef {{ type: 'highlight'; variant: typeof STATUSES[number]}} BlockHighlight /`
`119`		`-/*@typedef {BlockDiff \| BlockHighlight} Block /`
	`119`	`+/*@typedef {{ type: 'focus' }} BlockFocus /`
	`120`	`+/*@typedef {BlockDiff \| BlockHighlight \| BlockFocus} Block /`
`120`	`121`
`121`	`122`	`/*@type {Block[]} /`
`122`	`123`	`constblocks=[];`
`@@ -149,6 +150,14 @@ function transformer() {`
`149`	`150`	`}`
`150`	`151`	`}`
`151`	`152`
	`153`	`+// focus`
	`154`	`+if(!match){`
	`155`	`+match=str.match(/:::focus/);`
	`156`	`+if(match){`
	`157`	`+blocks.push({type:'focus'});`
	`158`	`+}`
	`159`	`+}`
	`160`	`+`
`152`	`161`	`if(!match){`
`153`	`162`	`blocks.pop();`
`154`	`163`	`}`
`@@ -182,6 +191,9 @@ function transformer() {`
`182`	`191`	`case'highlight':`
`183`	`192`	`line.properties['data-line-highlighted']=block.variant;`
`184`	`193`	`break;`
	`194`	`+case'focus':`
	`195`	`+line.properties['data-focus']='';`
	`196`	`+break;`
`185`	`197`	`}`
`186`	`198`	`}`
`187`	`199`	`}`

Lines changed: 12 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@`
`5`	`5`	`importFromFilefrom'./examples/from-file.md.svelte';`
`6`	`6`	`importMetaBlockDifffrom'./examples/meta-block-diff.md.svelte';`
`7`	`7`	`importMetaBlockHighlightfrom'./examples/meta-block-highlight.md.svelte';`
	`8`	`+importMetaBlockFocusfrom'./examples/meta-block-focus.md.svelte';`
`8`	`9`	`importGroupFilesfrom'./examples/group-files.md.svelte';`
`9`	`10`	`importGroupTabsfrom'./examples/group-tabs.md.svelte';`
`10`	`11`	`</script>`
`@@ -73,6 +74,17 @@`
`73`	`74`
`74`	`75`	`<MetaBlockHighlight />`
`75`	`76`
	`77`	`+### Focus`
	`78`	`+`
	`79`	+```markdown
	`80`	`+/// src=./examples/meta-block-focus.md.svelte`
	`81`	`+/// skipMetaBlock=true`
	`82`	+```
	`83`	`+`
	`84`	`+...renders`
	`85`	`+`
	`86`	`+<MetaBlockFocus />`
	`87`	`+`
`76`	`88`	`## Group of Code Blocks`
`77`	`89`
`78`	`90`	`### "Files" Display Mode`

Lines changed: 9 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,9 @@`
	`1`	+```svelte
	`2`	`+<script>`
	`3`	`+import {clickoutside }from'@svelte-put/clickoutside';`
	`4`	`+</script>`
	`5`	`+`
	`6`	`+<!-- :::focus -->`
	`7`	`+<elementuse:clickoutsideon:clickoutside></element>`
	`8`	`+<!-- ::: -->`
	`9`	+```

Comments

(0)