{"id":13818007,"url":"https://github.com/rousan/samples-viewer-generator","last_synced_at":"2025-07-13T00:31:35.483Z","repository":{"id":65473446,"uuid":"131267791","full_name":"rousan/samples-viewer-generator","owner":"rousan","description":":tada: A CLI utility tool to generate web app of data visualization samples for presentation purpose","archived":false,"fork":false,"pushed_at":"2018-05-02T14:07:18.000Z","size":1112,"stargazers_count":13,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-06T20:47:55.205Z","etag":null,"topics":["boilerplate","chart","cli","data","generator","viz"],"latest_commit_sha":null,"homepage":"https://rousan.io/samples-viewer-generator","language":"CSS","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/rousan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-27T08:21:44.000Z","updated_at":"2019-03-08T16:49:21.000Z","dependencies_parsed_at":"2023-01-25T12:30:33.103Z","dependency_job_id":null,"html_url":"https://github.com/rousan/samples-viewer-generator","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/rousan/samples-viewer-generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rousan%2Fsamples-viewer-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rousan%2Fsamples-viewer-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rousan%2Fsamples-viewer-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rousan%2Fsamples-viewer-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rousan","download_url":"https://codeload.github.com/rousan/samples-viewer-generator/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rousan%2Fsamples-viewer-generator/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265075543,"owners_count":23707509,"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":["boilerplate","chart","cli","data","generator","viz"],"created_at":"2024-08-04T07:00:26.814Z","updated_at":"2025-07-13T00:31:35.048Z","avatar_url":"https://github.com/rousan.png","language":"CSS","readme":"[![Build Status](https://travis-ci.org/rousan/samples-viewer-generator.svg?branch=develop)](https://travis-ci.org/rousan/samples-viewer-generator)\n[![NPM version](https://img.shields.io/npm/v/samples-viewer-generator.svg)](https://www.npmjs.com/package/samples-viewer-generator)\n[![Required Node version](https://img.shields.io/node/v/samples-viewer-generator.svg)](https://www.npmjs.com/package/samples-viewer-generator)\n[![NPM total downloads](https://img.shields.io/npm/dt/samples-viewer-generator.svg)](https://www.npmjs.com/package/samples-viewer-generator)\n[![Contributors](https://img.shields.io/github/contributors/rousan/samples-viewer-generator.svg)](https://github.com/rousan/samples-viewer-generator/graphs/contributors)\n[![License](https://img.shields.io/github/license/rousan/samples-viewer-generator.svg)](https://github.com/rousan/samples-viewer-generator/blob/master/LICENSE)\n\n# samples-viewer-generator\n\nA CLI utility to generate an web app structure as `samples viewer` quickly for `presentation` purpose. It\ncan be used to present your existing data visualization samples in professional way.\n\n\u003e An utility tool to generate data viz samples viewer web app quickly.\n\n## Demo\n\n[Here](http://rousan.io/samples-viewer-generator/) is the demo.\n\n## Requirements\n\n`node` \u003e= `v4.0.0`\n\n**Note**: If `node` and `npm` are not installed, Install those from [here](https://nodejs.org/en/download/).\n\n## Installation\n\nInstall this tool using `npm`:\n\n```bash\n$ npm install -g samples-viewer-generator\n```\n\nIt installs two binaries: `samples-viewer-generator` and `svgen` to your system path.\n\n## Usage\n\nAt first you need to create a `config` file in `JSON` format consisting of sample details,\n`favicon`, `title` for web app etc. as follows:\n\nThe `config.json` file:\n\n```json\n{\n  \"site\": {\n    \"title\": \"\u003csite title\u003e\",\n    \"heading\": \"\u003csite heading\u003e\",\n    \"logo\": \"\u003csite logo\u003e [optional]\",\n    \"favicon\": \"\u003csite favicon\u003e [optional]\",\n    \"customCSS\": \"\u003ccustom css file to override the existing style\u003e [optional]\"\n  },\n  \"samples\": [\n    {\n      \"name\": \"\u003cname of the sample, it should be unique across all samples\u003e\",\n      \"desc\": \"\u003ca short description of sample\u003e\",\n      \"icon\": \"\u003csample icon in .png, .jpeg, or .svg format\u003e [optional]\",\n      \"chart\": \"\u003ca folder consisting of necessary files (e.g. index.html, js codes) to render the chart on an iframe\u003e\",\n      \"html\": \"\u003chtml code for sample, working code not needed, just for showing purpose\u003e [optional]\",\n      \"js\": \"\u003cjavascript code for sample, working code not needed, just for showing purpose\u003e [optional]\",\n      \"data\": \"\u003cdata for sample\u003e [optional]\",\n      \"notes\": \"\u003cnotes for samples in markdown format, supported github flavoured markdown(gfm)\u003e [optional]\"\n    }\n  ]\n}\n```\n\nSee [example](https://github.com/rousan/samples-viewer-generator/tree/master/example) folder for more info.\n\nThen you need to run the cli command `svgen` (alias of `samples-viewer-generator`) as follows:\n\n```bash\n$ svgen -c config.json -o my-samples-viewer\n\n   create : site logo\n   create : site favicon\n   create : custom CSS\n   create : index.html\n   create : CSS assets\n   create : JavaScript assets\n   create : image assets\n   create : sample Simple column chart\n   create : sample Area 2D chart with gradient\n   create : sample Pie chart with legend\n   create : sample Zoom line dual Y axis chart\n   create : sample Simple World map\n   create : site config\n\n```\n\nVoila! Your samples viewer is generated within seconds.\n\n**Note**: You should open the generated web app via any local server or remote one. It wouldn't work, if\nyou open through\n `file://` protocol.\n\n## Contributing\n\nYour PRs and stars are always welcome.\n\nCheckout the [CONTRIBUTING](https://github.com/rousan/samples-viewer-generator/blob/master/CONTRIBUTING.md) guides.","funding_links":[],"categories":["CSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frousan%2Fsamples-viewer-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frousan%2Fsamples-viewer-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frousan%2Fsamples-viewer-generator/lists"}