diff --git a/next-env.d.ts b/next-env.d.ts index 9edff1c..c4b7818 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -import "./.next/types/routes.d.ts"; +import "./.next/dev/types/routes.d.ts"; // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/src/app/_components/GettingStartedCards.jsx b/src/app/_components/GettingStartedCards.jsx new file mode 100644 index 0000000..f889eac --- /dev/null +++ b/src/app/_components/GettingStartedCards.jsx @@ -0,0 +1,210 @@ +"use client"; + +import Link from "next/link"; + +const cards = [ + { + title: "Cloud Platform", + description: + "Get started with our managed cloud platform. No infrastructure setup required.", + href: "/docs/getting-started/cloud-setup", + image: + "https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/cloud-platform.png", + icon: ( + + + + ), + bgColor: "#f3e8ff", + }, + { + title: "Self-Hosted Installation", + description: + "Deploy SpaceDF on your own infrastructure for complete control and customization.", + href: "/docs/getting-started/self-hosted", + image: + "https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/self-host.png", + icon: ( + + + + ), + bgColor: "#dbeafe", + }, +]; + +export function GettingStartedCards() { + return ( +
+ {cards.map(card => ( + +
+
+ {card.title} +
+
+ {card.icon} + {card.title} + + + + +
+
+ + ))} + + +
+ ); +} diff --git a/src/app/layout.jsx b/src/app/layout.jsx index 470596f..1cf22e1 100644 --- a/src/app/layout.jsx +++ b/src/app/layout.jsx @@ -3,6 +3,7 @@ import {Footer, Layout, Navbar} from "nextra-theme-docs"; import {Banner, Head} from "nextra/components"; import {getPageMap} from "nextra/page-map"; import VersionLabel from "./_components/VersionLabel"; +import ImageZoomProvider from "../components/ImageZoomProvider"; import "nextra-theme-docs/style.css"; import "./globals.css"; @@ -68,42 +69,44 @@ export default async function RootLayout({children}) { }} /> - - πŸš€ SpaceDF v2025.12.19 is now live!{" "} - - Read the release notes - - - } - navbar={navbar} - footer={ - - } - editLink="Edit this page on GitHub" - docsRepositoryBase="https://github.com/Space-DF/spacedf-docs/blob/main" - sidebar={{defaultMenuCollapseLevel: 1}} - pageMap={pageMap} - > - {children} - + + } + navbar={navbar} + footer={ + + } + editLink="Edit this page on GitHub" + docsRepositoryBase="https://github.com/Space-DF/spacedf-docs/blob/main" + sidebar={{defaultMenuCollapseLevel: 1}} + pageMap={pageMap} + > + {children} + + ); diff --git a/src/app/page.mdx b/src/app/page.mdx index 7742151..40aecb6 100644 --- a/src/app/page.mdx +++ b/src/app/page.mdx @@ -1,4 +1,5 @@ -import { Cards } from 'nextra/components' +import {Cards} from "nextra/components"; +import {GettingStartedCards} from "./_components/GettingStartedCards"; # Introduction to SpaceDF @@ -6,29 +7,31 @@ SpaceDF is a comprehensive **IoT platform** that supports multiple protocols and ## Getting Started - - - Get started with our managed cloud platform. No infrastructure setup required - just sign up and start tracking your devices. - - - Deploy SpaceDF on your own infrastructure for complete control and customization. - - + ## Use Case Templates - - **Vehicle & Asset Tracking**: Monitor vehicles, equipment, and mobile assets with real-time location data and route optimization. + + **Vehicle & Asset Tracking**: Monitor vehicles, equipment, and mobile assets + with real-time location data and route optimization. - - **Building Management**: Track assets, people, and equipment within buildings with indoor positioning and space utilization analytics. + + **Building Management**: Track assets, people, and equipment within + buildings with indoor positioning and space utilization analytics. - - **Urban IoT Solutions**: Monitor city infrastructure, public assets, and environmental sensors across urban environments. + + **Urban IoT Solutions**: Monitor city infrastructure, public assets, and + environmental sensors across urban environments. - - **Manufacturing & Logistics**: Track inventory, equipment, and processes in warehouses, factories, and supply chains. + + **Manufacturing & Logistics**: Track inventory, equipment, and processes in + warehouses, factories, and supply chains. @@ -37,14 +40,17 @@ SpaceDF is a comprehensive **IoT platform** that supports multiple protocols and Ready to get started with SpaceDF? Follow these steps to begin your IoT journey: - - Set up SpaceDF in your environment. Choose between cloud platform or self-hosted deployment. + + Set up SpaceDF in your environment. Choose between cloud platform or + self-hosted deployment. - - Register and configure your IoT devices using multiple protocols through the MPA Service. + + Register and configure your IoT devices using multiple protocols through the + MPA Service. - - Create your digital environment and set up tracking templates for your use case. + + Create your digital environment and set up tracking templates for your use + case. @@ -53,11 +59,18 @@ Ready to get started with SpaceDF? Follow these steps to begin your IoT journey: Need help? We're here to support you: - - **Ask questions and share experiences** with other SpaceDF users and developers in our active community forum. + + **Ask questions and share experiences** with other SpaceDF users and + developers in our active community forum. - - **Open source components and issue tracking** - contribute to the project and report issues on our GitHub repositories. + + **Open source components and issue tracking** - contribute to the project + and report issues on our GitHub repositories. diff --git a/src/components/ImageZoomProvider.jsx b/src/components/ImageZoomProvider.jsx new file mode 100644 index 0000000..5f1f367 --- /dev/null +++ b/src/components/ImageZoomProvider.jsx @@ -0,0 +1,179 @@ +"use client"; + +import {useEffect, useState, useCallback} from "react"; + +export function ImageZoomProvider({children}) { + const [zoomedImage, setZoomedImage] = useState(null); + + const handleClose = useCallback(() => { + setZoomedImage(null); + }, []); + + useEffect(() => { + const handleImageClick = e => { + const target = e.target; + + // Check if clicked element is an image + if (target.tagName !== "IMG") return; + + // Skip if image is inside a link + if (target.closest("a")) return; + + // Skip if image is a GIF + const src = target.src || ""; + if (src.toLowerCase().includes(".gif")) return; + + // Skip small images (icons, logos, etc.) + if (target.naturalWidth < 100 || target.naturalHeight < 100) return; + + // Skip images with specific classes or inside specific containers + if ( + target.closest("nav") || + target.closest("header") || + target.closest("footer") + ) + return; + if (target.classList.contains("no-zoom") || target.closest(".no-zoom")) + return; + + e.preventDefault(); + setZoomedImage({ + src: target.src, + alt: target.alt || "", + }); + }; + + document.addEventListener("click", handleImageClick); + + return () => { + document.removeEventListener("click", handleImageClick); + }; + }, []); + + useEffect(() => { + const handleEscape = e => { + if (e.key === "Escape") { + setZoomedImage(null); + } + }; + + if (zoomedImage) { + document.addEventListener("keydown", handleEscape); + document.body.style.overflow = "hidden"; + } + + return () => { + document.removeEventListener("keydown", handleEscape); + document.body.style.overflow = ""; + }; + }, [zoomedImage]); + + return ( + <> + {children} + + + {zoomedImage && ( +
+ + + + Press ESC or click anywhere to close + + + {zoomedImage.alt} e.stopPropagation()} + style={{ + maxWidth: "92vw", + maxHeight: "88vh", + objectFit: "contain", + borderRadius: "8px", + boxShadow: "0 25px 80px -12px rgba(0, 0, 0, 0.6)", + animation: "imageZoomScaleIn 0.25s ease", + cursor: "default", + }} + /> +
+ )} + + ); +} + +export default ImageZoomProvider; diff --git a/src/content/onboarding.mdx b/src/content/onboarding.mdx index e56dc74..ec9ed90 100644 --- a/src/content/onboarding.mdx +++ b/src/content/onboarding.mdx @@ -2,7 +2,7 @@ title: Onboarding --- -import { Cards } from 'nextra/components' +import {Cards} from "nextra/components"; # Onboarding Guide @@ -23,12 +23,25 @@ Once you create your SpaceDF account, your workspace will be generated automatic An organization acts as the main container for your locations, devices, and users, helping you manage everything in a structured way. **Steps:** + 1. **Add a New Organization**: Click the "Add Organization" button in your workspace + Create Organization 2. **Fill in Required Information**: - **Organization Name**: Enter your organization name - **Organization Slug Name**: Auto-generated (unchangeable after creation) + Create Organization 3. **Choose a Template**: Select from SpaceDF's ready-to-use template library 4. **Wait for Setup**: Your organization will be created in a few seconds + Wait for Setup ## 3. Add Devices to Device Hub @@ -37,13 +50,76 @@ After creating your organization, you can begin adding devices. In Beta stage, S **Device Adding Methods:** - } title="Manual Entry" href="/devices"> + + + + + } + title="Manual Entry" + href="/devices" + > Add single devices manually with DevEUI, JoinEUI, and App Key - } title="CSV Import" href="/devices"> + + + + + } + title="CSV Import" + href="/devices" + > Bulk import multiple devices using CSV file format - } title="QR Code Scan" href="/devices"> + + + + + } + title="QR Code Scan" + href="/devices" + > Scan device QR codes for quick registration (coming soon) @@ -53,12 +129,28 @@ After creating your organization, you can begin adding devices. In Beta stage, S For adding single devices: 1. **Choose Manual Option**: Select device brand and click Next + Add Device 2. **Fill Device Information**: Enter required fields: - **DevEUI**: Device unique identifier - - **JoinEUI**: Join server identifier + - **JoinEUI**: Join server identifier - **App Key**: Application key for authentication + Fill Device Information 3. **Enable Public State** (optional): Make device visible to all organization users + Enable Public Device Status 4. **Select Network**: Choose TTN, ChirpStack, or Helium + Import Device CSV Network 5. **Complete Setup**: Click Next and wait for device to be added to Inventory ### CSV Import for Multiple Devices @@ -68,6 +160,10 @@ For bulk device registration: 1. **Choose Manual Option**: Select device brand and click Next 2. **Click Import CSV**: Upload your prepared CSV file 3. **Download Template** (if needed): Use our pre-formatted CSV template + Import Device CSV 4. **Configure Settings**: Enable Public Device Status if desired 5. **Select Network**: Choose TTN, ChirpStack, or Helium 6. **Import Devices**: Click Next and wait for all devices to be processed @@ -86,10 +182,18 @@ Each organization has its own Space - a dedicated environment for device monitor - Select **Sign Up** if you don't have an account - Select **Sign In** if you already have an account - Use the same email/password or Gmail account from the organization site + Sign In/Sign Up Your Space ### Enable Location Services 4. **Allow Location Access**: When prompted, choose "Allow" to enable location-based features and improve your experience + Allow Location Access ## 5. Add Devices to Your Space @@ -104,15 +208,25 @@ After accessing your Space, add devices from your inventory for monitoring and m 3. **Choose Add Method**: Select your preferred method: #### Auto (QR Code Scan) + - Allow camera access on your device - Scan the QR code on your device - Enter the **Device Name** - Click **Add Device** and **Done** + Add Device QR Code #### Manual Entry + - Enter the **DevEUI** and **Device Name** - Click **Add Device** and **Done** - Device will appear in your device list + Add Device Manual ## 6. Start Tracking @@ -131,12 +245,17 @@ From the Inventory/Devices tabs, you can: - **Delete Devices**: Use the delete (πŸ—‘οΈ) icon to remove devices from inventory - **Toggle Public Visibility**: Control whether devices are visible to all organization users - **Monitor Device Status**: Devices become **Active** when associated with a Space + Device Management ## Next Steps Now that your devices are set up and tracking: 1. **Explore Dashboard Features**: Learn about [dashboard customization](/docs/spaces) +Explore Dashboard Features 2. **Set Up Organizations**: Configure [user roles and permissions](/docs/organizations) 3. **Configure Spaces**: Create [multiple spaces](/docs/spaces) for different locations diff --git a/src/content/organizations.mdx b/src/content/organizations.mdx index 515efdc..d0f58d2 100644 --- a/src/content/organizations.mdx +++ b/src/content/organizations.mdx @@ -123,12 +123,17 @@ The Inventory is used to manage and organize devices before deployment. When a d Admins can also enable **Public Device** on this tab, allowing it to be shared device on the map with all users in the Organization. +In Inventory + ### Devices When devices in the Inventory are added by users to a Space, their status automatically changes to **Active** and they move to the Devices tab, ready for monitoring, data collection, and management within the Space. Devices diff --git a/src/content/spaces.mdx b/src/content/spaces.mdx index 41cf240..cd92951 100644 --- a/src/content/spaces.mdx +++ b/src/content/spaces.mdx @@ -29,7 +29,7 @@ Add an image and name for the new Space, then click **Create Space**. All created Spaces will be displayed as a list and can be accessed by clicking on the Space name. This area also allows you to quickly switch between Spaces using the options menu or keyboard shortcuts. SLUGURL @@ -39,10 +39,22 @@ If you have more than one workspace, or you have been invited into a workspace b When a user switches to another Space, the Dashboard automatically updates to show data for the selected Space. This allows users to monitor different locations or projects while keeping data separate. +Switch Space + ### Change Space Information From the Sidebar, click Space Settings. In the Information tab, you can upload or change the Space image, add, update, or review details such as the Space name, description, creation date, and members. +Space Settings + --- ## Digital Twins @@ -76,12 +88,18 @@ Once you have completed adding devices, your devices will be visually represente The Dashboard is one of the primary overview interfaces of a Space in SpaceDF. Each Space contains exactly one Dashboard, which displays the status, metrics, and activity of all devices associated with that Space. +Dashboard + ### Enable Dashboard In the Space, you will see the Sidebar on the right side. This section allows you to select what to display, such as Digital Twins, Dashboard, or Devices. Tick the Dashboard to display the Dashboard section. You can easily collapse or expand the sidebar using the icon at the top. Dashboard Enable @@ -92,17 +110,11 @@ SpaceDF allows you to fully customize your Dashboard, giving you the flexibility For new users, you need to create a new Dashboard to add widgets. Click **Selected Dashboard** at the top of the Dashboard page, then select **Create a new dashboard**. -Dashboard Create - Enter the **Dashboard name** and click **Create Dashboard** Create Dashboard Modal @@ -152,7 +164,7 @@ SpaceDF supports multiple widget types to cover different monitoring and control By using different widget types together, you can build Dashboards that show both an overall view and detailed information, helping you focus on what matters most. Widget Types @@ -162,7 +174,7 @@ By using different widget types together, you can build Dashboards that show bot Each **Widget** allows you to customize and configure key settings such as **Sources**, **Widget Info**, **Axes**, and **Time frame**, enabling the widget to display data more accurately and in a more meaningful, visual way based on your requirements. Widget Configuration @@ -182,7 +194,7 @@ Widgets can be arranged by dragging them to different positions and resized by c With this level of customization, you can easily create multiple Dashboards using widgets tailored to the needs of different user groups and use cases. Resize Widget @@ -206,6 +218,12 @@ The Device List is part of a Space and serves as the area where you can add devi From the **sidebar**, select **Device List** to easily show or hide this section. You can also drag to resize the panel to adjust the view as needed. +Device List + ### Device Detail With just one click on a selected device, the **Device Details** view will be displayed. At the same time, the map will automatically center on the selected device. @@ -214,6 +232,12 @@ On the **Dashboard** (once widgets have been added and configured), device data Alternatively, you can click on any device directly on the map, and the **Device Details** view will be shown automatically. +Device Detail + From the **Device Details** page, you can view the following information: - **Device Status** @@ -232,6 +256,12 @@ When you click on a trip in the Trip History, you can view the timeline details. In the **map view**, the trip route is visualized as a path, allowing you to clearly see the distance traveled and the movement pattern of the device during that trip. +Trip History + --- ## Member (User)