feat: support path and relative-path prop

[hairyf]

close #24

---

Submitted with StackBlitz Codeflow.

[flingyp]

Jump to github demo. @vitepress-demo-preview/component package should achieve for the function. Right?

[hairyf]

It's actually not very suitable for @vitepress-demo-preview/component. It is useful when customizing the demo-preview, and we need to customize the GitHub blob address.

Reference: https://github.com/tusen-ai/naive-ui/blob/HEAD/demo/utils/EditOnGithubHeader.vue#LL11C22-L11C22

I don't think it should be added to the default component. This is just a simple use case and would add unnecessary complexity.

[hairyf]

Additionally, I haven't found any test cases to verify this functionality. The dependencies in the example are linked to remote addresses. How should I proceed with testing?

[flingyp]

OK, but the codes you modified doesn't do the function. relativePath should is a online link url but you get the absolute path of the local component.

[flingyp]

We should make sure that a relativePath prop is resolvable by the plugin. Right? Maybe you can do it in the @vitepress-demo-preview/component package and provide the function to jump the link.

[hairyf]

It shouldn't be a remote path unless githubPath is exported; otherwise, it should be a relative path provided to demo-preview.

<script lang="ts" setup>
const props = defineProps<{
  relativePath: string
}>()

const githubPath = `https://www.github.com/.../tree/main${props.relativePath}`
</script>

<template>
  <!-- .... -->
  <a :href="githubPath">to github edit</a>
</template>

[hairyf]

I added support for that feature in markdown-it-vitepress-demo#metadata and implemented other features as well. It has indeed been helpful to me. Additionally, I would like to thank the project for providing me with great inspiration!

[flingyp]

Thanks, your attention and contribution!

I can test the feature at example and this is the result I saw. You only need to custom a demo-preview component and the usage remains unchanged.

If this meets your expectations, I will merge this PR.

[hairyf]

yes, however, it should replace \ with/

[flingyp]

yes, however, it should replace \ with/

Yeah, well, you can change the code and submit it. I will merge the pr. Then you just need to customize your own preview component. Thanks!