@rmdes/indiekit-frontend 1.0.0-beta.26 → 1.0.0-beta.27
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/sidebar/styles.css +41 -10
- package/components/sidebar/template.njk +123 -12
- package/package.json +1 -1
|
@@ -85,7 +85,23 @@
|
|
|
85
85
|
.sidebar__nav {
|
|
86
86
|
flex: 1;
|
|
87
87
|
overflow-y: auto;
|
|
88
|
-
padding-block: var(--space-
|
|
88
|
+
padding-block: var(--space-xs);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* Group sections */
|
|
92
|
+
.sidebar__group {
|
|
93
|
+
padding-block-end: var(--space-xs);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.sidebar__group-label {
|
|
97
|
+
display: block;
|
|
98
|
+
padding: var(--space-xs) var(--space-l);
|
|
99
|
+
font-size: var(--font-size-xs);
|
|
100
|
+
font-weight: 600;
|
|
101
|
+
letter-spacing: 0.05em;
|
|
102
|
+
text-transform: uppercase;
|
|
103
|
+
color: var(--color-outline-variant);
|
|
104
|
+
user-select: none;
|
|
89
105
|
}
|
|
90
106
|
|
|
91
107
|
.sidebar__list {
|
|
@@ -96,7 +112,7 @@
|
|
|
96
112
|
|
|
97
113
|
.sidebar__list-item a {
|
|
98
114
|
display: block;
|
|
99
|
-
padding: var(--space-
|
|
115
|
+
padding: var(--space-xs) var(--space-l);
|
|
100
116
|
text-decoration: none;
|
|
101
117
|
color: var(--color-on-offset);
|
|
102
118
|
border-inline-start: var(--border-width-thickest) solid transparent;
|
|
@@ -114,23 +130,38 @@
|
|
|
114
130
|
font-weight: 600;
|
|
115
131
|
}
|
|
116
132
|
|
|
117
|
-
/* Secondary list
|
|
133
|
+
/* Secondary list in footer */
|
|
118
134
|
.sidebar__list--secondary {
|
|
119
|
-
|
|
120
|
-
padding
|
|
121
|
-
margin-block-start: var(--space-s);
|
|
135
|
+
margin: 0;
|
|
136
|
+
padding: 0;
|
|
122
137
|
}
|
|
123
138
|
|
|
124
|
-
/* Footer:
|
|
139
|
+
/* Footer: compact, not sticky */
|
|
125
140
|
.sidebar__footer {
|
|
126
141
|
flex-shrink: 0;
|
|
127
|
-
|
|
142
|
+
display: flex;
|
|
143
|
+
align-items: center;
|
|
144
|
+
justify-content: space-between;
|
|
145
|
+
padding: var(--space-s) var(--space-l);
|
|
128
146
|
border-block-start: var(--border-hairline);
|
|
129
147
|
}
|
|
130
148
|
|
|
149
|
+
.sidebar__footer .sidebar__list--secondary {
|
|
150
|
+
display: flex;
|
|
151
|
+
gap: var(--space-s);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.sidebar__list-item--inline {
|
|
155
|
+
display: inline-flex;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.sidebar__list-item--inline a {
|
|
159
|
+
padding: 0;
|
|
160
|
+
border-inline-start: 0;
|
|
161
|
+
}
|
|
162
|
+
|
|
131
163
|
.sidebar__logo {
|
|
132
|
-
|
|
133
|
-
margin-block-start: var(--space-m);
|
|
164
|
+
flex-shrink: 0;
|
|
134
165
|
}
|
|
135
166
|
|
|
136
167
|
/* Backdrop (mobile only) */
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
{% from "../logo/macro.njk" import logo with context %}
|
|
2
|
+
{% set items = opts.navigation.items %}
|
|
3
|
+
{% set renames = { "Reader": "Microsub" } %}
|
|
2
4
|
<sidebar-nav class="{{ classes("sidebar", opts) }}" aria-label="Main">
|
|
3
5
|
<div class="sidebar__header">
|
|
4
6
|
<a class="sidebar__title u-url" href="{{ opts.url or "/" }}">
|
|
@@ -11,21 +13,129 @@
|
|
|
11
13
|
</button>
|
|
12
14
|
</div>
|
|
13
15
|
<nav class="sidebar__nav">
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
16
|
+
{# --- PUBLISH --- #}
|
|
17
|
+
<div class="sidebar__group">
|
|
18
|
+
<span class="sidebar__group-label">Publish</span>
|
|
19
|
+
<ul class="sidebar__list" role="list">
|
|
20
|
+
{% for item in items %}{% if item.href and item.text %}
|
|
21
|
+
{% if "/posts" in item.href or "/files" in item.href %}
|
|
22
|
+
<li class="sidebar__list-item">
|
|
23
|
+
<a href="{{ item.href }}"{{- attributes(item.attributes) }}>
|
|
24
|
+
{{- item.text | safe -}}
|
|
25
|
+
</a>
|
|
26
|
+
</li>
|
|
27
|
+
{% endif %}
|
|
28
|
+
{% endif %}{% endfor %}
|
|
29
|
+
</ul>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
{# --- READ & ENGAGE --- #}
|
|
33
|
+
<div class="sidebar__group">
|
|
34
|
+
<span class="sidebar__group-label">Read & Engage</span>
|
|
35
|
+
<ul class="sidebar__list" role="list">
|
|
36
|
+
{% for item in items %}{% if item.href and item.text %}
|
|
37
|
+
{% if "/microsub" in item.href or "/webmention" in item.href %}
|
|
38
|
+
<li class="sidebar__list-item">
|
|
39
|
+
<a href="{{ item.href }}"{{- attributes(item.attributes) }}>
|
|
40
|
+
{%- if renames[item.text] %}{{ renames[item.text] }}{% else %}{{ item.text | safe }}{% endif -%}
|
|
41
|
+
</a>
|
|
42
|
+
</li>
|
|
43
|
+
{% endif %}
|
|
44
|
+
{% endif %}{% endfor %}
|
|
45
|
+
</ul>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
{# --- CURATE --- #}
|
|
49
|
+
<div class="sidebar__group">
|
|
50
|
+
<span class="sidebar__group-label">Curate</span>
|
|
51
|
+
<ul class="sidebar__list" role="list">
|
|
52
|
+
{% for item in items %}{% if item.href and item.text %}
|
|
53
|
+
{% if "/blogroll" in item.href or "/podroll" in item.href %}
|
|
54
|
+
<li class="sidebar__list-item">
|
|
55
|
+
<a href="{{ item.href }}"{{- attributes(item.attributes) }}>
|
|
56
|
+
{{- item.text | safe -}}
|
|
57
|
+
</a>
|
|
58
|
+
</li>
|
|
59
|
+
{% endif %}
|
|
60
|
+
{% endif %}{% endfor %}
|
|
61
|
+
</ul>
|
|
62
|
+
</div>
|
|
63
|
+
|
|
64
|
+
{# --- BUILD --- #}
|
|
65
|
+
<div class="sidebar__group">
|
|
66
|
+
<span class="sidebar__group-label">Build</span>
|
|
67
|
+
<ul class="sidebar__list" role="list">
|
|
68
|
+
{% for item in items %}{% if item.href and item.text %}
|
|
69
|
+
{% if "/homepage" in item.href or "/cv" in item.href %}
|
|
70
|
+
<li class="sidebar__list-item">
|
|
71
|
+
<a href="{{ item.href }}"{{- attributes(item.attributes) }}>
|
|
72
|
+
{{- item.text | safe -}}
|
|
73
|
+
</a>
|
|
74
|
+
</li>
|
|
75
|
+
{% endif %}
|
|
76
|
+
{% endif %}{% endfor %}
|
|
77
|
+
</ul>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
{# --- ACTIVITY --- #}
|
|
81
|
+
<div class="sidebar__group">
|
|
82
|
+
<span class="sidebar__group-label">Activity</span>
|
|
83
|
+
<ul class="sidebar__list" role="list">
|
|
84
|
+
{% for item in items %}{% if item.href and item.text %}
|
|
85
|
+
{% if "/github" in item.href or "/lastfm" in item.href or "/funkwhale" in item.href or "/youtube" in item.href or "/rss" in item.href %}
|
|
86
|
+
<li class="sidebar__list-item">
|
|
87
|
+
<a href="{{ item.href }}"{{- attributes(item.attributes) }}>
|
|
88
|
+
{{- item.text | safe -}}
|
|
89
|
+
</a>
|
|
90
|
+
</li>
|
|
91
|
+
{% endif %}
|
|
92
|
+
{% endif %}{% endfor %}
|
|
93
|
+
</ul>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
{# --- UNCATEGORIZED (catch-all for future plugins) --- #}
|
|
97
|
+
{% set knownPaths = ["/posts", "/files", "/microsub", "/webmention", "/blogroll", "/podroll", "/homepage", "/cv", "/github", "/lastfm", "/funkwhale", "/youtube", "/rss"] %}
|
|
98
|
+
{% set hasOther = [] %}
|
|
99
|
+
{% for item in items %}{% if item.href and item.text %}
|
|
100
|
+
{% set matched = false %}
|
|
101
|
+
{% for kp in knownPaths %}
|
|
102
|
+
{% if kp in item.href %}{% set matched = true %}{% endif %}
|
|
103
|
+
{% endfor %}
|
|
104
|
+
{% if not matched %}{% set hasOther = hasOther.concat([item]) %}{% endif %}
|
|
105
|
+
{% endif %}{% endfor %}
|
|
106
|
+
{% if hasOther | length > 0 %}
|
|
107
|
+
<div class="sidebar__group">
|
|
108
|
+
<span class="sidebar__group-label">Other</span>
|
|
109
|
+
<ul class="sidebar__list" role="list">
|
|
110
|
+
{% for item in hasOther %}
|
|
111
|
+
<li class="sidebar__list-item">
|
|
112
|
+
<a href="{{ item.href }}"{{- attributes(item.attributes) }}>
|
|
113
|
+
{{- item.text | safe -}}
|
|
114
|
+
</a>
|
|
115
|
+
</li>
|
|
116
|
+
{% endfor %}
|
|
117
|
+
</ul>
|
|
118
|
+
</div>
|
|
119
|
+
{% endif %}
|
|
120
|
+
|
|
121
|
+
{# --- SYSTEM (hardcoded core pages) --- #}
|
|
122
|
+
<div class="sidebar__group">
|
|
123
|
+
<span class="sidebar__group-label">System</span>
|
|
124
|
+
<ul class="sidebar__list" role="list">
|
|
125
|
+
<li class="sidebar__list-item">
|
|
126
|
+
<a href="{{ opts.url }}/status">Status</a>
|
|
127
|
+
</li>
|
|
128
|
+
<li class="sidebar__list-item">
|
|
129
|
+
<a href="{{ opts.url }}/plugins">Plugins</a>
|
|
130
|
+
</li>
|
|
131
|
+
</ul>
|
|
132
|
+
</div>
|
|
23
133
|
</nav>
|
|
24
134
|
<div class="sidebar__footer">
|
|
25
135
|
{% if opts.secondaryNavigation.items.length > 0 %}
|
|
26
136
|
<ul class="sidebar__list sidebar__list--secondary" role="list">
|
|
27
137
|
{% for item in opts.secondaryNavigation.items %}{% if item.href and item.text %}
|
|
28
|
-
<li class="sidebar__list-item">
|
|
138
|
+
<li class="sidebar__list-item sidebar__list-item--inline">
|
|
29
139
|
<a href="{{ item.href }}"{{- attributes(item.attributes) }}>
|
|
30
140
|
{{- item.text | safe -}}
|
|
31
141
|
</a>
|
|
@@ -37,7 +147,8 @@
|
|
|
37
147
|
classes: "h-x-app sidebar__logo",
|
|
38
148
|
href: "https://getindiekit.com",
|
|
39
149
|
src: opts.logoSrc,
|
|
40
|
-
alt: "Indiekit"
|
|
41
|
-
|
|
150
|
+
alt: "Indiekit",
|
|
151
|
+
size: 14
|
|
152
|
+
}) }}
|
|
42
153
|
</div>
|
|
43
154
|
</sidebar-nav>
|