Skip to content

Commit e401416

Browse files
refactor: simplify iframe styling and remove sidebar visibility logic (#371)
Before Submitting This PR, Please Ensure You Have Completed The Following: 1. [ ] Are internal links to wiki documents using [relative file links](https://docusaurus.io/docs/markdown-features/links)? 2. [ ] Are all new documentation files lowercase, with dash separated names (ex. unraid-os.mdx)? 3. [ ] Are all assets (images, etc), located in an assets/ subfolder next to the .md/mdx files? 4. [ ] Have you checked to ensure there aren't other open [Pull Requests](../../../pulls) for the same update/change? 5. [ ] Is the build succeeding? <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Refined iframe display rules to show only essential navigation elements and preserve back-button styling. * **Chores** * Simplified sidebar visibility logic for embedded views and removed related layout adjustments. * Enhanced theme normalization behavior. * **Documentation** * Updated embedding docs and examples to remove the sidebar query parameter and related session-storage guidance. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent 76bca6b commit e401416

File tree

5 files changed

+40
-88
lines changed

5 files changed

+40
-88
lines changed

.github/workflows/pr.yml

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
name: PR Preview
22

33
on:
4-
pull_request:
5-
types:
6-
- opened
7-
- reopened
8-
- synchronize
9-
- closed
104
pull_request_target:
115
types:
126
- opened
@@ -15,12 +9,12 @@ on:
159
- closed
1610

1711
concurrency:
18-
group: pr-preview-${{ github.event.number }}-${{ github.event_name }}
12+
group: pr-preview-${{ github.event.number }}
1913
cancel-in-progress: true
2014

2115
jobs:
2216
lint:
23-
if: ${{ github.event_name == 'pull_request' && github.event.action != 'closed' }}
17+
if: ${{ github.event.action != 'closed' }}
2418
runs-on: ubuntu-latest
2519
permissions:
2620
contents: write
@@ -29,7 +23,9 @@ jobs:
2923
uses: actions/checkout@v5
3024
with:
3125
fetch-depth: 0
32-
ref: ${{ github.head_ref }}
26+
repository: ${{ github.event.pull_request.head.repo.full_name }}
27+
ref: ${{ github.event.pull_request.head.ref }}
28+
persist-credentials: false
3329

3430
- name: Setup Node.js
3531
uses: actions/setup-node@v5
@@ -70,11 +66,14 @@ jobs:
7066
7167
- name: Push lint fixes
7268
if: steps.lint_changes.outputs.has_changes == 'true' && github.repository == github.event.pull_request.head.repo.full_name
69+
env:
70+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
7371
run: |
74-
git push origin HEAD:${{ github.head_ref }} || echo "Unable to push lint fixes (likely due to branch permissions)."
72+
git remote set-url origin https://x-access-token:${GITHUB_TOKEN}@github.com/${{ github.repository }}.git
73+
git push origin HEAD:${{ github.event.pull_request.head.ref }} || echo "Unable to push lint fixes (likely due to branch permissions)."
7574
7675
deploy-preview:
77-
if: ${{ github.event_name == 'pull_request_target' }}
76+
if: ${{ github.event.action != 'closed' }}
7877
runs-on: ubuntu-latest
7978
permissions:
8079
contents: write

embedding.md

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,26 +10,41 @@ Use the following guidance when loading the Unraid documentation inside an ifram
1010

1111
- `theme=<light|dark>` — Forces the initial Docs theme. The value is persisted for the iframe session so reloads stay consistent.
1212
- `entry=<path>` — Marks the logical entry point for the iframe session. Supply an absolute docs path (e.g. `/unraid-os/...`) or a full docs URL; the embedded UI shows a floating back icon that returns visitors to this path and hides itself while you remain on it. Defaults to the first loaded URL if omitted.
13-
- `sidebar=1` — Re-enables the documentation sidebar and table of contents, which are hidden by default in embedded mode.
1413

1514
## Session Storage Keys
1615

1716
The iframe experience uses `window.sessionStorage` to remember state while a browser tab stays open. Host applications normally do not need to interact with these keys, but they are listed here for completeness.
1817

19-
| Key | Purpose |
20-
| ------------------------- | --------------------------------------------------------------- |
21-
| `unraidDocsIframe` | Tracks whether the current session originated inside an iframe. |
22-
| `unraidDocsTheme` | Stores the last used Docs theme so reloads stay consistent. |
23-
| `unraidDocsIframeEntry` | Holds the iframe entry path for the fallback back button. |
24-
| `unraidDocsIframeSidebar` | Marks whether the sidebar was explicitly enabled. |
18+
| Key | Purpose |
19+
| ----------------------- | --------------------------------------------------------------- |
20+
| `unraidDocsIframe` | Tracks whether the current session originated inside an iframe. |
21+
| `unraidDocsTheme` | Stores the last used Docs theme so reloads stay consistent. |
22+
| `unraidDocsIframeEntry` | Holds the iframe entry path for the fallback back button. |
2523

2624
A host can clear these keys to reset the embedded state before opening a new iframe session.
2725

2826
## Example URL Builders
2927

3028
```js
31-
function buildDocsUrl(path, { theme, entry, sidebar } = {}) {
32-
const url = new URL(path, "https://docs.unraid.net");
29+
function prefixLocale(path, locale) {
30+
const cleanLocale = (locale || "").toLowerCase();
31+
if (!cleanLocale || cleanLocale === "en") {
32+
return path;
33+
}
34+
35+
const trimmed = path.replace(/^\/+/, "");
36+
const segments = trimmed.split("/").filter(Boolean);
37+
38+
if (segments[0]?.toLowerCase() === cleanLocale) {
39+
return `/${segments.join("/")}`;
40+
}
41+
42+
return `/${cleanLocale}/${segments.join("/")}`;
43+
}
44+
45+
function buildDocsUrl(path, { theme, entry, locale } = {}) {
46+
const localizedPath = prefixLocale(path, locale);
47+
const url = new URL(localizedPath, "https://docs.unraid.net");
3348
url.searchParams.set("embed", "1");
3449

3550
if (theme === "light" || theme === "dark") {
@@ -40,10 +55,6 @@ function buildDocsUrl(path, { theme, entry, sidebar } = {}) {
4055
url.searchParams.set("entry", entry);
4156
}
4257

43-
if (sidebar) {
44-
url.searchParams.set("sidebar", "1");
45-
}
46-
4758
return url.toString();
4859
}
4960
```
@@ -52,7 +63,7 @@ function buildDocsUrl(path, { theme, entry, sidebar } = {}) {
5263
5364
1. Decide which route should serve as the iframe entry point and supply it via `entry` when loading the iframe.
5465
2. Pass the current host theme if you want the Docs theme to match immediately.
55-
3. Toggle `sidebar=1` only when the host layout can accommodate the wider viewport required for the sidebar.
66+
3. Prefix the docs path with the desired locale segment (for example `/es/...`) if you want to start in a translated version. The iframe experience reads the language from the pathname, not from a query parameter.
5667
4. When tearing down an iframe session, optionally clear the session-storage keys to remove residual state before launching a new session in the same tab.
5768
5869
## Messaging API

src/css/custom.css

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -218,30 +218,16 @@ details:target {
218218
Iframe Styles - Preserved
219219
=========================== */
220220

221-
div[data-iframe="true"] .navbar,
222221
div[data-iframe="true"] header,
223-
div[data-iframe="true"] footer,
224-
div[data-iframe="true"] nav.pagination-nav,
225-
div[data-iframe="true"] div[role="complementary"],
226-
div[data-iframe="true"] aside {
222+
div[data-iframe="true"] .navbar__items:not(.navbar__items--right),
223+
div[data-iframe="true"] .navbar__brand {
227224
display: none !important;
228225
}
229226

230-
div[data-iframe="true"]:not([data-iframe-sidebar="visible"]) .theme-doc-sidebar-container,
231-
div[data-iframe="true"]:not([data-iframe-sidebar="visible"]) .theme-doc-toc-desktop,
232-
div[data-iframe="true"]:not([data-iframe-sidebar="visible"]) .theme-doc-toc-mobile {
227+
div[data-iframe="true"] nav.pagination-nav {
233228
display: none !important;
234229
}
235230

236-
div[data-iframe="true"]:not([data-iframe-sidebar="visible"]) main[class^="docMainContainer_"] {
237-
max-width: 100% !important;
238-
width: 100% !important;
239-
}
240-
241-
div[data-iframe="true"]:not([data-iframe-sidebar="visible"]) main[class^="docMainContainer_"] > div {
242-
padding-top: 1rem !important;
243-
}
244-
245231
div[data-iframe="true"] .iframe-back-button {
246232
position: fixed;
247233
right: 1.5rem;

src/theme/Layout/index.tsx

Lines changed: 1 addition & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,15 @@
1-
import React, { useEffect, useState } from "react";
1+
import React from "react";
22
import Layout from "@theme-original/Layout";
3-
import { useLocation } from "@docusaurus/router";
43
import { ThemeSync } from "./ThemeSync";
54
import { IframeNavigation } from "./IframeNavigation";
65
import { useIframe } from "../../hooks/useIframe";
7-
import {
8-
SIDEBAR_QUERY_PARAM,
9-
SIDEBAR_STORAGE_KEY,
10-
clearSessionValue,
11-
parseBooleanFlag,
12-
readSessionValue,
13-
writeSessionValue,
14-
} from "../../utils/iframeConstants";
156

167
export default function LayoutWrapper(props) {
178
const isInIframeState = useIframe();
18-
const location = useLocation();
19-
const [isSidebarVisible, setIsSidebarVisible] = useState(false);
20-
21-
useEffect(() => {
22-
if (!isInIframeState || typeof window === "undefined") {
23-
setIsSidebarVisible(false);
24-
clearSessionValue(SIDEBAR_STORAGE_KEY);
25-
return;
26-
}
27-
28-
const params = new URLSearchParams(location?.search || window.location.search);
29-
const hasSidebarParam = params.has(SIDEBAR_QUERY_PARAM);
30-
const sidebarFromQuery = parseBooleanFlag(params.get(SIDEBAR_QUERY_PARAM));
31-
32-
if (hasSidebarParam) {
33-
if (sidebarFromQuery) {
34-
setIsSidebarVisible(true);
35-
writeSessionValue(SIDEBAR_STORAGE_KEY, "true");
36-
} else {
37-
setIsSidebarVisible(false);
38-
clearSessionValue(SIDEBAR_STORAGE_KEY);
39-
}
40-
return;
41-
}
42-
43-
const sidebarFromStorage = parseBooleanFlag(readSessionValue(SIDEBAR_STORAGE_KEY));
44-
if (sidebarFromStorage) {
45-
setIsSidebarVisible(true);
46-
return;
47-
}
48-
49-
setIsSidebarVisible(false);
50-
}, [isInIframeState, location]);
519

5210
const dataAttributes = isInIframeState
5311
? {
5412
'data-iframe': 'true',
55-
'data-iframe-sidebar': isSidebarVisible ? 'visible' : 'hidden',
5613
}
5714
: {};
5815

src/utils/iframeConstants.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
export const IFRAME_QUERY_PARAM = "embed";
22
export const THEME_QUERY_PARAM = "theme";
33
export const ENTRY_QUERY_PARAM = "entry";
4-
export const SIDEBAR_QUERY_PARAM = "sidebar";
54

65
export const IFRAME_STORAGE_KEY = "unraidDocsIframe";
76
export const THEME_STORAGE_KEY = "unraidDocsTheme";
87
export const ENTRY_STORAGE_KEY = "unraidDocsIframeEntry";
9-
export const SIDEBAR_STORAGE_KEY = "unraidDocsIframeSidebar";
108

119
const BOOLEAN_TRUE_VALUES = new Set(["1", "true", "yes"]);
1210

@@ -20,6 +18,7 @@ export function parseBooleanFlag(value: string | null): boolean {
2018
return BOOLEAN_TRUE_VALUES.has(value.toLowerCase());
2119
}
2220

21+
2322
export function normalizeTheme(theme: string | null): SupportedTheme | null {
2423
if (!theme) {
2524
return null;

0 commit comments

Comments
 (0)