Skip to content

Commit 0e13a45

Browse files
walkthunderwalkthunder
committed
feat(pageHeader): Update styles of page header.
1 parent 351f2e3 commit 0e13a45

File tree

2 files changed

+113
-47
lines changed

2 files changed

+113
-47
lines changed

‎assets/plugin-styles.txt.css

Lines changed: 50 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,11 +93,59 @@
9393
.sidebar-section-header
9494
{
9595
margin: 0em 0 0em var(--sidebar-margin);
96-
text-transform: uppercase;
9796
letter-spacing: 0.06em;
9897
font-weight: 600;
9998
}
10099

100+
.sidebar-section-header-brand {
101+
margin: 1em;
102+
margin-left: 0;
103+
/* margin: 0em 0 0em var(--sidebar-margin); */
104+
text-transform: uppercase;
105+
letter-spacing: 0.06em;
106+
font-weight: 600;
107+
color: var(--site-name-color);
108+
font-size: var(--site-name-size);
109+
font-weight: var(--site-name-weight);
110+
z-index: 1;
111+
cursor: pointer;
112+
line-height: 1.2;
113+
text-decoration: none;
114+
display: flex;
115+
justify-content: flex-start;
116+
align-items: center;
117+
}
118+
.sidebar-section-header-brand > span {
119+
display: block;
120+
line-height: 1.2;
121+
}
122+
.sidebar-section-header-brand-logo {
123+
margin-right: 6px;
124+
border-radius: 8px;
125+
width: 24px;
126+
height: 24px;
127+
object-fit: contain;
128+
}
129+
.theme-light .sidebar-section-header-brand-logo {
130+
/* filter: invert(1); */
131+
}
132+
133+
134+
.sidebar-section-header-slogan {
135+
letter-spacing: 0.06em;
136+
font-weight: 600;
137+
color: var(--site-name-color);
138+
font-size: var(--site-name-size);
139+
font-weight: var(--site-name-weight);
140+
z-index: 1;
141+
line-height: 1.2;
142+
padding: 4px 32px 32px 0;
143+
text-decoration: none;
144+
display: flex;
145+
justify-content: flex-start;
146+
align-items: center;
147+
}
148+
101149
.sidebar-content {
102150
width: var(--sidebar-width);
103151
line-height: var(--line-height-tight);
@@ -232,7 +280,7 @@
232280
height: 100%;
233281
width: auto;
234282
margin: var(--sidebar-margin);
235-
margin-top: 3em;
283+
/* margin-top: 3em; */
236284
margin-bottom: 0;
237285
}
238286

‎src/html-generation/html-generator.ts

Lines changed: 63 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -10,53 +10,24 @@ import { log } from "../moreOnLog";
1010
import { StatsView } from "src/statsView";
1111
import InvioPlugin from "src/main";
1212

