Transaction: B56Lup1...agwf

{ "data": { "alem-lib.near": { "widget": { "Index": { "": "\n /** Bundle generated by Além Library v0.0.1-alpha.19 - See more here: https://github.com/wpdas/alem */\n /** Project repository: https://github.com/wpdas/alem-docs-web */\n const isDevelopment = state.alemEnvironment === \"development\";const promisify = (caller, resolve, reject, _timeout) => { const timer = 100; const timeout = _timeout || 10000; let timeoutCheck = 0; const find = () => { const response = caller(); if (response !== undefined && response !== null) { resolve(response); } else { if (timeoutCheck < timeout) { setTimeout(find, timer); timeoutCheck += timer; } else { if (reject) { reject(null); } } } }; find();};const AlemSpinner = () => { const ldsRipple = styled.keyframes` 0% { top: 36px; left: 36px; width: 0; height: 0; opacity: 0; } 4.9% { top: 36px; left: 36px; width: 0; height: 0; opacity: 0; } 5% { top: 36px; left: 36px; width: 0; height: 0; opacity: 1; } 100% { top: 0px; left: 0px; width: 72px; height: 72px; opacity: 0; } `; const SpinnerContainer = styled.div` display: inline-block; position: relative; width: 80px; height: 80px; div { position: absolute; border: 4px solid #000000; opacity: 1; border-radius: 50%; animation-timing-function: cubic-bezier(0, 0.2, 0.8, 1); animation-name: ${ldsRipple}; animation-duration: 1s; animation-iteration-count: infinite; } div:nth-child(2) { animation-delay: -0.5s; } `; return ( <div style={{ margin: \"auto\", paddingTop: \"236px\", width: \"100%\" }}> <div style={{ display: \"flex\", justifyContent: \"center\", alignItems: \"center\", }} > <SpinnerContainer> <div></div> <div></div> </SpinnerContainer> </div> </div> );};State.init({ alemStoreReady: false, alemRouteSystemInitialized: false, alemRouteBlocked: true, alemEnvironment: \"production\", alemConfig_maintainRouteWhenDeveloping: true, alemExternalStylesLoaded: false, alemExternalStylesBody: \"\", stores: [],});if (!state.alemStoreReady) { promisify( () => Storage.privateGet(\"alem:store\"), (storeData) => { if (Object.keys(storeData).length > 1) { State.update({ alemStoreReady: true, ...storeData, stores: storeData?.stores || [], }); } else { State.update({ alemStoreReady: true, stores: [] }); } }, () => { State.update({ alemStoreReady: true, stores: [] }); }, 300, );}if (!state.alemStoreReady) { return \"\";}const removeAlemPropsFromState = (stateObj) => { delete stateObj.alemStoreReady; delete stateObj.alemRouteSystemInitialized; delete stateObj.alemRouteBlocked; delete stateObj.alemEnvironment; delete stateObj.alemConfig_maintainRouteWhenDeveloping; delete stateObj.alemExternalStylesLoaded; delete stateObj.alemExternalStylesBody; return stateObj;};const ALEM_USESTORE_KEY_SEPARATOR = \"::\";const createStore = (storeKey, obj) => { if (!state.stores.includes(storeKey) && obj && state.alemStoreReady) { const initParsedObj = {}; Object.keys(obj).forEach( (key) => (initParsedObj[`${storeKey}${ALEM_USESTORE_KEY_SEPARATOR}${key}`] = obj[key]), ); const updatedStores = state.stores ? [...state.stores, storeKey] : [storeKey]; const updatedState = removeAlemPropsFromState({ ...state, ...initParsedObj, stores: updatedStores, }); State.update(updatedState); Storage.privateSet(\"alem:store\", updatedState); }};const useStore = (storeKey) => { const getParsedObj = {}; Object.keys(state).forEach((key) => { if (key.includes(`${storeKey}${ALEM_USESTORE_KEY_SEPARATOR}`)) { getParsedObj[ key.replace(`${storeKey}${ALEM_USESTORE_KEY_SEPARATOR}`, \"\") ] = state[key]; } }); return { ...getParsedObj, update: (updateObj) => { if (state.alemStoreReady) { const updateParsedObj = {}; Object.keys(updateObj).forEach( (key) => (updateParsedObj[ `${storeKey}${ALEM_USESTORE_KEY_SEPARATOR}${key}` ] = updateObj[key]), ); State.update(updateParsedObj); const updatedState = removeAlemPropsFromState({ ...state }); Storage.privateSet( \"alem:store\", removeAlemPropsFromState(updatedState), ); } }, };};const clearStore = () => { Storage.privateSet(\"alem:store\", {});};const getStore = () => { const storesData = {}; if (state.stores) { const stateKeys = Object.keys(state); state.stores.forEach((storeKey) => { if (!storeKey.includes(\"alem:\")) { stateKeys.forEach((stateKey) => { if (stateKey.includes(storeKey)) { if (!storesData[storeKey]) { storesData[storeKey] = {}; } storesData[storeKey][ stateKey.replace(`${storeKey}${ALEM_USESTORE_KEY_SEPARATOR}`, \"\") ] = state[stateKey]; } }); } }); } return storesData;};createStore(\"alem:routes\", { activeRoute: \"\", type: \"URLBased\", routes: [], parameterName: \"path\",});const useAlemLibRoutesStore = () => useStore(\"alem:routes\");const Routes = ({ routes, type, parameterName }) => { const { parameterName: paramName, activeRoute, update, } = useAlemLibRoutesStore(); update({ parameterName: parameterName ? parameterName : \"path\" }); const routeParamName = paramName || \"path\"; const routeType = type || \"URLBased\"; const checkIfPathIsIncludedToRoutes = (routePath) => { let pathFound = false; if (routes) { routes.forEach((routeItem) => { if (pathFound) return; if (!pathFound) { pathFound = routeItem.path === routePath; } }); } return pathFound; }; const bosProps = props; const maintainRoutesWhenDeveloping = isDevelopment && state.alemConfig_maintainRouteWhenDeveloping; if (routes) { let currentUrlPath = bosProps[routeParamName] && checkIfPathIsIncludedToRoutes(bosProps[routeParamName]) ? bosProps[routeParamName] : routes[0].path; update({ routes: routes.map((route) => route.path), type: routeType, ...(currentUrlPath && routeType === \"URLBased\" && state.alemRouteBlocked ? { activeRoute: currentUrlPath, } : { activeRoute: state.alemRouteSystemInitialized || maintainRoutesWhenDeveloping ? activeRoute : routes[0].path, }), }); State.update({ alemRouteSystemInitialized: true, alemRouteBlocked: true, }); } if (activeRoute === \"\") { const Component = routes[0].component; return <Component />; } const Component = routes.find( (route) => route.path === activeRoute, )?.component; if (Component) { return <Component />; } return \"\";};const navigate = (routePath) => { const { routes, update } = useAlemLibRoutesStore(); if (routes.includes(routePath)) { State.update({ alemRouteBlocked: false }); update({ activeRoute: routePath }); }};const RouteLink = ({ to, children, className }) => { const { type, parameterName } = useAlemLibRoutesStore(); if (type === \"URLBased\") { return ( <a className={className} style={{ cursor: \"pointer\", textDecoration: \"none\" }} href={`?${parameterName}=${to}`} > {children} </a> ); } const onClickHandler = () => { navigate(to); }; return ( <div style={{ cursor: \"pointer\", textDecoration: \"none\" }} onClick={onClickHandler} > {children} </div> );};const createRoute = (path, component) => ({ path, component });const useParams = () => { if (Object.keys(props).includes(\"path\")) { delete props.path; } return props;};const useLocation = () => { const { activeRoute, routes } = useAlemLibRoutesStore(); return { pathname: activeRoute, routes, isRoutesReady: routes && routes.length > 0, };};const alemCssBody = ``;const loadExternalStyles = (URLs) => { if (!URLs && !state.alemExternalStylesLoaded) { return; } let stylesBody = \"\"; const totalItems = URLs.length; let loadedCounter = 0; const loadStyle = (styleURL) => { asyncFetch(styleURL).then((response) => { stylesBody += response.body; loadedCounter += 1; if (loadedCounter === totalItems) { State.update({ alemExternalStylesLoaded: true, alemExternalStylesBody: stylesBody, }); } }); }; URLs.forEach((styleURL) => { loadStyle(styleURL); }); return state.alemExternalStylesLoaded;};const AlemTheme = styled.div` ${state.alemExternalStylesBody} ${alemCssBody}`;createStore(\"alemStore\", { currentVersion: \"\" });const useAlemStore = () => useStore(\"alemStore\");asyncFetch(\"https://api.github.com/repos/wpdas/alem/tags\").then((data) => { const { update } = useAlemStore(); update({ currentVersion: data.body[0].name.replace(\"v\", \"\") });});const SharedInfoModal = () => { return ( <> <div className=\"modal fade\" id=\"sharedInfoModal\" tabIndex={-1} aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\" > <div className=\"modal-dialog modal-dialog-centered\"> <div className=\"modal-content\"> <div className=\"modal-header\"> <h1 className=\"modal-title fs-5\" id=\"exampleModalLabel\" style={{ alignItems: \"center\", display: \"flex\" }} > <ShareIcon /> <p style={{ marginBottom: 0, marginLeft: 8 }}>Share</p> </h1> <button type=\"button\" className=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\" ></button> </div> <div className=\"modal-body\">Link copied to clipboard</div> <div className=\"modal-footer\"> <button type=\"button\" className=\"btn btn-primary\" data-bs-dismiss=\"modal\" style={{ padding: \"0.55rem 2.5rem\", borderRadius: \"30px\", border: \"1px solid rgb(8 126 164)\", backgroundColor: \"rgb(8 126 164)\", fontWeight: 700, }} > Ok </button> </div> </div> </div> </div> </> );};const Modals = () => ( <> <SharedInfoModal /> </>);const FooterContainer = styled.p` display: flex; justify-content: space-between; align-items: center; font-size: 16px; border-top: 1px solid rgb(224 226 229); color: rgb(67 74 90); font-weight: 500; line-height: 30px; width: 100%; padding: 22px 70px; font-family: \"Source Code Pro\", sans-serif, ui-sans-serif, system-ui, -apple-system; span { color: rgb(8 126 164); margin-left: 8px; }`;const FooterItem = styled.a` font-size: 16px; line-height: 24px; text-align: center; margin: 0 8px; cursor: pointer; svg { width: 30px; height: 30px; }`;const FooterLogo = styled.div` display: flex; justify-content: center; p { margin: 0 0 0 8px; }`;const FooterSocials = styled.div` display: flex; width: 200px; justify-content: space-between; p { font-size: 14px; margin-bottom: 0; } a { color: #292929; }`;const FooterDescription = styled.p` margin: 0; max-width: 430px; text-align: center; a { color: rgb(8 126 164); }`;const GithubIcon = () => ( <svg _ngcontent-ng-c1539744558=\"\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 56 56\"> <g _ngcontent-ng-c1539744558=\"\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"> <circle _ngcontent-ng-c1539744558=\"\" fill=\"none\" cx=\"28\" cy=\"28\" r=\"28\"></circle> <path _ngcontent-ng-c1539744558=\"\" fill=\"#181616\" d=\"M28 0C12.54 0 0 12.54 0 28c0 12.37 8.02 22.86 19.15 26.57 1.4.26 1.91-.61 1.91-1.35 0-.66-.02-2.43-.04-4.76-7.79 1.69-9.43-3.75-9.43-3.75-1.27-3.23-3.11-4.1-3.11-4.1-2.54-1.74.19-1.7.19-1.7 2.81.2 4.29 2.89 4.29 2.89 2.5 4.28 6.55 3.04 8.15 2.33.25-1.81.98-3.04 1.78-3.74-6.22-.71-12.75-3.11-12.75-13.84 0-3.06 1.09-5.56 2.88-7.51-.29-.71-1.25-3.56.27-7.41 0 0 2.35-.75 7.7 2.87 2.23-.62 4.63-.93 7.01-.94 2.38.01 4.77.32 7.01.94 5.35-3.62 7.69-2.87 7.69-2.87 1.53 3.85.57 6.7.28 7.41 1.79 1.96 2.88 4.46 2.88 7.51 0 10.76-6.55 13.12-12.78 13.82 1.01.86 1.9 2.57 1.9 5.19 0 3.74-.03 6.76-.03 7.68 0 .75.5 1.62 1.93 1.35C47.98 50.86 56 40.37 56 28 56 12.54 43.46 0 28 0z\" ></path> </g> </svg>);const TelegramIcon = () => ( <svg width=\"24px\" height=\"24px\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlnsXlink=\"http://www.w3.org/1999/xlink\" xmlSpace=\"preserve\" style={{ fillRule: \"evenodd\", clipRule: \"evenodd\", strokeLinejoin: \"round\", strokeMiterlimit: \"1.41421\", }} > <path id=\"telegram-1\" d=\"M18.384,22.779c0.322,0.228 0.737,0.285 1.107,0.145c0.37,-0.141 0.642,-0.457 0.724,-0.84c0.869,-4.084 2.977,-14.421 3.768,-18.136c0.06,-0.28 -0.04,-0.571 -0.26,-0.758c-0.22,-0.187 -0.525,-0.241 -0.797,-0.14c-4.193,1.552 -17.106,6.397 -22.384,8.35c-0.335,0.124 -0.553,0.446 -0.542,0.799c0.012,0.354 0.25,0.661 0.593,0.764c2.367,0.708 5.474,1.693 5.474,1.693c0,0 1.452,4.385 2.209,6.615c0.095,0.28 0.314,0.5 0.603,0.576c0.288,0.075 0.596,-0.004 0.811,-0.207c1.216,-1.148 3.096,-2.923 3.096,-2.923c0,0 3.572,2.619 5.598,4.062Zm-11.01,-8.677l1.679,5.538l0.373,-3.507c0,0 6.487,-5.851 10.185,-9.186c0.108,-0.098 0.123,-0.262 0.033,-0.377c-0.089,-0.115 -0.253,-0.142 -0.376,-0.064c-4.286,2.737 -11.894,7.596 -11.894,7.596Z\" /> </svg>);const Footer = () => { return ( <FooterContainer> <FooterLogo> <img src=\"https://cdn.jsdelivr.net/gh/wpdas/alem/docs/assets/near-script-logo.png\" width={30} alt=\"logo\" /> <p>Além</p> </FooterLogo> <Row> <FooterDescription> This library is still under development. <a href=\"https://near.org/near/widget/ProfilePage?accountId=wendersonpires.near\" target=\"_blank\" > wendersonpires.near </a> </FooterDescription> </Row> <FooterSocials> <FooterItem href=\"https://t.me/alemlib\" target=\"_blank\"> <TelegramIcon /> <p>Telegram</p> </FooterItem> <FooterItem href=\"https://github.com/wpdas/alem\" target=\"_blank\"> <GithubIcon /> <p>GitHub</p> </FooterItem> </FooterSocials> </FooterContainer> );};const Loading = () => { return ( <AppContainer> <Spinner style={{ marginTop: \"28vh\" }} /> <AppBackground /> </AppContainer> );};const ContentViewContainer = styled.div` display: flex; flex-direction: column; gap: 16px; background: #fff; min-width: 240px; padding: 40px 17px 30px; z-index: 1; bottom: 0; margin-bottom: 40px; height: fit-content; width: 100%; max-width: 1046px; margin-left: auto; margin-right: auto; h4, h3, h2, h1 { font-weight: 700; font-size: 22px; color: rgb(35, 39, 47); } h4 { font-size: 16px; } code { background-color: #eee; padding: 4px; border-radius: 4px; color: #292929; } pre { div { background-color: #fafafa !important; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; border-radius: 8px; margin: 8px !important; } span { mix-blend-mode: exclusion; filter: saturate(4) hue-rotate(250deg); font-size: 14px; font-family: \"Source Code Pro\", sans-serif, ui-sans-serif, system-ui, -apple-system; line-height: 24px; -webkit-font-smoothing: auto; opacity: 0.9; } .language-sh { color: #555 !important; } .language-bash { color: #555 !important; > span { color: #555 !important; mix-blend-mode: normal; } } } a { color: rgb(8 126 164) !important; } strong { opacity: 0.8; } p { font-size: 17px; font-weight: 500; color: rgb(35 39 47); } ul { padding-left: 1.2rem; } li { margin-bottom: 10px; font-size: 17px; font-weight: 500; margin-left: 0px !important; color: rgb(35 39 47); }`;const ContentViewTitle = styled.h3` font-weight: 700; font-size: 26px; color: #292929;`;const ContentView = () => { const [sectionUsed, setSectionUsed] = useState(false); const urlParams = useParams(); const { isRoutesReady, routes } = useLocation(); console.log(urlParams, sectionUsed, isRoutesReady, routes); useEffect(() => { console.log(\"A\", urlParams); if (urlParams.section && !sectionUsed && isRoutesReady) { console.log(\"B\", urlParams); setTimeout(() => { console.log(\"FOI\"); navigate(urlParams.section); }, 500); setSectionUsed(true); } }, [urlParams, sectionUsed, isRoutesReady]); return ( <ContentViewContainer> {} <AppRoutes /> </ContentViewContainer> );};const Row = styled.div` display: flex;`;const Column = styled.div` display: flex; flex-direction: column;`;const AboutContainer = styled.div` display: flex; flex-direction: column; align-items: center; margin-bottom: 90px;`;const AboutLogo = styled.img` pointer-events: none; margin-bottom: 20px; border-radius: 999px;`;const AboutTitle = styled.h1` font-size: 42px !important; margin-bottom: 14px;`;const AboutDescription = styled.h3` font-size: 28px !important; font-weight: 600; color: rgb(67 74 90); margin-bottom: 34px;`;const CustomButton = styled.button` padding: 0.75rem 1.5rem; border-radius: 30px; border: 1px solid #ccc; background-color: #fff; color: rgb(35 39 47); font-weight: 700; font-size: 17px; :hover { background-color: #fafafa; }`;const CustomLink = styled.a` padding: 0.75rem 1.5rem; border-radius: 30px; border: 1px solid rgb(8 126 164); background-color: rgb(8 126 164); margin-right: 12px; p { color: #fff !important; margin: 0; font-weight: 700 !important; font-size: 17px; } :hover { background-color: rgb(8 126 164); }`;const AboutSectionGray = styled.div` background-color: rgb(188 193 205 / 12%); display: flex; flex-direction: column; align-items: center; padding: 90px 20px; align-items: center; text-align: center; p { font-size: 20px; color: rgb(67 74 90); line-height: 1.5; max-width: 48rem; font-weight: 500; margin-top: 1.75rem; }`;const Code = styled.span` background-color: rgba(208, 211, 220, 0.4); border-radius: 0.5rem; border: 0 solid #e5e7eb; color: rgb(67 74 90); padding: 0.125rem 0.25rem;`;const AboutPage = () => { return ( <div> <AboutContainer> <AboutLogo src=\"https://cdn.jsdelivr.net/gh/wpdas/alem/docs/assets/near-script-logo.png\" width={120} alt=\"logo\" /> <AboutTitle>Além</AboutTitle> <AboutDescription>The library for web3 NEAR BOS interfaces</AboutDescription> <Row> <CustomLink href=\"https://github.com/wpdas/alem-docs-web\" target=\"_blank\"> <p>See an Example</p> </CustomLink> <RouteLink to={RoutesPath.featureOverview.path}> <CustomButton>Learn Alem</CustomButton> </RouteLink> </Row> </AboutContainer> <AboutSectionGray> <AboutTitle>Create user interfaces from components</AboutTitle> <p> Alem lets you build user interfaces out of individual pieces called components. Create your own components like <Code>Thumbnail</Code>, <Code>LikeButton</Code>, and{\" \"} <Code>Avatar</Code>. Then combine them into entire screens, pages, and other components. </p> </AboutSectionGray> <AboutSectionGray style={{ backgroundColor: \"#fff\" }}> <AboutTitle>Good Practices</AboutTitle> <p> All project content will be organized in just one file. Be aware of this when developing your application. Whenever possible, use functions that return the desired content to avoid possible issues in the application. </p> </AboutSectionGray> </div> );};const ShareIcon = () => <span className=\"material-symbols-outlined\">share</span>;const SpinnerWrapper = styled.div` margin: 200px 0;`;const ShareButton = styled.button` padding: 0.5rem 1.4rem; border-radius: 30px; border: 1px solid #ccc; background-color: #fff; color: #292929; font-weight: 700; font-size: 16px; display: flex; align-items: center; :hover { background-color: rgb(252 252 252); } span { margin-right: 18px; width: 18px; }`;const TopSection = styled.div` display: flex; flex-direction: column; align-items: flex-end; position: absolute; align-self: flex-end;`;const Margin = styled.div``;const Spinner = ({ style, dark }) => ( <div style={{ display: \"flex\", justifyContent: \"center\", width: \"100%\", ...style }}> <div className={`spinner-border ${dark ? \"\" : \"text-light\"}`} role=\"status\"> <span className=\"visually-hidden\">Loading...</span> </div> </div>);const getMarkdownPage = (mdFileURL) => { return () => { const mdContent = fetch(mdFileURL).body; const { pathname } = useLocation(); const site = isDevelopment ? \"http://127.0.0.1:8080/alem-lib.near/widget/Index\" : \"https://alem.dev/\"; const copyToCliboard = () => { clipboard.writeText(`${site}?section=${pathname}`); }; return ( <> <TopSection> <div> <ShareButton data-bs-toggle=\"modal\" data-bs-target=\"#sharedInfoModal\" onClick={copyToCliboard} > <ShareIcon /> Share </ShareButton> </div> </TopSection> <Margin /> {mdContent ? ( <Markdown text={mdContent} /> ) : ( <SpinnerWrapper> <Spinner dark /> </SpinnerWrapper> )} </> ); };};const { currentVersion } = useAlemStore();const FeatureOverviewPage = getMarkdownPage( `https://cdn.jsdelivr.net/gh/wpdas/alem@${currentVersion}/docs/feature-overview.md`,);const InstallationPage = getMarkdownPage( `https://cdn.jsdelivr.net/gh/wpdas/alem@${currentVersion}/docs/installation.md`,);const ConfigFilePage = getMarkdownPage( `https://cdn.jsdelivr.net/gh/wpdas/alem@${currentVersion}/docs/config-file.md`,);const BOSPropsPage = getMarkdownPage( `https://cdn.jsdelivr.net/gh/wpdas/alem@${currentVersion}/docs/bos-overview.md`,);const CLIPage = getMarkdownPage( `https://cdn.jsdelivr.net/gh/wpdas/alem@${currentVersion}/docs/cli.md`,);const DeployingWithGithubActionsPage = getMarkdownPage( `https://cdn.jsdelivr.net/gh/wpdas/alem@${currentVersion}/docs/deploying-with-github-actions.md`,);const RoutesPage = getMarkdownPage( `https://cdn.jsdelivr.net/gh/wpdas/alem@${currentVersion}/docs/router/routes.md`,);const CreateRoutePage = getMarkdownPage( `https://cdn.jsdelivr.net/gh/wpdas/alem@${currentVersion}/docs/router/create-route.md`,);const RouteLinkPage = getMarkdownPage( `https://cdn.jsdelivr.net/gh/wpdas/alem@${currentVersion}/docs/router/route-link.md`,);const NavigatePage = getMarkdownPage( `https://cdn.jsdelivr.net/gh/wpdas/alem@${currentVersion}/docs/router/navigate.md`,);const UseLocationPage = getMarkdownPage( `https://cdn.jsdelivr.net/gh/wpdas/alem@${currentVersion}/docs/router/use-location.md`,);const UseParamsPage = getMarkdownPage( `https://cdn.jsdelivr.net/gh/wpdas/alem@${currentVersion}/docs/router/use-params.md`,);const LoadExternalStylesPage = getMarkdownPage( `https://cdn.jsdelivr.net/gh/wpdas/alem@${currentVersion}/docs/api/load-external-styles.md`,);const PromisifyPage = getMarkdownPage( `https://cdn.jsdelivr.net/gh/wpdas/alem@${currentVersion}/docs/api/promisify.md`,);const IsDevelopmentPage = getMarkdownPage( `https://cdn.jsdelivr.net/gh/wpdas/alem@${currentVersion}/docs/api/is-development.md`,);const CreatingStorePage = getMarkdownPage( `https://cdn.jsdelivr.net/gh/wpdas/alem@${currentVersion}/docs/store/creating-a-store.md`,);const GetStorePage = getMarkdownPage( `https://cdn.jsdelivr.net/gh/wpdas/alem@${currentVersion}/docs/store/get-store.md`,);const ClearStorePage = getMarkdownPage( `https://cdn.jsdelivr.net/gh/wpdas/alem@${currentVersion}/docs/store/clear-store.md`,);const Categories = { gettingStarted: \"Getting Started\", router: \"Router\", apis: \"APIs\", store: \"Store\", bos: \"BOS\",};const RoutesPath = { about: { path: \"about\", title: \"About\", category: Categories.gettingStarted, }, featureOverview: { path: \"feature-overview\", title: \"Feature Overview\", category: Categories.gettingStarted, }, installation: { path: \"installation\", title: \"Installation\", category: Categories.gettingStarted, }, configFile: { path: \"config-file\", title: \"Config File\", category: Categories.gettingStarted, }, cli: { path: \"cli\", title: \"CLI\", category: Categories.gettingStarted, }, deployingWithGithubActions: { path: \"deploying-with-github-actions\", title: \"Deploying with GitHub Actions\", category: Categories.gettingStarted, }, routes: { path: \"routes\", title: \"Routes\", category: Categories.router, }, createRoute: { path: \"create-route\", title: \"Create Route\", category: Categories.router, }, routeLink: { path: \"route-link\", title: \"Route Link\", category: Categories.router, }, navigate: { path: \"navigate\", title: \"Navigate\", category: Categories.router, }, useLocation: { path: \"use-location\", title: \"Use Location\", category: Categories.router, }, useParams: { path: \"use-params\", title: \"Use Params\", category: Categories.router, }, loadExternalStyles: { path: \"load-external-styles\", title: \"Load External Styles\", category: Categories.apis, }, promisify: { path: \"promisify\", title: \"Promisify\", category: Categories.apis, }, isDevelopment: { path: \"is-development\", title: \"Is Development\", category: Categories.apis, }, creatingStore: { path: \"creating-a-store\", title: \"Creating Store\", category: Categories.store, }, getStore: { path: \"get-store\", title: \"Get Store\", category: Categories.store, }, clearStore: { path: \"clear-store\", title: \"Clear Store\", category: Categories.store, }, bosProps: { path: \"bos-props\", title: \"APIs and Components\", category: Categories.bos, },};const AppRoutes = () => { const routes = [ createRoute(RoutesPath.about.path, AboutPage), createRoute(RoutesPath.featureOverview.path, FeatureOverviewPage), createRoute(RoutesPath.installation.path, InstallationPage), createRoute(RoutesPath.configFile.path, ConfigFilePage), createRoute(RoutesPath.cli.path, CLIPage), createRoute(RoutesPath.deployingWithGithubActions.path, DeployingWithGithubActionsPage), createRoute(RoutesPath.routes.path, RoutesPage), createRoute(RoutesPath.createRoute.path, CreateRoutePage), createRoute(RoutesPath.routeLink.path, RouteLinkPage), createRoute(RoutesPath.navigate.path, NavigatePage), createRoute(RoutesPath.useLocation.path, UseLocationPage), createRoute(RoutesPath.useParams.path, UseParamsPage), createRoute(RoutesPath.loadExternalStyles.path, LoadExternalStylesPage), createRoute(RoutesPath.promisify.path, PromisifyPage), createRoute(RoutesPath.isDevelopment.path, IsDevelopmentPage), createRoute(RoutesPath.creatingStore.path, CreatingStorePage), createRoute(RoutesPath.getStore.path, GetStorePage), createRoute(RoutesPath.clearStore.path, ClearStorePage), createRoute(RoutesPath.bosProps.path, BOSPropsPage), ]; return <Routes routes={routes} type=\"ContentBased\" />;};const SidebarContainer = styled.div` display: flex; flex-direction: column; gap: 16px; background: #fff; border-right: rgb(224 226 229) solid 1px; min-width: 240px; width: 240px; padding: 0px 17px 30px; margin-top: 40px; margin-right: 16px; z-index: 1; bottom: 0; margin-bottom: 40px; height: fit-content; @media (max-width: 800px) { width: 100%; } h3 { margin: 0; font-size: 14px; font-weight: 700; color: #292929; padding: 12px 21px 6px; } a { display: block; font-size: 14px; font-weight: 600; padding: 6px 21px; margin-bottom: 0; border-radius: 4px; color: rgb(129, 129, 129); cursor: pointer; transition: all 0.2s ease-in-out; text-decoration: none; text-transform: capitalize; } a.active { background: #edf4fc !important; color: #4498e0 !important; } a:hover { color: #4498e0 !important; }`;const SidebarAboutLogo = styled.img` align-self: center;`;const SidebarItem = ({ to, label }) => { const { pathname } = useLocation(); return ( <RouteLink to={to}> <a className={pathname === to ? \"active\" : \"\"}>{label}</a> </RouteLink> );};const Sidebar = () => { const getLinksByCategory = (category) => Object.keys(RoutesPath).map((routeKey) => { const routeDetails = (RoutesPath )[routeKey]; if (routeDetails.category === category) { return <SidebarItem to={routeDetails.path} label={routeDetails.title} />; } }); return ( <SidebarContainer> <SidebarAboutLogo src=\"https://cdn.jsdelivr.net/gh/wpdas/alem/docs/assets/near-script-logo.png\" width={60} alt=\"logo\" /> <div> <h3>Getting Started</h3> {getLinksByCategory(\"Getting Started\")} </div> <div> <h3>Store</h3> {getLinksByCategory(\"Store\")} </div> <div> <h3>Router</h3> {getLinksByCategory(\"Router\")} </div> <div> <h3>APIs</h3> {getLinksByCategory(\"APIs\")} </div> <div> <h3>NEAR VM (BOS)</h3> {getLinksByCategory(\"BOS\")} </div> </SidebarContainer> );};const AppContainer = styled.div` display: flex; flex-direction: row; font-family: \"Wix Madefor Display\", sans-serif; @media (max-width: 800px) { flex-wrap: wrap; }`;const AppBackground = styled.div` background-color: #fff; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -2;`;const Banner = styled.p` display: flex; justify-content: center; align-items: center; font-size: 17px; height: 40px; background-color: rgb(243 244 246); color: rgb(67 74 90); font-weight: 500; line-height: 30px; width: 100%; span { color: rgb(8 126 164); margin-left: 8px; }`;const App = () => { const { currentVersion } = useAlemStore(); const stylesLoaded = loadExternalStyles([ \"https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:wght@400..800&display=swap\", \"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\", \"https://fonts.cdnfonts.com/css/source-code-pro\", ]); if (!stylesLoaded) { return <Loading />; } return ( <div style={{ marginTop: \"calc(-1 * var(--body-top-padding, 0))\" }}> <Modals /> <Banner> Alem is currently on version <span>{currentVersion}</span>. </Banner> <AppContainer> <Sidebar /> <ContentView /> </AppContainer> <Footer /> <AppBackground /> </div> );};return ( <AlemTheme> <App /> </AlemTheme>);\n " } } } } }