timmypidashev/web
1
0
Fork 0
mirror of https://github.com/timmypidashev/web.git synced 2026-04-14 11:03:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

commit .web, though there's not really a point in tracking this directory

Browse Source
This commit is contained in:
Timothy Pidashev
2024-03-11 08:35:42 -07:00
parent 71b28b6059
commit 47bbbb01fa
33 changed files with 3698 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/landing/.web/bun.lockb Executable file
View File

Binary file not shown.

1
src/landing/.web/env.json Normal file
View File

@@ -0,0 +1 @@
{"PING": "http://localhost:8000/ping", "EVENT": "ws://localhost:8000/_event", "UPLOAD": "http://localhost:8000/_upload"}

8
src/landing/.web/package.json
View File

@@ -8,18 +8,22 @@
},
"dependencies": {
"@emotion/react": "11.11.1",
"@radix-ui/themes": "^2.0.0",
"axios": "1.6.0",
"json5": "2.2.3",
"lucide-react": "0.314.0",
"next": "14.0.1",
"next-sitemap": "4.1.8",
"next-themes": "0.2.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"silly": "^0.2.0",
"socket.io-client": "4.6.1",
"universal-cookie": "4.0.4"
},
"devDependencies": {
"autoprefixer": "10.4.14",
"postcss": "8.4.31"
"autoprefixer": "10.4.14",
"postcss": "8.4.31",
"tailwindcss": "3.3.2"
}
}

162
src/landing/.web/pages/404.js Normal file
View File

@@ -0,0 +1,162 @@
/** @jsxImportSource @emotion/react */
import { Fragment, useContext } from "react"
import { EventLoopContext, StateContexts } from "/utils/context"
import { Event, getBackendURL, isTrue } from "/utils/state"
import { WifiOffIcon as LucideWifiOffIcon } from "lucide-react"
import { keyframes } from "@emotion/react"
import { Box as RadixThemesBox, Dialog as RadixThemesDialog, Flex as RadixThemesFlex, Heading as RadixThemesHeading, Link as RadixThemesLink, Text as RadixThemesText } from "@radix-ui/themes"
import env from "/env.json"
import NextLink from "next/link"
import NextHead from "next/head"
export function Fragment_966c0378eb9d65bdfb5286644be9b831 () {
const [addEvents, connectErrors] = useContext(EventLoopContext);
const state = useContext(StateContexts.state)
return (
<Fragment>
{isTrue(((!state.is_hydrated) || (connectErrors.length > 0))) ? (
<Fragment>
<LucideWifiOffIcon css={{"color": "crimson", "zIndex": 9999, "position": "fixed", "bottom": "30px", "right": "30px", "animation": `${pulse} 1s infinite`}} size={32}>
{`wifi_off`}
</LucideWifiOffIcon>
</Fragment>
) : (
<Fragment/>
)}
</Fragment>
)
}
export function Fragment_14636cc997c0546c0967a25d8e600f96 () {
const [addEvents, connectErrors] = useContext(EventLoopContext);
return (
<Fragment>
{isTrue(connectErrors.length >= 2) ? (
<Fragment>
<RadixThemesDialog.Root css={{"zIndex": 9999}} open={connectErrors.length >= 2}>
<RadixThemesDialog.Content>
<RadixThemesDialog.Title>
{`Connection Error`}
</RadixThemesDialog.Title>
<RadixThemesText as={`p`} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#ebdbb2"}}>
{`Cannot connect to server: `}
{(connectErrors.length > 0) ? connectErrors[connectErrors.length - 1].message : ''}
{`. Check if server is reachable at `}
{getBackendURL(env.EVENT).href}
</RadixThemesText>
</RadixThemesDialog.Content>
</RadixThemesDialog.Root>
</Fragment>
) : (
<Fragment/>
)}
</Fragment>
)
}
const pulse = keyframes`
0% {
opacity: 0;
}
100% {
opacity: 1;
}
`
export default function Component() {
return (
<Fragment>
<Fragment>
<div css={{"position": "fixed", "width": "100vw", "height": "0"}}>
<Fragment_966c0378eb9d65bdfb5286644be9b831/>
</div>
<Fragment_14636cc997c0546c0967a25d8e600f96/>
</Fragment>
<RadixThemesBox>
<RadixThemesBox>
<RadixThemesFlex css={{"display": "flex", "alignItems": "center", "justifyContent": "center"}} gap={`7`}>
<RadixThemesFlex>
<RadixThemesLink asChild={true} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<NextLink href={`http://about.timmypidashev.localhost`} passHref={true}>
<RadixThemesText as={`p`} css={{"color": "#ebdbb2", "fontFamily": "ComicCode", "fontSize": 24}}>
{`About`}
</RadixThemesText>
</NextLink>
</RadixThemesLink>
</RadixThemesFlex>
<RadixThemesFlex>
<RadixThemesLink asChild={true} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<NextLink href={`http://projects.timmypidashev.localhost`} passHref={true}>
<RadixThemesText as={`p`} css={{"color": "#ebdbb2", "fontFamily": "ComicCode", "fontSize": 24}}>
{`Projects`}
</RadixThemesText>
</NextLink>
</RadixThemesLink>
</RadixThemesFlex>
<RadixThemesFlex>
<RadixThemesLink asChild={true} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<NextLink href={`http://resume.timmypidashev.localhost`} passHref={true}>
<RadixThemesText as={`p`} css={{"color": "#ebdbb2", "fontFamily": "ComicCode", "fontSize": 24}}>
{`Resume`}
</RadixThemesText>
</NextLink>
</RadixThemesLink>
</RadixThemesFlex>
<RadixThemesFlex>
<RadixThemesLink asChild={true} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<NextLink href={`http://blog.timmypidashev.localhost`} passHref={true}>
<RadixThemesText as={`p`} css={{"color": "#ebdbb2", "fontFamily": "ComicCode", "fontSize": 24}}>
{`Blog`}
</RadixThemesText>
</NextLink>
</RadixThemesLink>
</RadixThemesFlex>
<RadixThemesFlex>
<RadixThemesLink asChild={true} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<NextLink href={`http://shop.timmypidashev.localhost`} passHref={true}>
<RadixThemesText as={`p`} css={{"color": "#ebdbb2", "fontFamily": "ComicCode", "fontSize": 24}}>
{`Shop`}
</RadixThemesText>
</NextLink>
</RadixThemesLink>
</RadixThemesFlex>
</RadixThemesFlex>
</RadixThemesBox>
<RadixThemesFlex css={{"height": "100vh", "width": "100%", "display": "flex", "alignItems": "center", "justifyContent": "center"}}>
<RadixThemesFlex align={`start`} direction={`column`} gap={`2`}>
<RadixThemesHeading css={{"fontFamily": "ComicCode", "fontSize": 32, "color": "#ebdbb2"}} size={`9`}>
{`Whoops, this page doesn't exist...`}
</RadixThemesHeading>
<RadixThemesFlex css={{"flex": 1, "justifySelf": "stretch", "alignSelf": "stretch"}}/>
</RadixThemesFlex>
</RadixThemesFlex>
<RadixThemesBox css={{"borderTop": "2px solid #ebdbb2;"}}>
<RadixThemesFlex css={{"height": "15vh", "display": "flex", "alignItems": "center", "justifyContent": "center"}}>
<RadixThemesFlex align={`center`} direction={`column`} gap={`7`}>
<RadixThemesHeading css={{"fontFamily": "ComicCode", "fontSize": 32, "color": "#ebdbb2"}} size={`9`}>
{`Footer`}
</RadixThemesHeading>
</RadixThemesFlex>
</RadixThemesFlex>
</RadixThemesBox>
</RadixThemesBox>
<NextHead>
<title>
{`Page Not Found`}
</title>
<meta content={`A Reflex app.`} name={`description`}/>
<meta content={`favicon.ico`} property={`og:image`}/>
</NextHead>
</Fragment>
)
}

