Blog Support roadmap (Resolved)

[chuckdries]

Hello,

I'm excited to use vuepress for my personal website but I kinda want blog support before I switch, so I was thinking I'd kickstart that discussion on that now. This issue is to seek input as to what blog support might look like.

I was thinking a minimum viable product might be

• some kind of tag/category system
• An alternative default theme which feels more like a blog
• helper utilities for themes (high order components?) for getting lists of posts around the tag/category system
• Pre-defined markdown templates that correspond to theme vue components, like hexo's layouts
• A CLI command for bootstrapping posts, vuepress new [layout] <post title>

[FadySamirSadek]

I think you should add also the functionality to publish only posts with dates that has already came like gatsby and jekyll. If you need help I would absolutely love to work on these tasks with you

[gaomd]

• RSS/JSON Feed
• Draft post
• Ability to eliminates the .html extension
• Split date into subdirs: blog/2018-04-16-post-title.md => blog/2018/04/16/post-title/index.html

[mdaffin]

The ability to alias posts and create redirects for them to allow movement of old posts while preserving all incoming links.

[ch1nux]

Maybe list all post in some sort of filter (customizable, of course), tags or categories and show them in README.md at first (chronologically or by tags).

[Tsuki]

vuepress eject with default config

[lekevicius]

I have been reading VuePress code and comparing with the blog build system I have written for Gulp.

List of features I have for my gulp static blog:

• Markdown
• Custom frontmatter
• Per-post CSS and JS
• Content in siteData to create feed, index page, etc.
• RSS/JSON feed
• Date parsing from filename
• Tags in frontmatter
• Virtual directories in URL, as described by @gaomd, turning 2018-04-16-post-title.md to blog/2018/04/16/post-title/index.html
• Custom helper functions, like reading time calculation from markdown
• Pagination for blog page
• Paginated monthly archives
• Paginated tag pages
• Link-posts (like Daring Fireball, showing differently in feed if link frontmatter meta is found)

These are all the features I've built for gulp static site building, and would like VuePress to have.

However, adding all of that to the "core" would not be very great. I think a better, smarter solution would be to think of a way to allow themes to modify/plug into prepare and build stages, creating virtual pages, feed, etc.

I'm happy to help building and designing Blog theme, but I'd like to work out this build stage plugins before, instead of forking and modifying "core".

[mdaffin]

Looks like it is reasonably easy to get lists of posts and filter tags/categories working even without support in the Layouts. Inside any .md file:

---
home: true
---
<div v-for="post in posts_with_tag('some_tag')"
     :key="post.frontmatter.date">
  <router-link :to="post.path">
    <article>
      <div class="title">{{ post.title }}</div>
      <div class="date">{{ new Date(post.frontmatter.date).toLocaleDateString() }}</div>
      <div class="description">{{ post.frontmatter.description }}</div>
    </article>
  </router-link>
</div>

<script>
export default {
    methods: {
        posts_with_tag(tag) {
            return this.$site.pages
            .filter((page) => page.frontmatter.tags)
            .filter((page) => page.frontmatter.tags.includes(tag))
        },
        posts() {
            return this.$site.pages
            .filter((page) => page.path.startsWith("/blog/"))
        }
    },
}
</script>

The only missing part is being able to generate dynamic pages, but I think this can be solved generically along with creating a sitemap, rss feed, specific tag/category pages, redirect links by allowing the theme or pages to add extra routes with plain text content or layouts with data. With something like add_route(route, payload, layout) or add_route(route, content) that the layout/pages can call on the fly for example when they detect a new tag.

[lekevicius]

Quite right. Generic features/building blogs needed:

• Registering new routes in theme (for index, archives, tag pages, pagination)
• Content, not only metadata, in siteData (for feed, index, archive pages)
• URL rewriting for pages (transform .md filename to nice post URL)

With these building blogs, entire blogging system can be made 🎉

[mdaffin]

@lekevicius I think those are the core features that are missing from vuepress, once those are added I believe that the rest of the features listed in this thread can be accomplished through the default or may be an alternitive them. It might be worth rasing them as seperate issues if the others agree?

