feat: rebuild workshop
This commit is contained in:
42 files changed
+3436
-2
No files matched your search
@@ -82,6 +82,10 @@ Custom widgets can be exported and imported as JSON files. To export, select the
|
||||
|
||||
The import format uses `"$schema": "homarr-custom-widget-v2"` to identify the widget version.
|
||||
|
||||
## Community Workshop
|
||||
|
||||
Use **Install widget** on **Management → Workshop** to inspect and import community widgets. Use **Share in Workshop** from a widget's action menu to publish its canonical export without manually copying JSON. Secrets are never included in exports and must be configured on each Homarr instance.
|
||||
|
||||
## Available Mantine Components for Custom JSX
|
||||
|
||||
When using the `customJsx` display type, your template has access to a whitelist of [Mantine v9](https://mantine.dev) components. Unrecognized components, event handlers, and dangerous tags are stripped for security.
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
---
|
||||
tags:
|
||||
- Workshop
|
||||
- Custom Widgets
|
||||
- Custom CSS
|
||||
---
|
||||
|
||||
# Community Workshop
|
||||
|
||||
The [Workshop](pathname:///workshop) is Homarr's community catalog for custom widgets and CSS themes. You can inspect every creation before downloading it or using it in Homarr.
|
||||
|
||||
:::warning Community content
|
||||
|
||||
Workshop entries are created by community members. Review widget endpoints, templates, and CSS before using them. Keep a current Homarr backup and never add secrets to an exported widget.
|
||||
|
||||
:::
|
||||
|
||||
## Discover and install
|
||||
|
||||
In Homarr, open **Management → Workshop** to browse, search, filter, inspect, download, and install creations. The custom-widget management page and a board's custom CSS settings also provide contextual Workshop actions.
|
||||
|
||||
- Widgets are validated against `homarr-custom-widget-v2` before installation. API keys and other secrets are not included and must be configured locally.
|
||||
- CSS is loaded into the board editor for review. It is not saved until you choose **Save changes**.
|
||||
- The public website never executes submitted widget templates or CSS.
|
||||
|
||||
## Share a creation
|
||||
|
||||
Use **Share in Workshop** beside a custom widget or in a board's custom CSS settings. Sign in with GitHub, provide a public title and description, inspect the exported source, and publish it. You can also publish from the Workshop website by pasting an exported widget or CSS source.
|
||||
|
||||
Submissions are public immediately. Authors can update or delete their own submissions. Updating content increases its revision and shows the supplied changelog.
|
||||
|
||||
## Votes and reports
|
||||
|
||||
Signed-in members can vote to help useful creations rank higher. Report malicious content, spam, copyright problems, or inappropriate material from a submission's detail page. Reports are visible only to Workshop staff.
|
||||
|
||||
## Accounts and moderation
|
||||
|
||||
Workshop accounts use GitHub OAuth and are separate from users in a self-hosted Homarr instance. Workshop moderators can remove submissions, prevent an account from publishing, disable an account, and resolve reports. These actions require a reason and are recorded.
|
||||
|
||||
The Workshop is a central service operated by Homarr at `store.homarr.dev`. Running the backend locally is supported for contributors developing or testing this feature, not as a private production marketplace.
|
||||
@@ -16,6 +16,9 @@ const config: Config = {
|
||||
defaultLocale: "en",
|
||||
locales: ["en"],
|
||||
},
|
||||
customFields: {
|
||||
workshopApiUrl: process.env.NEXT_PUBLIC_WORKSHOP_API_URL ?? "https://store.homarr.dev",
|
||||
},
|
||||
onBrokenLinks: "throw",
|
||||
onBrokenAnchors: "throw",
|
||||
onDuplicateRoutes: "throw",
|
||||
@@ -124,6 +127,11 @@ const config: Config = {
|
||||
position: "left",
|
||||
to: "/blog",
|
||||
},
|
||||
{
|
||||
label: "Workshop",
|
||||
position: "left",
|
||||
to: "/workshop",
|
||||
},
|
||||
{
|
||||
label: "About us",
|
||||
position: "left",
|
||||
@@ -309,6 +317,18 @@ const config: Config = {
|
||||
},
|
||||
};
|
||||
},
|
||||
function workshopRoutesPlugin() {
|
||||
return {
|
||||
name: "workshop-routes",
|
||||
async contentLoaded({ actions }) {
|
||||
actions.addRoute({
|
||||
path: "/workshop/:id",
|
||||
component: "@site/src/components/workshop/WorkshopDetailRoutePage",
|
||||
exact: true,
|
||||
});
|
||||
},
|
||||
};
|
||||
},
|
||||
"@signalwire/docusaurus-plugin-llms-txt",
|
||||
async function tailwindCssPlugin() {
|
||||
return {
|
||||
|
||||
@@ -27,6 +27,7 @@
|
||||
"@docusaurus/plugin-sitemap": "^3.10.1",
|
||||
"@docusaurus/preset-classic": "^3.10.1",
|
||||
"@homarr/definitions": "workspace:^",
|
||||
"@homarr/workshop": "workspace:^0.1.0",
|
||||
"@mdx-js/react": "^3.1.1",
|
||||
"@nivo/line": "^0.99.0",
|
||||
"@scalar/api-reference-react": "catalog:",
|
||||
|
||||
@@ -0,0 +1,300 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
||||
|
||||
import {
|
||||
WORKSHOP_API_URL,
|
||||
WorkshopClient,
|
||||
type WorkshopAccountState,
|
||||
type WorkshopModerationAction,
|
||||
type WorkshopReport,
|
||||
type WorkshopRole,
|
||||
type WorkshopUser,
|
||||
} from "@homarr/workshop";
|
||||
|
||||
import styles from "./workshop.module.css";
|
||||
|
||||
type PendingAction =
|
||||
| { kind: "report"; id: string; status: "resolved" | "dismissed" }
|
||||
| { kind: "state"; id: string; state: WorkshopAccountState }
|
||||
| { kind: "role"; id: string; role: WorkshopRole };
|
||||
|
||||
export function WorkshopAdmin() {
|
||||
const { siteConfig } = useDocusaurusContext();
|
||||
const client = useMemo(
|
||||
() => new WorkshopClient((siteConfig.customFields?.workshopApiUrl as string | undefined) ?? WORKSHOP_API_URL),
|
||||
[siteConfig],
|
||||
);
|
||||
const [user, setUser] = useState<WorkshopUser | null>(null);
|
||||
const [reports, setReports] = useState<WorkshopReport[]>([]);
|
||||
const [users, setUsers] = useState<WorkshopUser[]>([]);
|
||||
const [actions, setActions] = useState<WorkshopModerationAction[]>([]);
|
||||
const [pending, setPending] = useState<PendingAction | null>(null);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const load = useCallback(async () => {
|
||||
const current = await client.refreshAuth();
|
||||
setUser(current);
|
||||
if (!current || (current.role !== "moderator" && current.role !== "admin")) return;
|
||||
try {
|
||||
const [nextReports, nextUsers, nextActions] = await Promise.all([
|
||||
client.listReports(),
|
||||
client.listUsers(),
|
||||
client.listModerationActions(),
|
||||
]);
|
||||
setReports(nextReports);
|
||||
setUsers(nextUsers);
|
||||
setActions(nextActions);
|
||||
} catch (caught) {
|
||||
setError(caught instanceof Error ? caught.message : "Could not load moderation data");
|
||||
}
|
||||
}, [client]);
|
||||
useEffect(() => client.subscribeToAuth(setUser), [client]);
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
if (!user)
|
||||
return (
|
||||
<main className={styles.page}>
|
||||
<h1>Workshop moderation</h1>
|
||||
<p>Sign in with a promoted GitHub account to continue.</p>
|
||||
<button
|
||||
className="button button--primary"
|
||||
onClick={async () => {
|
||||
await client.signInWithGitHub();
|
||||
await load();
|
||||
}}
|
||||
>
|
||||
Sign in with GitHub
|
||||
</button>
|
||||
</main>
|
||||
);
|
||||
if (user.role === "member")
|
||||
return (
|
||||
<main className={styles.page}>
|
||||
<h1>Workshop moderation</h1>
|
||||
<div className={styles.error} role="alert">
|
||||
Your account does not have moderation access.
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
||||
return (
|
||||
<main className={styles.page}>
|
||||
<header className={styles.hero}>
|
||||
<div>
|
||||
<h1>Workshop moderation</h1>
|
||||
<p>Review reports and apply the smallest action needed. Every action requires a reason and is recorded.</p>
|
||||
</div>
|
||||
</header>
|
||||
{error && (
|
||||
<div className={styles.error} role="alert">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
<section className={styles.adminSection}>
|
||||
<h2>Open reports</h2>
|
||||
{reports.length === 0 ? (
|
||||
<p>No open reports.</p>
|
||||
) : (
|
||||
<div className={styles.tableWrap}>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Category</th>
|
||||
<th>Submission</th>
|
||||
<th>Details</th>
|
||||
<th>Created</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{reports.map((report) => (
|
||||
<tr key={report.id}>
|
||||
<td>{report.category}</td>
|
||||
<td>{report.submission}</td>
|
||||
<td>{report.explanation}</td>
|
||||
<td>{new Date(report.created).toLocaleString()}</td>
|
||||
<td aria-label="Report actions">
|
||||
<div className={styles.rowActions}>
|
||||
<button onClick={() => setPending({ kind: "report", id: report.id, status: "resolved" })}>
|
||||
Resolve
|
||||
</button>
|
||||
<button onClick={() => setPending({ kind: "report", id: report.id, status: "dismissed" })}>
|
||||
Dismiss
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
<section className={styles.adminSection}>
|
||||
<h2>Community accounts</h2>
|
||||
<div className={styles.tableWrap}>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>User</th>
|
||||
<th>Role</th>
|
||||
<th>State</th>
|
||||
<th>Moderate</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((account) => (
|
||||
<tr key={account.id}>
|
||||
<td>{account.displayName}</td>
|
||||
<td>{account.role}</td>
|
||||
<td>{account.state}</td>
|
||||
<td>
|
||||
{account.id === user.id ? (
|
||||
"Current account"
|
||||
) : (
|
||||
<div className={styles.rowActions}>
|
||||
<button
|
||||
onClick={() =>
|
||||
setPending({
|
||||
kind: "state",
|
||||
id: account.id,
|
||||
state: account.state === "posting_banned" ? "active" : "posting_banned",
|
||||
})
|
||||
}
|
||||
>
|
||||
{account.state === "posting_banned" ? "Lift posting ban" : "Posting ban"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() =>
|
||||
setPending({
|
||||
kind: "state",
|
||||
id: account.id,
|
||||
state: account.state === "disabled" ? "active" : "disabled",
|
||||
})
|
||||
}
|
||||
>
|
||||
{account.state === "disabled" ? "Restore" : "Disable"}
|
||||
</button>
|
||||
{user.role === "admin" && (
|
||||
<button
|
||||
onClick={() =>
|
||||
setPending({
|
||||
kind: "role",
|
||||
id: account.id,
|
||||
role: account.role === "member" ? "moderator" : "member",
|
||||
})
|
||||
}
|
||||
>
|
||||
{account.role === "member" ? "Promote" : "Set member"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<section className={styles.adminSection}>
|
||||
<h2>Recent actions</h2>
|
||||
<div className={styles.tableWrap}>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Action</th>
|
||||
<th>Target</th>
|
||||
<th>Reason</th>
|
||||
<th>Created</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{actions.map((action) => (
|
||||
<tr key={action.id}>
|
||||
<td>{action.action}</td>
|
||||
<td>
|
||||
{action.targetType}:{action.targetId}
|
||||
</td>
|
||||
<td>{action.reason}</td>
|
||||
<td>{new Date(action.created).toLocaleString()}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
{pending && (
|
||||
<ReasonDialog
|
||||
action={pending}
|
||||
onClose={() => setPending(null)}
|
||||
onConfirm={async (reason) => {
|
||||
if (pending.kind === "report") await client.resolveReport(pending.id, pending.status, reason);
|
||||
else if (pending.kind === "state") await client.updateAccountState(pending.id, pending.state, reason);
|
||||
else await client.updateRole(pending.id, pending.role, reason);
|
||||
setPending(null);
|
||||
await load();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
function ReasonDialog({
|
||||
action,
|
||||
onClose,
|
||||
onConfirm,
|
||||
}: {
|
||||
action: PendingAction;
|
||||
onClose: () => void;
|
||||
onConfirm: (reason: string) => Promise<void>;
|
||||
}) {
|
||||
const [reason, setReason] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [saving, setSaving] = useState(false);
|
||||
return (
|
||||
<div className={styles.overlay}>
|
||||
<dialog className={styles.dialog} open aria-labelledby="moderation-reason-title">
|
||||
<h2 id="moderation-reason-title">Confirm moderation action</h2>
|
||||
<p>
|
||||
This will apply <strong>{action.kind}</strong> to the selected record.
|
||||
</p>
|
||||
<form
|
||||
onSubmit={async (event) => {
|
||||
event.preventDefault();
|
||||
setSaving(true);
|
||||
try {
|
||||
await onConfirm(reason);
|
||||
} catch (caught) {
|
||||
setError(caught instanceof Error ? caught.message : "Action failed");
|
||||
setSaving(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<label>
|
||||
Reason
|
||||
<textarea
|
||||
required
|
||||
minLength={3}
|
||||
maxLength={1000}
|
||||
value={reason}
|
||||
onChange={(event) => setReason(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
{error && <p className={styles.error}>{error}</p>}
|
||||
<div className={styles.formActions}>
|
||||
<button type="button" className="button button--secondary" onClick={onClose}>
|
||||
Cancel
|
||||
</button>
|
||||
<button disabled={saving} className="button button--danger">
|
||||
{saving ? "Applying…" : "Apply action"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import React from "react";
|
||||
import BrowserOnly from "@docusaurus/BrowserOnly";
|
||||
import Layout from "@theme/Layout";
|
||||
|
||||
export default function WorkshopDetailRoutePage() {
|
||||
return (
|
||||
<Layout title="Workshop submission">
|
||||
<BrowserOnly fallback={<main style={{ minHeight: "70vh" }} />}>
|
||||
{() => {
|
||||
const { WorkshopDetailRoute } = require("./WorkshopPage");
|
||||
return <WorkshopDetailRoute />;
|
||||
}}
|
||||
</BrowserOnly>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,668 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import Link from "@docusaurus/Link";
|
||||
import { useHistory, useLocation } from "@docusaurus/router";
|
||||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
||||
import {
|
||||
IconAlertTriangle,
|
||||
IconBrandGithub,
|
||||
IconCopy,
|
||||
IconDownload,
|
||||
IconFlag,
|
||||
IconSearch,
|
||||
IconUpload,
|
||||
} from "@tabler/icons-react";
|
||||
|
||||
import {
|
||||
WORKSHOP_API_URL,
|
||||
WorkshopClient,
|
||||
type WorkshopSubmissionDetail,
|
||||
type WorkshopSubmissionInput,
|
||||
type WorkshopSubmissionSummary,
|
||||
type WorkshopSubmissionType,
|
||||
type WorkshopUser,
|
||||
workshopExportFilename,
|
||||
} from "@homarr/workshop";
|
||||
|
||||
import styles from "./workshop.module.css";
|
||||
|
||||
const useWorkshop = () => {
|
||||
const { siteConfig } = useDocusaurusContext();
|
||||
const apiUrl = (siteConfig.customFields?.workshopApiUrl as string | undefined) ?? WORKSHOP_API_URL;
|
||||
return useMemo(() => new WorkshopClient(apiUrl), [apiUrl]);
|
||||
};
|
||||
|
||||
const saveContent = (submission: WorkshopSubmissionDetail) => {
|
||||
const url = URL.createObjectURL(
|
||||
new Blob([submission.content], { type: submission.type === "css" ? "text/css" : "application/json" }),
|
||||
);
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = workshopExportFilename(submission.title, submission.type);
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
export function WorkshopApp() {
|
||||
const client = useWorkshop();
|
||||
const [user, setUser] = useState<WorkshopUser | null>(null);
|
||||
const [items, setItems] = useState<WorkshopSubmissionSummary[]>([]);
|
||||
const [page, setPage] = useState(1);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const [type, setType] = useState<WorkshopSubmissionType | "all">("all");
|
||||
const [sort, setSort] = useState<"top" | "newest">("top");
|
||||
const [search, setSearch] = useState("");
|
||||
const [mine, setMine] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
|
||||
useEffect(() => client.subscribeToAuth(setUser), [client]);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
await client.refreshAuth();
|
||||
const result = await client.list({ page, type, sort, search, author: mine ? client.currentUser?.id : undefined });
|
||||
setItems(result.items);
|
||||
setTotalPages(result.totalPages);
|
||||
} catch (caught) {
|
||||
setError(caught instanceof Error ? caught.message : "Workshop is unavailable");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [client, mine, page, search, sort, type]);
|
||||
|
||||
useEffect(() => {
|
||||
const timeout = window.setTimeout(() => void load(), 250);
|
||||
return () => window.clearTimeout(timeout);
|
||||
}, [load]);
|
||||
|
||||
const signIn = async () => {
|
||||
try {
|
||||
await client.signInWithGitHub();
|
||||
await load();
|
||||
} catch (caught) {
|
||||
setError(caught instanceof Error ? caught.message : "Sign-in failed");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<main className={styles.page}>
|
||||
<header className={styles.hero}>
|
||||
<div>
|
||||
<h1>Workshop</h1>
|
||||
<p>Community widgets and CSS themes, ready to inspect and use in Homarr.</p>
|
||||
</div>
|
||||
<div className={styles.accountActions}>
|
||||
{user ? (
|
||||
<>
|
||||
{(user.role === "moderator" || user.role === "admin") && (
|
||||
<Link className="button button--secondary" to="/workshop/admin">
|
||||
Moderate
|
||||
</Link>
|
||||
)}
|
||||
<button className="button button--primary" onClick={() => setShowForm(true)}>
|
||||
<IconUpload size={17} /> Share creation
|
||||
</button>
|
||||
<button className="button button--secondary" onClick={() => client.signOut()}>
|
||||
Sign out
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<button className="button button--primary" onClick={() => void signIn()}>
|
||||
<IconBrandGithub size={18} /> Sign in with GitHub
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className={styles.safety} aria-label="Community content warning">
|
||||
<IconAlertTriangle aria-hidden size={20} />
|
||||
<p>
|
||||
Workshop content is community-provided. Inspect source before installing it and keep a current Homarr backup.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div className={styles.toolbar}>
|
||||
<label className={styles.search}>
|
||||
<span className="sr-only">Search Workshop</span>
|
||||
<IconSearch aria-hidden size={18} />
|
||||
<input
|
||||
value={search}
|
||||
onChange={(event) => {
|
||||
setSearch(event.target.value);
|
||||
setPage(1);
|
||||
}}
|
||||
placeholder="Search creations"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Type
|
||||
<select
|
||||
value={type}
|
||||
onChange={(event) => {
|
||||
setType(event.target.value as typeof type);
|
||||
setPage(1);
|
||||
}}
|
||||
>
|
||||
<option value="all">All</option>
|
||||
<option value="widget">Widgets</option>
|
||||
<option value="css">CSS themes</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Sort
|
||||
<select
|
||||
value={sort}
|
||||
onChange={(event) => {
|
||||
setSort(event.target.value as typeof sort);
|
||||
setPage(1);
|
||||
}}
|
||||
>
|
||||
<option value="top">Top rated</option>
|
||||
<option value="newest">Newest</option>
|
||||
</select>
|
||||
</label>
|
||||
{user && (
|
||||
<label className={styles.checkbox}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mine}
|
||||
onChange={(event) => {
|
||||
setMine(event.target.checked);
|
||||
setPage(1);
|
||||
}}
|
||||
/>{" "}
|
||||
My submissions
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className={styles.error} role="alert">
|
||||
{error} <button onClick={() => void load()}>Try again</button>
|
||||
</div>
|
||||
)}
|
||||
{loading ? (
|
||||
<WorkshopSkeleton />
|
||||
) : items.length ? (
|
||||
<div className={styles.grid}>
|
||||
{items.map((item) => (
|
||||
<WorkshopCard client={client} item={item} key={item.id} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<section className={styles.empty}>
|
||||
<h2>No creations found</h2>
|
||||
<p>Adjust the filters, or share the first creation in this category.</p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{totalPages > 1 && (
|
||||
<nav className={styles.pagination} aria-label="Workshop pages">
|
||||
<button disabled={page === 1} onClick={() => setPage((value) => value - 1)}>
|
||||
Previous
|
||||
</button>
|
||||
<span>
|
||||
Page {page} of {totalPages}
|
||||
</span>
|
||||
<button disabled={page === totalPages} onClick={() => setPage((value) => value + 1)}>
|
||||
Next
|
||||
</button>
|
||||
</nav>
|
||||
)}
|
||||
{showForm && (
|
||||
<SubmissionForm
|
||||
client={client}
|
||||
onClose={() => setShowForm(false)}
|
||||
onSaved={async () => {
|
||||
setShowForm(false);
|
||||
await load();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
function WorkshopCard({ client, item }: { client: WorkshopClient; item: WorkshopSubmissionSummary }) {
|
||||
const image = item.screenshots[0];
|
||||
return (
|
||||
<article className={styles.card}>
|
||||
{image ? (
|
||||
<img src={client.fileUrl(item.id, image, "480x320")} alt="" loading="lazy" />
|
||||
) : (
|
||||
<div className={styles.cardPlaceholder} aria-hidden>
|
||||
{item.type === "widget" ? "{}" : "CSS"}
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.cardBody}>
|
||||
<div className={styles.cardMeta}>
|
||||
<span>{item.type === "widget" ? "Widget" : "CSS theme"}</span>
|
||||
<span>
|
||||
{item.score >= 0 ? "+" : ""}
|
||||
{item.score}
|
||||
</span>
|
||||
</div>
|
||||
<h2>
|
||||
<Link to={`/workshop/${item.id}`}>{item.title}</Link>
|
||||
</h2>
|
||||
<p>{item.description || "No description provided."}</p>
|
||||
<small>
|
||||
By {item.authorName} · revision {item.revision}
|
||||
</small>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
export function WorkshopDetailRoute() {
|
||||
const client = useWorkshop();
|
||||
const location = useLocation();
|
||||
const id = location.pathname.split("/").filter(Boolean).at(-1) ?? "";
|
||||
const history = useHistory();
|
||||
const [user, setUser] = useState<WorkshopUser | null>(null);
|
||||
const [submission, setSubmission] = useState<WorkshopSubmissionDetail | null>(null);
|
||||
const [error, setError] = useState("");
|
||||
const [reporting, setReporting] = useState(false);
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [moderating, setModerating] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
setSubmission(await client.get(id));
|
||||
} catch (caught) {
|
||||
setError(caught instanceof Error ? caught.message : "Submission not found");
|
||||
}
|
||||
}, [client, id]);
|
||||
useEffect(() => client.subscribeToAuth(setUser), [client]);
|
||||
useEffect(() => {
|
||||
void client.refreshAuth();
|
||||
void load();
|
||||
}, [client, load]);
|
||||
|
||||
if (error)
|
||||
return (
|
||||
<main className={styles.page}>
|
||||
<div className={styles.error} role="alert">
|
||||
{error}
|
||||
</div>
|
||||
<Link to="/workshop">Back to Workshop</Link>
|
||||
</main>
|
||||
);
|
||||
if (!submission) return <WorkshopSkeleton />;
|
||||
|
||||
const requireAuth = async () => client.currentUser ?? client.signInWithGitHub();
|
||||
return (
|
||||
<main className={styles.page}>
|
||||
<Link to="/workshop">← Back to Workshop</Link>
|
||||
<article className={styles.detail}>
|
||||
<header>
|
||||
<span className={styles.type}>{submission.type === "widget" ? "Widget" : "CSS theme"}</span>
|
||||
<h1>{submission.title}</h1>
|
||||
<p>{submission.description}</p>
|
||||
<small>
|
||||
By {submission.authorName} · revision {submission.revision}
|
||||
</small>
|
||||
</header>
|
||||
{submission.screenshots.length > 0 && (
|
||||
<div className={styles.gallery}>
|
||||
{submission.screenshots.map((image, index) => (
|
||||
<img
|
||||
key={image}
|
||||
src={client.fileUrl(submission.id, image, "960x640")}
|
||||
alt={`${submission.title} screenshot ${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.detailActions}>
|
||||
<button className="button button--primary" onClick={() => saveContent(submission)}>
|
||||
<IconDownload size={17} /> Download {submission.type === "widget" ? "JSON" : "CSS"}
|
||||
</button>
|
||||
<button
|
||||
className="button button--secondary"
|
||||
onClick={() => void navigator.clipboard.writeText(submission.content)}
|
||||
>
|
||||
<IconCopy size={17} /> Copy source
|
||||
</button>
|
||||
<button
|
||||
className="button button--secondary"
|
||||
onClick={async () => {
|
||||
await requireAuth();
|
||||
await client.vote(submission.id, 1);
|
||||
await load();
|
||||
}}
|
||||
>
|
||||
Upvote ({submission.upvotes})
|
||||
</button>
|
||||
<button className="button button--secondary" onClick={() => setReporting(true)}>
|
||||
<IconFlag size={16} /> Report
|
||||
</button>
|
||||
{user?.id === submission.author && (
|
||||
<>
|
||||
<button className="button button--secondary" onClick={() => setEditing(true)}>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
className="button button--danger"
|
||||
onClick={async () => {
|
||||
if (window.confirm("Delete this submission permanently?")) {
|
||||
await client.delete(submission.id);
|
||||
history.push("/workshop");
|
||||
}
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{(user?.role === "moderator" || user?.role === "admin") && user.id !== submission.author && (
|
||||
<button className="button button--danger" onClick={() => setModerating(true)}>
|
||||
Remove submission
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<section>
|
||||
<h2>Source</h2>
|
||||
<p className={styles.sourceHint}>
|
||||
Review this content before using it. Workshop content is never executed on homarr.dev.
|
||||
</p>
|
||||
<pre className={styles.source}>
|
||||
<code>{submission.content}</code>
|
||||
</pre>
|
||||
</section>
|
||||
{submission.changelog && (
|
||||
<section>
|
||||
<h2>Latest changes</h2>
|
||||
<p>{submission.changelog}</p>
|
||||
</section>
|
||||
)}
|
||||
</article>
|
||||
{reporting && <ReportForm client={client} submissionId={submission.id} onClose={() => setReporting(false)} />}
|
||||
{editing && (
|
||||
<SubmissionForm
|
||||
client={client}
|
||||
existing={submission}
|
||||
onClose={() => setEditing(false)}
|
||||
onSaved={async () => {
|
||||
setEditing(false);
|
||||
await load();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{moderating && (
|
||||
<ModerationRemovalForm
|
||||
client={client}
|
||||
submission={submission}
|
||||
onClose={() => setModerating(false)}
|
||||
onRemoved={() => history.push("/workshop/admin")}
|
||||
/>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
function ModerationRemovalForm({
|
||||
client,
|
||||
submission,
|
||||
onClose,
|
||||
onRemoved,
|
||||
}: {
|
||||
client: WorkshopClient;
|
||||
submission: WorkshopSubmissionDetail;
|
||||
onClose: () => void;
|
||||
onRemoved: () => void;
|
||||
}) {
|
||||
const [reason, setReason] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [pending, setPending] = useState(false);
|
||||
return (
|
||||
<div className={styles.overlay}>
|
||||
<dialog className={styles.dialog} open aria-labelledby="remove-submission-title">
|
||||
<h2 id="remove-submission-title">Remove {submission.title}</h2>
|
||||
<p>
|
||||
This permanently deletes the submission, files, votes, and reports. A metadata snapshot is retained in
|
||||
moderation history.
|
||||
</p>
|
||||
<form
|
||||
onSubmit={async (event) => {
|
||||
event.preventDefault();
|
||||
setPending(true);
|
||||
try {
|
||||
await client.removeSubmission(submission.id, reason);
|
||||
onRemoved();
|
||||
} catch (caught) {
|
||||
setError(caught instanceof Error ? caught.message : "Removal failed");
|
||||
setPending(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<label>
|
||||
Reason
|
||||
<textarea
|
||||
required
|
||||
minLength={3}
|
||||
maxLength={1000}
|
||||
value={reason}
|
||||
onChange={(event) => setReason(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
{error && <p className={styles.error}>{error}</p>}
|
||||
<div className={styles.formActions}>
|
||||
<button type="button" className="button button--secondary" onClick={onClose}>
|
||||
Cancel
|
||||
</button>
|
||||
<button disabled={pending} className="button button--danger">
|
||||
{pending ? "Removing…" : "Remove permanently"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SubmissionForm({
|
||||
client,
|
||||
existing,
|
||||
onClose,
|
||||
onSaved,
|
||||
}: {
|
||||
client: WorkshopClient;
|
||||
existing?: WorkshopSubmissionDetail;
|
||||
onClose: () => void;
|
||||
onSaved: () => void;
|
||||
}) {
|
||||
const [type, setType] = useState<WorkshopSubmissionType>(existing?.type ?? "widget");
|
||||
const [title, setTitle] = useState(existing?.title ?? "");
|
||||
const [description, setDescription] = useState(existing?.description ?? "");
|
||||
const [content, setContent] = useState(existing?.content ?? "");
|
||||
const [changelog, setChangelog] = useState(existing?.changelog ?? "");
|
||||
const [screenshots, setScreenshots] = useState<File[]>([]);
|
||||
const [removedScreenshots, setRemovedScreenshots] = useState<string[]>([]);
|
||||
const [error, setError] = useState("");
|
||||
const [pending, setPending] = useState(false);
|
||||
const submit = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
setPending(true);
|
||||
setError("");
|
||||
const input: WorkshopSubmissionInput = { type, title, description, content, changelog };
|
||||
try {
|
||||
if (!client.currentUser) await client.signInWithGitHub();
|
||||
if (existing) {
|
||||
await client.update(existing.id, input, screenshots, removedScreenshots);
|
||||
} else {
|
||||
await client.create(input, screenshots);
|
||||
}
|
||||
await onSaved();
|
||||
} catch (caught) {
|
||||
setError(caught instanceof Error ? caught.message : "Could not save submission");
|
||||
} finally {
|
||||
setPending(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div
|
||||
className={styles.overlay}
|
||||
role="presentation"
|
||||
onMouseDown={(event) => {
|
||||
if (event.target === event.currentTarget) onClose();
|
||||
}}
|
||||
>
|
||||
<dialog className={styles.dialog} open aria-labelledby="submission-form-title">
|
||||
<h2 id="submission-form-title">{existing ? "Update creation" : "Share with the community"}</h2>
|
||||
<form onSubmit={(event) => void submit(event)}>
|
||||
<label>
|
||||
Type
|
||||
<select
|
||||
disabled={Boolean(existing)}
|
||||
value={type}
|
||||
onChange={(event) => setType(event.target.value as WorkshopSubmissionType)}
|
||||
>
|
||||
<option value="widget">Custom widget</option>
|
||||
<option value="css">CSS theme</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Title
|
||||
<input
|
||||
required
|
||||
minLength={3}
|
||||
maxLength={100}
|
||||
value={title}
|
||||
onChange={(event) => setTitle(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Description
|
||||
<textarea maxLength={2000} value={description} onChange={(event) => setDescription(event.target.value)} />
|
||||
</label>
|
||||
<label>
|
||||
{type === "widget" ? "Widget JSON" : "CSS source"}
|
||||
<textarea
|
||||
className={styles.editor}
|
||||
required
|
||||
value={content}
|
||||
onChange={(event) => setContent(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Changelog
|
||||
<textarea maxLength={2000} value={changelog} onChange={(event) => setChangelog(event.target.value)} />
|
||||
</label>
|
||||
<label>
|
||||
Screenshots (PNG, JPG, or WebP, up to 5)
|
||||
<input
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/webp"
|
||||
multiple
|
||||
onChange={(event) => setScreenshots(Array.from(event.target.files ?? []).slice(0, 5))}
|
||||
/>
|
||||
</label>
|
||||
{existing?.screenshots.map((screenshot) => (
|
||||
<label className={styles.checkbox} key={screenshot}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={removedScreenshots.includes(screenshot)}
|
||||
onChange={(event) =>
|
||||
setRemovedScreenshots((current) =>
|
||||
event.target.checked
|
||||
? [...current, screenshot]
|
||||
: current.filter((filename) => filename !== screenshot),
|
||||
)
|
||||
}
|
||||
/>
|
||||
Remove existing screenshot {screenshot}
|
||||
</label>
|
||||
))}
|
||||
{error && (
|
||||
<p className={styles.error} role="alert">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
<div className={styles.formActions}>
|
||||
<button type="button" className="button button--secondary" onClick={onClose}>
|
||||
Cancel
|
||||
</button>
|
||||
<button disabled={pending} className="button button--primary">
|
||||
{pending ? "Saving…" : existing ? "Save update" : "Publish creation"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ReportForm({
|
||||
client,
|
||||
submissionId,
|
||||
onClose,
|
||||
}: {
|
||||
client: WorkshopClient;
|
||||
submissionId: string;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const [category, setCategory] = useState<"malicious" | "spam" | "copyright" | "inappropriate" | "other">("malicious");
|
||||
const [explanation, setExplanation] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
return (
|
||||
<div className={styles.overlay}>
|
||||
<dialog className={styles.dialog} open aria-labelledby="report-title">
|
||||
<h2 id="report-title">Report submission</h2>
|
||||
<form
|
||||
onSubmit={async (event) => {
|
||||
event.preventDefault();
|
||||
try {
|
||||
if (!client.currentUser) await client.signInWithGitHub();
|
||||
await client.report(submissionId, category, explanation);
|
||||
onClose();
|
||||
} catch (caught) {
|
||||
setError(caught instanceof Error ? caught.message : "Could not send report");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<label>
|
||||
Reason
|
||||
<select value={category} onChange={(event) => setCategory(event.target.value as typeof category)}>
|
||||
<option value="malicious">Malicious</option>
|
||||
<option value="spam">Spam</option>
|
||||
<option value="copyright">Copyright</option>
|
||||
<option value="inappropriate">Inappropriate</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Details
|
||||
<textarea
|
||||
required
|
||||
minLength={3}
|
||||
maxLength={1000}
|
||||
value={explanation}
|
||||
onChange={(event) => setExplanation(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
{error && <p className={styles.error}>{error}</p>}
|
||||
<div className={styles.formActions}>
|
||||
<button type="button" className="button button--secondary" onClick={onClose}>
|
||||
Cancel
|
||||
</button>
|
||||
<button className="button button--primary">Submit report</button>
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function WorkshopSkeleton() {
|
||||
return (
|
||||
<div className={styles.grid} aria-label="Loading Workshop">
|
||||
{Array.from({ length: 6 }, (_, index) => (
|
||||
<div className={styles.skeleton} key={index} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,299 @@
|
||||
.page {
|
||||
max-width: 1240px;
|
||||
min-height: 70vh;
|
||||
margin: 0 auto;
|
||||
padding: 2.5rem 1.25rem 5rem;
|
||||
}
|
||||
.hero {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.hero h1,
|
||||
.detail h1 {
|
||||
margin: 0;
|
||||
font-size: 2.25rem;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
.hero p {
|
||||
max-width: 65ch;
|
||||
margin: 0.5rem 0 0;
|
||||
color: var(--ifm-color-emphasis-700);
|
||||
}
|
||||
.accountActions,
|
||||
.detailActions,
|
||||
.formActions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.accountActions :global(.button),
|
||||
.detailActions :global(.button) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.safety {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
padding: 0.85rem 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border: 1px solid var(--ifm-color-warning-dark);
|
||||
border-radius: 10px;
|
||||
background: color-mix(in srgb, var(--ifm-color-warning) 10%, transparent);
|
||||
}
|
||||
.safety p {
|
||||
margin: 0;
|
||||
}
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border: 1px solid var(--ifm-color-emphasis-300);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.toolbar label,
|
||||
.dialog label {
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.toolbar input,
|
||||
.toolbar select,
|
||||
.dialog input,
|
||||
.dialog select,
|
||||
.dialog textarea {
|
||||
min-height: 44px;
|
||||
padding: 0.55rem 0.7rem;
|
||||
border: 1px solid var(--ifm-color-emphasis-400);
|
||||
border-radius: 7px;
|
||||
color: var(--ifm-font-color-base);
|
||||
background: var(--ifm-background-surface-color);
|
||||
font: inherit;
|
||||
}
|
||||
.search {
|
||||
position: relative;
|
||||
flex: 1 1 280px;
|
||||
}
|
||||
.search svg {
|
||||
position: absolute;
|
||||
left: 0.75rem;
|
||||
bottom: 0.8rem;
|
||||
color: var(--ifm-color-emphasis-600);
|
||||
}
|
||||
.search input {
|
||||
width: 100%;
|
||||
padding-left: 2.25rem;
|
||||
}
|
||||
.checkbox {
|
||||
display: flex !important;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
}
|
||||
.checkbox input {
|
||||
min-height: auto;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
.card {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--ifm-color-emphasis-300);
|
||||
border-radius: 12px;
|
||||
background: var(--ifm-background-surface-color);
|
||||
}
|
||||
.card img,
|
||||
.cardPlaceholder {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
.cardPlaceholder {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: var(--ifm-color-emphasis-100);
|
||||
color: var(--ifm-color-emphasis-600);
|
||||
font: 700 1.5rem var(--ifm-font-family-monospace);
|
||||
}
|
||||
.cardBody {
|
||||
padding: 1rem;
|
||||
}
|
||||
.cardBody h2 {
|
||||
margin: 0.4rem 0;
|
||||
font-size: 1.08rem;
|
||||
}
|
||||
.cardBody p {
|
||||
min-height: 2.7em;
|
||||
margin: 0 0 0.65rem;
|
||||
color: var(--ifm-color-emphasis-700);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.cardMeta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: var(--ifm-color-emphasis-700);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.error {
|
||||
padding: 0.85rem 1rem;
|
||||
margin: 1rem 0;
|
||||
border-radius: 8px;
|
||||
color: var(--ifm-color-danger-contrast-foreground);
|
||||
background: var(--ifm-color-danger-contrast-background);
|
||||
}
|
||||
.empty {
|
||||
padding: 4rem 1rem;
|
||||
text-align: center;
|
||||
border: 1px dashed var(--ifm-color-emphasis-400);
|
||||
border-radius: 12px;
|
||||
}
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.pagination button {
|
||||
min-height: 44px;
|
||||
padding: 0.5rem 0.8rem;
|
||||
}
|
||||
.skeleton {
|
||||
min-height: 310px;
|
||||
border-radius: 12px;
|
||||
background: var(--ifm-color-emphasis-200);
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
.detail {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.detail header {
|
||||
max-width: 75ch;
|
||||
}
|
||||
.type {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--ifm-color-primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
.gallery {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
overflow-x: auto;
|
||||
margin: 1.5rem 0;
|
||||
scroll-snap-type: x mandatory;
|
||||
}
|
||||
.gallery img {
|
||||
width: min(720px, 85vw);
|
||||
max-height: 480px;
|
||||
object-fit: contain;
|
||||
border-radius: 10px;
|
||||
background: var(--ifm-color-emphasis-100);
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
.detailActions {
|
||||
margin: 1.5rem 0 2rem;
|
||||
}
|
||||
.sourceHint {
|
||||
color: var(--ifm-color-emphasis-700);
|
||||
}
|
||||
.source {
|
||||
max-height: 560px;
|
||||
overflow: auto;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
.overlay {
|
||||
position: fixed;
|
||||
z-index: 500;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 1rem;
|
||||
background: rgb(0 0 0 / 0.7);
|
||||
}
|
||||
.dialog {
|
||||
width: min(680px, 100%);
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
padding: 1.25rem;
|
||||
border-radius: 12px;
|
||||
background: var(--ifm-background-color);
|
||||
}
|
||||
.dialog form {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
.dialog textarea {
|
||||
min-height: 88px;
|
||||
resize: vertical;
|
||||
}
|
||||
.dialog .editor {
|
||||
min-height: 240px;
|
||||
font-family: var(--ifm-font-family-monospace);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
.formActions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
@keyframes pulse {
|
||||
50% {
|
||||
opacity: 0.55;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.hero {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
.accountActions > * {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
.toolbar > label {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.skeleton {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
.adminSection {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.tableWrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.tableWrap table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.tableWrap th,
|
||||
.tableWrap td {
|
||||
padding: 0.7rem;
|
||||
border-bottom: 1px solid var(--ifm-color-emphasis-300);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
.rowActions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.rowActions button {
|
||||
min-height: 36px;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import React from "react";
|
||||
import BrowserOnly from "@docusaurus/BrowserOnly";
|
||||
import Layout from "@theme/Layout";
|
||||
|
||||
export default function WorkshopAdminPage() {
|
||||
return (
|
||||
<Layout title="Workshop moderation" noFooter>
|
||||
<BrowserOnly fallback={<main style={{ minHeight: "70vh" }} />}>
|
||||
{() => {
|
||||
const { WorkshopAdmin } = require("@site/src/components/workshop/WorkshopAdmin");
|
||||
return <WorkshopAdmin />;
|
||||
}}
|
||||
</BrowserOnly>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import React from "react";
|
||||
import BrowserOnly from "@docusaurus/BrowserOnly";
|
||||
import Layout from "@theme/Layout";
|
||||
|
||||
export default function WorkshopPage() {
|
||||
return (
|
||||
<Layout title="Workshop" description="Community widgets and CSS themes for Homarr">
|
||||
<BrowserOnly fallback={<main style={{ minHeight: "70vh" }} />}>
|
||||
{() => {
|
||||
const { WorkshopApp } = require("@site/src/components/workshop/WorkshopPage");
|
||||
return <WorkshopApp />;
|
||||
}}
|
||||
</BrowserOnly>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user