44
src/landing/.web/pages/_app.js Normal file
View File

@@ -0,0 +1,44 @@
/** @jsxImportSource @emotion/react */
import '/styles/styles.css'
import RadixThemesColorModeProvider from "/components/reflex/radix_themes_color_mode_provider.js"
import { Theme as RadixThemesTheme } from "@radix-ui/themes"
import "@radix-ui/themes/styles.css"
import theme from "/utils/theme.js"
import { Fragment } from "react"
import { EventLoopProvider, StateProvider, defaultColorMode } from "/utils/context.js";
import { ThemeProvider } from 'next-themes'
function AppWrap({children}) {
return (
<RadixThemesColorModeProvider>
<RadixThemesTheme accentColor={`blue`} css={{...theme.styles.global[':root'], ...theme.styles.global.body}}>
<Fragment>
{children}
</Fragment>
</RadixThemesTheme>
</RadixThemesColorModeProvider>
)
}
export default function MyApp({ Component, pageProps }) {
return (
<ThemeProvider defaultTheme={ defaultColorMode } storageKey="chakra-ui-color-mode" attribute="class">
<AppWrap>
<StateProvider>
<EventLoopProvider>
<Component {...pageProps} />
</EventLoopProvider>
</StateProvider>
</AppWrap>
</ThemeProvider>
);
}

18
src/landing/.web/pages/_document.js Normal file
View File

@@ -0,0 +1,18 @@
/** @jsxImportSource @emotion/react */
import { Head, Html, Main, NextScript } from "next/document"
export default function Document() {
return (
<Html>
<Head/>
<body>
<Main/>
<NextScript/>
</body>
</Html>
)
}

163
src/landing/.web/pages/index.js Normal file
View File

