{"id":13558937,"url":"https://github.com/FriendlyUser/vuepress-theme-cool","last_synced_at":"2025-04-03T14:30:50.233Z","repository":{"id":32702587,"uuid":"140137212","full_name":"FriendlyUser/vuepress-theme-cool","owner":"FriendlyUser","description":"A custom vuepress theme with mermaid and plantuml, katex and vue components.","archived":false,"fork":false,"pushed_at":"2023-04-25T03:54:09.000Z","size":1358,"stargazers_count":59,"open_issues_count":18,"forks_count":11,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-09-23T21:24:51.576Z","etag":null,"topics":["chartjs","mermaid","plantuml","vuepress","vuepress-theme","vuepress-theme-cool"],"latest_commit_sha":null,"homepage":"https://vuepress-theme-cool.js.org/","language":"Stylus","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FriendlyUser.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":"FriendlyUser","custom":"https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=Z6M6Y83D3URSU\u0026item_name=Motivating+me+to+continue+to+produce+open+source+projects\u0026currency_code=CAD"}},"created_at":"2018-07-08T04:27:54.000Z","updated_at":"2023-09-09T08:50:05.000Z","dependencies_parsed_at":"2024-01-20T18:07:00.514Z","dependency_job_id":"4db8129c-1198-49cc-8f20-279db15b8284","html_url":"https://github.com/FriendlyUser/vuepress-theme-cool","commit_stats":{"total_commits":53,"total_committers":6,"mean_commits":8.833333333333334,"dds":0.3584905660377359,"last_synced_commit":"b9cc2ea26e04ed07d03d7f85d8f452697912448a"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendlyUser%2Fvuepress-theme-cool","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendlyUser%2Fvuepress-theme-cool/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendlyUser%2Fvuepress-theme-cool/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendlyUser%2Fvuepress-theme-cool/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FriendlyUser","download_url":"https://codeload.github.com/FriendlyUser/vuepress-theme-cool/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222978183,"owners_count":17067477,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chartjs","mermaid","plantuml","vuepress","vuepress-theme","vuepress-theme-cool"],"created_at":"2024-08-01T12:05:14.682Z","updated_at":"2024-11-04T10:30:41.785Z","avatar_url":"https://github.com/FriendlyUser.png","language":"Stylus","funding_links":["https://github.com/sponsors/FriendlyUser","https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=Z6M6Y83D3URSU\u0026item_name=Motivating+me+to+continue+to+produce+open+source+projects\u0026currency_code=CAD"],"categories":["Stylus","others"],"sub_categories":[],"readme":" [![Build Status](https://travis-ci.com/FriendlyUser/vuepress-theme-cool.svg?branch=master)](https://travis-ci.com/FriendlyUser/vuepress-theme-cool) [![npm version](https://badge.fury.io/js/vuepress-theme-cool.svg)](https://badge.fury.io/js/vuepress-theme-cool) [![downloads](https://img.shields.io/npm/dy/vuepress-theme-cool.svg)](https://www.npmjs.com/package/vuepress-theme-cool) [![](https://img.shields.io/badge/Protected_by-Hound-a873d1.svg)](https://houndci.com)\n# Personal Documentation Theme for VuePress\n\nCurrently, completely refactoring code for vuepress v1, all components should be compatible.\n\nThis 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.\n\nAn example repo is available at [Vuepress Theme Cool Starter](https://FriendlyUser.github.io/vuepress-theme-cool-starter)\n\n[Demo](http://friendlyuser.github.io/vuepress-theme-cool-starter)\n\n## Setup For Vuepress V1\n\n 1. The theme was refactored completely to inherit from the base vuepress theme.\n    Make sure to install the V1 for vuepress `yarn global add vuepress@next`\n \n 2. Get the latest version of the theme\n    ```js\n    yarn add -D vuepress-theme-cool\n    ```\n  \n  3. Set up `.vuepress/config.js`. A minimual setup is below, note that mermaid does not need to be included as a plugin.\n\n    ```js\n    // .vuepress/config.js\n    // this represents the minimal configuration\n    module.exports = {\n      theme: 'cool',\n      markdown: {\n        extendMarkdown: md =\u003e {\n          md.set({ html: true })\n          md.use(require('markdown-it-katex'))\n          md.use(require('markdown-it-plantuml'))\n          md.use(require('markdown-it-admonition'))\n        }\n      }\n    }\n    ```\n4. If you are adding vuepress to your local project, set up `package.json` and your file directory looks something like this\n\n```sh\n├ package.json\n├ docs\n├── .vuepress\n├──── components\n├──── public\n├──── config.js\n├──── index.styl\n├──── palette.styl\n├── Readme.md \n├──Readme.md\n├── foo\n├──── README.md\n├──── doc1.md\n└── cool\n├──── doc2.md\n```\n\nIf 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.\n\n## Setup For Vuepress V0\nSee [VuepressV0](https://github.com/FriendlyUser/vuepress-theme-cool/blob/master/VuepressV0.md)\n\n### Creating Diagrams\n#### Plantuml\nPlantuml can be used like \n\n```\n@startuml\nstrict digraph meme {\n  exists [color=blue]\n  authenticate [color=blue]\n  require\n  create\n  UserCreated\n  destroy\n  UserDestroyed\n  get [color=blue]\n  authenticate -\u003e require\n  create -\u003e UserCreated\n  destroy -\u003e require\n  destroy -\u003e UserDestroyed\n  get -\u003e require\n}\n@enduml\n```\n\n#### Mermaid\n\nIn 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.\n\n```js\n// .vuepress/components/mermaid.vue\n\n\u003ctemplate\u003e\n  \u003cdiv class=\"mermaid\"\u003e\n    \u003cslot\u003e\u003c/slot\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  mounted() {\n    import(\"mermaid/dist/mermaid\").then(m =\u003e {\n      m.initialize({\n        startOnLoad: true\n      });\n      m.init();\n    });\n  }\n};\n\u003c/script\u003e\n```\n\n\nMermaid components can be used like\n\n```js\n\u003cmermaid\u003e\ngraph TD\n  A[Cool] --\u003e|Get money| B(Go shopping)\n  B --\u003e C{Let me}\n  C --\u003e|Two| D[Laptop]\n  C --\u003e|Two| E[iPhone]\n  C --\u003e|Three| F[Car]\n  C --\u003e|Four| F[Mac]\n\u003c/mermaid\u003e\n```\n\n#### Timeline\n\n```js\n// .vuepress/components/sample-timeline.vue\n\u003ctemplate\u003e\n  \u003ctimeline timeline-theme=\"lightblue\"\u003e\n    \u003ctimeline-title bg-color=\"#09FFAA\"\u003eRoad to Graduation\u003c/timeline-title\u003e\n    \u003ctimeline-item bg-color=\"#9dd8e0\"\u003eFirst Year 1A\u003c/timeline-item\u003e\n    \u003ctimeline-item bg-color=\"#9dFFe0\"\u003eFirst Year 1B\u003c/timeline-item\u003e\n    \u003ctimeline-item bg-color=\"#FFF000\"\u003eAccepted Computer Engineering\u003c/timeline-item\u003e\n    \u003ctimeline-item bg-color=\"#cFe8eF\"\u003eENGR 1C (extra courses)\u003c/timeline-item\u003e\n    \u003ctimeline-item bg-color=\"#97Aec8\"\u003eSecond Year 2A\u003c/timeline-item\u003e\n    \u003ctimeline-item bg-color=\"#5744D4\"\u003eENGR 2.5\u003c/timeline-item\u003e\n    \u003ctimeline-item bg-color=\"#0F4859\"\u003eSecond Year 2B\u003c/timeline-item\u003e\n    \u003ctimeline-item bg-color=\"#094341\"\u003eENGR 001\u003c/timeline-item\u003e\n    \u003ctimeline-item bg-color=\"#825F03\"\u003eENGR 002\u003c/timeline-item\u003e\n    \u003ctimeline-item bg-color=\"#954F08\"\u003eThird Year (3 classes)\u003c/timeline-item\u003e\n    \u003ctimeline-item bg-color=\"#A71490\"\u003eThird Year 3B\u003c/timeline-item\u003e\n    \u003ctimeline-item bg-color=\"#C084A9\"\u003eThird Year 3A\u003c/timeline-item\u003e\n    \u003ctimeline-item bg-color=\"#7B71C2\"\u003eENGR 003\u003c/timeline-item\u003e\n    \u003ctimeline-item bg-color=\"#2348B1\"\u003eENGR 004\u003c/timeline-item\u003e\n    \u003ctimeline-item bg-color=\"#915F15\"\u003eFourth Year 4B\u003c/timeline-item\u003e\n    \u003ctimeline-item bg-color=\"#0909FA\"\u003eFourth Year 4A\u003c/timeline-item\u003e\n  \u003c/timeline\u003e\n\u003c/template\u003e\n \n\u003cscript\u003e\nimport { Timeline, TimelineItem, TimelineTitle } from 'vue-cute-timeline'\n \nexport default {\n  components: {\n    Timeline,\n    TimelineItem,\n    TimelineTitle\n  }\n}\n\u003c/script\u003e\n```\n\nand render it in the markdown file using `\u003csample-timeline /\u003e`.\n\n#### Using math\n\nKatex can be created within a markdown file by, note that the necessary style sheet for `markdown-it-katex` is included in Layout.vue\n`\u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css\"\u003e`.\n```md\n$x^2=4$\n```\n\n#### Rendering Charts \n\nUsing 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.\n\n\nFor example the snippet below generates a pie chart, see chartjs for more details.\n```js\n\u003cpie-chart :data=\"[['Blueberry', 44], ['Strawberry', 23]]\" :download=\"true\" download=\"test\"\u003e\u003c/pie-chart\u003e\n```\n\n#### Sortable and Filterable tables\n\nFor 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`\n\n```js\n//.vuepress/components/my-component.vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cvue-good-table\n      :columns=\"columns\"\n      :rows=\"rows\"\n     /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { VueGoodTable } from 'vue-good-table';\n\nexport default {\n  name: 'my-component',\n  // add to component\n  components: { VueGoodTable},\n  data(){\n    return {\n      columns: [\n        {\n          label: 'Name',\n          field: 'name',\n        },\n        {\n          label: 'Age',\n          field: 'age',\n          type: 'number',\n        },\n        {\n          label: 'Created On',\n          field: 'createdAt',\n          type: 'date',\n          dateInputFormat: 'YYYY-MM-DD',\n          dateOutputFormat: 'MMM Do YY',\n        },\n        {\n          label: 'Percent',\n          field: 'score',\n          type: 'percentage',\n        },\n      ],\n      rows: [\n        { id:1, name:\"John\", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },\n        { id:2, name:\"Jane\", age: 24, createdAt: '2011-10-31', score: 0.03343 },\n        { id:3, name:\"Susan\", age: 16, createdAt: '2011-10-30', score: 0.03343 },\n        { id:4, name:\"Chris\", age: 55, createdAt: '2011-10-11', score: 0.03343 },\n        { id:5, name:\"Dan\", age: 40, createdAt: '2011-10-21', score: 0.03343 },\n        { id:6, name:\"John\", age: 20, createdAt: '2011-10-31', score: 0.03343 },\n      ],\n    };\n  },\n};\n\u003c/script\u003e\n```\n\nIn addition, use an custom style component to get the css classes for the production build.\n\n```vue\n//.vuepress/components/Styles.vue\n\u003cscript\u003e\nimport \"vue-good-table/dist/vue-good-table.css\";\n\nexport default {\n  name: \"Styles\",\n};\n\u003c/script\u003e\n\n\u003cstyle\u003e\n\u003c/style\u003e\n```\nRender the table by placing `\u003cmy-component /\u003e`in a markdown file.\n \n### Disclaimer\n\nIf 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.\n\n### Donate\n\nIf you would like to motivate me to spend more time improving open source projects please consider donating.\n\n[![Donate with Ethereum](https://en.cryptobadges.io/badge/big/0x9d18acAB9Fe749Cbf899B2FD63Bf25e64829bbF3)](https://en.cryptobadges.io/donate/0x9d18acAB9Fe749Cbf899B2FD63Bf25e64829bbF3)\n\n[![Donate with Bitcoin](https://en.cryptobadges.io/badge/big/1BMWhjCrTE3Dn94oHnrk6XMZAS3hjq3vdD)](https://en.cryptobadges.io/donate/1BMWhjCrTE3Dn94oHnrk6XMZAS3hjq3vdD)\n\n[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=Z6M6Y83D3URSU\u0026item_name=Motivating+me+to+continue+to+produce+open+source+projects\u0026currency_code=CAD)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFriendlyUser%2Fvuepress-theme-cool","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFriendlyUser%2Fvuepress-theme-cool","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFriendlyUser%2Fvuepress-theme-cool/lists"}