docs: improve Fumadocs search and AI integration
This commit is contained in:
ajnart committed
1 parent
6704ef2c13
commit
16ba3c6977
33 files changed
+1354
-280
No files matched your search
@@ -37,6 +37,10 @@ jobs:
|
||||
run: pnpm turbo build --filter=@homarr/docs
|
||||
env:
|
||||
CI: "true"
|
||||
- name: Validate exported links and search
|
||||
run: |
|
||||
pnpm --filter @homarr/docs validate:links
|
||||
pnpm --filter @homarr/docs verify:search
|
||||
- name: Setup Pages
|
||||
uses: actions/configure-pages@v6
|
||||
- name: Upload pages artifact
|
||||
|
||||
@@ -32,7 +32,7 @@ jobs:
|
||||
- name: Commit updated spec
|
||||
uses: EndBug/add-and-commit@v10
|
||||
with:
|
||||
add: "apps/docs/static/api/"
|
||||
add: "apps/docs/public/api/"
|
||||
default_author: github_actor
|
||||
message: "chore(docs): update OpenAPI spec"
|
||||
push: true
|
||||
@@ -7,3 +7,12 @@ This version has breaking changes — APIs, conventions, and file structure may
|
||||
This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
|
||||
|
||||
<!-- END:nextjs-agent-rules -->
|
||||
|
||||
## Fumadocs workflow
|
||||
|
||||
- Start with `README.md`, `src/lib/source.ts`, `source.config.ts`, and the matching route under `src/app/`.
|
||||
- Read current [Fumadocs documentation](https://fumadocs.dev/docs) with Context7 before changing framework APIs. Check the installed version and types; latest examples may use a different search adapter.
|
||||
- Preserve static export: search uses `staticGET` with the matching static client. Do not introduce a request-time search server into this app.
|
||||
- Keep integration/widget metadata in the existing typed definitions. Check both rendered HTML and processed Markdown when changing MDX components; JSX alone does not guarantee readable search or AI output.
|
||||
- Run the README validation commands after content or navigation changes. Search results and table-of-contents links must resolve to rendered anchors.
|
||||
- Kapa is an independent hosted assistant. Keep its keyboard shortcut disabled so it does not override docs search; follow the README for its build configuration and crawler setup.
|
||||
+27
-2
@@ -22,10 +22,12 @@ WORKSHOP_API_URL=http://127.0.0.1:8090 pnpm dev:docs
|
||||
pnpm --filter @homarr/docs typecheck
|
||||
pnpm --filter @homarr/docs build
|
||||
pnpm --filter @homarr/docs validate:links
|
||||
pnpm --filter @homarr/docs verify:search
|
||||
```
|
||||
|
||||
The static export is written to `out/`. The build validates that every registered integration and widget has a docs
|
||||
page. The link check validates internal Markdown and MDX links against that export.
|
||||
page. The link check validates internal Markdown and MDX links and rendered anchors against that export.
|
||||
The search check exercises the exported index with title, heading, and body queries and verifies result destinations.
|
||||
|
||||
## Write content
|
||||
|
||||
@@ -49,4 +51,27 @@ When a user-facing change affects setup or behavior, update the matching page in
|
||||
- `/blog/rss.xml` — RSS feed for project posts
|
||||
|
||||
Every docs page and blog post includes copy-Markdown and view-source actions. Search is generated at build time and
|
||||
runs locally in the browser; it does not depend on an external crawler.
|
||||
runs locally in the browser; it does not depend on an external crawler. Markdown exports and search resolve
|
||||
integration credentials and widget defaults from the same typed metadata used by the pages.
|
||||
|
||||
## Kapa AI
|
||||
|
||||
The **Ask AI** launcher uses Homarr's existing public Kapa Website ID. The root layout loads the widget once across
|
||||
client-side navigation. **Search** and `Ctrl+K` / `Cmd+K` always use Fumadocs search, including when Kapa is unavailable.
|
||||
|
||||
Set `KAPA_WEBSITE_ID` at build time to use a different Kapa Website Widget integration. An explicitly empty value
|
||||
disables the widget, for example `KAPA_WEBSITE_ID= pnpm --filter @homarr/docs build`. This is a public integration ID
|
||||
included in exported pages, not a Kapa API key. Rebuild the static export after changing it.
|
||||
|
||||
In the Kapa dashboard, confirm the integration is live and enable the production and preview domains. Restoring the
|
||||
script does not verify that the historical integration is still active. Follow the
|
||||
[Kapa widget setup](https://docs.kapa.ai/integrations/website-widget/quickstart) for domain restrictions and CSP settings.
|
||||
|
||||
After changing the documentation structure, review the Website Crawl source in Kapa: use the deployed `/docs` URL as
|
||||
the start URL and preview `main` as the content selector. Replace any old Docusaurus-specific selector and check that
|
||||
titles, headings, code samples, and integration details appear in the extracted Markdown. Docs are exported as HTML;
|
||||
the site also publishes `/sitemap.xml` and permits crawling in `/robots.txt`. The `/llms.txt` exports do not configure
|
||||
Kapa ingestion automatically. See [Kapa source setup](https://docs.kapa.ai/getting-started/index-your-first-source).
|
||||
|
||||
Before publishing, check that Ask AI opens after navigating between pages, ask a documentation question, and verify
|
||||
its citations point to the current docs. In a separate check, block `widget.kapa.ai` and confirm search still works.
|
||||
@@ -22,7 +22,7 @@ Plan to recreate your apps, integrations, and boards manually in the new install
|
||||
|
||||
We highly recommend to create a parallel installation of Homarr 1.0.0.
|
||||
So if something with for example the import does not quite work, the data in the old installation is still available.
|
||||
To do this you can follow the appropriate [installation guide](https://homarr.dev/docs/category/installation-1) for your system.
|
||||
To do this you can follow the appropriate [installation guide](/docs/getting-started) for your system.
|
||||
Please note that if you are using docker you need to specify a diffrent external port for the new installation as the old one had the same port.
|
||||
So in your compose file the ports would be `7576:7575` instead of `7575:7575`.
|
||||
|
||||
|
||||
@@ -104,3 +104,21 @@ Choose the smallest relevant suite when changing behavior:
|
||||
Omit `<file>` to run all tests in that command's scope. E2E and screenshot commands use a local image tagged `homarr-e2e`, or an image selected with `HOMARR_E2E_IMAGE`. The default commands run once without automatic retries; coverage is opt-in. The screenshot generator is excluded from both unit and E2E commands.
|
||||
|
||||
Keep behavioral coverage for authorization, migrations, persistence, and widget execution. Avoid tests that only search source code for particular component names, JSX, CSS, or documentation wording.
|
||||
|
||||
## Documentation development
|
||||
|
||||
Run `pnpm dev:docs` to open the Next.js and Fumadocs site at `http://127.0.0.1:3003`. Content lives in
|
||||
`apps/docs/docs/`; the nearest `meta.json` controls navigation. Keep integration and widget setup metadata in their
|
||||
typed `index.ts` files alongside the page.
|
||||
|
||||
After changing content, navigation, or shared MDX components, run:
|
||||
|
||||
```sh
|
||||
pnpm --filter @homarr/docs build
|
||||
pnpm --filter @homarr/docs validate:links
|
||||
pnpm --filter @homarr/docs verify:search
|
||||
```
|
||||
|
||||
The build writes a static site to `apps/docs/out/`. Check heading links, search results, and the page's Markdown export
|
||||
when changing shared components. The [Fumadocs documentation](https://fumadocs.dev/docs) describes supported components
|
||||
and source APIs; match examples to the versions installed in this repository.
|
||||
@@ -34,6 +34,21 @@ Workshop uses PocketBase. The production image serves the Workshop website and A
|
||||
Public URL variables accept HTTP(S) origins without embedded credentials, query strings, or fragments. Restart the
|
||||
container after changing runtime configuration.
|
||||
|
||||
## Documentation search and AI
|
||||
|
||||
The documentation uses Fumadocs search with an index generated during the website build. Search runs in the browser
|
||||
and needs no hosted search credentials or crawler.
|
||||
|
||||
The **Ask AI** launcher connects to Kapa separately. `KAPA_WEBSITE_ID` is a public website integration ID, read when
|
||||
building the documentation. The default uses Homarr's integration. For a private deployment, pass your own ID or
|
||||
an empty value to disable it: `docker build --build-arg KAPA_WEBSITE_ID= -f apps/workshop/Dockerfile .`.
|
||||
Changing this value requires rebuilding the image; setting it on an already-built container has no effect.
|
||||
|
||||
For your own Kapa integration, enable the deployment domain in Kapa and configure a Website Crawl source for your
|
||||
published docs. Preview the `main` content selector and verify extracted headings, code, and integration details.
|
||||
After a migration, refresh the source and check answer citations. `/llms.txt` alone does not configure Kapa ingestion.
|
||||
See the [Kapa website widget guide](https://docs.kapa.ai/integrations/website-widget/quickstart).
|
||||
|
||||
## Authentication and email
|
||||
|
||||
Configure both GitHub OAuth variables and use `https://<workshop-host>/api/oauth2-redirect` as the callback. Supplying
|
||||
|
||||
@@ -14,7 +14,7 @@ tags:
|
||||
|
||||
Homarr supports multiple authentication options, from internal userbase (credentials), to LDAP (with Active directory support), and OIDC.
|
||||
|
||||
### Auth configuration common variables
|
||||
## Common configuration
|
||||
|
||||
| Environment Variable | Description | Default Value |
|
||||
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
|
||||
@@ -23,198 +23,193 @@ Homarr supports multiple authentication options, from internal userbase (credent
|
||||
| AUTH_SESSION_EXPIRY_TIME | Time for the session to time out. Can be set as pure number, which will automatically be used in seconds, or followed by s, m, h or d for seconds, minutes, hours or days. (ex: "30m") | "30d" |
|
||||
| AUTH_COOKIE_PREFIX | Prefix used for all authentication cookies (session, csrf, callback, pkce, state, nonce). Change this if you run another Auth.js/NextAuth app on the same hostname as Homarr (browsers scope cookies by host, not by port) to avoid cookie name collisions. Only letters, numbers, hyphens and underscores are allowed. | `homarr` |
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="credentials" label="Credentials Provider" default>
|
||||
## Credentials provider
|
||||
|
||||
This is the default provider.
|
||||
This is the default provider.
|
||||
|
||||
First user is created using the onboarding process and the rest can be created by this user (see [user management](/docs/management/users))
|
||||
First user is created using the onboarding process and the rest can be created by this user (see [user management](/docs/management/users))
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="ldap" label="LDAP provider">
|
||||
## LDAP provider
|
||||
|
||||
This provider authenticates against an LDAP server.
|
||||
This provider authenticates against an LDAP server.
|
||||
|
||||
Any user in LDAP server that signs in gets created in Homarr database.
|
||||
Any user in LDAP server that signs in gets created in Homarr database.
|
||||
|
||||
Roles are fetched from LDAP groups. Groups with the same name of Homarr will be used to synchronize them.
|
||||
Roles are fetched from LDAP groups. Groups with the same name of Homarr will be used to synchronize them.
|
||||
|
||||
|
||||
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
Example Setup
|
||||
</summary>
|
||||
<div>
|
||||
<details>
|
||||
<summary>
|
||||
Example Setup
|
||||
</summary>
|
||||
<div>
|
||||
|
||||
In this setup we are using [lldap](https://github.com/lldap/lldap). Install your server using docker or [as a service](https://github.com/lldap/lldap/blob/main/example_configs/lldap.service).
|
||||
In this setup we are using [lldap](https://github.com/lldap/lldap). Install your server using docker or [as a service](https://github.com/lldap/lldap/blob/main/example_configs/lldap.service).
|
||||
|
||||
Minimal configuration requires 4 env variables, LDAP URI, base, user and password for querying data.
|
||||
Minimal configuration requires 4 env variables, LDAP URI, base, user and password for querying data.
|
||||
|
||||
There's more variables, but all have defaults corresponding to lldap defaults. These might need to be changed if you have different LDAP provider.
|
||||
```
|
||||
docker run ...
|
||||
AUTH_PROVIDERS="ldap"
|
||||
AUTH_LDAP_URI="ldap://example.com:3890"
|
||||
AUTH_LDAP_BASE="dc=example,dc=com" // Same as LLDAP_LDAP_BASE_DN
|
||||
AUTH_LDAP_BIND_DN="uid=admin,ou=People,dc=example,dc=com"
|
||||
AUTH_LDAP_BIND_PASSWORD="adminpass" // Same as LLDAP_LDAP_USER_PASS
|
||||
```
|
||||
```
|
||||
#Docker compose
|
||||
version: x
|
||||
services:
|
||||
homarr:
|
||||
environment:
|
||||
AUTH_PROVIDERS: ldap
|
||||
AUTH_LDAP_URI: ldap://example.com:3890
|
||||
AUTH_LDAP_BASE: dc=example,dc=com #Same as LLDAP_LDAP_BASE_DN
|
||||
AUTH_LDAP_BIND_DN: uid=admin,ou=People,dc=example,dc=com
|
||||
AUTH_LDAP_BIND_PASSWORD: adminpass #Same as LLDAP_LDAP_USER_PASS
|
||||
```
|
||||
There's more variables, but all have defaults corresponding to lldap defaults. These might need to be changed if you have different LDAP provider.
|
||||
```
|
||||
docker run ...
|
||||
AUTH_PROVIDERS="ldap"
|
||||
AUTH_LDAP_URI="ldap://example.com:3890"
|
||||
AUTH_LDAP_BASE="dc=example,dc=com" // Same as LLDAP_LDAP_BASE_DN
|
||||
AUTH_LDAP_BIND_DN="uid=admin,ou=People,dc=example,dc=com"
|
||||
AUTH_LDAP_BIND_PASSWORD="adminpass" // Same as LLDAP_LDAP_USER_PASS
|
||||
```
|
||||
```
|
||||
#Docker compose
|
||||
version: x
|
||||
services:
|
||||
homarr:
|
||||
environment:
|
||||
AUTH_PROVIDERS: ldap
|
||||
AUTH_LDAP_URI: ldap://example.com:3890
|
||||
AUTH_LDAP_BASE: dc=example,dc=com #Same as LLDAP_LDAP_BASE_DN
|
||||
AUTH_LDAP_BIND_DN: uid=admin,ou=People,dc=example,dc=com
|
||||
AUTH_LDAP_BIND_PASSWORD: adminpass #Same as LLDAP_LDAP_USER_PASS
|
||||
```
|
||||
|
||||
In lldap, create a user and admin group, assign this user to the external admin group configured during onboarding. You can log in using this user and he will be in the group.
|
||||
In lldap, create a user and admin group, assign this user to the external admin group configured during onboarding. You can log in using this user and he will be in the group.
|
||||
|
||||
Here is another example for Active Directory:
|
||||
Here is another example for Active Directory:
|
||||
|
||||
```
|
||||
AUTH_LDAP_URI="ldap://ldap.abc.xyz:389
|
||||
AUTH_LDAP_BASE="DC=abc,DC=xyz"
|
||||
AUTH_LDAP_BIND_DN="CN=Administrator,CN=Users,DC=abc,DC=xyz"
|
||||
AUTH_LDAP_BIND_PASSWORD="YourAdministratorPassword"
|
||||
AUTH_LDAP_USERNAME_ATTRIBUTE="sAMAccountName"
|
||||
AUTH_LDAP_USER_MAIL_ATTRIBUTE="userPrincipalName"
|
||||
AUTH_LDAP_GROUP_CLASS="group"
|
||||
AUTH_LDAP_GROUP_MEMBER_ATTRIBUTE="member"
|
||||
AUTH_LDAP_GROUP_MEMBER_USER_ATTRIBUTE="dn"
|
||||
AUTH_LDAP_SEARCH_SCOPE="sub"
|
||||
AUTH_LDAP_USERNAME_FILTER_EXTRA_ARG="(sAMAccountType=805306368)"
|
||||
```
|
||||
User mail attribute is set to userPrincipalName as it follows the right schema, but it is recommended to use real emails and the default 'mail' value.
|
||||
```
|
||||
AUTH_LDAP_URI="ldap://ldap.abc.xyz:389
|
||||
AUTH_LDAP_BASE="DC=abc,DC=xyz"
|
||||
AUTH_LDAP_BIND_DN="CN=Administrator,CN=Users,DC=abc,DC=xyz"
|
||||
AUTH_LDAP_BIND_PASSWORD="YourAdministratorPassword"
|
||||
AUTH_LDAP_USERNAME_ATTRIBUTE="sAMAccountName"
|
||||
AUTH_LDAP_USER_MAIL_ATTRIBUTE="userPrincipalName"
|
||||
AUTH_LDAP_GROUP_CLASS="group"
|
||||
AUTH_LDAP_GROUP_MEMBER_ATTRIBUTE="member"
|
||||
AUTH_LDAP_GROUP_MEMBER_USER_ATTRIBUTE="dn"
|
||||
AUTH_LDAP_SEARCH_SCOPE="sub"
|
||||
AUTH_LDAP_USERNAME_FILTER_EXTRA_ARG="(sAMAccountType=805306368)"
|
||||
```
|
||||
User mail attribute is set to userPrincipalName as it follows the right schema, but it is recommended to use real emails and the default 'mail' value.
|
||||
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
|
||||
### Configuration
|
||||
### LDAP configuration
|
||||
|
||||
| Environment Variable | Description | Default value |
|
||||
|-------------------------------------------|-----------------------------------------------------------|---------------------|
|
||||
| ``AUTH_LDAP_URI`` | URI of your LDAP server | --- |
|
||||
| ``AUTH_LDAP_BASE`` | Base dn of your LDAP server | --- |
|
||||
| ``AUTH_LDAP_BIND_DN`` | User used for finding users and groups | --- |
|
||||
| ``AUTH_LDAP_BIND_PASSWORD`` | Password for bind user | --- |
|
||||
| ``AUTH_LDAP_USERNAME_ATTRIBUTE`` | Attribute used for username | uid |
|
||||
| ``AUTH_LDAP_USER_MAIL_ATTRIBUTE`` | Attribute used for mail field | mail |
|
||||
| ``AUTH_LDAP_GROUP_CLASS`` | Class used for querying groups | groupOfUniqueNames |
|
||||
| ``AUTH_LDAP_GROUP_MEMBER_ATTRIBUTE`` | Attribute used for querying group member | member |
|
||||
| ``AUTH_LDAP_GROUP_MEMBER_USER_ATTRIBUTE`` | User attribute used for comparing with group member | dn |
|
||||
| ``AUTH_LDAP_SEARCH_SCOPE`` | Serach scopes between base, one and sub | base |
|
||||
| ``AUTH_LDAP_USERNAME_FILTER_EXTRA_ARG`` | Extra arguments for user search filter (& based) | --- |
|
||||
| ``AUTH_LDAP_GROUP_FILTER_EXTRA_ARG`` | Extra arguments for user's groups search filter (& based) | --- |
|
||||
| Environment Variable | Description | Default value |
|
||||
|-------------------------------------------|-----------------------------------------------------------|---------------------|
|
||||
| ``AUTH_LDAP_URI`` | URI of your LDAP server | --- |
|
||||
| ``AUTH_LDAP_BASE`` | Base dn of your LDAP server | --- |
|
||||
| ``AUTH_LDAP_BIND_DN`` | User used for finding users and groups | --- |
|
||||
| ``AUTH_LDAP_BIND_PASSWORD`` | Password for bind user | --- |
|
||||
| ``AUTH_LDAP_USERNAME_ATTRIBUTE`` | Attribute used for username | uid |
|
||||
| ``AUTH_LDAP_USER_MAIL_ATTRIBUTE`` | Attribute used for mail field | mail |
|
||||
| ``AUTH_LDAP_GROUP_CLASS`` | Class used for querying groups | groupOfUniqueNames |
|
||||
| ``AUTH_LDAP_GROUP_MEMBER_ATTRIBUTE`` | Attribute used for querying group member | member |
|
||||
| ``AUTH_LDAP_GROUP_MEMBER_USER_ATTRIBUTE`` | User attribute used for comparing with group member | dn |
|
||||
| ``AUTH_LDAP_SEARCH_SCOPE`` | Serach scopes between base, one and sub | base |
|
||||
| ``AUTH_LDAP_USERNAME_FILTER_EXTRA_ARG`` | Extra arguments for user search filter (& based) | --- |
|
||||
| ``AUTH_LDAP_GROUP_FILTER_EXTRA_ARG`` | Extra arguments for user's groups search filter (& based) | --- |
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="oidc" label="OIDC provider">
|
||||
## OIDC provider
|
||||
|
||||
This provider authenticates using OIDC protocol.
|
||||
This provider authenticates using OIDC protocol.
|
||||
|
||||
Users signed in using OIDC are created in Homarr.
|
||||
Users signed in using OIDC are created in Homarr.
|
||||
|
||||
Roles are fetched from group claims. This can also be changed to roles for example added to a azure app registration by using the `AUTH_OIDC_GROUPS_ATTRIBUTE`.
|
||||
Roles are fetched from group claims. This can also be changed to roles for example added to a azure app registration by using the `AUTH_OIDC_GROUPS_ATTRIBUTE`.
|
||||
|
||||
If you'd rather manage group memberships for OIDC users locally (instead of via the IdP), set `AUTH_OIDC_GROUPS_LOCAL_MANAGEMENT=true`. While enabled, Homarr stops syncing OIDC users' group memberships from the groups claim, and admins can add/remove OIDC users on a group's members page. If you turn this back to `false`, the next login of each user resumes the regular sync and reconciles their groups with the IdP's claim again, which may remove memberships that were added manually while local management was enabled.
|
||||
If you'd rather manage group memberships for OIDC users locally (instead of via the IdP), set `AUTH_OIDC_GROUPS_LOCAL_MANAGEMENT=true`. While enabled, Homarr stops syncing OIDC users' group memberships from the groups claim, and admins can add/remove OIDC users on a group's members page. If you turn this back to `false`, the next login of each user resumes the regular sync and reconciles their groups with the IdP's claim again, which may remove memberships that were added manually while local management was enabled.
|
||||
|
||||
To let an existing credentials user also sign in with OIDC, set `AUTH_OIDC_ENABLE_DANGEROUS_CREDENTIALS_LINKING=true`. On the first OIDC sign-in, Homarr links a credentials user with the same email address instead of creating a second user. The user keeps their password login, local username and profile, groups, permissions, boards, settings, and API keys. OIDC profile and group claims do not overwrite the credentials-owned data. Homarr requires the OIDC profile to contain `email_verified: true` while this option is enabled. Only enable this when your OIDC provider verifies email addresses, because a matching email could otherwise be used to take over an existing account.
|
||||
To let an existing credentials user also sign in with OIDC, set `AUTH_OIDC_ENABLE_DANGEROUS_CREDENTIALS_LINKING=true`. On the first OIDC sign-in, Homarr links a credentials user with the same email address instead of creating a second user. The user keeps their password login, local username and profile, groups, permissions, boards, settings, and API keys. OIDC profile and group claims do not overwrite the credentials-owned data. Homarr requires the OIDC profile to contain `email_verified: true` while this option is enabled. Only enable this when your OIDC provider verifies email addresses, because a matching email could otherwise be used to take over an existing account.
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
Example Setup
|
||||
</summary>
|
||||
<div>
|
||||
<details>
|
||||
<summary>
|
||||
Example Setup
|
||||
</summary>
|
||||
<div>
|
||||
|
||||
In this example we will be using [Authelia](https://github.com/authelia/authelia).
|
||||
In this example we will be using [Authelia](https://github.com/authelia/authelia).
|
||||
|
||||
You can use any setup, but the simplest is [local](https://github.com/authelia/authelia/blob/master/examples/compose/local/authelia/configuration.yml).
|
||||
You can use any setup, but the simplest is [local](https://github.com/authelia/authelia/blob/master/examples/compose/local/authelia/configuration.yml).
|
||||
|
||||
You also have to [enable OIDC in Authelia](https://www.authelia.com/configuration/identity-providers/open-id-connect/).
|
||||
You also have to [enable OIDC in Authelia](https://www.authelia.com/configuration/identity-providers/open-id-connect/).
|
||||
|
||||
Create a client for homarr. To generate client secret you can [use authelia](https://www.authelia.com/integration/openid-connect/frequently-asked-questions/#how-do-i-generate-client-secrets). This is an example config:
|
||||
Create a client for homarr. To generate client secret you can [use authelia](https://www.authelia.com/integration/openid-connect/frequently-asked-questions/#how-do-i-generate-client-secrets). This is an example config:
|
||||
|
||||
```yaml
|
||||
identity_providers:
|
||||
oidc:
|
||||
...
|
||||
clients:
|
||||
- id: homarr
|
||||
secret: <secret_hash>
|
||||
public: false
|
||||
authorization_policy: one_factor
|
||||
redirect_uris:
|
||||
- https://example.com/api/auth/callback/oidc
|
||||
- http://localhost:3000/api/auth/callback/oidc
|
||||
scopes:
|
||||
- openid
|
||||
- groups
|
||||
- profile
|
||||
- email
|
||||
userinfo_signing_algorithm: none
|
||||
consent_mode: implicit # self hosted
|
||||
```
|
||||
```yaml
|
||||
identity_providers:
|
||||
oidc:
|
||||
...
|
||||
clients:
|
||||
- id: homarr
|
||||
secret: <secret_hash>
|
||||
public: false
|
||||
authorization_policy: one_factor
|
||||
redirect_uris:
|
||||
- https://example.com/api/auth/callback/oidc
|
||||
- http://localhost:3000/api/auth/callback/oidc
|
||||
scopes:
|
||||
- openid
|
||||
- groups
|
||||
- profile
|
||||
- email
|
||||
userinfo_signing_algorithm: none
|
||||
consent_mode: implicit # self hosted
|
||||
```
|
||||
|
||||
In Homarr use following env variables.
|
||||
In Homarr use following env variables.
|
||||
|
||||
```
|
||||
AUTH_PROVIDERS="oidc"
|
||||
AUTH_OIDC_ISSUER="https://auth.example.com"
|
||||
AUTH_OIDC_CLIENT_SECRET="client_secret"
|
||||
AUTH_OIDC_CLIENT_ID="homarr"
|
||||
AUTH_OIDC_CLIENT_NAME="Authelia"
|
||||
AUTH_OIDC_FORCE_USERINFO="true" --> from v4.39 of authelia and above this is required
|
||||
```
|
||||
```
|
||||
AUTH_PROVIDERS="oidc"
|
||||
AUTH_OIDC_ISSUER="https://auth.example.com"
|
||||
AUTH_OIDC_CLIENT_SECRET="client_secret"
|
||||
AUTH_OIDC_CLIENT_ID="homarr"
|
||||
AUTH_OIDC_CLIENT_NAME="Authelia"
|
||||
AUTH_OIDC_FORCE_USERINFO="true" --> from v4.39 of authelia and above this is required
|
||||
```
|
||||
|
||||
For an azure app registration the setup could look like this:
|
||||
For an azure app registration the setup could look like this:
|
||||
|
||||
```
|
||||
AUTH_PROVIDERS="oidc"
|
||||
AUTH_OIDC_ISSUER="https://login.microsoftonline.com/<teanant-id>/v2.0"
|
||||
AUTH_OIDC_CLIENT_SECRET="<client-secret>"
|
||||
AUTH_OIDC_CLIENT_ID="<client-id>"
|
||||
AUTH_OIDC_CLIENT_NAME="Azure"
|
||||
AUTH_OIDC_SCOPE_OVERWRITE="openid email profile" # Groups scope does not exist in azure
|
||||
AUTH_OIDC_GROUPS_ATTRIBUTE="roles" # We use the roles of the app registration so that we don't need to use uuids as our groups
|
||||
```
|
||||
```
|
||||
AUTH_PROVIDERS="oidc"
|
||||
AUTH_OIDC_ISSUER="https://login.microsoftonline.com/<teanant-id>/v2.0"
|
||||
AUTH_OIDC_CLIENT_SECRET="<client-secret>"
|
||||
AUTH_OIDC_CLIENT_ID="<client-id>"
|
||||
AUTH_OIDC_CLIENT_NAME="Azure"
|
||||
AUTH_OIDC_SCOPE_OVERWRITE="openid email profile" # Groups scope does not exist in azure
|
||||
AUTH_OIDC_GROUPS_ATTRIBUTE="roles" # We use the roles of the app registration so that we don't need to use uuids as our groups
|
||||
```
|
||||
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
|
||||
### Configuration
|
||||
### OIDC configuration
|
||||
|
||||
| Environment Variable | Description | Default value |
|
||||
|-----------------------------|------------------------------------------------------------|---------------|
|
||||
| ``AUTH_OIDC_ISSUER`` | Issuer URI of OIDC provider. This has generally to be **without trailing slash** except for **Authentik** | --- |
|
||||
| ``AUTH_OIDC_CLIENT_ID`` | ID of OIDC client (application) | --- |
|
||||
| ``AUTH_OIDC_CLIENT_SECRET`` | Secret of OIDC client (application) | --- |
|
||||
| ``AUTH_OIDC_CLIENT_NAME`` | Display name of provider (in login screen) | OIDC |
|
||||
| ``AUTH_OIDC_AUTO_LOGIN`` | Automatically redirect to OIDC login | false |
|
||||
| ``AUTH_OIDC_SCOPE_OVERWRITE`` | Overwrite default scopes (openid, profile, email) | openid email profile groups |
|
||||
| ``AUTH_OIDC_GROUPS_ATTRIBUTE`` | Attribute used for groups (roles) claim. Dot-separated paths such as `resource_access.homarr.roles` are supported. | groups |
|
||||
| ``AUTH_OIDC_GROUPS_LOCAL_MANAGEMENT`` | Stop syncing group memberships of OIDC users from the groups claim and manage them locally via the group members page instead | false |
|
||||
| ``AUTH_OIDC_NAME_ATTRIBUTE_OVERWRITE`` | Overwrite name attribute. Dot-separated paths are supported. By default it will use preferred_username if it does not contain a `@` and otherwise name. | --- |
|
||||
| ``AUTH_OIDC_FORCE_USERINFO`` | Force userinfo endpoint to be used for user information. | false |
|
||||
| ``AUTH_OIDC_ENABLE_DANGEROUS_ACCOUNT_LINKING`` | Enable account linking for OIDC provider. This will link the OIDC accounts by email. Be sure that you have verified emails to prevent stealing accounts. | false |
|
||||
| ``AUTH_OIDC_ENABLE_DANGEROUS_CREDENTIALS_LINKING`` | Link an OIDC identity to an existing credentials user with the same email. The credentials login and existing user data are preserved. Requires the OIDC profile to contain `email_verified: true`. | false |
|
||||
| ``AUTH_OIDC_TOKEN_ENDPOINT_AUTH_METHOD`` | Override method for the token endpoint authentication. Supported values are `client_secret_basic`, `client_secret_post`, `client_secret_jwt` and `none`. | client_secret_basic |
|
||||
| Environment Variable | Description | Default value |
|
||||
|-----------------------------|------------------------------------------------------------|---------------|
|
||||
| ``AUTH_OIDC_ISSUER`` | Issuer URI of OIDC provider. This has generally to be **without trailing slash** except for **Authentik** | --- |
|
||||
| ``AUTH_OIDC_CLIENT_ID`` | ID of OIDC client (application) | --- |
|
||||
| ``AUTH_OIDC_CLIENT_SECRET`` | Secret of OIDC client (application) | --- |
|
||||
| ``AUTH_OIDC_CLIENT_NAME`` | Display name of provider (in login screen) | OIDC |
|
||||
| ``AUTH_OIDC_AUTO_LOGIN`` | Automatically redirect to OIDC login | false |
|
||||
| ``AUTH_OIDC_SCOPE_OVERWRITE`` | Overwrite default scopes (openid, profile, email) | openid email profile groups |
|
||||
| ``AUTH_OIDC_GROUPS_ATTRIBUTE`` | Attribute used for groups (roles) claim. Dot-separated paths such as `resource_access.homarr.roles` are supported. | groups |
|
||||
| ``AUTH_OIDC_GROUPS_LOCAL_MANAGEMENT`` | Stop syncing group memberships of OIDC users from the groups claim and manage them locally via the group members page instead | false |
|
||||
| ``AUTH_OIDC_NAME_ATTRIBUTE_OVERWRITE`` | Overwrite name attribute. Dot-separated paths are supported. By default it will use preferred_username if it does not contain a `@` and otherwise name. | --- |
|
||||
| ``AUTH_OIDC_FORCE_USERINFO`` | Force userinfo endpoint to be used for user information. | false |
|
||||
| ``AUTH_OIDC_ENABLE_DANGEROUS_ACCOUNT_LINKING`` | Enable account linking for OIDC provider. This will link the OIDC accounts by email. Be sure that you have verified emails to prevent stealing accounts. | false |
|
||||
| ``AUTH_OIDC_ENABLE_DANGEROUS_CREDENTIALS_LINKING`` | Link an OIDC identity to an existing credentials user with the same email. The credentials login and existing user data are preserved. Requires the OIDC profile to contain `email_verified: true`. | false |
|
||||
| ``AUTH_OIDC_TOKEN_ENDPOINT_AUTH_METHOD`` | Override method for the token endpoint authentication. Supported values are `client_secret_basic`, `client_secret_post`, `client_secret_jwt` and `none`. | client_secret_basic |
|
||||
|
||||
### Permission System
|
||||
### OIDC permissions
|
||||
|
||||
To give a user special permissions, first create a new group in homarr and assign the permission desired.
|
||||
For example if the group on homarr is called `homarr-admins` a new group on the oidc provider, for example authentik needs to be created with the same name, that would be `homarr-admins`.
|
||||
After assigning the group on the oidc provider to the user, and logging again into homarr, the user should automatically get placed in that group and inherit the permissions defined.
|
||||
To give a user special permissions, first create a new group in homarr and assign the permission desired.
|
||||
For example if the group on homarr is called `homarr-admins` a new group on the oidc provider, for example authentik needs to be created with the same name, that would be `homarr-admins`.
|
||||
After assigning the group on the oidc provider to the user, and logging again into homarr, the user should automatically get placed in that group and inherit the permissions defined.
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
## Example setups
|
||||
|
||||
@@ -295,7 +290,7 @@ Homarr supports multiple authentication options, from internal userbase (credent
|
||||
</div>
|
||||
</details>
|
||||
|
||||
Additional OIDC configuration options are described in the OIDC tab above.
|
||||
See [OIDC configuration](#oidc-configuration) for additional options.
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="google" label="Google (OIDC) Example" default>
|
||||
@@ -361,7 +356,7 @@ Homarr supports multiple authentication options, from internal userbase (credent
|
||||
</div>
|
||||
</details>
|
||||
|
||||
Additional OIDC configuration options are described in the OIDC tab above.
|
||||
See [OIDC configuration](#oidc-configuration) for additional options.
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
@@ -14,7 +14,8 @@
|
||||
"clean": "git clean -xdf .next out node_modules",
|
||||
"api-dump-contributors": "node ./scripts/dump-contributors.mjs",
|
||||
"validate:coverage": "tsx ./scripts/validate-docs-coverage.ts",
|
||||
"validate:links": "tsx ./scripts/validate-links.ts"
|
||||
"validate:links": "tsx ./scripts/validate-links.ts",
|
||||
"verify:search": "tsx ./scripts/verify-search.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@base-ui/react": "^1.5.0",
|
||||
@@ -25,20 +26,17 @@
|
||||
"@mdx-js/react": "^3.1.1",
|
||||
"@nivo/line": "^0.99.0",
|
||||
"@scalar/api-client-react": "catalog:",
|
||||
"@shadcn/react": "catalog:",
|
||||
"@tabler/icons-react": "catalog:",
|
||||
"@tailwindcss/postcss": "^4.3.2",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "catalog:",
|
||||
"date-fns": "catalog:",
|
||||
"dayjs": "catalog:",
|
||||
"embla-carousel-react": "catalog:",
|
||||
"feed": "catalog:",
|
||||
"fumadocs-core": "catalog:",
|
||||
"fumadocs-mdx": "catalog:",
|
||||
"fumadocs-openapi": "catalog:",
|
||||
"fumadocs-ui": "catalog:",
|
||||
"input-otp": "catalog:",
|
||||
"json-schema-typed": "catalog:",
|
||||
"mermaid": "catalog:",
|
||||
"next": "catalog:",
|
||||
@@ -48,8 +46,6 @@
|
||||
"posthog-js": "catalog:",
|
||||
"react": "catalog:",
|
||||
"react-dom": "catalog:",
|
||||
"react-resizable-panels": "catalog:",
|
||||
"recharts": "3.8.0",
|
||||
"remark-directive": "catalog:",
|
||||
"shiki": "catalog:",
|
||||
"sonner": "catalog:",
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
import assert from "node:assert/strict";
|
||||
import { spawnSync } from "node:child_process";
|
||||
import { mkdtemp, mkdir, rm, writeFile } from "node:fs/promises";
|
||||
import { tmpdir } from "node:os";
|
||||
import path from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const directory = await mkdtemp(path.join(tmpdir(), "homarr-docs-links-"));
|
||||
const validator = fileURLToPath(new URL("./validate-links.ts", import.meta.url));
|
||||
|
||||
try {
|
||||
await mkdir(path.join(directory, "docs"));
|
||||
await mkdir(path.join(directory, "out/docs/child"), { recursive: true });
|
||||
await writeFile(path.join(directory, "out/docs/child/index.html"), '<h1 id="child">Child</h1>');
|
||||
await writeFile(path.join(directory, "out/asset.svg"), "<svg />");
|
||||
|
||||
const cases = [
|
||||
{ name: "valid anchors, relative routes, assets and external URLs", href: "#section", expected: 0 },
|
||||
{ name: "same-page generated anchor", href: "#missing", expected: 1 },
|
||||
{ name: "cross-page anchor", href: "/docs/child/#missing", expected: 1 },
|
||||
{ name: "rendered route", href: "/missing", expected: 1 },
|
||||
{ name: "same-origin absolute route", href: "https://homarr.dev/missing", expected: 1 },
|
||||
{ name: "rendered asset", href: "/missing.svg", expected: 1 },
|
||||
{ name: "source-only link", href: "#section", source: "[Missing](/missing)", expected: 1 },
|
||||
{ name: "source-only anchor", href: "#section", source: "[Missing](/docs/#missing)", expected: 1 },
|
||||
];
|
||||
|
||||
for (const test of cases) {
|
||||
await writeFile(path.join(directory, "docs/index.mdx"), test.source ?? "[Valid](/docs/#section)");
|
||||
await writeFile(
|
||||
path.join(directory, "out/docs/index.html"),
|
||||
`<main><h1 id="section">Section</h1><a href="${test.href}">Test</a>
|
||||
<a href="child/#child">Child</a><a href="/asset.svg">Asset</a>
|
||||
<a href="https://example.com/missing">External</a><a href="#top">Top</a></main>`,
|
||||
);
|
||||
const result = spawnSync(process.execPath, ["--import", import.meta.resolve("tsx"), validator], {
|
||||
cwd: directory,
|
||||
encoding: "utf8",
|
||||
});
|
||||
assert.equal(result.status, test.expected, `${test.name}\n${result.stdout}\n${result.stderr}`);
|
||||
}
|
||||
console.log(`${cases.length} link validation checks passed`);
|
||||
} finally {
|
||||
await rm(directory, { recursive: true, force: true });
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { readFile, readdir } from "node:fs/promises";
|
||||
import path from "node:path";
|
||||
import { load } from "cheerio";
|
||||
import { printErrors, readFiles, validateFiles, type ScanResult } from "next-validate-link";
|
||||
import { printErrors, readFiles, validateFiles, type ScanResult, type UrlMeta } from "next-validate-link";
|
||||
|
||||
const outputDirectory = path.resolve("out");
|
||||
|
||||
@@ -11,7 +11,7 @@ const toContentUrl = (file: string) => {
|
||||
if (normalized.startsWith("docs/")) {
|
||||
const slug = normalized
|
||||
.slice("docs/".length)
|
||||
.replace(/\/(index)?\.mdx?$/, "")
|
||||
.replace(/(?:^|\/)index\.mdx?$/, "")
|
||||
.replace(/\.mdx?$/, "");
|
||||
return `/docs${slug ? `/${slug}` : ""}/`;
|
||||
}
|
||||
@@ -25,8 +25,8 @@ const toContentUrl = (file: string) => {
|
||||
|
||||
const files = await readFiles(["docs/**/*.{md,mdx}", "blog/**/*.{md,mdx}"], { pathToUrl: toContentUrl });
|
||||
const output = await readdir(outputDirectory, { recursive: true, withFileTypes: true });
|
||||
const urls = new Map<string, object>();
|
||||
const renderedPages: { file: string; url: string }[] = [];
|
||||
const urls = new Map<string, UrlMeta>();
|
||||
const renderedPages: { url: string; links: string[] }[] = [];
|
||||
|
||||
for (const entry of output) {
|
||||
if (!entry.isFile()) continue;
|
||||
@@ -37,9 +37,20 @@ for (const entry of output) {
|
||||
continue;
|
||||
}
|
||||
const url = `/${relative.replace(/\/?index\.html$/, "")}`.replace(/\/$/, "") || "/";
|
||||
urls.set(url, {});
|
||||
urls.set(`${url}/`, {});
|
||||
renderedPages.push({ file, url });
|
||||
const $ = load(await readFile(file, "utf8"));
|
||||
const hashes = $("[id], a[name]")
|
||||
.toArray()
|
||||
.flatMap((element) => [$(element).attr("id"), $(element).attr("name")].filter((value) => value !== undefined));
|
||||
const meta = { hashes };
|
||||
urls.set(url, meta);
|
||||
urls.set(url === "/" ? url : `${url}/`, meta);
|
||||
renderedPages.push({
|
||||
url,
|
||||
links: $("a[href]")
|
||||
.toArray()
|
||||
.map((element) => $(element).attr("href"))
|
||||
.filter((href) => href !== undefined),
|
||||
});
|
||||
}
|
||||
|
||||
const scanned: ScanResult = { urls, fallbackUrls: [] };
|
||||
@@ -47,38 +58,42 @@ const results = await validateFiles(files, {
|
||||
scanned,
|
||||
checkExternal: false,
|
||||
checkRelativePaths: "exists",
|
||||
ignoreFragment: true,
|
||||
markdown: {
|
||||
components: {
|
||||
Link: { attributes: ["href", "to"] },
|
||||
},
|
||||
},
|
||||
whitelist: (url) =>
|
||||
/^(?:https?:|mailto:|tel:|#)/.test(url) ||
|
||||
/^\/(?:api\/|custom-widgets\/|data\/|img\/|workshop(?:\/|$)|llms(?:-|\.|\/)|robots\.txt|sitemap\.xml)/.test(url),
|
||||
whitelist: (url) => /^(?:https?:|mailto:|tel:)/.test(url),
|
||||
});
|
||||
|
||||
printErrors(
|
||||
results.filter((result) => result.errors.length > 0),
|
||||
true,
|
||||
);
|
||||
const sourceErrors = results.filter((result) => result.errors.length > 0);
|
||||
printErrors(sourceErrors);
|
||||
if (sourceErrors.length > 0) process.exitCode = 1;
|
||||
|
||||
const renderedLinkErrors = new Set<string>();
|
||||
|
||||
for (const page of renderedPages) {
|
||||
const $ = load(await readFile(page.file, "utf8"));
|
||||
|
||||
$("main a[href]").each((_, element) => {
|
||||
const href = $(element).attr("href");
|
||||
if (!href || /^(?:https?:|mailto:|tel:|#)/.test(href)) return;
|
||||
|
||||
const target = new URL(href, `https://homarr.dev${page.url}`).pathname;
|
||||
if (/^\/(?:_next\/|api\/|custom-widgets\/|data\/|img\/|videos\/)/.test(target)) return;
|
||||
if (/\.(?:avif|gif|jpe?g|json|md|mp4|png|svg|webm|webp)$/i.test(target)) return;
|
||||
if (urls.has(target) || urls.has(target.replace(/\/$/, "")) || urls.has(`${target}/`)) return;
|
||||
|
||||
renderedLinkErrors.add(`${page.url}: ${href} resolves to missing route ${target}`);
|
||||
});
|
||||
for (const href of page.links) {
|
||||
if (!href) continue;
|
||||
try {
|
||||
// The export serves directories with trailing slashes, including relative links.
|
||||
const target = new URL(href, `https://homarr.dev${page.url.replace(/\/$/, "")}/`);
|
||||
if (target.origin !== "https://homarr.dev") continue;
|
||||
const pathname = decodeURI(target.pathname);
|
||||
const meta = urls.get(pathname) ?? urls.get(pathname.replace(/\/$/, "")) ?? urls.get(`${pathname}/`);
|
||||
if (!meta) {
|
||||
renderedLinkErrors.add(`${page.url}: ${href} resolves to missing route ${pathname}`);
|
||||
continue;
|
||||
}
|
||||
// Text fragments do not refer to element IDs; validate any preceding anchor.
|
||||
const hash = decodeURIComponent(target.hash.slice(1).split(":~:text=")[0]);
|
||||
if (hash && hash !== "top" && meta.hashes && !meta.hashes.includes(hash)) {
|
||||
renderedLinkErrors.add(`${page.url}: ${href} resolves to missing anchor #${hash} on ${pathname}`);
|
||||
}
|
||||
} catch {
|
||||
renderedLinkErrors.add(`${page.url}: invalid URL ${href}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (renderedLinkErrors.size > 0) {
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
import assert from "node:assert/strict";
|
||||
import { access, readFile } from "node:fs/promises";
|
||||
import path from "node:path";
|
||||
import { load } from "cheerio";
|
||||
import { staticClient } from "fumadocs-core/search/client/orama-static";
|
||||
|
||||
const outputDirectory = path.resolve("out");
|
||||
const index = await readFile(path.join(outputDirectory, "api/search"), "utf8");
|
||||
// Exercise the same client and exported database as the browser, without a server.
|
||||
const from = `data:application/json;base64,${Buffer.from(index).toString("base64")}`;
|
||||
const client = staticClient({ from });
|
||||
const cases = [
|
||||
{ query: "Sonarr", type: "page", url: "/docs/integrations/sonarr" },
|
||||
{ query: "Docker Compose", type: "heading", url: "/docs/getting-started/installation/docker#docker-compose" },
|
||||
{ query: "SECRET_ENCRYPTION_KEY", type: "text", url: "/docs/advanced/environment-variables" },
|
||||
] as const;
|
||||
const verifiedUrls = new Set<string>();
|
||||
|
||||
for (const test of cases) {
|
||||
const results = await client.search(test.query);
|
||||
assert(
|
||||
results.some(
|
||||
(result) =>
|
||||
result.type === test.type &&
|
||||
result.url.split("#")[0] === test.url.split("#")[0] &&
|
||||
(!test.url.includes("#") || result.url === test.url),
|
||||
),
|
||||
`${test.query}: missing ${test.type} result for ${test.url}`,
|
||||
);
|
||||
|
||||
for (const result of results) {
|
||||
assert(result.url.startsWith("/docs/"), `Unexpected search destination: ${result.url}`);
|
||||
if (verifiedUrls.has(result.url)) continue;
|
||||
const url = new URL(result.url, "https://homarr.dev");
|
||||
const html = await readFile(path.join(outputDirectory, decodeURIComponent(url.pathname), "index.html"), "utf8");
|
||||
if (url.hash) {
|
||||
const id = decodeURIComponent(url.hash.slice(1));
|
||||
assert(
|
||||
load(html)("[id]")
|
||||
.toArray()
|
||||
.some((element) => element.attribs.id === id),
|
||||
`Missing search anchor: ${result.url}`,
|
||||
);
|
||||
}
|
||||
verifiedUrls.add(result.url);
|
||||
}
|
||||
console.log(`${test.query}: ${results.length} results; expected ${test.type} found`);
|
||||
}
|
||||
|
||||
assert.deepEqual(await client.search("homarrsearchnomatchqzxv987654321"), [], "Unknown words should return no results");
|
||||
const credentialResults = await staticClient({ from, search: { limit: 1000 } }).search("API Key");
|
||||
assert(
|
||||
credentialResults.some((result) => result.type === "text" && result.url.startsWith("/docs/integrations/sonarr#")),
|
||||
"Sonarr credential metadata must be searchable",
|
||||
);
|
||||
|
||||
for (const [slug, expected] of [
|
||||
["integrations/sonarr", ["API Key", "Management", "Calendar"]],
|
||||
["widgets/calendar", ["Radarr release type", "Default:", "Show unmonitored"]],
|
||||
] as const) {
|
||||
const markdown = await readFile(path.join(outputDirectory, "llms.mdx/docs", slug, "content.md"), "utf8");
|
||||
for (const text of expected) assert(markdown.includes(text), `${slug}: missing resolved metadata ${text}`);
|
||||
assert(!/<(?:Integration|Widget|Adding)[A-Z][^>]*[/>]/.test(markdown), `${slug}: unresolved metadata component`);
|
||||
}
|
||||
|
||||
const discovery = await readFile(path.join(outputDirectory, "llms.txt"), "utf8");
|
||||
const markdownLinks = [...discovery.matchAll(/\]\(([^)]*\/llms\.mdx\/[^)]+)\)/g)];
|
||||
assert(markdownLinks.length > 0, "LLM discovery must link to exported Markdown");
|
||||
await Promise.all(
|
||||
markdownLinks.map(async ([, href]) => {
|
||||
const url = new URL(href, "https://homarr.dev");
|
||||
await access(path.join(outputDirectory, decodeURIComponent(url.pathname)));
|
||||
}),
|
||||
);
|
||||
console.log(`LLM discovery verified: ${markdownLinks.length} Markdown exports.`);
|
||||
console.log(`Search verified: page titles, headings, body content, and ${verifiedUrls.size} destinations.`);
|
||||
@@ -1,9 +1,33 @@
|
||||
import { createFromSource } from "fumadocs-core/search/server";
|
||||
import { structure } from "fumadocs-core/mdx-plugins/remark-structure";
|
||||
|
||||
import { source } from "@/lib/source";
|
||||
import { getPageMarkdown, source } from "@/lib/source";
|
||||
|
||||
export const revalidate = false;
|
||||
|
||||
export const { staticGET: GET } = createFromSource(source, {
|
||||
language: "english",
|
||||
async buildIndex(page) {
|
||||
const markdown = await getPageMarkdown(page);
|
||||
const original = page.data.structuredData;
|
||||
const headings = new Set(original.headings.map(({ id }) => id));
|
||||
const resolved = structure(markdown.replace(/^(#{1,6} .+) \[#[^\]]+\]$/gm, "$1"));
|
||||
const contents = new Map(original.contents.map((content) => [`${content.heading}\0${content.content}`, content]));
|
||||
for (const content of resolved.contents) {
|
||||
// Generated metadata can contain subheadings that are not HTML anchors.
|
||||
const heading = content.heading && headings.has(content.heading) ? content.heading : undefined;
|
||||
contents.set(`${heading}\0${content.content}`, { ...content, heading });
|
||||
}
|
||||
|
||||
return {
|
||||
id: page.url,
|
||||
title: page.data.title,
|
||||
description: page.data.description,
|
||||
url: page.url,
|
||||
structuredData: {
|
||||
headings: original.headings,
|
||||
contents: [...contents.values()],
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
@@ -8,6 +8,7 @@ import { Provider } from "@/components/provider";
|
||||
import "./global.css";
|
||||
|
||||
const siteUrl = process.env.HOMARR_WEBSITE_URL ?? "https://homarr.dev";
|
||||
const kapaWebsiteId = process.env.KAPA_WEBSITE_ID ?? "1e4656f4-abeb-4343-bbae-1d8626f52378";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
metadataBase: new URL(siteUrl),
|
||||
@@ -37,6 +38,18 @@ export default function RootLayout({ children }: { children: ReactNode }) {
|
||||
<Script src="/workshop-runtime-config.js" strategy="beforeInteractive" />
|
||||
<Provider>{children}</Provider>
|
||||
<Analytics />
|
||||
{kapaWebsiteId && (
|
||||
<Script
|
||||
id="kapa-widget"
|
||||
src="https://widget.kapa.ai/kapa-widget.bundle.js"
|
||||
strategy="afterInteractive"
|
||||
data-website-id={kapaWebsiteId}
|
||||
data-project-name="Homarr"
|
||||
data-project-color="#2B2B2B"
|
||||
data-project-logo={new URL("/img/favicon.png", siteUrl).href}
|
||||
data-modal-open-on-command-k="false"
|
||||
/>
|
||||
)}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@@ -1,12 +1,24 @@
|
||||
import { llms } from "fumadocs-core/source";
|
||||
|
||||
import { getPostMarkdownUrl, getPostUrl, posts, source } from "@/lib/source";
|
||||
import { getPageMarkdownUrl, getPostMarkdownUrl, getPostUrl, posts, source } from "@/lib/source";
|
||||
|
||||
export const revalidate = false;
|
||||
|
||||
export function GET() {
|
||||
const blog = posts.entries.map((post) => `- [${post.title}](${getPostUrl(post)}): ${getPostMarkdownUrl(post)}`);
|
||||
const content = `${llms(source).index()}\n\n## Blog\n\n${blog.join("\n")}\n`;
|
||||
const blog = posts.entries.map(
|
||||
(post) => `- [${post.title}](${getPostUrl(post)}): [Markdown](${getPostMarkdownUrl(post)})`,
|
||||
);
|
||||
const index = llms(source, {
|
||||
renderDescription(node, { lang }) {
|
||||
if (node.type === "page") {
|
||||
const page = source.getNodePage(node, lang);
|
||||
if (page)
|
||||
return [page.data.description, `[Markdown](${getPageMarkdownUrl(page).url})`].filter(Boolean).join(" ");
|
||||
}
|
||||
return typeof node.description === "string" ? node.description : "";
|
||||
},
|
||||
}).index();
|
||||
const content = `${index}\n\n## Blog\n\n${blog.join("\n")}\n`;
|
||||
|
||||
return new Response(content, {
|
||||
headers: { "Content-Type": "text/plain; charset=utf-8" },
|
||||
|
||||
@@ -3,7 +3,7 @@ import { ReactNode } from "react";
|
||||
import Alert from "@/components/mdx/admonition";
|
||||
import Tabs, { TabItem } from "@/components/mdx/legacy-tabs";
|
||||
|
||||
const secretKinds = {
|
||||
export const secretKinds = {
|
||||
apiKey: {
|
||||
name: "API Key",
|
||||
description: "API Key from the service for authentication.",
|
||||
|
||||
@@ -0,0 +1,116 @@
|
||||
import { asMarkdown } from "fumadocs-core/server";
|
||||
import type { ComponentProps, ReactNode } from "react";
|
||||
|
||||
import { AddingIntegration } from "@/components/integrations/adding";
|
||||
import type { IntegrationHeader } from "@/components/integrations/header";
|
||||
import { secretKinds, type IntegrationSecrets } from "@/components/integrations/secrets";
|
||||
import type { IntegrationCapabilites } from "@/components/integrations/widgets";
|
||||
import { AddingWidget } from "@/components/widgets/adding";
|
||||
import type { WidgetHeader } from "@/components/widgets/header";
|
||||
import type { WidgetIntegrations } from "@/components/widgets/integrations";
|
||||
import { WidgetInteractionGuide } from "@/components/widgets/interactions";
|
||||
import { getDocsHref } from "@/lib/docs-path";
|
||||
import type { WidgetConfiguration } from "@/types";
|
||||
|
||||
// Fumadocs supplies the original MDX props, including typed metadata and JSX steps.
|
||||
function markdown<Props>(component: (props: Props) => ReactNode) {
|
||||
return (props: Props) => {
|
||||
asMarkdown();
|
||||
return component(props);
|
||||
};
|
||||
}
|
||||
|
||||
function configuration({ items }: WidgetConfiguration): ReactNode {
|
||||
return items.map((item, index) => (
|
||||
<div key={index}>
|
||||
<p>
|
||||
<strong>{item.name}</strong>: {item.description}
|
||||
</p>
|
||||
<p>
|
||||
Values:{" "}
|
||||
{typeof item.values === "string"
|
||||
? item.values
|
||||
: item.values.type === "boolean"
|
||||
? "yes / no"
|
||||
: item.values.type === "select"
|
||||
? item.values.options.join(", ")
|
||||
: item.values.type === "string"
|
||||
? "String"
|
||||
: `${item.values.name}${item.values.type === "array" ? "[]" : ""}`}
|
||||
. Default: {item.defaultValue}.
|
||||
</p>
|
||||
{typeof item.values !== "string" && "configuration" in item.values
|
||||
? configuration(item.values.configuration)
|
||||
: null}
|
||||
</div>
|
||||
));
|
||||
}
|
||||
|
||||
export const metadataMarkdownComponents = {
|
||||
AddingIntegration: markdown(AddingIntegration),
|
||||
AddingWidget: markdown(AddingWidget),
|
||||
WidgetInteractionGuide: markdown(WidgetInteractionGuide),
|
||||
IntegrationHeader: markdown(({ integration, categories }: ComponentProps<typeof IntegrationHeader>) => (
|
||||
<>
|
||||
<p>{integration.description}</p>
|
||||
<p>Categories: {categories.join(", ")}</p>
|
||||
</>
|
||||
)),
|
||||
WidgetHeader: markdown(({ widget, categories }: ComponentProps<typeof WidgetHeader>) => (
|
||||
<>
|
||||
<p>{widget.description}</p>
|
||||
<p>Categories: {categories.join(", ")}</p>
|
||||
</>
|
||||
)),
|
||||
IntegrationSecrets: markdown(({ secrets }: ComponentProps<typeof IntegrationSecrets>) =>
|
||||
secrets.map((secret, index) => (
|
||||
<div key={index}>
|
||||
{secret.tabLabel ? (
|
||||
<p>
|
||||
<strong>{secret.tabLabel}</strong>
|
||||
</p>
|
||||
) : null}
|
||||
{secret.header}
|
||||
{secret.credentials.length === 0 ? (
|
||||
<p>No credentials required.</p>
|
||||
) : (
|
||||
secret.credentials.map((credential) => (
|
||||
<p key={credential}>
|
||||
<strong>{secretKinds[credential].name}</strong>: {secretKinds[credential].description}
|
||||
</p>
|
||||
))
|
||||
)}
|
||||
{secret.body}
|
||||
{secret.steps.length > 0 ? (
|
||||
<>
|
||||
<p>Steps to retrieve the credentials:</p>
|
||||
<ol>
|
||||
{secret.steps.map((step, stepIndex) => (
|
||||
<li key={stepIndex}>{step}</li>
|
||||
))}
|
||||
</ol>
|
||||
</>
|
||||
) : null}
|
||||
{secret.footer}
|
||||
</div>
|
||||
)),
|
||||
),
|
||||
IntegrationCapabilites: markdown(({ items }: ComponentProps<typeof IntegrationCapabilites>) =>
|
||||
items.map((item, index) => {
|
||||
const capability = "widget" in item ? item.widget : item.capability;
|
||||
return (
|
||||
<p key={index}>
|
||||
<a href={getDocsHref(capability.path)}>{capability.name}</a>: {capability.description} {item.note}
|
||||
</p>
|
||||
);
|
||||
}),
|
||||
),
|
||||
WidgetIntegrations: markdown(({ items }: ComponentProps<typeof WidgetIntegrations>) =>
|
||||
items.map(({ integration, note }) => (
|
||||
<p key={integration.name}>
|
||||
<a href={getDocsHref(integration.path)}>{integration.name}</a>: {integration.description} {note}
|
||||
</p>
|
||||
)),
|
||||
),
|
||||
WidgetConfig: markdown(({ configuration: value }: { configuration: WidgetConfiguration }) => configuration(value)),
|
||||
};
|
||||
@@ -25,10 +25,33 @@ export default function Search(props: SharedProps) {
|
||||
<SearchDialogContent>
|
||||
<SearchDialogHeader>
|
||||
<SearchDialogIcon />
|
||||
<SearchDialogInput />
|
||||
<SearchDialogInput aria-label="Search documentation" />
|
||||
<SearchDialogClose />
|
||||
</SearchDialogHeader>
|
||||
<SearchDialogList items={query.data !== "empty" ? query.data : null} />
|
||||
{query.error ? (
|
||||
<div role="alert" className="space-y-3 px-4 py-6 text-sm">
|
||||
<p>Search could not load. Reload the page to try again, or browse the documentation.</p>
|
||||
<div className="flex gap-4">
|
||||
<button type="button" className="underline underline-offset-4" onClick={() => window.location.reload()}>
|
||||
Reload page
|
||||
</button>
|
||||
<a className="underline underline-offset-4" href="/docs/">
|
||||
Browse documentation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<output className="sr-only">
|
||||
{query.isLoading
|
||||
? "Searching documentation"
|
||||
: Array.isArray(query.data)
|
||||
? `${query.data.length} search results`
|
||||
: ""}
|
||||
</output>
|
||||
<SearchDialogList items={query.data !== "empty" ? query.data : null} />
|
||||
</>
|
||||
)}
|
||||
</SearchDialogContent>
|
||||
</SearchDialog>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,252 @@
|
||||
import * as React from "react";
|
||||
import { Menu as MenuPrimitive } from "@base-ui/react/menu";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { IconChevronRight, IconCheck } from "@tabler/icons-react";
|
||||
|
||||
function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
|
||||
return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
|
||||
}
|
||||
|
||||
function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
|
||||
return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
|
||||
}
|
||||
|
||||
function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
|
||||
return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
|
||||
}
|
||||
|
||||
function DropdownMenuContent({
|
||||
align = "start",
|
||||
alignOffset = 0,
|
||||
side = "bottom",
|
||||
sideOffset = 4,
|
||||
className,
|
||||
...props
|
||||
}: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
|
||||
return (
|
||||
<MenuPrimitive.Portal>
|
||||
<MenuPrimitive.Positioner
|
||||
className="isolate z-50 outline-none"
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
side={side}
|
||||
sideOffset={sideOffset}
|
||||
>
|
||||
<MenuPrimitive.Popup
|
||||
data-slot="dropdown-menu-content"
|
||||
className={cn(
|
||||
"z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</MenuPrimitive.Positioner>
|
||||
</MenuPrimitive.Portal>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
|
||||
return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
|
||||
}
|
||||
|
||||
function DropdownMenuLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: MenuPrimitive.GroupLabel.Props & {
|
||||
inset?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.GroupLabel
|
||||
data-slot="dropdown-menu-label"
|
||||
data-inset={inset}
|
||||
className={cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}: MenuPrimitive.Item.Props & {
|
||||
inset?: boolean;
|
||||
variant?: "default" | "destructive";
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.Item
|
||||
data-slot="dropdown-menu-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
|
||||
return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
|
||||
}
|
||||
|
||||
function DropdownMenuSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}: MenuPrimitive.SubmenuTrigger.Props & {
|
||||
inset?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.SubmenuTrigger
|
||||
data-slot="dropdown-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<IconChevronRight className="ml-auto" />
|
||||
</MenuPrimitive.SubmenuTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuSubContent({
|
||||
align = "start",
|
||||
alignOffset = -3,
|
||||
side = "right",
|
||||
sideOffset = 0,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuContent>) {
|
||||
return (
|
||||
<DropdownMenuContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn(
|
||||
"w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className,
|
||||
)}
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
side={side}
|
||||
sideOffset={sideOffset}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
inset,
|
||||
...props
|
||||
}: MenuPrimitive.CheckboxItem.Props & {
|
||||
inset?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.CheckboxItem
|
||||
data-slot="dropdown-menu-checkbox-item"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className,
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span
|
||||
className="pointer-events-none absolute right-2 flex items-center justify-center"
|
||||
data-slot="dropdown-menu-checkbox-item-indicator"
|
||||
>
|
||||
<MenuPrimitive.CheckboxItemIndicator>
|
||||
<IconCheck />
|
||||
</MenuPrimitive.CheckboxItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</MenuPrimitive.CheckboxItem>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
|
||||
return <MenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
|
||||
}
|
||||
|
||||
function DropdownMenuRadioItem({
|
||||
className,
|
||||
children,
|
||||
inset,
|
||||
...props
|
||||
}: MenuPrimitive.RadioItem.Props & {
|
||||
inset?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.RadioItem
|
||||
data-slot="dropdown-menu-radio-item"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span
|
||||
className="pointer-events-none absolute right-2 flex items-center justify-center"
|
||||
data-slot="dropdown-menu-radio-item-indicator"
|
||||
>
|
||||
<MenuPrimitive.RadioItemIndicator>
|
||||
<IconCheck />
|
||||
</MenuPrimitive.RadioItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</MenuPrimitive.RadioItem>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {
|
||||
return (
|
||||
<MenuPrimitive.Separator
|
||||
data-slot="dropdown-menu-separator"
|
||||
className={cn("-mx-1 my-1 h-px bg-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="dropdown-menu-shortcut"
|
||||
className={cn(
|
||||
"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuSubContent,
|
||||
};
|
||||
@@ -0,0 +1,87 @@
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Empty({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty"
|
||||
className={cn(
|
||||
"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div data-slot="empty-header" className={cn("flex max-w-sm flex-col items-center gap-2", className)} {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
const emptyMediaVariants = cva(
|
||||
"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-transparent",
|
||||
icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
function EmptyMedia({
|
||||
className,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty-icon"
|
||||
data-variant={variant}
|
||||
className={cn(emptyMediaVariants({ variant, className }))}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty-title"
|
||||
className={cn("font-heading text-sm font-medium tracking-tight", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty-description"
|
||||
className={cn(
|
||||
"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty-content"
|
||||
className={cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };
|
||||
@@ -0,0 +1,218 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo } from "react";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
|
||||
return (
|
||||
<fieldset
|
||||
data-slot="field-set"
|
||||
className={cn(
|
||||
"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function FieldLegend({
|
||||
className,
|
||||
variant = "legend",
|
||||
...props
|
||||
}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
|
||||
return (
|
||||
<legend
|
||||
data-slot="field-legend"
|
||||
data-variant={variant}
|
||||
className={cn("mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-group"
|
||||
className={cn(
|
||||
"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
|
||||
variants: {
|
||||
orientation: {
|
||||
vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
|
||||
horizontal:
|
||||
"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
||||
responsive:
|
||||
"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
orientation: "vertical",
|
||||
},
|
||||
});
|
||||
|
||||
function Field({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
|
||||
return (
|
||||
<div
|
||||
role="group"
|
||||
data-slot="field"
|
||||
data-orientation={orientation}
|
||||
className={cn(fieldVariants({ orientation }), className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-content"
|
||||
className={cn("group/field-content flex flex-1 flex-col gap-0.5 leading-snug", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
|
||||
return (
|
||||
<Label
|
||||
data-slot="field-label"
|
||||
className={cn(
|
||||
"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
|
||||
"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-label"
|
||||
className={cn(
|
||||
"flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||
return (
|
||||
<p
|
||||
data-slot="field-description"
|
||||
className={cn(
|
||||
"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
|
||||
"last:mt-0 nth-last-2:-mt-1",
|
||||
"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function FieldSeparator({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
children?: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-separator"
|
||||
data-content={!!children}
|
||||
className={cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className)}
|
||||
{...props}
|
||||
>
|
||||
<Separator className="absolute inset-0 top-1/2" />
|
||||
{children && (
|
||||
<span
|
||||
className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
|
||||
data-slot="field-separator-content"
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FieldError({
|
||||
className,
|
||||
children,
|
||||
errors,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
errors?: Array<{ message?: string } | undefined>;
|
||||
}) {
|
||||
const content = useMemo(() => {
|
||||
if (children) {
|
||||
return children;
|
||||
}
|
||||
|
||||
if (!errors?.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
|
||||
|
||||
if (uniqueErrors?.length == 1) {
|
||||
return uniqueErrors[0]?.message;
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="ml-4 flex list-disc flex-col gap-1">
|
||||
{uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}
|
||||
</ul>
|
||||
);
|
||||
}, [children, errors]);
|
||||
|
||||
if (!content) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
role="alert"
|
||||
data-slot="field-error"
|
||||
className={cn("text-sm font-normal text-destructive", className)}
|
||||
{...props}
|
||||
>
|
||||
{content}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Field,
|
||||
FieldLabel,
|
||||
FieldDescription,
|
||||
FieldError,
|
||||
FieldGroup,
|
||||
FieldLegend,
|
||||
FieldSeparator,
|
||||
FieldSet,
|
||||
FieldContent,
|
||||
FieldTitle,
|
||||
};
|
||||
@@ -0,0 +1,59 @@
|
||||
"use client";
|
||||
|
||||
import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Progress({ className, children, value, ...props }: ProgressPrimitive.Root.Props) {
|
||||
return (
|
||||
<ProgressPrimitive.Root
|
||||
value={value}
|
||||
data-slot="progress"
|
||||
className={cn("flex flex-wrap gap-3", className)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ProgressTrack>
|
||||
<ProgressIndicator />
|
||||
</ProgressTrack>
|
||||
</ProgressPrimitive.Root>
|
||||
);
|
||||
}
|
||||
|
||||
function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
|
||||
return (
|
||||
<ProgressPrimitive.Track
|
||||
className={cn("relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted", className)}
|
||||
data-slot="progress-track"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ProgressIndicator({ className, ...props }: ProgressPrimitive.Indicator.Props) {
|
||||
return (
|
||||
<ProgressPrimitive.Indicator
|
||||
data-slot="progress-indicator"
|
||||
className={cn("h-full bg-primary transition-all", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
|
||||
return (
|
||||
<ProgressPrimitive.Label className={cn("text-sm font-medium", className)} data-slot="progress-label" {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
|
||||
return (
|
||||
<ProgressPrimitive.Value
|
||||
className={cn("ml-auto text-sm text-muted-foreground tabular-nums", className)}
|
||||
data-slot="progress-value"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Progress, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue };
|
||||
@@ -0,0 +1,19 @@
|
||||
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Separator({ className, orientation = "horizontal", ...props }: SeparatorPrimitive.Props) {
|
||||
return (
|
||||
<SeparatorPrimitive
|
||||
data-slot="separator"
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Separator };
|
||||
@@ -0,0 +1,52 @@
|
||||
import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function TooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {
|
||||
return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />;
|
||||
}
|
||||
|
||||
function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
|
||||
return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
|
||||
}
|
||||
|
||||
function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
|
||||
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
|
||||
}
|
||||
|
||||
function TooltipContent({
|
||||
className,
|
||||
side = "top",
|
||||
sideOffset = 4,
|
||||
align = "center",
|
||||
alignOffset = 0,
|
||||
children,
|
||||
...props
|
||||
}: TooltipPrimitive.Popup.Props &
|
||||
Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
|
||||
return (
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipPrimitive.Positioner
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
side={side}
|
||||
sideOffset={sideOffset}
|
||||
className="isolate z-50"
|
||||
>
|
||||
<TooltipPrimitive.Popup
|
||||
data-slot="tooltip-content"
|
||||
className={cn(
|
||||
"z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
|
||||
</TooltipPrimitive.Popup>
|
||||
</TooltipPrimitive.Positioner>
|
||||
</TooltipPrimitive.Portal>
|
||||
);
|
||||
}
|
||||
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
||||
@@ -1,7 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
import {
|
||||
IconArrowLeft,
|
||||
@@ -83,13 +82,6 @@ interface PendingScreenshot {
|
||||
previewUrl: string;
|
||||
}
|
||||
|
||||
const parseSubmissionId = (pathname: string) => {
|
||||
const segments = pathname.split("/").filter(Boolean);
|
||||
const last = segments[segments.length - 1];
|
||||
if (!last || last === "workshop") return null;
|
||||
return last;
|
||||
};
|
||||
|
||||
const isNotFound = (caught: unknown) =>
|
||||
typeof caught === "object" && caught !== null && "status" in caught && (caught as ClientResponseError).status === 404;
|
||||
|
||||
@@ -180,9 +172,7 @@ const WidgetSafetySummary = ({ widget }: { widget: HomarrCustomWidgetV2 }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const MarketplaceDetail = ({ workshopUrl }: { workshopUrl: string }) => {
|
||||
const pathname = usePathname();
|
||||
const submissionId = parseSubmissionId(pathname ?? "");
|
||||
const MarketplaceDetail = ({ workshopUrl, submissionId }: { workshopUrl: string; submissionId: string }) => {
|
||||
const backend = useMemo(() => getWorkshopBackend(workshopUrl), [workshopUrl]);
|
||||
|
||||
const [submission, setSubmission] = useState<WorkshopSubmission | null>(null);
|
||||
@@ -1014,7 +1004,13 @@ const MarketplaceDetail = ({ workshopUrl }: { workshopUrl: string }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default function MarketplaceDetailPage({ configuredWorkshopUrl = "" }: { configuredWorkshopUrl?: string }) {
|
||||
export default function MarketplaceDetailPage({
|
||||
configuredWorkshopUrl = "",
|
||||
submissionId,
|
||||
}: {
|
||||
configuredWorkshopUrl?: string;
|
||||
submissionId: string;
|
||||
}) {
|
||||
useEffect(() => {
|
||||
document.documentElement.removeAttribute("data-workshop-detail-loading");
|
||||
}, []);
|
||||
@@ -1022,7 +1018,7 @@ export default function MarketplaceDetailPage({ configuredWorkshopUrl = "" }: {
|
||||
return (
|
||||
<main className="marketplace min-h-[80vh] bg-background text-foreground">
|
||||
<WorkshopErrorBoundary>
|
||||
<MarketplaceDetail workshopUrl={getRuntimeWorkshopApiUrl(configuredWorkshopUrl)} />
|
||||
<MarketplaceDetail workshopUrl={getRuntimeWorkshopApiUrl(configuredWorkshopUrl)} submissionId={submissionId} />
|
||||
</WorkshopErrorBoundary>
|
||||
</main>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
// @vitest-environment jsdom
|
||||
|
||||
import React, { act } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { expect, it, vi } from "vitest";
|
||||
|
||||
import { WorkshopNotFoundRouter } from "./WorkshopNotFoundRouter";
|
||||
|
||||
vi.mock("next/navigation", () => ({ usePathname: () => "/404" }));
|
||||
vi.mock("./DetailPage", () => ({
|
||||
default: ({ submissionId }: { submissionId: string }) => <div data-submission-id={submissionId} />,
|
||||
}));
|
||||
|
||||
it.each([
|
||||
["/workshop/abc123", "abc123"],
|
||||
["/workshop/abc123/", "abc123"],
|
||||
["/workshop/admin", null],
|
||||
["/workshop/admin/", null],
|
||||
["/docs/missing", null],
|
||||
["/workshop/abc123/extra", null],
|
||||
])("routes the static 404 shell using the requested URL %s", async (pathname, expectedId) => {
|
||||
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
|
||||
window.history.replaceState(null, "", pathname);
|
||||
const host = document.createElement("div");
|
||||
document.body.append(host);
|
||||
const root = createRoot(host);
|
||||
try {
|
||||
await act(async () => root.render(<WorkshopNotFoundRouter configuredWorkshopUrl="" />));
|
||||
expect(host.querySelector("[data-submission-id]")?.getAttribute("data-submission-id") ?? null).toBe(expectedId);
|
||||
expect(host.textContent?.includes("Page not found")).toBe(expectedId === null);
|
||||
} finally {
|
||||
await act(async () => root.unmount());
|
||||
host.remove();
|
||||
window.history.replaceState(null, "", "/");
|
||||
}
|
||||
});
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { IconBook, IconPackage } from "@tabler/icons-react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
@@ -9,10 +10,17 @@ import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTi
|
||||
import MarketplaceDetailPage from "./DetailPage";
|
||||
|
||||
export function WorkshopNotFoundRouter({ configuredWorkshopUrl }: { configuredWorkshopUrl: string }) {
|
||||
const pathname = usePathname() ?? "";
|
||||
const isWorkshopDetail = /^\/workshop\/[^/]+\/?$/.test(pathname) && !/^\/workshop\/admin\/?$/.test(pathname);
|
||||
const routerPathname = usePathname();
|
||||
const [pathname, setPathname] = useState("");
|
||||
useEffect(() => {
|
||||
// The static 404 shell carries its build-time route, not the requested Workshop URL.
|
||||
setPathname(window.location.pathname);
|
||||
}, [routerPathname]);
|
||||
const submissionId = /^\/workshop\/([^/]+)\/?$/.exec(pathname)?.[1];
|
||||
|
||||
if (isWorkshopDetail) return <MarketplaceDetailPage configuredWorkshopUrl={configuredWorkshopUrl} />;
|
||||
if (submissionId && submissionId !== "admin") {
|
||||
return <MarketplaceDetailPage configuredWorkshopUrl={configuredWorkshopUrl} submissionId={submissionId} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<main>
|
||||
|
||||
@@ -2,6 +2,7 @@ import { loader } from "fumadocs-core/source";
|
||||
import { metaSchema, pageSchema } from "fumadocs-core/source/schema";
|
||||
import { defineCollections, defineDocs } from "fumadocs-mdx/macro";
|
||||
import { z } from "zod";
|
||||
import { metadataMarkdownComponents } from "@/components/mdx/metadata-markdown";
|
||||
|
||||
const titleFromSource = (source: string, path: string) => {
|
||||
const heading = /^#\s+(.+)$/m
|
||||
@@ -35,7 +36,7 @@ const docs = defineDocs({
|
||||
.transform((data) => ({ ...data, title: data.title ?? titleFromSource(source, path) })),
|
||||
postprocess: {
|
||||
extractLinkReferences: true,
|
||||
includeProcessedMarkdown: true,
|
||||
includeProcessedMarkdown: { output: "function" },
|
||||
},
|
||||
},
|
||||
meta: {
|
||||
@@ -77,12 +78,16 @@ export function getPageMarkdownUrl(page: (typeof source)["$inferPage"]) {
|
||||
}
|
||||
|
||||
export async function getLLMText(page: (typeof source)["$inferPage"]) {
|
||||
const processed = await page.data.getText("processed");
|
||||
const processed = await getPageMarkdown(page);
|
||||
const body = processed.replace(/^\s*#\s+[^\n]+\n+/, "");
|
||||
|
||||
return `# ${page.data.title} (${page.url})\n\n${body}`;
|
||||
}
|
||||
|
||||
export function getPageMarkdown(page: (typeof source)["$inferPage"]) {
|
||||
return page.data.getText("processed", { components: metadataMarkdownComponents });
|
||||
}
|
||||
|
||||
export type BlogPost = (typeof posts.entries)[number];
|
||||
|
||||
export function getPostSegments(post: BlogPost) {
|
||||
|
||||
@@ -28,6 +28,8 @@ COPY tooling/typescript ./tooling/typescript
|
||||
RUN --mount=type=cache,id=workshop-pnpm-store,target=/pnpm/store pnpm config set store-dir /pnpm/store && pnpm install --filter @homarr/docs... --frozen-lockfile
|
||||
|
||||
FROM dependencies AS website
|
||||
ARG KAPA_WEBSITE_ID=1e4656f4-abeb-4343-bbae-1d8626f52378
|
||||
ENV KAPA_WEBSITE_ID=$KAPA_WEBSITE_ID
|
||||
ARG HOMARR_WEBSITE_URL=https://homarr.dev
|
||||
ARG WORKSHOP_API_URL=https://homarr.dev
|
||||
ARG WORKSHOP_WEB_URL=https://homarr.dev/workshop
|
||||
|
||||
@@ -36,7 +36,7 @@ const renderWorkshopSocialHtml = (html, metadata) => {
|
||||
`<meta name="twitter:image:alt" content="${imageAlt}">`,
|
||||
].join("\n");
|
||||
const replaceableTags =
|
||||
/<title\b[^>]*>[\s\S]*?<\/title>|<meta\b[^>]*(?:name|property)=["'](?:description|og:(?:title|description|url|image|image:alt|type|site_name)|twitter:(?:card|title|description|image|image:alt)|article:section)["'][^>]*>|<link\b[^>]*rel=["']canonical["'][^>]*>/gi;
|
||||
/<title\b[^>]*>[\s\S]*?<\/title>|<meta\b[^>]*(?:name|property)=["'](?:robots|description|og:(?:title|description|url|image|image:alt|type|site_name)|twitter:(?:card|title|description|image|image:alt)|article:section)["'][^>]*>|<link\b[^>]*rel=["']canonical["'][^>]*>/gi;
|
||||
|
||||
return html.replace(replaceableTags, "").replace("<head>", `<head>\n${tags}`);
|
||||
};
|
||||
|
||||
@@ -6,7 +6,7 @@ const read = (path) => readFile(path, "utf8");
|
||||
const hookUtilsModule = { exports: {} };
|
||||
vm.runInNewContext(await read("apps/workshop/pb_hooks/workshop-utils.js"), { module: hookUtilsModule });
|
||||
const socialHtml = hookUtilsModule.exports.renderWorkshopSocialHtml(
|
||||
'<html><head><title data-rh="true">Homarr documentation</title><meta data-rh="true" property="og:title" content="Homarr documentation"><meta data-rh="true" name="description" content="Generic"><link data-rh="true" rel="canonical" href="https://homarr.dev/"></head></html>',
|
||||
'<html><head><title data-rh="true">Homarr documentation</title><meta name="robots" content="noindex"/><meta data-rh="true" property="og:title" content="Homarr documentation"><meta data-rh="true" name="description" content="Generic"><link data-rh="true" rel="canonical" href="https://homarr.dev/"></head></html>',
|
||||
{
|
||||
title: "Ocean <Glow> · Homarr Workshop",
|
||||
description: "Custom CSS for Homarr. Calm & readable.",
|
||||
@@ -27,5 +27,6 @@ for (const expected of [
|
||||
if (!socialHtml.includes(expected)) throw new Error(`Workshop social metadata is missing: ${expected}`);
|
||||
}
|
||||
if (socialHtml.includes("Homarr documentation")) throw new Error("Workshop social metadata must replace generic tags");
|
||||
if (socialHtml.includes("noindex")) throw new Error("Published Workshop details must not inherit the 404 noindex tag");
|
||||
|
||||
console.log("Workshop social metadata rendering passed");
|
||||
Generated
+15
-63
@@ -864,9 +864,6 @@ importers:
|
||||
'@scalar/api-client-react':
|
||||
specifier: 'catalog:'
|
||||
version: 2.0.43(axios@1.18.1(debug@4.4.3(supports-color@10.2.2))(supports-color@10.2.2))(nprogress@0.2.0)(react@19.2.7)(supports-color@10.2.2)(tailwindcss@4.3.2)(typescript@7.0.2)
|
||||
'@shadcn/react':
|
||||
specifier: 'catalog:'
|
||||
version: 0.2.1(@types/react@19.2.17)(react@19.2.7)
|
||||
'@tabler/icons-react':
|
||||
specifier: 'catalog:'
|
||||
version: 3.44.0(react@19.2.7)
|
||||
@@ -885,9 +882,6 @@ importers:
|
||||
dayjs:
|
||||
specifier: 'catalog:'
|
||||
version: 1.11.21
|
||||
embla-carousel-react:
|
||||
specifier: 'catalog:'
|
||||
version: 8.6.0(react@19.2.7)
|
||||
feed:
|
||||
specifier: 'catalog:'
|
||||
version: 6.0.0
|
||||
@@ -903,9 +897,6 @@ importers:
|
||||
fumadocs-ui:
|
||||
specifier: 'catalog:'
|
||||
version: 16.15.4(@types/mdx@2.0.14)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(fumadocs-core@16.15.4(@mdx-js/mdx@3.1.1(supports-color@10.2.2))(@types/estree-jsx@1.0.5)(@types/hast@3.0.5)(@types/mdast@4.0.4)(@types/react@19.2.17)(algoliasearch@5.53.0)(lucide-react@1.41.0(react@19.2.7))(next@16.3.1(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(zod@4.4.3))(next@16.3.1(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(tailwindcss@4.3.2)
|
||||
input-otp:
|
||||
specifier: 'catalog:'
|
||||
version: 1.4.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
|
||||
json-schema-typed:
|
||||
specifier: 'catalog:'
|
||||
version: 8.0.2
|
||||
@@ -933,12 +924,6 @@ importers:
|
||||
react-dom:
|
||||
specifier: 'catalog:'
|
||||
version: 19.2.7(react@19.2.7)
|
||||
react-resizable-panels:
|
||||
specifier: 'catalog:'
|
||||
version: 4.12.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
|
||||
recharts:
|
||||
specifier: 3.8.0
|
||||
version: 3.8.0(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react-is@19.2.7)(react@19.2.7)(redux@5.0.1)
|
||||
remark-directive:
|
||||
specifier: 'catalog:'
|
||||
version: 3.0.1(supports-color@10.2.2)
|
||||
@@ -9271,12 +9256,6 @@ packages:
|
||||
resolution: {integrity: sha512-rwHwUfXL40Chm1r08yrhU3qpUvdVlgkKNeyeGPOxnW8/SyVDvgRaed/Uz54AqWNaTCAThlj6QAs3TZcKI0xDEw==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
cmdk@1.1.1:
|
||||
resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
|
||||
peerDependencies:
|
||||
react: ^18 || ^19 || ^19.0.0-rc
|
||||
react-dom: ^18 || ^19 || ^19.0.0-rc
|
||||
|
||||
cnfast@0.1.0:
|
||||
resolution: {integrity: sha512-rH0jBKeLkVrK7NsZ5Ba2l7WdMBmm1k0FMpABeXUU1PgTUxbz3261gEuCSsrYuXo4BwAe3yCcIbQ93YyS52lOGQ==}
|
||||
hasBin: true
|
||||
@@ -12861,12 +12840,6 @@ packages:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
react-resizable-panels@4.12.2:
|
||||
resolution: {integrity: sha512-NwY5LCo4WrxVvDh0xoMML6EMLPONP/8ckKcIdpnojxexoatZdjLiRqLJQjQK5CPkd4SYiB/2M5BVrjZBQtOO7Q==}
|
||||
peerDependencies:
|
||||
react: ^18.0.0 || ^19.0.0
|
||||
react-dom: ^18.0.0 || ^19.0.0
|
||||
|
||||
react-shiki@0.11.0:
|
||||
resolution: {integrity: sha512-rqQtAvR8igCA9TVPfRhG6BSNeV+pLJZIkySms/K0/jYIoehG4/EsXD3cEhC94RXEpUVpmCrNkYhKR7RBO1YUGw==}
|
||||
peerDependencies:
|
||||
@@ -13072,9 +13045,6 @@ packages:
|
||||
resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
reselect@5.1.1:
|
||||
resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
|
||||
|
||||
reselect@5.2.0:
|
||||
resolution: {integrity: sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==}
|
||||
|
||||
@@ -14870,10 +14840,10 @@ snapshots:
|
||||
'@babel/helper-compilation-targets': 7.29.7
|
||||
'@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.0(supports-color@10.2.2))(supports-color@10.2.2)
|
||||
'@babel/helpers': 7.29.2
|
||||
'@babel/parser': 7.29.7
|
||||
'@babel/parser': 7.29.8
|
||||
'@babel/template': 7.29.7
|
||||
'@babel/traverse': 7.29.7(supports-color@10.2.2)
|
||||
'@babel/types': 7.29.7
|
||||
'@babel/types': 7.29.8
|
||||
'@jridgewell/remapping': 2.3.5
|
||||
convert-source-map: 2.0.0
|
||||
debug: 4.4.3(supports-color@10.2.2)
|
||||
@@ -14886,8 +14856,8 @@ snapshots:
|
||||
|
||||
'@babel/generator@7.29.7':
|
||||
dependencies:
|
||||
'@babel/parser': 7.29.7
|
||||
'@babel/types': 7.29.7
|
||||
'@babel/parser': 7.29.8
|
||||
'@babel/types': 7.29.8
|
||||
'@jridgewell/gen-mapping': 0.3.13
|
||||
'@jridgewell/trace-mapping': 0.3.31
|
||||
jsesc: 3.1.0
|
||||
@@ -14908,7 +14878,7 @@ snapshots:
|
||||
'@babel/helper-module-imports@7.29.7(supports-color@10.2.2)':
|
||||
dependencies:
|
||||
'@babel/traverse': 7.29.7(supports-color@10.2.2)
|
||||
'@babel/types': 7.29.7
|
||||
'@babel/types': 7.29.8
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
optional: true
|
||||
@@ -14933,7 +14903,7 @@ snapshots:
|
||||
'@babel/helpers@7.29.2':
|
||||
dependencies:
|
||||
'@babel/template': 7.29.7
|
||||
'@babel/types': 7.29.7
|
||||
'@babel/types': 7.29.8
|
||||
optional: true
|
||||
|
||||
'@babel/parser@7.29.7':
|
||||
@@ -14949,8 +14919,8 @@ snapshots:
|
||||
'@babel/template@7.29.7':
|
||||
dependencies:
|
||||
'@babel/code-frame': 7.29.7
|
||||
'@babel/parser': 7.29.7
|
||||
'@babel/types': 7.29.7
|
||||
'@babel/parser': 7.29.8
|
||||
'@babel/types': 7.29.8
|
||||
optional: true
|
||||
|
||||
'@babel/traverse@7.29.7(supports-color@10.2.2)':
|
||||
@@ -14958,9 +14928,9 @@ snapshots:
|
||||
'@babel/code-frame': 7.29.7
|
||||
'@babel/generator': 7.29.7
|
||||
'@babel/helper-globals': 7.29.7
|
||||
'@babel/parser': 7.29.7
|
||||
'@babel/parser': 7.29.8
|
||||
'@babel/template': 7.29.7
|
||||
'@babel/types': 7.29.7
|
||||
'@babel/types': 7.29.8
|
||||
debug: 4.4.3(supports-color@10.2.2)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
@@ -15225,7 +15195,8 @@ snapshots:
|
||||
enabled: 2.0.0
|
||||
kuler: 2.0.0
|
||||
|
||||
'@date-fns/tz@1.5.0': {}
|
||||
'@date-fns/tz@1.5.0':
|
||||
optional: true
|
||||
|
||||
'@dnd-kit/abstract@0.5.0':
|
||||
dependencies:
|
||||
@@ -16620,12 +16591,12 @@ snapshots:
|
||||
'@libsql/client-wasm@0.14.0':
|
||||
dependencies:
|
||||
'@libsql/core': 0.14.0
|
||||
js-base64: 3.7.8
|
||||
js-base64: 3.9.3
|
||||
optional: true
|
||||
|
||||
'@libsql/core@0.14.0':
|
||||
dependencies:
|
||||
js-base64: 3.7.8
|
||||
js-base64: 3.9.3
|
||||
optional: true
|
||||
|
||||
'@mantine/charts@9.6.0(@mantine/core@9.6.0(@mantine/hooks@9.6.0(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.6.0(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(recharts@3.9.1(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react-is@19.2.7)(react@19.2.7)(redux@5.0.1))':
|
||||
@@ -20766,7 +20737,7 @@ snapshots:
|
||||
|
||||
babel-plugin-react-compiler@1.0.0:
|
||||
dependencies:
|
||||
'@babel/types': 7.29.7
|
||||
'@babel/types': 7.29.8
|
||||
|
||||
bail@2.0.2: {}
|
||||
|
||||
@@ -21070,18 +21041,6 @@ snapshots:
|
||||
|
||||
cluster-key-slot@1.1.1: {}
|
||||
|
||||
cmdk@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
|
||||
dependencies:
|
||||
'@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
|
||||
'@radix-ui/react-dialog': 1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
|
||||
'@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@19.2.7)
|
||||
'@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
|
||||
react: 19.2.7
|
||||
react-dom: 19.2.7(react@19.2.7)
|
||||
transitivePeerDependencies:
|
||||
- '@types/react'
|
||||
- '@types/react-dom'
|
||||
|
||||
cnfast@0.1.0: {}
|
||||
|
||||
co-body@6.2.0:
|
||||
@@ -25287,11 +25246,6 @@ snapshots:
|
||||
optionalDependencies:
|
||||
'@types/react': 19.2.17
|
||||
|
||||
react-resizable-panels@4.12.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
|
||||
dependencies:
|
||||
react: 19.2.7
|
||||
react-dom: 19.2.7(react@19.2.7)
|
||||
|
||||
react-shiki@0.11.0(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2):
|
||||
dependencies:
|
||||
clsx: 2.1.1
|
||||
@@ -25605,8 +25559,6 @@ snapshots:
|
||||
|
||||
require-from-string@2.0.2: {}
|
||||
|
||||
reselect@5.1.1: {}
|
||||
|
||||
reselect@5.2.0: {}
|
||||
|
||||
reserved-identifiers@1.2.0: {}
|
||||
|
||||
@@ -36,6 +36,7 @@
|
||||
"outputs": ["migrations/sqlite/migrate.cjs", "migrations/mysql/migrate.cjs", "migrations/postgresql/migrate.cjs"]
|
||||
},
|
||||
"@homarr/docs#build": {
|
||||
"env": ["TURBO_PLATFORM", "HOMARR_WEBSITE_URL", "WORKSHOP_API_URL", "WORKSHOP_WEB_URL", "KAPA_WEBSITE_ID"],
|
||||
"inputs": ["$TURBO_DEFAULT$", "../../packages/definitions/src/docs/**"],
|
||||
"outputs": [".next/**", "!.next/cache/**", "out/**", "next-env.d.ts"]
|
||||
},
|
||||
|
||||
Reference in new issue
Block a user