@@ -0,0 +1,163 @@
/** @jsxImportSource @emotion/react */
import { Fragment, useContext } from "react"
import { EventLoopContext, StateContexts } from "/utils/context"
import { Event, getBackendURL, isTrue } from "/utils/state"
import { WifiOffIcon as LucideWifiOffIcon } from "lucide-react"
import { keyframes } from "@emotion/react"
import { Box as RadixThemesBox, Dialog as RadixThemesDialog, Flex as RadixThemesFlex, Heading as RadixThemesHeading, Link as RadixThemesLink, Text as RadixThemesText } from "@radix-ui/themes"
import env from "/env.json"
import NextLink from "next/link"
import NextHead from "next/head"
export function Fragment_966c0378eb9d65bdfb5286644be9b831 () {
const [addEvents, connectErrors] = useContext(EventLoopContext);
const state = useContext(StateContexts.state)
return (
<Fragment>
{isTrue(((!state.is_hydrated) || (connectErrors.length > 0))) ? (
<Fragment>
<LucideWifiOffIcon css={{"color": "crimson", "zIndex": 9999, "position": "fixed", "bottom": "30px", "right": "30px", "animation": `${pulse} 1s infinite`}} size={32}>
{`wifi_off`}
</LucideWifiOffIcon>
</Fragment>
) : (
<Fragment/>
)}
</Fragment>
)
}
export function Fragment_14636cc997c0546c0967a25d8e600f96 () {
const [addEvents, connectErrors] = useContext(EventLoopContext);
return (
<Fragment>
{isTrue(connectErrors.length >= 2) ? (
<Fragment>
<RadixThemesDialog.Root css={{"zIndex": 9999}} open={connectErrors.length >= 2}>
<RadixThemesDialog.Content>
<RadixThemesDialog.Title>
{`Connection Error`}
</RadixThemesDialog.Title>
<RadixThemesText as={`p`} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#ebdbb2"}}>
{`Cannot connect to server: `}
{(connectErrors.length > 0) ? connectErrors[connectErrors.length - 1].message : ''}
{`. Check if server is reachable at `}
{getBackendURL(env.EVENT).href}
</RadixThemesText>
</RadixThemesDialog.Content>
</RadixThemesDialog.Root>
</Fragment>
) : (
<Fragment/>
)}
</Fragment>
)
}
const pulse = keyframes`
0% {
opacity: 0;
}
100% {
opacity: 1;
}
`
export default function Component() {
return (
<Fragment>
<Fragment>
<div css={{"position": "fixed", "width": "100vw", "height": "0"}}>
<Fragment_966c0378eb9d65bdfb5286644be9b831/>
</div>
<Fragment_14636cc997c0546c0967a25d8e600f96/>
</Fragment>
<RadixThemesBox>
<RadixThemesBox>
<RadixThemesFlex css={{"display": "flex", "alignItems": "center", "justifyContent": "center"}} gap={`7`}>
<RadixThemesFlex>
<RadixThemesLink asChild={true} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<NextLink href={`http://about.timmypidashev.localhost`} passHref={true}>
<RadixThemesText as={`p`} css={{"color": "#ebdbb2", "fontFamily": "ComicCode", "fontSize": 24}}>
{`About`}
</RadixThemesText>
</NextLink>
</RadixThemesLink>
</RadixThemesFlex>
<RadixThemesFlex>
<RadixThemesLink asChild={true} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<NextLink href={`http://projects.timmypidashev.localhost`} passHref={true}>
<RadixThemesText as={`p`} css={{"color": "#ebdbb2", "fontFamily": "ComicCode", "fontSize": 24}}>
{`Projects`}
</RadixThemesText>
</NextLink>
</RadixThemesLink>
</RadixThemesFlex>
<RadixThemesFlex>
<RadixThemesLink asChild={true} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<NextLink href={`http://resume.timmypidashev.localhost`} passHref={true}>
<RadixThemesText as={`p`} css={{"color": "#ebdbb2", "fontFamily": "ComicCode", "fontSize": 24}}>
{`Resume`}
</RadixThemesText>
</NextLink>
</RadixThemesLink>
</RadixThemesFlex>
<RadixThemesFlex>
<RadixThemesLink asChild={true} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<NextLink href={`http://blog.timmypidashev.localhost`} passHref={true}>
<RadixThemesText as={`p`} css={{"color": "#ebdbb2", "fontFamily": "ComicCode", "fontSize": 24}}>
{`Blog`}
</RadixThemesText>
</NextLink>
</RadixThemesLink>
</RadixThemesFlex>
<RadixThemesFlex>
<RadixThemesLink asChild={true} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<NextLink href={`http://shop.timmypidashev.localhost`} passHref={true}>
<RadixThemesText as={`p`} css={{"color": "#ebdbb2", "fontFamily": "ComicCode", "fontSize": 24}}>
{`Shop`}
</RadixThemesText>
</NextLink>
</RadixThemesLink>
</RadixThemesFlex>
</RadixThemesFlex>
</RadixThemesBox>
<RadixThemesBox>
<RadixThemesFlex css={{"height": "100vh", "display": "flex", "alignItems": "center", "justifyContent": "center"}}>
<RadixThemesFlex align={`center`} direction={`column`} gap={`7`}>
<RadixThemesHeading css={{"fontFamily": "ComicCode", "fontSize": 32, "color": "#ebdbb2"}} size={`9`}>
{`Index`}
</RadixThemesHeading>
</RadixThemesFlex>
</RadixThemesFlex>
</RadixThemesBox>
<RadixThemesBox css={{"borderTop": "2px solid #ebdbb2;"}}>
<RadixThemesFlex css={{"height": "15vh", "display": "flex", "alignItems": "center", "justifyContent": "center"}}>
<RadixThemesFlex align={`center`} direction={`column`} gap={`7`}>
<RadixThemesHeading css={{"fontFamily": "ComicCode", "fontSize": 32, "color": "#ebdbb2"}} size={`9`}>
{`Footer`}
</RadixThemesHeading>
</RadixThemesFlex>
</RadixThemesFlex>
</RadixThemesBox>
</RadixThemesBox>
<NextHead>
<title>
{`Timothy Pidashev`}
</title>
<meta content={`A Reflex app.`} name={`description`}/>
<meta content={`favicon.ico`} property={`og:image`}/>
</NextHead>
</Fragment>
)
}

9
src/landing/.web/public/css/scrollbar.css Normal file
View File

@@ -0,0 +1,9 @@
/* Hide scrollbar for all elements */
::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
/* Hide scrollbar for Firefox */
html {
scrollbar-width: none;
}

BIN
src/landing/.web/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
src/landing/.web/public/fonts/ComicCode-Bold.otf Normal file
View File

Binary file not shown.

BIN
src/landing/.web/public/fonts/ComicCode-BoldItalic.otf Normal file
View File

Binary file not shown.

BIN
src/landing/.web/public/fonts/ComicCode-Italic.otf Normal file
View File

Binary file not shown.

BIN
src/landing/.web/public/fonts/ComicCode-Medium.otf Normal file
View File

Binary file not shown.

BIN
src/landing/.web/public/fonts/ComicCode-MediumItalic.otf Normal file
View File

Binary file not shown.

BIN
src/landing/.web/public/fonts/ComicCode-Regular.otf Normal file
View File

Binary file not shown.

2937
src/landing/.web/public/fonts/ComicCode-Regular.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 407 KiB

BIN
src/landing/.web/public/fonts/ComicCodeLigatures-Bold.otf Normal file
View File

Binary file not shown.

BIN
src/landing/.web/public/fonts/ComicCodeLigatures-BoldItalic.otf Normal file
View File

Binary file not shown.

BIN
src/landing/.web/public/fonts/ComicCodeLigatures-Italic.otf Normal file
View File

Binary file not shown.

BIN
src/landing/.web/public/fonts/ComicCodeLigatures-Medium.otf Normal file
View File

Binary file not shown.

