MATH201/themes/zettels/layouts/partials/search.html

<!-- 
	@niceth: Nice to have
	- Thumbnails of notes images inside search (regex out from .Content variable)
	- Caching of index.json to load it once
	- ctr + k instead of cmd ?
	- Focused current note
 -->
<style>
	search-menu {
		display: none;
	}

	#search {
		height: 100%;
		width: 300px;
		position: fixed;
		background: var(--background-search);
		z-index: 1;
		top: 0;
		left: 0;
		border-right: 1px solid var(--separator-color);
		overflow-x: hidden;
		overflow-y: auto;

		-ms-overflow-style: none;
		/* IE and Edge */
		scrollbar-width: none;
		/* Firefox */
	}

	#search::-webkit-scrollbar {
		display: none;
	}

	#search-header {
		padding: 12px 0;
		margin: 0 auto;
		background: var(--background-search);
		width: 250px;
		opacity: 1;
		height: 50px;
		z-index: 2;
		border-bottom: 1px solid var(--separator-color);
	}

	#search .input-container {
		position: relative
	}

	#search-input {
		width: 100%;
		height: 24px;
		border: 1px solid var(--separator-color);
		border-radius: 4px;
		padding-left: 24px;
		background-color: white;
		display: inline-block;
	}

	#search-input:focus {
		border: 1px solid var(--search-field-focused-color);
	}

	#search-header .input-container .search-icon {
		position: absolute;
		top: 6px;
		left: 8px;
		fill: darkGray;
	}

	#search-results img {
		width: 122px;
		height: 76px;
		border: 1px solid var(--separator-color);
		object-fit: cover;
	}

	#search-results {
		overflow: auto;
		height: 100%;
	}

	#search-results a {
		width: 100%;
		padding-left: 25px;
		padding-right: 25px;
		padding-top: 12px;
		padding-bottom: 12px;
		display: inline-block;

		color: var(--text-base-color);
		border-bottom: 1px solid var(--separator-color);
		border-left: 6px solid var(--background-search);

	}

	#search-results a:first-child:hover,
	a:first-child:focus,
	.selected {
		outline: 0;
		background-color: var(--note-table-cell-selected-color);
		border-left: 6px solid var(--note-table-cell-ribbon-color) !important;
	}

	/* // Reseting default styles inside search component scope */
	#search-results li {
		text-indent: 0;
	}

	#search-results li:before,
	#search-results h1:before,
	#search-results h2:before,
	#search-results h3:before,
	#search-results h4:before,
	#search-results h5:before,
	#search-results h6:before {
		content: "";
		visibility: hidden;
		display: none;
	}
</style>


<search-menu id="search" data-turbolinks-permanent>
	<header id="search-header">
		<div class="input-container">
			<svg aria-hidden="true" class="search-icon" width="12" height="12" viewBox="0 0 18 18">
				<path
					d="M18 16.5l-5.14-5.18h-.35a7 7 0 10-1.19 1.19v.35L16.5 18l1.5-1.5zM12 7A5 5 0 112 7a5 5 0 0110 0z">
				</path>
			</svg>

			<input type="search" autocomplete="off" id="search-input" onkeyup="performSearch()" tabindex="0"
				placeholder="Search Notes">
		</div>
	</header>

	<ul id="search-results"></ul>
</search-menu>