feat: website header

Author: AlCalzone

package.json

@@ -48,6 +48,7 @@
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.22.0",
     "vite": "^6.1.0",
+    "vite-plugin-svgr": "^4.3.0",
     "zwave-js": "14.3.8-0-pr-7628-ab659ee"
   },
   "packageManager": "yarn@4.6.0"

src/App.tsx

@@ -22,12 +22,14 @@ import ArrowTopRightOnSquareIcon from "@heroicons/react/24/outline/ArrowTopRight
 
 // FIXME: There should be a way to reuse the TS instance from the editor
 import ts from "typescript";
+import { Header } from "./Header.tsx";
 
 interface AppProps {
   esbuild: typeof import("esbuild-wasm");
   showShareButton?: boolean;
   showOpenInNewWindowButton?: boolean;
   showEmbedButton?: boolean;
+  showHeader?: boolean;
   defaultLogsVisible?: boolean;
 }
 
@@ -99,6 +101,7 @@ function App({
   showOpenInNewWindowButton,
   showEmbedButton,
   defaultLogsVisible,
+  showHeader,
 }: AppProps) {
   const [code, setCode] = useState(getDefaultCode().trim());
   const [hasPort, setHasPort] = useState(!!window.port);
@@ -501,6 +504,7 @@ declare const Buffer: typeof Bytes;
 
   return (
     <>
+      {showHeader && <Header />}
       <div className="toolbar">
         {!isRunning && (
           <button id="run" onClick={handleRunClick}>

src/Header.css

@@ -0,0 +1,40 @@
+header {
+  display: flex;
+  align-items: center;
+
+  background: #1a1a1a;
+  color: white;
+  margin: -1rem;
+  margin-bottom: 1rem;
+  padding: 0.5rem 1rem;
+  padding-right: 1.5rem;
+}
+
+header svg {
+  vertical-align: middle;
+}
+
+header h1 {
+  font-size: 2rem;
+  font-weight: 400;
+  line-height: 1;
+  margin: 0;
+  margin-right: auto;
+
+  display: inline-flex;
+  align-items: center;
+}
+
+header h1 span {
+  margin-top: 0.27em;
+}
+
+.github-link {
+  color: white;
+}
+
+@media (prefers-color-scheme: light) {
+  .github-link {
+    color: #24292f;
+  }
+}

src/Header.tsx

@@ -0,0 +1,21 @@
+import "./Header.css";
+import Logo from "./assets/logo.svg?react";
+import GithubLogo from "./assets/github.svg?react";
+
+export const Header = () => {
+  return (
+    <header>
+      <h1>
+        <Logo height={72} width={undefined} /> <span>Playground</span>
+      </h1>
+      <a
+        href="https://github.com/zwave-js/playground"
+        target="_blank"
+        title="View on GitHub"
+        className="github-link"
+      >
+        <GithubLogo height={24} width={undefined} />
+      </a>
+    </header>
+  );
+};

src/assets/github.svg

@@ -30,6 +30,7 @@ if ("serial" in navigator) {
             showOpenInNewWindowButton={isEmbed}
             showEmbedButton={!isEmbed}
             defaultLogsVisible={!isEmbed}
+            showHeader={!isEmbed}
           />
         </Suspense>
       </StrictMode>

src/assets/logo.svg

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />

src/main.tsx

@@ -1,9 +1,10 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import svgr from "vite-plugin-svgr";
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), svgr()],
   esbuild: {
     supported: {
       "top-level-await": true,