altrusl / Vuesence Book
Licence: mit
Minimalistic Vue.js based documentation system component
Stars: ✭ 48
Projects that are alternatives of or similar to Vuesence Book
Docsify
🃏 A magical documentation site generator.
Stars: ✭ 19,310 (+40129.17%)
Mutual labels: documentation, docs, documentation-tool, doc, markdown
Catalog
Create living style guides using Markdown or React
Stars: ✭ 1,527 (+3081.25%)
Mutual labels: documentation, docs, documentation-tool, markdown
Docma
A powerful tool to easily generate beautiful HTML documentation from JavaScript (JSDoc), Markdown and HTML files.
Stars: ✭ 287 (+497.92%)
Mutual labels: documentation, docs, markdown
App
Fast and searchable Ruby docs
Stars: ✭ 47 (-2.08%)
Mutual labels: documentation, docs, documentation-tool
Devdocs
API Documentation Browser
Stars: ✭ 27,208 (+56583.33%)
Mutual labels: documentation, docs, documentation-tool
Gitdocs
Easy to use, SEO-friendly, beautiful documentation that lives in your git repo.
Stars: ✭ 252 (+425%)
Mutual labels: documentation, docs, markdown
Readme
👋 - The documentation for being an Artsy Engineer
Stars: ✭ 380 (+691.67%)
Mutual labels: documentation, docs, markdown
The Documentation Compendium
📢 Various README templates & tips on writing high-quality documentation that people want to read.
Stars: ✭ 4,306 (+8870.83%)
Mutual labels: documentation, docs, documentation-tool
Verb
HEADS UP! Verb is going though a major transition, we've completely refactored everything from the ground up. If you're interested, please see the dev branch.
Stars: ✭ 442 (+820.83%)
Mutual labels: documentation, docs, markdown
Pdoc
API Documentation for Python Projects
Stars: ✭ 853 (+1677.08%)
Mutual labels: documentation, docs, documentation-tool
Press
Minimalist Markdown Publishing for Nuxt.js
Stars: ✭ 181 (+277.08%)
Mutual labels: documentation, docs, markdown
Vue Styleguidist
Created from react styleguidist for Vue Components with a living style guide
Stars: ✭ 2,133 (+4343.75%)
Mutual labels: documentation, doc, markdown
Sourcedocs
Generate Markdown documentation from source code
Stars: ✭ 286 (+495.83%)
Mutual labels: documentation, documentation-tool, markdown
Typemill
TYPEMILL is a simple and lightweight Flat-File-CMS for authors and publishers.
Stars: ✭ 150 (+212.5%)
Mutual labels: documentation, docs, markdown
X0
Document & develop React components without breaking a sweat
Stars: ✭ 1,706 (+3454.17%)
Mutual labels: documentation, docs, markdown
Jekyll Rtd Theme
Just another documentation theme compatible with GitHub Pages
Stars: ✭ 92 (+91.67%)
Mutual labels: documentation, docs, documentation-tool
Pdoc
🐍 ➡️ 📜 Auto-generate API documentation for Python projects
Stars: ✭ 604 (+1158.33%)
Mutual labels: documentation, docs, documentation-tool
Mdx Docs
📝 Document and develop React components with MDX and Next.js
Stars: ✭ 412 (+758.33%)
Mutual labels: documentation, docs, markdown
Bluedoc
An open-source document management tool for enterprise self host.
Stars: ✭ 579 (+1106.25%)
Mutual labels: documentation, docs, markdown
Vuesence Book
Minimalistic Vue.js based documentation system component
How to use
Vuesence Book can be used as a Vue component in a Vue.js project or stand-alone in a browser
Node.js usage example
npm install @vuesence/book --save
<template>
<div id="app" class="app">
<vuesence-book
header-title="My Book"
:use-router="false"
/>
</div>
</template>
<script>
import VuesenceBook from "@vuesence/book";
export default {
name: "App",
components: {
VuesenceBook
}
};
</script>
<style>
@import './css/default.css';
/* @import './css/vuepress-style.css'; */
/* @import './css/google-style.css'; */
</style>
Browser usage example
The Vuesence Book can be run as a stand-alone web component in the browser. Vue and @vuesence/book packages should be loaded as scripts. Vue-router must be disabled.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vuesence Book demo</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@vuesence/book"></script>
<link rel="stylesheet" href="https://unpkg.com/@vuesence/book/src/css/default.css">
<!-- You can plug in any custom CSS here to style the Vuesence Book-->
<!-- <link rel="stylesheet" href="css/vuepress-style.css"> -->
<!-- <link rel="stylesheet" href="css/google-style.css"> -->
</head>
<body>
<div id="app" class="app">
<vuesence-book
header-title="My Book"
:use-router="false"
/>
</div>
</body>
<script>
new Vue({ el: '#app' })
</script>
</html>
Features
- Simple, responsive, lightweight, fast
- Easily and fully customizable with CSS
- Very suitable for embedding help/documentation content into the website
- Easy to use content management
- Focus on performance - articles can be preloaded
- Unlimited nesting levels for TOC tree menu
- In general no dependencies (optional
markedor other MD library for markdown support andvue-routerfor routing)
Documentation
Detailed documentation can be found here - https://altrusl.github.io/vuesence-book/
Content management
Unlike many other documentation systems Vuesence Book is not a static site generator. You can change the content without rebuilding the entire website.
vbcfg.json configuration file defines the content tree (TOC in the left column). It also contains links to articles in HTML or Markdown formats or the content of the article itself in an HTML format
└── vb
├── pages
│ ├── intro.md
│ ├── desc.md
│ └── rich-content.html
├── vbcfg.json
└── index.html
Self-explaining example of the vbcfg.json and articles of the documentation can be found here -
https://github.com/altrusl/vuesence-book/tree/master/docs
Playground
Try it on codesandbox.io (Node.js version)
! The version on
codesandbox.iomight be slightly out of date
Check out my other Vue.js components
- Sliding header - Vue.js component representing sliding header (or two different headers)
- Cloud Sync Button - a button with cloud synchronization animation
- Modal Window - simple lightweight Modal Window Vue.js component
You like Vuesence Book? Star it and retweet it!
Troubleshooting
Any bugs, issues, feature and pull requests are welcome
Please use GitHub's issue reporter or send me an email
Contribution
Contribution is always welcome and recommended. Here is how:
- Fork the repository
- Clone to your machine
- Make your changes
- Create a pull request
Areas for improvements / involvement
- More convenient fenced code block highlighting
- Full-text search
- CSS layout improvement (responsiveness)
- Themes
- Top nav bar
- Footer for stand-alone version
- CEO issue
Change Log
- 0.4.2 small fixes on menu
- 0.4.50 release
License
@vuesence/book package is freely distributable under the terms of the MIT license.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].