Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: autogen section icons #72

Merged
merged 7 commits into from Mar 4, 2024
Merged

feat: autogen section icons #72

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2e36b4a
feat: autogen section icons
cpreston321 Feb 26, 2024
95864f3
chore: map more common icons
cpreston321 Feb 26, 2024
5864f55
chore: apply automated updates
autofix-ci[bot] Feb 26, 2024
1315a69
chore: style/pref
cpreston321 Feb 26, 2024
515bcde
Merge branch 'feat/sectionIcons' of https://github.com/unjs/docs into…
cpreston321 Feb 26, 2024
666defb
ignore ts issue
pi0 Mar 4, 2024
2a655a0
refactor
pi0 Mar 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 15 additions & 0 deletions app/server/plugins/content.ts
View file
Open in desktop
Expand Up @@ -5,6 +5,21 @@ export default defineNitroPlugin((nitroApp) => {
return
}

// A Set of common icons for the guide
const commonIcons = {
'/guide': 'ph:book-open-duotone',
'/guide/components': 'bxs:component',
'/config': 'ri:settings-3-line',
'/configuration': 'ri:settings-3-line',
'/examples': 'ph:code',
'/utils': 'ph:function-bold',
}

// Set the icon for the file if it is not already set
if (commonIcons?.[file._path] && !file.icon) {
cpreston321 marked this conversation as resolved.
Show resolved Hide resolved
file.icon = commonIcons[file._path]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe use a fuzzy search on both path and title?

Also maybe we could somehow get list of all available icons from iconify? Thinking this because I found it so repetitive for example for finding library/company logos and adding them.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could maybe leverage their APIs? (just an idea imagined might be one)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This sounds like a good idea, but wouldn't this decrease performance? api hit on every file? Unless there was a super fast cache api that doesn't take long at all. Then trying to figure which the "preferred" icon set to use is another challenge, unless we knew a head of time.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could potentially host our own api on a new domain (take advantage of cache)-> https://iconify.design/docs/api/hosting.html

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also saw antfu icones data filtering -> https://github.com/antfu/icones/blob/main/src/data/index.ts

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@pi0 I created a POC that gathered the data we need with a script that generates a file and uses fuse to search. There is still some missing pieces that I would like to figure out.

  • Better aliases (Like custom for unjs)
  • How to predicate which set to use?

https://github.com/cpreston321/poc-iconify-search

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice POC!! Refactored resolve fn so we can easily iterate and integrate with full resolver.

}

// Remove first h1 from markdown files as it is added to front-matter as title
if (file.body?.children?.[0]?.tag === 'h1') {
const text = getTextContents(file.body.children[0].children)
Expand Down
4 changes: 0 additions & 4 deletions docs/1.guide/1.index.md
View file
Open in desktop
@@ -1,7 +1,3 @@
---
icon: ph:book-open-duotone
---

# Getting Started

> [!IMPORTANT]
Expand Down
4 changes: 0 additions & 4 deletions docs/1.guide/components.md
View file
Open in desktop
@@ -1,7 +1,3 @@
---
icon: bxs:component
---

# Components

> Discover the components you can use in your markdown files.
Expand Down
4 changes: 0 additions & 4 deletions docs/2.config/1.index.md
View file
Open in desktop
@@ -1,7 +1,3 @@
---
icon: ri:settings-3-line
---

# Configuration

## Example
Expand Down