diff options
| author | Bjørn Erik Pedersen <bjorn.erik.pedersen@gmail.com> | 2022-03-16 21:44:57 +0300 |
|---|---|---|
| committer | Bjørn Erik Pedersen <bjorn.erik.pedersen@gmail.com> | 2022-03-16 21:59:21 +0300 |
| commit | 9c87bcd02e6d78e7c34288822eb37cde34366311 (patch) | |
| tree | 5c5099b34b15f43fcad765126ae17bf52a9aff17 | |
| parent | e65e854ffa478edd485fe640c27aa06ec072c135 (diff) | |
Dark mode search
| -rw-r--r-- | .gitignore | 3 | ||||
| -rw-r--r-- | assets/js/main/index.js | 6 | ||||
| -rw-r--r-- | layouts/index.html | 1 | ||||
| -rw-r--r-- | layouts/partials/sections/common/head.html | 6 | ||||
| -rw-r--r-- | layouts/partials/sections/nav/menu.html | 4 | ||||
| -rw-r--r-- | layouts/partials/sections/nav/search-results.html | 10 | ||||
| -rw-r--r-- | layouts/partials/sections/nav/theme.html | 4 |
7 files changed, 23 insertions, 11 deletions
@@ -1,4 +1,5 @@ node_modules/ public/ resources/ -hugo_stats.json
\ No newline at end of file +hugo_stats.json +.vscode/
\ No newline at end of file diff --git a/assets/js/main/index.js b/assets/js/main/index.js index 01d9171..476bcd3 100644 --- a/assets/js/main/index.js +++ b/assets/js/main/index.js @@ -67,9 +67,11 @@ function newSearchController(cfg) { }, {}); }; + const designMode = false; + return { - query: "", - open: false, + query: designMode ? "shortcodes" : "", + open: designMode, result: {}, toggleOpen: function () { this.open = !this.open; diff --git a/layouts/index.html b/layouts/index.html index 33a6869..b3044f2 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,6 +1,5 @@ {{/* For the home page, we manually control the dark mode via the dark: classes in Tailwind. */}} {{- define "main-classes" -}} - _nightwind-prevent _nightwind-prevent-block {{- end -}} {{ define "header" }} diff --git a/layouts/partials/sections/common/head.html b/layouts/partials/sections/common/head.html index fb10d75..b281658 100644 --- a/layouts/partials/sections/common/head.html +++ b/layouts/partials/sections/common/head.html @@ -1,5 +1,11 @@ <head> <meta charset="utf-8" /> + {{/* TODO(bep) app id */}} + <link + rel="preconnect" + href="https://BH4D9OD16A-dsn.algolia.net" + crossorigin /> + {{/* TODO1 self host https://fonts.google.com/specimen/Mulish?preview.text_type=custom */}} <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link diff --git a/layouts/partials/sections/nav/menu.html b/layouts/partials/sections/nav/menu.html index affc32a..aa1d739 100644 --- a/layouts/partials/sections/nav/menu.html +++ b/layouts/partials/sections/nav/menu.html @@ -1,5 +1,5 @@ <nav - class="nightwind-prevent nightwind-prevent-block bg-gray-900 flex flex-wrap items-center justify-between p-4 m-0 z-20" + class="nightwind-prevent bg-gray-900 flex flex-wrap items-center justify-between p-4 m-0 z-20" x-data="{ open: false }"> <div class="container mx-auto flex flex-shrink-0 items-center"> <div class="mr-10"> @@ -61,7 +61,7 @@ {{ partial "sections/nav/theme.html" . }} </div> - <div class="flex items-center space-x-3"> + <div class="flex items-center space-x-3 nightwind-prevent-block"> {{ template "button-social-twitter" }} {{ template "button-social-github" }} </div> diff --git a/layouts/partials/sections/nav/search-results.html b/layouts/partials/sections/nav/search-results.html index 6d5c669..62e584b 100644 --- a/layouts/partials/sections/nav/search-results.html +++ b/layouts/partials/sections/nav/search-results.html @@ -24,25 +24,27 @@ x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"> <div - class="flex h-full flex-col overflow-y-scroll bg-white py-6 shadow-xl"> + class="flex h-full flex-col overflow-y-scroll bg-white dark:bg-steel-900 py-6 shadow-xl"> <div class="px-4 sm:px-6"> <div class="flex items-start justify-between"> <input x-model="query" @click="search()" type="search" - class="text-black bg-opacity-25 shadow rounded border-0 p-3 w-full" + class="text-black bg-opacity-2 dark:bg-gray-900 shadow rounded border-0 p-3 w-full" placeholder="Search the Docs..." x-ref="input" /> </div> </div> <div class="relative mt-6 flex-1 px-4 sm:px-6"> - <ul role="list" class="divide-y divide-gray-200"> + <ul + role="list" + class="divide-y divide-gray-200 dark:divide-gray-900"> <template x-for="[group, entries] in Object.entries(result)" :key="group"> <li class="py-4"> - <div class="mb-1" x-text="group"></div> + <div class="mb-1 dark:text-gray-300" x-text="group"></div> <template x-for="entry in entries" :key="entry.objectID"> <a class="flex flex-nowrap space-x-4 py-2 text-sm leading-5 text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 cursor-pointer transition duration-150 ease-in-out" diff --git a/layouts/partials/sections/nav/theme.html b/layouts/partials/sections/nav/theme.html index 54ad477..cd14c98 100644 --- a/layouts/partials/sections/nav/theme.html +++ b/layouts/partials/sections/nav/theme.html @@ -1,4 +1,6 @@ -<div class="nightwind-prevent ml-10 flex items-center space-x-8" x-data="{}"> +<div + class="nightwind-prevent nightwind-prevent-block ml-10 flex items-center space-x-8" + x-data="{}"> <button @click="$store.nav.userSettings.toggleColorScheme()" type="button" |