@pandacss/studio 0.0.0-dev-20240212192921 → 0.0.0-dev-20240214192050

package/astro.config.mjs

@@ -1,8 +1,9 @@
 import react from '@astrojs/react'
-import panda from '@pandacss/astro-plugin-studio'
+import studio from '@pandacss/astro-plugin-studio'
 import { defineConfig } from 'astro/config'
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [react(), panda()],
+  devToolbar: { enabled: true },
+  integrations: [react(), studio()],
 })

package/dist/studio.d.mts

@@ -3,10 +3,11 @@ interface BuildOpts {
     configPath: string;
     port?: string;
     host?: boolean;
+    base?: string;
 }
-declare function buildStudio({ outDir, configPath }: BuildOpts): Promise<void>;
-declare function serveStudio({ configPath, port, host, outDir }: BuildOpts): Promise<void>;
-declare function previewStudio({ outDir }: BuildOpts): Promise<void>;
+declare function buildStudio({ outDir, configPath, base }: BuildOpts): Promise<void>;
+declare function serveStudio({ configPath, port, host, outDir, base }: BuildOpts): Promise<void>;
+declare function previewStudio({ outDir, base }: BuildOpts): Promise<void>;
 declare function printUrls(options: {
     host: string;
     port: number;

package/dist/studio.d.ts

@@ -3,10 +3,11 @@ interface BuildOpts {
     configPath: string;
     port?: string;
     host?: boolean;
+    base?: string;
 }
-declare function buildStudio({ outDir, configPath }: BuildOpts): Promise<void>;
-declare function serveStudio({ configPath, port, host, outDir }: BuildOpts): Promise<void>;
-declare function previewStudio({ outDir }: BuildOpts): Promise<void>;
+declare function buildStudio({ outDir, configPath, base }: BuildOpts): Promise<void>;
+declare function serveStudio({ configPath, port, host, outDir, base }: BuildOpts): Promise<void>;
+declare function previewStudio({ outDir, base }: BuildOpts): Promise<void>;
 declare function printUrls(options: {
     host: string;
     port: number;

package/dist/studio.js

@@ -39,7 +39,7 @@ module.exports = __toCommonJS(studio_exports);
 var import_logger = require("@pandacss/logger");
 var import_node_path = require("path");
 var appPath = (0, import_node_path.join)(__dirname, "..");
-async function buildStudio({ outDir, configPath }) {
+async function buildStudio({ outDir, configPath, base }) {
   const astro = await import("astro");
   const { default: react } = await import("@astrojs/react");
   const { default: studio } = await import("@pandacss/astro-plugin-studio");
@@ -49,13 +49,14 @@ async function buildStudio({ outDir, configPath }) {
       outDir,
       root: appPath,
       integrations: [react(), studio()],
-      devToolbar: { enabled: false }
+      devToolbar: { enabled: false },
+      base
     });
   } catch (error) {
     console.log(error);
   }
 }
-async function serveStudio({ configPath, port, host, outDir }) {
+async function serveStudio({ configPath, port, host, outDir, base }) {
   const astro = await import("astro");
   const { default: react } = await import("@astrojs/react");
   const { default: studio } = await import("@pandacss/astro-plugin-studio");
@@ -69,13 +70,14 @@ async function serveStudio({ configPath, port, host, outDir }) {
         port: port ? Number(port) : void 0,
         host
       },
+      base,
       devToolbar: { enabled: false }
     });
   } catch (error) {
     console.log(error);
   }
 }
-async function previewStudio({ outDir }) {
+async function previewStudio({ outDir, base }) {
   const astro = await import("astro");
   const { default: react } = await import("@astrojs/react");
   const { default: studio } = await import("@pandacss/astro-plugin-studio");
@@ -84,7 +86,8 @@ async function previewStudio({ outDir }) {
       outDir,
       root: appPath,
       integrations: [react(), studio()],
-      devToolbar: { enabled: false }
+      devToolbar: { enabled: false },
+      base
     });
   } catch (error) {
     console.log(error);

package/dist/studio.mjs

@@ -9,7 +9,7 @@ var __dirname = /* @__PURE__ */ getDirname();
 import { colors, logger } from "@pandacss/logger";
 import { join } from "node:path";
 var appPath = join(__dirname, "..");
-async function buildStudio({ outDir, configPath }) {
+async function buildStudio({ outDir, configPath, base }) {
   const astro = await import("astro");
   const { default: react } = await import("@astrojs/react");
   const { default: studio } = await import("@pandacss/astro-plugin-studio");
@@ -19,13 +19,14 @@ async function buildStudio({ outDir, configPath }) {
       outDir,
       root: appPath,
       integrations: [react(), studio()],
-      devToolbar: { enabled: false }
+      devToolbar: { enabled: false },
+      base
     });
   } catch (error) {
     console.log(error);
   }
 }
-async function serveStudio({ configPath, port, host, outDir }) {
+async function serveStudio({ configPath, port, host, outDir, base }) {
   const astro = await import("astro");
   const { default: react } = await import("@astrojs/react");
   const { default: studio } = await import("@pandacss/astro-plugin-studio");
@@ -39,13 +40,14 @@ async function serveStudio({ configPath, port, host, outDir }) {
         port: port ? Number(port) : void 0,
         host
       },
+      base,
       devToolbar: { enabled: false }
     });
   } catch (error) {
     console.log(error);
   }
 }
