Skip to content

Commit

Permalink
Implement full text search + indexing
Browse files Browse the repository at this point in the history
  • Loading branch information
wileymc committed Dec 20, 2024
1 parent b2dad30 commit 939136f
Show file tree
Hide file tree
Showing 11 changed files with 1,069 additions and 17 deletions.
1 change: 1 addition & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
"next.config.js",
"next-i18next.config.js",
"scripts/widget-client.ts",
"scripts/build-search-index.ts",
"public/*"
]
}
8 changes: 4 additions & 4 deletions .lintstagedrc.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
const path = require('path')
const path = require("path");

const buildEslintCommand = (filenames) =>
`next lint --fix --file ${filenames
.map((f) => path.relative(process.cwd(), f))
.join(' --file ')}`
.join(" --file ")}`;

module.exports = {
'*.{js,jsx,ts,tsx}': [buildEslintCommand],
}
"*.{js,jsx,ts,tsx}": [buildEslintCommand],
};
208 changes: 208 additions & 0 deletions components/DocSearch/DocSearch.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,208 @@
@import "styles/mixins/media";

.searchButton {
display: flex;
align-items: center;
width: 100%;
max-width: 24rem;
gap: 0.5rem;
padding: 0.5rem;
font-size: 0.875rem;
color: var(--blue-text);
background: var(--background-secondary);
border: 1px solid var(--blue-dark);
border-radius: 0.5rem;
transition: background-color 0.2s;

&:hover {
background: var(--blue-dark);
}
}

.shortcut {
display: none;
padding: 0.25rem 0.5rem;
margin-left: auto;
font-size: 0.75rem;
font-weight: 500;
color: var(--blue-text);
background: var(--blue-dark);
border-radius: 0.25rem;

@include for-tablet-up {
display: inline-flex;
}
}
.dialog {
position: fixed;
top: 10%;
left: 50%;
transform: translateX(-50%);
width: min-content;
min-width: 32rem;
max-width: 90%;
max-height: calc(100vh - 20%);
background: var(--blue-darkest);
border: 1px solid var(--blue-dark);
border-radius: 30px;
padding: 20px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
z-index: 1000;
transition:
opacity 0.3s ease,
transform 0.3s ease;
overflow: auto;

&.open {
opacity: 1;
transform: translateX(-50%) scale(1);
}

&.close {
opacity: 0;
transform: translateX(-50%) scale(0.9);
}
}

.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: var(--black-alpha-8);
z-index: 40;
}

.dialogHeader {
padding: 1rem;
border-bottom: 1px solid var(--blue-dark);
}

.dialogTitle {
font-family: "commuters_sans", sans-serif;
font-size: 1rem;
font-weight: 300;
color: var(--text-primary);
}

.searchInput {
width: 100%;
padding: 0.75rem 1rem;
font-family: "proxima_nova", sans-serif;
font-size: 0.875rem;
color: var(--text-primary);
background: transparent;
border: none;
outline: none;
border-bottom: 1px solid var(--blue-dark);

&::placeholder {
color: var(--blue-text);
}
}

.resultsList {
max-height: 60vh;
overflow-y: auto;
padding: 0.5rem 0;

a {
text-decoration: none !important;
}
}

.noResults {
padding: 0.75rem 1rem;
color: var(--blue-text);
text-align: center;
}

.resultGroup {
&:not(:last-child) {
margin-bottom: 0.5rem;
}
}

.groupHeading {
padding: 0.5rem 1rem;
font-family: "commuters_sans", sans-serif;
font-size: 0.75rem;
font-weight: 300;
color: var(--blue-text);
text-transform: uppercase;
letter-spacing: 0.05em;
}

.resultItem {
display: flex;
flex-direction: column;
padding: 0.75rem 1rem;
cursor: pointer;
transition: background-color 0.2s;
border-radius: 15px;

&:hover {
background: var(--blue-dark);
}
}

.resultHeader {
display: flex;
align-items: center;
width: 100%;
gap: 0.5rem;
}

.resultTitle {
font-family: "proxima_nova", sans-serif;
font-weight: 300;
color: var(--text-primary);
}

.resultSection {
margin-left: auto;
font-size: 0.75rem;
color: var(--aqua);
}

.resultMatch {
margin-top: 0.25rem;
font-family: "proxima_nova", sans-serif;
font-size: 0.875rem;
font-weight: 300;
color: var(--blue-text);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

.matchHeading {
font-weight: 500;
color: var(--blue-text-light);
}

.resultTag {
display: inline-flex;
margin-top: 0.5rem;
padding: 0.125rem 0.5rem;
font-size: 0.75rem;
border-radius: 9999px;

&[data-color="aqua"] {
background: var(--aqua-dark);
color: var(--aqua);
}

&[data-color="orange"] {
background: var(--orange-alpha-1);
color: var(--orange);
}

&[data-color="violet"] {
background: var(--violet-alpha-1);
color: var(--violet);
}
}
Loading

0 comments on commit 939136f

Please sign in to comment.