44 |
45 |
88 |
89 | )
90 | }
91 |
--------------------------------------------------------------------------------
/src/components/assistant-activity-indicator.stories.tsx:
--------------------------------------------------------------------------------
1 | import { StoryObj } from "@storybook/react"
2 | import { AssistantActivityIndicator } from "./assistant-activity-indicator"
3 |
4 | export default {
5 | title: "AssistantActivityIndicator",
6 | component: AssistantActivityIndicator,
7 | parameters: {
8 | layout: "centered",
9 | },
10 | argTypes: {
11 | state: {
12 | control: {
13 | type: "select",
14 | },
15 | options: ["idle", "thinking", "speaking"],
16 | },
17 | },
18 | }
19 |
20 | type Story = StoryObj
46 | {sidebar === "collapsed" ? (
47 | <>
48 | setSidebar("expanded")}
52 | >
53 |
55 | router.history.back()}
65 | className="group"
66 | >
67 |
69 | router.history.forward()}
74 | >
75 |
77 |
78 |
79 | {icon ? (
80 |
84 | {icon}
81 | ) : null}
82 | {title}
83 |
85 | {actions ?
87 | {actions}
: null}
86 |
99 | {levels.map((level, index) => (
100 |
108 | ))}
109 |
110 | )
111 | }
112 |
--------------------------------------------------------------------------------
/src/components/button.stories.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "./button"
2 |
3 | export default {
4 | title: "Button",
5 | component: Button,
6 | parameters: {
7 | layout: "centered",
8 | },
9 | }
10 |
11 | export const Primary = {
12 | args: {
13 | children: "Button",
14 | variant: "primary",
15 | size: "medium",
16 | },
17 | }
18 |
19 | export const Secondary = {
20 | args: {
21 | children: "Button",
22 | variant: "secondary",
23 | size: "medium",
24 | },
25 | }
26 |
27 | export const WithKeyboardShortcut = {
28 | args: {
29 | children: "Save",
30 | shortcut: ["⌘", "⏎"],
31 | size: "medium",
32 | },
33 | }
34 |
35 | export const Disabled = {
36 | args: {
37 | children: "Button",
38 | disabled: true,
39 | size: "medium",
40 | },
41 | }
42 |
43 | export const Small = {
44 | args: {
45 | children: "Button",
46 | variant: "secondary",
47 | size: "small",
48 | },
49 | }
50 |
--------------------------------------------------------------------------------
/src/components/button.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { Keys } from "./keys"
3 | import { cx } from "../utils/cx"
4 |
5 | export type ButtonProps = React.ComponentPropsWithoutRef<"button"> & {
6 | variant?: "secondary" | "primary"
7 | size?: "small" | "medium"
8 | shortcut?: string[]
9 | }
10 |
11 | export const Button = React.forwardRef
17 | {daysOfWeek.map((day) => (
18 |
21 | )
22 | }
23 |
24 | function Day({ date }: { date: string }) {
25 | const note = useNoteById(date)
26 | const dayName = DAY_NAMES[new Date(date).getUTCDay()]
27 |
28 | if (!note) {
29 | // Placeholder
30 | return (
31 |
41 | {dayName}
42 |
43 | )
44 | }
45 |
46 | return
17 | Details
18 |
20 | ),
21 | args: {
22 | defaultOpen: true,
23 | },
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/details.tsx:
--------------------------------------------------------------------------------
1 | import { cx } from "../utils/cx"
2 | import { TriangleRightIcon12 } from "./icons"
3 |
4 | function Root({
5 | children,
6 | className,
7 | defaultOpen = true,
8 | }: {
9 | children: React.ReactNode
10 | className?: string
11 | defaultOpen?: boolean
12 | }) {
13 | return (
14 | Peekaboo!
19 |
15 | {children}
16 |
17 | )
18 | }
19 |
20 | function Summary({ children, className }: { children: React.ReactNode; className?: string }) {
21 | return (
22 |
25 |
31 | )
32 | }
33 |
34 | function formatState(state: Record
26 | {formatState(state.value)}
27 | ·
28 |
30 |
29 | {title}
30 |
31 |
36 |
38 |
39 |
40 | {children}
41 |
28 |
76 |
77 | )
78 | }
79 |
--------------------------------------------------------------------------------
/src/components/dropdown-menu.stories.tsx:
--------------------------------------------------------------------------------
1 | import { DropdownMenu } from "./dropdown-menu"
2 | import { IconButton } from "./icon-button"
3 | import { EditIcon16, ExternalLinkIcon16, MoreIcon16, TrashIcon16 } from "./icons"
4 |
5 | export default {
6 | title: "DropdownMenu",
7 | component: DropdownMenu,
8 | parameters: {
9 | layout: "centered",
10 | },
11 | }
12 |
13 | export const Default = {
14 | render: () => {
15 | return (
16 |
58 |
61 | ) : !online ? (
62 |
63 |
66 | ) : (
67 |
68 |
71 | )
72 | }
73 |
74 | // Image
75 | if (file.type.startsWith("image/")) {
76 | return
24 |
31 | {children}
32 | {description ? (
33 | {description}
34 | ) : null}
35 |
36 | )
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/github-auth.tsx:
--------------------------------------------------------------------------------
1 | import { useSetAtom } from "jotai"
2 | import urlcat from "urlcat"
3 | import { globalStateMachineAtom } from "../global-state"
4 | import { Button, ButtonProps } from "./button"
5 |
6 | export function SignInButton(props: ButtonProps) {
7 | const send = useSetAtom(globalStateMachineAtom)
8 | return (
9 |
36 | )
37 | }
38 |
39 | export function useSignOut() {
40 | const send = useSetAtom(globalStateMachineAtom)
41 |
42 | return () => {
43 | send({ type: "SIGN_OUT" })
44 | }
45 | }
46 |
47 | async function getUser(token: string) {
48 | const userResponse = await fetch("https://api.github.com/user", {
49 | headers: {
50 | Authorization: `Bearer ${token}`,
51 | },
52 | })
53 |
54 | if (userResponse.status === 401) {
55 | throw new Error("Invalid token")
56 | }
57 |
58 | if (!userResponse.ok) {
59 | throw new Error("Unknown error")
60 | }
61 |
62 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
63 | const { login, name } = (await userResponse.json()) as any
64 |
65 | const emailResponse = await fetch("https://api.github.com/user/emails", {
66 | headers: {
67 | Authorization: `Bearer ${token}`,
68 | },
69 | })
70 |
71 | if (emailResponse.status === 401) {
72 | throw new Error("Invalid token")
73 | }
74 |
75 | if (!emailResponse.ok) {
76 | throw new Error("Error getting user's emails")
77 | }
78 |
79 | const emails = (await emailResponse.json()) as Array<{ email: string; primary: boolean }>
80 | const primaryEmail = emails.find((email) => email.primary)
81 |
82 | if (!primaryEmail) {
83 | throw new Error("No primary email found")
84 | }
85 |
86 | return { login, name, email: primaryEmail.email }
87 | }
88 |
--------------------------------------------------------------------------------
/src/components/github-avatar.tsx:
--------------------------------------------------------------------------------
1 | import { cx } from "../utils/cx"
2 |
3 | type GitHubAvatarProps = React.ComponentPropsWithoutRef<"div"> & {
4 | login: string
5 | size?: number
6 | }
7 |
8 | export function GitHubAvatar({ login, size = 32, className, ...props }: GitHubAvatarProps) {
9 | return (
10 | 
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/icon-button.stories.tsx:
--------------------------------------------------------------------------------
1 | import { IconButton } from "./icon-button"
2 | import { MoreIcon16, SearchIcon16 } from "./icons"
3 |
4 | export default {
5 | title: "IconButton",
6 | component: IconButton,
7 | parameters: {
8 | layout: "centered",
9 | },
10 | }
11 |
12 | export const Default = {
13 | args: {
14 | "aria-label": "Search",
15 | children:
57 | {props["aria-label"]}
58 | {shortcut ? (
59 |
64 |
60 |
62 | ) : null}
63 |
24 | {Object.entries(iconsBySize).map(([size, icons]) => (
25 |
40 | ),
41 | }
42 |
43 | export const Calendar: StoryObj<{ date: number }> = {
44 | render: (args) => {
45 | return
26 |
38 | ))}
39 | 27 | {size}×{size} 28 |
29 |
30 | {icons.map(([name, Icon]) => (
31 |
37 |
32 |
35 | ))}
36 |
21 |
31 | {children}
32 |
33 | )
34 | }
35 |
36 | export function useLinkHighlight() {
37 | return useContext(LinkHighlightContext)
38 | }
39 |
--------------------------------------------------------------------------------
/src/components/lumen-logo.tsx:
--------------------------------------------------------------------------------
1 | export function LumenLogo({
2 | size = 32,
3 | ...props
4 | }: React.ComponentProps<"svg"> & { size?: number }) {
5 | return (
6 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/src/components/nav-bar.tsx:
--------------------------------------------------------------------------------
1 | import { useNavigate, useRouter } from "@tanstack/react-router"
2 | import { useSetAtom } from "jotai"
3 | import { forwardRef } from "react"
4 | import { Drawer } from "vaul"
5 | import { cx } from "../utils/cx"
6 | import { isCommandMenuOpenAtom } from "./command-menu"
7 | import { IconButton, IconButtonProps } from "./icon-button"
8 | import { ArrowLeftIcon16, ArrowRightIcon16, CommandIcon16, MenuIcon16, PlusIcon16 } from "./icons"
9 | import { NavItems } from "./nav-items"
10 |
11 | export function NavBar() {
12 | const router = useRouter()
13 | const navigate = useNavigate()
14 | const setIsCommandMenuOpen = useSetAtom(isCommandMenuOpenAtom)
15 |
16 | return (
17 |
18 |
67 | )
68 | }
69 |
70 | const NavButton = forwardRef
19 |
20 |
21 |
22 |
24 |
25 |
26 |
28 |
37 |
38 |
39 | router.history.back()}>
40 |
42 | router.history.forward()}>
43 |
45 | setIsCommandMenuOpen(true)}>
46 |
48 |
52 | navigate({
53 | to: "/notes/$",
54 | params: { _splat: `${Date.now()}` },
55 | search: {
56 | mode: "write",
57 | query: undefined,
58 | view: "grid",
59 | },
60 | })
61 | }
62 | >
63 |
65 |
66 |
29 |
33 | Navigation
34 |
36 | 
62 | )
63 | }
64 |
65 | // Template
66 | if (note.type === "template") {
67 | icon =
52 | {(note.type === "daily" || note.type === "weekly") && !note.title ? (
53 |
95 | )
96 | }
97 |
--------------------------------------------------------------------------------
/src/components/openai-key-input.typegen.ts:
--------------------------------------------------------------------------------
1 |
2 | // This file was automatically generated. Edits will be overwritten
3 |
4 | export interface Typegen0 {
5 | '@@xstate/typegen': true;
6 | internalEvents: {
7 | "done.invoke.openaiKeyValidation.initializing:invocation[0]": { type: "done.invoke.openaiKeyValidation.initializing:invocation[0]"; data: unknown; __tip: "See the XState TS docs to learn how to strongly type this." };
8 | "xstate.init": { type: "xstate.init" };
9 | };
10 | invokeSrcNameMap: {
11 | "initialize": "done.invoke.openaiKeyValidation.initializing:invocation[0]";
12 | "validate": "done.invoke.openaiKeyValidation.validating:invocation[0]";
13 | };
14 | missingImplementations: {
15 | actions: never;
16 | delays: never;
17 | guards: never;
18 | services: never;
19 | };
20 | eventsCausingActions: {
21 |
22 | };
23 | eventsCausingDelays: {
24 |
25 | };
26 | eventsCausingGuards: {
27 | "isEmpty": "CHANGE" | "done.invoke.openaiKeyValidation.initializing:invocation[0]";
28 | };
29 | eventsCausingServices: {
30 | "initialize": "RESTART" | "xstate.init";
31 | "validate": "CHANGE" | "done.invoke.openaiKeyValidation.initializing:invocation[0]";
32 | };
33 | matchesStates: "empty" | "initializing" | "invalid" | "valid" | "validating";
34 | tags: never;
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/pill-button.stories.tsx:
--------------------------------------------------------------------------------
1 | import { PillButton } from "./pill-button"
2 |
3 | export default {
4 | title: "PillButton",
5 | component: PillButton,
6 | parameters: {
7 | layout: "centered",
8 | },
9 | argTypes: {
10 | onClick: { action: "onClick" },
11 | },
12 | }
13 |
14 | export const Primary = {
15 | args: {
16 | children: "Pill button",
17 | variant: "primary",
18 | },
19 | }
20 |
21 | export const Secondary = {
22 | args: {
23 | children: "Pill button",
24 | variant: "secondary",
25 | },
26 | }
27 |
28 | export const Dashed = {
29 | args: {
30 | children: "Pill button",
31 | variant: "dashed",
32 | },
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/pill-button.tsx:
--------------------------------------------------------------------------------
1 | import { Slot } from "@radix-ui/react-slot"
2 | import React from "react"
3 | import { cx } from "../utils/cx"
4 |
5 | type PillButtonProps = React.ComponentPropsWithoutRef<"button"> & {
6 | children: React.ReactNode
7 | asChild?: boolean
8 | className?: string
9 | variant?: "primary" | "secondary" | "dashed"
10 | }
11 |
12 | export const PillButton = React.forwardRef
54 |
55 | {note.displayName}
56 |
57 |
58 | {note.type === "daily" ? formatDateDistance(note.id) : formatWeekDistance(note.id)}
59 |
60 |
61 | ) : null}
62 |
63 |
67 | {!hideProperties ? (
68 |
64 | {note.content}
65 |
66 |
69 | {note?.frontmatter?.gist_id ? (
70 |
93 | ) : null}
94 |
71 |
73 | ) : null}
74 | {frontmatterTags.slice(0, NUM_VISIBLE_TAGS).map((tag) => (
75 |
84 | #{tag}
85 |
86 | ))}
87 | {frontmatterTags.length > NUM_VISIBLE_TAGS ? (
88 |
89 | +{frontmatterTags.length - NUM_VISIBLE_TAGS}
90 |
91 | ) : null}
92 |
15 |
20 |
21 |
26 |
44 |
79 | )
80 | }
81 |
--------------------------------------------------------------------------------
/src/components/segmented-control.stories.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react"
2 | import { SegmentedControl, SegmentedControlProps } from "./segmented-control"
3 |
4 | export default {
5 | title: "SegmentedControl",
6 | component: SegmentedControl,
7 | subcomponents: {
8 | Segment: SegmentedControl.Segment,
9 | },
10 | parameters: {
11 | layout: "centered",
12 | },
13 | }
14 |
15 | export const Default = {
16 | render: (args: SegmentedControlProps) => {
17 | const [selected, setSelected] = useState("read")
18 | return (
19 |
45 |
47 |
60 | {shortcut && !inputValue ? (
61 |
65 |
67 | ) : null}
68 | {inputValue ? (
69 |
73 |
74 |
76 |
77 | ) : null}
78 | -
26 | {children}
27 |
16 |
37 | )
38 | }
39 |
--------------------------------------------------------------------------------
/src/components/sign-in-banner.tsx:
--------------------------------------------------------------------------------
1 | import { useAtomValue } from "jotai"
2 | import { SignInButton } from "./github-auth"
3 | import { isSignedOutAtom } from "../global-state"
4 |
5 | export function SignInBanner() {
6 | const isSignedOut = useAtomValue(isSignedOutAtom)
7 |
8 | if (!isSignedOut) {
9 | return null
10 | }
11 |
12 | return (
13 |
22 | setSidebar("collapsed")}
27 | >
28 |
30 |
32 |
33 |
34 |
36 |
14 |
15 | Lumen is in read-only mode.
16 | Sign in to start writing notes.
17 |
18 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/switch.stories.tsx:
--------------------------------------------------------------------------------
1 | import { Switch } from "./switch"
2 |
3 | export default {
4 | title: "Switch",
5 | component: Switch,
6 | parameters: {
7 | layout: "centered",
8 | },
9 | }
10 |
11 | export const Default = {}
12 |
13 | export const Checked = {
14 | args: {
15 | checked: true,
16 | },
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/switch.tsx:
--------------------------------------------------------------------------------
1 | import * as RadixSwitch from "@radix-ui/react-switch"
2 | import { cx } from "../utils/cx"
3 |
4 | export function Switch({ className, ...props }: RadixSwitch.SwitchProps) {
5 | return (
6 | {children}
21 | }
22 |
23 | const html = Prism.highlight(String(children), Prism.languages[language], language)
24 | return
14 | {icon ?
17 | )
18 | }
19 |
20 | export function toast({ message, icon }: { message: React.ReactNode; icon?: React.ReactNode }) {
21 | return sonnerToast.custom(() => {icon}
: null}
15 | {children}
16 | []
`, 26 | }, 27 | { 28 | input: `[[![[123]]]]`, 29 | output: `[[]]
`, 30 | }, 31 | { 32 | input: `\`\`\` 33 | ![[123]] 34 | \`\`\``, 35 | output: `![[123]]
36 | ![[123]]
`, 45 | }, 46 | { 47 | input: `- ![[123]]`, 48 | output: `
-
49 |
50 |
`, 63 | }, 64 | { 65 | input: `![[123x]]`, 66 | output: ``, 67 | }, 68 | { 69 | input: `![[x]]`, 70 | output: ``, 71 | }, 72 | { 73 | input: `![[x|y]]`, 74 | output: ``, 75 | }, 76 | { 77 | input: `![[Hello world|foo]]`, 78 | output: ``, 79 | }, 80 | { 81 | input: `![[foo.bar]]`, 82 | output: ``, 83 | }, 84 | 85 | // Invalid note links 86 | { 87 | input: `hello`, 88 | output: `
hello
`, 89 | }, 90 | { 91 | input: `[[123]]`, 92 | output: `[[123]]
`, 93 | }, 94 | { 95 | input: `[`, 96 | output: `[
`, 97 | }, 98 | { 99 | input: `![[`, 100 | output: `![[
`, 101 | }, 102 | { 103 | input: `![[]]`, 104 | output: `![[]]
`, 105 | }, 106 | { 107 | input: `![[123]`, 108 | output: `![[123]
`, 109 | }, 110 | { 111 | input: `![[123`, 112 | output: `![[123
`, 113 | }, 114 | { 115 | input: `[123]]`, 116 | output: `[123]]
`, 117 | }, 118 | { 119 | input: `123]]`, 120 | output: `123]]
`, 121 | }, 122 | { 123 | input: `[123]`, 124 | output: `[123]
`, 125 | }, 126 | { 127 | input: `![[123|]]`, 128 | output: `![[123|]]
`, 129 | }, 130 | ]) 131 | -------------------------------------------------------------------------------- /src/remark-plugins/wikilink.test.ts: -------------------------------------------------------------------------------- 1 | import { micromark } from "micromark" 2 | import { expect, test } from "vitest" 3 | import { wikilink, wikilinkHtml } from "./wikilink" 4 | 5 | function runTests(tests: Array<{ input: string; output: string }>) { 6 | for (const { input, output } of tests) { 7 | test(input, () => { 8 | const html = micromark(input, { 9 | extensions: [wikilink()], 10 | htmlExtensions: [wikilinkHtml()], 11 | }) 12 | expect(html).toBe(output) 13 | }) 14 | } 15 | } 16 | 17 | runTests([ 18 | // Valid wikilinks 19 | { 20 | input: `[[123]]`, 21 | output: `[
[[
[[123]]
36 | [[123]]
-
49 |
hello
`, 89 | }, 90 | { 91 | input: `[`, 92 | output: `[
`, 93 | }, 94 | { 95 | input: `[[`, 96 | output: `[[
`, 97 | }, 98 | { 99 | input: `[[]]`, 100 | output: `[[]]
`, 101 | }, 102 | { 103 | input: `[[123]`, 104 | output: `[[123]
`, 105 | }, 106 | { 107 | input: `[[123`, 108 | output: `[[123
`, 109 | }, 110 | { 111 | input: `[123]]`, 112 | output: `[123]]
`, 113 | }, 114 | { 115 | input: `123]]`, 116 | output: `123]]
`, 117 | }, 118 | { 119 | input: `[123]`, 120 | output: `[123]
`, 121 | }, 122 | { 123 | input: `[[123|]]`, 124 | output: `[[123|]]
`, 125 | }, 126 | ]) 127 | -------------------------------------------------------------------------------- /src/routes/__root.tsx: -------------------------------------------------------------------------------- 1 | import { HeadContent, Link, Outlet, createRootRoute } from "@tanstack/react-router" 2 | import { useThemeColor } from "../hooks/theme-color" 3 | import { createPortal } from "react-dom" 4 | 5 | export const Route = createRootRoute({ 6 | component: RootComponent, 7 | notFoundComponent: NotFoundComponent, 8 | head: () => ({ 9 | meta: [{ title: "Lumen" }], 10 | }), 11 | }) 12 | 13 | function NotFoundComponent() { 14 | return ( 15 |
16 | Page not found.{" "}
17 |
18 | Go home
19 |
20 |
21 | )
22 | }
23 |
24 | function RootComponent() {
25 | useThemeColor()
26 |
27 | return (
28 | <>
29 | {createPortal(
25 | {path ?
27 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/src/routes/_appRoot.index.tsx:
--------------------------------------------------------------------------------
1 | import { createFileRoute } from "@tanstack/react-router"
2 | import { AppLayout } from "../components/app-layout"
3 | import { NoteList } from "../components/note-list"
4 | import { NoteIcon16 } from "../components/icons"
5 |
6 | type RouteSearch = {
7 | query: string | undefined
8 | view: "grid" | "list"
9 | }
10 |
11 | export const Route = createFileRoute("/_appRoot/")({
12 | validateSearch: (search: Record
28 |
32 | navigate({ search: (prev) => ({ ...prev, query }), replace: true })
33 | }
34 | onViewChange={(view) =>
35 | navigate({ search: (prev) => ({ ...prev, view }), replace: true })
36 | }
37 | />
38 |
39 |
40 | )
41 | }
42 |
--------------------------------------------------------------------------------
/src/routes/_appRoot.notes.index.tsx:
--------------------------------------------------------------------------------
1 | import { createFileRoute, redirect } from "@tanstack/react-router"
2 |
3 | export const Route = createFileRoute("/_appRoot/notes/")({
4 | loader: () => {
5 | throw redirect({ to: "/", search: { query: undefined, view: "grid" } })
6 | },
7 | })
8 |
--------------------------------------------------------------------------------
/src/schema.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod"
2 |
3 | export type NoteId = string
4 |
5 | export type NoteType = "note" | "daily" | "weekly" | "template"
6 |
7 | export type Task = {
8 | completed: boolean
9 | text: string
10 | }
11 |
12 | export type Note = {
13 | /** The markdown file path without the extension (e.g. `foo/bar.md` → `foo/bar`) */
14 | id: NoteId
15 | /** The content of the markdown file */
16 | content: string
17 |
18 | // ↓ Parsed from the content
19 |
20 | /** The type of the note */
21 | type: NoteType
22 | /** Depending on the type, either the title, template name, or the date */
23 | displayName: string
24 | /** The frontmatter of the markdown file */
25 | frontmatter: Record