Merge pull request #125 from GetTechAPI/fix/site-playground-resources

feat(site): complete playground and branding

Author: Seungpyo1007

site/public/techapi-mark.png

@@ -11,6 +11,8 @@ const endpoints = [
   { label: "/v1/smartphones/{slug}", desc: "Phone detail + scores", href: `${base}v1/smartphones/galaxy-s26-ultra/index.json` },
   { label: "/v1/smartphones/{slug}/score", desc: "Computed scores", href: `${base}v1/smartphones/galaxy-s26-ultra/score/index.json` },
   { label: "/v1/tablets", desc: "List all tablets", href: `${base}v1/tablets/index.json` },
+  { label: "/v1/laptops", desc: "List all laptops", href: `${base}v1/laptops/index.json` },
+  { label: "/v1/monitors", desc: "List all monitors", href: `${base}v1/monitors/index.json` },
   { label: "/v1/watches", desc: "List all watches", href: `${base}v1/watches/index.json` },
   { label: "/v1/pdas", desc: "List all PDAs", href: `${base}v1/pdas/index.json` },
   { label: "/v1/socs/{slug}", desc: "System-on-chip detail", href: `${base}v1/socs/snapdragon-8-elite-gen-5/index.json` },
@@ -49,7 +51,7 @@ const endpoints = [
   <nav class="nav">
     <div class="wrap nav-inner">
       <a class="brand" href={base}>
-        <span class="mark">T</span>TechAPI<span class="cursor" aria-hidden="true"></span>
+        <img class="brand-mark" src={`${base}techapi-mark.png`} alt="" aria-hidden="true" />TechAPI<span class="cursor" aria-hidden="true"></span>
       </a>
       <div class="nav-links">
         <a href="#history">History</a>
@@ -161,8 +163,11 @@ const endpoints = [
               <select id="pg-resource">
                 <option value="smartphones">smartphones</option>
                 <option value="tablets">tablets</option>
+                <option value="laptops">laptops</option>
+                <option value="monitors">monitors</option>
                 <option value="watches">watches</option>
                 <option value="pdas">pdas</option>
+                <option value="software">software</option>
                 <option value="socs">socs</option>
                 <option value="gpus">gpus</option>
                 <option value="cpus">cpus</option>
@@ -310,7 +315,7 @@ const endpoints = [
   <footer>
     <div class="wrap">
       <div class="foot-inner">
-        <a class="brand" href={base}><span class="mark">T</span>TechAPI</a>
+        <a class="brand" href={base}><img class="brand-mark" src={`${base}techapi-mark.png`} alt="" aria-hidden="true" />TechAPI</a>
         <div class="lic">code <strong>MIT</strong> · data <strong>CC-BY-SA 4.0</strong></div>
         <div class="foot-links">
           <a href={ghUrl} target="_blank" rel="noopener">GitHub</a>

site/src/pages/index.astro

@@ -120,11 +120,10 @@ code, .mono { font-family: var(--mono); }
 }
 .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
 .brand { display: flex; align-items: center; gap: 11px; font-family: var(--mono); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
-.brand .mark {
-  width: 26px; height: 26px; flex: none;
-  display: grid; place-items: center;
-  background: var(--accent); color: var(--accent-ink);
-  font-weight: 800; font-size: 15px; border-radius: 3px;
+.brand .brand-mark {
+  width: 30px; height: 30px; flex: none;
+  object-fit: cover; border-radius: 6px;
+  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent);
 }
 .brand .cursor {
   width: 9px; height: 17px; background: var(--accent);