fix: address P1 and P2 issues from code review (#215)

braboj · claude · web-flow · commit ab7f9f7e53ad · 2026-04-26T15:11:00.000+03:00
* fix: address P1 and P2 issues from code review - Remove set:html XSS risk in Footer (#208) - Fix hardcoded JSON-LD URLs to use Astro.site (#209) - Fix dark mode link contrast for WCAG AAA (#210) - Remove unused search box CSS (#211) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: add custom 404 page Branded error page with header, footer, and link back to tutorial home. Includes noindex meta tag and dark mode support. Closes #212 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
diff --git a/astro-site/src/components/Footer.astro b/astro-site/src/components/Footer.astro
@@ -3,5 +3,5 @@ import site from "../data/site.json";
 ---
 
 <footer class="site-footer">
-  <Fragment set:html={site.copyright} />
+  {site.copyright}
 </footer>
diff --git a/astro-site/src/pages/404.astro b/astro-site/src/pages/404.astro
@@ -0,0 +1,35 @@
+---
+import "../styles/global.css";
+import Header from "../components/Header.astro";
+import Footer from "../components/Footer.astro";
+import site from "../data/site.json";
+
+const base = import.meta.env.BASE_URL;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Page Not Found — {site.title}</title>
+    <meta name="robots" content="noindex" />
+    <script is:inline>
+      document.documentElement.setAttribute(
+        "data-theme",
+        localStorage.getItem("theme") || "light"
+      );
+    </script>
+  </head>
+  <body>
+    <Header currentPath="/" />
+    <main class="content" style="text-align: center; padding: 4rem 1rem;">
+      <h1>404 — Page Not Found</h1>
+      <p style="margin: 1rem 0 2rem; color: var(--color-fg-muted);">
+        The page you're looking for doesn't exist or has been moved.
+      </p>
+      <a href={base} style="color: var(--color-link);">Back to the tutorial</a>
+    </main>
+    <Footer />
+  </body>
+</html>
diff --git a/astro-site/src/pages/[...slug].astro b/astro-site/src/pages/[...slug].astro
@@ -37,7 +37,7 @@ const jsonLd = {
   "isPartOf": {
     "@type": "Course",
     "name": "Git Tutorial — Code with Branko",
-    "url": "https://braboj.github.io/tutorial-git/"
+    "url": new URL(import.meta.env.BASE_URL, import.meta.env.SITE).toString()
   }
 };
 ---
diff --git a/astro-site/src/pages/index.astro b/astro-site/src/pages/index.astro
@@ -16,7 +16,7 @@ const jsonLd = {
   "@type": "Course",
   "name": "Git Tutorial — Code with Branko",
   "description": "A hands-on Git tutorial from first commit to confident daily use — concepts, exercises, and real-world examples.",
-  "url": "https://braboj.github.io/tutorial-git/",
+  "url": new URL(import.meta.env.BASE_URL, import.meta.env.SITE).toString(),
   "provider": {
     "@type": "Person",
     "name": "Branimir Georgiev",
diff --git a/astro-site/src/styles/global.css b/astro-site/src/styles/global.css
@@ -55,8 +55,8 @@
   --color-fg-muted: #aaaaaa;
   --color-fg-faint: #888888;
   --color-border: #ffffff1f;
-  --color-link: #4dd0e1;
-  --color-focus: #4dd0e1;
+  --color-link: #00bcd4;
+  --color-focus: #00bcd4;
   --color-code-bg: #2a2a2a;
   --color-code-fg: #e0e0e0;
 }
@@ -169,44 +169,6 @@ a:hover {
   gap: var(--space-sm);
 }
 
-/* Search box */
-.search-box {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.search-icon {
-  position: absolute;
-  left: 0.5rem;
-  color: #fff;
-  opacity: 0.7;
-  pointer-events: none;
-}
-
-.search-box input {
-  background: rgba(255, 255, 255, 0.15);
-  border: none;
-  border-radius: 3px;
-  color: #fff;
-  font-family: var(--font-text);
-  font-size: var(--font-size-sm);
-  padding: 0.35rem 0.5rem 0.35rem 2rem;
-  width: 10rem;
-  transition: background 0.2s, width 0.2s;
-}
-
-.search-box input::placeholder {
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.search-box input:focus-visible {
-  background: rgba(255, 255, 255, 0.25);
-  width: 14rem;
-  outline: 2px solid #fff;
-  outline-offset: 1px;
-}
-
 /* Theme toggle */
 .theme-toggle {
   background: none;

Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,7 @@ const jsonLd = {`
`37`	`37`	`"isPartOf": {`
`38`	`38`	`"@type": "Course",`
`39`	`39`	`"name": "Git Tutorial — Code with Branko",`
`40`		`- "url": "https://braboj.github.io/tutorial-git/"`
	`40`	`+ "url": new URL(import.meta.env.BASE_URL, import.meta.env.SITE).toString()`
`41`	`41`	`}`
`42`	`42`	`};`
`43`	`43`	`---`