Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/FriendlyUser/vuepress-theme-cool
A custom vuepress theme with mermaid and plantuml, katex and vue components.
https://github.com/FriendlyUser/vuepress-theme-cool
chartjs mermaid plantuml vuepress vuepress-theme vuepress-theme-cool
Last synced: about 2 months ago
JSON representation
A custom vuepress theme with mermaid and plantuml, katex and vue components.
- Host: GitHub
- URL: https://github.com/FriendlyUser/vuepress-theme-cool
- Owner: FriendlyUser
- License: mit
- Created: 2018-07-08T04:27:54.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-04-25T03:54:09.000Z (over 1 year ago)
- Last Synced: 2024-07-23T20:43:29.921Z (about 2 months ago)
- Topics: chartjs, mermaid, plantuml, vuepress, vuepress-theme, vuepress-theme-cool
- Language: Stylus
- Homepage: https://vuepress-theme-cool.js.org/
- Size: 1.3 MB
- Stars: 59
- Watchers: 1
- Forks: 11
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-starred - FriendlyUser/vuepress-theme-cool - A custom vuepress theme with mermaid and plantuml, katex and vue components. (others)
README
[](https://travis-ci.com/FriendlyUser/vuepress-theme-cool) [](https://badge.fury.io/js/vuepress-theme-cool) [](https://www.npmjs.com/package/vuepress-theme-cool) [](https://houndci.com)
# Personal Documentation Theme for VuePress
Currently, completely refactoring code for vuepress v1, all components should be compatible.
This is the [VuePress](https://vuepress.vuejs.org/) theme used for personal documentation. It has libaries for markdown-based diagramming tools, sortable/filterable table components and chartjs.
An example repo is available at [Vuepress Theme Cool Starter](https://FriendlyUser.github.io/vuepress-theme-cool-starter)
[Demo](http://friendlyuser.github.io/vuepress-theme-cool-starter)
## Setup For Vuepress V1
1. The theme was refactored completely to inherit from the base vuepress theme.
Make sure to install the V1 for vuepress `yarn global add vuepress@next`
2. Get the latest version of the theme
```js
yarn add -D vuepress-theme-cool
```
3. Set up `.vuepress/config.js`. A minimual setup is below, note that mermaid does not need to be included as a plugin.
```js
// .vuepress/config.js
// this represents the minimal configuration
module.exports = {
theme: 'cool',
markdown: {
extendMarkdown: md => {
md.set({ html: true })
md.use(require('markdown-it-katex'))
md.use(require('markdown-it-plantuml'))
md.use(require('markdown-it-admonition'))
}
}
}
```
4. If you are adding vuepress to your local project, set up `package.json` and your file directory looks something like this
```sh
├ package.json
├ docs
├── .vuepress
├──── components
├──── public
├──── config.js
├──── index.styl
├──── palette.styl
├── Readme.md
├──Readme.md
├── foo
├──── README.md
├──── doc1.md
└── cool
├──── doc2.md
```
If any issues arise, please review the documentation at https://v1.vuepress.vuejs.org/miscellaneous/migration-guide.html. The sample diagrams are components should work as it.
## Setup For Vuepress V0
See [VuepressV0](https://github.com/FriendlyUser/vuepress-theme-cool/blob/master/VuepressV0.md)
### Creating Diagrams
#### Plantuml
Plantuml can be used like
```
@startuml
strict digraph meme {
exists [color=blue]
authenticate [color=blue]
require
create
UserCreated
destroy
UserDestroyed
get [color=blue]
authenticate -> require
create -> UserCreated
destroy -> require
destroy -> UserDestroyed
get -> require
}
@enduml
```
#### Mermaid
In addition to use mermaid diagrams add an components, taken from [Vuepress Issue 111](https://github.com/vuejs/vuepress/issues/111), obviously I expect vuepress to natively support mermaid, or have tighter integration in the future.
```js
// .vuepress/components/mermaid.vue
export default {
mounted() {
import("mermaid/dist/mermaid").then(m => {
m.initialize({
startOnLoad: true
});
m.init();
});
}
};
```
Mermaid components can be used like
```js
graph TD
A[Cool] -->|Get money| B(Go shopping)
B --> C{Let me}
C -->|Two| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
C -->|Four| F[Mac]
```
#### Timeline
```js
// .vuepress/components/sample-timeline.vue
Road to Graduation
First Year 1A
First Year 1B
Accepted Computer Engineering
ENGR 1C (extra courses)
Second Year 2A
ENGR 2.5
Second Year 2B
ENGR 001
ENGR 002
Third Year (3 classes)
Third Year 3B
Third Year 3A
ENGR 003
ENGR 004
Fourth Year 4B
Fourth Year 4A
import { Timeline, TimelineItem, TimelineTitle } from 'vue-cute-timeline'
export default {
components: {
Timeline,
TimelineItem,
TimelineTitle
}
}
```
and render it in the markdown file using ``.
#### Using math
Katex can be created within a markdown file by, note that the necessary style sheet for `markdown-it-katex` is included in Layout.vue
``.
```md
$x^2=4$
```
#### Rendering Charts
Using chartjs and [vue-chartkick](https://github.com/ankane/vue-chartkick), allows for easy chart rendering from inside markdown files. What is good about vue-chartkick is highlightjs and google charts can be used instead.
For example the snippet below generates a pie chart, see chartjs for more details.
```js
```
#### Sortable and Filterable tables
For sortable and filterable tables, I am using the [vue-good-table](https://xaksis.github.io/vue-good-table/guide/#installation) which has documentation in vuepress. In order to generate tables, use an vue component under `.vuepress/components`
```js
//.vuepress/components/my-component.vue
import { VueGoodTable } from 'vue-good-table';
export default {
name: 'my-component',
// add to component
components: { VueGoodTable},
data(){
return {
columns: [
{
label: 'Name',
field: 'name',
},
{
label: 'Age',
field: 'age',
type: 'number',
},
{
label: 'Created On',
field: 'createdAt',
type: 'date',
dateInputFormat: 'YYYY-MM-DD',
dateOutputFormat: 'MMM Do YY',
},
{
label: 'Percent',
field: 'score',
type: 'percentage',
},
],
rows: [
{ id:1, name:"John", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },
{ id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
{ id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
{ id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
{ id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
{ id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
],
};
},
};
```
In addition, use an custom style component to get the css classes for the production build.
```vue
//.vuepress/components/Styles.vue
import "vue-good-table/dist/vue-good-table.css";
export default {
name: "Styles",
};
```
Render the table by placing ``in a markdown file.
### Disclaimer
If you see any bugs feel free to make a pull request at Github or email me. Not a expert in vuepress at all or vue so there are ways to improve my implementations. In addition, some of the components do not work, do not hesitate to message me.
### Donate
If you would like to motivate me to spend more time improving open source projects please consider donating.
[](https://en.cryptobadges.io/donate/0x9d18acAB9Fe749Cbf899B2FD63Bf25e64829bbF3)
[](https://en.cryptobadges.io/donate/1BMWhjCrTE3Dn94oHnrk6XMZAS3hjq3vdD)
[](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=Z6M6Y83D3URSU&item_name=Motivating+me+to+continue+to+produce+open+source+projects¤cy_code=CAD)