Skip to content

Commit 639a944

Browse files
btoprobtopro
committed
1 parent c0f436b commit 639a944

File tree

6 files changed

+366
-3
lines changed

6 files changed

+366
-3
lines changed

‎dist/wc-registry.json

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎elements/haxcms-elements/demo/wc-registry.json

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎elements/haxcms-elements/lib/core/haxcms-site-editor-ui.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2344,6 +2344,8 @@ class HAXCMSSiteEditorUI extends HAXCMSThemeParts(
23442344
"clean-two",
23452345
"clean-portfolio-theme",
23462346
"journey-theme",
2347+
"journey-sidebar-theme",
2348+
"journey-topbar-theme",
23472349
"learn-two-theme",
23482350
"polaris-theme",
23492351
"polaris-invent-theme",

‎elements/journey-theme/lib/journey-sidebar-theme.js

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
/**
2+
* Copyright 2025 btopro
3+
* @license Apache-2.0, see License.md for full text.
4+
*/
5+
import { css, html} from "lit";
6+
import { HAXCMSLitElementTheme } from "@haxtheweb/haxcms-elements/lib/core/HAXCMSLitElementTheme.js";
7+
import { store } from "@haxtheweb/haxcms-elements/lib/core/haxcms-site-store.js";
8+
import { autorun, toJS } from "mobx";
9+
import "@haxtheweb/haxcms-elements/lib/ui-components/active-item/site-active-title.js";
10+
11+
/**
12+
* `JourneySidebarTheme`
13+
* `JourneySidebarTheme based on HAXCMS theming ecosystem`
14+
* `This theme is an example of extending an existing theme component`
15+
*
16+
* @microcopy - language worth noting:
17+
* - HAXcms - A headless content management system
18+
* - HAXCMSLitElementTheme - A class that provides correct baseline wiring to build a new theme that HAX can use
19+
*
20+
* @documentation - see HAX docs to learn more about theming
21+
* - Custom theme development - https://haxtheweb.org/documentation/developers/haxsite/custom-theme-development
22+
* - Theme Blocks - https://haxtheweb.org/documentation/developers/theme-blocks
23+
* - DDD - https://haxtheweb.org/documentation/ddd
24+
* - Data Store - https://haxtheweb.org/documentation/developers/haxsite/data-store
25+
* @element journey-sidebar-theme
26+
*/
27+
class JourneySidebarTheme extends HAXCMSLitElementTheme {
28+
/**
29+
* Store the tag name to make it easier to obtain directly.
30+
* @notice function name must be here for tooling to operate correctly
31+
*/
32+
static get tag() {
33+
return "journey-sidebar-theme";
34+
}
35+
36+
// set defaults or tie into the store
37+
constructor() {
38+
super();
39+
this._items = [];
40+
this.activeId = null;
41+
autorun(() => {
42+
this.activeId = toJS(store.activeId);
43+
this._items = toJS(store.manifest.items);
44+
});
45+
}
46+
47+
// properties to respond to the activeID and list of items
48+
static get properties() {
49+
return {
50+
...super.properties,
51+
activeId: { type: String },
52+
_items: { type: Array },
53+
};
54+
}
55+
56+
// allows for global styles to be set against the entire document
57+
// you can also use this to cascade styles down to the theme
58+
// but the more common reason is to influence the body or other things
59+
// put into the global index.html context by the system itself
60+
HAXCMSGlobalStyleSheetContent() {
61+
return [
62+
...super.HAXCMSGlobalStyleSheetContent(),
63+
css`
64+
:root {
65+
--my-theme-low-tone: var(--ddd-theme-default-slateMaxLight);
66+
--my-theme-high-tone: var(--ddd-theme-default-coalyGray);
67+
}
68+
body {
69+
padding: var(--ddd-spacing-0);
70+
margin: var(--ddd-spacing-0);
71+
background-color: var(--my-theme-low-tone);
72+
}
73+
body.dark-mode {
74+
background-color: var(--my-theme-high-tone);
75+
}
76+
`,
77+
];
78+
}
79+
80+
//styles function
81+
static get styles() {
82+
return [
83+
super.styles,
84+
css`
85+
:host {
86+
display: block;
87+
padding: var(--ddd-spacing-0) var(--ddd-spacing-10);
88+
min-width: 400px;
89+
background-color: light-dark(var(--my-theme-low-tone), var(--my-theme-high-tone));
90+
color: light-dark(var(--my-theme-high-tone), var(--my-theme-low-tone));
91+
}
92+
93+
site-title {
94+
font-size: var(--ddd-font-size-l);
95+
}
96+
97+
header {
98+
display: flex;
99+
}
100+
nav {
101+
display: flex;
102+
justify-content: center;
103+
align-items: center;
104+
margin: var(--ddd-spacing-0);
105+
padding: var(--ddd-spacing-0);
106+
top: 0;
107+
left: 0;
108+
bottom: 0;
109+
width: 300px;
110+
position: fixed;
111+
background-color: var(--ddd-primary-3);
112+
padding: var(--ddd-spacing-4);
113+
}
114+
ul {
115+
margin: var(--ddd-spacing-0);
116+
padding: var(--ddd-spacing-2);
117+
flex-direction: column;
118+
display: flex;
119+
}
120+
ul li {
121+
display: block;
122+
margin: var(--ddd-spacing-0);
123+
padding: var(--ddd-spacing-0);
124+
list-style-type: none;
125+
}
126+
ul li a {
127+
display: block;
128+
color: white;
129+
text-decoration: none;
130+
font-size: var(--ddd-font-size-m);
131+
padding: var(--ddd-spacing-0);
132+
cursor: pointer;
133+
line-height: normal;
134+
margin: 20px 0;
135+
text-overflow: ellipsis;
136+
overflow: hidden;
137+
text-align: start;
138+
}
139+
140+
ul li a:hover, ul li a:focus {
141+
text-decoration: underline;
142+
outline-color: var(--ddd-primary-21);
143+
}
144+
145+
.active button {
146+
background-color: light-dark(var(--my-theme-low-tone), var(--my-theme-high-tone));
147+
color: light-dark(var(--my-theme-high-tone), var(--my-theme-low-tone));
148+
font-weight: bold;
149+
}
150+
main {
151+
margin-left: 332px;
152+
}
153+
`,
154+
];
155+
}
156+
157+
render() {
158+
return html`
159+
<nav>
160+
<ul>
161+
${this._items.map((item, index) => {
162+
return html`
163+
<li class="${item.id === this.activeId ? "active" : ""}">
164+
<a href="${item.slug}">${item.title}</a>
165+
</li>
166+
`;
167+
}
168+
)}
169+
</ul>
170+
</nav>
171+
<main>
172+
<site-active-title></site-active-title>
173+
<article>
174+
<!-- this block and names are required for HAX to edit the content of the page. contentcontainer, slot, and wrapping the slot. -->
175+
<div id="contentcontainer"><div id="slot"><slot></slot></div></div>
176+
</article>
177+
</main>
178+
`;
179+
}
180+
181+
}
182+
globalThis.customElements.define(JourneySidebarTheme.tag, JourneySidebarTheme);
183+
export { JourneySidebarTheme };

‎elements/journey-theme/lib/journey-topbar-theme.js

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
/**
2+
* Copyright 2025 btopro
3+
* @license Apache-2.0, see License.md for full text.
4+
*/
5+
import { css, html} from "lit";
6+
import { HAXCMSLitElementTheme } from "@haxtheweb/haxcms-elements/lib/core/HAXCMSLitElementTheme.js";
7+
import { store } from "@haxtheweb/haxcms-elements/lib/core/haxcms-site-store.js";
8+
import { autorun, toJS } from "mobx";
9+
import "@haxtheweb/haxcms-elements/lib/ui-components/active-item/site-active-title.js";
10+
11+
/**
12+
* `JourneyTopbarTheme`
13+
* `JourneyTopbarTheme based on HAXCMS theming ecosystem`
14+
* `This theme is an example of extending an existing theme component`
15+
*
16+
* @microcopy - language worth noting:
17+
* - HAXcms - A headless content management system
18+
* - HAXCMSLitElementTheme - A class that provides correct baseline wiring to build a new theme that HAX can use
19+
*
20+
* @documentation - see HAX docs to learn more about theming
21+
* - Custom theme development - https://haxtheweb.org/documentation/developers/haxsite/custom-theme-development
22+
* - Theme Blocks - https://haxtheweb.org/documentation/developers/theme-blocks
23+
* - DDD - https://haxtheweb.org/documentation/ddd
24+
* - Data Store - https://haxtheweb.org/documentation/developers/haxsite/data-store
25+
* @element journey-topbar-theme
26+
*/
27+
class JourneyTopbarTheme extends HAXCMSLitElementTheme {
28+
/**
29+
* Store the tag name to make it easier to obtain directly.
30+
* @notice function name must be here for tooling to operate correctly
31+
*/
32+
static get tag() {
33+
return "journey-topbar-theme";
34+
}
35+
36+
// set defaults or tie into the store
37+
constructor() {
38+
super();
39+
this._items = [];
40+
this.activeId = null;
41+
autorun(() => {
42+
this.activeId = toJS(store.activeId);
43+
this._items = toJS(store.manifest.items);
44+
});
45+
}
46+
47+
// properties to respond to the activeID and list of items
48+
static get properties() {
49+
return {
50+
...super.properties,
51+
activeId: { type: String },
52+
_items: { type: Array },
53+
};
54+
}
55+
56+
// allows for global styles to be set against the entire document
57+
// you can also use this to cascade styles down to the theme
58+
// but the more common reason is to influence the body or other things
59+
// put into the global index.html context by the system itself
60+
HAXCMSGlobalStyleSheetContent() {
61+
return [
62+
...super.HAXCMSGlobalStyleSheetContent(),
63+
css`
64+
:root {
65+
--my-theme-low-tone: var(--ddd-theme-default-slateMaxLight);
66+
--my-theme-high-tone: var(--ddd-theme-default-coalyGray);
67+
}
68+
body {
69+
padding: var(--ddd-spacing-0);
70+
margin: var(--ddd-spacing-0);
71+
background-color: var(--my-theme-low-tone);
72+
}
73+
body.dark-mode {
74+
background-color: var(--my-theme-high-tone);
75+
}
76+
`,
77+
];
78+
}
79+
80+
//styles function
81+
static get styles() {
82+
return [
83+
super.styles,
84+
css`
85+
:host {
86+
display: block;
87+
padding: var(--ddd-spacing-0) var(--ddd-spacing-10);
88+
min-width: 400px;
89+
max-width: 960px;
90+
margin: 0 auto;
91+
background-color: light-dark(var(--my-theme-low-tone), var(--my-theme-high-tone));
92+
color: light-dark(var(--my-theme-high-tone), var(--my-theme-low-tone));
93+
}
94+
95+
site-title {
96+
font-size: var(--ddd-font-size-l);
97+
}
98+
99+
header {
100+
display: flex;
101+
}
102+
nav {
103+
display: flex;
104+
margin: var(--ddd-spacing-0);
105+
padding: var(--ddd-spacing-0);
106+
top: 0;
107+
left: 0;
108+
right: 0;
109+
position: fixed;
110+
background-color: var(--ddd-primary-3);
111+
padding: var(--ddd-spacing-2);
112+
}
113+
ul {
114+
margin: var(--ddd-spacing-0);
115+
padding: var(--ddd-spacing-0);
116+
display: flex;
117+
}
118+
ul li {
119+
display: block;
120+
margin: var(--ddd-spacing-0);
121+
padding: var(--ddd-spacing-0);
122+
list-style-type: none;
123+
}
124+
ul li a {
125+
color: white;
126+
text-decoration: none;
127+
font-size: var(--ddd-font-size-4xs);
128+
cursor: pointer;
129+
line-height: normal;
130+
text-overflow: ellipsis;
131+
overflow: hidden;
132+
text-align: start;
133+
}
134+
135+
ul li a:hover, ul li a:focus {
136+
text-decoration: underline;
137+
outline-color: var(--ddd-primary-21);
138+
}
139+
140+
.active button {
141+
background-color: light-dark(var(--my-theme-low-tone), var(--my-theme-high-tone));
142+
color: light-dark(var(--my-theme-high-tone), var(--my-theme-low-tone));
143+
font-weight: bold;
144+
}
145+
main {
146+
margin-top: 64px;
147+
}
148+
`,
149+
];
150+
}
151+
152+
render() {
153+
return html`
154+
<nav>
155+
<ul>
156+
${this._items.map((item, index) => {
157+
return html`
158+
<li class="${item.id === this.activeId ? "active" : ""}">
159+
<a href="${item.slug}">${item.title}</a>
160+
</li>
161+
`;
162+
}
163+
)}
164+
</ul>
165+
</nav>
166+
<main>
167+
<site-active-title></site-active-title>
168+
<article>
169+
<!-- this block and names are required for HAX to edit the content of the page. contentcontainer, slot, and wrapping the slot. -->
170+
<div id="contentcontainer"><div id="slot"><slot></slot></div></div>
171+
</article>
172+
</main>
173+
`;
174+
}
175+
176+
}
177+
globalThis.customElements.define(JourneyTopbarTheme.tag, JourneyTopbarTheme);
178+
export { JourneyTopbarTheme };

‎wc-registry.json

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)