Merge pull request #4 from hamdymohamedak/main

Enhance logo size and improve documentation layout

Author: hamdymohamedak

.vitepress/Logo.jpg

@@ -394,4 +394,31 @@ function cellText(row: Row, colId: keyof Row["cells"]) {
   color: var(--vp-c-text-3);
   max-width: 52rem;
 }
+
+@media (max-width: 639px) {
+  .cmp-matrix__scroll {
+    border-radius: 12px;
+    margin-inline: 0;
+  }
+
+  .cmp-matrix__table {
+    min-width: 480px;
+    font-size: 0.8125rem;
+  }
+
+  .cmp-matrix__corner,
+  .cmp-matrix__col-head {
+    padding: 0.65rem 0.55rem;
+  }
+
+  .cmp-matrix__row-label {
+    padding: 0.55rem 0.65rem;
+    font-size: 0.78rem;
+  }
+
+  .cmp-pill {
+    font-size: 0.72rem;
+    padding: 0.22rem 0.45rem;
+  }
+}
 </style>

.vitepress/components/ComparisonMatrix.vue

@@ -151,6 +151,13 @@ onUnmounted(() => {
   padding: 8px 0 24px;
 }
 
+@media (max-width: 959px) {
+  .dock {
+    padding: 12px clamp(8px, 3.5vw, 18px) 22px;
+    max-width: min(100%, 400px);
+  }
+}
+
 @media (min-width: 960px) {
   .dock {
     padding: 0;
@@ -304,7 +311,7 @@ onUnmounted(() => {
 
 .spinner {
   position: absolute;
-  right: 8px;
+  inset-inline-end: 8px;
   top: 4px;
   width: 22px;
   height: 22px;
@@ -450,6 +457,74 @@ onUnmounted(() => {
   }
 }
 
+@media (max-width: 639px) {
+  .dock {
+    padding-top: 6px;
+    padding-bottom: 16px;
+    padding-inline: clamp(6px, 3.5vw, 16px);
+    max-width: 100%;
+  }
+
+  .card {
+    border-radius: 14px;
+  }
+
+  .card-top {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+    padding: 12px 14px 10px;
+  }
+
+  .method {
+    align-self: flex-start;
+  }
+
+  .url-wrap {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .url {
+    font-size: 10px;
+  }
+
+  .body {
+    min-height: 140px;
+    padding: 12px 14px 10px;
+  }
+
+  .json {
+    font-size: 10px;
+    line-height: 1.5;
+  }
+
+  .status-line {
+    font-size: 11px;
+    padding-inline-end: 28px;
+  }
+
+  .card-foot {
+    flex-wrap: wrap;
+    padding: 10px 14px 12px;
+  }
+}
+
+@media (max-width: 400px) {
+  .glow {
+    opacity: 0.7;
+    filter: blur(28px);
+  }
+
+  .body {
+    min-height: 128px;
+  }
+
+  .card-top {
+    padding-inline: 12px;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .glow,
   .method.pulse,

.vitepress/components/HomeFetchAnimation.vue

@@ -231,6 +231,7 @@ const localeConfigs = Object.fromEntries(
       lang: string;
       link: string;
       dir?: "ltr" | "rtl";
+      titleTemplate?: string;
       themeConfig: {
         langMenuLabel: string;
         nav: { text: string; link: string }[];
@@ -241,6 +242,7 @@ const localeConfigs = Object.fromEntries(
       label,
       lang: langAttr,
       link: `/${code}/`,
+      titleTemplate: ":title · openFetch",
       themeConfig: {
         langMenuLabel:
           code === "ar"
@@ -257,7 +259,6 @@ const localeConfigs = Object.fromEntries(
             text: LABELS[code].gettingStarted,
             link: `/${code}/getting-started`,
           },
-          { text: LANG_HOME_LABEL[code], link: "/languages/" },
         ],
         sidebar: sidebarFor(code),
         outline: { level: [2, 3] },
@@ -277,15 +278,37 @@ const localeConfigs = Object.fromEntries(
   }
 >;
 
+/** Canonical production URL (no trailing slash); pair with `base` for absolute links in meta tags. */
+const SITE_ORIGIN = "https://openfetch-js.github.io/openfetch-docs";
+
 export default defineConfig({
   // GitHub Pages project site: https://openfetch-js.github.io/openfetch-docs/
   base: "/openfetch-docs/",
   title: "openFetch",
+  titleTemplate: ":title · openFetch",
   description:
-    "Documentation for @hamdymohamedak/openfetch — fetch-based HTTP client with interceptors, middleware, retry, and cache.",
+    "Fetch-native HTTP client for Node 18+, browsers, and edge: interceptors, composable middleware, retry, memory cache, typed errors — no XHR dependency.",
   srcExclude: ["README.md", "skills.md"],
   lastUpdated: true,
+  head: [
+    ["meta", { name: "theme-color", content: "#2563eb" }],
+    ["meta", { name: "application-name", content: "openFetch" }],
+    ["meta", { property: "og:site_name", content: "openFetch" }],
+    ["meta", { name: "twitter:card", content: "summary_large_image" }],
+    [
+      "meta",
+      {
+        property: "og:image",
+        content: `${SITE_ORIGIN}/openfetch-logo.jpg`,
+      },
+    ],
+    ["meta", { property: "og:image:alt", content: "openFetch" }],
+  ],
   themeConfig: {
+    logo: {
+      src: "/openfetch-logo.jpg",
+      alt: "openFetch",
+    },
     search: { provider: "local" },
     socialLinks: [
       {
@@ -310,10 +333,7 @@ export default defineConfig({
       link: "/",
       themeConfig: {
         langMenuLabel: "Language",
-        nav: [
-          { text: "Guide", link: "/getting-started" },
-          { text: "Languages", link: "/languages/" },
-        ],
+        nav: [{ text: "Guide", link: "/getting-started" }],
         sidebar: sidebarRoot(),
         outline: { level: [2, 3] },
       },