Merge pull request #95 from HassanZahirnia/increase-docs-max-width

⚡ Improve Docs Layout, Sponsor Assets & Load Performance

Author: simonhamp

package-lock.json

@@ -8,6 +8,7 @@
     "devDependencies": {
         "@alpinejs/collapse": "^3.14.9",
         "@alpinejs/persist": "^3.14.9",
+        "@docsearch/js": "^3.9.0",
         "@fontsource/poppins": "^5.2.5",
         "@tailwindcss/typography": "^0.5.16",
         "alpinejs": "^3.14.9",

package.json

@@ -177,73 +177,3 @@ nav > ul > li > ul {
 .prose pre code.torchlight .summary-caret {
     @apply mr-4;
 }
-
-:root {
-    --docsearch-container-background: rgba(0, 0, 0, 0.5);
-    --docsearch-primary-color: #987af1;
-}
-
-[id='docsearch'] {
-    width: 100%;
-    @apply md:w-auto;
-}
-
-.DocSearch-Button {
-    @apply m-0 flex items-center rounded-lg bg-gray-50 font-normal ring-1 ring-gray-700/40 transition duration-300 ease-out dark:bg-black/30;
-}
-
-.DocSearch-Button:hover {
-    box-shadow: none;
-    @apply bg-gray-100 ring-gray-300 dark:bg-black/50 dark:ring-gray-700/70;
-}
-
-.DocSearch-Button:hover .DocSearch-Button-Placeholder {
-    @apply text-black dark:text-white;
-}
-
-.DocSearch-Button .DocSearch-Search-Icon {
-    height: 0.87rem;
-    @apply text-gray-500 dark:text-white/60;
-}
-
-@media (max-width: 768px) {
-    .DocSearch-Button-Keys,
-    .DocSearch-Button-Placeholder {
-        display: block;
-    }
-}
-
-.DocSearch-Button-Placeholder {
-    @apply hidden pr-20 text-sm text-black/60 min-[520px]:block dark:text-white/60;
-}
-
-.DocSearch-Button-Keys {
-    display: flex;
-    min-width: auto;
-
-    @apply ml-1 mt-1 text-sm leading-none;
-}
-
-.DocSearch-Button-Key {
-    background: none;
-    box-shadow: none;
-    width: auto;
-
-    @apply mr-0.5 font-sans;
-}
-
-.DocSearch-Modal {
-    @apply text-black;
-}
-
-.DocSearch-Screen-Icon {
-    display: none;
-}
-
-.DocSearch-Input {
-    @apply focus-visible:outline-none;
-}
-
-.DocSearch-Form {
-    @apply rounded-lg;
-}

public/img/sponsors/beyondcode-dark.png

@@ -0,0 +1,66 @@
+:root {
+    --docsearch-container-background: rgba(0, 0, 0, 0.5);
+    --docsearch-primary-color: #987af1;
+}
+
+[id='docsearch'] {
+    width: 100%;
+    @apply md:w-auto;
+}
+
+.DocSearch-Button {
+    @apply m-0 flex items-center rounded-lg bg-gray-50 font-normal ring-1 ring-gray-700/40 transition duration-300 ease-out dark:bg-black/30;
+}
+
+.DocSearch-Button:hover {
+    box-shadow: none;
+    @apply bg-gray-100 ring-gray-300 dark:bg-black/50 dark:ring-gray-700/70;
+}
+
+.DocSearch-Button:hover .DocSearch-Button-Placeholder {
+    @apply text-black dark:text-white;
+}
+
+.DocSearch-Button .DocSearch-Search-Icon {
+    height: 0.87rem;
+    @apply text-gray-500 dark:text-white/60;
+}
+
+@media (max-width: 768px) {
+    .DocSearch-Button-Keys,
+    .DocSearch-Button-Placeholder {
+        display: block;
+    }
+}
+
+.DocSearch-Button-Placeholder {
+    @apply hidden pl-1 pr-1 text-sm text-black/60 min-[400px]:block min-[520px]:pr-20 dark:text-white/60;
+}
+
+.DocSearch-Button-Keys {
+    @apply ml-1 mt-1 hidden min-w-[auto] text-sm leading-none min-[520px]:flex;
+}
+
+.DocSearch-Button-Key {
+    background: none;
+    box-shadow: none;
+    width: auto;
+
+    @apply mr-0.5 font-sans;
+}
+
+.DocSearch-Modal {
+    @apply text-black;
+}
+
+.DocSearch-Screen-Icon {
+    display: none;
+}
+
+.DocSearch-Input {
+    @apply focus-visible:outline-none;
+}
+
+.DocSearch-Form {
+    @apply rounded-lg;
+}