docs

Author: saadeghi

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -6,24 +6,38 @@ body:
     attributes:
       value: |
 
-        Thank you for submitting a bug report 💚  
+        Thank you for submitting a bug report 💚
         If you need help about your project and it's **NOT** a daisyUI bug, please [ask your question in discussion forum](https://github.com/saadeghi/daisyui/discussions/new?category=q-a).
 
         👉 Before you submit a new bug, please do the following steps:
 
-        1. Update your diasyUI (and other dependencies) to the latest version (`npm i -D daisyui@latest`)  
-        2. Read [FAQ](https://github.com/saadeghi/daisyui/discussions/1949). You may find a solution there  
-        3. Search [existing issues](https://github.com/saadeghi/daisyui/issues?q=is%3Aissue) and [discussion forum](https://github.com/saadeghi/daisyui/discussions?discussions_q=). You may find a solution there  
-        4. Make sure this bug is **NOT** specific to a JS framework or a build tool. If the issue doesn't happen on [Tailwind Play](https://daisyui.com/tailwindplay/) it means it's not an issue from daisyUI.  
-        It can be a config problem in your project ([ask here](https://github.com/saadeghi/daisyui/discussions?discussions_q=)) or it can be an issue from your framework or CSS build tools.  
+        1. Update your diasyUI (and other dependencies) to the latest version (`npm i -D daisyui@latest`)
+        2. Read [FAQ](https://github.com/saadeghi/daisyui/discussions/1949). You may find a solution there
+        3. Search [existing issues](https://github.com/saadeghi/daisyui/issues?q=is%3Aissue) and [discussion forum](https://github.com/saadeghi/daisyui/discussions?discussions_q=). You may find a solution there
+        4. Make sure this bug is **NOT** specific to a JS framework or a build tool. If the issue doesn't happen on [Tailwind Play](https://daisyui.com/tailwindplay/) it means it's not an issue from daisyUI.
+        It can be a config problem in your project ([ask here](https://github.com/saadeghi/daisyui/discussions?discussions_q=)) or it can be an issue from your framework or CSS build tools.
         5. Open one issue per problem. Don't list multiple issues in the same page because that would be hard to track.
 
+  - type: input
+    id: reproduction
+    attributes:
+      label: Reproduction URL (Required)
+      description: |
+
+        ℹ️ Please provide a link to a small, minimal example source code where issue can be reproduced. Without a link it will be hard to guess what is the cause of the problem and it will take more time to fix.
+
+        ℹ️ You can use a [Tailwind Play](https://daisyui.com/tailwindplay/) page or a [Stackblitz page](https://stackblitz.com/@saadeghi/collections/daisyui) or a public GitHub repo.
+
+      placeholder: "https://"
+    validations:
+      required: true
+
   - type: input
     id: version
     attributes:
       label: What version of daisyUI are you using?
       description: You can see the daisyUI version number on your `package.json` file.
-      placeholder: "example: v4.0.3"
+      placeholder: "example: v5.0.0"
     validations:
       required: false
 
@@ -42,20 +56,6 @@ body:
         - Edge
         - Other
 
-  - type: input
-    id: reproduction
-    attributes:
-      label: Reproduction URL
-      description: |
-
-        ℹ️ Please provide a link to a small, minimal example source code where issue can be reproduced. Without a link it will be hard to guess what is the cause of the problem and it will take more time to fix.
-
-        ℹ️ You can use a [Tailwind Play](https://daisyui.com/tailwindplay/) page or a [Stackblitz page](https://stackblitz.com/@saadeghi/collections/daisyui) or a public GitHub repo.
-
-      placeholder: "https://"
-    validations:
-      required: true
-
   - type: textarea
     id: description
     attributes:

packages/docs/src/components/homepage/Opensource.svelte

@@ -52,7 +52,9 @@
       </a>
     </p>
     <div class="flex w-full justify-center">
-      <div class="flex w-full max-w-7xl flex-wrap justify-center p-10">
+      <div
+        class="flex w-full max-w-7xl flex-wrap justify-center p-10 max-sm:[&>*:nth-child(n+50)]:hidden"
+      >
         {#each contributors as contributor, index}
           <div class="avatar tooltip p-2" data-tip={contributor}>
             <div
@@ -78,7 +80,9 @@
       </a>
     </p>
     <div class="flex w-full justify-center">
-      <div class="flex w-full max-w-7xl flex-wrap justify-center p-10">
+      <div
+        class="flex w-full max-w-7xl flex-wrap justify-center p-10 max-sm:[&>*:nth-child(n+50)]:hidden"
+      >
         {#each sponsors as sponsor, index}
           <div class="tooltip" data-tip={sponsor.name}>
             {#if sponsor.image}

packages/docs/src/routes/(routes)/+page.server.js

@@ -1,7 +1,7 @@
 import { stats } from "$lib/data/stats.js"
 
 export async function load({ params }) {
-  const response = await fetch("https://img.daisyui.com/data/testimonials.json")
+  const response = await fetch("https://img.daisyui.com/generated/testimonials.json")
   const testimonials = await response.json()
   return {
     testimonials,

packages/docs/src/routes/(routes)/+page.svelte

@@ -134,6 +134,20 @@
   //   count(data)
   //   daisyui5progress = ((trueCount / totalCount) * 100).toFixed(0)
   // })
+
+  function highlight(node) {
+    const content = node.textContent
+    node.innerHTML = content.replace(
+      /\*(.*?)\*/g,
+      "<mark class='-rotate-1 mx-1 scale-105 inline-block bg-[oklch(91.86%_0.2209_102.42)]/35 rounded-[1px] outline-2 outline-[oklch(91.86%_0.2209_102.42)]/35'>$1</mark>",
+    )
+
+    return {
+      destroy() {
+        node.innerHTML = content
+      },
+    }
+  }
 </script>
 
 <svelte:window bind:scrollY bind:innerHeight />
@@ -1613,7 +1627,7 @@
       >
         <div></div>
 
-        {#each ["vue", "react", "svelte", "qwik", "laravel", "nextjs", "solidjs", "preact", "phoenix", "nuxtjs", "astro", "angular", "vite", "laravel"] as logo, index}
+        {#each ["vue", "react", "svelte", "qwik", "laravel", "nextjs", "solidjs", "preact", "phoenix", "nuxtjs", "astro", "angular", "vite", "rails"] as logo, index}
           <img
             loading="lazy"
             width="96"
@@ -2025,12 +2039,18 @@
 <div>
   <div class="h-32"></div>
   <div
-    class="mx-auto grid max-w-5xl grid-cols-1 gap-6 px-10 md:grid-cols-2 lg:grid-cols-3 lg:[&>*:nth-child(3n-1)]:translate-y-16"
+    class="mx-auto max-w-7xl gap-8 px-10 md:columns-2 lg:columns-3 xl:columns-3 max-sm:[&>*:nth-child(n+9)]:hidden"
   >
-    {#each data.testimonials as testimonial, index}
-      <div class="card border-base-content/5 card-sm border text-start">
-        <div class="card-body">
-          <div class="flex items-center gap-2">
+    {#each data.testimonials.testimonials as testimonial, index}
+      <div class="card card-sm bg-base-200 mb-8 break-inside-avoid rounded-ee-[2.5rem] text-start">
+        <div class="card-body gap-5">
+          <p
+            class="text-base-content/70 px-1 text-[0.75rem] leading-[1.75] [text-wrap:balance]"
+            use:highlight
+          >
+            {testimonial.content}
+          </p>
+          <div class="flex flex-row-reverse items-center gap-3">
             <div class="avatar">
               <a
                 href={`https://twitter.com/${testimonial.username}/status/${testimonial.id}`}
@@ -2040,17 +2060,17 @@
               >
                 <div
                   class="size-12 rounded-full"
-                  style="background-image: url('https://img.daisyui.com/generated/x.webp'); background-size:auto 48px;background-position: -{index *
-                    48}px 0px;"
+                  style={`background-image: url('https://img.daisyui.com/generated/x.webp?${data.testimonials.generated_at}'); background-size:auto 48px;background-position: -${
+                    index * 48
+                  }px 0px;`}
                 ></div>
               </a>
             </div>
-            <div class="flex flex-col items-start text-xs">
+            <div class="flex flex-col items-end text-xs">
               <div class="text-base-content font-bold">{testimonial.name}</div>
               <div class="text-base-content/70">{testimonial.bio}</div>
             </div>
           </div>
-          <p class="text-base-content/70">{testimonial.content}</p>
         </div>
       </div>
     {/each}