Skip to content

Commit ffaf2ee

Browse files
xlc-devxlc-dev
committed
add tutorial
1 parent f26c558 commit ffaf2ee

File tree

1 file changed

+109
-77
lines changed

1 file changed

+109
-77
lines changed

‎src/routes/index.tsx‎

Lines changed: 109 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11
import { MetaProvider, Title } from "@solidjs/meta";
2-
import { Show } from "solid-js";
3-
4-
import { createStorageSignal } from "~/utils";
2+
import { clientOnly } from "@solidjs/start";
53

64
import { ThemeToggle } from "~/components/ui/ThemeToggle";
75
import { Flex } from "~/components/ui/Flex";
8-
import { IMEField } from "~/components/IMEField";
96
import {
107
Dialog,
8+
DialogTrigger,
119
DialogContent,
12-
DialogDescription,
1310
DialogHeader,
1411
DialogTitle,
15-
DialogTrigger,
12+
DialogDescription,
1613
} from "~/components/ui/Dialog";
1714
import { Label } from "~/components/ui/Label";
1815
import { Switch, SwitchControl, SwitchThumb, SwitchLabel } from "~/components/ui/Switch";
1916

17+
import { IMEField } from "~/components/IMEField";
18+
19+
const Info = clientOnly(() => import("../components/Info"));
20+
import { createStorageSignal } from "~/utils";
21+
2022
export default function Home() {
2123
const [showTitle, setShowTitle] = createStorageSignal("setting-show-title", true);
2224
const [showExplanation, setShowExplanation] = createStorageSignal(
@@ -34,90 +36,120 @@ export default function Home() {
3436
flexDirection="col"
3537
justifyContent="start"
3638
alignItems="center"
37-
class="bg-background text-foreground relative min-h-screen pt-[20vh]">
38-
<Dialog>
39-
<Flex flexDirection="col" alignItems="center" class="w-full max-w-2xl gap-4 px-4">
40-
<div class="text-center">
41-
<Show when={showTitle()}>
42-
<h1 class="text-3xl font-semibold sm:text-4xl">
43-
QuickIME – An Input Method Editor that{" "}
44-
<span class="text-primary">doesn't suck</span>
45-
</h1>
46-
</Show>
47-
48-
<Show when={showExplanation()}>
49-
<p class="text-muted-foreground mx-auto mt-4 max-w-xl text-base sm:text-lg">
50-
Tired of clunky setups, invasive tracking, and unreliable input methods? IME is a
51-
fast, private, and simple web-based alternative that just works.
52-
</p>
53-
</Show>
54-
</div>
39+
class="bg-background text-foreground min-h-screen pt-8 lg:pt-[20vh]">
40+
<div class="flex w-full max-w-2xl flex-col items-center gap-4 px-4">
41+
<div class="text-center">
42+
<Info showTitle={showTitle} showExplanation={showExplanation} />
43+
</div>
5544

56-
<IMEField />
45+
<IMEField />
5746

58-
<footer class="text-muted-foreground text-sm">
59-
<Flex alignItems="center" class="gap-3">
60-
<span>
61-
Made by{" "}
62-
<a
63-
href="https://github.com/xlc-dev"
64-
class="text-foreground font-bold hover:underline">
65-
xlcdev
66-
</a>
67-
</span>
68-
<span>·</span>
47+
<footer class="text-muted-foreground w-full text-sm">
48+
<Flex justifyContent="center" alignItems="center" class="gap-3">
49+
<span>
50+
Made by{" "}
6951
<a
70-
href="https://github.com/xlc-dev/IME"
52+
href="https://github.com/xlc-dev"
7153
class="text-foreground font-bold hover:underline">
72-
GitHub
54+
xlcdev
7355
</a>
74-
<span>·</span>
56+
</span>
57+
<span>·</span>
58+
<a
59+
href="https://github.com/xlc-dev/IME"
60+
class="text-foreground font-bold hover:underline">
61+
GitHub
62+
</a>
63+
<span>·</span>
64+
65+
<Dialog>
7566
<DialogTrigger
7667
as="button"
7768
class="text-foreground cursor-pointer font-bold hover:underline">
7869
Settings
7970
</DialogTrigger>
80-
</Flex>
81-
</footer>
82-
</Flex>
71+
<DialogContent>
72+
<DialogHeader>
73+
<DialogTitle>Settings</DialogTitle>
74+
<DialogDescription>
75+
Customize your experience. Changes are saved automatically.
76+
</DialogDescription>
77+
</DialogHeader>
78+
<div class="grid gap-4 py-4">
79+
<Switch
80+
checked={showTitle()}
81+
onChange={setShowTitle}
82+
id="show-title"
83+
class="flex w-full items-center justify-between">
84+
<SwitchLabel>Show Title</SwitchLabel>
85+
<SwitchControl>
86+
<SwitchThumb />
87+
</SwitchControl>
88+
</Switch>
89+
90+
<Switch
91+
checked={showExplanation()}
92+
onChange={setShowExplanation}
93+
id="show-explanation"
94+
class="flex w-full items-center justify-between">
95+
<SwitchLabel>Show Explanation</SwitchLabel>
96+
<SwitchControl>
97+
<SwitchThumb />
98+
</SwitchControl>
99+
</Switch>
83100

84-
<DialogContent>
85-
<DialogHeader>
86-
<DialogTitle>Settings</DialogTitle>
87-
<DialogDescription>
88-
Customize your experience. Changes are saved automatically.
89-
</DialogDescription>
90-
</DialogHeader>
91-
<div class="grid gap-4 py-4">
92-
<Switch
93-
checked={showTitle()}
94-
onChange={setShowTitle}
95-
id="show-title"
96-
class="flex w-full items-center justify-between">
97-
<SwitchLabel>Show Title</SwitchLabel>
98-
<SwitchControl>
99-
<SwitchThumb />
100-
</SwitchControl>
101-
</Switch>
101+
<Flex justifyContent="between" alignItems="center">
102+
<Label>Theme</Label>
103+
<ThemeToggle />
104+
</Flex>
105+
</div>
106+
</DialogContent>
107+
</Dialog>
102108

103-
<Switch
104-
checked={showExplanation()}
105-
onChange={setShowExplanation}
106-
id="show-explanation"
107-
class="flex w-full items-center justify-between">
108-
<SwitchLabel>Show Explanation</SwitchLabel>
109-
<SwitchControl>
110-
<SwitchThumb />
111-
</SwitchControl>
112-
</Switch>
109+
<span>·</span>
113110

114-
<Flex justifyContent="between" alignItems="center">
115-
<Label>Theme</Label>
116-
<ThemeToggle />
117-
</Flex>
118-
</div>
119-
</DialogContent>
120-
</Dialog>
111+
<Dialog>
112+
<DialogTrigger
113+
as="button"
114+
class="text-foreground cursor-pointer font-bold hover:underline">
115+
Tutorial
116+
</DialogTrigger>
117+
<DialogContent>
118+
<DialogHeader>
119+
<DialogTitle>Tutorial</DialogTitle>
120+
<DialogDescription>
121+
This is a quick walkthrough of how to use QuickIME.
122+
</DialogDescription>
123+
</DialogHeader>
124+
<div class="space-y-4 py-2">
125+
<p>
126+
You can select the input field and start typing, shocker. But once you have
127+
typed something, QuickIME comes with a few shortcuts:
128+
</p>
129+
<ul class="list-disc space-y-4">
130+
<li>
131+
Press space to call jisho.org to get kanji suggestions. in which you can:
132+
<ul class="list-inside list-disc">
133+
<li>Go up or down with arrow keys or scroll.</li>
134+
<li>Press enter or click to select the suggestion.</li>
135+
</ul>
136+
</li>
137+
<li>
138+
Press enter to confirm what you have typed, and don't want a kanji
139+
suggestion for that portion of text.
140+
</li>
141+
<li>Press shift + space to convert the unconfirmed text to katakana.</li>
142+
<li>
143+
Backspaces are smart. It tries to unconfirm anything you did, else it will
144+
remove the last character like normal.
145+
</li>
146+
</ul>
147+
</div>
148+
</DialogContent>
149+
</Dialog>
150+
</Flex>
151+
</footer>
152+
</div>
121153
</Flex>
122154
</>
123155
);

0 commit comments

Comments
 (0)