-async function previewStudio({ outDir }) {
+async function previewStudio({ outDir, base }) {
   const astro = await import("astro");
   const { default: react } = await import("@astrojs/react");
   const { default: studio } = await import("@pandacss/astro-plugin-studio");
@@ -54,7 +56,8 @@ async function previewStudio({ outDir }) {
       outDir,
       root: appPath,
       integrations: [react(), studio()],
-      devToolbar: { enabled: false }
+      devToolbar: { enabled: false },
+      base
     });
   } catch (error) {
     console.log(error);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.0.0-dev-20240212192921",
+  "version": "0.0.0-dev-20240214192050",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -48,12 +48,12 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vite": "5.0.12",
-    "@pandacss/config": "0.0.0-dev-20240212192921",
-    "@pandacss/logger": "0.0.0-dev-20240212192921",
-    "@pandacss/shared": "0.0.0-dev-20240212192921",
-    "@pandacss/token-dictionary": "0.0.0-dev-20240212192921",
-    "@pandacss/types": "0.0.0-dev-20240212192921",
-    "@pandacss/astro-plugin-studio": "0.0.0-dev-20240212192921"
+    "@pandacss/config": "0.0.0-dev-20240214192050",
+    "@pandacss/logger": "0.0.0-dev-20240214192050",
+    "@pandacss/shared": "0.0.0-dev-20240214192050",
+    "@pandacss/token-dictionary": "0.0.0-dev-20240214192050",
+    "@pandacss/types": "0.0.0-dev-20240214192050",
+    "@pandacss/astro-plugin-studio": "0.0.0-dev-20240214192050"
   },
   "devDependencies": {
     "@types/react": "18.2.42",

package/src/components/overview.tsx

@@ -5,6 +5,7 @@ import { Yums } from '../icons/yums'
 import { Logo } from '../icons/logo'
 import { Wrap } from '../../styled-system/jsx'
 import { navItems } from '../lib/constants'
+import { getUrl } from '../lib/url'
 
 const buttonRecipe = cva({
   base: {
@@ -49,7 +50,7 @@ export default function Overview() {
         </div>
 
         <div className={hstack({ gap: '6' })}>
-          <a href="/colors" className={buttonRecipe({ variant: 'solid' })}>
+          <a href={getUrl('colors')} className={buttonRecipe({ variant: 'solid' })}>
             Get Started
           </a>
           <a href="https://panda-css.com?ref=studio" target="_blank" className={buttonRecipe({ variant: 'outline' })}>
@@ -64,7 +65,7 @@ export default function Overview() {
               <div key={index}>
                 <a
                   title={item.label}
-                  href={`/${item.id}`}
+                  href={getUrl(item.id)}
                   className={square({
                     size: '20',
                     fontSize: '2xl',

package/src/components/side-nav.astro

@@ -1,6 +1,7 @@
 ---
-import { navItems } from '../lib/constants'
 import { panda, Stack } from '../../styled-system/jsx'
+import { navItems } from '../lib/constants'
+import { getUrl } from "../lib/url"
 import SideNavItem from './side-nav-item.astro'
 ---
 
@@ -12,7 +13,7 @@ import SideNavItem from './side-nav-item.astro'
         {
           navItems
             .filter((item) => item.type === 'token')
-            .map((item) => <SideNavItem href={`/${item.id}`}>{item.label}</SideNavItem>)
+            .map((item) => <SideNavItem href={getUrl(item.id)}>{item.label}</SideNavItem>)
         }
       </panda.ul>
     </div>
@@ -22,7 +23,7 @@ import SideNavItem from './side-nav-item.astro'
         {
           navItems
             .filter((item) => item.type === 'playground')
-            .map((item) => <SideNavItem href={`/${item.id}`}>{item.label}</SideNavItem>)
+            .map((item) => <SideNavItem href={getUrl(item.id)}>{item.label}</SideNavItem>)
         }
       </panda.ul>
     </div>

package/src/lib/url.ts

@@ -0,0 +1,3 @@
+export const getUrl = (path?: string) => {
+  return [import.meta.env.BASE_URL, path].filter(Boolean).join('')
+}