Title prop

code-hike · Jan 23, 2023 · e0daac1 · e0daac1 · vercel · Jan 23, 2023
1 parent d116f54
commit e0daac1
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 4 deletions.
diff --git a/.changeset/shy-plums-doubt.md b/.changeset/shy-plums-doubt.md
@@ -0,0 +1,5 @@
+---
+"bright": patch
+---
+
+Add title prop
diff --git a/lib/src/code.tsx b/lib/src/code.tsx
@@ -121,7 +121,7 @@ export async function Code({
             color: activeTabForeground,
           }}
         >
-          <span
+          <code
             style={{
               background: activeTabBackground,
               color: activeTabForeground,
@@ -132,7 +132,7 @@ export async function Code({
             }}
           >
             {filename}
-          </span>
+          </code>
         </div>
       )}
       <pre

diff --git a/lib/src/index.tsx b/lib/src/index.tsx
@@ -20,6 +20,7 @@ type CodeProps = {
   lineNumbers?: boolean
   unstyled?: boolean
   theme?: BrightTheme
+  title?: string
 }
 
 type CodeComponent = ((props: CodeProps) => Promise<JSX.Element>) & {
@@ -36,6 +37,7 @@ export const Code: CodeComponent = async ({
   titleClassName,
   lineNumbers,
   unstyled,
+  title,
   theme,
 }) => {
   const finalTheme = theme || Code.theme
@@ -57,6 +59,7 @@ export const Code: CodeComponent = async ({
           unstyled={unstyled}
           theme={darkTheme}
           scheme="dark"
+          title={title}
         />
         {/* @ts-expect-error Server Component */}
         <InnerCode
@@ -70,6 +73,7 @@ export const Code: CodeComponent = async ({
           unstyled={unstyled}
           theme={lightTheme}
           scheme="light"
+          title={title}
         />
       </>
     )
@@ -86,6 +90,7 @@ export const Code: CodeComponent = async ({
       lineNumbers={lineNumbers}
       unstyled={unstyled}
       theme={finalTheme}
+      title={title}
     />
   )
 }
diff --git a/web/app/demo.js b/web/app/demo.js
@@ -47,7 +47,7 @@ export function Demo({
       </WithBackground>
       {preview || (
         <Code
-          theme="material-darker"
+          theme="dracula"
           lang="py"
           style={{
             fontSize: "1.2rem",

diff --git a/web/app/head.js b/web/app/head.js
@@ -1,7 +1,7 @@
 export default function Head() {
   return (
     <>
-      <title>Bright - Syntax Highlighting React Server Comopnent</title>
+      <title>Bright - Syntax Highlighting React Server Component</title>
       <meta content="width=device-width, initial-scale=1" name="viewport" />
       <link
         rel="icon"

diff --git a/web/app/page.js b/web/app/page.js
@@ -34,6 +34,55 @@ export default async function Page() {
       />
       <div style={{ height: "3rem" }} />
       <Details />
+
+      <div style={{ height: "3rem" }} />
+      <h2 style={{ textAlign: "center" }}>Title</h2>
+      <div style={{ height: "1rem" }} />
+      <Demo
+        demo={demo({
+          focus: true,
+          middle: (
+            <>
+              <span>const myCode = `</span>
+              <br />
+              <span style={{ color: "var(--text-color)" }}>
+                let hello = "hello brightness"
+              </span>
+              <br />
+              <span style={{ color: "var(--text-color)" }}>
+                console.log(hello, "my old friend")
+              </span>
+              <br />
+              <span>`.trim()</span>
+              <br />
+              <br />
+            </>
+          ),
+          codeLine: (
+            <CodeLine
+              mark
+              children={<span style={{}}>{`{myCode}`}</span>}
+              props={
+                <>
+                  <span style={{ color: "rgb(199, 146, 234)" }}>lang</span>
+                  <span>="</span>
+                  <span style={{ color: "rgb(195, 232, 141)" }}>js</span>
+                  <span>" </span>
+
+                  <span style={{ color: "rgb(199, 146, 234)" }}>title</span>
+                  <span>="</span>
+                  <span style={{ color: "rgb(195, 232, 141)" }}>shiny.js</span>
+                  <span>"</span>
+                </>
+              }
+            />
+          ),
+        })}
+        code={`let hello = "hello brightness"
+console.log(hello, "my old friend")`}
+        codeProps={{ title: "shiny.js", lang: "js" }}
+      />
+
       <div style={{ height: "3rem" }} />
       <h2 style={{ textAlign: "center" }}>Line Numbers</h2>
       <div style={{ height: "1rem" }} />
@@ -79,6 +128,7 @@ export default async function Page() {
 console.log(hello, "my old friend")`}
         codeProps={{ lineNumbers: true, lang: "js" }}
       />
+
       <div style={{ height: "3rem" }} />
       <h2 style={{ textAlign: "center" }}>Global Props</h2>
       <div style={{ height: "1rem" }} />
@@ -190,6 +240,7 @@ print(theFuture is bright)`}
         codeProps={{ lang: "py", theme: "material-lighter" }}
       />
       <div style={{ height: "3rem" }} />
+
       <h2 style={{ textAlign: "center" }}>Dark Mode</h2>
       <div style={{ height: "1rem" }} />
       <Demo