fix: link href BASE_URL+ home page

pages/about/index.page.tsx

@@ -1,5 +1,3 @@
-import './code.css'
-
 export { Page }
 
 function Page() {

pages/index/Counter.tsx

@@ -1,12 +1,30 @@
-import { useState } from 'react'
+import { useState } from 'react';
+import { panda } from '../../styled-system/jsx';
 
 export { Counter }
 
 function Counter() {
   const [count, setCount] = useState(0)
   return (
-    <button type="button" onClick={() => setCount((count) => count + 1)}>
+    <panda.button
+      cursor={ "pointer" }
+      paddingBlock={ 5 }
+      paddingInline={ 10 }
+      background={ "bg.accent" }
+      fontWeight={ 700 }
+      boxShadow="0 0 10px rgba(0, 0, 0, 0.4)"
+      transition={ "0.3s ease" }
+      _hover={ {
+      boxShadow:"0 0 15px rgba(0, 0, 0, 0.5)",
+      } }
+      _dark={
+        {
+          color: "bg.surface"
+        }
+      }
+      type="button"
+      onClick={ () => setCount((count) => count + 1) }>
       Counter {count}
-    </button>
+    </panda.button>
   )
 }

pages/index/index.page.tsx

@@ -1,18 +1,46 @@
-import { Counter } from './Counter'
+import { Counter } from "./Counter";
+import { Link } from "../../renderer/Link";
+import { panda } from '../../styled-system/jsx';
 
-export { Page }
+export { Page };
 
 function Page() {
   return (
     <>
-      <h1>Welcome</h1>
+      <panda.h1>
+        🐼 vite-plugin-ssr with{" "}
+        <Link
+          variant="unstyled"
+          href="https://twitter.com/panda__css"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Panda CSS
+        </Link>
+        🐼
+      </panda.h1>
       This page is:
       <ul>
         <li>Rendered to HTML.</li>
         <li>
           Interactive. <Counter />
         </li>
+        <li>
+          Works with :
+          <br />
+          <ul>
+            <li>Server side rendering (ssr)</li>
+            <li>Static site generation (ssg)</li>
+          </ul>
+          💡Prerendered by default using global plugin configuration
+        </li>
+        <li>Small theming example with `panda.config.ts`</li>
+        <li>Including Dark theme ssr compliant 🌕</li>
+        <li>Variant example with the { '"Link"' } component</li>
+        <li>JSX styled system example with the { '"panda"' } component to build the { '"Counter"' } component</li>
+        <li>Global CSS</li>
+        <li>Runtime free ⚡</li>
       </ul>
     </>
-  )
-}
+  );
+}

panda.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from "@pandacss/dev";
-import { globalCss } from "./globalCss";
+import { globalCss } from "./renderer/globalCss";
 
 export default defineConfig({
   // Whether to use css reset
@@ -18,6 +18,12 @@ export default defineConfig({
   // The output directory for your css system
   outdir: "styled-system",
 
+  jsxFactory: "panda",
+
+  minify: true,
+
+  jsxFramework: "react",
+
   globalCss,
 
   theme: {
@@ -112,8 +118,6 @@ export default defineConfig({
             description: "A link",
             base: {
               cursor: "pointer",
-              paddingBlock: 3,
-              paddingInline: 10,
               color: "fg.text",
               textDecoration: "none",
               fontWeight: "bold",
@@ -122,6 +126,8 @@ export default defineConfig({
             variants: {
               variant: {
                 navLink: {
+                  paddingBlock: 3,
+                  paddingInline: 10,
                   backgroundColor: "transparent",
                   _hover: {
                     color: "#000",

renderer/Link.tsx

@@ -8,8 +8,18 @@ export { Link };
 
 function Link({ href, className, children, variant, ...props }: LinkProps) {
   const pageContext = usePageContext();
+  let base = import.meta.env.BASE_URL;
+  let processedHref = href;
+
+  if (href && base && href.startsWith("/")) {
+    if (base.endsWith("/")) {
+      base = base.slice(0, -1);
+    }
+    processedHref = `${base}${href}`;
+  }
+
   return (
-    <a href={href} data-active={pageContext.urlPathname === href ? true : undefined} className={cx(className, link({ variant }))} {...props}>
+    <a href={processedHref} data-active={pageContext.urlPathname === href ? true : undefined} className={cx(className, link({ variant }))} {...props}>
       {children}
     </a>
   );

renderer/PageShell.tsx

@@ -4,7 +4,7 @@ import { PageContextProvider } from './usePageContext'
 import type { PageContext } from './types'
 import './index.css'
 import { Link } from './Link'
-import { css } from '../styled-system/css'
+import { css, cx } from '../styled-system/css'
 import { useColorMode } from './hooks/useColorMode'
 
 export { PageShell }
@@ -26,8 +26,8 @@ function PageShell({ children, pageContext }: { children: React.ReactNode; pageC
              <button
               name="theme-toggle"
               onClick={toggle}
-              className={
-                "panda-theme-toggle-button " +
+              className={cx(
+                "panda-theme-toggle-button",
                 css({
                   position: "relative",
                   display: "flex",
@@ -40,13 +40,13 @@ function PageShell({ children, pageContext }: { children: React.ReactNode; pageC
                   background: "bg.accent",
                   mt: 15,
                   pt: 3,
-                  pl: 7,
+                  pl: 1,
                   cursor: "pointer",
                   boxShadow: "0 0 10px rgba(0, 0, 0, 0.4)",
                   _before: {
                     position: "absolute",
                   },
-                })
+                }))
               }
             />
           </Sidebar>

globalCss.ts → renderer/globalCss.ts

@@ -30,5 +30,25 @@ export const globalCss = defineGlobalStyles({
       content: "'🌙'",
       filter: "brightness(0)",
     },
+  },
+  li: {
+    paddingLeft: "0.25rem",
+    marginLeft: "0.5rem",
+    marginBottom: "0.25rem",
+  },
+  "li::marker": {
+    color: "fg.text",
+    content: "'🐼'",
+  },
+  code: {
+    backgroundColor: "bg.surface",
+    fontFamily: "monospace",
+    padding: "3px 5px",
+    borderRadius: "4px",
+    boxShadow: "0 0 3px rgba(0, 0, 0, 0.2)"
+  },
+  h1: {
+    fontSize: "x-large",
+    paddingBlock: 5
   }
 });