= async (event) => {
19 | const target = event.target;
20 | const result = await uploadImage(target?.files?.[0])
21 |
22 | if(result?.filePath){
23 | changePageCover(result.filePath)
24 | }
25 | };
26 |
27 | return (
28 |
29 | {filePath ? (
30 |
31 | ) : (
32 |
33 | )}
34 |
37 |
43 |
32 |
33 |
34 |
35 | {nodes.map((node, index) => (
36 |
43 | ))}
44 |
45 |
46 |
47 | {
49 | addNode({ type: "text", value: "", id: nanoid() }, nodes.length);
50 | }}
51 | showHint={!nodes.length}
52 | />
53 |
54 |
55 | );
56 | };
57 |
--------------------------------------------------------------------------------
/src/Page/Spacer.module.css:
--------------------------------------------------------------------------------
1 | .spacer {
2 | height: 200px;
3 | width: 100%;
4 | padding: 0 46px;
5 | color: grey;
6 | }
7 |
--------------------------------------------------------------------------------
/src/Page/Spacer.tsx:
--------------------------------------------------------------------------------
1 | import styles from "./Spacer.module.css";
2 |
3 | type SpacerProps = {
4 | handleClick(): void;
5 | showHint: boolean;
6 | };
7 |
8 | export const Spacer = ({ handleClick, showHint }: SpacerProps) => {
9 | return (
10 |
11 | {showHint && "Click to create the first paragraph."}
12 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/src/Page/Title.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | padding-left: 40px;
3 | padding-right: 40px;
4 | max-width: 900px;
5 | }
6 |
7 | .title {
8 | padding: 6px;
9 | }
10 |
--------------------------------------------------------------------------------
/src/Page/Title.tsx:
--------------------------------------------------------------------------------
1 | import { NodeData } from "../utils/types";
2 | import { useRef, useEffect } from "react";
3 | import styles from "./Title.module.css";
4 | import { nanoid } from "nanoid";
5 |
6 | type TitleProps = {
7 | title: string;
8 | changePageTitle(title: string): void;
9 | addNode(node: NodeData, index: number): void;
10 | };
11 |
12 | export const Title = ({ title, changePageTitle, addNode }: TitleProps) => {
13 | const headerRef = useRef(null);
14 |
15 | useEffect(() => {
16 | const isFocused = document.activeElement == headerRef.current;
17 | if (!isFocused && headerRef.current) {
18 | headerRef.current.textContent = title;
19 | }
20 | }, [title]);
21 |
22 | return (
23 |
24 |
changePageTitle(e.currentTarget.textContent || "")}
30 | onKeyDown={(event) => {
31 | if (event.key === "Enter") {
32 | event.preventDefault();
33 | addNode({ type: "text", id: nanoid(), value: "" }, 0);
34 | }
35 | }}
36 | />
37 |
38 | );
39 | };
40 |
--------------------------------------------------------------------------------
/src/Page/useFocusedNodeIndex.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState, Dispatch, SetStateAction } from "react";
2 | import { NodeData } from "../utils/types";
3 |
4 | type UseFocusedNodeIndexProps = {
5 | nodes: NodeData[];
6 | };
7 |
8 | export const useFocusedNodeIndex = ({
9 | nodes,
10 | }: UseFocusedNodeIndexProps): [number, Dispatch>] => {
11 | const [focusedNodeIndex, setFocusedNodeIndex] = useState(0);
12 |
13 | useEffect(() => {
14 | const onKeyDown = (event: KeyboardEvent) => {
15 | if (event.key === "ArrowUp") {
16 | setFocusedNodeIndex((index) => Math.max(index - 1, 0));
17 | }
18 | if (event.key === "ArrowDown") {
19 | setFocusedNodeIndex((index) => Math.min(index + 1, nodes.length - 1));
20 | }
21 | };
22 | document.addEventListener("keydown", onKeyDown);
23 |
24 | return () => document.removeEventListener("keydown", onKeyDown);
25 | }, [nodes]);
26 |
27 | return [focusedNodeIndex, setFocusedNodeIndex];
28 | };
29 |
--------------------------------------------------------------------------------
/src/auth/Auth.tsx:
--------------------------------------------------------------------------------
1 | import { useState, FormEvent} from "react"
2 | import { useAuthSession } from "./AuthSessionContext"
3 | import { Navigate } from "react-router-dom"
4 | import styles from "../utils.module.css"
5 | import { supabase } from "../supabaseClient"
6 |
7 | export const Auth = () => {
8 | const [loading, setLoading] = useState(false)
9 | const [email, setEmail] = useState("")
10 | const { session } = useAuthSession()
11 |
12 | const handleLogin = async (e: FormEvent) => {
13 | e.preventDefault()
14 |
15 | try {
16 | setLoading(true)
17 | const { error } = await supabase.auth.signInWithOtp({ email })
18 | if(error) throw error
19 | alert("CHeck your email for the login link!")
20 | } catch (error){
21 | alert(error)
22 | } finally {
23 | setLoading(false)
24 | }
25 | }
26 |
27 | if(session){
28 | return
29 | }
30 |
31 | return (
32 |
33 |
34 |
ZTM Notes App
35 |
Sign in via magic link with your email below
36 | {loading ? ("Sending magic link...") : (
37 |
50 | )}
51 |
52 |
31 |
32 |
33 | }
34 |
35 | return 
36 | }
37 |
38 |
--------------------------------------------------------------------------------
/src/components/Loader.module.css:
--------------------------------------------------------------------------------
1 | .loader {
2 | display: inline-block;
3 | position: relative;
4 | width: 80px;
5 | height: 80px;
6 | }
7 | .loader div {
8 | position: absolute;
9 | top: 33px;
10 | width: 13px;
11 | height: 13px;
12 | border-radius: 50%;
13 | background: #ccc;
14 | animation-timing-function: cubic-bezier(0, 1, 1, 0);
15 | }
16 | .loader div:nth-child(1) {
17 | left: 8px;
18 | animation: loader1 0.6s infinite;
19 | }
20 | .loader div:nth-child(2) {
21 | left: 8px;
22 | animation: loader2 0.6s infinite;
23 | }
24 | .loader div:nth-child(3) {
25 | left: 32px;
26 | animation: loader2 0.6s infinite;
27 | }
28 | .loader div:nth-child(4) {
29 | left: 56px;
30 | animation: loader3 0.6s infinite;
31 | }
32 | @keyframes loader1 {
33 | 0% {
34 | transform: scale(0);
35 | }
36 | 100% {
37 | transform: scale(1);
38 | }
39 | }
40 | @keyframes loader3 {
41 | 0% {
42 | transform: scale(1);
43 | }
44 | 100% {
45 | transform: scale(0);
46 | }
47 | }
48 | @keyframes loader2 {
49 | 0% {
50 | transform: translate(0, 0);
51 | }
52 | 100% {
53 | transform: translate(24px, 0);
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/Loader.tsx:
--------------------------------------------------------------------------------
1 | import styles from "./Loader.module.css";
2 |
3 | // https://loading.io/css/
4 |
5 | export const Loader = () => {
6 | return (
7 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12 | monospace;
13 | }
14 |
15 | html,
16 | body,
17 | #root {
18 | height: 100%;
19 | position: relative;
20 | }
21 |
22 | [contenteditable="true"]:focus {
23 | outline: none;
24 | }
25 |
26 | [contenteditable="true"]:empty:focus:before {
27 | content: attr(data-placeholder);
28 | color: grey;
29 | }
30 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import App from "./App.tsx";
4 | import "./index.css";
5 | import { BrowserRouter } from "react-router-dom";
6 | import { AuthSessionProvider } from "./auth/AuthSessionContext"
7 |
8 | ReactDOM.createRoot(document.getElementById("root")!).render(
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | );
17 |
--------------------------------------------------------------------------------
/src/state/AppStateContext.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, useContext } from "react";
2 | import { usePageState } from "./usePageState";
3 | import { Page } from "../utils/types";
4 | import { withInitialState } from "./withInitialState"
5 |
6 | type AppStateContextType = ReturnType;
7 |
8 | const AppStateContext = createContext(
9 | {} as AppStateContextType
10 | );
11 |
12 | type AppStateProviderProps = {
13 | children: React.ReactNode;
14 | initialState: Page;
15 | };
16 |
17 | export const AppStateProvider = withInitialState(({
18 | children,
19 | initialState,
20 | }: AppStateProviderProps) => {
21 | const pageStateHandlers = usePageState(initialState);
22 |
23 | return (
24 |
25 | {children}
26 |
27 | );
28 | });
29 |
30 | export const useAppState = () => useContext(AppStateContext);
31 |
--------------------------------------------------------------------------------
/src/state/startPageScaffold.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Welcome to ZTM Notes",
3 | "nodes": [
4 | {
5 | "type": "text",
6 | "value": "This app is written in React + TypeScript and works similarly to Notion. For example, try entering the text below this paragraph 👇",
7 | "id": "dgkm6uWT58KKIvBuo4KCE"
8 | },
9 | { "type": "text", "value": "", "id": "cZjPbQHUQmv5h-v1rpDoD" },
10 | {
11 | "type": "text",
12 | "value": "You can also add lists, to do this bring up the command palette by starting a new line with `/`",
13 | "id": "eK__MFBh2DieZzKQDf5rl"
14 | },
15 | { "type": "text", "value": "", "id": "IYd7XsCkoiqysGrOLvM0B" },
16 | {
17 | "type": "text",
18 | "value": "Here are a few list items just to show how it looks like:",
19 | "id": "tGEVZQlUB_zGi66GU2TIz"
20 | },
21 | { "type": "list", "value": "First item", "id": "zJ42BYE7QCx_1XSsZETuc" },
22 | { "type": "list", "value": "Second item", "id": "ia_pE2qrqR8un_BYqqM9_" },
23 | { "type": "list", "value": "Third item", "id": "gD6IRCl09HQGpaDorOiF6" },
24 | { "type": "text", "value": "", "id": "pH0TGrzTJ09_8w8XXfKO8" },
25 | {
26 | "type": "heading2",
27 | "value": "You can add headings as well",
28 | "id": "qbsmQ_NkTC7jRO4csWL8h"
29 | },
30 | {
31 | "type": "text",
32 | "value": "If you tried adding list items, you've noticed that there are also other types of blocks.",
33 | "id": "e1pnucOk3k_G3_Gjw7SrB"
34 | },
35 | { "type": "text", "value": "", "id": "Zctuc8G9XyWEPhUGIYBVW" },
36 | {
37 | "type": "text",
38 | "value": "Currently the app supports:",
39 | "id": "v3s7NU1a-X_uWSAELT2nK"
40 | },
41 | { "type": "list", "value": "regular text", "id": "ADtjGSZ4p53f9VpQK72f1" },
42 | {
43 | "type": "list",
44 | "value": "unordered lists",
45 | "id": "Zrwh60KFLzqeBmmhAAKDN"
46 | },
47 | {
48 | "type": "list",
49 | "value": "heading levels 1-3",
50 | "id": "SLNB1qZ3TuGiNerxfAL7N"
51 | },
52 | { "type": "list", "value": "images", "id": "rT-xkKSS3l23Olui4XUF8" },
53 | {
54 | "type": "list",
55 | "value": "links to other pages",
56 | "id": "oHdB3ghNMer9DTlCp0dhA"
57 | },
58 | { "type": "text", "value": "", "id": "qD6vnHeExO5gTg5ZmPUt3" },
59 | {
60 | "type": "text",
61 | "value": "Try adding a new page.",
62 | "id": "765A3xPw56d8j7NcYpi3D"
63 | }
64 | ]
65 | }
66 |
--------------------------------------------------------------------------------
/src/state/usePageState.ts:
--------------------------------------------------------------------------------
1 | import { Page, NodeData, NodeType } from "../utils/types";
2 | import { arrayMove } from "@dnd-kit/sortable"
3 | import { useSyncedState } from "./useSyncedState"
4 | import { updatePage } from "../utils/updatePage"
5 | import { createPage } from "../utils/createPage"
6 |
7 | export const usePageState = (initialState: Page) => {
8 | const [page, setPage] = useSyncedState(initialState, updatePage);
9 |
10 | const addNode = (node: NodeData, index: number) => {
11 | setPage((draft) => {
12 | draft.nodes.splice(index, 0, node);
13 | });
14 | };
15 |
16 | const removeNodeByIndex = (nodeIndex: number) => {
17 | setPage((draft) => {
18 | draft.nodes.splice(nodeIndex, 1);
19 | });
20 | };
21 |
22 | const changeNodeValue = (nodeIndex: number, value: string) => {
23 | setPage((draft) => {
24 | draft.nodes[nodeIndex].value = value;
25 | });
26 | };
27 |
28 | const changeNodeType = async (nodeIndex: number, type: NodeType) => {
29 | if (type === "page") {
30 | const newPage = await createPage();
31 | if (newPage) {
32 | setPage((draft) => {
33 | draft.nodes[nodeIndex].type = type;
34 | draft.nodes[nodeIndex].value = newPage.slug;
35 | });
36 | }
37 | } else {
38 | setPage((draft) => {
39 | draft.nodes[nodeIndex].type = type;
40 | draft.nodes[nodeIndex].value = "";
41 | });
42 | }
43 | };
44 |
45 | const setNodes = (nodes: NodeData[]) => {
46 | setPage((draft) => {
47 | draft.nodes = nodes;
48 | });
49 | };
50 |
51 | const setTitle = (title: string) => {
52 | setPage((draft) => {
53 | draft.title = title;
54 | });
55 | };
56 |
57 | const setCoverImage = (coverImage: string) => {
58 | setPage((draft) => {
59 | draft.cover = coverImage;
60 | });
61 | };
62 |
63 | const reorderNodes = (id1: string, id2: string) => {
64 | setPage((draft) => {
65 | const index1 = draft.nodes.findIndex(node => node.id === id1)
66 | const index2 = draft.nodes.findIndex(node => node.id === id2)
67 | draft.nodes = arrayMove(draft.nodes, index1, index2)
68 | })
69 | }
70 |
71 | return {
72 | nodes: page.nodes,
73 | title: page.title,
74 | cover: page.cover,
75 | changeNodeType,
76 | changeNodeValue,
77 | addNode,
78 | removeNodeByIndex,
79 | setTitle,
80 | setCoverImage,
81 | setNodes,
82 | reorderNodes
83 | };
84 | };
85 |
--------------------------------------------------------------------------------
/src/state/useSyncedState.ts:
--------------------------------------------------------------------------------
1 | import { ImmerHook, useImmer } from "use-immer"
2 | import { useRef, useEffect } from "react"
3 |
4 | export const useSyncedState = (
5 | initialState: TState,
6 | syncCallback: (state: TState) => void
7 | ): ImmerHook => {
8 | const [state, setState] = useImmer(initialState)
9 | const didMountRef = useRef(false)
10 |
11 | useEffect(() => {
12 | if(didMountRef.current){
13 | syncCallback(state)
14 | }
15 | didMountRef.current = true;
16 | }, [state, setState])
17 |
18 | return [state, setState]
19 | }
20 |
--------------------------------------------------------------------------------
/src/state/withInitialState.tsx:
--------------------------------------------------------------------------------
1 | import { Page } from "../utils/types";
2 | import { useMatch } from "react-router-dom";
3 | import { useState, useEffect, useRef } from "react";
4 | import { supabase } from "../supabaseClient";
5 | import startPageScaffold from "./startPageScaffold.json";
6 | import styles from "../utils.module.css";
7 | import { Loader } from "../components/Loader";
8 |
9 | type InjectedProps = {
10 | initialState: Page;
11 | };
12 |
13 | type PropsWithoutInjected = Omit;
14 |
15 | export function withInitialState(
16 | WrappedComponent: React.ComponentType<
17 | PropsWithoutInjected & InjectedProps
18 | >
19 | ) {
20 | return (props: PropsWithoutInjected) => {
21 | const match = useMatch("/:slug");
22 | const pageSlug = match ? match.params.slug : "start";
23 |
24 | const [initialState, setInitialState] = useState();
25 | const [isLoading, setIsLoading] = useState(true);
26 | const [error, setError] = useState();
27 | const inProgress = useRef(false)
28 |
29 | useEffect(() => {
30 | if (inProgress.current) {
31 | return
32 | }
33 | setIsLoading(true);
34 | inProgress.current = true
35 | const fetchInitialState = async () => {
36 | try {
37 | const { data: userData } = await supabase.auth.getUser();
38 | const user = userData.user;
39 | if (!user) {
40 | throw new Error("User is not logged in");
41 | }
42 | const { data } = await supabase
43 | .from("pages")
44 | .select("title, id, cover, nodes, slug")
45 | .match({ slug: pageSlug, created_by: user.id })
46 |
47 | if (data?.[0]) {
48 | setInitialState(data?.[0]);
49 | inProgress.current = false;
50 | setIsLoading(false);
51 | return
52 | }
53 |
54 | if (pageSlug === "start") {
55 | await supabase
56 | .from("pages")
57 | .insert({
58 | ...startPageScaffold,
59 | slug: "start",
60 | created_by: user.id,
61 | })
62 |
63 | const { data } = await supabase
64 | .from("pages")
65 | .select("title, id, cover, nodes, slug")
66 | .match({ slug: "start", created_by: user.id })
67 |
68 | setInitialState(data?.[0]);
69 | } else {
70 | setInitialState(data?.[0]);
71 | }
72 | } catch (e) {
73 | if (e instanceof Error) {
74 | setError(e);
75 | }
76 | }
77 | inProgress.current = false;
78 | setIsLoading(false);
79 | };
80 | fetchInitialState();
81 | }, [pageSlug]);
82 |
83 | if (isLoading) {
84 | return (
85 |
86 |
87 |
88 | );
89 | }
90 |
91 | if (error) {
92 | return {error.message}
;
93 | }
94 |
95 | if (!initialState) {
96 | return Page not found
;
97 | }
98 |
99 | return ;
100 | };
101 | }
102 |
--------------------------------------------------------------------------------
/src/supabaseClient.ts:
--------------------------------------------------------------------------------
1 | import { createClient } from "@supabase/supabase-js"
2 |
3 | const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
4 | const supabaseKey = import.meta.env.VITE_SUPABASE_API_KEY;
5 |
6 | if(!supabaseUrl || !supabaseKey){
7 | throw new Error("Missing supabase url or key")
8 | }
9 |
10 | export const supabase = createClient(supabaseUrl, supabaseKey)
11 |
--------------------------------------------------------------------------------
/src/utils.module.css:
--------------------------------------------------------------------------------
1 | .centeredFlex {
2 | width: 100%;
3 | height: 100%;
4 | display: flex;
5 | justify-content: center;
6 | align-items: center;
7 | }
8 |
--------------------------------------------------------------------------------
/src/utils/createPage.ts:
--------------------------------------------------------------------------------
1 | import { nanoid } from "nanoid";
2 | import { supabase } from "../supabaseClient";
3 |
4 | export const createPage = async () => {
5 | const { data: userData } = await supabase.auth.getUser();
6 | const user = userData.user;
7 | if (!user) {
8 | throw new Error("You must be logged in to create a page.");
9 | }
10 | const slug = nanoid();
11 |
12 | const page = {
13 | id: undefined,
14 | title: "Untitled",
15 | slug,
16 | nodes: [],
17 | created_by: user.id,
18 | };
19 |
20 | await supabase.from("pages").insert(page);
21 | const { data: pageData } = await supabase
22 | .from("pages")
23 | .select("id")
24 | .match({ slug, created_by: user.id })
25 | .single();
26 |
27 | page.id = pageData?.id;
28 |
29 | return page;
30 | };
31 |
32 |
--------------------------------------------------------------------------------
/src/utils/debounce.ts:
--------------------------------------------------------------------------------
1 | type ArgumentTypes = F extends (...args: infer A) => any
2 | ? A
3 | : never;
4 |
5 | export function debounce(
6 | callback: TCallback,
7 | delay = 300
8 | ) {
9 | let timeoutId: ReturnType;
10 | return function (...args: ArgumentTypes) {
11 | clearTimeout(timeoutId);
12 | timeoutId = setTimeout(() => callback(...args), delay);
13 | };
14 | }
15 |
--------------------------------------------------------------------------------
/src/utils/types.ts:
--------------------------------------------------------------------------------
1 | export type NodeType = "text" | "image" | "list" | "page" | "heading1" | "heading2" | "heading3"
2 |
3 | export type NodeData = {
4 | id: string;
5 | type: NodeType;
6 | value: string;
7 | }
8 |
9 | export type Page = {
10 | id: string;
11 | slug: string;
12 | title: string;
13 | nodes: NodeData[];
14 | cover: string;
15 | }
16 |
--------------------------------------------------------------------------------
/src/utils/updatePage.ts:
--------------------------------------------------------------------------------
1 | import { Page } from "../utils/types";
2 | import { supabase } from "../supabaseClient";
3 | import { debounce } from "./debounce";
4 |
5 | export const updatePage = debounce(
6 | async (page: Partial & Pick) => {
7 | await supabase.from("pages").update(page).eq("id", page.id);
8 | },
9 | 500
10 | );
11 |
--------------------------------------------------------------------------------
/src/utils/uploadImage.ts:
--------------------------------------------------------------------------------
1 | import { supabase } from "../supabaseClient"
2 |
3 | export const uploadImage = async (file?: File) => {
4 | try {
5 | if(!file){
6 | throw new Error("You must select an image to upload");
7 | }
8 |
9 | const fileExt = file.name.split(".").pop()
10 | const fileName = `${Math.random()}.${fileExt}`
11 | const filePath = fileName;
12 |
13 | await supabase.storage.from("images").upload(filePath, file);
14 |
15 | return {filePath, fileName}
16 | } catch (e) {
17 | alert(e)
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/supabase/.gitignore:
--------------------------------------------------------------------------------
1 | # Supabase
2 | .branches
3 | .temp
4 |
--------------------------------------------------------------------------------
/supabase/config.toml:
--------------------------------------------------------------------------------
1 | # A string used to distinguish different Supabase projects on the same host. Defaults to the
2 | # working directory name when running `supabase init`.
3 | project_id = "ztm-notion-clone"
4 |
5 | [api]
6 | # Port to use for the API URL.
7 | port = 54321
8 | # Schemas to expose in your API. Tables, views and stored procedures in this schema will get API
9 | # endpoints. public and storage are always included.
10 | schemas = ["public", "storage", "graphql_public"]
11 | # Extra schemas to add to the search_path of every request. public is always included.
12 | extra_search_path = ["public", "extensions"]
13 | # The maximum number of rows returns from a view, table, or stored procedure. Limits payload size
14 | # for accidental or malicious requests.
15 | max_rows = 1000
16 |
17 | [db]
18 | # Port to use for the local database URL.
19 | port = 54322
20 | # Port used by db diff command to initialise the shadow database.
21 | shadow_port = 54320
22 | # The database major version to use. This has to be the same as your remote database's. Run `SHOW
23 | # server_version;` on the remote database to check.
24 | major_version = 15
25 |
26 | [studio]
27 | enabled = true
28 | # Port to use for Supabase Studio.
29 | port = 54323
30 | # External URL of the API server that frontend connects to.
31 | api_url = "http://localhost"
32 |
33 | # Email testing server. Emails sent with the local dev setup are not actually sent - rather, they
34 | # are monitored, and you can view the emails that would have been sent from the web interface.
35 | [inbucket]
36 | enabled = true
37 | # Port to use for the email testing server web interface.
38 | port = 54324
39 | # Uncomment to expose additional ports for testing user applications that send emails.
40 | # smtp_port = 54325
41 | # pop3_port = 54326
42 |
43 | [storage]
44 | # The maximum file size allowed (e.g. "5MB", "500KB").
45 | file_size_limit = "50MiB"
46 |
47 | [auth]
48 | # The base URL of your website. Used as an allow-list for redirects and for constructing URLs used
49 | # in emails.
50 | site_url = "http://localhost:3000"
51 | # A list of *exact* URLs that auth providers are permitted to redirect to post authentication.
52 | additional_redirect_urls = ["https://localhost:3000"]
53 | # How long tokens are valid for, in seconds. Defaults to 3600 (1 hour), maximum 604,800 (1 week).
54 | jwt_expiry = 3600
55 | # If disabled, the refresh token will never expire.
56 | enable_refresh_token_rotation = true
57 | # Allows refresh tokens to be reused after expiry, up to the specified interval in seconds.
58 | # Requires enable_refresh_token_rotation = true.
59 | refresh_token_reuse_interval = 10
60 | # Allow/disallow new user signups to your project.
61 | enable_signup = true
62 |
63 | [auth.email]
64 | # Allow/disallow new user signups via email to your project.
65 | enable_signup = true
66 | # If enabled, a user will be required to confirm any email change on both the old, and new email
67 | # addresses. If disabled, only the new email is required to confirm.
68 | double_confirm_changes = true
69 | # If enabled, users need to confirm their email address before signing in.
70 | enable_confirmations = false
71 |
72 | [auth.sms]
73 | # Allow/disallow new user signups via SMS to your project.
74 | enable_signup = true
75 | # If enabled, users need to confirm their phone number before signing in.
76 | enable_confirmations = false
77 |
78 | # Configure one of the supported SMS providers: `twilio`, `messagebird`, `textlocal`, `vonage`.
79 | [auth.sms.twilio]
80 | enabled = false
81 | account_sid = ""
82 | message_service_sid = ""
83 | # DO NOT commit your Twilio auth token to git. Use environment variable substitution instead:
84 | auth_token = "env(SUPABASE_AUTH_SMS_TWILIO_AUTH_TOKEN)"
85 |
86 | # Use an external OAuth provider. The full list of providers are: `apple`, `azure`, `bitbucket`,
87 | # `discord`, `facebook`, `github`, `gitlab`, `google`, `keycloak`, `linkedin`, `notion`, `twitch`,
88 | # `twitter`, `slack`, `spotify`, `workos`, `zoom`.
89 | [auth.external.apple]
90 | enabled = false
91 | client_id = ""
92 | # DO NOT commit your OAuth provider secret to git. Use environment variable substitution instead:
93 | secret = "env(SUPABASE_AUTH_EXTERNAL_APPLE_SECRET)"
94 | # Overrides the default auth redirectUrl.
95 | redirect_uri = ""
96 | # Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
97 | # or any other third-party OIDC providers.
98 | url = ""
99 |
100 | [analytics]
101 | enabled = false
102 | port = 54327
103 | vector_port = 54328
104 | # Setup BigQuery project to enable log viewer on local development stack.
105 | # See: https://supabase.com/docs/guides/getting-started/local-development#enabling-local-logging
106 | gcp_project_id = ""
107 | gcp_project_number = ""
108 | gcp_jwt_path = "supabase/gcloud.json"
109 |
--------------------------------------------------------------------------------
/supabase/functions/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": ["denoland.vscode-deno"]
3 | }
4 |
--------------------------------------------------------------------------------
/supabase/functions/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "deno.enable": true,
3 | "deno.lint": true,
4 | "editor.defaultFormatter": "denoland.vscode-deno"
5 | }
6 |
--------------------------------------------------------------------------------
/supabase/seed.sql:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satansdeer/ztm-notion-clone/83f407169bf413804cd2f0af07278d500e85120f/supabase/seed.sql
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
6 | "module": "ESNext",
7 | "skipLibCheck": true,
8 |
9 | /* Bundler mode */
10 | "moduleResolution": "bundler",
11 | "allowImportingTsExtensions": true,
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "noEmit": true,
15 | "jsx": "react-jsx",
16 |
17 | /* Linting */
18 | "strict": true,
19 | "noUnusedLocals": true,
20 | "noUnusedParameters": true,
21 | "noFallthroughCasesInSwitch": true
22 | },
23 | "include": ["src"],
24 | "references": [{ "path": "./tsconfig.node.json" }]
25 | }
26 |
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "skipLibCheck": true,
5 | "module": "ESNext",
6 | "moduleResolution": "bundler",
7 | "allowSyntheticDefaultImports": true
8 | },
9 | "include": ["vite.config.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react-swc'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/ztm-notion-clone.code-workspace:
--------------------------------------------------------------------------------
1 | {
2 | "folders": [
3 | {
4 | "name": "project-root",
5 | "path": "./"
6 | },
7 | {
8 | "name": "supabase-functions",
9 | "path": "supabase/functions"
10 | }
11 | ],
12 | "settings": {
13 | "files.exclude": {
14 | "supabase/functions/": true
15 | }
16 | }
17 | }
18 |
--------------------------------------------------------------------------------