docs

Author: saadeghi

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

@@ -1,4 +1,5 @@
 <script>
+  import { PUBLIC_DAISYUI_API_PATH } from "$env/static/public"
   import Countup from "svelte-countup"
   import Install from "$components/homepage/Install.svelte"
   import ComponentsPreview from "$components/homepage/ComponentsPreview.svelte"
@@ -15,7 +16,7 @@
   let npm_downloads_count_total = $state(0)
 
   async function fetchStats() {
-    const response = await fetch("https://api.daisyui.com/stats.json")
+    const response = await fetch(`${PUBLIC_DAISYUI_API_PATH}/stats.json`)
     const data = await response.json()
     stargazers_count = data.stargazers_count
     dependents_count = data.dependents_count
@@ -117,7 +118,7 @@
   // let daisyui5progress = $state(0)
 
   // $effect(async () => {
-  //   const response = await fetch("https://api.daisyui.com/api/progress.json")
+  //   const response = await fetch(`${PUBLIC_DAISYUI_API_PATH}/api/progress.json`)
   //   const data = await response.json()
 
   //   let trueCount = 0,

packages/docs/src/routes/(routes)/alternative/[library]/+page.server.js

@@ -1,3 +1,4 @@
+import { PUBLIC_DAISYUI_API_PATH } from "$env/static/public"
 import yaml from "js-yaml"
 import { error } from "@sveltejs/kit"
 
@@ -17,8 +18,8 @@ const fetchYamlData = async (url) => {
   }
 }
 
