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

Blog Support roadmap (Resolved) #36

Closed
chuckdries opened this issue Apr 15, 2018 · 90 comments
Closed

Blog Support roadmap (Resolved) #36

chuckdries opened this issue Apr 15, 2018 · 90 comments

Comments

@chuckdries
Copy link

@chuckdries chuckdries commented Apr 15, 2018

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
Copy link
Contributor

@FadySamirSadek FadySamirSadek commented Apr 15, 2018

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
Copy link

@gaomd gaomd commented Apr 15, 2018

  • 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
Copy link
Contributor

@mdaffin mdaffin commented Apr 15, 2018

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

@ChinuxParibus
Copy link

@ChinuxParibus ChinuxParibus commented Apr 16, 2018

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).

This was referenced Apr 16, 2018
@Tsuki
Copy link
Contributor

@Tsuki Tsuki commented Apr 17, 2018

vuepress eject with default config

@lekevicius
Copy link

@lekevicius lekevicius commented Apr 17, 2018

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
Copy link
Contributor

@mdaffin mdaffin commented Apr 17, 2018

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
Copy link

@lekevicius lekevicius commented Apr 17, 2018

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
Copy link
Contributor

@mdaffin mdaffin commented Apr 17, 2018

@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
Copy link

@GabMic GabMic commented Apr 18, 2018

A draft outosave system.

@yeedle
Copy link

@yeedle yeedle commented Apr 18, 2018

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

@yyx990803
Copy link
Member

@yyx990803 yyx990803 commented Apr 18, 2018

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
Copy link

@lekevicius lekevicius commented Apr 19, 2018

@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
Copy link

@yeedle yeedle commented Apr 19, 2018

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
Copy link

@andreasvirkus andreasvirkus commented Apr 21, 2018

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
Copy link
Contributor

@ycmjason ycmjason commented Apr 21, 2018

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
Copy link

@ghost ghost commented Apr 23, 2018

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

@ycmjason
Copy link
Contributor

@ycmjason ycmjason commented Apr 23, 2018

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

@tdurieux
Copy link

@tdurieux tdurieux commented Apr 24, 2018

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

@Deadalusmask
Copy link

@Deadalusmask Deadalusmask commented Apr 27, 2018

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
Copy link

@eyleron eyleron commented Apr 27, 2018

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
Copy link
Contributor

@mdaffin mdaffin commented Apr 28, 2018

@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
Copy link
Contributor

@luisDanielRoviraContreras luisDanielRoviraContreras commented Apr 29, 2018

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
screenshot_30

I would love to help in this

@meteorlxy
Copy link
Member

@meteorlxy meteorlxy commented Apr 29, 2018

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

@ulivz
Copy link
Member

@ulivz ulivz commented Oct 21, 2018

@lekevicius So excited to know that you want to join in the design of the blog theme, my twitter is @_ulivz, let's talk privately.

@webmasterish
Copy link

@webmasterish webmasterish commented Dec 24, 2018

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
Copy link

@wensonsmith wensonsmith commented Dec 29, 2018

@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
Copy link

@DTrejo DTrejo commented Dec 29, 2018

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
Copy link

@webmasterish webmasterish commented Jan 17, 2019

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

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

Hope you find them useful.

@darrenjennings
Copy link

@darrenjennings darrenjennings commented Jan 20, 2019

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

@meteorlxy
Copy link
Member

@meteorlxy meteorlxy commented Jan 20, 2019

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

@tolyanor
Copy link

@tolyanor tolyanor commented Feb 25, 2019

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
Copy link

@songololo songololo commented Feb 26, 2019

@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
Copy link

@FilledStacks FilledStacks commented Apr 21, 2019

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
Copy link

@supaht supaht commented May 30, 2019

@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
Copy link

@camelG camelG commented Jun 4, 2019

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
Copy link
Member

@ulivz ulivz commented Jun 4, 2019

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
Copy link
Member

@ulivz ulivz commented Jun 4, 2019

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet