{"id":28294276,"url":"https://github.com/erectbranch/docsify-dashboard","last_synced_at":"2026-03-07T08:02:22.651Z","repository":{"id":288294299,"uuid":"967543093","full_name":"erectbranch/docsify-dashboard","owner":"erectbranch","description":"A plugin for Docsify that creates a dashboard from a JSON file.","archived":false,"fork":false,"pushed_at":"2025-12-05T04:26:45.000Z","size":410,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-07T08:40:11.602Z","etag":null,"topics":["dashboard","docs","docsify","javascript","markdown","md","plugin","tags"],"latest_commit_sha":null,"homepage":"https://erectbranch.github.io/#/docsify-dashboard/demo","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/erectbranch.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-16T16:03:56.000Z","updated_at":"2025-12-05T04:26:48.000Z","dependencies_parsed_at":"2025-04-20T06:30:32.276Z","dependency_job_id":null,"html_url":"https://github.com/erectbranch/docsify-dashboard","commit_stats":null,"previous_names":["erectbranch/docsify-dashboard"],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/erectbranch/docsify-dashboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erectbranch%2Fdocsify-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erectbranch%2Fdocsify-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erectbranch%2Fdocsify-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erectbranch%2Fdocsify-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/erectbranch","download_url":"https://codeload.github.com/erectbranch/docsify-dashboard/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erectbranch%2Fdocsify-dashboard/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30209796,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T05:23:27.321Z","status":"ssl_error","status_checked_at":"2026-03-07T05:00:17.256Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["dashboard","docs","docsify","javascript","markdown","md","plugin","tags"],"created_at":"2025-05-22T10:17:00.163Z","updated_at":"2026-03-07T08:02:22.639Z","avatar_url":"https://github.com/erectbranch.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n\n# docsify-dashboard\n\n[![NPM Release](https://img.shields.io/npm/v/docsify-dashboard.svg?logo=npm\u0026style=flat-square)](https://www.npmjs.com/package/docsify-dashboard)\n[![License: MIT](https://img.shields.io/badge/License-GPLv3-yellow.svg?style=flat-square)](https://github.com/erectbranch/docsify-dashboard/blob/master/LICENSE)\n\nA plugin for [Docsify](https://docsify.js.org/#/) that creates a dashboard from a metadata.\n\n![demo](demo.png)\n\n\u003c/div\u003e\n\n## Import\n\nTo use the dashboard, you need to include the plugin in your Docsify `index.html` file:\n\n\u003e **Note:** This plugin requires [docsify-tabs](https://jhildenbiddle.github.io/docsify-tabs/#/) plugin. (Make sure to include it after the docsify-dashboard plugin)\n\n**Add stylesheet**\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/docsify-dashboard@3.2.0/dist/dashboard.min.css\"\u003e\n```\n\n**Add script**\n\n```html\n\u003cscript src=\"//cdn.jsdelivr.net/npm/docsify-dashboard@3.2.0/dist/docsify-dashboard.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- The docsify-tabs plugin (must be included after the docsify-dashboard plugin) --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/docsify-tabs@1/dist/docsify-tabs.min.js\"\u003e\u003c/script\u003e\n```\n\n## Structure\n\nThe following directory structure is used:\n\n- `tags.md`: Empty file for rendering a dashboard by tags in the URL. (e.g., `#/tags?tag=plugin`)\n\n- `posts.json`: Metadata file containing the posts information.\n\n```bash\n.\n└── docs\n    ├── index.html\n    └── tags.md\n    └── metadata\n        └── posts.json\n```\n\nMetadata file example(`metadata/posts.json`)\n\n\u003e **Notes**: \"*subtitle*\", \"*category*\" information is optional\n\n```json\n[\n    {\n        \"time\": \"2025.04.06\",\n        \"title\": \"Shanwei, China\",\n        \"tag\": \"5 min read\",\n        \"image\": \"assets/images/shanwei.jpg\",\n        \"href\": \"#/topic-one\"\n    },\n    {\n        \"time\": \"2025.04.05\",\n        \"title\": \"Melbourne, Australia\",\n        \"tag\": \"3 min read\",\n        \"image\": \"assets/images/melbourne.png\",\n        \"href\": \"#/topic-two\",\n        \"subtitle\": \"A beautiful city in Australia\",\n        \"category\": \"travel\"\n    }\n]\n```\n\n## Usage\n\n### Dashboard\n\nYou can create a dashboard by adding the following code to your markdown file:\n\n```markdown\n\u003c!-- tabs:start --\u003e\n\n\u003c!-- dashboard --\u003e\n\n\u003c!-- tabs:end --\u003e\n```\n\nTo display posts from a specific category only, you can use the following code:\n\n```markdown\n\u003c!-- tabs:start --\u003e\n\n\u003c!-- dashboard:categoryName --\u003e\n\n\u003c!-- tabs:end --\u003e\n```\n\n\n### Tag-dashboard\n\nYou can display a tag list by adding the following code to your markdown file:\n\n- **In sidebar file**: display all tags in the metadata.\n\n- **In markdown file**: only display the current page's tags.\n\n```markdown\n\u003c!-- tag-list --\u003e\n```\n\nIt will redirect to the tag-dashboard containing all posts that have the same tag.\n\n## Example\n\n### Footer with Page Tags\n\nAdd a page footer to display the tags on each page.\n\n```javascript\nwindow.$docsify = {\n  plugins: [\n    function pageFooter(hook, vm) {\n      var footer = [\n        '\u003c!-- tag-list --\u003e',\n        '\u003chr/\u003e',\n      ].join('');\n\n      hook.afterEach(function (html) {\n        return html + footer;\n      });\n    },\n  ],\n};\n```\n\n---\n\n## Configuration\n\nTo configure the dashboard, you can set options in your `index.html` file. The available options are:\n\n- **Theme**: `default`, `cards`, `list`\n\n| Option | Type | Default | Description |\n| --- | --- | --- | --- |\n| `numTabContent` | `Int` | 3 | Number of cards to show in a docsify-tabs slide. |\n| `metadataUrl` | `String` | 'metadata/posts' | JSON URL to fetch metadata. |\n| `sort` | `Boolean` | false | Sort the posts by time. (`YYYY.MM.DD`, `YYYY/MM/DD`) |\n| `theme` | `String` | 'default' | Theme for the dashboard. |\n| `tagboardTheme` | `String` | 'default' | Theme for the tag-dashboard. |\n| `categoryTheme` | `Object` | {} | Theme for the specific categories. (`'categoryName': 'default'`) |\n| `pagination` | `Boolean` | false | Enable pagination for the dashboard tabs. |\n\n```javascript\nwindow.$docsify = {\n  dashboard: {\n    numTabContent: 3,\n    metadataUrl: 'metadata/posts',       // do not include '.json' extension\n    sort: false,                         // sort the posts by time\n    theme: 'default',                    // (1) default, (2) cards, (3) list\n    tagboardTheme: 'default',            // options are same as above\n    categoryTheme: {},                   \n    pagination: false                    // enable pagination for the dashboard\n  }\n};\n```\n\n---\n\n## Customization\n\nThe dashboard can be customized using CSS. You can override the following CSS variables.\n\n### Dashboard\n\nTo change the styles, you can add the following CSS to your `index.html` file:\n\n```html\n\u003cstyle\u003e\n  /* default */\n  :root {\n    /* card style */\n    --dashboard-card-border-radius: 5px;\n    --dashboard-card-margin-top: 10px; \n    --dashboard-card-bg-color: #ffffff; \n    --dashboard-card-max-width: 330px;\n    --dashboard-card-min-height: 220px;\n    --dashboard-card-shadow: 0 0.3em 0.3em rgba(0,0,0,0.2);\n\n    /* card text */\n    --dashboard-card-text-align: left; \n    --dashboard-card-text-color: #000000;\n    --dashboard-card-title-font-size: 1.2rem; \n    --dashboard-card-title-font-weight: bolder;\n    --dashboard-card-subtitle-font-size: 1rem; \n    --dashboard-card-subtitle-color: #808080; \n    --dashboard-card-date-font-size: 0.8rem; \n    --dashboard-card-date-color: #808080;\n\n    /* card image */\n    --dashboard-card-img-min-width: 100%;\n    --dashboard-card-img-min-height: 160px;\n    --dashboard-card-img-max-height: 160px;\n    --dashboard-card-img-border: 0.1em solid #ced4da;\n\n    /* list theme */\n    --dashboard-list-theme-max-width: var(--content-max-width, 100%);\n    --dashboard-list-theme-img-max-width: 200px;\n\n    /* pagination style */\n    --pagination-tab-font-size: 1.1rem;\n    --pagination-tab-highlight-color: var(--theme-color, #dbe8f0);\n    --pagination-tab-button-color: var(--base-color, #333333);\n    --pagination-tab-content-padding: 1rem;\n  }\n\u003c/style\u003e\n```\n\n### Tag-dashboard\n\nTo change the tag-list styles, add the following CSS:\n\n```html\n\u003cstyle\u003e\n  /* default */\n  :root {\n    --tags-bg-color: #fafbfbff;\n    --tags-font-color: #54cca7ff;\n    --tags-font-size: var(--base-font-size);\n    --tags-margin-top: 5px;\n\n    --sidebar-tags-bg-color: var(--tags-bg-color);\n    --sidebar-tags-font-color: var(--tags-font-color);\n    --sidebar-tags-font-size: var(--tags-font-size);\n    --sidebar-tags-margin-top: var(--tags-margin-top);\n  }\n\u003c/style\u003e\n```\n\n---\n\n## License\n\nThis project is licensed under the GNU General Public License v3.0.\n\n- Original work © 2023–2025 李亦楊 ([@pikapikapikaori](https://github.com/pikapikapikaori))\n\n- Modified work © 2025 Sungjae Jeon ([@erectbranch](https://github.com/erectbranch))\n\nSee [LICENSE](LICENSE) for more details.\n\n---\n\n## Contribution\n\nPlease feel free to submit a pull request or open an issue on the GitHub repository. Your contributions are welcome and appreciated!\n\n---","funding_links":[],"categories":["Plugins"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferectbranch%2Fdocsify-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferectbranch%2Fdocsify-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferectbranch%2Fdocsify-dashboard/lists"}