website(docs): Add CodeBlockHeader
ADD
website/src/components/CodeBlockHeader.astro
+---
+const {filename} = Astro.props;
+---
+<div class="pre-header">
+ {filename && <code>{filename}</code>}
+ <slot />
+</div>

RENAME
website/src/styles/_package-manager.scss
website/src/styles/_pre.scss
@import "_variables";
@import "_mixins";
-ul.package-manager-selector {
+ul.package-manager-selector, .pre-header {
display: flex;
padding: 0;
margin: 0;
@@ -10,15 +10,26 @@ ul.package-manager-selector {
box-shadow: inset 0 0 0 1px var(--soft-border-color);
background-color: var(--container-color);
border-bottom: none;
+ line-height: 45px;
@include mobile-only {
border-radius: 0;
margin: 0 -20px;
padding: 0 10px;
}
+}
+
+.pre-header {
+ padding: 0 10px;
- li {
- padding: 10px;
+ code {
+ background: none;
+ padding: 0;
+ }
+}
+
+ul.package-manager-selector li {
+ padding: 0 10px;
list-style: none;
cursor: pointer;
margin: 0;
@@ -39,15 +50,17 @@ ul.package-manager-selector {
}
}
}
-}
pre.package-manager-command {
display: none;
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- margin-top: 0;
&.active {
display: block;
}
}
+
+.pre-header + pre, pre.package-manager-command {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ margin-top: 0;
+}

MODIFY
website/src/styles/index.scss
website/src/styles/index.scss
@import "_credits";
@import "_buttons";
@import "_docs";
-@import "_package-manager";
+@import "_pre";
:root {
--primary-color: #{$color-4};

MODIFY
website/tsconfig.json
website/tsconfig.json
"compilerOptions": {
"noEmit": true,
"target": "es2022",
- "jsx": "react-jsx"
+ "jsx": "react-jsx",
+ "baseUrl": ".",
+ "paths": {
+ "/*": ["src/*"]
+ }
},
"extends": "astro/tsconfigs/strictest",
"include": ["./src"]

website(docs): Add CodeBlockHeader (#3704)