Skip to content

Commit 1912f0c

Browse files
semanticdatasemanticdata
committed
implement ugly search, commented out
1 parent bcc407c commit 1912f0c

13 files changed

+642
-10
lines changed

‎.eleventy.js

+11-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
const dayjs = require("dayjs");
2+
const autoprefixer = require("autoprefixer");
3+
const markdownIt = require("markdown-it");
4+
const postcss = require("postcss");
5+
const tailwindcss = require("tailwindcss");
6+
const searchFilter = require("./src/assets/js/searchFilter");
7+
18
module.exports = function (eleventyConfig) {
2-
const dayjs = require("dayjs");
3-
const autoprefixer = require("autoprefixer");
4-
const markdownIt = require("markdown-it");
5-
const postcss = require("postcss");
6-
const tailwindcss = require("tailwindcss");
79
const markdownItOptions = {
810
html: true,
911
linkify: true,
@@ -42,6 +44,9 @@ module.exports = function (eleventyConfig) {
4244
};
4345
};
4446

47+
// Search w/ Elasticlunr-js
48+
eleventyConfig.addFilter("search", searchFilter);
49+
4550
// Syntax Highlighting
4651
const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
4752
eleventyConfig.addPlugin(syntaxHighlight);
@@ -101,5 +106,6 @@ module.exports = function (eleventyConfig) {
101106
includes: "_includes",
102107
data: "_data",
103108
},
109+
passthroughFileCopy: true,
104110
};
105111
};

‎.gitignore

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
/_site
2-
node_modules
1+
_site
32
.DS_Store
3+
node_modules

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"markdown-it-anchor": "^8.6.7",
3030
"markdown-it-attrs": "^4.1.6",
3131
"markdown-it-footnote": "^4.0.0",
32-
"markdown-it-table-of-contents": "^0.6.0"
32+
"markdown-it-table-of-contents": "^0.6.0",
33+
"elasticlunr": "^0.9.5"
3334
}
3435
}

‎pnpm-lock.yaml

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/_includes/head.html

+1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bitter&display=swap">
4141

4242
<!-- Stylesheets -->
43+
<link rel="stylesheet" href="/assets/css/search-main.css" />
4344
<link rel="stylesheet" href="/assets/css/prism.css" />
4445
<link rel="stylesheet" href="/assets/css/styles.css" />
4546
<link rel="stylesheet" href="/assets/css/style.css" />

‎src/_includes/search.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div id="nav-search" class="nav-search">
2+
<form>
3+
<input id="nav-search__input" class="nav-search__input" type="search" onfocusin="inFocus(this)"
4+
placeholder='search notes (type "/" to focus &#38; "ESC" to lose)'
5+
aria-label='search notes (type "/" to focus &#38; "ESC" to lose)'>
6+
</form>
7+
<div id="nav-search__result-container" style="display: none;">
8+
<ul id="nav-search__ul"></ul>
9+
<div id="nav-search__no-result" style="display: none;">
10+
<p>No results found.</p>
11+
</div>
12+
</div>
13+
</div>

‎src/_layouts/default.html

+9-2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515

1616
</header>
1717

18+
<!-- {% include 'search.html' %} -->
19+
1820
<main>{{content}}</main>
1921

2022
<footer class="page-footer">
@@ -31,8 +33,13 @@
3133
{% include 'darkmode-toggle.html' %}
3234
</footer>
3335

34-
<script src="/assets/js/script.js"></script>
35-
<script src="/assets/js/prism.js"></script>
36+
<script type="text/javascript"
37+
src="https://cdnjs.cloudflare.com/ajax/libs/elasticlunr/0.9.6/elasticlunr.min.js"></script>
38+
39+
<script type="text/javascript" src="/assets/js/script.js"></script>
40+
<script type="text/javascript" src="/assets/js/prism.js"></script>
41+
<script type="text/javascript" src="/assets/js/search.js"></script>
42+
<script type="text/javascript" src="/assets/js/search_custom.js"></script>
3643
</body>
3744

3845
</html>

