Support json file

app/api/me/projects/[namespace]/[repoId]/route.ts

@@ -108,7 +108,7 @@ export async function GET(
     const allowedFilesExtensions = ["jpg", "jpeg", "png", "gif", "svg", "webp", "avif", "heic", "heif", "ico", "bmp", "tiff", "tif", "mp4", "webm", "ogg", "avi", "mov", "mp3", "wav", "ogg", "aac", "m4a"];
     
     for await (const fileInfo of listFiles({repo, accessToken: user.token as string})) {
-      if (fileInfo.path.endsWith(".html") || fileInfo.path.endsWith(".css") || fileInfo.path.endsWith(".js")) {
+      if (fileInfo.path.endsWith(".html") || fileInfo.path.endsWith(".css") || fileInfo.path.endsWith(".js") || fileInfo.path.endsWith(".json")) {
         const blob = await downloadFile({ repo, accessToken: user.token as string, path: fileInfo.path, raw: true });
         const html = await blob?.text();
         if (!html) {

app/layout.tsx

@@ -114,7 +114,7 @@ export default async function RootLayout({
           data-domain="deepsite.hf.co"
           src="https://plausible.io/js/script.js"
         />
-        <DomainRedirect />
+        {/* <DomainRedirect /> */}
         <IframeDetector />
         <Toaster richColors position="bottom-center" />
         <TanstackContext>

components/editor/ask-ai/context.tsx

@@ -23,6 +23,8 @@ export const Context = () => {
       return <Braces className={size} />;
     } else if (filePath.endsWith(".js")) {
       return <FileCode className={size} />;
+    } else if (filePath.endsWith(".json")) {
+      return <Braces className={size} />;
     } else {
       return <FileText className={size} />;
     }
@@ -52,6 +54,8 @@ export const Context = () => {
               selectedFile && selectedFile.endsWith(".html"),
             "!bg-amber-500/10 !border-amber-500/30 !text-amber-400":
               selectedFile && selectedFile.endsWith(".js"),
+            "!bg-yellow-500/10 !border-yellow-500/30 !text-yellow-400":
+              selectedFile && selectedFile.endsWith(".json"),
           })}
           disabled={
             globalAiLoading || globalEditorLoading || pages.length === 0

components/editor/file-browser/index.tsx

@@ -7,6 +7,7 @@ import {
   Folder,
   ChevronRight,
   ChevronDown,
+  FileJson,
 } from "lucide-react";
 import classNames from "classnames";
 
@@ -197,27 +198,7 @@ export function FileBrowser() {
           </svg>
         );
       case "json":
-        return (
-          <svg className="size-4 shrink-0" viewBox="0 0 32 32" fill="none">
-            <rect width="32" height="32" rx="2" fill="#F7DF1E" />
-            <path
-              d="M16 2L4 8v16l12 6 12-6V8L16 2zm8.8 20.4l-8.8 4.4-8.8-4.4V9.6l8.8-4.4 8.8 4.4v12.8z"
-              fill="#000"
-              opacity="0.15"
-            />
-            <text
-              x="50%"
-              y="50%"
-              dominantBaseline="middle"
-              textAnchor="middle"
-              fill="#000"
-              fontSize="14"
-              fontWeight="600"
-            >
-              {}
-            </text>
-          </svg>
-        );
+        return <FileJson className="size-4 shrink-0 text-amber-400" />;
       default:
         return <FileCode2 className="size-4 shrink-0 text-neutral-400" />;
     }
@@ -249,7 +230,7 @@ export function FileBrowser() {
       case "json":
         return {
           name: "JSON",
-          color: "bg-yellow-500/20 border-yellow-500/30 text-yellow-400",
+          color: "bg-amber-500/20 border-amber-500/30 text-amber-400",
         };
       default:
         return {
@@ -458,6 +439,13 @@ export function FileBrowser() {
                         JS: {pages.filter((p) => p.path.endsWith(".js")).length}
                       </span>
                     </div>
+                    <div className="flex items-center gap-2 text-neutral-500">
+                      <div className="size-2 rounded-full bg-yellow-600" />
+                      <span>
+                        JSON:{" "}
+                        {pages.filter((p) => p.path.endsWith(".json")).length}
+                      </span>
+                    </div>
                   </div>
                 </div>
               </SheetContent>

components/editor/index.tsx

@@ -68,6 +68,7 @@ export const AppEditor = ({
     const path = currentPageData.path;
     if (path.endsWith(".css")) return "css";
     if (path.endsWith(".js")) return "javascript";
+    if (path.endsWith(".json")) return "json";
     return "html";
   }, [currentPageData.path]);
 
@@ -76,6 +77,7 @@ export const AppEditor = ({
     if (editorLanguage === "css") return "CSS copied to clipboard!";
     if (editorLanguage === "javascript")
       return "JavaScript copied to clipboard!";
+    if (editorLanguage === "json") return "JSON copied to clipboard!";
     return "HTML copied to clipboard!";
   }, [editorLanguage]);
 

components/editor/preview/index.tsx

@@ -78,6 +78,9 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
       const jsFiles = pages.filter(
         (p) => p.path.endsWith(".js") && p.path !== previewPageData?.path
       );
+      const jsonFiles = pages.filter(
+        (p) => p.path.endsWith(".json") && p.path !== previewPageData?.path
+      );
 
       let modifiedHtml = html;
 
@@ -147,6 +150,42 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
         });
       }
 
+      // Inject all JSON files as script tags with type="application/json"
+      if (jsonFiles.length > 0) {
+        const allJsonContent = jsonFiles
+          .map(
+            (file) =>
+              `<script type="application/json" data-injected-from="${
+                file.path
+              }" id="${file.path.replace(/[^a-zA-Z0-9]/g, "-")}">\n${
+                file.html
+              }\n</script>`
+          )
+          .join("\n");
+
+        if (modifiedHtml.includes("</body>")) {
+          modifiedHtml = modifiedHtml.replace(
+            "</body>",
+            `${allJsonContent}\n</body>`
+          );
+        } else if (modifiedHtml.includes("<body>")) {
+          modifiedHtml = modifiedHtml + allJsonContent;
+        } else {
+          modifiedHtml = modifiedHtml + "\n" + allJsonContent;
+        }
+
+        jsonFiles.forEach((file) => {
+          const escapedPath = file.path.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+          modifiedHtml = modifiedHtml.replace(
+            new RegExp(
+              `<script\\s+[^>]*src=["'][\\.\/]*${escapedPath}["'][^>]*><\\/script>`,
+              "gi"
+            ),
+            ""
+          );
+        });
+      }
+
       return modifiedHtml;
     },
     [pages, previewPageData?.path]

lib/prompts.ts

@@ -20,7 +20,7 @@ You create website in a way a designer would, using ONLY HTML, CSS and Javascrip
 Try to create the best UI possible. Important: Make the website responsive by using TailwindCSS. Use it as much as you can, if you can't use it, use custom css (make sure to import tailwind with <script src="https://cdn.tailwindcss.com"></script> in the head).
 Also try to elaborate as much as you can, to create something unique, with a great design.
 If you want to use ICONS import Feather Icons (Make sure to add <script src="https://unpkg.com/feather-icons"></script> and <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> in the head., and <script>feather.replace();</script> in the body. Ex : <i data-feather="user"></i>).
-For interactive animations you can use: Vanta.js (Make sure to add <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> and <script>VANTA.GLOBE({...</script> in the body.).
+For interactive animations you can use: Vanta.js (Make sure to add <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> and <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> and <script>VANTA.GLOBE({...</script> in the body.).
 Don't hesitate to use real public API for the datas, you can find good ones here https://github.com/public-apis/public-apis depending on what the user asks for.
 You can create multiple pages website at once (following the format rules below) or a Single Page Application. But make sure to create multiple pages if the user asks for different pages.
 IMPORTANT: To avoid duplicate code across pages, you MUST create separate style.css and script.js files for shared CSS and JavaScript code. Each HTML file should link to these files using <link rel="stylesheet" href="style.css"> and <script src="script.js"></script>.