Refactored various components by removing unused imports and optimizing styles. Updated typography usage in HeaderSection and 404 page. Adjusted image carousel ID generation method for uniqueness. Cleaned up code in multiple pages to enhance readability and maintainability.

Michał Gryczka · Michał Gryczka · commit ed2c3972f9a9 · 2026-03-17T14:07:13.000+01:00
diff --git a/src/components/GithubReleases/GithubReleases.astro b/src/components/GithubReleases/GithubReleases.astro
@@ -1,7 +1,5 @@
 ---
 import { DownloadIcon } from "../base/icons/DownloadIcon";
-import { CheckIcon } from "../base/icons/CheckIcon";
-import { PlatformType } from "../base/types/platform";
 
 interface Props {
   repoUrl: string;
@@ -24,12 +22,6 @@ const releases = await response.json();
 const stableReleases = releases.filter((release: any) => !release.prerelease);
 const latestRelease = stableReleases[0]; // Get only the latest release
 
-interface Asset {
-  name: string;
-  browser_download_url: string;
-  size: number;
-}
-
 function getAssetDescription(assetName: string): string {
   // Mapping based on provided examples
   if (/\.deb$/.test(assetName) && /x86_64-unknown-linux-gnu/.test(assetName)) {
@@ -53,22 +45,6 @@ function getAssetDescription(assetName: string): string {
   return "";
 }
 
-function getPlatformType(assetName: string): PlatformType {
-  if (assetName.includes("windows")) return PlatformType.WINDOWS;
-  if (assetName.includes("linux") && assetName.includes(".deb"))
-    return PlatformType.DEBIAN;
-  if (
-    assetName.includes("macos") &&
-    (assetName.includes("aarch64") || assetName.includes("arm64"))
-  )
-    return PlatformType.MACOSARM;
-  if (
-    assetName.includes("macos") &&
-    (assetName.includes("x86_64") || assetName.includes("amd64"))
-  )
-    return PlatformType.MACOSINTEL;
-  return PlatformType.DEBIAN; // Default to Debian if unknown
-}
 ---
 
 <div class="github-releases">
diff --git a/src/components/HeaderSection.astro b/src/components/HeaderSection.astro
@@ -36,11 +36,8 @@ const { title, description, variant = "white" } = Astro.props;
       padding-bottom: 10px;
       text-align: left;
       text-wrap: balance;
+      font-size: calc(3.2rem * var(--font-scale-factor));
       @include typography(title);
-
-      & {
-        font-size: calc(3.2rem * var(--font-scale-factor));
-      }
     }
   }
 </style>
diff --git a/src/components/TextDivider.astro b/src/components/TextDivider.astro
@@ -1,10 +1,5 @@
 ---
 import ContentLimiter from "./ContentLimiter.astro";
-interface Props {
-  text: string;
-  paddingTop?: string;
-  as?: "span" | "h2" | "h3";
-}
 const { text, paddingTop = "3rem", as = "span" } = Astro.props;
 const DividerTag = as;
 ---
diff --git a/src/components/analytics/GTM.astro b/src/components/analytics/GTM.astro
@@ -3,6 +3,8 @@
 const isProd = import.meta.env.PROD as boolean;
 // Get GTM ID from environment variable or use your actual GTM ID
 const GTM_ID = import.meta.env.PUBLIC_GTM_ID || "GTM-XXXXXXX"; // Replace GTM-XXXXXXX with your actual ID
+// Used in template below
+void GTM_ID;
 ---
 
 {
diff --git a/src/components/base/icons/DownloadIcon.tsx b/src/components/base/icons/DownloadIcon.tsx
@@ -1,4 +1,3 @@
-import { PlatformType } from "../types/platform";
 
 interface DownloadIconProps {
   width?: number;
diff --git a/src/components/buttons/StoreButtons.astro b/src/components/buttons/StoreButtons.astro
@@ -1,7 +1,5 @@
 ---
 // StoreButtons.astro: Displays Google Play and Apple App Store badges side by side
-const googlePlayUrl = "https://play.google.com/store/apps/details?id=net.defguard.mobile";
-const appStoreUrl = "https://apps.apple.com/app/idYOUR_APP_ID";
 ---
 <!-- <div class="store-buttons">
   <a href={googlePlayUrl} target="_blank" rel="noopener noreferrer" aria-label="Get it on Google Play">
diff --git a/src/components/image/ImageCarousel.astro b/src/components/image/ImageCarousel.astro
@@ -19,7 +19,7 @@ const {
 const imageUrls = src.split(',').map(url => url.trim()).filter(url => url.length > 0);
 
 // Generate unique ID for this carousel instance
-const carouselId = `carousel-${Math.random().toString(36).substr(2, 9)}`;
+const carouselId = `carousel-${Math.random().toString(36).slice(2, 11)}`;
 ---
 
 {imageUrls.length === 1 ? (
diff --git a/src/components/image/ImageURL.astro b/src/components/image/ImageURL.astro
@@ -58,7 +58,7 @@ function isExternalUrl(url: string): boolean {
 }
 
 // Function to optimize image URL based on format and quality (for external images)
-function optimizeImageUrl(url: string, format?: string, quality?: number): string {
+function optimizeImageUrl(url: string, _format?: string, _quality?: number): string {
   // For external URLs, we can't optimize them directly
   // But we can add query parameters if the service supports it
   // This is a placeholder for future enhancement
@@ -70,7 +70,7 @@ const isExternal = isExternalUrl(src);
 const processedSrc = isExternal ? optimizeImageUrl(src, format, quality) : src;
 
 // Build srcset for responsive images (basic implementation)
-function buildSrcSet(baseSrc: string): string | undefined {
+function buildSrcSet(_baseSrc: string): string | undefined {
   if (!sizes || isExternal) return undefined;
   
   // For internal images, we could generate different sizes
diff --git a/src/components/product/ProductHeader.astro b/src/components/product/ProductHeader.astro
@@ -20,8 +20,8 @@ import ProductSection from "../../layouts/ProductSection.astro";
     row-gap: var(--product-section-items-gap);
 
     h1 {
-      @include typography(title);
       padding-bottom: 20px;
+      @include typography(title);
     }
 
     & > p {
diff --git a/src/components/video/YouTubeVideo.astro b/src/components/video/YouTubeVideo.astro
@@ -23,8 +23,6 @@ const {
   allowFullscreen = true,
   muted = false,
   rel = false,
-  width,
-  height,
 } = Astro.props;
 
 // Build YouTube embed URL with parameters
diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -60,9 +60,6 @@ const tags = [
 <style lang="scss" is:global>
   #error-page {
     --page-spacing-factor: 0.5;
-    @include break-up(lg) {
-      --page-spacing-factor: 1;
-    }
 
     .flexible-content {
       padding-top: page-spacing(80px);
@@ -80,12 +77,12 @@ const tags = [
       }
 
       .error-number {
-        @include typography(title);
         font-size: 8rem;
         font-weight: 900;
         color: var(--text-body-primary);
         margin-bottom: 1rem;
         line-height: 1;
+        @include typography(title);
         //text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
 
         @media (max-width: 768px) {
@@ -180,5 +177,9 @@ const tags = [
         }
       }
     }
+
+    @include break-up(lg) {
+      --page-spacing-factor: 1;
+    }
   }
 </style>
diff --git a/src/pages/_home/components/FlexibleIdentity/FlexibleIdentitySection.astro b/src/pages/_home/components/FlexibleIdentity/FlexibleIdentitySection.astro
@@ -1,11 +1,5 @@
 ---
-import ElevatedCard from "../../../../components/home/ElevatedCard.astro";
 import HomeSection from "../../../../components/home/HomeSection.astro";
-import google from "./assets/google.png";
-import okta from "./assets/okta.png";
-import ms from "./assets/ms.png";
-import jumpCloud from "./assets/jumpcloud.png";
-import Image from "astro/components/Image.astro";
 ---
 
 <HomeSection id="flexible-identity" variant="gray">
diff --git a/src/pages/_home/components/HomeHeader.astro b/src/pages/_home/components/HomeHeader.astro
@@ -1,9 +1,6 @@
 ---
-import { Image } from "astro:assets";
 import GithubStars from "../../../components/GithubStars/GithubStars";
-import ElevatedCard from "../../../components/home/ElevatedCard.astro";
 import HomeSection from "../../../components/home/HomeSection.astro";
-import headerImage from "/public/images/product/core/hero-image.png";
 import AstroButton from "../../../components/AstroButton.astro";
 import TrustedBy from "./TrustedBy.astro";
 import StoreButtons from "../../../components/buttons/StoreButtons.astro";
diff --git a/src/pages/_home/components/client-side/Testimonials/Testimonials.tsx b/src/pages/_home/components/client-side/Testimonials/Testimonials.tsx
@@ -1,6 +1,6 @@
 import "./style.scss";
 
-import { Fragment, useMemo, useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 
 import ClientMarkdown from "../../../../../components/client-side/ClientMarkdown";
 import type { TestimonialData } from "./type";
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
@@ -256,12 +256,12 @@ const hasCaseStudy =
       }
     });
 
-    // Add anchors to headers
+    // Add anchors to headers (rehype-slug already sets IDs at build time; we only add anchor links)
     const addAnchorsToHeaders = () => {
       const postContent = document.querySelector('.post-content');
       if (!postContent) return;
 
-      // Function to generate a slug from text
+      // Function to generate a slug from text (used only when header has no id)
       const slugify = (text: string): string => {
         return text
           .toLowerCase()
@@ -278,20 +278,19 @@ const hasCaseStudy =
         const text = header.textContent || '';
         if (!text.trim()) return;
 
-        // Generate ID from header text
-        let id = slugify(text);
-        
-        // Ensure unique IDs (in case of duplicate headers)
-        let counter = 1;
-        let uniqueId = id;
-        while (document.getElementById(uniqueId)) {
-          uniqueId = `${id}-${counter}`;
-          counter++;
+        // Use existing ID from rehype-slug if present; otherwise generate one
+        let id = header.id;
+        if (!id) {
+          id = slugify(text);
+          let counter = 1;
+          let uniqueId = id;
+          while (document.getElementById(uniqueId)) {
+            uniqueId = `${id}-${counter}`;
+            counter++;
+          }
+          id = uniqueId;
+          header.id = id;
         }
-        id = uniqueId;
-
-        // Set the ID on the header
-        header.id = id;
 
         // Create anchor link
         const anchor = document.createElement('a');
diff --git a/src/pages/book-a-demo-old.astro b/src/pages/book-a-demo-old.astro
@@ -1,12 +1,9 @@
 ---
-import FeaturesTable from "../components/FeaturesTable/FeaturesTable";
 import Navigation from "../components/base/Navigation.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
 import ProductSection from "../layouts/ProductSection.astro";
 import FlexibleSection from "../components/FlexibleSection.astro";
 import BookDemoForm from "../components/form/BookDemoForm/BookDemoForm";
-import { featuresTableData } from "../data/compare-table";
-import { Button } from "../components/buttons/Button/Button";
 import OrganizationJSONLD from "../scripts/OrganizationJSONLD.astro";
 
 const title = "Zero-Trust WireGuard® 2FA/MFA VPN: Book a Demo";
diff --git a/src/pages/client.astro b/src/pages/client.astro
@@ -1,31 +1,12 @@
 ---
 import Navigation from "../components/base/Navigation.astro";
-import HomeSection from "../components/home/HomeSection.astro";
 import ProductLayout from "../layouts/ProductLayout.astro";
-import Testimonials from "./_home/components/client-side/Testimonials/Testimonials";
-import type { TestimonialData } from "./_home/components/client-side/Testimonials/type";
-import { testimonialSchema } from "./_home/components/client-side/Testimonials/type";
-import FlexibleIdentitySection from "./_home/components/FlexibleIdentity/FlexibleIdentitySection.astro";
 import HomeHeader from "./_home/components/HomeHeader.astro";
-import Roadmap from "./_home/components/Roadmap/Roadmap.astro";
 import FlexibleSection from "../components/FlexibleSection.astro";
 import ServerSidebar from "../components/server/ServerSidebar.astro";
-import signinwith from "/public/images/data/signinwith.png";
-import enrollment from "/public/images/data/enrollment-screen.png";
-import api from "/public/images/data/api.png";
-import Image from "astro/components/Image.astro";
-import YouTubeVideo from "../components/video/YouTubeVideo.astro";
 import CTASection from "../components/CTASection.astro";
 import ImageCarousel from "../components/image/ImageCarousel.astro";
-import ImageURL from "../components/image/ImageURL.astro"
-
-const testimonialsImportData = await Astro.glob("../data/home/testimonials/**/*.md");
-
-const testimonialsData: Array<TestimonialData> = testimonialsImportData.map((val) => {
-  const toValidate = { ...val.frontmatter, markdownRaw: val.rawContent() };
-  const res = testimonialSchema.parse(toValidate);
-  return res;
-});
+import ImageURL from "../components/image/ImageURL.astro";
 
 const title = "defguard - The Best WireGuard® desktop client";
 const featuredImage =
diff --git a/src/pages/compliance.astro b/src/pages/compliance.astro
@@ -56,7 +56,7 @@ const webPageSchema = {
   url={url}
   tags={tags}
 >
-  <script slot="schema" type="application/ld+json" set:html={JSON.stringify(webPageSchema)} />
+  <script is:inline slot="schema" type="application/ld+json" set:html={JSON.stringify(webPageSchema)} />
   <Navigation activeSlug="/compliance/" />
 
   <main id="compliance-page" aria-label="Compliance and certifications">
diff --git a/src/pages/defguard-vs-fortinet.astro b/src/pages/defguard-vs-fortinet.astro
@@ -37,22 +37,6 @@ const tags = [
   "post-breach resilience",
 ];
 
-const sections = [
-  { id: "reasons-to-switch", title: "Reasons to Switch" },
-  { id: "killer-feature", title: "One Control Plane to Rule Them All" },
-  { id: "trusted-by", title: "Trusted by Industry Leaders" },
-  { id: "comparison-matrix", title: "Comparison Matrix" },
-  { id: "architecture", title: "Architecture: Why the Fortinet Monolith is Slow" },
-  { id: "security", title: "Security: Vulnerabilities & The 'Unpatchable' Risk (COATHANGER)" },
-  { id: "authentication", title: "Identity: Native MFA vs. The FortiAuthenticator Trap" },
-  { id: "policy", title: "Access Control: Identity-Based vs. Static IP Rules" },
-  { id: "strategic-difference", title: "Strategic Impact: Hardware Security vs. Software Agility" },
-  { id: "setup", title: "Management & Setup: Automated Provisioning vs. FortiClient EMS" },
-  { id: "cost", title: "Pricing: Transparent Subscription vs. Hidden Licensing Fees" },
-  { id: "bottom-line", title: "The Bottom Line: Why Modern Teams Switch" },
-  { id: "faq", title: "FAQ" },
-];
-
 const faqEntries = [
   {
     question: "Can I replace Fortinet's VPN solution without replacing my FortiGate firewall?",
diff --git a/src/pages/download-confirm.astro b/src/pages/download-confirm.astro
@@ -1,13 +1,9 @@
 ---
-import FeaturesTable from "../components/FeaturesTable/FeaturesTable";
 import Navigation from "../components/base/Navigation.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
 import ProductSection from "../layouts/ProductSection.astro";
 import FlexibleSection from "../components/FlexibleSection.astro";
 import NewsletterSection from "../components/NewsletterSection.astro";
-import YouTubeVideo from "../components/video/YouTubeVideo.astro";
-import { featuresTableData } from "../data/compare-table";
-import { Button } from "../components/buttons/Button/Button";
 import OrganizationJSONLD from "../scripts/OrganizationJSONLD.astro";
 import GithubReleases from "../components/GithubReleases/GithubReleases.astro";
 import ImageURL from "../components/image/ImageURL.astro";
diff --git a/src/pages/download.astro b/src/pages/download.astro
@@ -2,13 +2,10 @@
 import Navigation from "../components/base/Navigation.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
 import { DownloadButtonList } from "../components/download/DownloadButtonList/DownloadButtonList";
-import DownloadVersion from "../components/download/DownloadVersion.astro";
 import DefguardInfo from "../components/download/DownloadInfo/DownloadInfo";
 import NewsletterSection from "../components/NewsletterSection.astro";
 import ProductSection from "../layouts/ProductSection.astro";
 import FlexibleSection from "../components/FlexibleSection.astro";
-import StoreButtons from "../components/buttons/StoreButtons.astro";
-import QRCodeStoreToggle from "../components/buttons/QRCodeStoreToggle.astro";
 import ContentLimiter from "../components/ContentLimiter.astro";
 
 const title = "defguard - Zero-Trust WireGuard® 2FA/MFA VPN: Download";
diff --git a/src/pages/faq.astro b/src/pages/faq.astro
@@ -33,7 +33,7 @@ const sortedFaqItems = faqItems.sort((a, b) => a.data.order - b.data.order);
 const faqSchemaData = {
   "@context": "https://schema.org",
   "@type": "FAQPage",
-  "mainEntity": sortedFaqItems.map((item, index) => ({
+  "mainEntity": sortedFaqItems.map((item) => ({
     "@type": "Question",
     "name": item.data.title,
     "acceptedAnswer": {
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -2,20 +2,13 @@
 import Navigation from "../components/base/Navigation.astro";
 import HomeSection from "../components/home/HomeSection.astro";
 import ProductLayout from "../layouts/ProductLayout.astro";
-import Testimonials from "./_home/components/client-side/Testimonials/Testimonials";
 import TestimonialsGrid from "./_home/components/client-side/TestimonialsGrid/TestimonialsGrid.astro";
 import type { TestimonialData } from "./_home/components/client-side/Testimonials/type";
 import { testimonialSchema } from "./_home/components/client-side/Testimonials/type";
-import FlexibleIdentitySection from "./_home/components/FlexibleIdentity/FlexibleIdentitySection.astro";
 import HomeHeader from "./_home/components/HomeHeader.astro";
-import Roadmap from "./_home/components/Roadmap/Roadmap.astro";
 import FeatureCapsules from "./_home/components/FeatureCapsules.astro";
 import CaseCapsules from "./_home/components/CaseCapsules.astro";
 import FlexibleSection from "../components/FlexibleSection.astro";
-import signinwith from "/public/images/data/signinwith.png";
-import enrollment from "/public/images/data/enrollment-screen.png";
-import api from "/public/images/data/api.png";
-import Image from "astro/components/Image.astro";
 import YouTubeVideo from "../components/video/YouTubeVideo.astro";
 import CTASection from "../components/CTASection.astro";
 import TrustedBy from "./_home/components/TrustedBy.astro";
diff --git a/src/pages/iot.astro b/src/pages/iot.astro
diff --git a/src/pages/openvpn.astro b/src/pages/openvpn.astro
diff --git a/src/pages/partnership.astro b/src/pages/partnership.astro
diff --git a/src/pages/pentesting.astro b/src/pages/pentesting.astro
diff --git a/src/pages/server.astro b/src/pages/server.astro
diff --git a/src/pages/vpn_mfa.astro b/src/pages/vpn_mfa.astro
diff --git a/src/pages/wireguard-client.astro b/src/pages/wireguard-client.astro

Original file line number	Diff line number	Diff line change
`@@ -36,11 +36,8 @@ const { title, description, variant = "white" } = Astro.props;`
`36`	`36`	`padding-bottom: 10px;`
`37`	`37`	`text-align: left;`
`38`	`38`	`text-wrap: balance;`
	`39`	`+ font-size: calc(3.2rem * var(--font-scale-factor));`
`39`	`40`	`@include typography(title);`
`40`		`-`
`41`		`- & {`
`42`		`- font-size: calc(3.2rem * var(--font-scale-factor));`
`43`		`- }`
`44`	`41`	`}`
`45`	`42`	`}`
`46`	`43`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,8 @@`
`3`	`3`	`const isProd = import.meta.env.PROD as boolean;`
`4`	`4`	`// Get GTM ID from environment variable or use your actual GTM ID`
`5`	`5`	`const GTM_ID = import.meta.env.PUBLIC_GTM_ID \|\| "GTM-XXXXXXX"; // Replace GTM-XXXXXXX with your actual ID`
	`6`	`+// Used in template below`
	`7`	`+void GTM_ID;`
`6`	`8`	`---`
`7`	`9`
`8`	`10`	`{`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import { PlatformType } from "../types/platform";`
`2`	`1`
`3`	`2`	`interface DownloadIconProps {`
`4`	`3`	`width?: number;`
Original file line number	Diff line number	Diff line change
`@@ -20,8 +20,8 @@ import ProductSection from "../../layouts/ProductSection.astro";`
`20`	`20`	`row-gap: var(--product-section-items-gap);`
`21`	`21`
`22`	`22`	`h1 {`
`23`		`- @include typography(title);`
`24`	`23`	`padding-bottom: 20px;`
	`24`	`+ @include typography(title);`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`& > p {`