Merge branch 'main' into blog-multi-cloud

Author: ebenezerdon

README.md

@@ -15,7 +15,7 @@ The Appwrite Website has been built with the following frameworks:
 
 ## Development
 
-_If this is your first time setting up the repository, please run `pnpm install` inside the repo's directory._
+_If this is your first time setting up the repository, please run `pnpm install` inside the repo's directory and create a `.env` file based on `.env.example`._
 
 To get the repo up and running in your local environment, use the following command:
 

package.json

@@ -12,7 +12,7 @@
         "download-contributors": "node ./scripts/download-contributor-data.js",
         "format": "prettier --write .",
         "format:check": "prettier --check .",
-        "generate:icons": "pnpx svgo -rf src/icons/svg -o src/icons/optimized",
+        "generate:icons": "node ./src/icons/optimize.js",
         "icons:build": "node ./src/icons/build.js",
         "icons:generate": "node ./src/icons/optimize.js && node ./src/icons/build.js",
         "icons:optimize": "node ./src/icons/optimize.js",
@@ -28,15 +28,14 @@
     "dependencies": {
         "@number-flow/svelte": "^0.3.3",
         "h3": "^1.14.0",
-        "melt": "^0.28.2",
         "posthog-js": "^1.210.2",
         "sharp": "^0.33.5"
     },
     "devDependencies": {
         "@appwrite.io/console": "^0.6.4",
         "@appwrite.io/pink": "~0.26.0",
         "@appwrite.io/pink-icons": "~0.26.0",
-        "@appwrite.io/repo": "github:appwrite/appwrite#1.6.x",
+        "@appwrite.io/repo": "github:appwrite/appwrite#feat-multi-region-docs",
         "@eslint/compat": "^1.2.7",
         "@eslint/js": "^9.21.0",
         "@fingerprintjs/fingerprintjs": "^4.5.1",
@@ -54,6 +53,7 @@
         "@types/markdown-it": "^13.0.9",
         "@types/morgan": "^1.9.9",
         "analytics": "^0.8.16",
+        "bits-ui": "^1.3.19",
         "clsx": "^2.1.1",
         "cva": "npm:class-variance-authority@^0.7.1",
         "date-fns": "^3.6.0",
@@ -70,6 +70,7 @@
         "highlight.js": "^11.11.1",
         "markdown-it": "^14.1.0",
         "meilisearch": "^0.37.0",
+        "melt": "^0.29.2",
         "motion": "^10.18.0",
         "node-html-parser": "^6.1.13",
         "openapi-types": "^12.1.3",

pnpm-lock.yaml

@@ -84,12 +84,14 @@
     /* Animations */
     --animate-scale-in: scale-in 200ms ease-out forwards;
     --animate-caret-blink: caret-blink 1s ease-in-out infinite;
-    --animate-text:
-        fade 0.75s ease-in-out both, blur 0.75s ease-in-out both, up 0.75s ease-in-out both;
+    --animate-enter:
+        fade-in 0.75s ease-in-out both, blur 0.75s ease-in-out both, up 0.75s ease-in-out both;
     --animate-scroll: scroll 60s linear infinite;
     --animate-fade-in: fade-in 0.5s ease-in-out both;
     --animate-marquee: marquee var(--speed, 30s) linear infinite var(--direction, forwards);
     --animate-lighting: lighting 1.25s ease-out forwards;
+    --animate-menu-in: menu-in 0.25s ease-out forwards;
+    --animate-menu-out: menu-out 0.25s ease-out forwards;
 
     /* Keyframes */
     @keyframes scale-in {
@@ -168,6 +170,32 @@
         }
     }
 
+    @keyframes menu-in {
+        0% {
+            opacity: 0;
+            filter: blur(2px);
+            transform: translateY(8px);
+        }
+        100% {
+            opacity: 1;
+            filter: blur(0px);
+            transform: translateY(0px);
+        }
+    }
+
+    @keyframes menu-out {
+        0% {
+            opacity: 1;
+            filter: blur(0px);
+            transform: translateY(0px);
+        }
+        100% {
+            opacity: 0;
+            filter: blur(2px);
+            transform: translateY(8px);
+        }
+    }
+
     /* Fonts */
     --font-sans: 'Inter', arial, sans-serif;
     --font-mono: 'Fira Code', monospace;

src/app.css

@@ -11,7 +11,7 @@ const outputPath = resolve(process.cwd(), 'src/lib/components/ui/icon');
 
 const generateIconSprite = () => {
     const files = readdirSync(optimized);
-    const outputDir = resolve(`${outputPath}`);
+    const outputDir = resolve(`${outputPath}/sprite`);
     const spriteOutputPath = resolve(outputDir, 'sprite.svelte');
 
     if (!existsSync(outputDir)) {
@@ -31,7 +31,9 @@ const generateIconSprite = () => {
         const svgMatch = svgContent.match(/<svg[^>]*>([\s\S]*?)<\/svg>/i);
 
         if (svgMatch && svgMatch[1]) {
-            const innerContent = svgMatch[1].trim();
+            const innerContent = svgMatch[1]
+                .trim()
+                .replace(/fill=['"]([^'"]*)['"]/g, 'fill="currentColor"');
             const viewBoxMatch = svgContent.match(/viewBox=['"]([^'"]*)['"]/i);
             const viewBox = viewBoxMatch ? viewBoxMatch[1] : '0 0 24 24';
 
@@ -74,7 +76,10 @@ export const optimizeSVG = async () => {
         showProgressBar: true
     });
 
-    await fixer.fix();
+    await fixer
+        .fix()
+        .then(() => generateIconSprite())
+        .then(() => generateIconType());
 };
 
 export const generateIcons = async () => {
@@ -98,7 +103,5 @@ export const generateIcons = async () => {
         },
         emptyDist: true,
         generateInfoData: true
-    })
-        .then(() => generateIconSprite())
-        .then(() => generateIconType());
+    });
 };