@netfoundry/docusaurus-theme 0.1.2 → 0.1.3

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.
Files changed (3) hide show
  1. package/README.md +146 -0
  2. package/css/legacy.css +4 -3
  3. package/package.json +2 -2
package/README.md ADDED
@@ -0,0 +1,146 @@
1
+ # @netfoundry/docusaurus-theme
2
+
3
+ A drop-in Docusaurus theme for NetFoundry documentation sites. Provides a consistent layout, footer, star banner, and styling across all NetFoundry/OpenZiti documentation.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @netfoundry/docusaurus-theme
9
+ # or
10
+ yarn add @netfoundry/docusaurus-theme
11
+ ```
12
+
13
+ ## Usage
14
+
15
+ ### 1. Register the theme
16
+
17
+ In your `docusaurus.config.ts`:
18
+
19
+ ```typescript
20
+ export default {
21
+ // ...
22
+ themes: [
23
+ '@netfoundry/docusaurus-theme',
24
+ ],
25
+ // ...
26
+ };
27
+ ```
28
+
29
+ ### 2. Configure the theme
30
+
31
+ Add NetFoundry-specific configuration to `themeConfig`:
32
+
33
+ ```typescript
34
+ export default {
35
+ // ...
36
+ themeConfig: {
37
+ netfoundry: {
38
+ showStarBanner: true,
39
+ starBanner: {
40
+ repoUrl: 'https://github.com/openziti/ziti',
41
+ label: 'Star OpenZiti on GitHub',
42
+ },
43
+ footer: {
44
+ description: 'Your site description here.',
45
+ socialProps: {
46
+ githubUrl: 'https://github.com/your-org/',
47
+ youtubeUrl: 'https://youtube.com/your-channel/',
48
+ linkedInUrl: 'https://www.linkedin.com/company/your-company/',
49
+ twitterUrl: 'https://twitter.com/your-handle/',
50
+ },
51
+ },
52
+ },
53
+ // ... other theme config
54
+ },
55
+ };
56
+ ```
57
+
58
+ ## What's Included
59
+
60
+ ### Automatic Layout
61
+ The theme automatically provides:
62
+ - **NetFoundry Layout** - Wraps all pages with consistent structure
63
+ - **Footer** - Configurable footer with social links and site sections
64
+ - **Star Banner** - Optional GitHub star call-to-action banner
65
+
66
+ ### CSS Variables & Styling
67
+ All CSS is automatically loaded. No need to add `@import` statements to your `custom.css`.
68
+
69
+ Includes:
70
+ - NetFoundry brand colors and typography
71
+ - Light/dark mode support
72
+ - Responsive design tokens
73
+ - Code block styling
74
+
75
+ ### Components
76
+
77
+ Import UI components directly:
78
+
79
+ ```tsx
80
+ import { Alert, CodeBlock, OsTabs } from '@netfoundry/docusaurus-theme/ui';
81
+ ```
82
+
83
+ ### Remark Plugins
84
+
85
+ Import remark plugins for your docs config:
86
+
87
+ ```typescript
88
+ import { remarkYouTube, remarkCodeSections } from '@netfoundry/docusaurus-theme/plugins';
89
+
90
+ export default {
91
+ presets: [
92
+ ['classic', {
93
+ docs: {
94
+ remarkPlugins: [remarkYouTube, remarkCodeSections],
95
+ },
96
+ }],
97
+ ],
98
+ };
99
+ ```
100
+
101
+ ### Node Utilities
102
+
103
+ Import Node.js utilities:
104
+
105
+ ```typescript
106
+ import { pluginHotjar, cleanUrl, docUrl } from '@netfoundry/docusaurus-theme/node';
107
+ ```
108
+
109
+ ## Package Exports
110
+
111
+ | Export | Description |
112
+ |--------|-------------|
113
+ | `@netfoundry/docusaurus-theme` | Theme entry point (for `themes` array) |
114
+ | `@netfoundry/docusaurus-theme/ui` | React components |
115
+ | `@netfoundry/docusaurus-theme/plugins` | Remark plugins |
116
+ | `@netfoundry/docusaurus-theme/node` | Node.js utilities |
117
+ | `@netfoundry/docusaurus-theme/css/*` | Individual CSS files |
118
+
119
+ ## Customization
120
+
121
+ ### Swizzling Components
122
+
123
+ To customize the layout beyond configuration:
124
+
125
+ ```bash
126
+ npx docusaurus swizzle @netfoundry/docusaurus-theme Layout --wrap
127
+ ```
128
+
129
+ ### Custom CSS
130
+
131
+ Add your own CSS after the theme styles by creating `src/css/custom.css`:
132
+
133
+ ```css
134
+ /* Your custom overrides */
135
+ :root {
136
+ --ifm-color-primary: #your-color;
137
+ }
138
+ ```
139
+
140
+ ## Contributing
141
+
142
+ See [CONTRIBUTING.md](../../CONTRIBUTING.md) at the repository root for development setup, workflow, and examples.
143
+
144
+ ## License
145
+
146
+ Apache-2.0
package/css/legacy.css CHANGED
@@ -86,7 +86,8 @@
86
86
  --ziti-code-block-border-color: rgb(197, 199, 201);
87
87
  --ziti-code-block-font-color: rgb(57, 58, 52);
88
88
  --ifm-code-padding-horizontal: 7px;
89
- --nf-tab-color: 255, 182, 193;
89
+ --nf-tab-color: 222, 222, 222;
90
+ --nf-tab-color-rgb: rgb(var(--nf-tab-color));
90
91
  }
91
92
  @media (max-height: 1024px) {
92
93
  /*for smaller screens, reduce space definitions*/
@@ -2007,7 +2008,7 @@ li a code {
2007
2008
  border-radius: 7px;
2008
2009
  }
2009
2010
  [class*="tabItem_"][role="tabpanel"] {
2010
- background-color: rgb(var(--nf-tab-color));
2011
+ background-color: var(--nf-tab-color-rgb);
2011
2012
  padding: 1em 0.5em;
2012
2013
  }
2013
2014
 
@@ -2033,7 +2034,7 @@ li a code {
2033
2034
  }
2034
2035
 
2035
2036
  .tabs__item.tabs__item--active {
2036
- background-color: rgb(var(--nf-tab-color));
2037
+ background-color: var(--nf-tab-color-rgb);
2037
2038
  border-bottom-width: 0;
2038
2039
  pointer-events: none;
2039
2040
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@netfoundry/docusaurus-theme",
3
- "version": "0.1.2",
3
+ "version": "0.1.3",
4
4
  "description": "NetFoundry Docusaurus theme with shared layout, footer, and styling",
5
5
  "main": "src/index.ts",
6
6
  "types": "src/index.ts",
@@ -56,7 +56,7 @@
56
56
  "repository": {
57
57
  "type": "git",
58
58
  "url": "https://github.com/netfoundry/docusaurus-shared.git",
59
- "directory": "lib/packages/docusaurus-theme"
59
+ "directory": "packages/docusaurus-theme"
60
60
  },
61
61
  "keywords": [
62
62
  "docusaurus",