0.0.3

Craftidraw · Dec 28, 2024 · 273fbe6 · 273fbe6
2 parents ef04b2a + e2476ea
commit 273fbe6
Show file tree

Hide file tree

Showing 37 changed files with 935 additions and 508 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,3 +6,7 @@
 
 # Temporary
 /apps/app/
+
+# IDE
+/.idea/
+/.vscode/
diff --git a/apps/root/.gitignore b/apps/root/.gitignore
@@ -43,4 +43,7 @@ yarn-error.log*
 *.tsbuildinfo
 
 # idea files
-.idea
+.idea
+/public/robots.txt
+/public/sitemap.xml
+/public/sitemap-0.xml
diff --git a/apps/root/next-sitemap.config.js b/apps/root/next-sitemap.config.js
@@ -0,0 +1,7 @@
+/** @type {import('next-sitemap').IConfig} */
+const nextSitemapConfig = {
+    siteUrl: 'https://craftidraw.com',
+    generateRobotsTxt: true,
+}
+
+export default nextSitemapConfig;
diff --git a/apps/root/src/app/layout.tsx b/apps/root/src/app/layout.tsx
@@ -5,15 +5,70 @@ import '~/styles/globals.scss';
 import React from 'react';
 
 export const metadata: Metadata = {
-    title: 'Craftidraw',
-    description: 'Design your projects easily.',
+    metadataBase: new URL('https://craftidraw.com'),
+    title: 'Craftidraw | Asset Design Tool',
+    description:
+        'Create, collaborate, and design game assets, UI mockups, and system diagrams easily. Craftidraw offers an intuitive whiteboard for game developers, designers, and teams to visualize and prototype their next project.',
+
+    openGraph: {
+        title: 'Craftidraw | Asset Design Tool',
+        description:
+            'Create, collaborate, and design game assets, UI mockups, and system diagrams easily. Perfect for game developers and design teams.',
+        type: 'website',
+        images: [{ url: '/og-image.jpg', width: 1200, height: 630 }],
+    },
+
+    twitter: {
+        card: 'summary_large_image',
+        title: 'Craftidraw - Asset Design Tool',
+        description:
+            'Design assets and systems collaboratively. Real-time whiteboarding for game developers and teams.',
+    },
+
+    keywords: [
+        'game asset design',
+        'game development tool',
+        'collaborative whiteboard',
+        'game UI mockup',
+        'system design tool',
+        'game prototyping',
+        'real-time collaboration',
+        'game design platform',
+        'gaming assets',
+        'team collaboration',
+        'item design',
+        'item designer',
+        'game design',
+        'game design tool',
+        'minecraft',
+        'roblox',
+        'ui design',
+        'ui mockup',
+        'asset design',
+    ],
+
+    authors: [{ name: 'flrp', url: 'https://github.com/flrping' }],
+    creator: 'Craftidraw',
+    publisher: 'Craftidraw',
     icons: [{ rel: 'icon', url: '/favicon.ico' }],
+
+    robots: {
+        index: true,
+        follow: true,
+        googleBot: {
+            index: true,
+            follow: true,
+            'max-video-preview': -1,
+            'max-image-preview': 'large',
+            'max-snippet': -1,
+        },
+    },
 };
 
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
     return (
         <html lang='en'>
-            <Script src='https://kit.fontawesome.com/baba299d4a.js' strategy='afterInteractive' />
+            <Script src='https://kit.fontawesome.com/baba299d4a.js' crossOrigin="anonymous" strategy='afterInteractive' />
             <body>
                 <AppProviders>{children}</AppProviders>
             </body>

diff --git a/apps/root/src/app/page.tsx b/apps/root/src/app/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import createCUID from '~/lib/cuid/createCUID';
 import { useAppDispatch } from '~/lib/store/hooks';
 import { setBoard, setItems, updateBoard } from '~/lib/store/features/appSlice';
@@ -14,9 +14,10 @@ import LibraryAnchor from '~/components/modal/anchors/LibraryAnchor';
 import CustomExportsAnchor from '~/components/modal/anchors/CustomExportsAnchor';
 import CustomTooltipsAnchor from '~/components/modal/anchors/CustomTooltipsAnchor';
 import type Konva from 'konva';
-
 import dynamic from 'next/dynamic';
 import { StageProvider } from '~/providers/StageProvider';
+import { fixItem, validateItem } from '~/lib/validate/validateItem';
+import Loader from '~/components/common/Loader';
 
 const Canvas = dynamic(() => import('~/components/canvas/Canvas'), {
     ssr: false,
@@ -25,6 +26,7 @@ const Canvas = dynamic(() => import('~/components/canvas/Canvas'), {
 export default function Home() {
     const stageRef = useRef<Konva.Stage>(null);
     const dispatch = useAppDispatch();
+    const [isPopulated, setIsPopulated] = useState(false);
 
     useEffect(() => {
         const storedBoard = localStorage.getItem('board');
@@ -57,12 +59,31 @@ export default function Home() {
 
         const storedItems = localStorage.getItem('items');
         if (storedItems) {
-            const parsedItems = JSON.parse(storedItems) as Item[];
-            dispatch(setItems(parsedItems));
+            const parsedItems = JSON.parse(storedItems);
+            const processedItems: Item[] = [];
+
+            for (const item of parsedItems) {
+                const itemStr = JSON.stringify(item);
+                const validatedItem = validateItem(itemStr);
+
+                if (validatedItem.status) {
+                    processedItems.push(validatedItem.item!);
+                } else {
+                    const fixedItem = fixItem(itemStr);
+                    if (fixedItem) {
+                        processedItems.push(fixedItem);
+                    }
+                }
+            }
+
+            localStorage.setItem('items', JSON.stringify(processedItems));
+            dispatch(setItems(processedItems));
         } else {
             localStorage.setItem('items', JSON.stringify([]));
             dispatch(setItems([]));
         }
+
+        setIsPopulated(true);
     }, []);
 
     return (
@@ -73,12 +94,12 @@ export default function Home() {
                     <BoardFooter stageRef={stageRef} />
                 </div>
                 <OptionsBar />
-                <Canvas />
+                {isPopulated ? <Canvas /> : <Loader />}
+                <NotificationAnchor />
+                <LibraryAnchor />
+                <CustomExportsAnchor />
+                <CustomTooltipsAnchor />
             </StageProvider>
-            <NotificationAnchor />
-            <LibraryAnchor />
-            <CustomExportsAnchor />
-            <CustomTooltipsAnchor />
         </div>
     );
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "craftidraw",
-    "version": "0.0.1",
+    "version": "0.0.3",
     "main": "index.js",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
@@ -50,6 +50,7 @@
         "@t3-oss/env-nextjs": "^0.10.1",
         "@types/dompurify": "^3.0.5",
         "@types/lodash": "^4.17.11",
+        "babel-plugin-react-compiler": "^19.0.0-beta-df7b47d-20241124",
         "bootstrap": "^5.3.3",
         "dompurify": "^3.1.7",
         "geist": "^1.3.0",
@@ -61,6 +62,7 @@
         "next": "^14.2.4",
         "next-auth": "^4.24.7",
         "next-redux-wrapper": "^8.1.0",
+        "next-sitemap": "^4.2.3",
         "react": "^18.3.1",
         "react-bootstrap": "^2.10.5",
         "react-dom": "^18.3.1",