Skip to content

Commit 68c5ce1

Browse files
dragonwockydragonwocky
committed
search: hotkey footer & cleaner scroll focus, hotkeys listed in footer, add actions to header, theme change hotkey, restructure fs
1 parent 7e62940 commit 68c5ce1

Some content is hidden

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

49 files changed

+458
-221
lines changed

Diff for: ‎.gitmodules

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
[submodule "_includes/media"]
2-
path = _includes/media
1+
[submodule "media"]
2+
path = media
33
url = [email protected]:notion-enhancer/media.git

Diff for: ‎_config.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,19 @@ import windicss from "https://raw.githubusercontent.com/lumeland/experimental-pl
1111
import postcss from "https://deno.land/x/[email protected]/plugins/postcss.ts";
1212
import featherIcons from "https://cdn.skypack.dev/feather-icons";
1313

14-
import windiConfig from "./_plugins/windi.config.ts";
14+
import windiConfig from "./_windi.config.ts";
1515
import markdownPlugin from "./_plugins/markdown.ts";
1616
import tableOfContentsPlugin from "./_plugins/table-of-contents.ts";
1717
import searchIndexer from "./_plugins/search-indexer.ts";
1818

1919
export const site = lume({}, {
20+
nunjucks: { includes: "_layouts" },
2021
markdown: { plugins: [markdownPlugin], keepDefaultPlugins: true },
2122
});
2223

2324
site.ignore("README.md");
24-
site.copy("_includes/media", "media");
25-
site.copy("_includes/screenshots", "screenshots");
25+
site.copy("media", "media");
26+
site.copy("assets", "assets");
2627
site.use(resolveUrls());
2728
site.loadAssets([".ts"]);
2829

Diff for: ‎_data.yml

+35
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
site_icon: /media/animated.gif
2+
site_favicon: /media/colour-x32.png
3+
site_embed: /media/colour-x512.png
4+
5+
site_root: https://notion-enhancer.github.io
26
site_name: notion-enhancer
37
site_description: an enhancer/customiser for the all-in-one productivity workspace notion.so
48
edit_url: https://github.com/notion-enhancer/notion-enhancer.github.io/blob/main
@@ -13,3 +17,34 @@ nav:
1317
- text: Donate
1418
icon: coffee
1519
url: https://buy.stripe.com/00gdR93R6csIgDKeUV
20+
21+
action_buttons:
22+
- action: toggle-menu
23+
icon: menu
24+
tooltip: Toggle menu
25+
sm_only: true
26+
sm_class: md:(pointer-events-none opacity-0)
27+
- action: open-search
28+
icon: search
29+
tooltip: Search
30+
sm_only: false
31+
sm_class: sm:(pointer-events-none opacity-0)
32+
- action: toggle-theme
33+
icon: moon
34+
tooltip: Toggle theme
35+
sm_only: false
36+
sm_class: sm:(pointer-events-none opacity-0)
37+
38+
hotkeys:
39+
- keys: ctrl/⌘ + k
40+
text: to search
41+
- keys: arrows ↑ ↓
42+
text: to navigate
43+
- keys: enter ↵
44+
text: to select
45+
- keys: /
46+
text: to focus
47+
- keys: esc
48+
text: to close
49+
- keys: ctrl/⌘ + shift + l
50+
text: to toggle theme

Diff for: ‎_includes/layouts/base.njk

-103
This file was deleted.

Diff for: ‎_includes/media

-1
This file was deleted.

Diff for: ‎_includes/screenshots/cherry-cola.png

-112 KB
Binary file not shown.

Diff for: ‎_includes/screenshots/gruvbox-light.png

-102 KB
Binary file not shown.

Diff for: ‎_includes/scripts/theme.ts

-30
This file was deleted.

