feat: basic preview feature

1 files changed, 273 insertions, 0 deletions

diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
new file mode 100644
index 0000000..64436f2
--- /dev/null
+++ b/components/Sidebar/index.tsx
@@ -0,0 +1,273 @@
+import React, { useContext, useEffect, useState } from 'react'
+
+import { UniOrg } from "../../util/uniorg"
+import { getOrgText } from "../../util/webSocketFunctions"
+
+import {
+    Button,
+    Slide,
+    VStack,
+    Flex,
+    Heading,
+    Box,
+    CloseButton,
+    Text,
+    Drawer,
+    DrawerOverlay,
+    DrawerHeader,
+    DrawerBody,
+    DrawerCloseButton,
+    DrawerContent,
+    DrawerFooter,
+    IconButton,
+} from '@chakra-ui/react'
+import { Scrollbars } from 'react-custom-scrollbars-2'
+import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'
+
+import { GraphData, NodeObject, LinkObject } from 'force-graph'
+import { OrgRoamNode } from '../../api'
+import {ThemeContext} from '../../util/themecontext'
+
+export interface SidebarProps {
+    isOpen: boolean
+    onClose: any
+    openNode: string
+    nodeById: any
+    previewNode: NodeObject,
+    orgText: string
+}
+
+const Sidebar = (props: SidebarProps) => {
+
+    const { isOpen, onClose, openNode, nodeById, previewNode, orgText } = props
+
+    const {highlightColor}= useContext(ThemeContext)
+
+    useEffect(() => {
+        (async () => {
+            if (!openNode) {
+                return
+            }
+            if (openNode === 'nil') {
+                return
+            }
+        })()
+
+        const previewRoamNode = previewNode as OrgRoamNode
+    }, [previewNode])
+
+    //maybe want to close it when clicking outside, but not sure
+    //const outsideClickRef = useRef();
+    return (
+        <Slide direction="right" in={isOpen} style={{ zIndex: 200, width: 500 }} unmountOnExit>
+            <Flex flexDirection="row" height="100%">
+                <IconButton
+                    icon={<ChevronRightIcon height={30} />}
+                    colorScheme="white"
+                    aria-label="Close file-viewer"
+                    height={100}
+                    variant="ghost"
+                    marginRight={-2}
+                    bg="alt.100"
+                    onClick={onClose}
+                    marginTop={20}
+                />
+                <Box
+                    color="gray.800"
+                    bg="alt.100"
+                    boxShadow="xl"
+                    w={500}
+                    height="98%"
+                    position="relative"
+                    zIndex="overlay"
+                    marginTop={10}
+                    paddingBottom={15}
+                    borderRadius="xl"
+                    right={-2}
+                >
+                    <Flex
+                        justifyContent="space-between"
+                        padding={4}
+                        paddingTop={10}
+                        paddingLeft={10}
+                        width="80%"
+                        alignItems="center"
+                        color="black"
+                    >
+                        <Heading size="md">{previewNode.title}</Heading>
+                    </Flex>
+                    <Scrollbars
+                        //autoHeight
+                        //autoHeightMax={600}
+                        autoHide
+                        renderThumbVertical={({ style, ...props }) => (
+                            <Box
+                                {...props}
+                                style={{
+                                    ...style,
+                                    borderRadius: 10,
+                                }}
+                                bg={highlightColor}
+                            />
+                        )}
+                    >
+                        <VStack alignItems="left" bg="alt.100" paddingLeft={10} paddingRight={10}>
+                            <Box
+                                className="org"
+                                sx={{
+                                    h1: { display: 'none' },
+                                    h2: {
+                                        fontSize: '20',
+                                        fontWeight: 'bold !important',
+                                        marginBottom: '1em',
+                                        color: 'black',
+                                    },
+                                    h3: {
+                                        fontSize: '18',
+                                        fontWeight: '600 !important',
+                                        marginBottom: '.5em',
+                                    },
+                                    h4: {
+                                        fontSize: '16',
+                                        fontWeight: '500 !important',
+                                        marginBottom: '.25em',
+                                        fontStyle: 'italic',
+                                    },
+                                    a: {
+                                        color: highlightColor,
+                                        pointerEvents: 'none',
+                                    },
+                                    ol: {
+                                        paddingLeft: '5',
+                                    },
+                                    ul: {
+                                        paddingLeft: '5',
+                                    },
+                                    p: {
+                                        paddingBottom: '.5em',
+                                    },
+                                    ".katex-html": {visibility: 'hidden',
+                                    width: '0px', position: 'absolute'},
+                                    '#content': { textAlign: 'justify' },
+                                    '.title': {
+                                        textAlign: 'center',
+                                        marginBottom: '.2em',
+                                    },
+                                    '.subtitle': {
+                                        textAlign: 'center',
+                                        fontSize: 'medium',
+                                        fontWeight: 'bold',
+                                        marginTop: 0,
+                                    },
+                                    '.todo': { fontFamily: 'monospace', color: 'red' },
+                                    '.equationContainer': {
+                                        display: 'table',
+                                        textAlign: 'center',
+                                        width: '100%',
+                                    },
+                                    '.equation': {
+                                        verticalAlign: 'middle',
+                                    },
+                                    '.equation-label': {
+                                        display: 'tableCell',
+                                        textAlign: 'right',
+                                        verticalAlign: 'middle',
+                                    },
+                                    '.inlinetask': {
+                                        padding: '10px',
+                                        border: '2px solid gray',
+                                        margin: '10px',
+                                        background: '#ffffcc',
+                                    },
+                                    '#org-div-home-and-up': {
+                                        textAlign: 'right',
+                                        fontSize: '70 % ',
+                                        whiteSpace: 'nowrap',
+                                    },
+                                    textarea: { overflowX: 'auto' },
+                                    '.linenr': { fontSize: 'smaller' },
+                                    '.code-highlighted': { backgroundColor: '#ffff00' },
+                                    '.org-info-js_info-navigation': { borderStyle: 'none' },
+                                    '#org-info-js_console-label': {
+                                        fontSize: '10px',
+                                        fontWeight: 'bold',
+                                        whiteSpace: 'nowrap',
+                                    },
+                                    '.org-info-js_search-highlight': {
+                                        backgroundColor: '#ffff00',
+                                        color: '#000000',
+                                        fontWeight: 'bold',
+                                    },
+                                    '.org-svg': { width: '90%' },
+                                    '.done': { fontFamily: 'monospace', color: 'green' },
+                                    '.priority': { fontFamily: 'monospace', color: 'orange' },
+                                    '.tag': {
+                                        backgroundColor: '#eee',
+                                        fontFamily: 'monospace',
+                                        padding: '2px',
+                                        fontSize: '80%',
+                                        fontWeight: 'normal',
+                                    },
+                                    '.timestamp': { color: '#bebebe' },
+                                    '.timestamp-kwd': { color: '#5f9ea0' },
+                                    '.org-right': { marginLeft: 'auto', marginRight: '0px', textAlign: 'right' },
+                                    '.org-left': { marginLeft: '0px', marginRight: 'auto', textAlign: 'left' },
+                                    '.org-center': { marginLeft: 'auto', marginRight: 'auto', textAlign: 'center' },
+                                    '.underline': { textDecoration: 'underline' },
+                                    '#postamble p': { fontSize: '90%', margin: '.2em' },
+                                    '#preamble p': { fontSize: '90%', margin: '.2em' },
+                                    'p.verse': { marginLeft: '3%' },
+                                    pre: {
+                                        border: '1px solid #e6e6e6',
+                                        borderRadius: '3px',
+                                        backgroundColor: '#f2f2f2',
+                                        padding: '8pt',
+                                        fontFamily: 'monospace',
+                                        overflow: 'auto',
+                                        margin: '1.2em',
+                                    },
+                                    'pre.src': {
+                                        position: 'relative',
+                                        overflow: 'auto',
+                                    },
+                                    'pre.src:before': {
+                                        display: 'none',
+                                        position: 'absolute',
+                                        top: '-8px',
+                                        right: '12px',
+                                        padding: '3px',
+                                        color: '#555',
+                                        backgroundColor: '#f2f2f299',
+                                    },
+                                    'caption.t-above': { captionSide: 'top' },
+                                    'caption.t-bottom': { captionSide: 'bottom' },
+                                    'th.org-right': { textAlign: 'center' },
+                                    'th.org-left': { textAlign: 'center' },
+                                    'th.org-center': { textAlign: 'center' },
+                                    'td.org-right': { textAlign: 'right' },
+                                    'td.org-left': { textAlign: 'left' },
+                                    'td.org-center': { textAlign: 'center' },
+                                    '.footpara': { display: 'inline' },
+                                    '.footdef': { marginBottom: '1em' },
+                                    '.figure': { padding: '1em' },
+                                    '.figure p': { textAlign: 'center' },
+                                }}
+                            >
+                                <UniOrg orgText={orgText} />
+                            </Box>
+                        </VStack>
+                    </Scrollbars>
+                </Box>
+            </Flex>
+        </Slide>
+    )
+}
+
+export default Sidebar
+
+
+
+
+/* <Box marginLeft="auto" zIndex={5000} bg="alt.100" maxHeight="100%" width= "30%" padding={8} borderRadius={2}>
+   <Heading size="sm">{previewNode.title}</Heading>
+</Box> */