@f5-sales-demo/docs-theme 4.4.3 → 4.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ProviderHeader.astro +116 -0
- package/index.ts +4 -1
- package/package.json +3 -2
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
---
|
|
2
|
+
import LanguageSelect from 'virtual:starlight/components/LanguageSelect';
|
|
3
|
+
import Search from 'virtual:starlight/components/Search';
|
|
4
|
+
import SiteTitle from 'virtual:starlight/components/SiteTitle';
|
|
5
|
+
import SocialIcons from 'virtual:starlight/components/SocialIcons';
|
|
6
|
+
import ThemeSelect from 'virtual:starlight/components/ThemeSelect';
|
|
7
|
+
import config from 'virtual:starlight/user-config';
|
|
8
|
+
import megaMenuConfig from 'virtual:starlight-mega-menu/config';
|
|
9
|
+
import MegaMenu from '@f5-sales-demo/starlight-mega-menu/components/MegaMenu.tsx';
|
|
10
|
+
import MegaMenuMobile from '@f5-sales-demo/starlight-mega-menu/components/MegaMenuMobile.tsx';
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Render the `Search` component if Pagefind is enabled or the default search component has been overridden.
|
|
14
|
+
*/
|
|
15
|
+
const shouldRenderSearch = config.pagefind || config.components.Search !== '@astrojs/starlight/components/Search.astro';
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
<div class="header sl-mega-menu-header">
|
|
19
|
+
<div class="title-wrapper sl-flex">
|
|
20
|
+
<SiteTitle />
|
|
21
|
+
</div>
|
|
22
|
+
<nav class="smm-desktop-nav">
|
|
23
|
+
<MegaMenu client:only="react" config={megaMenuConfig} />
|
|
24
|
+
</nav>
|
|
25
|
+
<div class="sl-flex print:hidden">
|
|
26
|
+
{shouldRenderSearch && <Search />}
|
|
27
|
+
</div>
|
|
28
|
+
<div class="smm-mobile-toggle">
|
|
29
|
+
<MegaMenuMobile client:only="react" config={megaMenuConfig} />
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
|
|
33
|
+
<style>
|
|
34
|
+
@layer starlight.core {
|
|
35
|
+
.header {
|
|
36
|
+
display: flex;
|
|
37
|
+
gap: var(--sl-nav-gap);
|
|
38
|
+
justify-content: space-between;
|
|
39
|
+
align-items: center;
|
|
40
|
+
height: 100%;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.title-wrapper {
|
|
44
|
+
/* Prevent long titles overflowing and covering the search and menu buttons on narrow viewports. */
|
|
45
|
+
overflow: clip;
|
|
46
|
+
/* Avoid clipping focus ring around link inside title wrapper. */
|
|
47
|
+
padding: 0.25rem;
|
|
48
|
+
margin: -0.25rem;
|
|
49
|
+
min-width: 0;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.right-group,
|
|
53
|
+
.social-icons {
|
|
54
|
+
gap: 1rem;
|
|
55
|
+
align-items: center;
|
|
56
|
+
}
|
|
57
|
+
.social-icons::after {
|
|
58
|
+
content: '';
|
|
59
|
+
height: 2rem;
|
|
60
|
+
border-inline-end: 1px solid var(--sl-color-gray-5);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* Desktop nav is hidden on small screens */
|
|
64
|
+
.smm-desktop-nav {
|
|
65
|
+
display: none;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Mobile toggle is visible on small screens */
|
|
69
|
+
.smm-mobile-toggle {
|
|
70
|
+
display: flex;
|
|
71
|
+
align-items: center;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
@media (min-width: 50rem) {
|
|
75
|
+
:global(:root[data-has-sidebar]) {
|
|
76
|
+
--__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
|
|
77
|
+
}
|
|
78
|
+
:global(:root:not([data-has-toc])) {
|
|
79
|
+
--__toc-width: 0rem;
|
|
80
|
+
}
|
|
81
|
+
.header {
|
|
82
|
+
--__sidebar-width: max(0rem, var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x));
|
|
83
|
+
--__main-column-fr: calc(
|
|
84
|
+
(
|
|
85
|
+
100% + var(--__sidebar-pad, 0rem) - var(--__toc-width, var(--sl-sidebar-width)) -
|
|
86
|
+
(2 * var(--__toc-width, var(--sl-nav-pad-x))) - var(--sl-content-inline-start, 0rem) -
|
|
87
|
+
var(--sl-content-width)
|
|
88
|
+
) / 2
|
|
89
|
+
);
|
|
90
|
+
display: grid;
|
|
91
|
+
grid-template-columns:
|
|
92
|
+
/* 1 (site title) */
|
|
93
|
+
auto
|
|
94
|
+
/* 2 (mega-menu nav) */
|
|
95
|
+
1fr
|
|
96
|
+
/* 3 (search box) */
|
|
97
|
+
auto
|
|
98
|
+
/* 4 (right items) */
|
|
99
|
+
auto;
|
|
100
|
+
align-content: center;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/* Show desktop nav, hide mobile toggle */
|
|
104
|
+
.smm-desktop-nav {
|
|
105
|
+
display: flex;
|
|
106
|
+
align-items: center;
|
|
107
|
+
justify-content: center;
|
|
108
|
+
min-width: 0;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.smm-mobile-toggle {
|
|
112
|
+
display: none;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
</style>
|
package/index.ts
CHANGED
|
@@ -25,7 +25,10 @@ export default function f5xcDocsTheme(): StarlightPlugin {
|
|
|
25
25
|
components: {
|
|
26
26
|
...config.components,
|
|
27
27
|
...(process.env.DOCS_PROFILE === 'canonical-provider'
|
|
28
|
-
? {
|
|
28
|
+
? {
|
|
29
|
+
Header: '@f5-sales-demo/docs-theme/components/ProviderHeader.astro',
|
|
30
|
+
Sidebar: '@f5-sales-demo/docs-theme/components/ProviderSidebar.astro',
|
|
31
|
+
}
|
|
29
32
|
: {}),
|
|
30
33
|
Banner: '@f5-sales-demo/docs-theme/components/Banner.astro',
|
|
31
34
|
EditLink: '@f5-sales-demo/docs-theme/components/EditLink.astro',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@f5-sales-demo/docs-theme",
|
|
3
|
-
"version": "4.4.
|
|
3
|
+
"version": "4.4.4",
|
|
4
4
|
"description": "F5 Distributed Cloud branded Starlight documentation theme",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"engines": {
|
|
@@ -42,7 +42,8 @@
|
|
|
42
42
|
"./src/i18n/prompt.ts": "./src/i18n/prompt.ts",
|
|
43
43
|
"./src/utils/localize-ecosystem-href.ts": "./src/utils/localize-ecosystem-href.ts",
|
|
44
44
|
"./canonical-route-middleware": "./canonical-route-middleware.ts",
|
|
45
|
-
"./components/ProviderSidebar.astro": "./components/ProviderSidebar.astro"
|
|
45
|
+
"./components/ProviderSidebar.astro": "./components/ProviderSidebar.astro",
|
|
46
|
+
"./components/ProviderHeader.astro": "./components/ProviderHeader.astro"
|
|
46
47
|
},
|
|
47
48
|
"files": [
|
|
48
49
|
"index.ts",
|