Diff for: ‎_layouts/base.njk

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!doctype html>
2+
3+
<html lang="en" class="h-full w-full hidden">
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<title>{% if title %}{{ title }} | {% endif %}{{ site_name }}</title>
9+
<link href="{{ site_favicon }}" rel="icon" type="image/png" sizes="32x32">
10+
<meta name="description" {% if description %}
11+
content="{{ description }}" {% else %} content="{{ site_description }}"
12+
{% endif %}>
13+
14+
<meta property="og:image" content="{{ site_root }}{{ site_embed }}">
15+
<meta name="twitter:card" content="summary">
16+
<meta name="twitter:url" content="{{ site_root }}">
17+
<meta name="twitter:title" content="{{ title }}">
18+
<meta name="twitter:description" {% if description %}
19+
content="{{ description }}" {% else %} content="{{ site_description }}"
20+
{% endif %}>
21+
<meta name="twitter:image" content="{{ site_root }}{{ site_embed }}">
22+
<meta name="twitter:creator" content="@dragonwocky">
23+
24+
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
25+
<link rel="preconnect" href="https://fonts.googleapis.com">
26+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
27+
<link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">
28+
<link rel="stylesheet" href="/windi.css">
29+
<link rel="stylesheet" href="/app.css">
30+
<script type="module" src="/app.js"></script>
31+
</head>
32+
33+
<body class="min-h-full w-full flex flex-col font-sans bg-body h-full">
34+
{{ content | safe }}
35+
36+
<div class="fixed bottom-4 right-4 z-9 flex flex-col">
37+
{% for btn in action_buttons %}
38+
<button data-action="{{ btn.action }}" class="button-floating group {{ btn.sm_class }}">
39+
<span class="tooltip opacity-0 group-hover:opacity-100 right-10 bottom-0">
40+
{{ btn.tooltip }}
41+
</span>
42+
{{ btn.icon | feather | safe }}
43+
</button>
44+
{% endfor %}
45+
</div>
46+
47+
{% include "search.njk" %}
48+
49+
</body>
50+
</html>

Diff for: ‎_includes/layouts/docs.njk renamed to ‎_layouts/docs.njk

+13-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
layout: layouts/base.njk
2+
layout: base.njk
33

44
sidebar:
55
- getting-started
@@ -19,6 +19,18 @@ sidebar:
1919
</a>
2020
<nav class="sm:ml-auto" aria-label="links">
2121
<ul class="flex flex-row flex-wrap sm:(items-center h-full justify-end) <sm:mt-4">
22+
{% for btn in action_buttons %}
23+
{% if btn.sm_only !== true %}
24+
<li class="<sm:hidden p-1 group relative flex justify-center">
25+
<button data-action="{{ btn.action }}" class="button !bg-opacity-0 !hover:bg-opacity-50 sm:text-sm">
26+
{{ btn.icon | feather | safe }}
27+
</button>
28+
<span class="tooltip opacity-0 group-hover:opacity-100 -bottom-7.5">
29+
{{ btn.tooltip }}
30+
</span>
31+
</li>
32+
{% endif %}
33+
{% endfor %}
2234
{% for btn in nav %}
2335
<li class="<sm:(p-0.5 flex-grow text-center) sm:p-1">
2436
<a href="{{ btn.url }}" class="button <sm:(text-xs py-2 px-3 justify-center) sm:text-sm">

