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

fix page reloads

Browse Source
This commit is contained in:
Timothy Pidashev
2024-03-12 12:35:50 -07:00
parent d1684a1472
commit 09365d828a
12 changed files with 140 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/web/.gitignore vendored Normal file
View File

@@ -0,0 +1,4 @@
*.db
*.py[cod]
.web
__pycache__/

BIN
src/web/.web/bun.lockb
View File

Binary file not shown.

2
src/web/.web/package.json
View File

@@ -10,7 +10,7 @@
"@emotion/react": "11.11.1",
"@radix-ui/themes": "^2.0.0",
"axios": "1.6.0",
"framer-motion": "^11.0.8",
"framer-motion": "^11.0.12",
"json5": "2.2.3",
"lucide-react": "0.314.0",
"next": "14.0.1",

88
src/web/.web/pages/404.js
View File

@@ -14,29 +14,16 @@ import NextHead from "next/head"
export function Fragment_e9a05c105aa9215aeba52aeec8fe2e76 () {
const state = useContext(StateContexts.state)
const [addEvents, connectErrors] = useContext(EventLoopContext);
const pulse = keyframes`
0% {
opacity: 0;
}
100% {
opacity: 1;
}
`
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>
)
}
import { useIsPresent } from "framer-motion";
export function Fragment_14636cc997c0546c0967a25d8e600f96 () {
const [addEvents, connectErrors] = useContext(EventLoopContext);
@@ -66,15 +53,28 @@ export function Fragment_14636cc997c0546c0967a25d8e600f96 () {
)
}
const pulse = keyframes`
0% {
opacity: 0;
}
100% {
opacity: 1;
}
`
import { useIsPresent } from "framer-motion";
export function Fragment_e9a05c105aa9215aeba52aeec8fe2e76 () {
const state = useContext(StateContexts.state)
const [addEvents, connectErrors] = useContext(EventLoopContext);
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 default function Component() {
@@ -92,38 +92,48 @@ export default function Component() {
<RadixThemesBox>
<RadixThemesFlex css={{"display": "flex", "alignItems": "center", "justifyContent": "center"}} gap={`7`}>
<RadixThemesFlex>
<RadixThemesLink css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<RadixThemesText as={`p`} css={{"href": "/about", "fontFamily": "ComicCode", "fontSize": 24, "color": "#ebdbb2"}}>
<RadixThemesLink asChild={true} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<NextLink href={`/about`} passHref={true}>
<RadixThemesText as={`p`} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#ebdbb2"}}>
{`About`}
</RadixThemesText>
</NextLink>
</RadixThemesLink>
</RadixThemesFlex>
<RadixThemesFlex>
<RadixThemesLink css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<RadixThemesText as={`p`} css={{"href": "/projects", "fontFamily": "ComicCode", "fontSize": 24, "color": "#ebdbb2"}}>
<RadixThemesLink asChild={true} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<NextLink href={`/projects`} passHref={true}>
<RadixThemesText as={`p`} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#ebdbb2"}}>
{`Projects`}
</RadixThemesText>
</NextLink>
</RadixThemesLink>
</RadixThemesFlex>
<RadixThemesFlex>
<RadixThemesLink css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<RadixThemesText as={`p`} css={{"href": "/resume", "fontFamily": "ComicCode", "fontSize": 24, "color": "#ebdbb2"}}>
<RadixThemesLink asChild={true} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<NextLink href={`/resume`} passHref={true}>
<RadixThemesText as={`p`} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#ebdbb2"}}>
{`Resume`}
</RadixThemesText>
</NextLink>
</RadixThemesLink>
</RadixThemesFlex>
<RadixThemesFlex>
<RadixThemesLink css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<RadixThemesText as={`p`} css={{"href": "/blog", "fontFamily": "ComicCode", "fontSize": 24, "color": "#ebdbb2"}}>
<RadixThemesLink asChild={true} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<NextLink href={`/blog`} passHref={true}>
<RadixThemesText as={`p`} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#ebdbb2"}}>
{`Blog`}
</RadixThemesText>
</NextLink>
</RadixThemesLink>
</RadixThemesFlex>
<RadixThemesFlex>
<RadixThemesLink css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<RadixThemesText as={`p`} css={{"href": "shop", "fontFamily": "ComicCode", "fontSize": 24, "color": "#ebdbb2"}}>
<RadixThemesLink asChild={true} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<NextLink href={`shop`} passHref={true}>
<RadixThemesText as={`p`} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#ebdbb2"}}>
{`Shop`}
</RadixThemesText>
</NextLink>
</RadixThemesLink>
</RadixThemesFlex>
</RadixThemesFlex>

88
src/web/.web/pages/index.js
View File

@@ -14,29 +14,16 @@ import NextHead from "next/head"
export function Fragment_e9a05c105aa9215aeba52aeec8fe2e76 () {
const state = useContext(StateContexts.state)
const [addEvents, connectErrors] = useContext(EventLoopContext);
const pulse = keyframes`
0% {
opacity: 0;
}
100% {
opacity: 1;
}
`
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>
)
}
import { useIsPresent } from "framer-motion";
export function Fragment_14636cc997c0546c0967a25d8e600f96 () {
const [addEvents, connectErrors] = useContext(EventLoopContext);
@@ -66,15 +53,28 @@ export function Fragment_14636cc997c0546c0967a25d8e600f96 () {
)
}
const pulse = keyframes`
0% {
opacity: 0;
}
100% {
opacity: 1;
}
`
import { useIsPresent } from "framer-motion";
export function Fragment_e9a05c105aa9215aeba52aeec8fe2e76 () {
const state = useContext(StateContexts.state)
const [addEvents, connectErrors] = useContext(EventLoopContext);
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 default function Component() {
@@ -92,38 +92,48 @@ export default function Component() {
<RadixThemesBox>
<RadixThemesFlex css={{"display": "flex", "alignItems": "center", "justifyContent": "center"}} gap={`7`}>
<RadixThemesFlex>
<RadixThemesLink css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<RadixThemesText as={`p`} css={{"href": "/about", "fontFamily": "ComicCode", "fontSize": 24, "color": "#ebdbb2"}}>
<RadixThemesLink asChild={true} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<NextLink href={`/about`} passHref={true}>
<RadixThemesText as={`p`} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#ebdbb2"}}>
{`About`}
</RadixThemesText>
</NextLink>
</RadixThemesLink>
</RadixThemesFlex>
<RadixThemesFlex>
<RadixThemesLink css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<RadixThemesText as={`p`} css={{"href": "/projects", "fontFamily": "ComicCode", "fontSize": 24, "color": "#ebdbb2"}}>
<RadixThemesLink asChild={true} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<NextLink href={`/projects`} passHref={true}>
<RadixThemesText as={`p`} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#ebdbb2"}}>
{`Projects`}
</RadixThemesText>
</NextLink>
</RadixThemesLink>
</RadixThemesFlex>
<RadixThemesFlex>
<RadixThemesLink css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<RadixThemesText as={`p`} css={{"href": "/resume", "fontFamily": "ComicCode", "fontSize": 24, "color": "#ebdbb2"}}>
<RadixThemesLink asChild={true} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<NextLink href={`/resume`} passHref={true}>
<RadixThemesText as={`p`} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#ebdbb2"}}>
{`Resume`}
</RadixThemesText>
</NextLink>
</RadixThemesLink>
</RadixThemesFlex>
<RadixThemesFlex>
<RadixThemesLink css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<RadixThemesText as={`p`} css={{"href": "/blog", "fontFamily": "ComicCode", "fontSize": 24, "color": "#ebdbb2"}}>
<RadixThemesLink asChild={true} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<NextLink href={`/blog`} passHref={true}>
<RadixThemesText as={`p`} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#ebdbb2"}}>
{`Blog`}
</RadixThemesText>
</NextLink>
</RadixThemesLink>
</RadixThemesFlex>
<RadixThemesFlex>
<RadixThemesLink css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<RadixThemesText as={`p`} css={{"href": "shop", "fontFamily": "ComicCode", "fontSize": 24, "color": "#ebdbb2"}}>
<RadixThemesLink asChild={true} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#000000", "textDecoration": "none", "&:hover": {"color": "#b8bb26"}}}>
<NextLink href={`shop`} passHref={true}>
<RadixThemesText as={`p`} css={{"fontFamily": "ComicCode", "fontSize": 24, "color": "#ebdbb2"}}>
{`Shop`}
</RadixThemesText>
</NextLink>
</RadixThemesLink>
</RadixThemesFlex>
</RadixThemesFlex>

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

@@ -1 +1 @@
{"version": "0.4.3", "project_hash": 133404493286750418693195899744043836434, "last_version_check_datetime": "2024-03-12 00:10:35.074745"}
{"version": "0.4.3", "project_hash": 76742530442461448999350655539571039381, "last_version_check_datetime": "2024-03-12 10:19:00.533460"}

12
src/web/.web/utils/context.js
View File

@@ -1,7 +1,7 @@
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.state": {}, "state.state.theme_state": {"current_theme": 0, "theme": {"background_color": "#282828"}, "themes": {"0": {"background_color": "#282828"}, "1": {"background_color": "#000000"}}}, "state.update_vars_internal_state": {}}
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.state": {}, "state.state.theme_state": {"current_theme": 0, "theme": {"background_color": "#282828"}, "themes": {"0": {"background_color": "#282828"}, "1": {"background_color": "#000000"}}}, "state.update_vars_internal_state": {}, "state.on_load_internal_state": {}}
export const defaultColorMode = "light"
export const ColorModeContext = createContext(null);
@@ -9,10 +9,10 @@ export const UploadFilesContext = createContext(null);
export const DispatchContext = createContext(null);
export const StateContexts = {
state: createContext(null),
state__on_load_internal_state: createContext(null),
state__state: createContext(null),
state__state__theme_state: createContext(null),
state__update_vars_internal_state: createContext(null),
state__on_load_internal_state: createContext(null),
}
export const EventLoopContext = createContext(null);
export const clientStorage = {"cookies": {}, "local_storage": {}}
@@ -80,33 +80,33 @@ export function EventLoopProvider({ children }) {
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__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 [state__update_vars_internal_state, dispatch_state__update_vars_internal_state] = useReducer(applyDelta, initialState["state.update_vars_internal_state"])
const [state__on_load_internal_state, dispatch_state__on_load_internal_state] = useReducer(applyDelta, initialState["state.on_load_internal_state"])
const dispatchers = useMemo(() => {
return {
"state": dispatch_state,
"state.on_load_internal_state": dispatch_state__on_load_internal_state,
"state.state": dispatch_state__state,
"state.state.theme_state": dispatch_state__state__theme_state,
"state.update_vars_internal_state": dispatch_state__update_vars_internal_state,
"state.on_load_internal_state": dispatch_state__on_load_internal_state,
}
}, [])
return (
<StateContexts.state.Provider value={ state }>
<StateContexts.state__on_load_internal_state.Provider value={ state__on_load_internal_state }>
<StateContexts.state__state.Provider value={ state__state }>
<StateContexts.state__state__theme_state.Provider value={ state__state__theme_state }>
<StateContexts.state__update_vars_internal_state.Provider value={ state__update_vars_internal_state }>
<StateContexts.state__on_load_internal_state.Provider value={ state__on_load_internal_state }>
<DispatchContext.Provider value={dispatchers}>
{children}
</DispatchContext.Provider>
</StateContexts.state__on_load_internal_state.Provider>
</StateContexts.state__update_vars_internal_state.Provider>
</StateContexts.state__state__theme_state.Provider>
</StateContexts.state__state.Provider>
</StateContexts.state__on_load_internal_state.Provider>
</StateContexts.state.Provider>
)
}

21
src/web/web/components/navbar.py
View File

@@ -1,33 +1,24 @@
import reflex as rx
from web.state import *
from web.style import *
def navbar():
return rx.box(
rx.center(
rx.flex(
rx.link(
rx.text("About", href="/about")
)
rx.link("About", href="/about")
),
rx.flex(
rx.link(
rx.text("Projects", href="/projects")
)
rx.link("Projects", href="/projects")
),
rx.flex(
rx.link(
rx.text("Resume", href="/resume")
)
rx.link("Resume", href="/resume")
),
rx.flex(
rx.link(
rx.text("Blog", href="/blog")
)
rx.link("Blog", href="/blog")
),
rx.flex(
rx.link(
rx.text("Shop", href="shop")
)
rx.link("Shop", href="/shop")
),
spacing="7",
)

1
src/web/web/pages/__init__.py
View File

@@ -1,6 +1,7 @@
from web.route import Route
from .index import index
from .about import about
from .page404 import page404
routes = [

14
src/web/web/pages/about.py Normal file
View File

@@ -0,0 +1,14 @@
import reflex as rx
from web.templates import webpage
@webpage(path="/about", title="About")
def about():
return rx.box(
rx.center(
rx.vstack(
rx.heading("About", sixe="9"),
align="center"
),
height="100vh",
)
)

13
src/web/web/pages/page404.py
View File

@@ -1,6 +1,5 @@
import reflex as rx
from web.templates import webpage
from web.motion import motion
# TODO: Add a go back here link
@@ -9,14 +8,10 @@ def page404():
return rx.box(
rx.center(
rx.vstack(
motion(
rx.heading(
"Whoops, this page doesn't exist...", size="9"
),
initial={"opacity": 0, "y": -50}, # Initial state: transparent and above the screen
animate={"opacity": 1, "y": 0, "transition": {"duration": 0.5, "ease": "easeInOut"}}, # Animate opacity to 1 and move down into view
while_hover={"scale": 1.1}, # Enlarge on hover
)
rx.heading(
"Whoops, this page doesn't exist...", size="9"
),
align="center"
),
height="100vh",
width="100%",

15
src/web/web/templates/webpage.py
View File

@@ -1,7 +1,6 @@
from typing import Callable
import reflex as rx
from web.route import Route
from web.motion import motion
def webpage(path: str, title: str = "Timothy Pidashev", props=None) -> Callable:
"""This template wraps the webpage with the navbar and footer.
@@ -42,15 +41,11 @@ def webpage(path: str, title: str = "Timothy Pidashev", props=None) -> Callable:
# Declare the entire page content
return rx.box(
motion(
rx.box(
navbar(),
contents(*children, **props),
footer(),
**props
),
initial={"opacity": 0, "y": -50}, # Initial state: transparent and above the screen
animate={"opacity": 1, "y": 0, "transition": {"duration": 0.5, "ease": "easeInOut"}}, # Animate opacity to 1 and move down into view
rx.box(
navbar(),
contents(*children, **props),
footer(),
**props
)
)