Skip to content

Commit b3dfbd7

Browse files
jitsedesmetCopilot
jitsedesmet
and
Copilot
authored
Add search functionality to website (#70)
* Add pagefind search with modal, Ctrl+K shortcut, and docs boosting - Install pagefind@1.5.2 as a dev dependency - Update build script to run pagefind after next export (outputs to out/pagefind) - Add pagefind-component-ui CSS/JS to _document.js; place <pagefind-modal> in the page body so it is available site-wide - Desktop: search trigger button (with 'Search…' text and ⌘K/Ctrl+K badge) appears at the right end of the nav bar via .nav-search-desktop - Mobile (≤1020px): compact search icon shown next to the hamburger toggle; desktop trigger is hidden - Ctrl+K / Cmd+K keyboard shortcut opens the modal from anywhere on the page - Keyboard shortcut badges styled as white pills with brand-red text so they are readable on the red nav background - Docs pages get data-pagefind-weight="2" on their content wrapper so /docs/ results rank above equally-relevant non-docs pages in search - Override --pf-outline-focus and --pagefind-ui-primary to Comunica red - Add z-index: 100 to the fixed nav (modal sits at 9999) - Gitignore public/pagefind/ (generated at build time, not to be committed) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * add contrast diff in mobile too * pagefind is normal dep in next --------- Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 1cd7d5b commit b3dfbd7

7 files changed

Lines changed: 246 additions & 4 deletions

File tree

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,6 @@ yarn-error.log*
3636

3737
# RSS feed
3838
public/rss-feed.xml
39+
40+
# Generated pagefind search index
41+
public/pagefind/

‎components/Navigation.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export default class Navigation extends React.Component {
66
<div>
77
<a href="/"><img src="/img/comunica_white.svg" className="nav-icon" alt="Comunica logo" /></a>
88
<a href="#" className="toggle-nav"><img src="/img/navigation-toggle.svg" alt="Toggle navigation bar" /></a>
9+
<pagefind-modal-trigger compact=""></pagefind-modal-trigger>
910
</div>
1011
<ul>
1112
<li><a href="https://query.comunica.dev/">Try live</a></li>
@@ -17,6 +18,9 @@ export default class Navigation extends React.Component {
1718
<li><a href="/events/">Events</a></li>
1819
<li><a href="/association/">Association</a></li>
1920
<li><a href="https://github.com/comunica/comunica">GitHub</a></li>
21+
<li className="nav-search-desktop">
22+
<pagefind-modal-trigger placeholder="Search…"></pagefind-modal-trigger>
23+
</li>
2024
</ul>
2125
</nav>;
2226
}

‎package-lock.json‎

Lines changed: 166 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@
44
"private": true,
55
"scripts": {
66
"dev": "node ./build_post_index && next dev",
7-
"build": "node ./build_post_index && next build && next export",
7+
"build": "node ./build_post_index && next build && next export && ./node_modules/.bin/pagefind --site out",
88
"start": "next start"
99
},
1010
"dependencies": {
1111
"cross-fetch": "^3.1.4",
1212
"gray-matter": "^4.0.3",
1313
"next": "^13.2.1",
14+
"pagefind": "^1.5.2",
1415
"raw-loader": "^4.0.2",
1516
"react": "^18.2.0",
1617
"react-dom": "^18.2.0",
@@ -22,6 +23,5 @@
2223
"remark-gfm": "^1.0.0",
2324
"rss": "^1.2.2",
2425
"sass": "^1.26.10"
25-
},
26-
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
26+
}
2727
}

