diff options
| author | Thomas F. K. Jorna <[email protected]> | 2021-07-26 01:42:10 +0200 |
|---|---|---|
| committer | Thomas F. K. Jorna <[email protected]> | 2021-07-26 01:42:10 +0200 |
| commit | eef204000abc79c9a83f3ce268f051dcfff6bf7d (patch) | |
| tree | 73afdd163efbfb4af8cd2ce48eea00eb70a2e0c6 /pages | |
| parent | 9b9d28e267f88d1fe491fb781fa6893d21cde540 (diff) | |
file viewer, prettier things
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/_app.tsx | 3 | ||||
| -rw-r--r-- | pages/index.tsx | 41 |
2 files changed, 40 insertions, 4 deletions
diff --git a/pages/_app.tsx b/pages/_app.tsx index 9a11798..3804c64 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -48,7 +48,8 @@ function MyApp({ Component, pageProps }: AppProps) { white: emacsTheme.bg, black: emacsTheme.fg, gray: { - 200: emacsTheme.base1, + 100: emacsTheme.base1, + 200: d3int.interpolate(emacsTheme.base1, emacsTheme.base3)(0.3), 300: emacsTheme.base2, 400: emacsTheme.base3, 500: emacsTheme.base4, diff --git a/pages/index.tsx b/pages/index.tsx index 8c97a79..4451a44 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -9,14 +9,17 @@ import type { import { OrgRoamGraphReponse, OrgRoamLink, OrgRoamNode } from '../api' import { GraphData, NodeObject } from 'force-graph' +import Head from 'next/head' + import { useWindowSize } from '@react-hook/window-size' import { useAnimation } from '@lilib/hooks' -import { Button, Box, IconButton, useTheme } from '@chakra-ui/react' +import { Button, Box, IconButton, useTheme, useDisclosure } from '@chakra-ui/react' import { SettingsIcon } from '@chakra-ui/icons' import { initialPhysics, initialFilter } from '../components/config' import { Tweaks } from '../components/tweaks' +import { Sidebar } from '../components/sidebar' // react-force-graph fails on import when server-rendered // https://github.com/vasturiano/react-force-graph/issues/155 @@ -54,6 +57,7 @@ export function GraphPage() { const [filter, setFilter] = usePersistantState('filter', initialFilter) const [graphData, setGraphData] = useState<GraphData | null>(null) const [emacsNodeId, setEmacsNodeId] = useState<string | null>(null) + const { isOpen, onOpen, onClose } = useDisclosure() const nodeByIdRef = useRef<NodeById>({}) const linksByNodeIdRef = useRef<LinksByNodeId>({}) @@ -135,7 +139,32 @@ export function GraphPage() { } return ( - <Box display="flex" justifyContent="space-between"> + <Box display="flex"> + <Head> + <title> Org Roam UI </title> + <script + async + src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML" + ></script> + </Head> + <Button + position="absolute" + marginTop="6%" + zIndex="overlay" + marginRight="5" + colorScheme="purple" + onClick={onOpen} + > + Open Drawer + </Button> + <Sidebar + nodeById={nodeByIdRef.current} + {...{ + isOpen, + onClose, + emacsNodeId, + }} + /> <Tweaks {...{ physics, @@ -600,10 +629,16 @@ export const Graph = function (props: GraphProps) { }, } + const bg = theme.colors.alt[100] return ( <div> {threeDim ? ( - <ForceGraph3D ref={graph3dRef} {...graphCommonProps} nodeThreeObjectExtend={true} /> + <ForceGraph3D + ref={graph3dRef} + {...graphCommonProps} + nodeThreeObjectExtend={true} + backgroundColor={theme.colors.alt[100]} + /> ) : ( <ForceGraph2D ref={graph2dRef} {...graphCommonProps} /> )} |