13-
const LogoSVG = `<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg314096" viewBox="0 0 1024 768" height="768px" width="1024px" version="1.1">
14-
<metadata id="metadata314102">
15-
<rdf:rdf>
16-
<cc:work rdf:about="">
17-
<dc:format>image/svg+xml</dc:format>
18-
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type>
19-
</cc:work>
20-
</rdf:rdf>
21-
</metadata>
22-
<defs id="defs314100"></defs>
23-
<linearGradient spreadMethod="pad" y2="30%" x2="-10%" y1="120%" x1="30%" id="3d_gradient2-logo-a31de0a3-52bf-4afd-a50e-e85d6d052b76">
24-
<stop id="stop314077" stop-opacity="1" stop-color="#ffffff" offset="0%"></stop>
25-
<stop id="stop314079" stop-opacity="1" stop-color="#000000" offset="100%"></stop>
26-
</linearGradient>
27-
<linearGradient gradientTransform="rotate(-30)" spreadMethod="pad" y2="30%" x2="-10%" y1="120%" x1="30%" id="3d_gradient3-logo-a31de0a3-52bf-4afd-a50e-e85d6d052b76">
28-
<stop id="stop314082" stop-opacity="1" stop-color="#ffffff" offset="0%"></stop>
29-
<stop id="stop314084" stop-opacity="1" stop-color="#cccccc" offset="50%"></stop>
30-
<stop id="stop314086" stop-opacity="1" stop-color="#000000" offset="100%"></stop>
31-
</linearGradient>
32-
<g id="logo-group">
33-
<image xlink:href="" id="container" x="272" y="144" width="480" height="480" style="display: none;" transform="translate(0 0)"></image>
34-
<g id="logo-center" transform="translate(153.4774500000001 0)">
35-
<image xlink:href="" id="icon_container" x="0" y="0" style="display: none;"></image>
36-
<g id="slogan" style="font-style:normal;font-weight:300;font-size:32px;line-height:1;font-family:'Montserrat Light Alt1';font-variant-ligatures:none;text-align:center;text-anchor:middle" transform="translate(0 0)"></g>
37-
<g id="title" style="font-style:normal;font-weight:300;font-size:72px;line-height:1;font-family:'Montserrat Light Alt1';font-variant-ligatures:none;text-align:center;text-anchor:middle" transform="translate(0 0)">
38-
<path id="path314105" style="font-style:normal;font-weight:300;font-size:72px;line-height:1;font-family:'Montserrat Light Alt1';font-variant-ligatures:none;text-align:center;text-anchor:middle" d="M 416.22931,-50.4 V 0 h 3.672 v -50.4 z" stroke-width="0" stroke-linejoin="miter" stroke-miterlimit="2" fill="#ed3223" stroke="#ed3223" transform="translate(0 353.8) translate(50 -40.35999999999998) scale(2.8) translate(-416.22931 50.4)"></path>
39-
<path id="path314107" style="font-style:normal;font-weight:300;font-size:72px;line-height:1;font-family:'Montserrat Light Alt1';font-variant-ligatures:none;text-align:center;text-anchor:middle" d="m 478.50369,-50.4 h -3.672 v 43.776 l -34.272,-43.776 h -3.096 V 0 h 3.672 V -43.776 L 475.47969,0 h 3.024 z" stroke-width="0" stroke-linejoin="miter" stroke-miterlimit="2" fill="#b25156" stroke="#b25156" transform="translate(0 353.8) translate(126.25626399999989 -40.35999999999998) scale(2.8) translate(-437.46369 50.4)"></path>
40-
<path id="path314109" style="font-style:normal;font-weight:300;font-size:72px;line-height:1;font-family:'Montserrat Light Alt1';font-variant-ligatures:none;text-align:center;text-anchor:middle" d="m 535.64919,-50.4 h -3.816 l -20.376,45.648 -20.376,-45.648 h -4.032 l 22.464,50.4 h 3.672 z" stroke-width="0" stroke-linejoin="miter" stroke-miterlimit="2" fill="#777089" stroke="#777089" transform="translate(0 353.8) translate(281.8956639999999 -40.35999999999998) scale(2.8) translate(-487.04919 50.4)"></path>
41-
<path id="path314111" style="font-style:normal;font-weight:300;font-size:72px;line-height:1;font-family:'Montserrat Light Alt1';font-variant-ligatures:none;text-align:center;text-anchor:middle" d="M 543.77619,-50.4 V 0 h 3.672 v -50.4 z" stroke-width="0" stroke-linejoin="miter" stroke-miterlimit="2" fill="#3b8ebc" stroke="#3b8ebc" transform="translate(0 353.8) translate(457.5312640000001 -40.35999999999998) scale(2.8) translate(-543.77619 50.4)"></path>
42-
<path id="path314113" style="font-style:normal;font-weight:300;font-size:72px;line-height:1;font-family:'Montserrat Light Alt1';font-variant-ligatures:none;text-align:center;text-anchor:middle" d="m 573.00256,-2.952 c 3.96,2.232 8.424,3.312 13.392,3.312 4.896,0 9.36,-1.08 13.392,-3.312 3.96,-2.16 7.056,-5.256 9.36,-9.144 2.304,-3.888 3.456,-8.208 3.456,-13.104 0,-4.824 -1.152,-9.216 -3.456,-13.104 -2.304,-3.888 -5.4,-6.912 -9.36,-9.144 -4.032,-2.16 -8.496,-3.312 -13.392,-3.312 -4.968,0 -9.432,1.152 -13.392,3.384 -4.032,2.232 -7.128,5.256 -9.432,9.144 -2.304,3.888 -3.384,8.28 -3.384,13.032 0,4.824 1.08,9.144 3.384,13.032 2.304,3.888 5.4,6.984 9.432,9.216 z m 24.84,-2.952 c -3.456,1.944 -7.272,2.88 -11.448,2.88 -4.248,0 -8.064,-0.936 -11.52,-2.88 -3.456,-1.872 -6.12,-4.536 -8.064,-7.92 -2.016,-3.384 -2.952,-7.2 -2.952,-11.376 0,-4.176 0.936,-7.92 2.952,-11.304 1.944,-3.384 4.608,-6.048 8.064,-7.992 3.456,-1.872 7.272,-2.88 11.52,-2.88 4.176,0 7.992,1.008 11.448,2.88 3.384,1.944 6.048,4.608 8.064,7.992 1.944,3.384 2.952,7.128 2.952,11.304 0,4.176 -1.008,7.992 -2.952,11.376 -2.016,3.384 -4.68,6.048 -8.064,7.92 z" stroke-width="0" stroke-linejoin="miter" stroke-miterlimit="2" fill="#00adef" stroke="#00adef" transform="translate(0 353.8) translate(520.2802999999999 -41.36799999999999) scale(2.8) translate(-560.18656 50.76)"></path>
43-
</g>
44-
<image xlink:href="" id="icon" x="0" y="0" style="display: none;"></image>
45-
</g>
46-
</g>
47-
</svg>`;
48-
13+
const LogoSVGDefault = `<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg238067" height="768px" width="1024px" version="1.1" viewBox="0 0 100 100" class="svg-icon invio-sync-wait"><g fill-rule="evenodd" style="transform: scale3d(0.89, 0.99, 1.5);"><path d="M27 97.93A56.08 56.08 0 0 1 9.29 19.08 55.77 55.77 0 0 0 23.59 50l.07.07c.53.58 1.06 1.14 1.62 1.7s1.12 1.09 1.72 1.62L45.54 72a14.93 14.93 0 0 1 4.53 10.93v1.59a15.12 15.12 0 0 1-8 13.52A15.09 15.09 0 0 1 27 97.93z" style="fill: var(--icon-color);"></path><path d="M23.59 50a55.77 55.77 0 0 1-14.3-30.92A56.46 56.46 0 0 1 27 2.08 15.08 15.08 0 0 1 42.11 2a15.12 15.12 0 0 1 8 13.52v1.59A15 15 0 0 1 45.55 28l-22 22z" fill="#999999" opacity=".8"></path><path d="M85.16 2.08a56.08 56.08 0 0 1 17.67 78.84A55.77 55.77 0 0 0 88.53 50l-.08-.07c-.52-.58-1.06-1.14-1.62-1.7s-1.12-1.09-1.69-1.62L66.58 28a14.93 14.93 0 0 1-4.53-10.93v-1.55A15.12 15.12 0 0 1 70 2a15.08 15.08 0 0 1 15.15.08z" style="fill: var(--icon-color);"></path><path d="M88.53 50a55.77 55.77 0 0 1 14.3 30.92 56.35 56.35 0 0 1-17.67 17 15.46 15.46 0 0 1-23.11-13.44v-1.59A15 15 0 0 1 66.57 72l22-22z" fill="#999999" opacity=".8"></path></g></svg>`
4914

