Korbs/Zarro
Korbs/Zarro
1
Fork 0
Code Issues Pull requests Activity

Make search box it's own componet, update scripts

Browse source
This commit is contained in:
Korbs 2024-10-25 14:50:58 -04:00
parent 9da485dee0
commit e4035a3089
2 changed files with 73 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
source/src/components/global/Header.astro
View file

@ -2,24 +2,41 @@
// Properties // Properties
const {Query, QueryText} = Astro.props const {Query, QueryText} = Astro.props
// Components
import SearchBox from "./SearchBox.astro";
// Icons // Icons
import { HalfMoon, Menu } from "@iconoir/vue"; import { HalfMoon, Menu, SunLight } from "@iconoir/vue";
--- ---
<header> <header>
<div class="header-start"> <div class="header-start">
<a href="/"><img width="18px" src="https://md.sudovanilla.org/images/Union.png"/></a> <a href="/"><img width="18px" src="https://md.sudovanilla.org/images/Union.png"/></a>
<form class="search-box" onsubmit="return Search()"> <SearchBox/>
<input type="search" value={QueryText} placeholder="Search" />
</form>
</div> </div>
<div class="header-end"> <div class="header-end">
<button>English</button> <button>English</button>
<button title="Toggle Theme" class="button-icon"><HalfMoon /></button> <button onclick="ThemeToggle()" title="Toggle Theme" class="button-icon">
<SunLight class:list={'theme-light'}/>
<HalfMoon class:list={'theme-dark'}/>
</button>
<button title="Options" class="button-icon" data-tooltip-placement="right"><Menu /></button> <button title="Options" class="button-icon" data-tooltip-placement="right"><Menu /></button>
</div> </div>
</header> </header>
<script is:inline>
function ThemeToggle() {
if (document.body.getAttribute('class') === 'dark') {
document.body.setAttribute('class', 'light')
document.cookie = "Theme=Light";
} else if (document.body.getAttribute('class') === 'light') {
document.body.setAttribute('class', 'dark')
document.cookie = "Theme=Dark";
}
}
</script>
<style lang="scss"> <style lang="scss">
header { header {
padding: 16px 0px; padding: 16px 0px;
@ -39,9 +56,10 @@ header {
border-radius: 3rem; border-radius: 3rem;
border: 1px white solid; border: 1px white solid;
padding: 0px 12px; padding: 0px 12px;
background: white; background: var(--box-background);
border: 1px rgb(192, 192, 192) solid; border: 1px rgb(192, 192, 192) solid;
cursor: pointer; cursor: pointer;
color: var(--text);
} }
.button-icon { .button-icon {
aspect-ratio: 1; aspect-ratio: 1;
@ -52,36 +70,13 @@ header {
} }
} }
} }
.search-box {
background: white;
border: 1px rgb(192, 192, 192) solid;
border-radius: 3rem;
display: flex;
align-items: center;
gap: 6px;
padding: 16px 8px;
position: relative;
max-width: 500px;
width: 300px;
input {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border-radius: 3rem;
border: none;
background: transparent;
padding: 0px 12px;
}
}
} }
</style> </style>
<!-- Search Scripts --> <!-- Search Scripts -->
<!-- From https://ark.sudovanilla.org/MinPluto/MinPluto/src/branch/master/source/src/components/Search.astro#L18-L94 as of writing --> <!-- From https://ark.sudovanilla.org/MinPluto/MinPluto/src/branch/master/source/src/components/Search.astro#L18-L94 as of writing -->
<script is:inline> <script>
/* /*
@licstart The following is the entire license notice for the @licstart The following is the entire license notice for the
JavaScript code in this page. JavaScript code in this page.
@ -111,9 +106,13 @@ function FocusSearch() {
document.querySelector('input[type="search"]').focus(); document.querySelector('input[type="search"]').focus();
} }
// The "Search()" function does not work for Zarro, an API request
// will be made to an endpoint instead with a redirect parameter.
// Learn More: https://docs.astro.build/en/guides/endpoints/#redirects
// Trigger Search // Trigger Search
function Search() { // function Search() {
var SearchQuery = document.querySelector('form > input[type="search"]').value; // var SearchQuery = document.querySelector('form > input[type="search"]').value;
location.href = `/web?=${SearchQuery}`; // location.href = `/web?=${SearchQuery}`;
} // }
</script> </script>

39
source/src/components/global/SearchBox.astro Normal file
View file

@ -0,0 +1,39 @@
---
// Properties
const {Query, QueryText} = Astro.props
---
<form class="search-box" action="/api/search/web" method="post">
<input name="websearch" value={QueryText} placeholder="Search"/>
</form>
<style lang="scss">
.search-box {
background: var(--box-background);
border: 1px rgb(192, 192, 192) solid;
border-radius: 3rem;
display: flex;
align-items: center;
gap: 6px;
padding: 16px 8px;
position: relative;
max-width: 500px;
width: 300px;
input {
color: var(--text);
position: absolute;
top: 0px;
left: 0px;
width: calc(100% - 24px);
height: 28px;
border-radius: 3rem;
border: none;
background: transparent;
padding: 0px 12px;
border: 1px transparent solid;
&:focus {
outline: none;
}
}
}
</style>