content: generateSearchSidebarBox (input appearance stub)

3 files changed, 79 insertions, 0 deletions

diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js
index 5d2a48cb..54a75771 100644
--- a/src/content/dependencies/generatePageLayout.js
+++ b/src/content/dependencies/generatePageLayout.js
@@ -5,6 +5,7 @@ export default {
   contentDependencies: [
     'generateColorStyleRules',
     'generateFooterLocalizationLinks',
+    'generateSearchSidebarBox',
     'generateStickyHeadingContainer',
     'transformContent',
   ],
@@ -42,6 +43,9 @@ export default {
     relations.stickyHeadingContainer =
       relation('generateStickyHeadingContainer');
 
+    relations.searchBox =
+      relation('generateSearchSidebarBox');
+
     if (sprawl.footerContent) {
       relations.defaultFooterContent =
         relation('transformContent', sprawl.footerContent);
@@ -64,6 +68,11 @@ export default {
       default: true,
     },
 
+    showSearch: {
+      type: 'boolean',
+      default: true,
+    },
+
     additionalNames: {
       type: 'html',
       mutable: false,
@@ -385,6 +394,14 @@ export default {
     const leftSidebar = getSidebar('leftSidebar', 'sidebar-left');
     const rightSidebar = getSidebar('rightSidebar', 'sidebar-right');
 
+    if (slots.showSearch && !html.isBlank(leftSidebar)) {
+      leftSidebar.setSlot('boxes',
+        html.tags([
+          relations.searchBox,
+          leftSidebar.getSlotValue('boxes'),
+        ]));
+    }
+
     const hasSidebarLeft = !html.isBlank(html.resolve(leftSidebar));
     const hasSidebarRight = !html.isBlank(html.resolve(rightSidebar));
 
diff --git a/src/content/dependencies/generateSearchSidebarBox.js b/src/content/dependencies/generateSearchSidebarBox.js
new file mode 100644
index 00000000..f2fddfa5
--- /dev/null
+++ b/src/content/dependencies/generateSearchSidebarBox.js
@@ -0,0 +1,21 @@
+export default {
+  contentDependencies: ['generatePageSidebarBox'],
+  extraDependencies: ['html'],
+
+  relations: (relation) => ({
+    sidebarBox:
+      relation('generatePageSidebarBox'),
+  }),
+
+  generate: (relations, {html}) =>
+    relations.sidebarBox.slots({
+      attributes: {class: 'search-sidebar-box'},
+      collapsible: false,
+
+      content: [
+        html.tag('input', {class: 'wiki-search-input'},
+          {placeholder: `Search for anything`},
+          {type: 'search'})
+      ],
+    }),
+};
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 3b22bba0..2dc06469 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -462,6 +462,47 @@ summary .group-name {
   font-weight: normal;
 }
 
+.search-sidebar-box {
+  padding: 2px;
+  position: sticky;
+  top: 5px;
+  z-index: 999;
+
+  background-color: #000000c0;
+  box-shadow:
+    0 3px 4px #00000080,
+    0 -2px 8px #000000c0,
+    0 -6px 3px #000000f0;
+
+  -webkit-backdrop-filter:
+    brightness(1.2) blur(4px);
+
+          backdrop-filter:
+    brightness(1.2) blur(4px);
+}
+
+.wiki-search-input {
+  width: 100%;
+  background: transparent;
+  border: 1px solid var(--dim-color);
+  border-radius: 3px;
+  padding: 2px 4px;
+  color: inherit;
+}
+
+.wiki-search-input:focus {
+  border: 1px solid var(--primary-color);
+}
+
+.wiki-search-input::placeholder {
+  color: var(--primary-color);
+  font-style: oblique;
+}
+
+.wiki-search-input:focus::placeholder {
+  color: var(--dim-color);
+}
+
 #content {
   overflow-wrap: anywhere;
 }