client: use cookie for theme, redirect post view in server side props

client/components/document/formatting-icons/index.tsx

@@ -20,7 +20,7 @@ const FormattingIcons = ({ textareaRef, setText }: { textareaRef?: RefObject<HTM
     //     return { textBefore: '', textAfter: '' }
     // }, [textareaRef,])
 
-    const handleBoldClick = useCallback((e) => {
+    const handleBoldClick = useCallback(() => {
         if (textareaRef?.current && setText) {
             const selectionStart = textareaRef.current.selectionStart
             const selectionEnd = textareaRef.current.selectionEnd
@@ -37,7 +37,7 @@ const FormattingIcons = ({ textareaRef, setText }: { textareaRef?: RefObject<HTM
         }
     }, [setText, textareaRef])
 
-    const handleItalicClick = useCallback((e) => {
+    const handleItalicClick = useCallback(() => {
         if (textareaRef?.current && setText) {
             const selectionStart = textareaRef.current.selectionStart
             const selectionEnd = textareaRef.current.selectionEnd
@@ -52,7 +52,7 @@ const FormattingIcons = ({ textareaRef, setText }: { textareaRef?: RefObject<HTM
         }
     }, [setText, textareaRef])
 
-    const handleLinkClick = useCallback((e) => {
+    const handleLinkClick = useCallback(() => {
         if (textareaRef?.current && setText) {
             const selectionStart = textareaRef.current.selectionStart
             const selectionEnd = textareaRef.current.selectionEnd
@@ -73,7 +73,7 @@ const FormattingIcons = ({ textareaRef, setText }: { textareaRef?: RefObject<HTM
         }
     }, [setText, textareaRef])
 
-    const handleImageClick = useCallback((e) => {
+    const handleImageClick = useCallback(() => {
         if (textareaRef?.current && setText) {
             const selectionStart = textareaRef.current.selectionStart
             const selectionEnd = textareaRef.current.selectionEnd

client/components/header/controls.tsx

@@ -5,12 +5,12 @@ import { Select } from '@geist-ui/core'
 // import { useAllThemes, useTheme } from '@geist-ui/core'
 import styles from './header.module.css'
 import { ThemeProps } from '@lib/types'
+import Cookies from 'js-cookie'
 
 const Controls = ({ changeTheme, theme }: ThemeProps) => {
     const switchThemes = (type: string | string[]) => {
         changeTheme()
-        if (typeof window === 'undefined' || !window.localStorage) return
+        Cookies.set('drift-theme', Array.isArray(type) ? type[0] : type)
-        window.localStorage.setItem('drift-theme', Array.isArray(type) ? type[0] : type)
     }
 
 

client/components/new-post/drag-and-drop/index.tsx

@@ -1,10 +1,9 @@
-import { Button, Text, useTheme, useToasts } from '@geist-ui/core'
+import { Text, useTheme, useToasts } from '@geist-ui/core'
-import { memo, useCallback, useEffect } from 'react'
+import { memo } from 'react'
 import { useDropzone } from 'react-dropzone'
 import styles from './drag-and-drop.module.css'
-import { Document } from '../'
+import type { Document } from '@lib/types'
 import generateUUID from '@lib/generate-uuid'
-import { XCircle } from '@geist-ui/icons'
 const allowedFileTypes = [
     'application/json',
     'application/x-javascript',
@@ -99,7 +98,7 @@ function FileDropzone({ setDocs }: { setDocs: ((docs: Document[]) => void) }) {
     const { setToast } = useToasts()
     const onDrop = async (acceptedFiles: File[]) => {
         const newDocs = await Promise.all(acceptedFiles.map((file) => {
-            return new Promise<Document>((resolve, reject) => {
+            return new Promise<Document>((resolve) => {
                 const reader = new FileReader()
 
                 reader.onabort = () => setToast({ text: 'File reading was aborted', type: 'error' })

client/components/new-post/index.tsx

@@ -1,4 +1,4 @@
-import { Button, ButtonDropdown, Input, Modal, Note, useModal, useToasts } from '@geist-ui/core'
+import { Button, ButtonDropdown, useToasts } from '@geist-ui/core'
 import { useRouter } from 'next/router';
 import { useCallback, useState } from 'react'
 import generateUUID from '@lib/generate-uuid';

client/components/new-post/title/index.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, memo } from 'react'
+import { memo } from 'react'
 import { Text, Input } from '@geist-ui/core'
 import ShiftBy from '@components/shift-by'
 import styles from '../post.module.css'

client/components/visibility-badge/index.tsx

@@ -1,8 +1,8 @@
 import { Badge } from "@geist-ui/core"
-import { Visibility } from "@lib/types"
+import { PostVisibility } from "@lib/types"
 
 type Props = {
-    visibility: Visibility
+    visibility: PostVisibility
 }
 
 const VisibilityBadge = ({ visibility }: Props) => {

client/next.config.js

@@ -6,7 +6,6 @@ const nextConfig = {
   reactStrictMode: true,
   experimental: {
     outputStandalone: true,
-    optimizeCss: true,
   },
   async rewrites() {
     return [

client/package.json

@@ -16,11 +16,11 @@
     "@types/js-cookie": "^3.0.1",
     "client-zip": "^2.0.0",
     "comlink": "^4.3.1",
-    "critters": "^0.0.16",
     "cookie": "^0.4.2",
     "dotenv": "^16.0.0",
     "js-cookie": "^3.0.1",
     "next": "^12.1.1-canary.15",
+    "prism-react-renderer": "^1.3.1",
     "prismjs": "^1.27.0",
     "react": "17.0.2",
     "react-debounce-render": "^8.0.2",
@@ -32,8 +32,8 @@
     "react-syntax-highlighter-virtualized-renderer": "^1.1.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-katex": "^6.0.2",
+    "rehype-remark": "^9.1.2",
     "rehype-slug": "^5.0.1",
-    "rehype-stringify": "^9.0.3",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
     "swr": "^1.2.2"
@@ -41,9 +41,11 @@
   "devDependencies": {
     "@types/node": "17.0.21",
     "@types/react": "17.0.39",
+    "@types/react-dom": "^17.0.14",
     "@types/react-syntax-highlighter": "^13.5.2",
     "eslint": "8.10.0",
     "eslint-config-next": "12.1.0",
-    "typescript": "4.6.2"
+    "typescript": "4.6.2",
+    "typescript-plugin-css-modules": "^3.4.0"
   }
 }

client/pages/_app.tsx

@@ -8,12 +8,7 @@ import 'react-loading-skeleton/dist/skeleton.css'
 import { SkeletonTheme } from 'react-loading-skeleton';
 import Head from 'next/head';
 import { ThemeProps } from '@lib/types';
-
+import Cookies from 'js-cookie';
-export type PostProps = {
-  renderedPost: any | null, // Still don't have an official data type for posts
-  theme: "light" | "dark" | string,
-  changeTheme: () => void
-}
 
 type AppProps<P = any> = {
   pageProps: P;
@@ -22,11 +17,10 @@ type AppProps<P = any> = {
 export type DriftProps = ThemeProps
 
 function MyApp({ Component, pageProps }: AppProps<ThemeProps>) {
-  const [themeType, setThemeType] = useSharedState<string>('theme', 'light')
+  const [themeType, setThemeType] = useSharedState<string>('theme', Cookies.get('drift-theme') || 'light')
-  const theme = useTheme();
+
   useEffect(() => {
-    if (typeof window === 'undefined' || !window.localStorage) return
+    const storedTheme = Cookies.get('drift-theme')
-    const storedTheme = window.localStorage.getItem('drift-theme')
     if (storedTheme) setThemeType(storedTheme)
     // TODO: useReducer?
   }, [setThemeType, themeType])

client/pages/post/[id].tsx

@@ -1,45 +1,36 @@
 import { Button, Page, Text } from "@geist-ui/core";
-import Skeleton from 'react-loading-skeleton';
 
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
 import Document from '../../components/document'
 import Header from "../../components/header";
 import VisibilityBadge from "../../components/visibility-badge";
-import { PostProps } from "../_app";
 import PageSeo from "components/page-seo";
 import styles from './styles.module.css';
-import Cookies from "js-cookie";
 import cookie from "cookie";
 import { GetServerSideProps } from "next";
+import { PostVisibility, ThemeProps } from "@lib/types";
 
+type File = {
+    id: string
+    title: string
+    content: string
+}
 
-const Post = ({renderedPost, theme, changeTheme}: PostProps) => {
+type Files = File[]
-    const [post, setPost] = useState(renderedPost);
+
-    const [isLoading, setIsLoading] = useState(true)
+export type PostProps = ThemeProps & {
-    const [error, setError] = useState<string>()
+    post: {
+        id: string
+        title: string
+        description: string
+        visibility: PostVisibility
+        files: Files
+    }
+}
+
+const Post = ({ post, theme, changeTheme }: PostProps) => {
     const router = useRouter();
 
-    useEffect(() => {
-        async function fetchPost() {
-            setIsLoading(true);
-
-            if (renderedPost) {
-                setPost(renderedPost)
-                setIsLoading(false)
-                
-                return;
-            }
-
-            if (!Cookies.get('drift-token')) {
-                router.push('/signin');
-            } else {
-                setError('Something went wrong fetching the post');
-            }
-        }
-        fetchPost()
-    }, [router, router.query.id])
-
     const download = async () => {
         const clientZip = require("client-zip")
 
@@ -59,25 +50,17 @@ const Post = ({renderedPost, theme, changeTheme}: PostProps) => {
 
     return (
         <Page width={"100%"}>
-            {!isLoading && (
             <PageSeo
                 title={`${post.title} - Drift`}
                 description={post.description}
-                    isPrivate={post.visibility === 'private'}
+                isPrivate={post.visibility !== 'public'}
             />
-            )}
 
             <Page.Header>
                 <Header theme={theme} changeTheme={changeTheme} />
             </Page.Header>
             <Page.Content width={"var(--main-content-width)"} margin="auto">
                 {/* {!isLoading && <PostFileExplorer files={post.files} />} */}
-
-                {error && <Text type="error">{error}</Text>}
-                {!error && isLoading && <><Text h2><Skeleton width={400} /></Text>
-                    <Document skeleton={true} />
-                </>}
-                {!isLoading && post && <>
                 <div className={styles.header}>
                     <div className={styles.titleAndBadge}>
                         <Text h2>{post.title}</Text>
@@ -97,40 +80,58 @@ const Post = ({renderedPost, theme, changeTheme}: PostProps) => {
                         initialTab={'preview'}
                     />
                 ))}
-                </>}
             </Page.Content>
         </Page >
     )
 }
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
+    const headers = context.req.headers
+    const host = headers.host
+    const driftToken = cookie.parse(headers.cookie || '')[`drift-token`]
+    let driftTheme = cookie.parse(headers.cookie || '')[`drift-theme`]
+    if (driftTheme !== "light" && driftTheme !== "dark") {
+        driftTheme = "light"
+    }
 
-    const headers = context.req.headers;
-    const host = headers.host;
-    const driftToken = cookie.parse(headers.cookie || '')[`drift-token`];
-    
-    let post;
 
     if (context.query.id) {
-        post = await fetch('http://' + host + `/server-api/posts/${context.query.id}`, {
+        const post = await fetch('http://' + host + `/server-api/posts/${context.query.id}`, {
             method: "GET",
             headers: {
                 "Content-Type": "application/json",
                 "Authorization": `Bearer ${driftToken}`
             }
-        });
+        })
 
+        if (!post.ok || post.status !== 200) {
+            return {
+                redirect: {
+                    destination: '/',
+                    permanent: false,
+                },
+            }
+        }
         try {
-            post = await post.json();
+            const json = await post.json();
+            const maxAge = 60 * 60 * 24 * 365;
+            context.res.setHeader(
+                'Cache-Control',
+                `${json.visibility === "public" ? "public" : "private"}, s-maxage=${maxAge}, max-age=${maxAge}`
+            )
+            return {
+                props: {
+                    post: json
+                }
+            }
         } catch (e) {
-            console.log(e);
+            console.log(e)
-            post = null;
         }
     }
 
     return {
         props: {
-            renderedPost: post
+            post: null
         }
     }
 }

client/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "plugins": [{ "name": "typescript-plugin-css-modules" }],
     "target": "es2020",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,