Add Obsidian Toolbox — 4 syntax generators under /tools
Inside-LMS toolbox for registered students: callout-CSS, YAML-frontmatter, theme CSS-variables, Style Settings generators. Auth inherited from (student) route group; no public surface, no email gate. - Pure generators in src/lib/tools/* with Vitest (33 tests) - Shared YAML-safe scalar quoter (_shared/yaml.ts) used by frontmatter + style-settings: unquoted user input was silently breaking YAML (tags '#x' -> null, color default '#7C3AED' -> null, 'a: b' -> parse error) - hex validation in callout (no NaN), date input constrained, clipboard + analytics calls guarded - Prisma ToolUsage model + migration; logToolUsage Server Action (auth-first, 10-min dedup window per user/tool) - Tool index /tools + ToolCard (explicit lucide map, no import *) + header link Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,50 @@
|
||||
"use client";
|
||||
import { useMemo, useState } from "react";
|
||||
import { buildCalloutCss } from "@/lib/tools/callout";
|
||||
import { CodeOutput } from "@/components/tools/CodeOutput";
|
||||
|
||||
export function CalloutForm() {
|
||||
const [id, setId] = useState("idea");
|
||||
const [title, setTitle] = useState("Идея");
|
||||
const [color, setColor] = useState("#7C3AED");
|
||||
const [icon, setIcon] = useState("lightbulb");
|
||||
|
||||
const result = useMemo(() => {
|
||||
try { return buildCalloutCss({ id, title, color, icon }); }
|
||||
catch { return null; }
|
||||
}, [id, title, color, icon]);
|
||||
|
||||
const field = "w-full p-2 text-sm";
|
||||
const fieldStyle = { border: "1px solid var(--border)", borderRadius: "2px", backgroundColor: "var(--background)", color: "var(--foreground)" } as const;
|
||||
|
||||
return (
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="flex flex-col gap-3">
|
||||
<label className="text-sm">Тип (id)
|
||||
<input className={field} style={fieldStyle} value={id} onChange={(e) => setId(e.target.value)} />
|
||||
</label>
|
||||
<label className="text-sm">Заголовок
|
||||
<input className={field} style={fieldStyle} value={title} onChange={(e) => setTitle(e.target.value)} />
|
||||
</label>
|
||||
<label className="text-sm">Цвет (HEX)
|
||||
<input className={field} style={fieldStyle} value={color} onChange={(e) => setColor(e.target.value)} />
|
||||
</label>
|
||||
<label className="text-sm">Иконка (lucide-id)
|
||||
<input className={field} style={fieldStyle} value={icon} onChange={(e) => setIcon(e.target.value)} />
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
{result ? (
|
||||
<>
|
||||
<CodeOutput code={result.css} tool="callout" label="CSS-snippet" />
|
||||
<CodeOutput code={result.markdown} tool="callout" label="Пример разметки" />
|
||||
</>
|
||||
) : (
|
||||
<p className="text-sm" style={{ color: "var(--muted-foreground)" }}>
|
||||
Проверь поля: id — латиница и цифры (напр. <code>idea</code>), цвет — корректный HEX (напр. <code>#7C3AED</code>).
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { CalloutForm } from "./CalloutForm";
|
||||
|
||||
export const metadata = { title: "Генератор callout-CSS — Obsidian Toolbox" };
|
||||
|
||||
export default function CalloutToolPage() {
|
||||
return (
|
||||
<main className="mx-auto w-full max-w-5xl px-6 py-8">
|
||||
<h1 className="text-2xl font-bold tracking-wide" style={{ color: "var(--foreground)" }}>Генератор callout-CSS</h1>
|
||||
<p className="mt-1 text-sm" style={{ color: "var(--muted-foreground)" }}>Кастомные коллауты Obsidian: тип, заголовок, цвет, иконка.</p>
|
||||
<div className="mt-6 card-aubade p-4">
|
||||
<CalloutForm />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
"use client";
|
||||
import { useMemo, useState } from "react";
|
||||
import { Plus, Trash2 } from "lucide-react";
|
||||
import { buildFrontmatter, type PropField, type PropType } from "@/lib/tools/frontmatter";
|
||||
import { CodeOutput } from "@/components/tools/CodeOutput";
|
||||
|
||||
const TYPES: PropType[] = ["text", "number", "checkbox", "date", "list", "tags"];
|
||||
const TYPE_RU: Record<PropType, string> = {
|
||||
text: "текст", number: "число", checkbox: "флажок", date: "дата", list: "список", tags: "теги",
|
||||
};
|
||||
|
||||
const field = "w-full p-2 text-sm";
|
||||
const fieldStyle = { border: "1px solid var(--border)", borderRadius: "2px", backgroundColor: "var(--background)", color: "var(--foreground)" } as const;
|
||||
|
||||
export function FrontmatterForm() {
|
||||
const [fields, setFields] = useState<PropField[]>([
|
||||
{ key: "title", type: "text", value: "Моя заметка" },
|
||||
{ key: "tags", type: "tags", value: "obsidian, pkm" },
|
||||
{ key: "created", type: "date", value: "2026-06-23" },
|
||||
]);
|
||||
|
||||
const yaml = useMemo(() => buildFrontmatter(fields), [fields]);
|
||||
|
||||
function update(i: number, patch: Partial<PropField>) {
|
||||
setFields((prev) => prev.map((f, idx) => (idx === i ? { ...f, ...patch } : f)));
|
||||
}
|
||||
function addRow() {
|
||||
setFields((prev) => [...prev, { key: "", type: "text", value: "" }]);
|
||||
}
|
||||
function removeRow(i: number) {
|
||||
setFields((prev) => prev.filter((_, idx) => idx !== i));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="flex flex-col gap-3">
|
||||
{fields.map((f, i) => (
|
||||
<div key={i} className="flex flex-col gap-2 p-2" style={{ border: "1px solid var(--border)", borderRadius: "2px" }}>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
className={field} style={fieldStyle} placeholder="имя свойства"
|
||||
value={f.key} onChange={(e) => update(i, { key: e.target.value })}
|
||||
/>
|
||||
<button
|
||||
type="button" onClick={() => removeRow(i)} aria-label="Удалить свойство"
|
||||
className="btn-aubade inline-flex items-center justify-center p-2"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<select
|
||||
className={field} style={fieldStyle}
|
||||
value={f.type} onChange={(e) => update(i, { type: e.target.value as PropType })}
|
||||
>
|
||||
{TYPES.map((t) => <option key={t} value={t}>{TYPE_RU[t]}</option>)}
|
||||
</select>
|
||||
{f.type === "checkbox" ? (
|
||||
<select className={field} style={fieldStyle} value={f.value ?? "false"} onChange={(e) => update(i, { value: e.target.value })}>
|
||||
<option value="true">true</option>
|
||||
<option value="false">false</option>
|
||||
</select>
|
||||
) : f.type === "date" ? (
|
||||
<input
|
||||
type="date" className={field} style={fieldStyle}
|
||||
value={f.value ?? ""} onChange={(e) => update(i, { value: e.target.value })}
|
||||
/>
|
||||
) : (
|
||||
<input
|
||||
className={field} style={fieldStyle}
|
||||
placeholder={f.type === "list" || f.type === "tags" ? "через запятую" : "значение"}
|
||||
value={f.value ?? ""} onChange={(e) => update(i, { value: e.target.value })}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<button type="button" onClick={addRow} className="btn-aubade inline-flex items-center justify-center gap-2 text-sm">
|
||||
<Plus size={16} /> Добавить свойство
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<CodeOutput code={yaml} tool="frontmatter" label="YAML-frontmatter" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { FrontmatterForm } from "./FrontmatterForm";
|
||||
|
||||
export const metadata = { title: "Генератор YAML-frontmatter — Obsidian Toolbox" };
|
||||
|
||||
export default function FrontmatterToolPage() {
|
||||
return (
|
||||
<main className="mx-auto w-full max-w-5xl px-6 py-8">
|
||||
<h1 className="text-2xl font-bold tracking-wide" style={{ color: "var(--foreground)" }}>Генератор YAML-frontmatter</h1>
|
||||
<p className="mt-1 text-sm" style={{ color: "var(--muted-foreground)" }}>Шаблон свойств заметки: имя, тип, значение по умолчанию.</p>
|
||||
<div className="mt-6 card-aubade p-4">
|
||||
<FrontmatterForm />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { TOOLS } from "@/lib/tools/_shared/types";
|
||||
import { ToolCard } from "@/components/tools/ToolCard";
|
||||
|
||||
export const metadata = { title: "Инструменты — Obsidian Toolbox" };
|
||||
|
||||
export default function ToolsIndexPage() {
|
||||
return (
|
||||
<main className="mx-auto w-full max-w-5xl px-6 py-8">
|
||||
<h1 className="text-2xl font-bold tracking-wide" style={{ color: "var(--foreground)" }}>Инструменты</h1>
|
||||
<p className="mt-1 text-sm" style={{ color: "var(--muted-foreground)" }}>Генераторы синтаксиса Obsidian для участников школы.</p>
|
||||
<div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
{TOOLS.map((t) => <ToolCard key={t.id} tool={t} />)}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
"use client";
|
||||
import { useMemo, useState } from "react";
|
||||
import { Plus, Trash2 } from "lucide-react";
|
||||
import { buildStyleSettings, type SettingItem, type SettingType } from "@/lib/tools/style-settings";
|
||||
import { CodeOutput } from "@/components/tools/CodeOutput";
|
||||
|
||||
const TYPES: SettingType[] = [
|
||||
"heading", "class-toggle", "class-select",
|
||||
"variable-text", "variable-number", "variable-number-slider",
|
||||
"variable-select", "variable-color", "info-text",
|
||||
];
|
||||
|
||||
const field = "w-full p-2 text-sm";
|
||||
const fieldStyle = { border: "1px solid var(--border)", borderRadius: "2px", backgroundColor: "var(--background)", color: "var(--foreground)" } as const;
|
||||
|
||||
function hasDefault(t: SettingType) { return t !== "heading" && t !== "info-text"; }
|
||||
function hasOptions(t: SettingType) { return t === "variable-select" || t === "class-select"; }
|
||||
|
||||
export function StyleSettingsForm() {
|
||||
const [pluginName, setPluginName] = useState("Моя тема");
|
||||
const [settings, setSettings] = useState<SettingItem[]>([
|
||||
{ id: "section", title: "Цвета", type: "heading" },
|
||||
{ id: "accent", title: "Акцент", type: "variable-color", default: "#7C3AED", format: "hex" },
|
||||
]);
|
||||
|
||||
const output = useMemo(() => buildStyleSettings({ pluginName, settings }), [pluginName, settings]);
|
||||
|
||||
function update(i: number, patch: Partial<SettingItem>) {
|
||||
setSettings((prev) => prev.map((s, idx) => (idx === i ? { ...s, ...patch } : s)));
|
||||
}
|
||||
function addRow() {
|
||||
setSettings((prev) => [...prev, { id: "", title: "", type: "variable-text", default: "" }]);
|
||||
}
|
||||
function removeRow(i: number) {
|
||||
setSettings((prev) => prev.filter((_, idx) => idx !== i));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="flex flex-col gap-3">
|
||||
<label className="text-sm">Имя темы / плагина
|
||||
<input className={field} style={fieldStyle} value={pluginName} onChange={(e) => setPluginName(e.target.value)} />
|
||||
</label>
|
||||
{settings.map((s, i) => (
|
||||
<div key={i} className="flex flex-col gap-2 p-2" style={{ border: "1px solid var(--border)", borderRadius: "2px" }}>
|
||||
<div className="flex items-center gap-2">
|
||||
<input className={field} style={fieldStyle} placeholder="id" value={s.id} onChange={(e) => update(i, { id: e.target.value })} />
|
||||
<button type="button" onClick={() => removeRow(i)} aria-label="Удалить настройку" className="btn-aubade inline-flex items-center justify-center p-2">
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
<input className={field} style={fieldStyle} placeholder="заголовок" value={s.title} onChange={(e) => update(i, { title: e.target.value })} />
|
||||
<select className={field} style={fieldStyle} value={s.type} onChange={(e) => update(i, { type: e.target.value as SettingType })}>
|
||||
{TYPES.map((t) => <option key={t} value={t}>{t}</option>)}
|
||||
</select>
|
||||
{hasDefault(s.type) && (
|
||||
<input className={field} style={fieldStyle} placeholder="значение по умолчанию" value={s.default ?? ""} onChange={(e) => update(i, { default: e.target.value })} />
|
||||
)}
|
||||
{hasOptions(s.type) && (
|
||||
<input className={field} style={fieldStyle} placeholder="варианты через запятую" value={s.options ?? ""} onChange={(e) => update(i, { options: e.target.value })} />
|
||||
)}
|
||||
{s.type === "variable-color" && (
|
||||
<select className={field} style={fieldStyle} value={s.format ?? "hex"} onChange={(e) => update(i, { format: e.target.value })}>
|
||||
{["hex", "rgb", "hsl"].map((fmt) => <option key={fmt} value={fmt}>{fmt}</option>)}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<button type="button" onClick={addRow} className="btn-aubade inline-flex items-center justify-center gap-2 text-sm">
|
||||
<Plus size={16} /> Добавить настройку
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<CodeOutput code={output} tool="style-settings" label="Блок Style Settings (в начало CSS-сниппета)" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { StyleSettingsForm } from "./StyleSettingsForm";
|
||||
|
||||
export const metadata = { title: "Генератор Style Settings — Obsidian Toolbox" };
|
||||
|
||||
export default function StyleSettingsToolPage() {
|
||||
return (
|
||||
<main className="mx-auto w-full max-w-5xl px-6 py-8">
|
||||
<h1 className="text-2xl font-bold tracking-wide" style={{ color: "var(--foreground)" }}>Генератор Style Settings</h1>
|
||||
<p className="mt-1 text-sm" style={{ color: "var(--muted-foreground)" }}>Комментарии-настройки для плагина Style Settings.</p>
|
||||
<div className="mt-6 card-aubade p-4">
|
||||
<StyleSettingsForm />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
"use client";
|
||||
import { useMemo, useState } from "react";
|
||||
import { buildThemeCss, type ThemeInput } from "@/lib/tools/theme";
|
||||
import { CodeOutput } from "@/components/tools/CodeOutput";
|
||||
|
||||
const FIELDS: { key: keyof ThemeInput; label: string }[] = [
|
||||
{ key: "background", label: "Фон" },
|
||||
{ key: "text", label: "Текст" },
|
||||
{ key: "accent", label: "Акцент" },
|
||||
{ key: "link", label: "Ссылки" },
|
||||
{ key: "border", label: "Рамка" },
|
||||
];
|
||||
|
||||
const fieldStyle = { border: "1px solid var(--border)", borderRadius: "2px", backgroundColor: "var(--background)", color: "var(--foreground)" } as const;
|
||||
|
||||
export function ThemeForm() {
|
||||
const [theme, setTheme] = useState<ThemeInput>({
|
||||
background: "#0F0F0F", text: "#EAEAEA", accent: "#7C3AED", link: "#4EA1FF", border: "#333333",
|
||||
});
|
||||
|
||||
const css = useMemo(() => buildThemeCss(theme), [theme]);
|
||||
|
||||
function update(key: keyof ThemeInput, value: string) {
|
||||
setTheme((prev) => ({ ...prev, [key]: value }));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="flex flex-col gap-3">
|
||||
{FIELDS.map((f) => (
|
||||
<label key={f.key} className="flex items-center justify-between gap-3 text-sm">
|
||||
<span>{f.label}</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<input
|
||||
type="color" value={theme[f.key]} onChange={(e) => update(f.key, e.target.value)}
|
||||
aria-label={f.label} style={{ width: 36, height: 28, border: "1px solid var(--border)", borderRadius: 2, padding: 0, background: "none" }}
|
||||
/>
|
||||
<input
|
||||
className="w-28 p-2 text-sm" style={fieldStyle}
|
||||
value={theme[f.key]} onChange={(e) => update(f.key, e.target.value)}
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
<div
|
||||
className="mt-2 p-4 text-sm"
|
||||
style={{ backgroundColor: theme.background, color: theme.text, border: `2px solid ${theme.border}`, borderRadius: 2 }}
|
||||
>
|
||||
Превью темы. <a href="#" onClick={(e) => e.preventDefault()} style={{ color: theme.link }}>ссылка</a>,{" "}
|
||||
<span style={{ color: theme.accent, fontWeight: 700 }}>акцент</span>.
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<CodeOutput code={css} tool="theme" label="CSS-переменные темы" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { ThemeForm } from "./ThemeForm";
|
||||
|
||||
export const metadata = { title: "Генератор темы — Obsidian Toolbox" };
|
||||
|
||||
export default function ThemeToolPage() {
|
||||
return (
|
||||
<main className="mx-auto w-full max-w-5xl px-6 py-8">
|
||||
<h1 className="text-2xl font-bold tracking-wide" style={{ color: "var(--foreground)" }}>Генератор темы / CSS-переменных</h1>
|
||||
<p className="mt-1 text-sm" style={{ color: "var(--muted-foreground)" }}>Палитра → набор CSS-переменных темы Obsidian.</p>
|
||||
<div className="mt-6 card-aubade p-4">
|
||||
<ThemeForm />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user