BIN
src/landing/.web/public/fonts/ComicCodeLigatures-MediumItalic.otf Normal file
View File

Binary file not shown.

BIN
src/landing/.web/public/fonts/ComicCodeLigatures-Regular.otf Normal file
View File

Binary file not shown.

11
src/landing/.web/public/fonts/fonts.css Normal file
View File

@@ -0,0 +1,11 @@
@font-face {
font-family: ComicCode;
src: url("ComicCode-Regular.otf") format("opentype");
}
@font-face {
font-family: ComicCodeBold;
font-weight: bold;
src: url("ComicCode-Bold.otf") format("opentype");
}

1
src/landing/.web/reflex.install_frontend_packages.cached Normal file
View File

@@ -0,0 +1 @@
['@radix-ui/themes@^2.0.0', 'lucide-react@0.314.0'],{"app_name": "landing", "loglevel": "info", "frontend_port": 3000, "frontend_path": "", "backend_port": 8000, "api_url": "http://localhost:8000", "deploy_url": "http://localhost:3000", "backend_host": "0.0.0.0", "db_url": "sqlite:///reflex.db", "redis_url": null, "telemetry_enabled": true, "bun_path": "/home/timmy/.local/share/reflex/bun/bin/bun", "cors_allowed_origins": ["*"], "tailwind": {"content": ["./pages/**/*.{js,ts,jsx,tsx}", "./utils/**/*.{js,ts,jsx,tsx}"]}, "timeout": 120, "next_compression": true, "event_namespace": null, "frontend_packages": [], "cp_backend_url": "https://rxcp-prod-control-plane.fly.dev", "cp_web_url": "https://control-plane.reflex.run", "gunicorn_worker_class": "uvicorn.workers.UvicornH11Worker"}

2
src/landing/.web/reflex.json
View File

@@ -1 +1 @@
{"version": "0.4.2", "project_hash": 334487535435764683889748963250527836100}
{"version": "0.4.3", "project_hash": 133404493286750418693195899744043836434}

3
src/landing/.web/styles/styles.css Normal file
View File

@@ -0,0 +1,3 @@
@import url('./tailwind.css');
@import url('@/fonts/fonts.css');
@import url('@/css/scrollbar.css');

7
src/landing/.web/tailwind.config.js Normal file
View File

@@ -0,0 +1,7 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./pages/**/*.{js,ts,jsx,tsx}", "./utils/**/*.{js,ts,jsx,tsx}"],
theme: null,
plugins: [
],
};

8
src/landing/.web/utils/components.js Normal file
View File

@@ -0,0 +1,8 @@
/** @jsxImportSource @emotion/react */
import { memo } from "react"
import { E, isTrue } from "/utils/state"

112
src/landing/.web/utils/context.js Normal file
View File

@@ -0,0 +1,112 @@
import { createContext, useContext, useMemo, useReducer, useState } from "react"
import { applyDelta, Event, hydrateClientStorage, useEventLoop, refs } from "/utils/state.js"
export const initialState = {"state": {"is_hydrated": false, "router": {"session": {"client_token": "", "client_ip": "", "session_id": ""}, "headers": {"host": "", "origin": "", "upgrade": "", "connection": "", "pragma": "", "cache_control": "", "user_agent": "", "sec_websocket_version": "", "sec_websocket_key": "", "sec_websocket_extensions": "", "accept_encoding": "", "accept_language": ""}, "page": {"host": "", "path": "", "raw_path": "", "full_path": "", "full_raw_path": "", "params": {}}}}, "state.on_load_internal_state": {}, "state.update_vars_internal_state": {}, "state.state": {}, "state.state.theme_state": {"current_theme": 0, "theme": {"background_color": "#282828"}, "themes": {"0": {"background_color": "#282828"}, "1": {"background_color": "#000000"}}}}
export const defaultColorMode = "light"
export const ColorModeContext = createContext(null);
export const UploadFilesContext = createContext(null);
export const DispatchContext = createContext(null);
export const StateContexts = {
state: createContext(null),
state__on_load_internal_state: createContext(null),
state__update_vars_internal_state: createContext(null),
state__state: createContext(null),
state__state__theme_state: createContext(null),
}
export const EventLoopContext = createContext(null);
export const clientStorage = {"cookies": {}, "local_storage": {}}
export const state_name = "state"
// Theses events are triggered on initial load and each page navigation.
export const onLoadInternalEvent = () => {
const internal_events = [];
// Get tracked cookie and local storage vars to send to the backend.
const client_storage_vars = hydrateClientStorage(clientStorage);
// But only send the vars if any are actually set in the browser.
if (client_storage_vars && Object.keys(client_storage_vars).length !== 0) {
internal_events.push(
Event(
'state.update_vars_internal_state.update_vars_internal',
{vars: client_storage_vars},
),
);
}
// `on_load_internal` triggers the correct on_load event(s) for the current page.
// If the page does not define any on_load event, this will just set `is_hydrated = true`.
internal_events.push(Event('state.on_load_internal_state.on_load_internal'));
return internal_events;
}
// The following events are sent when the websocket connects or reconnects.
export const initialEvents = () => [
Event('state.hydrate'),
...onLoadInternalEvent()
]
export const isDevMode = true
export function UploadFilesProvider({ children }) {
const [filesById, setFilesById] = useState({})
refs["__clear_selected_files"] = (id) => setFilesById(filesById => {
const newFilesById = {...filesById}
delete newFilesById[id]
return newFilesById
})
return (
<UploadFilesContext.Provider value={[filesById, setFilesById]}>
{children}
</UploadFilesContext.Provider>
)
}
export function EventLoopProvider({ children }) {
const dispatch = useContext(DispatchContext)
const [addEvents, connectErrors] = useEventLoop(
dispatch,
initialEvents,
clientStorage,
)
return (
<EventLoopContext.Provider value={[addEvents, connectErrors]}>
{children}
</EventLoopContext.Provider>
)
}
export function StateProvider({ children }) {
const [state, dispatch_state] = useReducer(applyDelta, initialState["state"])
const [state__on_load_internal_state, dispatch_state__on_load_internal_state] = useReducer(applyDelta, initialState["state.on_load_internal_state"])
const [state__update_vars_internal_state, dispatch_state__update_vars_internal_state] = useReducer(applyDelta, initialState["state.update_vars_internal_state"])
const [state__state, dispatch_state__state] = useReducer(applyDelta, initialState["state.state"])
const [state__state__theme_state, dispatch_state__state__theme_state] = useReducer(applyDelta, initialState["state.state.theme_state"])
const dispatchers = useMemo(() => {
return {
"state": dispatch_state,
"state.on_load_internal_state": dispatch_state__on_load_internal_state,
"state.update_vars_internal_state": dispatch_state__update_vars_internal_state,
"state.state": dispatch_state__state,
"state.state.theme_state": dispatch_state__state__theme_state,
}
}, [])
return (
<StateContexts.state.Provider value={ state }>
<StateContexts.state__on_load_internal_state.Provider value={ state__on_load_internal_state }>
<StateContexts.state__update_vars_internal_state.Provider value={ state__update_vars_internal_state }>
<StateContexts.state__state.Provider value={ state__state }>
<StateContexts.state__state__theme_state.Provider value={ state__state__theme_state }>
<DispatchContext.Provider value={dispatchers}>
{children}
</DispatchContext.Provider>
</StateContexts.state__state__theme_state.Provider>
</StateContexts.state__state.Provider>
</StateContexts.state__update_vars_internal_state.Provider>
</StateContexts.state__on_load_internal_state.Provider>
</StateContexts.state.Provider>
)
}

