Codeberg/Documentation
42
199
Fork
You've already forked Documentation
161

Add search functionality #370

Merged
Gusted merged 1 commit from :search into main 2023年11月30日 22:33:24 +01:00
Contributor
Copy link

This should solve #23.

This is a fully static search implementation powered by Pagefind.

In terms of UI, I found and implemented a section in the sidebar for searching the documentation. It was hidden presumably waiting for implementation. It mentioned using the slash (/) key for searching, so I implemented the hotkey as well.

I made the indexing command required by Pagefind run after Eleventy finishes building using the .after hook.

This should solve #23. This is a fully static search implementation powered by [Pagefind](https://pagefind.app/). In terms of UI, I found and implemented a section in the sidebar for searching the documentation. It was hidden presumably waiting for implementation. It mentioned using the slash (/) key for searching, so I implemented the hotkey as well. I made the indexing command required by Pagefind run after Eleventy finishes building using the `.after` hook.
@ -165,0 +166,4 @@
#search-results {
position: absolute;
background: #ffffff;
height: 337px;
First-time contributor
Copy link

Does this scale in mobile screens?

Does this scale in mobile screens?
Author
Contributor
Copy link

New search functionality on mobile

Please let me know if it needs any adjustments.

[New search functionality on mobile](https://envs.sh/uJK.43.png) Please let me know if it needs any adjustments.
First-time contributor
Copy link

I'd add a bit of padding to the right, to not have the text near the border. Just a bit. But other than that, great!

I'd add a bit of padding to the right, to not have the text near the border. Just a bit. But other than that, great!
Author
Contributor
Copy link

@captainepoch Thank you for the feedback! It looks nicer now.

@captainepoch Thank you for the feedback! [It looks nicer now.](https://envs.sh/uJz.45.png)
First-time contributor
Copy link

Indeed, it does! Thanks for taking the feedback!

Indeed, it does! Thanks for taking the feedback!
oatbiscuits marked this conversation as resolved
@ -34,1 +34,4 @@
<link href="/pagefind/pagefind-modular-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-modular-ui.js"></script>
<script>
First-time contributor
Copy link

I know there is another

I know there is another <script> in this file, but to keep it a bit clean, could it be possible to move it to a .js file instead? Just asking. If not possible, mark this as resolved!
Author
Contributor
Copy link

@captainepoch Sorry, I am confused. You mean another Pagefind UI or another search library to use?

If you mean the former then there is the default one but like I said in the PR description I found a search box (also found in design.codeberg.org / https://codeberg.org/Codeberg/Design) so I opted to use it instead of designing something that might not fit the design system.

@captainepoch Sorry, I am confused. You mean another Pagefind UI or another search library to use? If you mean the former then there is the default one but like I said in the PR description I found a search box (also found in design.codeberg.org / https://codeberg.org/Codeberg/Design) so I opted to use it instead of designing something that might not fit the design system.
First-time contributor
Copy link

No, I meant to put the lines 38-59 (cbcf6451f4/content/_includes/default_layout.njk (L38-L52)) into a .js file rather than inside a <script> lane. It's just a bit clearer, that's all, it's not really necessary!

No, I meant to put the lines 38-59 (https://codeberg.org/Codeberg/Documentation/src/commit/cbcf6451f438bc88ef54f9147dd46d1058146b2f/content/_includes/default_layout.njk#L38-L52) into a .js file rather than inside a `<script>` lane. It's just a bit clearer, that's all, it's not really necessary!
@ -165,0 +164,4 @@
}
#search-results {
background: #ffffff;
Owner
Copy link

var(--dm-sidebar-bg-color) suits as a better value as it's theme dependent.

`var(--dm-sidebar-bg-color)` suits as a better value as it's theme dependent.
oatbiscuits marked this conversation as resolved
@ -165,0 +167,4 @@
background: #ffffff;
overflow: hidden;
word-wrap: anywhere;
white-space: break-spaces;
Owner
Copy link
--pagefind-ui-border: var(--dm-sidebar-divider-bg-color);

Would need to be added.

```css --pagefind-ui-border: var(--dm-sidebar-divider-bg-color); ``` Would need to be added.
oatbiscuits marked this conversation as resolved
deploy.sh Outdated
@ -1,5 +1,6 @@
#!/bin/bash -ex
npm run build
npx pagefind
Owner
Copy link

This also needs to be added to the serve command defined in package.json, with --serve argument passed.

This also needs to be added to the `serve` command defined in `package.json`, with `--serve` argument passed.
Author
Contributor
Copy link

@Gusted I changed it so it runs after building (whether for deployment or serving locally) using .after in Eleventy's configuration file. This avoids the awkward placement of the command whether in deploy.sh or package.json.

@Gusted I changed it so it runs after building (whether for deployment or serving locally) using [`.after`](https://www.11ty.dev/docs/events/#eleventy.after) in Eleventy's configuration file. This avoids the awkward placement of the command whether in `deploy.sh` or `package.json`.
Gusted marked this conversation as resolved
Author
Contributor
Copy link

@Gusted Thank you for the feedback! I have applied modifications accordingly. I also added a small line to README.md in the technical section for dependency bookkeeping purposes.

@Gusted Thank you for the feedback! I have applied modifications accordingly. I also added a small line to `README.md` in the technical section for dependency bookkeeping purposes.
oatbiscuits changed title from (削除) WIP: Add search functionality (削除ここまで) to Add search functionality 2023年11月29日 20:17:39 +01:00
@ -19,2 +19,4 @@
--admonition-icon-dimension: 20px;
--pagefind-ui-background: var(--dm-sidebar-bg-color);
Owner
Copy link

This doesn't have any effect as due to the ordering of stylesheets in <head> causing pagefind-modular-ui.css to have priority.

This doesn't have any effect as due to the ordering of stylesheets in `<head>` causing `pagefind-modular-ui.css` to have priority.
oatbiscuits marked this conversation as resolved
@ -104,2 +123,2 @@
{# <!-- Sidebar content with the search box -->
<div class="sidebar-content">
<!-- Sidebar content with the search box -->
<div class="sidebar-content">
Owner
Copy link

Trailing empty space.

Trailing empty space.
oatbiscuits marked this conversation as resolved
Gusted left a comment
Copy link

LGTM. Thanks!

LGTM. Thanks!
Gusted referenced this pull request from a commit 2023年11月30日 22:33:24 +01:00
Sign in to join this conversation.
No reviewers
Labels
Clear labels
Codeberg Pages
Issues affecting Codeberg Pages
Documentation Usability
Issues related to using and reading docs.codeberg.org
Forgejo
Good First Issue! 👋
Kind: Bug
Kind: Documentation
Kind: Enhancement
Kind: Feature
Kind: Question
Kind: Security
Licensing
Part: Generator
This is related to the generation of the documentation, not to the content itself
Priority: High
The priority is high
Priority: Low
The priority is low
Priority: Medium
The priority is medium
Reviewed: Confirmed
Something has been confirmed
Reviewed: Duplicate
Something exists already
Reviewed: Invalid
Something was marked as invalid
Reviewed: Wontfix
Something won't be fixed
Status: Blocked
Status: Help wanted
Contributions are welcome!
Status: In progress
Work is in progress
Status: Needs feedback
Feedback is needed
Status: Ready for Review
Work is completed
Status: Review
Review is in progress / Reviewers wanted
Status: Stale
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
3 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
Codeberg/Documentation!370
Reference in a new issue
Codeberg/Documentation
No description provided.
Delete branch ":search"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?