saberland / saber Goto Github PK
View Code? Open in Web Editor NEW()==[:::::::::::::> Build static sites in Vue.js, without the hassle
Home Page: https://saber.egoist.dev
License: MIT License
()==[:::::::::::::> Build static sites in Vue.js, without the hassle
Home Page: https://saber.egoist.dev
License: MIT License
Similar to https://vuepress.vuejs.org/guide/markdown.html#table-of-contents
Replace [[toc]]
with the actual Table of Contents.
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
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.
<link rel="prefetch">
to prefetch the route component.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
Add a new api in saber-browser.js
:
export default ({ addRedirect }) => {
addRedirect({
from: '/about',
to: '/about-us'
})
}
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.
๐คI made a theme for saber - Ume (demo)
It will be published soon after some tweaks...
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.
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
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?
Should follow the Page Interface, currently they lack of createdAt
and updatedAt
attributes.
Expose/Return the permalink of tags or cateogries from the query-post plugin.
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:
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.
First idea comes to my mind is attaching permalink to the tag or category.
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>
I'm not sure..
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.
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.
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
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".
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?
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.
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.
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.
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
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.
Not supported for now since VuePress uses local markdown files as source data.
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)
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
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.
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.
IssueHunt has been backed by the following sponsors. Become a sponsor
Hello,
How change websocket listening port from 8081 to 8888
for example.
Regards
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.
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!
A plugin that generate new style from page style
Yes
So what do you think about this idea can it be implemented?
Like Hexo Tag Extension or Wordpress Shortcodes system. What I like to call "extendable markdown writing experience".
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>
Is it possible to change the HTML-template, or use something like a layout-file as in Nuxt?
Inserting script tags into an md file seems to break HMR*
HMR should work and pages should update without manual refresh
HMR does not work and pages do not auto-update.
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?
Is there a way to set root URI instead of '/', like the publicPath
do in Poi?
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:
`
<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..
0.4.3
Should handle renaming or deletion like Hexo, without breaking the workflow.
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.
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.
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
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
Keywords:
IssueHunt has been backed by the following sponsors. Become a sponsor
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?
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
Serve static files under root path.
static
folder orpublic
folder?$theme/$staticFolder
as well?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?
I added pug
and pug-loader
packages, but unlike Vuepress this didn't enable Pug templating. What can I do?
$ 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
Try accessing https://saber.land/tutorial/tutorial the sidebar won't work instead an error will show up in the console
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
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.
Built-in TypeScript support for app code and saber.config.ts
saber.app.ts
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 ๐ค
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.