Added HomePage Components

src/components/dev/DevBanner.astro

@@ -22,25 +22,33 @@ const site = import.meta.env.DEV ? await getSite() : null
 const here = site ? [...forEntry(site.diagnostics, collection, id), ...diagnostics] : []
 const elsewhere = site ? site.diagnostics.filter((d) => !here.includes(d)) : []
 const notice = status ? NOTICE[status] : undefined
+const label = [status && status !== 'published' ? status : null, here.length || null]
+  .filter(Boolean)
+  .join(' · ')
 ---
 
 {site && (here.length || elsewhere.length || notice) && (
-  <aside class="dev-banner">
-    {notice && <p class="notice">{notice}</p>}
-    {here.length > 0 && (
-      <ul>
-        {here.map((d) => (
-          <li class={d.level}>
-            {d.level === 'error' ? '✖' : '▲'} {d.message}
-          </li>
-        ))}
-      </ul>
-    )}
-    {elsewhere.length > 0 && (
-      <details>
-        <summary>{elsewhere.length} problem(s) elsewhere</summary>
-        <pre>{formatDiagnostics(elsewhere)}</pre>
-      </details>
-    )}
-  </aside>
+  <details class="dev-banner dark" open>
+    <summary class="dev-banner__bar">
+      Dev{label && <span class="dev-banner__crumb">{label}</span>}
+    </summary>
+    <div class="dev-banner__body">
+      {notice && <p class="dev-banner__notice">{notice}</p>}
+      {here.length > 0 && (
+        <ul class="dev-banner__list" role="list">
+          {here.map((d) => (
+            <li class:list={['dev-banner__item', `dev-banner__item--${d.level}`]}>
+              {d.message}
+            </li>
+          ))}
+        </ul>
+      )}
+      {elsewhere.length > 0 && (
+        <details class="dev-banner__elsewhere">
+          <summary class="dev-banner__toggle">{elsewhere.length} elsewhere</summary>
+          <pre class="dev-banner__log">{formatDiagnostics(elsewhere)}</pre>
+        </details>
+      )}
+    </div>
+  </details>
 )}