SevicheCC/Urara-Blog
1
0
Fork 0
mirror of https://github.com/Sevichecc/Urara-Blog.git synced 2025-04-30 17:39:31 +08:00
Code Issues Projects Releases Packages Wiki Activity

revert: remove template in code block

Browse source
This commit is contained in:
sevichecc 2022-10-03 21:19:33 +08:00
parent bcf63c83a7
commit 3b48ece929
1 changed files with 17 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

112
src/lib/components/header_search.svelte
View file

@ -1,102 +1,22 @@
<script lang="ts"> <script lang="ts">
import { onMount, createEventDispatcher } from 'svelte'
import { site } from '$lib/config/site' import { site } from '$lib/config/site'
import { header as headerConfig } from '$lib/config/general' import { header as headerConfig } from '$lib/config/general'
import Typeahead from 'svelte-typeahead'
import { page } from '$app/stores'
// ref : https://github.com/saadeghi/daisyui/blob/master/src/docs/src/components/Search.svelte
</script> </script>
<form> <form
<input type="checkbox" id="search-modal" class="modal-toggle " /> action={headerConfig?.search?.provider === 'duckduckgo' ? '//duckduckgo.com/' : '//google.com/search'}
<label for="search-modal" class="modal cursor-pointer w-full items-start pt-16 "> method="get"
<label class="modal-box w-11/12 max-w-4xl " for=""> accept-charset="UTF-8"
<div class="form-control"> class="flex-1">
<span <input
class="i-heroicons-outline-search text-base-content pointer-events-none absolute z-10 my-2 ml-3 stroke-current opacity-60 w-5" /> type="text"
</div> name="q"
<Typeahead placeholder="Search is not avaible …" limit={8} label="Search" inputAfterSelect="clear"> class="input input-ghost input-bordered xl:bg-base-100 xl:text-base-content transition-all w-full h-12" />
<div class="py-1 text-sm" /> <input
</Typeahead> type="hidden"
<div class="pointer-events-none absolute right-14 top-8 gap-1 opacity-50 hidden lg:flex"> name={headerConfig?.search?.provider === 'duckduckgo' ? 'sites' : 'sitesearch'}
<kbd class="kbd kbd-sm">ESC</kbd> value={site.protocol + site.domain} />
</div> <button type="submit" class="btn btn-square btn-ghost ml-2">
</label> <span class="i-heroicons-outline-search" />
</label> </button>
</form> </form>
<!-- <script lang="ts">
import { onMount, createEventDispatcher } from "svelte"
import { page } from "$app/stores"
import { goto } from "$app/navigation"
import Typeahead from "svelte-typeahead"
import { pages } from "@src/lib/data.js"
const dispatch = createEventDispatcher()
let searchIndex = []
pages.forEach((group) => {
group.items.forEach((item) => {
searchIndex.push(item)
})
})
let seachboxEl
function handleKeydown(e) {
if ((e.keyCode === 75 && e.metaKey) || (e.keyCode === 75 && e.ctrlKey)) {
e.preventDefault()
seachboxEl.querySelector("input[type=search]").focus()
dispatch("focus")
}
}
function onSelect({ detail }) {
goto(searchIndex[detail.originalIndex].href)
dispatch("search", detail)
}
</script>
<svelte:window on:keydown={handleKeydown} />
-->
<style global>
.searchbox [data-svelte-typeahead] {
background: none;
width: 100%;
max-width: 100%;
}
[data-svelte-search] label {
display: none;
}
[data-svelte-search] input {
background-color: transparent;
color: inherit;
border-radius: 0.5em;
padding-left: 2em;
}
[data-svelte-search] input::placeholder {
color: inherit;
}
[data-svelte-search] input:focus {
outline-color: hsla(var(--bc) / 0.2);
background-color: hsl(var(--b1));
color: hsla(var(--bc));
}
[data-svelte-typeahead] .svelte-typeahead-list {
transform: translateY(0.5em);
background: hsl(var(--b1));
border-radius: var(--rounded-btn);
overflow: hidden;
}
[data-svelte-typeahead] .svelte-typeahead-list .selected,
[data-svelte-typeahead] .svelte-typeahead-list .selected:hover {
background: hsl(var(--n));
color: hsl(var(--nc));
}
[data-svelte-typeahead] .svelte-typeahead-list li {
color: hsl(var(--bc));
}
[data-svelte-typeahead] .svelte-typeahead-list li:hover {
background: hsl(var(--b2));
color: hsl(var(--bc));
}
[data-svelte-typeahead] .svelte-typeahead-list li:not(:last-of-type) {
border-bottom-color: hsla(var(--bc) / 0.1);
}
</style>