docs: convert all images to webp

saadeghi · Jul 18, 2024 · 1ca6dc0 · 1ca6dc0
1 parent 5240c47
commit 1ca6dc0
Show file tree

Hide file tree

Showing 48 changed files with 375 additions and 354 deletions.
diff --git a/src/docs/src/components/ComponentFooter.svelte b/src/docs/src/components/ComponentFooter.svelte
@@ -233,7 +233,7 @@ $: currentPageIndex = arrayOfPagesInOrder.findIndex((item) => item.href === $pag
       <img
         class="pointer-events-none"
         alt="daisyUI store"
-        src="https://img.daisyui.com/images/store/admin-dashboard.png" />
+        src="https://img.daisyui.com/images/store/admin-dashboard.webp" />
     </a>
   </figure>
   <div
@@ -294,7 +294,7 @@ $: currentPageIndex = arrayOfPagesInOrder.findIndex((item) => item.href === $pag
     <img
       class="pointer-events-none"
       alt="daisyUI store"
-      src="https://img.daisyui.com/images/store/nexus.png" />
+      src="https://img.daisyui.com/images/store/nexus.webp" />
   </figure>
   <div
     class="bg-accent -left-1/5 pointer-events-none absolute bottom-[-50%] aspect-square w-3/4 -translate-x-1/2 rounded-full opacity-20 blur-3xl">

diff --git a/src/docs/src/components/Footer.svelte b/src/docs/src/components/Footer.svelte
@@ -209,7 +209,7 @@ const newtabicon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="2
               loading="lazy"
               width="54"
               height="54"
-              src="https://img.daisyui.com/pouya-saadeghi.jpg"
+              src="https://img.daisyui.com/images/profile/people/pouya-saadeghi.webp"
               alt="Pouya Saadeghi"
               class="mask mask-squircle" />
           </div>

diff --git a/src/docs/src/components/SEO.svelte b/src/docs/src/components/SEO.svelte
@@ -6,7 +6,7 @@ import { readEnv } from "$lib/util"
 let siteData = {
   title: "Tailwind CSS Components ( version 4 update is here )",
   desc: "Free Tailwind Components",
-  card: "https://img.daisyui.com/images/default.jpg",
+  card: "https://img.daisyui.com/images/default.webp",
 }
 export let formatTitle = true
 export let title = ""

diff --git a/src/docs/src/components/homepage/ComponentsPreview.svelte b/src/docs/src/components/homepage/ComponentsPreview.svelte
@@ -420,7 +420,7 @@ export let index
           <img
             width="40"
             height="40"
-            src="https://img.daisyui.com/tailwind-css-component-profile-1@94w.jpg"
+            src="https://img.daisyui.com/images/profile/demo/1@94.webp"
             alt="Tailwind button"
             aria-label="Tailwind CSS button" />
         </div>

diff --git a/src/docs/src/components/homepage/Tweets.svelte b/src/docs/src/components/homepage/Tweets.svelte
@@ -18,7 +18,7 @@ export let tweets
                 class="w-12">
                 <img
                   loading="lazy"
-                  src="{`https://img.daisyui.com/twitter-profile-pics/${tweet.username}-72.webp`}"
+                  src="{`https://img.daisyui.com/images/profile/x/${tweet.username}.webp`}"
                   alt="{tweet.name}"
                   width="48"
                   height="48"

diff --git a/src/docs/src/lib/data/exampleRepos.js b/src/docs/src/lib/data/exampleRepos.js
@@ -2,109 +2,136 @@ export const exampleRepos = [
   {
     name: "Next.js",
     href: "https://stackblitz.com/edit/daisyui-nextjs/",
-    logos: ["https://img.daisyui.com/logos/nextjs.svg"],
+    logos: ["https://img.daisyui.com/images/logos/nextjs.svg"],
   },
   {
     name: "SvelteKit",
     href: "https://stackblitz.com/edit/daisyui-sveltekit/",
-    logos: ["https://img.daisyui.com/logos/svelte.svg"],
+    logos: ["https://img.daisyui.com/images/logos/svelte.svg"],
   },
   {
     name: "Nuxt 3",
     href: "https://stackblitz.com/edit/daisyui-nuxt3/",
-    logos: ["https://img.daisyui.com/logos/nuxtjs.svg"],
+    logos: ["https://img.daisyui.com/images/logos/nuxtjs.svg"],
   },
   {
     name: "Astro",
     href: "https://stackblitz.com/edit/daisyui-astro/",
-    logos: ["https://img.daisyui.com/logos/astro.svg"],
+    logos: ["https://img.daisyui.com/images/logos/astro.svg"],
   },
   {
     name: "Vue.js 3",
     href: "https://stackblitz.com/edit/daisyui-vue-vite/",
-    logos: ["https://img.daisyui.com/logos/vue.svg"],
+    logos: ["https://img.daisyui.com/images/logos/vue.svg"],
   },
   {
     name: "Solid.js",
     href: "https://stackblitz.com/edit/daisyui-solidjs/",
-    logos: ["https://img.daisyui.com/logos/solidjs.svg", "https://img.daisyui.com/logos/vite.svg"],
+    logos: [
+      "https://img.daisyui.com/images/logos/solidjs.svg",
+      "https://img.daisyui.com/images/logos/vite.svg",
+    ],
   },
   {
     name: "Qwik",
     href: "https://stackblitz.com/edit/daisyui-qwik/",
-    logos: ["https://img.daisyui.com/logos/qwik.svg", "https://img.daisyui.com/logos/vite.svg"],
+    logos: [
+      "https://img.daisyui.com/images/logos/qwik.svg",
+      "https://img.daisyui.com/images/logos/vite.svg",
+    ],
   },
   {
     name: "Remix",
     href: "https://stackblitz.com/edit/daisyui-remix/",
-    logos: ["https://img.daisyui.com/logos/remix.svg"],
+    logos: ["https://img.daisyui.com/images/logos/remix.svg"],
   },
   {
     name: "Angular",
     href: "https://stackblitz.com/edit/daisyui-angular/",
-    logos: ["https://img.daisyui.com/logos/angular.svg"],
+    logos: ["https://img.daisyui.com/images/logos/angular.svg"],
   },
   {
     name: "Preact",
     href: "https://stackblitz.com/edit/daisyui-preact-vite/",
-    logos: ["https://img.daisyui.com/logos/preact.svg", "https://img.daisyui.com/logos/vite.svg"],
+    logos: [
+      "https://img.daisyui.com/images/logos/preact.svg",
+      "https://img.daisyui.com/images/logos/vite.svg",
+    ],
   },
   {
     name: "Lit",
     href: "https://stackblitz.com/edit/daisyui-lit-vite/",
-    logos: ["https://img.daisyui.com/logos/lit.svg", "https://img.daisyui.com/logos/vite.svg"],
+    logos: [
+      "https://img.daisyui.com/images/logos/lit.svg",
+      "https://img.daisyui.com/images/logos/vite.svg",
+    ],
   },
   {
     name: "Vite",
     href: "https://stackblitz.com/edit/daisyui-vite/",
-    logos: ["https://img.daisyui.com/logos/vite.svg"],
+    logos: ["https://img.daisyui.com/images/logos/vite.svg"],
   },
   {
     name: "Svelte (Vite)",
     href: "https://stackblitz.com/edit/daisyui-svelte-vite/",
-    logos: ["https://img.daisyui.com/logos/svelte.svg", "https://img.daisyui.com/logos/vite.svg"],
+    logos: [
+      "https://img.daisyui.com/images/logos/svelte.svg",
+      "https://img.daisyui.com/images/logos/vite.svg",
+    ],
   },
   {
     name: "React (Vite)",
     href: "https://stackblitz.com/edit/daisyui-react-vite/",
-    logos: ["https://img.daisyui.com/logos/react.svg", "https://img.daisyui.com/logos/vite.svg"],
+    logos: [
+      "https://img.daisyui.com/images/logos/react.svg",
+      "https://img.daisyui.com/images/logos/vite.svg",
+    ],
   },
   {
     name: "React (Webpack)",
     href: "https://stackblitz.com/edit/daisyui-react-webpack/",
-    logos: ["https://img.daisyui.com/logos/react.svg", "https://img.daisyui.com/logos/webpack.svg"],
+    logos: [
+      "https://img.daisyui.com/images/logos/react.svg",
+      "https://img.daisyui.com/images/logos/webpack.svg",
+    ],
   },
   {
     name: "Refine",
     href: "https://stackblitz.com/edit/daisyui-refine/",
-    logos: ["https://img.daisyui.com/logos/refine.svg", "https://img.daisyui.com/logos/vite.svg"],
+    logos: [
+      "https://img.daisyui.com/images/logos/refine.svg",
+      "https://img.daisyui.com/images/logos/vite.svg",
+    ],
   },
   {
     name: "PostCSS",
     href: "https://stackblitz.com/edit/daisyui-postcss/",
-    logos: ["https://img.daisyui.com/logos/postcss.svg"],
+    logos: ["https://img.daisyui.com/images/logos/postcss.svg"],
   },
   {
     name: "11ty",
     href: "https://stackblitz.com/edit/daisyui-11ty/",
-    logos: ["https://img.daisyui.com/logos/11ty.svg"],
+    logos: ["https://img.daisyui.com/images/logos/11ty.svg"],
   },
   {
     name: "Elm",
     href: "https://stackblitz.com/edit/elm-daisyui/",
-    logos: ["https://img.daisyui.com/logos/elm.svg", "https://img.daisyui.com/logos/vite.svg"],
+    logos: [
+      "https://img.daisyui.com/images/logos/elm.svg",
+      "https://img.daisyui.com/images/logos/vite.svg",
+    ],
   },
   {
     name: "CDN (Tailwind)",
     href: "https://stackblitz.com/edit/daisyui-cdn/",
-    logos: ["https://img.daisyui.com/logos/jsdelivr.svg"],
+    logos: ["https://img.daisyui.com/images/logos/jsdelivr.svg"],
   },
   {
     name: "WordPress (Gust)",
     href: "https://wordpress.org/plugins/gust-daisy-ui",
     logos: [
-      "https://img.daisyui.com/logos/wordpress.svg",
-      "https://img.daisyui.com/logos/gust.svg",
+      "https://img.daisyui.com/images/logos/wordpress.svg",
+      "https://img.daisyui.com/images/logos/gust.svg",
     ],
   },
 ]
diff --git a/src/docs/src/lib/data/store.js b/src/docs/src/lib/data/store.js
@@ -1,47 +1,47 @@
 export const productCustomAttributes = {
   284327: {
-    screenshot: "https://img.daisyui.com/images/store/screenshots/documentation-template.png",
+    screenshot: "https://img.daisyui.com/images/store/screenshots/documentation-template.webp",
     // originalprice: 4900,
     // displayprice: 2900,
     // displaypricenote: "with discount",
     tech: ["astro", "mdx", "daisyui"],
     // tags: ['Use code "JUNE40" for 40% discount'],
   },
   244268: {
-    screenshot: "https://img.daisyui.com/images/store/screenshots/nexus.png",
+    screenshot: "https://img.daisyui.com/images/store/screenshots/nexus.webp",
     tech: ["react", "nextjs", "daisyui"],
     preveiw_url: "https://nexus.daisyui.com/",
   },
   208203: {
-    screenshot: "https://img.daisyui.com/images/store/screenshots/blog-template.png",
+    screenshot: "https://img.daisyui.com/images/store/screenshots/blog-template.webp",
     tech: ["astro", "mdx", "daisyui"],
     tags: ["v1.1 released with new design"],
   },
   185227: {
-    screenshot: "https://img.daisyui.com/images/store/screenshots/app-landingpage.png",
+    screenshot: "https://img.daisyui.com/images/store/screenshots/app-landingpage.webp",
     tech: ["html", "react", "svelte", "vue", "alpine", "daisyui"],
     // tags: ["React + Svelte + Vue versions added"],
   },
   144550: {
-    screenshot: "https://img.daisyui.com/images/store/screenshots/agency-landingpage-react.png",
+    screenshot: "https://img.daisyui.com/images/store/screenshots/agency-landingpage-react.webp",
     tech: ["react", "svelte", "vite", "framer", "daisyui"],
     // originalprice: 1900,
     // displayprice: 1400,
     // displaypricenote: "with discount",
     // tags: ["Svelte version added"],
   },
   142623: {
-    screenshot: "https://img.daisyui.com/images/store/screenshots/saas-landingpage.png",
+    screenshot: "https://img.daisyui.com/images/store/screenshots/saas-landingpage.webp",
     tech: ["html", "react", "svelte", "vue", "alpine", "daisyui"],
     // tags: ["React + Svelte + Vue versions added"],
   },
   130237: {
-    screenshot: "https://img.daisyui.com/images/store/screenshots/auth.png",
+    screenshot: "https://img.daisyui.com/images/store/screenshots/auth.webp",
     tech: ["html", "daisyui"],
     // ref: "VMAme",
   },
   120591: {
-    screenshot: "https://img.daisyui.com/images/store/screenshots/dashboard.png",
+    screenshot: "https://img.daisyui.com/images/store/screenshots/dashboard.webp",
     tech: ["html", "webcomponents", "daisyui"],
     // tags: ["Best Seller"],
     originalprice: 2900,

diff --git a/src/docs/src/lib/data/testimonials.js b/src/docs/src/lib/data/testimonials.js
@@ -240,13 +240,6 @@ export const tweets = [
     username: "mahdix",
     bio: "Software developer",
   },
-  {
-    id: "1783960771673637343",
-    content: "daisyUI is a fantastic and a logical extension of CSS.",
-    name: "",
-    username: "real_JohnHurley",
-    bio: "John Hurley",
-  },
   {
     id: "1787693390756221027",
     content: "daisyUI saved me months of component design.",

diff --git a/src/docs/src/lib/mdsvex-components.svelte b/src/docs/src/lib/mdsvex-components.svelte
@@ -13,7 +13,7 @@ export let desc
 <SEO
   title="{`Tailwind ${title} ${$t('Component')}`}"
   desc="{`Tailwind ${title} examples: ${desc} component`}"
-  img="{`https://img.daisyui.com/images${$page.url.pathname.replace(/\/$/, '')}.jpg`}" />
+  img="{`https://img.daisyui.com/images${$page.url.pathname.replace(/\/$/, '')}.webp`}" />
 
 <div class="flex flex-col-reverse justify-between gap-6 xl:flex-row">
   <div class="prose prose-sm md:prose-base w-full max-w-4xl flex-grow pt-10">

diff --git a/src/docs/src/lib/mdsvex.svelte b/src/docs/src/lib/mdsvex.svelte
@@ -13,7 +13,7 @@ export let desc
 <SEO
   {title}
   {desc}
-  img="{`https://img.daisyui.com/images${$page.url.pathname.replace(/\/$/, '')}.jpg`}" />
+  img="{`https://img.daisyui.com/images${$page.url.pathname.replace(/\/$/, '')}.webp`}" />
 
 <div class="flex flex-col-reverse justify-between gap-6 xl:flex-row">
   <div class="prose prose-sm md:prose-base w-full max-w-4xl flex-grow pt-10">

diff --git a/src/docs/src/lib/scripts/get-twitter-avatars.js b/src/docs/src/lib/scripts/get-twitter-avatars.js
@@ -33,15 +33,16 @@ const processImage = (input, size = 72) => {
   sharp(input)
     .resize(size)
     .webp({ quality: 100 })
-    .toFile(input.replace(".jpg", `-${size}.webp`))
-    .then(() => {
-      // console.log(`Resized ${input}`)
+    .toBuffer((err, buffer) => {
+      fs.writeFile(input.replace(".jpg", ".webp"), buffer, (e) => {
+        fs.unlink(input, () => {})
+      })
     })
 }
 
 tweets.forEach((tweet, index) => {
-  const url = `https://unavatar.io/twitter/${tweet.username}?fallback=false`
-  const filename = `../../../daisyui-images/twitter-profile-pics/${tweet.username}.jpg`
+  const url = `https://unavatar.io/x/${tweet.username}?fallback=false`
+  const filename = `../../../daisyui-images/profile/x/${tweet.username}.jpg`
   setTimeout(() => {
     downloadImage(url, filename)
     console.log(`Updated: ${filename}`)

diff --git a/src/docs/src/routes/(docs)/+page.svelte b/src/docs/src/routes/(docs)/+page.svelte
@@ -469,7 +469,7 @@ const demo_1_ElementTextHandler = $derived(() => {
                                   loading="lazy"
                                   width="40"
                                   height="40"
-                                  src="https://img.daisyui.com/tailwind-css-component-profile-1@94w.jpg"
+                                  src="https://img.daisyui.com/images/profile/demo/1@94.webp"
                                   alt="tailwind css avatar component" />
                               </div>
                             </div>
@@ -1381,7 +1381,7 @@ const demo_1_ElementTextHandler = $derived(() => {
               [1.05, 1]
             )}`}"
             alt="{`daisyUI ${logo}`}"
-            src="{`https://img.daisyui.com/logos/${logo}.svg`}" />
+            src="{`https://img.daisyui.com/images/logos/${logo}.svg`}" />
         {/each}
       </div>
     </div>
@@ -1772,7 +1772,7 @@ const demo_1_ElementTextHandler = $derived(() => {
             width="96"
             height="96"
             class="aspect-square h-10 w-10"
-            src="{`https://img.daisyui.com/logos/${logo}.svg`}"
+            src="{`https://img.daisyui.com/images/logos/${logo}.svg`}"
             alt="{`daisyUI ${logo}`}" />
         {/each}
       </div>