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.

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

feat(theme-default): add built-in global component Badge. #1134

Conversation

richardo2016
Copy link
Contributor

@richardo2016 richardo2016 commented Aug 6, 2022

@brc-dd Hi, this my first PR to vitepress. Could you please review the changes, any suggestion is nice for me to improve this PR, or drop it if you think the component is unnecessary for theme-default.

What does this PR take

One new component <Badge /> to help writors add one marked badge in title, or somewhere they like.

image

Why

I'm using custom <Badge /> in my own vitepress theme/config for some time, I guess, maybe other developers would use this component if the official default theme provides it. So I try to add it into theme-default as <VPBadge />


fixes #1156

@brc-dd
Copy link
Member

brc-dd commented Aug 6, 2022

Looks fine to me. But might wanna move those color definitions to vars.css so they can be customized (and possibly use existing colors).

Also, probably register this globally, so users don't need to import it on each page.

@brc-dd brc-dd added enhancement New feature or request theme Related to the theme labels Aug 6, 2022
@richardo2016 richardo2016 force-pushed the feat/builtin_badge_component branch from 30d7373 to e62a100 Compare August 7, 2022 13:11
@richardo2016
Copy link
Contributor Author

richardo2016 commented Aug 7, 2022

Looks fine to me. But might wanna move those color definitions to vars.css so they can be customized (and possibly use existing colors).

Also, probably register this globally, so users don't need to import it on each page.

@brc-dd That's great, as your suggestion,

  • I registered the <Badge /> as global component.
  • I moved all color to vars.css, allowing theme developer could override it.

I also modify the related content in docs about changes above.

@richardo2016 richardo2016 force-pushed the feat/builtin_badge_component branch 2 times, most recently from 613fdb7 to e62a100 Compare August 7, 2022 13:17
@richardo2016 richardo2016 changed the title feat(theme-default): add built-in component VPBadge. feat(theme-default): add built-in global component Badge. Aug 7, 2022
@meteorlxy
Copy link
Member

BTW, we could migrate to @mdit-vue/plugin-toc to allow badges in toc after this PR is merged.

@richardo2016 richardo2016 force-pushed the feat/builtin_badge_component branch from f2326e5 to d0eb32f Compare August 9, 2022 13:46
@@ -6,7 +6,7 @@ import {
onMounted,
watch
} from 'vue'
import Theme from '/@theme/index'
import Theme, { VPBadge } from '/@theme/index'
Copy link
Member

Choose a reason for hiding this comment

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

@theme/index is an alias to the theme entry, which could be the user's custom theme. So { VPBadge } is not guaranteed to be exported.

@@ -19,6 +19,7 @@ export { default as VPTeamPage } from './components/VPTeamPage.vue'
export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue'
export { default as VPTeamPageSection } from './components/VPTeamPageSection.vue'
export { default as VPTeamMembers } from './components/VPTeamMembers.vue'
export { default as VPBadge } from './components/VPBadge.vue'

const theme: Theme = {
Copy link
Member

Choose a reason for hiding this comment

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

Should register the component via enhanceApp here

@Charles7c
Copy link
Contributor

Looking forward this feature.

@brc-dd brc-dd closed this in #1239 Oct 31, 2022
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jan 21, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement New feature or request theme Related to the theme
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Badge feature
4 participants