Diff for: ‎_layouts/search.njk

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<aside aria-label="search" class="
2+
fixed top-0 h-full w-full flex justify-center p-4 z-10
3+
sm:(py-12 px-8) opacity-0 pointer-events-none transition duration-50
4+
">
5+
<div data-action="close-search" class="
6+
fixed top-0 w-full h-full bg-white
7+
bg-opacity-60 dark:(bg-black bg-opacity-60)
8+
"></div>
9+
10+
<div class="z-11 max-w-144 w-full max-h-144 bg-body rounded-md shadow-lg overflow-hidden">
11+
12+
<label class="block m-3 relative">
13+
<input type="search" name="site-search" aria-label="search the notion-enhancer documentation" class="
14+
block w-full text-lg rounded-md bg-light-600 dark:bg-dark-500 py-3 pl-4 pr-22
15+
transition ring-dim focus:ring-primary appearance-none placeholder-shown:sibling:opacity-0
16+
" placeholder="Search docs...">
17+
18+
{{ 'x' | feather({ 'data-action': 'clear-search', class: '
19+
feather absolute right-12 bottom-0 w-12 pl-3 pr-3 py-4
20+
h-full transition hover:(!opacity-100 text-primary) cursor-pointer
21+
' }) | safe }}
22+
{{ 'search' | feather({ class: '
23+
feather absolute right-0 bottom-0 w-12 pl-3 pr-3 py-4
24+
h-full bg-body rounded-r-md
25+
' }) | safe }}
26+
</label>
27+
28+
<div aria-label="results" class="
29+
px-3 mt-2 children:last:mb-3 relative overflow-y-auto h-full
30+
<sm:max-h-126 sm:max-h-[calc(100%-9.75rem)]
31+
">
32+
<ul>
33+
{# placeholders force windi to generate css #}
34+
<li data-placeholder class="search-result-section">Section</p>
35+
<li data-placeholder>
36+
<a href="/" class="search-result group">
37+
{{ 'align-left' | feather({ class: 'search-result-icon' }) | safe }}
38+
<div class="font-medium">
39+
<p class="text-sm">Matching line of text with a
40+
<mark class="search-result-highlight">keywo</mark>rd
41+
</p>
42+
<p class="text-xs">Page</p>
43+
</div>
44+
</a>
45+
</li>
46+
</ul>
47+
</div>
48+
49+
<footer class="
50+
<sm:hidden border-dim border-t p-3 text-sm text-dim
51+
flex flex-wrap items-center px-1 py-2
52+
">
53+
{% for hotkey in hotkeys %}
54+
<p class="px-2 py-1">
55+
<kbd class="
56+
inline-block px-1.5 py-0.5 text-xs bg-card rounded-md
57+
border-2 border-dim shadow mr-1
58+
">{{ hotkey.keys }}</kbd>
59+
<span>{{ hotkey.text }}</span>
60+
</p>
61+
{% endfor %}
62+
</footer>
63+
</div>
64+
</aside>
65+
66+
{# display: inline-block;
67+
padding: 3px 5px;
68+
font: 11px ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
69+
line-height: 10px;
70+
color: var(--color-fg-default);
71+
vertical-align: middle;
72+
background-color: var(--color-canvas-subtle);
73+
/* border-bottom-color: var(--color-neutral-muted); */
74+
border: 1px solid var(--color-neutral-muted);
75+
border-radius: 6px;
76+
/* -webkit-box-shadow: inset 0 -1px 0 var(--color-neutral-muted); */
77+
box-shadow: inset 0 -1px 0 var(--color-neutral-muted); #}

Diff for: ‎_plugins/search-indexer.ts

+3
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@ export default (output = "/search-index.json") => {
3434
site.addEventListener("beforeSave", () => {
3535
const index: SearchResult[] = [],
3636
pages = site.pages.sort((a, b) =>
37+
(a.data.order as number ?? 0) -
38+
(b.data.order as number ?? 0)
39+
).sort((a, b) =>
3740
(a.data.section_order as number ?? 0) -
3841
(b.data.section_order as number ?? 0)
3942
);

Diff for: ‎_includes/scripts/menu.ts renamed to ‎_scripts/menu.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ gui.toggle = () => gui.isOpen() ? gui.close() : gui.open();
2323

2424
export const initMenu = () => {
2525
if (!$.menu()) {
26-
$.btn().style.display = "none";
26+
if ($.btn()) $.btn().style.display = "none";
2727
return;
2828
} else $.btn().style.display = "";
2929

0 commit comments

Comments
 (0)