-const fetchAlternativeData = () => fetchYamlData("https://api.daisyui.com/data/alternative.yaml")
-const fetchCompareData = () => fetchYamlData("https://api.daisyui.com/data/compare.yaml")
+const fetchAlternativeData = () => fetchYamlData(`${PUBLIC_DAISYUI_API_PATH}/data/alternative.yaml`)
+const fetchCompareData = () => fetchYamlData(`${PUBLIC_DAISYUI_API_PATH}/data/compare.yaml`)
 
 const getDeterministicIndex = (seedString, maxIndex) => {
   if (maxIndex <= 0) return 0

packages/docs/src/routes/(routes)/compare/[item]/+page.server.js

@@ -1,9 +1,10 @@
+import { PUBLIC_DAISYUI_API_PATH } from "$env/static/public"
 import yaml from "js-yaml"
 import { error } from "@sveltejs/kit"
 
 async function fetchCompareData() {
   try {
-    const response = await fetch("https://api.daisyui.com/data/compare.yaml")
+    const response = await fetch(`${PUBLIC_DAISYUI_API_PATH}/data/compare.yaml`)
 
     if (!response.ok) {
       throw new Error(`Failed to fetch compare data: ${response.status}`)

packages/docs/src/routes/(routes)/docs/install/+layout.server.js

@@ -1,8 +1,9 @@
+import { PUBLIC_DAISYUI_API_PATH } from "$env/static/public"
 import yaml from "js-yaml"
 
 export async function load() {
   try {
-    const response = await fetch("https://api.daisyui.com/data/frameworks.yaml")
+    const response = await fetch(`${PUBLIC_DAISYUI_API_PATH}/data/frameworks.yaml`)
 
     if (!response.ok) {
       throw new Error(`Failed to fetch frameworks: ${response.status}`)

packages/docs/src/routes/(routes)/docs/install/lit/+page.md

@@ -0,0 +1,62 @@
+---
+title: Install daisyUI for Lit
+desc: How to install Tailwind CSS and daisyUI in a Lit + Vite project
+---
+
+<script>
+  import Translate from "$components/Translate.svelte"
+</script>
+
+### 1. Create a new Vite project
+
+Create a new Vite project in the current directory
+
+```sh:Terminal
+npm create vite@latest ./ -- --template lit
+```
+
+### 2. Install Tailwind CSS and daisyUI
+
+```sh:Terminal
+npm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latest
+```
+
+Add Tailwind CSS to Vite config
+
+```js:vite.config.js
+import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [
+    tailwindcss()
+  ],
+});
+```
+
+Put Tailwind CSS and daisyUI in your CSS file (and remove old styles)
+  
+```postcss:src/index.css
+@import "tailwindcss";
+@plugin "daisyui";
+```
+
+### 3. Make the CSS available for shadow DOM elements
+
+Put this code in `src/my-element.js` file and remove the old code
+```js:src/my-element.js
+import { LitElement, html } from "lit";
+import { unsafeCSS } from "lit";
+import globalStyles from "./index.css?inline";
+
+export class MyElement extends LitElement {
+  static styles = [unsafeCSS(globalStyles)];
+  render() {
+    return html`<button class="btn">daisyUI button</button> `;
+  }
+}
+
+window.customElements.define("my-element", MyElement);
+```
+
+Now you can use daisyUI class names!

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

@@ -1,8 +1,9 @@
+import { PUBLIC_DAISYUI_API_PATH } from "$env/static/public"
 import yaml from "js-yaml"
 
 export async function load() {
   try {
-    const response = await fetch("https://api.daisyui.com/data/roadmap.yaml")
+    const response = await fetch(`${PUBLIC_DAISYUI_API_PATH}/data/roadmap.yaml`)
 
     if (!response.ok) {
       throw new Error(`Failed to fetch roadmap: ${response.status}`)

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

@@ -1,6 +1,7 @@
+import { PUBLIC_DAISYUI_API_PATH } from "$env/static/public"
 export async function load() {
   try {
-    const response = await fetch("https://api.daisyui.com/api/youtube.json")
+    const response = await fetch(`${PUBLIC_DAISYUI_API_PATH}/api/youtube.json`)
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`)
     }

packages/docs/src/routes/(routes)/resources/videos/[id]/+page.server.js

@@ -1,10 +1,11 @@
+import { PUBLIC_DAISYUI_API_PATH } from "$env/static/public"
 import { error } from "@sveltejs/kit"
 import { slugify } from "$lib/util"
 
 export async function load({ params }) {
   try {
     // Fetch videos from API endpoint
-    const response = await fetch("https://api.daisyui.com/api/youtube.json")
+    const response = await fetch(`${PUBLIC_DAISYUI_API_PATH}/api/youtube.json`)
     if (!response.ok) {
       throw error(response.status, "Failed to fetch videos")
     }

packages/docs/src/routes/(routes)/store/+layout.server.js

@@ -1,5 +1,6 @@
-import yaml from "js-yaml"
+import { PUBLIC_DAISYUI_API_PATH } from "$env/static/public"
 import { LEMONSQUEEZY_API_KEY } from "$env/static/private"
+import yaml from "js-yaml"
 
 const LSParams = {
   headers: {
@@ -11,7 +12,7 @@ const LSParams = {
 
 const fetchStoreData = async () => {
   try {
-    const response = await fetch("https://api.daisyui.com/data/store.yaml")
+    const response = await fetch(`${PUBLIC_DAISYUI_API_PATH}/data/store.yaml`)
 
     if (!response.ok) {
       throw new Error(`Failed to fetch store data: ${response.status}`)
@@ -20,7 +21,7 @@ const fetchStoreData = async () => {
     const yamlText = await response.text()
     return yaml.load(yamlText)
   } catch (e) {
-    console.error(`Error loading or parsing YAML from https://api.daisyui.com/data/store.yaml`, e)
+    console.error(`Error loading or parsing YAML`, e)
     throw error(500, "Server configuration error: Could not load data")
   }
 }

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

@@ -1,4 +1,5 @@
 <script>
+  import { PUBLIC_DAISYUI_API_PATH } from "$env/static/public"
   import { onMount } from "svelte"
   import SEO from "$components/SEO.svelte"
   import StoreProduct from "$components/StoreProduct.svelte"
@@ -24,8 +25,8 @@
   const fetchDiscount = (async () => {
     // Fetch both discount types
     const [shorttimeDiscountResponse, specialDiscountResponse] = await Promise.all([
-      fetch("https://api.daisyui.com/api/discount_shorttime.json"),
-      fetch("https://api.daisyui.com/api/discount_special.json"),
+      fetch(`${PUBLIC_DAISYUI_API_PATH}/api/discount_shorttime.json`),
+      fetch(`${PUBLIC_DAISYUI_API_PATH}/api/discount_special.json`),
     ])
 
     // Parse the JSON responses