Quick Start

To begin, please clone the repository and and drag all the assests from public and then drag the sdk folder from the src folder to your project's src folder.

Next, in your main.jsx file import BeanXPRouter from sdk.jsx and wrap it around your app. This is so if there are any errors in the entirety of your App, it will use beansites error handler and use beansites loading screen.

The following is code is a good example:

main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import "./stylesheets/style/default.css"; // if u have one
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { BeanXPRouter } from './sdk/sdk.jsx';
InitializeGoogleAnalytics();
ReactDOM.createRoot(document.getElementById('root'))
.render(<BeanXPRouter>
  <BrowserRouter basename='/'>
    <Routes>
      <Route path="" element={<App/>}/>
    </Routes>
  </BrowserRouter>
</BeanXPRouter>);

This example includes react-router-dom to plan ahead if you plan to have multiple instances. otherwise, ignor it entirely. Wrapping the router in our router adds our loading screen to all pages.

Next, In your App.jsx get started by wrapping the app in the BeansiteXP component. then import the Window component. Both of these have parameters thatt make them modular. Here as an example of how you would configure this usually:

<BeansiteXP 
    config={
      "debugMode": location.hostname=="localhost"?true:false, // has some debug features
      "closedBeta": false, // this was for a closed beta. ignor it. you can create your own access code in "/sdk/modules/closedBetaLogin/jsx"
      "beansitePlugins":[], // for future feature. not implemented yet
    } // its recomended to put this in a file named  and export it, but you can do this too"beansite.config.js"
    startMenuShortcuts={[
      {
        "title":"", // the title of the shortcut
        "icon":"/icons/xp/Information.png", // its icon (this one is from the folders we put in public)
        "win_id":"welcome", // the win id. this is important, as it specifies which window you're trying to open
      },
    ]}>
      <Window 
        // the size of the window. can be anything
        size={{
          "height": "38vmin",
          "width": "58vmin"}} 
        // the position. dont change the first item in the array its from a scrapped feature that broke dragging
        pos={{
          "x":["left","calc(50% - (58vmin / 2) + 10vmin)"],
          "y":["top","calc(50% - (38vmin / 2) - 48px)"],}}
        // title bar options. it includes ll by default, but you can turn them off
        includeTitlebarOptions={{
          "min": true,
          "max": true,
          "close": true,
        }}
        id="welcome" // the actual id. this is how the sdk will communicate with. ex: opening it, closing it, etc.
        title="Welcome" // just the title of the window. you can use states to make it change at will
        icon="/icons/xp/Information.png" // the icon. again, this ones sourced from one of the public folders
        markdownSource={`# markdown goes here (renders before components)`}>
          // children
      </Window> 
</BeansiteXP>

What you say was some of the parameters you will use the most. There are more, and you will probably use them as well. To learn more, refrence the Window component doc. Heres what a standard here what a standard App.jsx file will look like:

beansite.config.js

const config={
    "debugMode": location.hostname=="localhost"?true:false,
    "closedBeta": false,
    "beansitePlugins":[], // for future feature
};
export default config;

App.jsx

import { Component, useEffect, useState } from 'react';
import BeansiteXP, { Window, WinUtils, waitForElm, generateId } from './sdk/sdk';
import "./stylesheets/style/App.css";
import { WelcomeSrc } from './mdsrc';
import BeanpoweredGui from './beanpowered/bpgui';
import config from './beansite.config';
const App=()=>{
  const[count,setCount]=useState(0);
  return(<>
    <BeansiteXP 
      config={config}
      startMenuShortcuts={[
        {
          "title":"Welcome",
          "icon":"/icons/xp/Information.png",
          "win_id":"welcome",
        },
      ]}>
      <Window 
        // customLayer="549"
        size={{
          "height": "38vmin",
          "width": "58vmin"}} 
        pos={{
          "x":["left","calc(50% - (58vmin / 2) + 10vmin)"],
          "y":["top","calc(50% - (38vmin / 2) - 48px)"],}}
        includeTitlebarOptions={{
          "min": true,
          "max": true,
          "close": true,
        }}
        id="welcome"
        title="Welcome"
        icon="/icons/xp/Information.png"
        markdownSource={`# Hello World!`}>
          <h3>Count: ${count}</h3>
         <button onClick={(e)=>{e.preventLife();setCount(count+1);}}>click me</button>
      </Window>
    </BeansiteXP>
  </>);
}
export default App;

By now you should have a completly working Beansite App. If you don't, it's probably my fault for not sleeping. For more info, check out the components and their docs.