Added next and remix main

next/src/components/Commander/Commander.tsx

@@ -8,8 +8,8 @@ import { Rainbow } from '../Rainbow/Rainbow';
 import { Thingtime } from '../Thingtime/Thingtime';
 import { useThingtime } from '../Thingtime/useThingtime';
 
-import { sanitise } from '@/functions/sanitise';
+import { sanitise } from '~/functions/sanitise';
-import { getParentPath } from '@/smarts';
+import { getParentPath } from '~/smarts';
 
 export const Commander = (props: any) => {
   const { thingtime, setThingtime, getThingtime, thingtimeRef, paths } = useThingtime();

next/src/components/Commander/CommanderV2.tsx

@@ -8,9 +8,9 @@ import { Rainbow } from '../Rainbow/Rainbow';
 import { Thingtime } from '../Thingtime/Thingtime';
 import { useThingtime } from '../Thingtime/useThingtime';
 
-import { sanitise } from '@/functions/sanitise';
+import { sanitise } from '~/functions/sanitise';
-import { usePath } from '@/remix_providers/hooks/usePath';
+import { usePath } from '~/providers/hooks/usePath';
-import { getParentPath } from '@/smarts';
+import { getParentPath } from '~/smarts';
 
 export const CommanderV1 = (props: any) => {
   const { thingtime, setThingtime, getThingtime, thingtimeRef, paths } = useThingtime();

next/src/components/Login/Login.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Flex, Button, FormControl, Input, Spinner, Link } from '@chakra-ui/react';
 import { useFetcher } from '@remix-run/react';
 
-import { useLogin } from '@/api/v1/login/Login';
+import { useLogin } from '~/api/v1/login/Login';
 
 export const Login = (props: any) => {
   const [username, setUsername] = useState('');

next/src/components/Nav/Footer.tsx

@@ -12,6 +12,8 @@ export const Footer = (props: any) => {
   const investmentEmail = 'invest@thingtime.com';
   const contactEmail = 'connect@thingtime.com';
 
+  const [year, setYear] = React.useState<number>(new Date().getFullYear());
+
   return (
     <Center width="100%" paddingTop="900px" paddingBottom={[5, 12]} paddingX={4}>
       <Flex width={['500px', '500px']} maxWidth="100%">
@@ -30,7 +32,7 @@ export const Footer = (props: any) => {
               </Link>
             </Flex>
             <Flex flexDirection="column" fontSize="xs">
-              {/* copyright message */}© 2023 Thingtime
+              {/* copyright message */}© {year} Thingtime
             </Flex>
           </Flex>
         )}
@@ -42,13 +44,21 @@ export const Footer = (props: any) => {
               {/* <Icon name="money bag" size="10px" chakras={{ pl: 1 }}></Icon> */}
             </Flex>
             <Link href={`mailto:${contactEmail}`}>
-              <Flex flexDirection="row">
+              <Flex
+                transition={'all 0.2s ease-out'}
+                _hover={{
+                  color: 'pink'
+                }}
+                flexDirection="row"
+              >
                 <Text>{contactEmail}</Text>
               </Flex>
             </Link>
           </Flex>
           <Flex alignItems="center" flexDirection="row" fontSize="xs">
-            <Text>{/* copyright message */}© 2023 Thingtime</Text>
+            <Text>
+              {/* copyright message */}© {year} Thingtime
+            </Text>
           </Flex>
           <Flex flexDirection="row" marginRight="auto">
             <Icon name="rainbow" size="8px"></Icon>

next/src/components/Rainbow/Rainbow.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Box, Center } from '@chakra-ui/react';
 
-import { GradientPath } from '@/gp/GradientPath';
+import { GradientPath } from '~/gp/GradientPath';
-import { useProps } from '@/remix_providers/hooks/useProps';
+import { useProps } from '~/providers/hooks/useProps';
-import { useTrace } from '@/remix_providers/hooks/useTrace';
+import { useTrace } from '~/providers/hooks/useTrace';
-import { useUuid } from '@/remix_providers/hooks/useUuid';
+import { useUuid } from '~/providers/hooks/useUuid';
 
 export const Rainbow = (allProps: any): JSX.Element => {
   // return allProps.children

next/src/components/Safety/Safe.tsx

@@ -1,4 +1,4 @@
-import { safe } from '@/functions/safe';
+import { safe } from '~/functions/safe';
 
 export const Safe = (props: any) => {
   // do not render more than the limit of things to prevent infinite loops

next/src/components/Splash/Splash.tsx

@@ -1,6 +1,6 @@
 import { Flex } from '@chakra-ui/react';
 
-import { TextAnimation1 } from '@/components/textAnimation1';
+import { TextAnimation1 } from '~/components/textAnimation1';
 
 export const Splash = (props: any) => {
   return (

next/src/components/Thingtime/Thingtime.tsx

@@ -25,8 +25,8 @@ import { Safe } from '../Safety/Safe';
 import { SettingsMenu } from './SettingsMenu';
 import { useThingtime } from './useThingtime';
 
-import { useThings } from '@/remix_providers/hooks/useThings';
+import { useThings } from '~/providers/hooks/useThings';
-import { getThing } from '@/smarts';
+import { getThing } from '~/smarts';
 
 export const Thingtime = (props: any) => {
   // TODO: Add a circular reference seen prop check
@@ -166,7 +166,7 @@ export const Thingtime = (props: any) => {
   }, [props?.fullPath, props?.path, props?.thing]);
 
   const parentPath = React.useMemo(() => {
-    const parentPath = fullPath?.split('.')?.slice(0, -1)?.join('.');
+    const parentPath = fullPath?.split?.('.')?.slice?.(0, -1)?.join?.('.');
 
     if (!parentPath) {
       return 'thingtime';
@@ -180,7 +180,7 @@ export const Thingtime = (props: any) => {
   }, [parentPath, getThingtime]);
 
   React.useEffect(() => {
-    console.log('thingtime changed in path', props?.fullPath);
+    console.log('[tt] changed in path', props?.fullPath);
     createDependancies();
   }, [thingtime, props?.fullPath, childrenRef]);
 
@@ -380,14 +380,14 @@ export const Thingtime = (props: any) => {
       if (chakra) {
         const ChakraComponent = Chakras[chakra];
 
-        console.log('Thingtime is chakra', fullPath, chakra);
+        console.log('[tt] is chakra', fullPath, chakra);
 
         const rawChildren = thing?.rawChildren;
 
         try {
           if (ChakraComponent) {
-            console.log('Thingtime found ChakraComponent', fullPath, ChakraComponent);
+            console.log('[tt] found ChakraComponent', fullPath, ChakraComponent);
-            console.log('Thingtime found thing?.props', fullPath, thing?.props);
+            console.log('[tt] found thing?.props', fullPath, thing?.props);
 
             const ret = (
               <ChakraComponent {...(thing?.props || {})}>

next/src/components/Thingtime/ThingtimeURL.tsx

@@ -8,16 +8,21 @@ import { useRouter } from 'next/router';
 
 import { Thingtime } from './Thingtime';
 import { useThingtime } from './useThingtime';
+import { rootPaths } from '~/consts/config';
+import Link from 'next/link';
 
 export const ThingtimeURL = (props: any) => {
+  console.log('nik props', props);
+
   const { getThingtime } = useThingtime();
 
   const router = useRouter();
-  const location = router;
+  const { pathname } = router;
-  const { pathname } = location;
 
   const navigate = router.push;
 
+  const rawPath = props?.path || router?.query?.path;
+
   // const { pathname } = useLocation();
 
   // const matches = useMatches();
@@ -26,25 +31,27 @@ export const ThingtimeURL = (props: any) => {
   // }, [matches]);
 
   const path = React.useMemo(() => {
-    console.log('ThingtimeURL location', location);
+    const path = rawPath instanceof Array ? rawPath.join('.') : rawPath;
 
-    // const sanitisation = ["/things", "/edit", "/editor", "/code", "/coder"]
+    // if path starts with any value in rootPaths, remove it
+    const adjustedPath = rootPaths.reduce((acc: any, rootPath) => {
+      if (typeof path === 'string') {
+        if (path.startsWith(rootPath) && acc === null) {
+          return path.slice(rootPath.length);
+        }
+      }
+      return acc;
+    }, null);
 
-    // // strip the leading /path1/path2 path1 section from the path
+    // remove any leading syntax such as dots or forward slashes
-    // let pathPartOne = location?.pathname?.split("/")[2]
+    const sanitisedPath = adjustedPath?.replace(/^[./]+/, '');
 
-    // // remove all sanitsation strings from path
+    console.log('nik path', path);
-    // sanitisation.forEach((sanitisationString) => {
+    console.log('nik adjustedPath', adjustedPath);
-    //   pathPartOne = pathPartOne?.replace(sanitisationString, "")
+    console.log('nik sanitisedPath', sanitisedPath);
-    // })
 
-    // strip the leading /path1/path2 path1 section from the path
+    return sanitisedPath || 'thingtime';
-    const pathPartOne = location?.pathname?.split('/')[2];
+  }, [rawPath]);
-
-    const path = pathPartOne?.replace(/\//g, '.');
-
-    return path || 'thingtime';
-  }, [location]);
 
   const thing = React.useMemo(() => {
     // remove /things/ from path
@@ -128,3 +135,13 @@ export const ThingtimeURL = (props: any) => {
     </Flex>
   );
 };
+
+export async function getServerSideProps(context: any) {
+  console.log('nik context?.params?.path', context?.params?.path);
+
+  return {
+    props: {
+      path: context?.params?.path // Access dynamic route parameters
+    }
+  };
+}

next/src/components/Thingtime/useThingtime.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 
-import { ThingtimeContext } from '@/remix_providers/ThingtimeProvider';
+import { ThingtimeContext } from '~/providers/ThingtimeProvider';
 
 const getGlobal = () => {
   try {

next/src/consts/config.tsx

@@ -0,0 +1 @@
+export const rootPaths = ['things', 'edit', 'editor', 'code', 'coder'];

next/src/layouts/Default.tsx

@@ -1,10 +1,10 @@
 import { Box, Flex } from '@chakra-ui/react';
 
-import { Providers } from '@/providers/providers';
+import { Providers } from '~/providers/providers';
 
-import { Footer } from '@/components/Nav/Footer';
+import { Footer } from '~/components/Nav/Footer';
-import { Nav } from '@/components/Nav/Nav';
+import { Nav } from '~/components/Nav/Nav';
-import { ProfileDrawer } from '@/components/Nav/ProfileDrawer';
+import { ProfileDrawer } from '~/components/Nav/ProfileDrawer';
 
 export const DefaultLayout = ({ children }: { children: React.ReactNode }) => {
   return (

next/src/pages/[...path].tsx

@@ -0,0 +1,14 @@
+import { ThingtimeURL } from '~/components/Thingtime/ThingtimeURL';
+export default function Index(props: any) {
+  console.log('nik 3 props', props);
+
+  return <ThingtimeURL path={props?.path}></ThingtimeURL>;
+}
+
+export async function getServerSideProps(context: any) {
+  return {
+    props: {
+      path: context?.params?.path // Access dynamic route parameters
+    }
+  };
+}

next/src/pages/_app.tsx

@@ -1,6 +1,6 @@
-import { DefaultLayout } from '@/layouts/Default';
+import { DefaultLayout } from '~/layouts/Default';
 import type { AppProps } from 'next/app';
-import { useIcons } from '@/remix_providers/hooks/useIcons';
+import { useIcons } from '~/providers/hooks/useIcons';
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   useIcons();

next/src/pages/_document.tsx

@@ -3,7 +3,7 @@ import { Analytics } from '@vercel/analytics/react';
 
 import { Html, Head, Main, NextScript } from 'next/document';
 
-import { Globals } from '@/globals/GlobalStyles';
+import { Globals } from '~/globals/GlobalStyles';
 
 export default function Document({ children, title = 'Thingtime' }: { children: React.ReactNode; title?: string }) {
   return (

next/src/pages/index.tsx

@@ -1,4 +1,31 @@
-import { ThingtimeURL } from '@/components/Thingtime/ThingtimeURL';
+import { Box, Flex } from '@chakra-ui/react';
+
+import { ProfileDrawer } from '~/components/Nav/ProfileDrawer';
+import { Splash } from '~/components/Splash/Splash';
+import { Thingtime } from '~/components/Thingtime/Thingtime';
+import { ThingtimeDemo } from '~/components/Thingtime/ThingtimeDemo';
+import { useThingtime } from '~/components/Thingtime/useThingtime';
+import { GradientPath } from '~/gp/GradientPath';
+
 export default function Index() {
-  return <ThingtimeURL></ThingtimeURL>;
+  const { thingtime } = useThingtime();
+
+  return (
+    <Flex alignItems="center" justifyContent="center" flexDirection="column" maxWidth="100%">
+      {/* <Box paddingTop={200}></Box> */}
+      <Splash></Splash>
+      <Thingtime
+        chakras={{
+          marginBottom: 200
+        }}
+        width="600px"
+        path="Content"
+        valuePl={0}
+        thing={thingtime?.['Content']}
+      ></Thingtime>
+      <ThingtimeDemo></ThingtimeDemo>
+      <Thingtime thing={thingtime} chakras={{ marginY: 200 }} width="600px"></Thingtime>
+      <ProfileDrawer></ProfileDrawer>
+    </Flex>
+  );
 }

next/src/pages/login.tsx

@@ -1,6 +1,6 @@
 import { Flex } from '@chakra-ui/react';
 
-import { Login } from '@/components/Login/Login';
+import { Login } from '~/components/Login/Login';
 
 export default function login() {
   const template = (

next/src/pages/ode.tsx

@@ -1,11 +1,11 @@
 import { Box, Center, Flex } from '@chakra-ui/react';
 
-import { ProfileDrawer } from '@/components/Nav/ProfileDrawer';
+import { ProfileDrawer } from '~/components/Nav/ProfileDrawer';
-import { Splash } from '@/components/Splash/Splash';
+import { Splash } from '~/components/Splash/Splash';
-import { Thingtime } from '@/components/Thingtime/Thingtime';
+import { Thingtime } from '~/components/Thingtime/Thingtime';
-import { ThingtimeDemo } from '@/components/Thingtime/ThingtimeDemo';
+import { ThingtimeDemo } from '~/components/Thingtime/ThingtimeDemo';
-import { useThingtime } from '@/components/Thingtime/useThingtime';
+import { useThingtime } from '~/components/Thingtime/useThingtime';
-import { GradientPath } from '@/gp/GradientPath';
+import { GradientPath } from '~/gp/GradientPath';
 
 export default function Index() {
   const { thingtime } = useThingtime();

next/src/pages/rainbow/[text].tsx

@@ -1,25 +1,30 @@
 import React from 'react';
 import { Flex } from '@chakra-ui/react';
-import { useLocation } from '@remix-run/react';
+import { useRouter } from 'next/router';
 
-import { Splash } from '@/components/Splash/Splash';
+import { Splash } from '~/components/Splash/Splash';
-import { useThingtime } from '@/components/Thingtime/useThingtime';
+import { useThingtime } from '~/components/Thingtime/useThingtime';
 
-export default function Index() {
+export default function Index(props: any) {
-  const location = useLocation();
+  const text = props?.text;
+
+  const location = useRouter();
   const { pathname } = location;
 
+  console.log('nik location', location);
+
   const strippedPathname = React.useMemo(() => {
     // modify /rainbow/* to just *
 
-    const ret = pathname.split('/')[2];
+    const ret = text;
+    // const ret = pathname.split('/')[2];
 
     if (ret) {
       return decodeURI(ret);
     }
 
     return 'rainbow';
-  }, [pathname]);
+  }, [text]);
 
   const texts = React.useMemo(() => {
     const ret = [strippedPathname];
@@ -59,3 +64,11 @@ export default function Index() {
     </Flex>
   );
 }
+
+export async function getServerSideProps(context: any) {
+  return {
+    props: {
+      text: context?.params?.text // Access dynamic route parameters
+    }
+  };
+}

next/src/providers/chakra/ChakraWrapper.tsx

@@ -1,6 +1,6 @@
-import { ChakraProvider } from "@chakra-ui/react"
+import { ChakraProvider } from '@chakra-ui/react';
 
-import { theme } from "./chakra"
+import { theme } from './theme';
 export const ChakraWrapper = (props: any) => {
-  return <ChakraProvider theme={theme}>{props.children}</ChakraProvider>
+  return <ChakraProvider theme={theme}>{props.children}</ChakraProvider>;
-}
+};

next/src/providers/chakra/chakra.tsx

@@ -1,271 +0,0 @@
-import {
-  Button,
-  extendTheme,
-  Input,
-  NumberDecrementStepper,
-  NumberIncrementStepper,
-  NumberInput,
-  NumberInputField,
-  NumberInputStepper,
-  Select,
-  Switch,
-  Textarea
-} from "@chakra-ui/react"
-
-import hexgba from "hex-to-rgba"
-
-const space: any = {}
-
-const start = 0
-const end = 9999
-
-for (let i = start; i <= end; i++) {
-  space[i] = `${i * 0.25}rem`
-}
-
-const greys = {
-  light: "#F1F1F3",
-  lightt: "#E7E6E8",
-  medium: "#E0E0E0",
-  dark: "#BDBDBD"
-}
-
-const grey = "#F1F1F3"
-
-const Grey = {
-  gray: grey,
-  grey,
-  grays: greys,
-  greys
-}
-
-// for bad spellers
-Grey.gray = Grey.grey
-Grey.grays = Grey.greys
-
-export const colors: any = {
-  white: "#FFFFFF",
-  offwhite: "#F9F9F9",
-  black: "#000000",
-  subheading: "#4A4A4A",
-  ...Grey,
-  bright: {
-    red: "#C62828",
-    opaqueRed: "rgba(198, 40, 40, 0.5)",
-    orange: "#FF7043",
-    yellow: "#FFEE58",
-    green: "#66BB6A",
-    blue: "#42A5F5",
-    indigo: "#5C6BC0",
-    violet: "#AB47BC"
-  },
-  dark: {
-    red: "#8E0000",
-    orange: "#E65100",
-    yellow: "#FDD835",
-    green: "#33691E",
-    blue: "#1E88E5",
-    indigo: "#3949AB",
-    violet: "#6A1B9A"
-  },
-  // all colors of the rainbow
-  rainbow: {
-    red: "#FF0000",
-    orange: "#FF7F00",
-    yellow: "#FFFF00",
-    green: "#00FF00",
-    blue: "#0000FF",
-    indigo: "#4B0082",
-    violet: "#8F00FF"
-  }
-}
-
-// recursively add rgba(hex, 0.5) versions for all colours
-
-function addRgba(obj: any, parentKey: string, opacity = 0.5) {
-  for (const key in obj) {
-    // return early if key includes "-"" already
-
-    if (key.includes("-")) {
-      return
-    }
-
-    const value = obj[key]
-    if (typeof value === "object") {
-      addRgba(value, key)
-    } else {
-      obj[`${key}-${opacity}`] = hexgba(value, opacity)
-    }
-  }
-}
-
-// run for all opacities 0 - 1 with steps of 0.05
-
-// const opacities = Array.from({ length: 21 }, (_, i) => i / 20)
-
-// opacities.forEach((opacity) => {
-//   addRgba(colors, "", opacity)
-// })
-
-addRgba(colors, "", 0)
-addRgba(colors, "", 0.25)
-addRgba(colors, "", 0.5)
-addRgba(colors, "", 0.75)
-addRgba(colors, "", 1)
-
-export const theme = extendTheme({
-  colors,
-  space,
-  styles: {
-    global: {
-      // make all elements padding and margin animate
-      "*": {
-        transition: "padding 0.2s ease, margin 0.2s ease-out"
-      }
-      // // make all elements have a transparent focus border
-      // "input:focus": {
-      //   boxShadow: "none !important",
-      //   borderColor: "transparent !important"
-      // },
-      // // make all elements have a transparent focus border
-      // "textarea:focus": {
-      //   boxShadow: "none !important",
-      //   borderColor: "transparent !important"
-      // },
-      // // make all elements have a transparent focus border
-      // "select:focus": {
-      //   boxShadow: "none !important",
-      //   borderColor: "transparent !important"
-      // },
-      // // make all elements have a transparent focus border
-      // "button:focus": {
-      //   boxShadow: "none !important",
-      //   borderColor: "transparent !important"
-      // },
-      // // make all elements have a transparent focus border
-      // "div:focus": {
-      //   boxShadow: "none !important",
-      //   borderColor: "transparent !important"
-      // },
-      // // make all elements have a transparent focus border
-      // "a:focus": {
-      //   boxShadow: "none !important",
-      //   borderColor: "transparent !important"
-      // },
-      // // make all elements have a transparent focus border
-      // "span:focus": {
-      //   boxShadow: "none !important",
-      //   borderColor: "transparent !important"
-      // }
-    }
-  },
-  components: {
-    Input: {
-      defaultProps: {},
-      baseStyle: {
-        field: {}
-      }
-    },
-    Select: {
-      baseStyle: {
-        field: {},
-        icon: {
-          width: "14px"
-        }
-      }
-    },
-    Switch: {
-      baseStyle: {
-        track: {
-          background: "greys.medium",
-          _checked: {
-            background: "bright.blue"
-          }
-        }
-      }
-    },
-    NumberInput: {
-      baseStyle: {
-        field: {
-          width: "auto"
-        }
-      }
-    }
-  }
-})
-
-const formBg = {
-  bg: "offwhite"
-}
-
-const formBorder = {
-  borderColor: "black-0"
-}
-
-const formColours = {
-  ...formBg,
-  ...formBorder
-}
-
-const formInputProps = {
-  ...formColours,
-  py: 6
-}
-
-Input.defaultProps = {
-  ...formInputProps
-}
-
-Textarea.defaultProps = {
-  py: 3.5,
-  ...formColours
-}
-
-Switch.defaultProps = {
-  ...Switch.defaultProps,
-  as: "div"
-}
-
-Select.defaultProps = {
-  ...Select.defaultProps,
-  focusBorderColor: "transparent",
-  outline: "0px solid",
-  border: "none",
-  ps: "0px",
-  px: "0px",
-  sx: {
-    paddingInlineStart: "0px",
-    paddingInlineEnd: "24px"
-  }
-}
-
-NumberInput.defaultProps = {
-  ...NumberInput.defaultProps
-}
-
-NumberInputField.defaultProps = {
-  ...NumberInputField.defaultProps,
-  height: "100%",
-  pr: 3,
-  fontSize: "inherit"
-}
-
-NumberInputStepper.defaultProps = {
-  ...NumberInputStepper.defaultProps,
-  border: "none",
-  color: "grays.medium"
-}
-
-NumberIncrementStepper.defaultProps = {
-  ...NumberIncrementStepper.defaultProps,
-  border: "none"
-}
-NumberDecrementStepper.defaultProps = {
-  ...NumberDecrementStepper.defaultProps,
-  border: "none"
-}
-
-Button.defaultProps = {
-  ...Button.defaultProps,
-  bg: "offwhite"
-}

next/src/providers/providers.tsx

@@ -1,6 +1,6 @@
 // app/providers.tsx
 
-import { ThingtimeProvider } from '@/remix_providers/ThingtimeProvider';
+import { ThingtimeProvider } from '~/providers/ThingtimeProvider';
 import { ChakraWrapper } from './chakra/ChakraWrapper';
 import { Suspense } from 'react';
 

next/src/remix_providers/chakra/ChakraWrapper.tsx

@@ -1,6 +0,0 @@
-import { ChakraProvider } from '@chakra-ui/react';
-
-import { theme } from './theme';
-export const ChakraWrapper = (props: any) => {
-  return <ChakraProvider theme={theme}>{props.children}</ChakraProvider>;
-};

next/src/remix_routes/$.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ThingtimeURL } from '@/components/Thingtime/ThingtimeURL';
+import { ThingtimeURL } from '~/components/Thingtime/ThingtimeURL';
 
 export default function Index() {
   return <ThingtimeURL></ThingtimeURL>;

next/src/remix_routes/_index.tsx

@@ -1,11 +1,11 @@
 import { Box, Flex } from '@chakra-ui/react';
 
-import { ProfileDrawer } from '@/components/Nav/ProfileDrawer';
+import { ProfileDrawer } from '~/components/Nav/ProfileDrawer';
-import { Splash } from '@/components/Splash/Splash';
+import { Splash } from '~/components/Splash/Splash';
-import { Thingtime } from '@/components/Thingtime/Thingtime';
+import { Thingtime } from '~/components/Thingtime/Thingtime';
-import { ThingtimeDemo } from '@/components/Thingtime/ThingtimeDemo';
+import { ThingtimeDemo } from '~/components/Thingtime/ThingtimeDemo';
-import { useThingtime } from '@/components/Thingtime/useThingtime';
+import { useThingtime } from '~/components/Thingtime/useThingtime';
-import { GradientPath } from '@/gp/GradientPath';
+import { GradientPath } from '~/gp/GradientPath';
 
 export default function Index() {
   const { thingtime } = useThingtime();

next/tsconfig.json

@@ -18,7 +18,7 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "~/*": ["./src/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],

package.json

@@ -4,6 +4,7 @@
   "description": "Thing Time",
   "main": "none",
   "scripts": {
+    "app": "npm run remix",
     "remix": "npm run dev --prefix remix",
     "next": "npm run dev --prefix next",
     "api": "npm run dev --prefix api",