docs

Author: saadeghi

packages/docs/src/global.css

@@ -249,6 +249,7 @@
   }
 }
 .shiki {
+  text-align: left;
   --shiki-bg: var(--color-neutral);
   --shiki-token: color-mix(
     in oklab,

packages/docs/src/lib/mdsvex/mdsvex.config.js

@@ -146,6 +146,7 @@ const remarkPlugins = [
 export const mdsvexExtensions = [".svx", ".md"]
 
 const config = {
+  smartypants: false,
   extensions: mdsvexExtensions,
   remarkPlugins: remarkPlugins,
   rehypePlugins: rehypePlugins, // Keep rehypePlugins after remarkPlugins

packages/docs/src/lib/scripts/addTranslations.js

@@ -73,29 +73,6 @@ const extractTextFromNode = (node) => {
   return ""
 }
 
-const isInsideCodeBlock = (node, parent) => {
-  if (parent?.type === "code") return true
-  let currentNode = node
-  while (currentNode?.parent) {
-    if (currentNode.parent.type === "code") return true
-    if (isNodeInCodeBlockContext(currentNode)) return true
-    currentNode = currentNode.parent
-  }
-  return false
-}
-
-const isNodeInCodeBlockContext = (node) => {
-  if (!node.parent?.type === "root") return false
-  const nodeStart = node.position?.start?.offset
-  const codeBlocks = node.parent.children.filter(
-    (child) => child.type === "code" && ["html", "jsx"].includes(child.lang),
-  )
-  return codeBlocks.some(
-    (block) =>
-      nodeStart > block.position?.start?.offset && nodeStart < block.position?.end?.offset + 100,
-  )
-}
-
 // Text Filtering
 const shouldSkipText = (text) => {
   // Array of regex patterns with comments explaining each one
@@ -111,30 +88,30 @@ const shouldSkipText = (text) => {
     /^.*\|.*\n\|.*$/, // Skip table-like content with pipe characters
     /^.*\|.*\|.*$/, // Skip lines with multiple pipe characters (likely tables)
     /<[a-z][\s\S]*>/i, // Skip HTML-like content
-    
+
     // HTML tags and attributes
     /^<\w+.*$/i, // Skip strings starting with HTML tags like "<input"
     /^\/>$/, // Skip closing tag fragments like "/>"
     /^class=["'].*["']>$/, // Skip class attributes
     /^min=["'].*["'].*\/>$/, // Skip HTML attribute combinations ending with "/>"
-    
+
     // Special characters and keyboard keys
     /^(ctrl|shift|del)$/, // Skip keyboard key names
     /^[◀︎▶︎↖︎↗︎↙︎↘︎]$/, // Skip arrow symbols
-    /^\.\.\.$/,  // Skip ellipsis
-    
+    /^\.\.\.$/, // Skip ellipsis
+
     // Svelte specific tags
     /^\[svelte:.*\].*$/, // Skip svelte tag references like "[svelte:head]..."
     /^<\/svelte:.*>$/, // Skip closing svelte tags like "</svelte:head>"
-    
+
     // Time formats and units
     /^\d+[hm]$/, // Skip time units like "10h", "24m"
     /^\d+:$/, // Skip time formats like "10:", "24:"
-    
+
     // URLs and domains
     /^https:\/\/$/, // Skip URL protocol
     /^\.\w+$/, // Skip domain extensions like ".com"
-    
+
     // HTML attributes
     /^(type|class|required|placeholder|min|max|title)=["'].*["']$/, // Skip HTML attributes
   ]
@@ -146,34 +123,48 @@ const shouldSkipText = (text) => {
 
   // Additional checks for specific strings that might not be caught by regex
   const specificStringsToSkip = [
-    "...", "ctrl", "shift", "del", "◀︎", "▶︎", "↖︎", "↗︎", "↙︎", "↘︎", 
-    "https://", ".com", "10h", "24m", "10:", "24:"
-  ];
-  
-  if (specificStringsToSkip.includes(text)) return true;
+    "...",
+    "ctrl",
+    "shift",
+    "del",
+    "◀︎",
+    "▶︎",
+    "↖︎",
+    "↗︎",
+    "↙︎",
+    "↘︎",
+    "https://",
+    ".com",
+    "10h",
+    "24m",
+    "10:",
+    "24:",
+  ]
+
+  if (specificStringsToSkip.includes(text)) return true
 
   // Additional check for code blocks using triple backticks
   if (text.includes("```")) return true
 
   // Skip lines with HTML-like content
   if (text.startsWith("<") && (text.includes("/>") || text.includes(">"))) return true
-  
+
   // Skip class attributes
   if (text.includes("class=")) return true
-  
+
   return false
 }
 
 // Additional function to detect if content is within a code block
 export const isWithinCodeBlock = (content, position) => {
   const codeBlockMatches = [...content.matchAll(/```[\s\S]*?```/g)]
-  
+
   for (const match of codeBlockMatches) {
     if (position >= match.index && position < match.index + match[0].length) {
       return true
     }
   }
-  
+
   return false
 }
 
@@ -205,22 +196,6 @@ export const processTableCells = (node) => {
   return tableCellTexts
 }
 
-const extractCellText = (cell) => {
-  let text = ""
-  cell.children?.forEach((child) => {
-    if (["text", "inlineCode"].includes(child.type)) {
-      text += child.value.trim()
-    } else if (child.type === "paragraph") {
-      child.children?.forEach((grandChild) => {
-        if (grandChild.type === "text") {
-          text += grandChild.value.trim()
-        }
-      })
-    }
-  })
-  return text
-}
-
 export const shouldSkipTableCell = (text) =>
   Boolean(text.match(/^[-:]+$/)) || Boolean(text.match(/^\s*$/)) || /{COLOR_NAME}/.test(text)
 
@@ -255,7 +230,7 @@ export const processMarkdownFile = (filePath) => {
 
   // Check for code blocks in the entire content
   const codeBlocks = [...processableContent.matchAll(/```[\s\S]*?```/g)]
-  const codeBlockRanges = codeBlocks.map(match => [match.index, match.index + match[0].length])
+  const codeBlockRanges = codeBlocks.map((match) => [match.index, match.index + match[0].length])
 
   // Split the content by actual newlines in the source
   const lines = processableContent.split(/\r?\n/)
@@ -273,9 +248,9 @@ export const processMarkdownFile = (filePath) => {
 
     // Skip processing if this line is within a code block
     const inCodeBlock = codeBlockRanges.some(
-      ([start, end]) => currentPosition >= start && currentPosition < end
+      ([start, end]) => currentPosition >= start && currentPosition < end,
     )
-    
+
     if (!inCodeBlock) {
       // Process each line as separate markdown content
       const lineAst = unified().use(remarkParse).use(remarkGfm).parse(line)

packages/docs/src/lib/scripts/addTranslations.test.js

@@ -1,7 +1,6 @@
 import { unified } from "unified"
 import remarkParse from "remark-parse"
 import remarkGfm from "remark-gfm"
-import { visit } from "unist-util-visit"
 import { expect, test, beforeEach, afterEach } from "bun:test"
 import { mkdirSync, writeFileSync, rmSync } from "fs"
 import { join } from "path"

packages/docs/src/lib/scripts/cleanTranslations.js

@@ -38,7 +38,7 @@ const getTranslationsFromFile = (file) => {
 export const loadAllTranslations = (files) =>
   files.reduce((acc, file) => ({ ...acc, ...getTranslationsFromFile(file) }), {})
 
-const isTranslationUsed = (content, key, value) => {
+const isTranslationUsed = (content, key) => {
   // Escape special regex characters in the key
   const escapeRegex = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
   const escapedKey = escapeRegex(key)
@@ -94,7 +94,7 @@ const removeUnusedTranslations = (content, unusedTranslations) => {
   const unusedNormalized = new Set(Array.from(unusedTranslations).map(normalizeForComparison))
 
   return Object.fromEntries(
-    Object.entries(content).filter(([key, value]) => {
+    Object.entries(content).filter(([key]) => {
       const normalizedKey = normalizeForComparison(key)
       return !unusedNormalized.has(normalizedKey)
     }),

packages/docs/src/routes/(routes)/docs/editor/+page.md

@@ -44,7 +44,14 @@ Add daisyUI's llms.txt file to your repo so that Copilot can use it by default.
 
 ## <img src="https://img.daisyui.com/images/logos/zed.webp" alt="VSCode" width="40" height="40" class="inline-block me-2 -mt-1 not-prose"> Zed
 
-1. In chat window type this and press <kbd class="kbd">Enter ↵</kbd>
+- In chat window type this and press <kbd class="kbd">Enter ↵</kbd>
   ```sh
   /fetch https://daisyui.com/llms.txt
   ```
+
+## <img src="https://img.daisyui.com/images/logos/windsurf.webp" alt="VSCode" width="40" height="40" class="inline-block me-2 -mt-1 not-prose"> Windsurf
+
+- In chat window type this and write your prompt
+  ```sh
+  @web https://daisyui.com/llms.txt
+  ```

packages/docs/src/routes/(routes)/docs/intro/+page.md

@@ -41,11 +41,11 @@ daisyUI uses the Tailwind CSS plugin API to extend the available Tailwind CSS cl
 ## What's the difference between daisyUI and Tailwind CSS?
 
 Tailwind CSS provides low-level utility classes, which usually include only one CSS rule.  
-daisyUI classes are a combination of multiple CSS rule that are named semantically for each part of the UI.  
+daisyUI classes are a combination of multiple CSS rule that are named semantically for each part of the UI.
 
-For example Tailwind CSS class names decide if padding should be 4px or 8px. daisyUI class names decide if a HTML element should look like a "card", a "button", a "toggle", etc, just like what we would call them semantically in a design system.
+For example Tailwind CSS class names decide if padding should be 4px or 8px. daisyUI class names decide if a HTML element should look like a `card`, a `button`, a `toggle`, etc, just like what we would call them semantically in a design system.
 
-This makes it easier to design interfaces with less code and more consistency. For example if you want to make a card using Tailwind CSS you would have to write one or multiple utility class names for each single CSS rule. Doing this over and over again for each element, for each page, for each project is time consuming and hard to manage. It also makes it harder to maintain your code as you have to always figure out what part of the code is responsible for what part of the UI.  
+This makes it easier to design interfaces with less code and more consistency. For example if you want to make a card using Tailwind CSS you would have to write one or multiple utility class names for each single CSS rule. Doing this over and over again for each element, for each page, for each project is time consuming and hard to manage. It also makes it harder to maintain your code as you have to always figure out what part of the code is responsible for what part of the UI.
 
 daisyUI solves this problem by providing higher level class names that are named based on the UI parts. For example to make a card, we simply use the `card` class name and daisyUI gives you all the necessary CSS rules to make a card. Then if you need additional customization, you can add Tailwind CSS utility classes to the element to make it look the way you want.
 
@@ -55,17 +55,17 @@ daisyUI is not a replacement for Tailwind CSS, it's a plugin that makes Tailwind
 
 Yes! It's utility-first, not utility-only.
 
-daisyUI is built on top of Tailwind CSS's component API. Tailwind CSS as a library provides utility classes and suggests using utility classes for maximum flexibility and customization. However that means slower development and more code to write.  
-That's why many people find it hard to use Tailwind CSS for designing interfaces. It takes a professional designer to make design decisions for many details of the UI to make them look good. It also takes a lot of time to write all the utility class names for each part of the UI. Even copying and pasting those huge chunks of utility class names is not helpful, as it makes the codebase hard to read and maintain.  
+daisyUI is built on top of Tailwind CSS's component API. Tailwind CSS as a library provides utility classes and suggests using utility classes for maximum flexibility and customization. However that's means slower development and more code to write.  
+That's why many people find it hard to use Tailwind CSS for designing interfaces. It takes a professional designer to make design decisions for many details of the UI to make them look good. It also takes a lot of time to write all the utility class names for each part of the UI. Even copying and pasting those huge chunks of utility class names is not helpful, as it makes the codebase hard to read and maintain.
 
 Imagine one side of the spectrum is maximum customization and flexibility and you should make design decisions for every single detail. On the other side of the spectrum is maximum development speed and less code to write, but you have no control over the design. daisyUI and Tailwind CSS together give you the best of both worlds.  
 Use daisyUI class names to write less code and develop faster, and use Tailwind CSS utility classes to customize the design when you need to.
 
 Is it full circle?  
-If you've been using Bootstrap many years ago, you may think it doesn't make sense to go back to using components.  
+If you've been using Bootstrap many years ago, you may think it doesn't make sense to go back to using components.
 
 But here's the catch: The problem with Bootstrap was not class names! Bootstrap class names were actually really fast to work with. The problem was lack of customization and flexibility. At some point every Bootstrap website looked the same unless you open a CSS file and write tons of custom CSS.  
-Tailwind CSS solves this problem of customization and flexibility but the cost is slower development and more code to write! You wanted customization and flexibility? Good luck making design decisions for every single pixel in your page! Not a practical approach, right?  
+Tailwind CSS solves this problem of customization and flexibility but the cost is slower development and more code to write! You wanted customization and flexibility? Good luck making design decisions for every single pixel in your page! Not a practical approach, right?
 
 We need customization development speed at the same time. daisyUI is here to make this possible.
 

packages/docs/src/translation/ar.json

@@ -485,7 +485,7 @@
   "Want to swim in the ocean of thousands of class names and never find your way out.": "Want to swim in the ocean of thousands of class names and never find your way out.",
   "Want to make your codebase a mess and spend hours figuring out what part of the code is responsible for what part of the UI.": "Want to make your codebase a mess and spend hours figuring out what part of the code is responsible for what part of the UI.",
   "Want to waste your time and money re-inventing the wheel instead of shipping your actual project.": "Want to waste your time and money re-inventing the wheel instead of shipping your actual project.",
-  "For example Tailwind CSS class names decide if padding should be 4px or 8px. daisyUI class names decide if a HTML element should look like a \"card\", a \"button\", a \"toggle\", etc, just like what we would call them semantically in a design system.": "For example Tailwind CSS class names decide if padding should be 4px or 8px. daisyUI class names decide if a HTML element should look like a \"card\", a \"button\", a \"toggle\", etc, just like what we would call them semantically in a design system.",
+  "For example Tailwind CSS class names decide if padding should be 4px or 8px. daisyUI class names decide if a HTML element should look like a `card`, a `button`, a `toggle`, etc, just like what we would call them semantically in a design system.": "For example Tailwind CSS class names decide if padding should be 4px or 8px. daisyUI class names decide if a HTML element should look like a `card`, a `button`, a `toggle`, etc, just like what we would call them semantically in a design system.",
   "This makes it easier to design interfaces with less code and more consistency. For example if you want to make a card using Tailwind CSS you would have to write one or multiple utility class names for each single CSS rule. Doing this over and over again for each element, for each page, for each project is time consuming and hard to manage. It also makes it harder to maintain your code as you have to always figure out what part of the code is responsible for what part of the UI.": "This makes it easier to design interfaces with less code and more consistency. For example if you want to make a card using Tailwind CSS you would have to write one or multiple utility class names for each single CSS rule. Doing this over and over again for each element, for each page, for each project is time consuming and hard to manage. It also makes it harder to maintain your code as you have to always figure out what part of the code is responsible for what part of the UI.",
   "daisyUI is not a replacement for Tailwind CSS, it's a plugin that makes Tailwind CSS more powerful and easier to use.": "daisyUI is not a replacement for Tailwind CSS, it's a plugin that makes Tailwind CSS more powerful and easier to use.",
   "Yes! It's utility-first, not utility-only.": "Yes! It's utility-first, not utility-only.",
@@ -925,7 +925,6 @@
   "A hidden checkbox can control the state of modal and labels can toggle the checkbox so we can open/close the modal.": "A hidden checkbox can control the state of modal and labels can toggle the checkbox so we can open/close the modal.",
   "open modal": "open modal",
   "is required for responsivness of the dock in iOS.": "is required for responsivness of the dock in iOS.",
-  "don't re-invent <br/>the wheel <br/>every time": "لا تعد اختراع <br/>العجلة كل مرة",
   "Put Tailwind CSS and daisyUI in your CSS file at `src/` (and remove old styles).": "Put Tailwind CSS and daisyUI in your CSS file at `src/` (and remove old styles).",
   "Install WordPress according to the [Official WordPress guide](https://wordpress.org/download/).": "Install WordPress according to the [Official WordPress guide](https://wordpress.org/download/).",
   "In this guide, we will use the [WindPress](https://wind.press) plugin to install Tailwind CSS and daisyUI in a WordPress project.": "In this guide, we will use the [WindPress](https://wind.press) plugin to install Tailwind CSS and daisyUI in a WordPress project.",
@@ -1156,5 +1155,7 @@
   "When modal is closed, the page will scroll to the top because of the anchor link.": "When modal is closed, the page will scroll to the top because of the anchor link.",
   "Anchor links might not work well on some SPA frameworks. If there are problems, use the other methods": "Anchor links might not work well on some SPA frameworks. If there are problems, use the other methods",
   "The `hr` tag at the beginning or end of each item, displays a line to connect items.": "The `hr` tag at the beginning or end of each item, displays a line to connect items.",
-  "Inbox": "Inbox"
+  "Inbox": "Inbox",
+  "In chat window type this and write your prompt": "In chat window type this and write your prompt",
+  "don't re-invent <br/>the wheel <br/>every time": "لا تعد اختراع <br/>العجلة كل مرة"
 }