saberland / saber

()==[:::::::::::::> Build static sites in Vue.js, without the hassle

Saber

A static website generator built on top of Vue.js and webpack.

❤️ Please sponsor me to support this project or prioritize a feature you want. I will work on this project for full-time once I have 150+ sponsors.

Linux & Mac	Windows
	Should work

🔗 Website

📚 Documentation

👩‍🏫 Tutorial

---

Saber is an open source project. It's an independent project with its ongoing development made possible thanks to the support by our amazing backers.

Saber wouldn't be what it is today without the contributions from these awesome people:

---

Sponsors

---

Licensed under MIT.

saber's Issues

We may need a logo 🤔

Keywords:

• letter s
• saber
• sword
• maybe cute

---

IssueHunt Summary

egoist has been rewarded.

Backers (Total: $80.00)

• issuehunt ($80.00)

Submitted pull Requests

• #419 chore(website): a bunch of minor updates

---

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

---

IssueHunt has been backed by the following sponsors. Become a sponsor

Pass route params to async data?

Is this possible (like in Nuxt), or am I doing it wrong? Trying to accomplish something like this:

// pages/[id].vue

<template>
  <div>
    <div>Post {{ id }}</div>
    <pre>{{ post }}</pre>
  </div>
</template>

<saber>
import axios from 'axios'

export default {
  params() {
    return {
      id: this.params.id // or this.$route.params.id ??
    }
  },

  async data() {
    const { data: post } = await axios
      .get(`https://jsonplaceholder.typicode.com/posts/${this.$route.params.id}`)
    return {
      post
    }
  }
}
</saber>

Getting the following error

It looks like in the Docs you're providing a hard coded array of params.

tag/category pages should have all the page attributes

Should follow the Page Interface, currently they lack of createdAt and updatedAt attributes.

https://github.com/egoist/saber/blob/9499b12bdcfcbb2adf944155dfd649b3380b8ee8/packages/saber-plugin-query-posts/lib/index.js#L94-L99

Serve static files

Serve static files under root path.

• Serve static folder or public folder?
• Serve $theme/$staticFolder as well?

Are we able to use <router-view />?

I would like the different routes to be setup within a router-view in the /pages/index.vue component. I created a new Vue project with the vue-cli with the vue router added.

For instance:
`

Welcome to saber.js
About

      <p>Lorem ipsum dolor</p>

      <router-view />
   </div>
</template>

`

When "About" is clicked, it doesn't show the about.vue component in that area of the template -- "Welcome to sabjer.js" the about link and paragraph are lost.

Is it possible to nest these components in a specific area of the template?

Thanks..

cannot resolve external script tag in markdown file

log:

ERROR in C:/workspace/website/pages/_posts/2019-03-27-saber-post.md?saberPage=86732c46
Module not found: Error: Can't resolve 'https://gist.github.com/h404bi/62f65347d5784b37c8535aa371c59720.js?vue&type=script&lang=js&saberPage=86732c46' in 'C:\workspace\website\pages\_posts'
 @ C:/workspace/website/pages/_posts/2019-03-27-saber-post.md?saberPage=86732c46 2:0-130 3:0-125 3:0-125 9:2-8
 @ C:/workspace/website/.saber/routes.js
 @ C:/workspace/website/node_modules/saber/lib/renderer/app/create-app.js
 @ C:/workspace/website/node_modules/saber/lib/renderer/app/entry-client.js
 @ multi (webpack)-hot-middleware/client.js C:/workspace/website/node_modules/saber/lib/renderer/app/entry-client.js

./pages/_posts/2019-03-27-saber-post.md:

---
layout: post
title: Hello Saber
date: 2019-03-27
---

Hello Saber!

<script src="https://gist.github.com/h404bi/62f65347d5784b37c8535aa371c59720.js"></script>

expose tag/category permalink from query-post plugin

Feature request

Expose/Return the permalink of tags or cateogries from the query-post plugin.

What problem does this feature solve?

So users or theme developers can use the permalink in their theme. Currently the only way to do it is by hardcoding the permalink in the theme. For instance:

https://github.com/egoist/blog/blob/b29939c7148e19b32b3020499b27ae29cea0cdf6/themes/luna/layouts/default.vue#L21

However, the permalinks of tags or categories can be dynamically configured by the plugin's option, which means it's independent of the theme. Let's suppose that one user install a compiled theme which contains hardcoded tags/categories support, then the user changes the permalinks format of tags or categories but does not (want to) change the hardcoded permalink format in the compiled theme. Then he/she will encouter problem on routing to tag or category pages.

What does the proposed API look like?

First idea comes to my mind is attaching permalink to the tag or category.

How should this be implemented in your opinion?

That's so useful if we could access the permalink of a tag/category directly.

<div class="tags" v-if="tags">
    <saber-link class="tag" :to="`${tag.permalink}`" v-for="tag in tags" :key="tag">
         #{{ tag }}
    </saber-link>

Are you willing to work on this yourself?

I'm not sure..

saber build hangs

Sometimes stuck in 95% emitting

...
info emitRoutes (vue-renderer)
info chainWebpack (vue-renderer)
info chainWebpack (builtin:config-css)
info chainWebpack (builtin:config-image)
info chainWebpack (builtin:config-font)
info chainWebpack (builtin:config-other-loaders)
info chainWebpack (google-analytics)
info chainWebpack (vue-renderer)
info chainWebpack (builtin:config-css)
info chainWebpack (builtin:config-image)
info chainWebpack (builtin:config-font)
info chainWebpack (builtin:config-other-loaders)
info chainWebpack (google-analytics)
Built at: 2019-03-30 10:25:27
Entrypoint server = js/server.563af2bf.js
success Compiled server successfully in 11.1s!
\ 95.00% emitting vue-client-plugin

Sometimes hangs after compile/build

...
info beforeRun (builtin:emit-saber-variables)
info defineVariables (generate-feed)
info emitRoutes (vue-renderer)
info chainWebpack (vue-renderer)
info chainWebpack (builtin:config-css)
info chainWebpack (builtin:config-image)
info chainWebpack (builtin:config-font)
info chainWebpack (builtin:config-other-loaders)
info chainWebpack (google-analytics)
info chainWebpack (vue-renderer)
info chainWebpack (builtin:config-css)
info chainWebpack (builtin:config-image)
info chainWebpack (builtin:config-font)
info chainWebpack (builtin:config-other-loaders)
info chainWebpack (google-analytics)
success Compiled server successfully in 9.1s!
# hangs

Feedback for --lazy mode

Saber 0.4 introduced --lazy mode which only compiles the page when it's requested (which will improve the build speed a lot), you can help us improve this feature by giving feedback!

Nested routes issue?

if I create pages like the nested pages example:

└── pages
    ├── index.vue
    ├── users
    │   ├── [name].vue
    │   └── index.vue # required
    └── users.vue     # required

then nothing under /users will load, instead I only see the users.vue page content.

if I remove the users/index.vue file, nested pages load properly.

Pug support

I added pug and pug-loader packages, but unlike Vuepress this didn't enable Pug templating. What can I do?

Port the default VuePress theme to Saber 💩

I don't really have time for this, so it's much appreciated if anyone could help.

There is a $80.00 open bounty on this issue. Add more on Issuehunt.

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on Issuehunt to raise funds.

Fetching data demo not working

Hey @egoist 👋. I see you've made another lib ha!! I was trying out the fetching data snippet and getting the following error:

My code is the same as in your example

<template>
  <div>{{ post.title }}</div>
</template>

<saber>
import axios from 'axios'

export default {
  async data() {
    const { data: post } = await axios
      .get('https://jsonplaceholder.typicode.com/posts/1')

    return {
      post
    }
  }
}
</saber>

Any thoughts?

Extend Saber's Node.js APIs via saber-node.js

Use saber-node.js to extend Saber.js Node.js APIs:

exports.onCreatePage = page => {
  // Add addtional data to the page
  page.foo ='bar'
}

In you layout:

<template>
	<div>{{ page.bar }}</div>
</template>

<script>
export default {
  props: ['page']
}
</script>

Exposes all the hooks in Saber: https://github.com/egoist/saber/blob/347224b2be2369b210e35b03daaa6773f6dece88/packages/saber/lib/index.js#L15-L29

feed plugin: support generating atom and rss2 type of feed

Sidebar doesn't work if you access path without .html

Try accessing https://saber.land/tutorial/tutorial the sidebar won't work instead an error will show up in the console

[FEATURE] SPA style links?

Is it possible to do an SPA-style link such as <nuxt-link> or <router-link> ... or is Saber meant to be used with regular anchor tags?

Convert relative links to permalinks

eg. in pages/foo.md:

[bar](./bar.md)

If pages/bar.md exists then we should convert it the to the permalink of the page.

Add built-in TypeScript support

Built-in TypeScript support for app code and saber.config.ts saber.app.ts

Comparison with Nuxt.js / VuePress / Peco

Nuxt.js

data-prefetching

In Nuxt.js the data is pre-fetched at runtime, on both server-side and client-side. While in Saber.js the data is pre-fetched at compile time only, which in most cases is better for static websites.

simplicity

There's a big list of options in Nuxt.js, it makes sense since Nuxt.js is a versatile framework. But Saber.js is only targeting static websites, this would dramatically decrease the complexity of both maintaining this project and writing actual app code.

webpack-chain

The webpack config manager that vue-cli 3 and Poi use under the hood.

This doesn't matter that much, Nuxt.js could switch to it too if they want.

Dynamic routes

In Nuxt.js you use generate.routes to get actual URLs for dynamic routes like /user/:id, but in Saber.js it's done differently.

..etc

VuePress

Saber.js and VuePress almost works in the same way, (well every Vue static website generator works in the same way), except that Saber.js does not enforce a theme system that VuePress uses, which means Saber.js is better for building application.

data-prefetching

Not supported for now since VuePress uses local markdown files as source data.

Peco

Peco is something else.. It's like VuePress and Saber.js had a baby. It's more complex and currently in beta. (as a Gatsby.js alternative)

script tags appear to break HMR/Hot Reloading when included in md file?

What

Inserting script tags into an md file seems to break HMR*

Expected

HMR should work and pages should update without manual refresh

Reality

HMR does not work and pages do not auto-update.

Replicating

Create a page with:

# Title

## Subtitles

<script>console.log('I am alive')</script>

You will see the console.log message...

Try changing the markdown whilst the script tag remains... it won't update the page. Remove the script tag and HMR kicks in again and things start updating... curiously, if you change the console.log message, that does update the console.log message without refresh... but still not the page 😄

MBP 15" 2018, Latest macOS, latest Firefox...
Node: 10.14.1
NPM: 6.4.1

*if scripts are to be supported, this needs fixing... else all scripts need removing during compile/build and docs updating so say "no script support" or whatever?

Add layout transitions

I'd like to propose the ability to define page transitions also in layouts, as it becomes repetitive to set the same transition for every page of one type over and over again. Pages would then inherit the transition from their layout, similarly to how head currently works, with the possibility of overwriting it page-specifically, if needed.

Nesting category error

categories:
  - sports/football

ERROR in <omitted>/.saber/pages/internal_blog__category__sports/football.saberpage
Module build failed (from <omitted>/node_modules/saber/lib/renderer/saber-page-loader.js):
TypeError: Cannot read property 'hoistedTags' of undefined
    at Object.module.exports (<omitted>\node_modules\saber\lib\renderer\saber-page-loader.js:24:19)
 @ <omitted>/.saber/routes.js 250:11-252:70
 @ <omitted>/node_modules/saber/lib/renderer/app/create-app.js
 @ <omitted>/node_modules/saber/lib/renderer/app/entry-client.js
 @ multi (webpack)-hot-middleware/client.js <omitted>/node_modules/saber/lib/renderer/app/entry-client.js

Host on non-root directory?

Is there a way to set root URI instead of '/', like the publicPath do in Poi?

Renaming/deleting markdown file breaks reloading

Version

0.4.3

Steps to reproduce

1. run dev server
2. rename or delete a markdown file

What is expected?

Should handle renaming or deletion like Hexo, without breaking the workflow.

What is actually happening?

ERROR in <omitted>/pages/drafts/break.md?saberPage=61d9a790
Module build failed (from <omitted>/node_modules/saber/vue-renderer/lib/saber-page-loader.js):
Error: ENOENT: no such file or directory, open '<omitted>\pages\drafts\break.md'
...

marchworks earned $10.00 by resolving this issue!

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on Issuehunt to raise funds.

Prefetching links in viewport

1. check all links in view port
2. if the link is a route path, we use <link rel="prefetch"> to prefetch the route component.

Template localization

I'd like to support different language mutations for my website. Urls would have a domain.com/{lang}/{page} format.

How should I achieve this with Saber.js, if I want to have the pages generated statically?

Website: Add a page to show available themes

---

IssueHunt Summary

egoist has been rewarded.

Backers (Total: $40.00)

• issuehunt ($40.00)

Submitted pull Requests

• #411 chore(website): showcase themes

---

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

---

IssueHunt has been backed by the following sponsors. Become a sponsor

Generated router.js in windows

In Windows, the separator of the generated file becomes a backslash and an error occurs

export default [
  {
    path: '/',
    component: () => import(/* webpackChunkName: "page--index" */ '#pages/index.vue')
  }
  ,
  {
    path: '/users\index',
    component: () => import(/* webpackChunkName: "page--users-index" */ '#pages/users\index.vue')
  }
 ]

By rewriting it as follows, it works normally

export default [
  {
    path: '/',
    component: () => import(/* webpackChunkName: "page--index" */ '#pages/index.vue')
  }
  ,
  {
    path: '/users/index',
    component: () => import(/* webpackChunkName: "page--users-index" */ '#pages/users/index.vue')
  }
 ]

😥 #pages/users\index.vue -> 😄 #pages/users/index.vue

thank you

shortcodes system

Like Hexo Tag Extension or Wordpress Shortcodes system. What I like to call "extendable markdown writing experience".

Only add page in .saber/routes.js when it's visited

By default in dev mode we should emit a routes.js exporting an empty array, when you visited a page in browser we add this page to routes.js and let browser wait until the build completes.

This should dramatically improve build performance 🤔

Plugin for night mode like samsung internet night mode

Feature request

How should this be implemented in your opinion?

A plugin that generate new style from page style

Are you willing to work on this yourself?

Yes

So what do you think about this idea can it be implemented?

saber-node.js undefined error

Hello @egoist ,

I have published saber-theme-ume on npmjs.com, but I met an error when run npm run dev (It works well when I run npm run dev:example on the theme folder):

$ npm run dev

> @ dev /Users/cyris/Desktop/umeeee/my-blog-3
> saber

info Using theme: /Users/cyris/Desktop/umeeee/my-blog-3/node_modules/saber-theme-ume/dist
info afterPlugins (theme-node-api)
info afterPlugins (user-node-api)
info beforeRun (builtin:source-pages)
info initPages (theme-node-api)
info initPages (user-node-api)
info onCreatePages (query-posts)
info onCreatePages (theme-node-api)
error TypeError: Cannot read property 'type' of undefined
    at /Users/cyris/Desktop/umeeee/my-blog-3/node_modules/saber-theme-ume/dist/saber-node.js:4:28
    at Array.filter (<anonymous>)
    at Saber.exports.onCreatePages (/Users/cyris/Desktop/umeeee/my-blog-3/node_modules/saber-theme-ume/dist/saber-node.js:3:46)
    at tapInfo.fn.args (/Users/cyris/Desktop/umeeee/my-blog-3/node_modules/saber/lib/index.js:67:20)
    at Promise (eval at create (/Users/cyris/Desktop/umeeee/my-blog-3/node_modules/tapable/lib/HookCodeFactory.js:65:10), <anonymous>:25:1)
    at new Promise (<anonymous>)
    at AsyncSeriesHook.eval [as promise] (eval at create (/Users/cyris/Desktop/umeeee/my-blog-3/node_modules/tapable/lib/HookCodeFactory.js:65:10), <anonymous>:4:8)
    at AsyncSeriesHook.lazyCompileHook (/Users/cyris/Desktop/umeeee/my-blog-3/node_modules/tapable/lib/Hook.js:154:20)
    at api.hooks.beforeRun.tapPromise (/Users/cyris/Desktop/umeeee/my-blog-3/node_modules/saber/lib/plugins/source-pages.js:99:35)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `saber`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Is there something wrong with the saber-node.js file or I just I missed some steps when running it?

Images folder

I am trying to add a logo and cannot figure out where to put it. I’ve tried an assets, and a public folder in the root of my project, and under the theme.

Parse permalinks placeholders from markdown files name

Just like what Hexo does.

saber-config.yml

permalinks:
  post: /posts/:year/:month/:day/:slug.html

./pages/_posts/2019-03-24-hello-saber.md

---
layout: post
date: 2019-03-24
---

Expect:

./pages/_posts/2019-03-24-hello-saber.md becomes /posts/2019/03/24/hello-saber.html

Actual:

./pages/_posts/2019-03-24-hello-saber.md becomes /posts/2019/03/24/2019-03-24-hello-saber.html

Is there a possible way to separate the metadata configuration to re-use in all components?

Hello. I'm trying to separate the metadata config (head object indicated here ), but it seems that it cannot be possible because can't find the module at its actual path.

File: _shared/metadata.js

const HeadMetadata = {
	title: "Personal portfolio",
	meta: [
		{ name: "msapplication-TileColor", content: "#ffffff" }
		{ name: "msapplication-TileImage", content: "../assets/favicon/ms-icon-144x144.png" }
		{ name: "theme-color", content: "#ffffff" }
	],
	link: [
		{ rel: "apple-touch-icon", sizes: "57x57", href: "../assets/favicon/apple-icon-57x57.png" },
		{ rel: "apple-touch-icon", sizes: "60x60", href: "../assets/favicon/apple-icon-60x60.png" },
		{ rel: "apple-touch-icon", sizes: "72x72", href: "../assets/favicon/apple-icon-72x72.png" },
		{ rel: "apple-touch-icon", sizes: "76x76", href: "../assets/favicon/apple-icon-76x76.png" },
		{ rel: "apple-touch-icon", sizes: "114x114", href: "../assets/favicon/apple-icon-114x114.png" },
		{ rel: "apple-touch-icon", sizes: "120x120", href: "../assets/favicon/apple-icon-120x120.png" },
		{ rel: "apple-touch-icon", sizes: "144x144", href: "../assets/favicon/apple-icon-144x144.png" },
		{ rel: "apple-touch-icon", sizes: "152x152", href: "../assets/favicon/apple-icon-152x152.png" },
		{ rel: "apple-touch-icon", sizes: "180x180", href: "../assets/favicon/apple-icon-180x180.png" },
		{ rel: "icon", type: "image/png", sizes: "192x192", href: "../assets/favicon/android-icon-192x192.png" },
		{ rel: "icon", type: "image/png", sizes: "32x32", href: "../assets/favicon/favicon-32x32.png" },
		{ rel: "icon", type: "image/png", sizes: "96x96", href: "../assets/favicon/favicon-96x96.png" },
		{ rel: "icon", type: "image/png", sizes: "16x16", href: "../assets/favicon/favicon-16x16.png" },
		{ rel: "manifest", href: "/manifest.json" }
	]
}
module.exports = HeadMetadata;

But, when I try to import to some Vue file in pages says "Module not found. Can't resolve _shared/metadata.js".

New theme submission

🤔I made a theme for saber - Ume (demo)

It will be published soon after some tweaks...

Websocket listening port

Hello,

How change websocket listening port from 8081 to 8888
for example.

Regards

backslash in pagination

./pages/index.md:

---
layout: index
permalink: /blog
---

maybe similar to #27

How can I customize the builtin markdown anchor plugin

Broken on Windows

$ yarn create blog demo
...
$ yarn dev
yarn run v1.13.0
$ saber
Built at: 2019-03-09 15:03:40
Entrypoint client [big] = js/client.js js/client.js.map

ERROR in ./pages/about.vue?vue&type=custom&index=0&blockType=extend-component&saberPage=7291c502 (./node_modules/saber/lib/renderer/extend-component-loader.js!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/saber/lib/renderer/saber-page-loader.js??ref--2-1!./pages/about.vue?vue&type=custom&index=0&blockType=extend-component&saberPage=7291c502)
Module not found: Error: Can't resolve 'C:Usershanabi   mpdemopagesabout.vue' in 'C:\Users\hanabi\tmp\demo\pages'
 @ ./pages/about.vue?vue&type=custom&index=0&blockType=extend-component&saberPage=7291c502 (./node_modules/saber/lib/renderer/extend-component-loader.js!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/saber/lib/renderer/saber-page-loader.js??ref--2-1!./pages/about.vue?vue&type=custom&index=0&blockType=extend-component&saberPage=7291c502) 7:0-68 11:17-30
 @ ./pages/about.vue?vue&type=custom&index=0&blockType=extend-component&saberPage=7291c502
 @ ./pages/about.vue?saberPage=7291c502
 @ ./.saber/routes.js
 @ ./node_modules/saber/lib/renderer/app/create-app.js
 @ ./node_modules/saber/lib/renderer/app/entry-client.js
 @ multi (webpack)-hot-middleware/client.js ./node_modules/saber/lib/renderer/app/entry-client.js

Customizable HTML template

Is it possible to change the HTML-template, or use something like a layout-file as in Nuxt?

New docs

The new docs (https://saberjs.org/) is WIP, let me know if anything important is missing, or something you'd like to see in the docs.

Support toc in markdown page

Similar to https://vuepress.vuejs.org/guide/markdown.html#table-of-contents

Replace [[toc]] with the actual Table of Contents.

is this project dead?

Redirect support

Motivation

Sometimes you might change the permalink of a page, e.g. move /about to /about-us but you don't want to break existing links to /about

Solution

Add a new api in saber-browser.js:

export default ({ addRedirect }) => {
  addRedirect({
    from: '/about',
    to: '/about-us'
  })
}

Implementation

In dev mode, we can simply add a redirect route in vue-router's routes option, in production mode, we also need to generate about/index.html with only <meta http-equiv="refresh" content="0;url=/about-us" /> to redirect the page on first visit.

Support `:categories` in permalinks template

Like the similar feature in Jekyll:

If a post has multiple categories, Jekyll will create a hierarchy (e.g. /category1/category2). Also Jekyll automatically parses out double slashes in the URLs, so if no categories are present, it will ignore this.

Inject markdown headers as page attributes

Add a markdown-it plugin to inject markdown headers [{ text: 'Hello', slug: hello' }] as page.attributes.markdownHeaders, similar to Vuepress's this.$page.headers.

When to inject:

• page.attributes.injectMarkdownHeaders === true
• Or page.attributes.injectMarkdownHeaders !== false && api.config.markdown.injectMarkdownHeaders

The injected markdown headers can be used by https://github.com/egoist/saber/pull/49

krmax44 earned $60.00 by resolving this issue!

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on Issuehunt to raise funds.

markdown-it plugins

I can't seem to get markdown-it plugins to work. Nothing happens. Here is a sample of what I'm trying.
https://github.com/askcreative/saber-tests-probs

Related posts support

Hello @egoist,

Recently I'm making a theme based on saber, and I want to add related posts function to post pages (e.g. next post, pre post). I didn't find it on the docs, will Saber.js support it in the future? :D