‎src/assets/css/search-main.css

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
body {
2+
background: #282a36;
3+
color: #fff;
4+
font-family: 'Poppins', sans-serif; }
5+
6+
a {
7+
color: #ffd479;
8+
text-decoration: none; }
9+
a:hover {
10+
color: #fff;
11+
border-bottom: 2px solid #ffd479; }
12+
13+
b, strong {
14+
color: #8cc8ff; }
15+
16+
img {
17+
max-width: 100%; }
18+
19+
.container {
20+
width: 100%;
21+
margin: 2rem auto; }
22+
@media (min-width: 1200px) {
23+
.container {
24+
max-width: 900px; } }
25+
26+
.site-footer {
27+
margin-top: 2rem;
28+
padding: 1rem 0; }
29+
30+
.nav-search {
31+
margin-top: 2rem;
32+
display: block;
33+
background-image: linear-gradient(to right, #3d4251, #3b3f4c, #393d46, #373a41, #35373c);
34+
width: 100%;
35+
position: relative;
36+
border-radius: 10px; }
37+
.nav-search form {
38+
display: flex; }
39+
.nav-search .nav-search__input {
40+
border: 0;
41+
background: transparent;
42+
color: #ddd;
43+
font-size: 1.2rem;
44+
padding: 1.5rem 1rem;
45+
width: 100%; }
46+
.nav-search .nav-search__input:focus {
47+
outline: none;
48+
border: 0; }
49+
.nav-search #nav-search__result-container {
50+
position: absolute;
51+
max-height: 80vh;
52+
overflow: auto;
53+
width: 100%;
54+
background: #35373c;
55+
border-bottom-right-radius: 5px;
56+
border-bottom-left-radius: 5px;
57+
padding: 0;
58+
filter: drop-shadow(2px 4px 6px black); }
59+
@media (max-width: 767px) {
60+
.nav-search #nav-search__result-container {
61+
position: fixed;
62+
left: 0;
63+
right: 0;
64+
border-radius: 0; } }
65+
.nav-search #nav-search__result-container ul#nav-search__ul {
66+
padding: 0;
67+
margin: 0;
68+
list-style: none; }
69+
.nav-search #nav-search__result-container ul#nav-search__ul li {
70+
display: flex;
71+
padding: 10px;
72+
align-items: center;
73+
justify-content: space-between;
74+
overflow: hidden; }
75+
.nav-search #nav-search__result-container ul#nav-search__ul li .item__icon {
76+
width: 20px; }
77+
.nav-search #nav-search__result-container ul#nav-search__ul li .item__icon img {
78+
width: 100%;
79+
height: auto; }
80+
.nav-search #nav-search__result-container ul#nav-search__ul li .item__content {
81+
padding: 0 10px;
82+
width: 100%;
83+
overflow: hidden;
84+
text-overflow: ellipsis; }
85+
.nav-search #nav-search__result-container ul#nav-search__ul li .item__content h3 {
86+
margin: 0;
87+
white-space: nowrap;
88+
overflow: hidden;
89+
text-overflow: ellipsis; }
90+
.nav-search #nav-search__result-container ul#nav-search__ul li .item__content h3 a {
91+
color: #ffcb5e;
92+
white-space: inherit;
93+
padding: 0;
94+
text-align: left;
95+
font-weight: normal;
96+
font-size: 16px;
97+
line-height: 1.5;
98+
margin: 0;
99+
white-space: nowrap;
100+
overflow: hidden;
101+
text-overflow: ellipsis;
102+
display: block; }
103+
.nav-search #nav-search__result-container ul#nav-search__ul li .item__content h3 a:hover {
104+
border-bottom: none;
105+
color: #8cc8ff; }
106+
.nav-search #nav-search__result-container ul#nav-search__ul li .item__content p {
107+
text-align: left;
108+
margin: 0;
109+
line-height: 1.5;
110+
font-size: 0.95rem;
111+
white-space: nowrap;
112+
overflow: hidden;
113+
text-overflow: ellipsis; }
114+
.nav-search #nav-search__result-container ul#nav-search__ul li .enter {
115+
width: 20px;
116+
display: none; }
117+
.nav-search #nav-search__result-container ul#nav-search__ul li.selected {
118+
background: #282a36; }
119+
.nav-search #nav-search__result-container ul#nav-search__ul li.selected .enter {
120+
display: block; }
121+
.nav-search #nav-search__result-container ul#nav-search__ul mark {
122+
background: none;
123+
color: inherit;
124+
box-shadow: inset 0 -3px 0 0 #fff; }
125+
.nav-search #nav-search__result-container #nav-search__no-result {
126+
padding: 0 10px; }
127+
.nav-search #nav-search__result-container #nav-search__no-result p {
128+
text-align: left; }

0 commit comments

Comments
 (0)