docs optimization

2023-11-28 16:35:06 +03:30 · 2023-11-28 16:35:06 +03:30 · 9fb90e3aff
parent fee87bc06c
commit 9fb90e3aff
14 changed files with 87 additions and 48 deletions
--- a/src/docs/src/components/Navbar.svelte
+++ b/src/docs/src/components/Navbar.svelte
@ -1,6 +1,5 @@
 <script>
  import Countdown from "svelte-countdown"
-  export let data

  const dateFormat = {
    year: "numeric",
@ -11,9 +10,9 @@
    second: "2-digit",
  }

-  import ThemeChange from "$components/ThemeChange.svelte"
-  import LangChange from "$components/LangChange.svelte"
-  import Search from "$components/Search.svelte"
+  // import ThemeChange from "$components/ThemeChange.svelte"
+  // import LangChange from "$components/LangChange.svelte"
+  // import Search from "$components/Search.svelte"
  import LogoContextMenu from "$components/LogoContextMenu.svelte"
  import ChangelogMenu from "$components/ChangelogMenu.svelte"

@ -133,7 +132,9 @@

      {#if showSearch}
        <div class="hidden w-full max-w-sm lg:flex">
-          <Search {pages} {removeScrollPaddingFromNavbar} {addScrollPaddingToNavbar} />
+          {#await import("./Search.svelte") then Module}
+            <Module.default {pages} {removeScrollPaddingFromNavbar} {addScrollPaddingToNavbar} />
+          {/await}
        </div>
      {/if}
    </div>
@ -157,9 +158,63 @@
          </a>
        </div>
      {/if}
-      <ThemeChange {themes} />
+      {#await import("./ThemeChange.svelte")}
+        <div class="btn btn-ghost cursor-wait">
+          <svg
+            width="20"
+            height="20"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            class="h-5 w-5 stroke-current md:hidden">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01">
+            </path>
+          </svg>
+          <span class="hidden font-normal md:inline">Theme</span>
+          <svg
+            width="12px"
+            height="12px"
+            class="hidden h-2 w-2 fill-current opacity-60 sm:inline-block"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 2048 2048">
+            <path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path>
+          </svg>
+        </div>
+      {:then Module}
+        <Module.default {themes} />
+      {/await}
      {#if showLanguage}
-        <LangChange />
+        {#await import("./LangChange.svelte")}
+          <div class="btn btn-ghost cursor-wait">
+            <svg
+              class="h-5 w-5 fill-current"
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 512 512">
+              <path
+                d="M363,176,246,464h47.24l24.49-58h90.54l24.49,58H480ZM336.31,362,363,279.85,389.69,362Z">
+              </path>
+              <path
+                d="M272,320c-.25-.19-20.59-15.77-45.42-42.67,39.58-53.64,62-114.61,71.15-143.33H352V90H214V48H170V90H32v44H251.25c-9.52,26.95-27.05,69.5-53.79,108.36-32.68-43.44-47.14-75.88-47.33-76.22L143,152l-38,22,6.87,13.86c.89,1.56,17.19,37.9,54.71,86.57.92,1.21,1.85,2.39,2.78,3.57-49.72,56.86-89.15,79.09-89.66,79.47L64,368l23,36,19.3-11.47c2.2-1.67,41.33-24,92-80.78,24.52,26.28,43.22,40.83,44.3,41.67L255,362Z">
+              </path>
+            </svg>
+            <svg
+              width="12px"
+              height="12px"
+              class="hidden h-2 w-2 fill-current opacity-60 sm:inline-block"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 2048 2048">
+              <path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path>
+            </svg>
+          </div>
+        {:then Module}
+          <Module.default />
+        {/await}
      {/if}
    </div>
  </nav>
--- a/src/docs/src/components/Sidebar.svelte
+++ b/src/docs/src/components/Sidebar.svelte
@ -1,7 +1,6 @@
 <script>
  import { page } from "$app/stores"
-  import { readEnv } from "$lib/util"
-  import Search from "$components/Search.svelte"
+  // import Search from "$components/Search.svelte"
  import LogoContextMenu from "$components/LogoContextMenu.svelte"
  import SidebarMenuItem from "$components/SidebarMenuItem.svelte"
  import ChangelogMenu from "$components/ChangelogMenu.svelte"
@ -49,7 +48,9 @@
      switchNavbarStyle ? "shadow-sm" : ""
    }`}>
    <div class="flex w-full">
-      <Search {pages} on:search={closeDrawer} on:focus={openDrawer} />
+      {#await import("./Search.svelte") then Module}
+        <Module.default {pages} on:search={closeDrawer} on:focus={openDrawer} />
+      {/await}
    </div>
  </div>
 {/if}
--- a/src/docs/src/lib/data/testimonials.js
+++ b/src/docs/src/lib/data/testimonials.js
--- a/src/docs/src/lib/scripts/get-twitter-avatars.js
+++ b/src/docs/src/lib/scripts/get-twitter-avatars.js
@ -1,7 +1,7 @@
 import https from "https"
 import fs from "fs"
 import sharp from "sharp"
-import { tweets } from "../testimonials.js"
+import { tweets } from "../data/testimonials.js"

 const downloadImage = (url, filename) => {
  const file = fs.createWriteStream(filename)
--- a/src/docs/src/routes/(docs)/+error.svelte
+++ b/src/docs/src/routes/(docs)/+error.svelte
@ -1,17 +0,0 @@
-<script>
-  import { page } from "$app/stores"
-</script>
-
-<div class="hero not-prose min-h-screen">
-  <div class="hero-content text-center">
-    <div class="max-w-md">
-      <h1 class="mb-5 text-5xl font-bold opacity-10 lg:text-7xl xl:text-9xl">
-        {$page.status}
-      </h1>
-      <p class="mb-5">
-        {$page.message}
-      </p>
-      <a class="btn" href="/">Go back</a>
-    </div>
-  </div>
-</div>
--- a/src/docs/src/routes/(docs)/+page.server.js
+++ b/src/docs/src/routes/(docs)/+page.server.js
@ -4,7 +4,7 @@ import npmDownloadsInfo from "$lib/json/npm-downloads.json"
 import contributors1 from "$lib/json/github-contributors-1.json"
 import contributors2 from "$lib/json/github-contributors-2.json"
 import openCollectiveBackers from "$lib/json/opencollective-members.json"
-import { tweets } from "$lib/testimonials.js"
+import { tweets } from "$lib/data/testimonials.js"
 import { stats } from "$lib/data/stats.js"

 let stargazers_count = 25000
@ -32,6 +32,9 @@ export async function load() {
      (obj, index) => openCollectiveBackers.findIndex((item) => item.name === obj.name) === index
    )
  }
+  // filter unused data
+  contributors = contributors.map(({ login, avatar_url }) => ({ login, avatar_url }))
+  backers = backers.map(({ name, image }) => ({ name, image }))

  return {
    gh_dependents: {
--- a/src/docs/src/routes/(docs)/components/+layout.svelte
+++ b/src/docs/src/routes/(docs)/components/+layout.svelte
@ -1,6 +1,5 @@
 <script>
  import { page } from "$app/stores"
-  import { onMount } from "svelte"
  import "prism-themes/themes/prism-material-dark.min.css"
  import "$lib/style/prism-themes-modify.css"
  export let data
--- a/src/docs/src/routes/(docs)/docs/+layout.svelte
+++ b/src/docs/src/routes/(docs)/docs/+layout.svelte
@ -0,0 +1,6 @@
+<script>
+  import "prism-themes/themes/prism-material-dark.min.css"
+  import "$lib/style/prism-themes-modify.css"
+</script>
+
+<slot />
--- a/src/docs/src/routes/(docs)/docs/+page.svelte
+++ b/src/docs/src/routes/(docs)/docs/+page.svelte
@ -1,15 +0,0 @@
-<script context="module">
-  export async function load() {
-    return {
-      status: 302,
-      redirect: "/docs/install/",
-    }
-  }
-</script>
-
-<script>
-  import { onMount } from "svelte"
-  onMount(() => {
-    window.location.href = "/docs/install/"
-  })
-</script>
--- a/src/docs/src/routes/(docs)/docs/install/+page.server.js
+++ b/src/docs/src/routes/(docs)/docs/install/+page.server.js
@ -1,6 +1,5 @@
 import { exampleRepos } from "$lib/data/exampleRepos.js"
-
-export function load() {
+export async function load() {
  return {
    exampleRepos,
  }
--- a/src/docs/src/routes/(docs)/theme-generator/+page.svelte
+++ b/src/docs/src/routes/(docs)/theme-generator/+page.svelte
@ -1,6 +1,9 @@
 <script>
  /* this file is spaghetti code but it works (hopefully) */

+  import "prism-themes/themes/prism-material-dark.min.css"
+  import "$lib/style/prism-themes-modify.css"
+
  import { onMount } from "svelte"
  import { browser } from "$app/environment"
  import SEO from "$components/SEO.svelte"
--- a/src/docs/src/routes/(redirects)/docs/+page.server.js
+++ b/src/docs/src/routes/(redirects)/docs/+page.server.js
@ -0,0 +1,5 @@
+export const ssr = false
+import { redirect } from "@sveltejs/kit"
+export function load() {
+  throw redirect(301, "https://daisyui.com/docs/install/")
+}
--- a/src/docs/src/routes/+error.svelte
+++ b/src/docs/src/routes/+error.svelte
@ -1,6 +1,5 @@
 <script>
  import { page } from "$app/stores"
-  import "$components/StyleHandler.svelte"
 </script>

 <div class="hero not-prose min-h-screen">
--- a/src/docs/vite.config.js
+++ b/src/docs/vite.config.js
@ -9,6 +9,7 @@ export default defineConfig({
    visualizer({
      emitFile: true,
      filename: "stats.html",
+      template: "treemap",
      brotliSize: true,
    }),
  ],