‎pages/[...slug].js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,9 @@ export default class Page extends React.Component {
5050
<p>On this page</p>
5151
<ol className="headers-overview-elements"/>
5252
</div>
53-
<Markdown body={body} />
53+
<div data-pagefind-weight={path.startsWith('/docs/') ? "2" : "1"}>
54+
<Markdown body={body} />
55+
</div>
5456
{frontmatter.index && <DocIndex path={path} paths={sortedPaths} mattersData={mattersData} reverse={frontmatter.reverse}/>}
5557
{frontmatter.blog_index && <BlogIndex path={path} paths={sortedPaths} mattersData={mattersData}/>}
5658
</main>

‎pages/_document.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,16 @@ class MyDocument extends Document {
1313
<Html>
1414
<Head>
1515
<link rel="icon" href="/favicon.ico"/>
16+
<link href="/pagefind/pagefind-component-ui.css" rel="stylesheet"/>
1617
</Head>
1718
<body>
1819
<Navigation />
1920
<div className="nav-pusher"/>
21+
<pagefind-modal reset-on-close=""></pagefind-modal>
2022
<Main />
2123
<Foot/>
2224
<NextScript />
25+
<script src="/pagefind/pagefind-component-ui.js" type="module"></script>
2326
</body>
2427
</Html>
2528
)

‎styles/main.scss‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,16 @@ $color-comunica-red: #9C0510;
22
$color-comunica-red-light: #c20e1c;
33
$color-comunica-red-dark: #740008;
44

5+
// Pagefind component UI colour overrides
6+
:root {
7+
--pf-outline-focus: #{$color-comunica-red};
8+
}
9+
10+
// Pagefind default UI colour override (for sub-results etc.)
11+
:root {
12+
--pagefind-ui-primary: #{$color-comunica-red};
13+
}
14+
515
html,
616
body {
717
padding: 0;
@@ -44,6 +54,7 @@ nav {
4454
margin: 0;
4555
height: 3.5rem;
4656
color: white;
57+
z-index: 100;
4758

4859
ul {
4960
float: right;
@@ -75,6 +86,37 @@ nav {
7586
vertical-align: middle;
7687
float: left;
7788
}
89+
90+
// Desktop search trigger: pagefind-modal-trigger inside the nav <ul>
91+
.nav-search-desktop {
92+
display: inline;
93+
vertical-align: middle;
94+
95+
pagefind-modal-trigger {
96+
--pf-background: transparent;
97+
--pf-border: rgba(255, 255, 255, 0.55);
98+
--pf-border-focus: rgba(255, 255, 255, 0.9);
99+
--pf-text: #ffffff;
100+
--pf-text-muted: rgba(255, 255, 255, 0.85);
101+
--pf-hover: rgba(255, 255, 255, 0.15);
102+
--pf-input-height: 28px;
103+
display: inline-flex;
104+
vertical-align: middle;
105+
margin-top: -2px;
106+
107+
// Keyboard shortcut badges (Ctrl / K): white pill with brand-red text
108+
.pf-trigger-key {
109+
background: rgba(255, 255, 255, 0.9) !important;
110+
border-color: rgba(255, 255, 255, 0.9) !important;
111+
color: $color-comunica-red-dark !important;
112+
}
113+
}
114+
}
115+
116+
// Mobile compact trigger (inside nav <div>, next to hamburger) – hidden on desktop
117+
& > div > pagefind-modal-trigger {
118+
display: none;
119+
}
78120
}
79121
.nav-pusher {
80122
height: 3.5rem;
@@ -662,6 +704,28 @@ main .date {
662704
border: none;
663705
}
664706
}
707+
// Hide desktop search trigger on mobile
708+
.nav-search-desktop {
709+
display: none !important;
710+
}
711+
// Show compact search icon next to hamburger
712+
& > div > pagefind-modal-trigger {
713+
display: block;
714+
float: right;
715+
margin: 0.5rem 0.25rem 0;
716+
--pf-background: transparent;
717+
--pf-border: rgba(255, 255, 255, 0.55);
718+
--pf-border-focus: rgba(255, 255, 255, 0.9);
719+
--pf-text-muted: rgba(255, 255, 255, 0.85);
720+
--pf-hover: rgba(255, 255, 255, 0.15);
721+
--pf-input-height: 36px;
722+
723+
.pf-trigger-key {
724+
background: rgba(255, 255, 255, 0.9) !important;
725+
border-color: rgba(255, 255, 255, 0.9) !important;
726+
color: $color-comunica-red-dark !important;
727+
}
728+
}
665729
}
666730
nav:not(.active) {
667731
position: initial;

0 commit comments

Comments
 (0)