Jekyll collections. #2101
Comments
5 tasks
|
@sustained Vuex sounds like a good option for collections. As far as rendering/templates, you can create a transitional "prerender" which has the jekyll templates as the state for SSR. This could be combined with Vuex and some helpers to flush it out. <template>
<div>
<h1>{{siteName}}</h1>
<div v-html="content"/>
</div>
</template>
<script>
export default {
computed: {
inPrerender: () => typeof window['some_prerender_injected_variable'] !== 'undefined',
siteName() {
return this.inPrerender() ? "{{site.name}}" : this.name
},
content() {
return this.inPrerender() ? "{{content}}" : import('./MyMarkdown.md')
}
}
}
</script><!DOCTYPE html>
<html lang="en">
<head>
<script>window.__INITIAL_STATE__ = {{ site }}</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
This method also works in Couchdb Lists and Shows but they are now deprecated. I'm poking at it now figured I would share Working example is posted VueJunkie/vuejunkie.github.io and can visit it at vuejunkie.github.io |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Feature request
Jekyll collections are a wonderful feature and I recommend that you read those docs as it will explain it better than I can.
They allow you to group related pages, like "members of a team" or "talks at a conference" and then to use that data in other pages.
By default collections don't render their own pages / generate their own routes (instead they are intended to be used in other pages) but you can override that on a per-collection basis.
These collections are markdown files which should support everything that a normal Vuepress page does but there are a few major differences.
$siteor perhaps in a Vuex store?What problem does this feature solve?
For the Vue Community website there are a few things we'd like to do.
We'd like to have libraries/frameworks be their own "pages" but these shouldn't have routes, instead other pages will include them.
Same goes for the FAQs and a few other things.
What does the proposed API look like?
Perhaps it would look somewhat similar to Jekyll?
{% for staff_member in site.staff_members %} <h2>{{ staff_member.name }} - {{ staff_member.position }}</h2> <p>{{ staff_member.content | markdownify }}</p> {% endfor %}Or perhaps there would be a custom component for this, instead of e.g. a filter?
I know that we could kind of achieve this ourselves but the key point here is how would we get
renderMarkdownto use the internal markdown-it instance for rendering and also work with Vue components, like regular VuePress pages do?How should this be implemented in your opinion?
Maybe we could expose it as
$site.collections, as above. Alternatively via Vuex - a module per collection, for instance?I like the Jekyll convention of folders with underscores at the beginning being collections.
Are you willing to work on this yourself?
I'm somewhat open to the idea.
I was thinking about making it a plugin but it doesn't seem possible with the current API, I think there would need to be some changes there.
Well, it would be possible but there would be a lot of custom code involved instead of us hooking into the internals of VuePress to do more of the heavy lifting for us.
The text was updated successfully, but these errors were encountered: