1import { App, Modal } from "obsidian";
2
3export class WelcomeModal extends Modal {
4 constructor(app: App) {
5 super(app);
6 }
7
8 onOpen(): void {
9 const { contentEl } = this;
10 contentEl.addClass("sbl-welcome-modal");
11
12 contentEl.createEl("h2", { text: "Welcome to sublimated" });
13
14 contentEl.createEl("p", {
15 text: "sublimated syncs your files with version history, collaboration, and a web viewer — all powered by git under the hood.",
16 });
17
18 const steps = contentEl.createEl("div", { cls: "sbl-welcome-steps" });
19
20 const step1 = steps.createDiv({ cls: "sbl-welcome-step" });
21 step1.createEl("strong", { text: "1. Open your vault from sublimated" });
22 step1.createEl("p", {
23 text: "In Finder, open your sublimated folder (under CloudStorage) as an Obsidian vault. The plugin detects the .sbl/ folder automatically.",
24 });
25
26 const step2 = steps.createDiv({ cls: "sbl-welcome-step" });
27 step2.createEl("strong", { text: "2. Status bar shows sync info" });
28 step2.createEl("p", {
29 text: "The bottom bar shows version number, sync status, and author for the current file — all read from local file metadata, no account needed.",
30 });
31
32 const step3 = steps.createDiv({ cls: "sbl-welcome-step" });
33 step3.createEl("strong", { text: "3. Add an API token for version history" });
34 step3.createEl("p", {
35 text: "To browse past versions, add your API token in Settings → sublimated. Generate one at sublimated.com/settings/tokens.",
36 });
37
38 const links = contentEl.createDiv({ cls: "sbl-welcome-links" });
39 links.createEl("a", {
40 text: "Learn more at sublimated.com",
41 href: "https://sublimated.com",
42 });
43 links.createEl("br");
44 links.createEl("a", {
45 text: "Documentation",
46 href: "https://sublimated.com/docs/obsidian",
47 });
48
49 const footer = contentEl.createDiv({ cls: "sbl-welcome-footer" });
50 footer.createEl("button", {
51 text: "Get started",
52 cls: "mod-cta",
53 }).addEventListener("click", () => this.close());
54 }
55
56 onClose(): void {
57 this.contentEl.empty();
58 }
59}