[GabMic]

A draft outosave system.

[yeedle]

What about comments? A default theme should perhaps offer a commenting component that integrates one of the popular commenting platforms.

[yyx990803]

So - the default theme is going to be focused on documentation sites. Proper blog support should be done in a separate theme - and we currently don't have the bandwidth to work on that, so the goal in VuePress core should be designing the minimum API that can enable a custom theme to provide full blogging support. I'd encourage the community to explore that and provide feedback on what is currently lacking (e.g. this comment) and what kind of APIs would make that possible.

For registering additional routes, currently .vuepress/enhanceApp.js can get access to the router. I think we can allow a theme to do something similar. Idea: if a theme exposes index.js, it can do something similar to this:

// theme/index.js
export default ({ Vue, router, options }) => {
  router.addRoutes([
    {
      path: '/archive',
      component: () => import('./Archive.vue')
    }
  ])
}

[lekevicius]

@yyx990803 That would be great to solve route adding.

Would this also allow route rewriting, that is, transforming 2018-04-16-post-title (.md file) to blog/2018/04/16/post-title (/index.html file)?

Lastly, for making content available, it's related to this line when siteData is being built. What would be an elegant solution to enable content in siteData, for feed?

[yeedle]

running vuepress build rebuilds the entire website which makes sense for a documentation website but not as much for a blog. Is there a straightforward approach to build just the newly added pages?

[andreasvirkus]

Also linking this here (RSS support was already mentioned above) to keep sitemaps in mind.
Maybe the other ticket can be closed then? 🤷‍♂️
#52

Other things that my current Metalsmith blog supports and we could implement very easily (sorta nice-to-have features, but at the same time standards nowadays, I suppose):

• time to read/word count
• last modified/published date
• title case for post titles (?)