352
src/landing/.web/utils/state.js
View File

@@ -6,14 +6,19 @@ import env from "/env.json";
import Cookies from "universal-cookie";
import { useEffect, useReducer, useRef, useState } from "react";
import Router, { useRouter } from "next/router";
import { initialEvents, initialState, onLoadInternalEvent, state_name } from "utils/context.js"
import {
initialEvents,
initialState,
onLoadInternalEvent,
state_name,
} from "utils/context.js";
// Endpoint URLs.
const EVENTURL = env.EVENT
const UPLOADURL = env.UPLOAD
const EVENTURL = env.EVENT;
const UPLOADURL = env.UPLOAD;
// These hostnames indicate that the backend and frontend are reachable via the same domain.
const SAME_DOMAIN_HOSTNAMES = ["localhost", "0.0.0.0", "::", "0:0:0:0:0:0:0:0"]
const SAME_DOMAIN_HOSTNAMES = ["localhost", "0.0.0.0", "::", "0:0:0:0:0:0:0:0"];
// Global variable to hold the token.
let token;
@@ -28,7 +33,7 @@ const cookies = new Cookies();
export const refs = {};
// Flag ensures that only one event is processing on the backend concurrently.
let event_processing = false
let event_processing = false;
// Array holding pending events to be processed.
const event_queue = [];
@@ -64,7 +69,7 @@ export const getToken = () => {
if (token) {
return token;
}
if (typeof window !== 'undefined') {
if (typeof window !== "undefined") {
if (!window.sessionStorage.getItem(TOKEN_KEY)) {
window.sessionStorage.setItem(TOKEN_KEY, generateUUID());
}
@@ -81,7 +86,10 @@ export const getToken = () => {
export const getBackendURL = (url_str) => {
// Get backend URL object from the endpoint.
const endpoint = new URL(url_str);
if ((typeof window !== 'undefined') && SAME_DOMAIN_HOSTNAMES.includes(endpoint.hostname)) {
if (
typeof window !== "undefined" &&
SAME_DOMAIN_HOSTNAMES.includes(endpoint.hostname)
) {
// Use the frontend domain to access the backend
const frontend_hostname = window.location.hostname;
endpoint.hostname = frontend_hostname;
@@ -91,11 +99,11 @@ export const getBackendURL = (url_str) => {
} else if (endpoint.protocol === "http:") {
endpoint.protocol = "https:";
}
endpoint.port = ""; // Assume websocket is on https port via load balancer.
endpoint.port = ""; // Assume websocket is on https port via load balancer.
}
}
return endpoint
}
return endpoint;
};
/**
* Apply a delta to the state.
@@ -103,10 +111,9 @@ export const getBackendURL = (url_str) => {
* @param delta The delta to apply.
*/
export const applyDelta = (state, delta) => {
return { ...state, ...delta }
return { ...state, ...delta };
};
/**
* Handle frontend event or send the event to the backend via Websocket.
* @param event The event to send.
@@ -117,10 +124,8 @@ export const applyDelta = (state, delta) => {
export const applyEvent = async (event, socket) => {
// Handle special events
if (event.name == "_redirect") {
if (event.payload.external)
window.open(event.payload.path, "_blank");
else
Router.push(event.payload.path);
if (event.payload.external) window.open(event.payload.path, "_blank");
else Router.push(event.payload.path);
return false;
}
@@ -130,20 +135,20 @@ export const applyEvent = async (event, socket) => {
}
if (event.name == "_remove_cookie") {
cookies.remove(event.payload.key, { ...event.payload.options })
queueEvents(initialEvents(), socket)
cookies.remove(event.payload.key, { ...event.payload.options });
queueEvents(initialEvents(), socket);
return false;
}
if (event.name == "_clear_local_storage") {
localStorage.clear();
queueEvents(initialEvents(), socket)
queueEvents(initialEvents(), socket);
return false;
}
if (event.name == "_remove_local_storage") {
localStorage.removeItem(event.payload.key);
queueEvents(initialEvents(), socket)
queueEvents(initialEvents(), socket);
return false;
}
@@ -154,9 +159,9 @@ export const applyEvent = async (event, socket) => {
}
if (event.name == "_download") {
const a = document.createElement('a');
const a = document.createElement("a");
a.hidden = true;
a.href = event.payload.url
a.href = event.payload.url;
a.download = event.payload.filename;
a.click();
a.remove();
@@ -178,7 +183,9 @@ export const applyEvent = async (event, socket) => {
if (event.name == "_set_value") {
const ref =
event.payload.ref in refs ? refs[event.payload.ref] : event.payload.ref;
ref.current.value = event.payload.value;
if (ref.current) {
ref.current.value = event.payload.value;
}
return false;
}
@@ -186,10 +193,10 @@ export const applyEvent = async (event, socket) => {
try {
const eval_result = eval(event.payload.javascript_code);
if (event.payload.callback) {
if (!!eval_result && typeof eval_result.then === 'function') {
eval(event.payload.callback)(await eval_result)
if (!!eval_result && typeof eval_result.then === "function") {
eval(event.payload.callback)(await eval_result);
} else {
eval(event.payload.callback)(eval_result)
eval(event.payload.callback)(eval_result);
}
}
} catch (e) {
@@ -199,14 +206,24 @@ export const applyEvent = async (event, socket) => {
}
// Update token and router data (if missing).
event.token = getToken()
if (event.router_data === undefined || Object.keys(event.router_data).length === 0) {
event.router_data = (({ pathname, query, asPath }) => ({ pathname, query, asPath }))(Router)
event.token = getToken();
if (
event.router_data === undefined ||
Object.keys(event.router_data).length === 0
) {
event.router_data = (({ pathname, query, asPath }) => ({
pathname,
query,
asPath,
}))(Router);
}
// Send the event to the server.
if (socket) {
socket.emit("event", JSON.stringify(event, (k, v) => v === undefined ? null : v));
socket.emit(
"event",
JSON.stringify(event, (k, v) => (v === undefined ? null : v))
);
return true;
}
@@ -242,17 +259,15 @@ export const applyRestEvent = async (event, socket) => {
* @param socket The socket object to send the event on.
*/
export const queueEvents = async (events, socket) => {
event_queue.push(...events)
await processEvent(socket.current)
}
event_queue.push(...events);
await processEvent(socket.current);
};
/**
* Process an event off the event queue.
* @param socket The socket object to send the event on.
*/
export const processEvent = async (
socket
) => {
export const processEvent = async (socket) => {
// Only proceed if the socket is up, otherwise we throw the event into the void
if (!socket) {
return;
@@ -264,12 +279,12 @@ export const processEvent = async (
}
// Set processing to true to block other events from being processed.
event_processing = true
event_processing = true;
// Apply the next event in the queue.
const event = event_queue.shift();
let eventSent = false
let eventSent = false;
// Process events with handlers via REST and all others via websockets.
if (event.handler) {
eventSent = await applyRestEvent(event, socket);
@@ -281,27 +296,27 @@ export const processEvent = async (
event_processing = false;
// recursively call processEvent to drain the queue, since there is
// no state update to trigger the useEffect event loop.
await processEvent(socket)
await processEvent(socket);
}
}
};
/**
* Connect to a websocket and set the handlers.
* @param socket The socket object to connect.
* @param dispatch The function to queue state update
* @param transports The transports to use.
* @param setConnectError The function to update connection error value.
* @param setConnectErrors The function to update connection error value.
* @param client_storage The client storage object from context.js
*/
export const connect = async (
socket,
dispatch,
transports,
setConnectError,
client_storage = {},
setConnectErrors,
client_storage = {}
) => {
// Get backend URL object from the endpoint.
const endpoint = getBackendURL(EVENTURL)
const endpoint = getBackendURL(EVENTURL);
// Create the socket.
socket.current = io(endpoint.href, {
@@ -310,27 +325,39 @@ export const connect = async (
autoUnref: false,
});
function checkVisibility() {
if (document.visibilityState === "visible") {
if (!socket.current.connected) {
console.log("Socket is disconnected, attempting to reconnect ");
socket.current.connect();
} else {
console.log("Socket is reconnected ");
}
}
}
// Once the socket is open, hydrate the page.
socket.current.on("connect", () => {
setConnectError(null)
setConnectErrors([]);
});
socket.current.on('connect_error', (error) => {
setConnectError(error)
socket.current.on("connect_error", (error) => {
setConnectErrors((connectErrors) => [connectErrors.slice(-9), error]);
});
// On each received message, queue the updates and events.
socket.current.on("event", message => {
const update = JSON5.parse(message)
socket.current.on("event", (message) => {
const update = JSON5.parse(message);
for (const substate in update.delta) {
dispatch[substate](update.delta[substate])
dispatch[substate](update.delta[substate]);
}
applyClientStorageDelta(client_storage, update.delta)
event_processing = !update.final
applyClientStorageDelta(client_storage, update.delta);
event_processing = !update.final;
if (update.events) {
queueEvents(update.events, socket)
queueEvents(update.events, socket);
}
});
document.addEventListener("visibilitychange", checkVisibility);
};
/**
@@ -344,38 +371,44 @@ export const connect = async (
*
* @returns The response from posting to the UPLOADURL endpoint.
*/
export const uploadFiles = async (handler, files, upload_id, on_upload_progress, socket) => {
export const uploadFiles = async (
handler,
files,
upload_id,
on_upload_progress,
socket
) => {
// return if there's no file to upload
if (files === undefined || files.length === 0) {
return false;
}
if (upload_controllers[upload_id]) {
console.log("Upload already in progress for ", upload_id)
console.log("Upload already in progress for ", upload_id);
return false;
}
let resp_idx = 0;
const eventHandler = (progressEvent) => {
// handle any delta / event streamed from the upload event handler
const chunks = progressEvent.event.target.responseText.trim().split("\n")
const chunks = progressEvent.event.target.responseText.trim().split("\n");
chunks.slice(resp_idx).map((chunk) => {
try {
socket._callbacks.$event.map((f) => {
f(chunk)
})
resp_idx += 1
f(chunk);
});
resp_idx += 1;
} catch (e) {
if (progressEvent.progress === 1) {
// Chunk may be incomplete, so only report errors when full response is available.
console.log("Error parsing chunk", chunk, e)
console.log("Error parsing chunk", chunk, e);
}
return
return;
}
})
}
});
};
const controller = new AbortController()
const controller = new AbortController();
const config = {
headers: {
"Reflex-Client-Token": getToken(),
@@ -383,26 +416,22 @@ export const uploadFiles = async (handler, files, upload_id, on_upload_progress,
},
signal: controller.signal,
onDownloadProgress: eventHandler,
}
};
if (on_upload_progress) {
config["onUploadProgress"] = on_upload_progress
config["onUploadProgress"] = on_upload_progress;
}
const formdata = new FormData();
// Add the token and handler to the file name.
files.forEach((file) => {
formdata.append(
"files",
file,
file.path || file.name
);
})
formdata.append("files", file, file.path || file.name);
});
// Send the file to the server.
upload_controllers[upload_id] = controller
upload_controllers[upload_id] = controller;
try {
return await axios.post(getBackendURL(UPLOADURL), formdata, config)
return await axios.post(getBackendURL(UPLOADURL), formdata, config);
} catch (error) {
if (error.response) {
// The request was made and the server responded with a status code
@@ -419,7 +448,7 @@ export const uploadFiles = async (handler, files, upload_id, on_upload_progress,
}
return false;
} finally {
delete upload_controllers[upload_id]
delete upload_controllers[upload_id];
}
};
@@ -441,30 +470,32 @@ export const Event = (name, payload = {}, handler = null) => {
* @returns payload dict of client storage values
*/
export const hydrateClientStorage = (client_storage) => {
const client_storage_values = {}
const client_storage_values = {};
if (client_storage.cookies) {
for (const state_key in client_storage.cookies) {
const cookie_options = client_storage.cookies[state_key]
const cookie_name = cookie_options.name || state_key
const cookie_value = cookies.get(cookie_name)
const cookie_options = client_storage.cookies[state_key];
const cookie_name = cookie_options.name || state_key;
const cookie_value = cookies.get(cookie_name);
if (cookie_value !== undefined) {
client_storage_values[state_key] = cookies.get(cookie_name)
client_storage_values[state_key] = cookies.get(cookie_name);
}
}
}
if (client_storage.local_storage && (typeof window !== 'undefined')) {
if (client_storage.local_storage && typeof window !== "undefined") {
for (const state_key in client_storage.local_storage) {
const options = client_storage.local_storage[state_key]
const local_storage_value = localStorage.getItem(options.name || state_key)
const options = client_storage.local_storage[state_key];
const local_storage_value = localStorage.getItem(
options.name || state_key
);
if (local_storage_value !== null) {
client_storage_values[state_key] = local_storage_value
client_storage_values[state_key] = local_storage_value;
}
}
}
if (client_storage.cookies || client_storage.local_storage) {
return client_storage_values
return client_storage_values;
}
return {}
return {};
};
/**
@@ -474,9 +505,11 @@ export const hydrateClientStorage = (client_storage) => {
*/
const applyClientStorageDelta = (client_storage, delta) => {
// find the main state and check for is_hydrated
const unqualified_states = Object.keys(delta).filter((key) => key.split(".").length === 1);
const unqualified_states = Object.keys(delta).filter(
(key) => key.split(".").length === 1
);
if (unqualified_states.length === 1) {
const main_state = delta[unqualified_states[0]]
const main_state = delta[unqualified_states[0]];
if (main_state.is_hydrated !== undefined && !main_state.is_hydrated) {
// skip if the state is not hydrated yet, since all client storage
// values are sent in the hydrate event
@@ -486,19 +519,23 @@ const applyClientStorageDelta = (client_storage, delta) => {
// Save known client storage values to cookies and localStorage.
for (const substate in delta) {
for (const key in delta[substate]) {
const state_key = `${substate}.${key}`
const state_key = `${substate}.${key}`;
if (client_storage.cookies && state_key in client_storage.cookies) {
const cookie_options = { ...client_storage.cookies[state_key] }
const cookie_name = cookie_options.name || state_key
delete cookie_options.name // name is not a valid cookie option
const cookie_options = { ...client_storage.cookies[state_key] };
const cookie_name = cookie_options.name || state_key;
delete cookie_options.name; // name is not a valid cookie option
cookies.set(cookie_name, delta[substate][key], cookie_options);
} else if (client_storage.local_storage && state_key in client_storage.local_storage && (typeof window !== 'undefined')) {
const options = client_storage.local_storage[state_key]
} else if (
client_storage.local_storage &&
state_key in client_storage.local_storage &&
typeof window !== "undefined"
) {
const options = client_storage.local_storage[state_key];
localStorage.setItem(options.name || state_key, delta[substate][key]);
}
}
}
}
};
/**
* Establish websocket event loop for a NextJS page.
@@ -506,18 +543,18 @@ const applyClientStorageDelta = (client_storage, delta) => {
* @param initial_events The initial app events.
* @param client_storage The client storage object from context.js
*
* @returns [addEvents, connectError] -
* @returns [addEvents, connectErrors] -
* addEvents is used to queue an event, and
* connectError is a reactive js error from the websocket connection (or null if connected).
* connectErrors is an array of reactive js error from the websocket connection (or null if connected).
*/
export const useEventLoop = (
dispatch,
initial_events = () => [],
client_storage = {},
client_storage = {}
) => {
const socket = useRef(null)
const router = useRouter()
const [connectError, setConnectError] = useState(null)
const socket = useRef(null);
const router = useRouter();
const [connectErrors, setConnectErrors] = useState([]);
// Function to add new events to the event queue.
const addEvents = (events, _e, event_actions) => {
@@ -527,22 +564,26 @@ export const useEventLoop = (
if (event_actions?.stopPropagation && _e?.stopPropagation) {
_e.stopPropagation();
}
queueEvents(events, socket)
}
queueEvents(events, socket);
};
const sentHydrate = useRef(false); // Avoid double-hydrate due to React strict-mode
const sentHydrate = useRef(false); // Avoid double-hydrate due to React strict-mode
useEffect(() => {
if (router.isReady && !sentHydrate.current) {
const events = initial_events()
addEvents(events.map((e) => (
{
const events = initial_events();
addEvents(
events.map((e) => ({
...e,
router_data: (({ pathname, query, asPath }) => ({ pathname, query, asPath }))(router)
}
)))
sentHydrate.current = true
router_data: (({ pathname, query, asPath }) => ({
pathname,
query,
asPath,
}))(router),
}))
);
sentHydrate.current = true;
}
}, [router.isReady])
}, [router.isReady]);
// Main event loop.
useEffect(() => {
@@ -554,17 +595,22 @@ export const useEventLoop = (
if (Object.keys(initialState).length > 1) {
// Initialize the websocket connection.
if (!socket.current) {
connect(socket, dispatch, ['websocket', 'polling'], setConnectError, client_storage)
connect(
socket,
dispatch,
["websocket", "polling"],
setConnectErrors,
client_storage
);
}
(async () => {
// Process all outstanding events.
while (event_queue.length > 0 && !event_processing) {
await processEvent(socket.current)
await processEvent(socket.current);
}
})()
})();
}
})
});
// localStorage event handling
useEffect(() => {
@@ -583,9 +629,12 @@ export const useEventLoop = (
// e is StorageEvent
const handleStorage = (e) => {
if (storage_to_state_map[e.key]) {
const vars = {}
vars[storage_to_state_map[e.key]] = e.newValue
const event = Event(`${state_name}.update_vars_internal`, {vars: vars})
const vars = {};
vars[storage_to_state_map[e.key]] = e.newValue;
const event = Event(
`${state_name}.update_vars_internal_state.update_vars_internal`,
{ vars: vars }
);
addEvents([event], e);
}
};
@@ -594,18 +643,17 @@ export const useEventLoop = (
return () => window.removeEventListener("storage", handleStorage);
});
// Route after the initial page hydration.
useEffect(() => {
const change_complete = () => addEvents(onLoadInternalEvent())
router.events.on('routeChangeComplete', change_complete)
const change_complete = () => addEvents(onLoadInternalEvent());
router.events.on("routeChangeComplete", change_complete);
return () => {
router.events.off('routeChangeComplete', change_complete)
}
}, [router])
router.events.off("routeChangeComplete", change_complete);
};
}, [router]);
return [addEvents, connectError]
}
return [addEvents, connectErrors];
};
/***
* Check if a value is truthy in python.
@@ -626,17 +674,25 @@ export const getRefValue = (ref) => {
return;
}
if (ref.current.type == "checkbox") {
return ref.current.checked; // chakra
} else if (ref.current.className.includes("rt-CheckboxButton") || ref.current.className.includes("rt-SwitchButton")) {
return ref.current.ariaChecked == "true"; // radix
} else if (ref.current.className.includes("rt-SliderRoot")) {
return ref.current.checked; // chakra
} else if (
ref.current.className?.includes("rt-CheckboxButton") ||
ref.current.className?.includes("rt-SwitchButton")
) {
return ref.current.ariaChecked == "true"; // radix
} else if (ref.current.className?.includes("rt-SliderRoot")) {
// find the actual slider
return ref.current.querySelector(".rt-SliderThumb").ariaValueNow;
return ref.current.querySelector(".rt-SliderThumb")?.ariaValueNow;
} else {
//querySelector(":checked") is needed to get value from radio_group
return ref.current.value || (ref.current.querySelector(':checked') && ref.current.querySelector(':checked').value);
return (
ref.current.value ||
(ref.current.querySelector &&
ref.current.querySelector(":checked") &&
ref.current.querySelector(":checked")?.value)
);
}
}
};
/**
* Get the values from a ref array.
@@ -648,21 +704,25 @@ export const getRefValues = (refs) => {
return;
}
// getAttribute is used by RangeSlider because it doesn't assign value
return refs.map((ref) => ref.current ? ref.current.value || ref.current.getAttribute("aria-valuenow") : null);
}
return refs.map((ref) =>
ref.current
? ref.current.value || ref.current.getAttribute("aria-valuenow")
: null
);
};
/**
* Spread two arrays or two objects.
* @param first The first array or object.
* @param second The second array or object.
* @returns The final merged array or object.
*/
* Spread two arrays or two objects.
* @param first The first array or object.
* @param second The second array or object.
* @returns The final merged array or object.
*/
export const spreadArraysOrObjects = (first, second) => {
if (Array.isArray(first) && Array.isArray(second)) {
return [...first, ...second];
} else if (typeof first === 'object' && typeof second === 'object') {
} else if (typeof first === "object" && typeof second === "object") {
return { ...first, ...second };
} else {
throw new Error('Both parameters must be either arrays or objects.');
throw new Error("Both parameters must be either arrays or objects.");
}
}
};

7
src/landing/.web/utils/stateful_components.js Normal file
View File

@@ -0,0 +1,7 @@
/** @jsxImportSource @emotion/react */

1
src/landing/.web/utils/theme.js Normal file
View File

@@ -0,0 +1 @@
export default {"styles": {"global": {":root": {}, "body": {"backgroundColor": "#282828"}}}}

2
src/landing/landing/style.py
View File

@@ -53,7 +53,7 @@ base_style = {
"font_family": "ComicCode",
"font_size": 24,
"color": color["black"],
"text_decoration": "underline",
"text_decoration": "none",
"_hover": {
"color": color["green"][100]
}