a tool for shared writing and social publishing
make root page create new doc, speed up doc creation
+68
-33
+31
app/[doc_id]/Doc.tsx
+31
app/[doc_id]/Doc.tsx
···
1
+
import { Fact, ReplicacheProvider } from "src/replicache";
2
+
import { Database } from "../../supabase/database.types";
3
+
import { Attributes } from "src/replicache/attributes";
4
+
import { createServerClient } from "@supabase/ssr";
5
+
import { SelectionManager } from "components/SelectionManager";
6
+
import { Cards } from "components/Cards";
7
+
import { ThemeProvider } from "components/ThemeManager/ThemeProvider";
8
+
import { MobileFooter } from "components/MobileFooter";
9
+
import { PopUpProvider } from "components/Toast";
10
+
import { YJSFragmentToString } from "components/TextBlock/RenderYJSFragment";
11
+
export function Doc(props: {
12
+
initialFacts: Fact<keyof typeof Attributes>[];
13
+
doc_id: string;
14
+
}) {
15
+
return (
16
+
<ReplicacheProvider name={props.doc_id} initialFacts={props.initialFacts}>
17
+
<PopUpProvider>
18
+
<ThemeProvider entityID={props.doc_id}>
19
+
<SelectionManager />
20
+
<div
21
+
className="pageContentWrapper w-full relative overflow-x-scroll snap-x snap-mandatory no-scrollbar grow items-stretch flex h-full"
22
+
id="card-carousel"
23
+
>
24
+
<Cards rootCard={props.doc_id} />
25
+
</div>
26
+
<MobileFooter entityID={props.doc_id} />
27
+
</ThemeProvider>
28
+
</PopUpProvider>
29
+
</ReplicacheProvider>
30
+
);
31
+
}
+2
-3
app/[doc_id]/layout.tsx
components/ViewportSizeLayout.tsx
+2
-3
app/[doc_id]/layout.tsx
components/ViewportSizeLayout.tsx
···
1
1
"use client";
2
-
import { isIOS, useViewportSize } from "@react-aria/utils";
2
+
import { useViewportSize } from "@react-aria/utils";
3
3
import { useEffect, useState } from "react";
4
-
import { usePreventScroll } from "react-aria";
5
4
6
-
export default function Layout(props: { children: React.ReactNode }) {
5
+
export function ViewportSizeLayout(props: { children: React.ReactNode }) {
7
6
let viewheight = useViewportSize().height;
8
7
let difference = useViewportDifference();
9
8
return <div style={{ height: viewheight || "100%" }}>{props.children}</div>;
+2
-16
app/[doc_id]/page.tsx
+2
-16
app/[doc_id]/page.tsx
···
12
12
import { MobileFooter } from "components/MobileFooter";
13
13
import { PopUpProvider } from "components/Toast";
14
14
import { YJSFragmentToString } from "components/TextBlock/RenderYJSFragment";
15
+
import { Doc } from "./Doc";
15
16
16
17
export const preferredRegion = ["sfo1"];
17
18
export const dynamic = "force-dynamic";
···
28
29
export default async function DocumentPage(props: Props) {
29
30
let { data } = await supabase.rpc("get_facts", { root: props.params.doc_id });
30
31
let initialFacts = (data as unknown as Fact<keyof typeof Attributes>[]) || [];
31
-
return (
32
-
<ReplicacheProvider name={props.params.doc_id} initialFacts={initialFacts}>
33
-
<PopUpProvider>
34
-
<ThemeProvider entityID={props.params.doc_id}>
35
-
<SelectionManager />
36
-
<div
37
-
className="pageContentWrapper w-full relative overflow-x-scroll snap-x snap-mandatory no-scrollbar grow items-stretch flex h-full"
38
-
id="card-carousel"
39
-
>
40
-
<Cards rootCard={props.params.doc_id} />
41
-
</div>
42
-
<MobileFooter entityID={props.params.doc_id} />
43
-
</ThemeProvider>
44
-
</PopUpProvider>
45
-
</ReplicacheProvider>
46
-
);
32
+
return <Doc initialFacts={initialFacts} doc_id={props.params.doc_id} />;
47
33
}
48
34
49
35
export async function generateMetadata(props: Props): Promise<Metadata> {
+4
-1
app/layout.tsx
+4
-1
app/layout.tsx
···
1
+
import { ViewportSizeLayout } from "components/ViewportSizeLayout";
1
2
import { InitialPageLoad } from "../components/InitialPageLoadProvider";
2
3
import { ServiceWorker } from "../components/ServiceWorker";
3
4
import "./globals.css";
···
25
26
<html lang="en" className={`${quattro.variable}`}>
26
27
<body>
27
28
<ServiceWorker />
28
-
<InitialPageLoad>{children}</InitialPageLoad>
29
+
<InitialPageLoad>
30
+
<ViewportSizeLayout>{children}</ViewportSizeLayout>
31
+
</InitialPageLoad>
29
32
</body>
30
33
</html>
31
34
);
-13
app/new/page.tsx
-13
app/new/page.tsx
···
1
-
import { drizzle } from "drizzle-orm/postgres-js";
2
-
import { entities } from "../../drizzle/schema";
3
-
import { redirect } from "next/navigation";
4
-
import postgres from "postgres";
5
-
const client = postgres(process.env.DB_URL as string);
6
-
const db = drizzle(client);
7
-
8
-
export const dynamic = "force-dynamic";
9
-
10
-
export default async function RootPage() {
11
-
let rows = await db.insert(entities).values({}).returning();
12
-
return redirect(`/${rows[0].id}`);
13
-
}
+20
app/page.tsx
+20
app/page.tsx
···
1
+
import { drizzle } from "drizzle-orm/postgres-js";
2
+
import { entities } from "drizzle/schema";
3
+
import { redirect } from "next/navigation";
4
+
import postgres from "postgres";
5
+
import { Doc } from "./[doc_id]/Doc";
6
+
import { UpdateURL } from "components/UpdateURL";
7
+
const client = postgres(process.env.DB_URL as string);
8
+
const db = drizzle(client);
9
+
10
+
export const dynamic = "force-dynamic";
11
+
12
+
export default async function RootPage() {
13
+
let rows = await db.insert(entities).values({}).returning();
14
+
return (
15
+
<>
16
+
<UpdateURL url={`/${rows[0].id}`} />
17
+
<Doc doc_id={rows[0].id} initialFacts={[]} />
18
+
</>
19
+
);
20
+
}