5015
export interface IMetaConfig {
51-
title?: string;
16+
// Site Config
17+
home?: string; // Home link, only used in index.md for site config
18+
brand?: string; // Brand name
19+
slogan?: string;
20+
icon?: string;
21+
22+
// Page Config
23+
title?: string; // Page title
5224
description?: string;
5325
keywords?: string[];
54-
icon?: string;
5526
publish?: boolean;
5627
permalink?: string;
5728
}
5829

59-
const InheriableMeta: Array<keyof IMetaConfig> = [ 'icon' ];
30+
const InheriableMeta: Array<keyof IMetaConfig> = [ 'icon', 'home', 'brand', 'slogan' ];
6031

6132
export class HTMLGenerator {
6233
//#region Main Generation Functions
@@ -103,6 +74,13 @@ export class HTMLGenerator {
10374
rightSidebar.appendChild(outline);
10475
}
10576

77+
// inject icon and title
78+
const config = this.getMeta(file);
79+
const pageTitle = config?.title || app.vault.getName();
80+
81+
let brandHeader = this.generateBrandHeader(usingDocument, config.brand, config.icon, config.slogan, config?.home);
82+
leftSidebar.appendChild(brandHeader);
83+
10684
// inject darkmode toggle
10785
if (InvioSettingTab.settings.addDarkModeToggle && !usingDocument.querySelector(".theme-toggle-container-inline, .theme-toggle-container")) {
10886
let toggle = this.generateDarkmodeToggle(false, usingDocument);
@@ -114,10 +92,8 @@ export class HTMLGenerator {
11492
let tree = GlobalDataGenerator.getFileTree();
11593
if (InvioSettingTab.settings.makeNamesWebStyle) tree.makeLinksWebStyle();
11694

117-
const config = this.getMeta(file);
118-
const pageTitle = config?.title || app.vault.getName();
11995
let fileTree: HTMLDivElement = this.generateHTMLTree(tree, usingDocument, pageTitle, "file-tree", true, 1, 1, false);
120-
leftSidebar.appendChild(fileTree);
96+
// leftSidebar.appendChild(fileTree);
12197
file.downloads.push(new Downloadable('_common-left-tree.html', fileTree.outerHTML, new Path(file.exportPath.asString.split('/')[0])));
12298
}
12399

@@ -677,6 +653,48 @@ export class HTMLGenerator {
677653
return treeItems;
678654
}
679655

656+
private static generateBrandHeader(usingDocument: Document, brand: string, icon: string, slogan: string, homeLink: string) {
657+
// site-body-left-column-site-name
658+
/**
659+
* - div.sidebar-section-header
660+
* - a.sidebar-section-header-brand
661+
* - img.sidebar-section-header-brand-logo
662+
* - span
663+
* - div.sidebar-section-header-slogan
664+
*/
665+
let container = usingDocument.createElement('div');
666+
container.classList.add('sidebar-section-header');
667+
let header = usingDocument.createElement("a");
668+
header.classList.add('sidebar-section-header-brand');
669+
header.setAttribute('aria-label', brand);
670+
header.href = homeLink || '/';
671+
if (icon) {
672+
let logo = usingDocument.createElement('img');
673+
logo.src = icon
674+
logo.classList.add('sidebar-section-header-brand-logo')
675+
header.appendChild(logo);
676+
} else {
677+
// Use default icon
678+
const tmpContainer = usingDocument.createElement('div');
679+
tmpContainer.innerHTML = LogoSVGDefault;
680+
const defaultIcon = tmpContainer.firstElementChild;
681+
defaultIcon.classList.add('sidebar-section-header-brand-logo')
682+
header.appendChild(defaultIcon)
683+
}
684+
685+
const title = usingDocument.createElement('span');
686+
title.innerText = brand || 'Invio';
687+
header.appendChild(title);
688+
689+
let description = usingDocument.createElement('div');
690+
description.classList.add('sidebar-section-header-slogan')
691+
description.innerText = slogan;
692+
693+
container.appendChild(header);
694+
container.appendChild(description);
695+
return container;
696+
}
697+
680698
private static generateHTMLTree(tree: LinkTree, usingDocument: Document, treeTitle: string, className: string, showNestingIndicator = true, minDepth: number = 1, minCollapsableDepth = 1, closeAllItems: boolean = false): HTMLDivElement {
681699
/*
682700
- div.tree-container
@@ -719,9 +737,9 @@ export class HTMLGenerator {
719737

720738
treeContainerEl.appendChild(treeHeaderEl);
721739
treeContainerEl.appendChild(treeScrollAreaEl);
722-
treeHeaderEl.appendChild(sectionHeaderEl);
723-
treeHeaderEl.appendChild(collapseAllEl);
724-
collapseAllEl.appendChild(collapseAllIconEl);
740+
// treeHeaderEl.appendChild(sectionHeaderEl);
741+
// treeHeaderEl.appendChild(collapseAllEl);
742+
// collapseAllEl.appendChild(collapseAllIconEl);
725743

726744
let treeItems = this.buildTreeRecursive(tree, usingDocument, minDepth, minCollapsableDepth, closeAllItems);
727745

0 commit comments

Comments
 (0)