11---
22import type { CollectionEntry } from ' astro:content'
3+ import { getConfig } from ' @libs/config'
34import { getVersionedDocsPath } from ' @libs/path'
45import { getSlug } from ' @libs/utils'
6+ import GitHubIcon from ' @components/icons/GitHubIcon.astro'
7+ import MdnIcon from ' @components/icons/MdnIcon.astro'
8+ import CssTricksIcon from ' @components/icons/CssTricksIcon.astro'
59
610interface Props {
711 frontmatter: CollectionEntry <' docs' ' data'
12+ id: CollectionEntry <' docs' ' id'
813 parentDirectory: string
914}
1015
11- const = Astro .props
16+ const id, parentDirectory } = Astro .props
1217
1318const : Record <string , string > = {
1419 reboot: ' Reboot'
@@ -34,75 +39,74 @@ const deps = frontmatter.deps ?? []
3439const = deps .length
3540---
3641
37- { frontmatter .js === ' required' && (
38- <span
39- class = " bd-badge theme-warning"
40- data-bs-toggle = " tooltip"
41- data-bs-placement = " top"
42- data-bs-custom-class = " bd-meta-tooltip"
43- title = " Requires JavaScript to function"
44- >
45- <svg class = " bi" aria-hidden = " true" use href = " #filetype-js" svg >
46- Required
47- </span >
48- )}
49-
50- { frontmatter .js === ' optional' && (
51- <span
52- class = " bd-badge theme-warning"
53- data-bs-toggle = " tooltip"
54- data-bs-placement = " top"
55- data-bs-custom-class = " bd-meta-tooltip"
56- title = " Some features require JavaScript"
57- >
58- <svg class = " bi" aria-hidden = " true" use href = " #filetype-js" svg >
59- Optional
60- </span >
61- )}
62-
63- { frontmatter .css_layer && (
64- <span
65- class = " bd-badge theme-accent"
66- data-bs-toggle = " tooltip"
67- data-bs-placement = " top"
68- data-bs-custom-class = " bd-meta-tooltip"
69- title = { layerTooltips [frontmatter .css_layer ]}
70- >
71- <svg class = " bi" aria-hidden = " true" use href = " #layers" svg >
72- { layerLabels [frontmatter .css_layer ]}
73- </span >
74- )}
75-
76- { depsCount > 0 && (
77- <Fragment
78- <button
79- class = " btn-subtle btn-sm theme-secondary"
80- type = " button"
81- data-bs-toggle = " menu"
82- aria-expanded = " false"
83- data-bs-custom-class = " bd-meta-tooltip"
84- >
85- <svg class = " bi" aria-hidden = " true" use href = " #box-seam" svg >
86- { depsCount }
87- <span >{ depsCount === 1 ? ' dependency' : ' dependencies' } </span >
88- <svg class = " bi bi-sm" aria-hidden = " true" use href = " #chevron-expand" svg >
89- </button >
90- <div class = " menu"
91- { deps .map ((dep ) => (
92- dep .url ?.startsWith (' http' ? (
93- <a class = " menu-item" href = { dep .url } target = " _blank" rel = " noopener"
94- { dep .title }
95- </a >
96- ) : dep .url ? (
97- <a class = " menu-item" href = { dep .url } >
98- { dep .title }
99- </a >
100- ) : (
101- <a class = " menu-item" href = { getVersionedDocsPath (` components/${getSlug (dep .title )}/ ` )} >
102- { dep .title }
103- </a >
104- )
105- ))}
42+ <div class =" bd-page-meta d-flex flex-wrap gap-5 row-gap-2 px-4 py-3 bg-1 fg-2 fs-sm rounded-3"
43+ { frontmatter .js === ' required' && (
44+ <div class = " d-flex align-items-center gap-2"
45+ <svg class = " bi fg-warning" aria-hidden = " true" use href = " #filetype-js" svg >
46+ Requires JavaScript
47+ </div >
48+ )}
49+ { frontmatter .js === ' optional' && (
50+ <div class = " d-flex align-items-center gap-2"
51+ <svg class = " bi fg-warning opacity-50" aria-hidden = " true" use href = " #filetype-js" svg >
52+ Optional JavaScript-based features
53+ </div >
54+ )}
55+ { frontmatter .css_layer && (
56+ <div class = " d-flex align-items-center gap-2"
57+ <svg class = " bi fg-accent" aria-hidden = " true" use href = " #layers" svg >
58+ <span >In <code class = " fg-body" { frontmatter .css_layer } </code > CSS layer</span >
59+ </div >
60+ )}
61+ { depsCount > 0 && (
62+ <div class = " d-flex align-items-center gap-2"
63+ <svg class = " bi fg-2" aria-hidden = " true" use href = " #box-seam" svg >
64+ <div >
65+ Depends on
66+ { deps .map ((dep , i ) => (
67+ <Fragment
68+ { i > 0 && ' , ' }
69+ { dep .url ?.startsWith (' http' ? (
70+ <a class = " fg-2 text-decoration-none" href = { dep .url } target = " _blank" rel = " noopener"
71+ { dep .title }
72+ </a >
73+ ) : dep .url ? (
74+ <a class = " fg-2 text-decoration-none" href = { dep .url } >
75+ { dep .title }
76+ </a >
77+ ) : (
78+ <a class = " fg-2 text-decoration-none" href = { getVersionedDocsPath (` components/${getSlug (dep .title )}/ ` )} >
79+ { dep .title }
80+ </a >
81+ )}
82+ </Fragment
83+ ))}
84+ </div >
85+ </div >
86+ )}
87+ { frontmatter .added &&
88+ ((frontmatter .added .show_badge === undefined || frontmatter .added .show_badge === true )) && (
89+ <div class = " hstack align-items-center gap-2"
90+ <svg class = " bi fg-success" aria-hidden = " true" use href = " #plus" svg >
91+ Added in v{ frontmatter .added .version }
92+ </div >
93+ )}
94+ { frontmatter .mdn && (
95+ <div class = " hstack align-items-center gap-2"
96+ <MdnIcon height = { 16 } width = { 16 } class = " bi fg-2"
97+ <a class = " fg-2 text-decoration-none" href = { frontmatter .mdn } target = " _blank" rel = " noopener" a >
98+ </div >
99+ )}
100+ { frontmatter .csstricks && (
101+ <div class = " hstack align-items-center gap-2"
102+ <CssTricksIcon height = { 16 } width = { 16 } class = " bi fg-2"
103+ <a class = " fg-2 text-decoration-none" href = { typeof frontmatter .csstricks === ' string' ? frontmatter .csstricks : frontmatter .csstricks .url } target = " _blank" rel = " noopener"
104+ { typeof frontmatter .csstricks === ' string' ? ' CSS-Tricks' : (frontmatter .csstricks .label || ' CSS-Tricks' }
105+ </a >
106106 </div >
107- </Fragment
108- )}
107+ )}
108+ <div class =" hstack align-items-center gap-2"
109+ <svg class =" bi fg-2" aria-hidden =" true" use href =" #github" svg >
110+ <a class =" fg-2 text-decoration-none" href ={ ` ${getConfig ().repo }/blob/v${getConfig ().current_version }/site/src/content/docs/${id } ` } target =" _blank" rel =" noopener" a >
111+ </div >
112+ </div >
0 commit comments