Skip to content

Commit 63e9def

Browse files
isTravisisTravis
authored
feat: hubs (#3583)
1 parent f9111dd commit 63e9def

105 files changed

Lines changed: 28395 additions & 269 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎client/components/TemplateEditor/TemplateEditorDialog.tsx‎

Lines changed: 739 additions & 0 deletions
Large diffs are not rendered by default.

‎client/components/TemplateEditor/TemplateEditorParts.tsx‎

Lines changed: 2145 additions & 0 deletions
Large diffs are not rendered by default.

‎client/components/TemplateEditor/index.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
export type {
2+
CollectionDef,
3+
DefaultMemberDef,
4+
FooterLink,
5+
NavEntry,
6+
PageDef,
7+
PubDef,
8+
} from './TemplateEditorParts';
9+
10+
export { default as TemplateEditorDialog } from './TemplateEditorDialog';
11+
export {
12+
buildPreviewContext,
13+
CollectionsEditor,
14+
CommunityOverridesForm,
15+
DefaultMembersEditor,
16+
FooterEditor,
17+
NavigationEditor,
18+
PagesEditor,
19+
StarterPubsEditor,
20+
} from './TemplateEditorParts';

‎client/components/TemplateEditor/templateEditor.scss‎

Lines changed: 367 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,367 @@
1+
.bp3-dialog.template-editor-dialog {
2+
width: 90vw;
3+
max-width: 90vw;
4+
padding: 0;
5+
6+
// Remove default dialog padding
7+
.bp3-dialog-body {
8+
margin: 0;
9+
padding: 0;
10+
}
11+
}
12+
13+
.template-editor-header {
14+
position: sticky;
15+
top: 0;
16+
z-index: 10;
17+
display: flex;
18+
align-items: center;
19+
justify-content: space-between;
20+
padding: 12px 20px;
21+
background: #fff;
22+
border-bottom: 1px solid #e1e1e1;
23+
gap: 12px;
24+
25+
.template-editor-title {
26+
display: flex;
27+
align-items: center;
28+
gap: 8px;
29+
min-width: 0;
30+
31+
h2 {
32+
margin: 0;
33+
font-size: 18px;
34+
white-space: nowrap;
35+
overflow: hidden;
36+
text-overflow: ellipsis;
37+
}
38+
}
39+
40+
.template-header-link {
41+
font-size: 12px;
42+
color: #5c7080;
43+
text-decoration: none;
44+
white-space: nowrap;
45+
padding: 2px 8px;
46+
background: #f0f2f5;
47+
border-radius: 3px;
48+
49+
&:hover {
50+
color: #2b95d6;
51+
background: #e1e8ed;
52+
}
53+
}
54+
55+
.template-editor-actions {
56+
display: flex;
57+
align-items: center;
58+
gap: 6px;
59+
flex-shrink: 0;
60+
}
61+
}
62+
63+
.template-editor-body {
64+
padding: 20px;
65+
overflow-y: auto;
66+
height: calc(90vh - 60px);
67+
}
68+
69+
.editor-tab-panel {
70+
padding: 16px 0;
71+
}
72+
73+
// ─── Dense field rows (Appearance tab) ───────────────────────────
74+
75+
.overrides-form {
76+
.section-label {
77+
font-size: 11px;
78+
font-weight: 600;
79+
text-transform: uppercase;
80+
letter-spacing: 0.5px;
81+
color: #8a9ba8;
82+
margin: 16px 0 6px;
83+
padding-bottom: 4px;
84+
border-bottom: 1px solid #eee;
85+
86+
&:first-child {
87+
margin-top: 0;
88+
}
89+
}
90+
}
91+
92+
.field-row {
93+
display: flex;
94+
align-items: center;
95+
gap: 12px;
96+
padding: 4px 0;
97+
min-height: 32px;
98+
99+
.field-label {
100+
width: 140px;
101+
min-width: 140px;
102+
font-size: 13px;
103+
color: #394b59;
104+
}
105+
106+
.field-input {
107+
flex: 1;
108+
min-width: 0;
109+
max-width: 360px;
110+
111+
.bp3-switch {
112+
margin: 0;
113+
}
114+
}
115+
116+
.field-preview {
117+
width: 24px;
118+
height: 24px;
119+
min-width: 24px;
120+
border-radius: 4px;
121+
border: 1px solid #d8dee4;
122+
}
123+
124+
.field-preview-img {
125+
width: 32px;
126+
height: 32px;
127+
min-width: 32px;
128+
object-fit: contain;
129+
border-radius: 3px;
130+
border: 1px solid #d8dee4;
131+
132+
&.round {
133+
border-radius: 50%;
134+
}
135+
}
136+
}
137+
138+
// ─── Two-column layout (Pages, Collections, Pubs) ───────────────
139+
140+
.two-col-layout {
141+
display: flex;
142+
gap: 1px;
143+
background: #d8dee4;
144+
border: 1px solid #d8dee4;
145+
border-radius: 6px;
146+
overflow: hidden;
147+
height: calc(90vh - 220px);
148+
min-height: 320px;
149+
}
150+
151+
.two-col-sidebar {
152+
width: 240px;
153+
min-width: 240px;
154+
background: #f8f9fb;
155+
display: flex;
156+
flex-direction: column;
157+
158+
.sidebar-toolbar {
159+
display: flex;
160+
align-items: center;
161+
gap: 6px;
162+
padding: 8px 10px;
163+
border-bottom: 1px solid #e1e1e1;
164+
flex-wrap: wrap;
165+
}
166+
167+
.sidebar-list {
168+
flex: 1;
169+
overflow-y: auto;
170+
}
171+
172+
.sidebar-empty {
173+
padding: 20px 12px;
174+
text-align: center;
175+
color: #8a9ba8;
176+
font-size: 12px;
177+
}
178+
}
179+
180+
.sidebar-row {
181+
padding: 8px 12px;
182+
cursor: pointer;
183+
border-left: 3px solid transparent;
184+
transition: background 0.1s;
185+
186+
&:hover {
187+
background: #edf1f5;
188+
}
189+
190+
&:focus-visible {
191+
outline: 2px solid #2b95d6;
192+
outline-offset: -2px;
193+
}
194+
195+
&.selected {
196+
background: #dae3ec;
197+
border-left-color: #2b95d6;
198+
}
199+
200+
.sidebar-row-title {
201+
display: block;
202+
font-size: 13px;
203+
font-weight: 600;
204+
color: #182026;
205+
white-space: nowrap;
206+
overflow: hidden;
207+
text-overflow: ellipsis;
208+
}
209+
210+
.sidebar-row-meta {
211+
display: block;
212+
font-size: 11px;
213+
color: #8a9ba8;
214+
margin-top: 1px;
215+
}
216+
}
217+
218+
.two-col-detail {
219+
flex: 1;
220+
background: #fff;
221+
overflow-y: auto;
222+
padding: 16px 20px;
223+
224+
.bp3-non-ideal-state {
225+
margin-top: 60px;
226+
}
227+
228+
.detail-topbar {
229+
display: flex;
230+
align-items: center;
231+
justify-content: space-between;
232+
margin-bottom: 12px;
233+
padding-bottom: 8px;
234+
border-bottom: 1px solid #eee;
235+
236+
.detail-title {
237+
margin: 0;
238+
font-size: 16px;
239+
}
240+
}
241+
242+
.detail-section {
243+
margin-bottom: 16px;
244+
245+
.section-label {
246+
font-size: 11px;
247+
font-weight: 600;
248+
text-transform: uppercase;
249+
letter-spacing: 0.5px;
250+
color: #8a9ba8;
251+
margin-bottom: 6px;
252+
}
253+
}
254+
}
255+
256+
// ─── Legacy classes (still used by Navigation, Footer, Members) ──
257+
258+
.overrides-row {
259+
display: flex;
260+
gap: 16px;
261+
flex-wrap: wrap;
262+
align-items: flex-start;
263+
264+
> * {
265+
flex: 1;
266+
min-width: 180px;
267+
}
268+
}
269+
270+
.item-card {
271+
margin-bottom: 6px;
272+
padding: 12px 16px;
273+
274+
.item-card-header {
275+
display: flex;
276+
align-items: center;
277+
justify-content: space-between;
278+
margin-bottom: 8px;
279+
280+
strong {
281+
font-size: 14px;
282+
}
283+
}
284+
285+
&.nav-entry-card {
286+
margin-bottom: 4px;
287+
padding: 4px 10px;
288+
289+
.item-card-header {
290+
margin-bottom: 0;
291+
}
292+
}
293+
}
294+
295+
.nav-entry-row {
296+
display: flex;
297+
align-items: center;
298+
gap: 8px;
299+
300+
.nav-entry-controls {
301+
flex: 1;
302+
min-width: 0;
303+
}
304+
}
305+
306+
.layout-editor-wrapper {
307+
margin-top: 8px;
308+
border: 1px solid #ddd;
309+
border-radius: 4px;
310+
padding: 12px;
311+
background: #fafafa;
312+
313+
// Override stickybits positioning inside the dialog scroll context
314+
.block-header {
315+
position: relative !important;
316+
top: 0 !important;
317+
}
318+
}
319+
320+
.pub-content-editor-wrapper {
321+
margin-top: 8px;
322+
border: 1px solid #ddd;
323+
border-radius: 4px;
324+
padding: 8px;
325+
background: #fafafa;
326+
min-height: 120px;
327+
}
328+
329+
.editor-note {
330+
margin-top: 8px;
331+
margin-bottom: 4px;
332+
padding: 6px 10px;
333+
font-size: 12px;
334+
color: #8a9ba8;
335+
background: #f5f7fa;
336+
border-radius: 3px;
337+
line-height: 1.4;
338+
}
339+
340+
// ─── Preview sections ────────────────────────────────────────────
341+
342+
.preview-section {
343+
margin-top: 24px;
344+
345+
> .section-label {
346+
margin-bottom: 8px;
347+
font-size: 13px;
348+
font-weight: 600;
349+
color: #5c7080;
350+
text-transform: uppercase;
351+
letter-spacing: 0.05em;
352+
}
353+
}
354+
355+
.preview-frame {
356+
border: 1px solid #dce0e5;
357+
border-radius: 4px;
358+
overflow: hidden;
359+
pointer-events: none;
360+
// Ensure preview components have enough width for their grid layouts
361+
min-width: 700px;
362+
363+
// Prevent links in preview from being interactive
364+
a {
365+
pointer-events: none;
366+
}
367+
}

0 commit comments

Comments
 (0)