Maybe also think about nesting themes? So if / uses the default/docs theme, then /blog could use a separate theme and gather everything from blog/*.md as posts? Or should this be solved via themeConfig.docsDir and have two separate builds?

[ycmjason]

A little bit irrelevant but I have written some really hacky code to make the current VuePress looks a little bit more like a blog with the following config.

https://github.com/ycmjason/ycmjason.com/blob/master/.vuepress/config.js

It will automatically generated a side bar with "YYYY MMM" format and then the title of the article would have the date prepended. So I could now easily add a new article without worrying about adding them to side bar.

See the blog live here:

https://www.ycmjason.com

[ghost]

Support for comments using disqus or the like would be welcome as well.

[ycmjason]

@rogersachan planning to do that for my site. And also planning to add tags support.

[tdurieux]

Thanks @mdaffin and @ycmjason, I used your code to create a first version of my blog.
It works, ok. I still need to figure out how to handle to tags in the current version

[rubick24]

Thanks for this discussion, I just migrated my blog from hexo, check Deadalusmask/Arthas.me if it helps. 😁
Arthas.me

And also hope for news about disqus support.

[eyleron]

Documentation versus Blog Features

I've been looking at the VuePress issues and progress and the push to milestone. I totally get drawing a line between "core documentation use case" versus "blog use case". But I think that too can be a form of trap where features that are useful "core features" or "documentation features" get split off into an either/or system.

For my company's software documentation, I'm thinking on using VuePress, and so we could definitely use some of these features that some would consider more "bloggy".

• Categories

• Tags: not just for display per-page, but also as an alternative means of organizing/navigating content.
  For instance, many help documentation systems support multiple "builds" whereby tag variables trigger alternative versions of the content. For instance, a "Platinum" build might include all of the feature documentation. Or, in VuePress' case, one build of documentation might be "Core + Documentation" and the other build would be "Core + Blog".

• Last Updated

[mdaffin]

@eyleron once the plugin system gets released then things should be more composable. Ideally, it would be nice to keep the core features light and implement most optional features in plugins or separate themes rather than bloating down the core with every possible feature people could want.

Even common things like tags and categories can be harder to make generic across a blog and docs and I think it would be better first designing these features in plugins and themes where there is more freedom to try things out and experiment before setting on a design for things if one can be found. I know I for one have found the tagging system of some static site generators to be limiting for what I wanted to do at times.

[luisDanielRoviraContreras]

An improvement that I think is needed is to be able to add a label in the menu that says example component x (New) or component x (updated) something like this

I would love to help in this

[meteorlxy]

@luisDanielRoviraContreras
That's cool, but may not in this blog roadmap

[webmasterish]

A few days ago I made a little npm cli called vuepress-new-page so that I can easily create new pages/posts, and just now I found out that it was one of the must have items on the MVP list:

A CLI command for bootstrapping posts, `vuepress new [layout] <post title>`

Is that what you had in mind?

[wensonsmith]

@ulivz Why doesn't blog plugin use Layout.vue as Default when path match _post , it use Post.vue as default layout . And document doesn't mention it, so it confuse me .

[DTrejo]

I can highly recommend Git2Go for iOS - when paired with circleci you can publish new articles from your phone to github pages! I love it

Details: https://github.com/DTrejo/dtrejo.github.io
(It started as a vue site and then transformed)

[webmasterish]

I made a few plugins that cover some of the must have items discussed here:

• vuepress-plugin-autometa - Auto generates meta tags (twitter, open graph, schema.org, etc...) for every page/post
• vuepress-plugin-autonav - Auto generates nav links with top level pages if it's not already set
• vuepress-plugin-feed - RSS, Atom, and JSON feeds generator with auto links added to document head

All plugins have default options that can get you started quickly.

Hope you find them useful.

[darrenjennings]

I created a Vuepress reading time plugin to display how long a page takes to read

• https://github.com/darrenjennings/vuepress-plugin-reading-time - utilizes the reading-time library used for my vuepress blog here: https://guuu.io

[meteorlxy]

@webmasterish @darrenjennings Consider adding your awesome plugins to Awesome Vuepress?

[tolyanor]

Hi!
Where I can find how to create blog with vue blog plugin and vue pagination plugin?
Documentation of this plugins is very pure, and I do not know where to start

[songololo]

@tolyanor it looks like they'll be working on finishing the blog configuration sometime in March. The project roadmap has some general info on timelines:
https://github.com/vuejs/vuepress/projects/1

[FilledStacks]

Hi there,

I've read through the rfc for the blog plugin/theme. Are there any updates on how far along this has come?

I recently finished implementing a static blog site generated from .md files using nuxt, frontmatter-markdown-loader and highlight.js for code highlighting. It's not the best experience setting it all up and it's not working exactly how I would like it to.

Anyone have any info on the actual progress and how far along this is?

[supaht]

@ulivz Just checking if there's any update on the timeline for the official blog support. Really appreciate all the work you are doing with this project!

[camelG]

vuepress is great. I thought to build a blog with blog plugin, but it seems to have been deleted from 1.x version today, do not update in the future?

[ulivz]

Hey, all, sorry for the delay to notify all of yours about the latest progress and 3 good messages —— For now on, writing a blog or blog theme with VuePress will be quite easy than you think.

New Blog Plugin: https://github.com/ulivz/vuepress-plugin-blog

Note that we have fully rewritten the blog plugin from 1.0.0-beta.1, the previous blog plugin has some designing issues and even doesn't have a good documentation.

Default Blog Theme: https://github.com/ulivz/vuepress-theme-blog

(Live Example: http://example.vuepress-theme-blog.ulivz.com/) Welcome contribution for the mobile-side styles enhancement、RSS and site map support.

A VuePress Blog Theme implemented in around 70 lines: https://github.com/ulivz/70-lines-of-vuepress-blog-theme

---

Why moving the blog-related stuffs out of core repo?

The core is stable enough, but we need quick iteration for blog plugin and theme, so it's not very necessary to manage them under one repo.

In addition, we want the core repo focus more on documentation itself, and avoiding infinite growth of code can also ease the growing maintenance pressure of the core repo.

[ulivz]

So it's time to close this issue, please head correct repo to ask question, submit issue, feature request or pull request (Welcome!)

Thanks for all of yours‘ continued support for VuePress, there's still a long way to go, and VuePress can be better. Let's go together!