{"id":15650595,"url":"https://github.com/jaredly/demobox","last_synced_at":"2025-04-30T18:08:40.634Z","repository":{"id":25917932,"uuid":"29358913","full_name":"jaredly/demobox","owner":"jaredly","description":"Demo Page Generator \u0026 Live Editor Component","archived":false,"fork":false,"pushed_at":"2015-05-31T01:47:43.000Z","size":4342,"stargazers_count":35,"open_issues_count":2,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-30T18:08:35.144Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://jaredly.github.io/demobox","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaredly.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-01-16T17:15:59.000Z","updated_at":"2020-10-28T19:09:09.000Z","dependencies_parsed_at":"2022-08-24T14:17:01.351Z","dependency_job_id":null,"html_url":"https://github.com/jaredly/demobox","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredly%2Fdemobox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredly%2Fdemobox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredly%2Fdemobox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredly%2Fdemobox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaredly","download_url":"https://codeload.github.com/jaredly/demobox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251758167,"owners_count":21638989,"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":[],"created_at":"2024-10-03T12:35:10.336Z","updated_at":"2025-04-30T18:08:40.615Z","avatar_url":"https://github.com/jaredly.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\n---\ntitle: Demobox\nsubtitle: Demo Page Generator\nfontPair: Open Sans\ncolors: light-green\nga: UA-7002862-5\nsource: https://github.com/jaredly/demobox/raw/master/Readme.md\nlinks:\n  Home:\n  Demos: demo.html\n  Themes: themes.html\n  Github: https://github.com/jaredly/demobox\n\ndemobox:\n- style-min-width: \"300px\"\n---\n--\u003e\n\n###  Demobox is a quick \u0026 stylish way of getting a demo page up and running for your new react component.\n\nThere are three ways to use demobox, for varying simplicity and flexibility.\n\n1. [demo page generator](#demo-page-generator) -- markdown to demo page converter\n2. [drop-in script](#the-demoboxjs-drop-in-script) -- turn text boxes into live editors\n3. [react component](#as-a-react-component) -- integrate a live editor into your project\n\nTake a look at the [FAQ](#faq) at the bottom, or head over to\n[github](https://github.com/jaredly/demobox/issues) to file an issue or ask a\nquestion.\n\n# Demo Page Generator\n\nThe `demobox` cli tool will turn a regular markdown file with annotated code\nsnippets into a stylish demo page with editable examples. You can look at the\nmarkdown source for this page\n[here](https://github.com/jaredly/demobox/blob/master/Readme.md) as an\nexample. Also the source for the demo page\n([demo.md](https://github.com/jaredly/demobox/blob/master/demo.md))\nshowcases a number of features.\n\n```bash\n$ npm install -g demobox\n$ demobox -i demo.md -o demo.html\n```\n\n## `demo.md` (||)\n\n```markdown\n\n---\ntitle: Demobox Demos\nsubtitle: Getting rather meta\nfontPair: Open Sans\ncolors: light-green\nlinks:\n  Home: index.html\n  Demos: demos.html\n  Themes: themes.html\n  Github: https://github.com/jaredly/demobox\n---\n\n# First example\n\n``ˋjavascript\n// @demobox height=150px\nvar first = 'javascript code'\n  , second = `You can evaluate ${first} with es6 goodness.`;\n// the last line must be an expression that results in a react\n//  element.\n\u003cp\u003e\n  \u003cspan\u003e{second} \u003c/span\u003e\u003cbr/\u003e\n  \u003cstrong\u003eJSX is just fine\u003c/strong\u003e\n\u003c/p\u003e\n``ˋ\n\n... etc.\n```\n\n## `demo.html` rendered page (||)\n\n[![demo page](./demo.png)](demo.html)\n\n## Configuration\n\nThese go in the yaml frontmatter (similar to jekyll) at the top of the\nmarkdown file.\n\n- **title:** the title of the page (default: Demo Page)\n- **subtitle:** the subtitle (default: none)\n- **links:** a map of title:href for links displayed in the header\n- **styles:** a list of css files to include on the page\n- **scripts:** a list of js files to include\n- **extraHead:** a list of html files to inject at the end of the head\n- **bodyTop:** a list of html files to inject at the top of the body\n- **ga:** google analytics tracking code. If present, GA code is added to the\n    bottom of the page.\n\n### Themes\n\nThere are two configuration options associated with theming, `colors` and\n`fontPair`. Look at the [themes page](themes.html) for examples and more\ninformation.\n\n## Special Headings\n\nThere are a few suffixes you can put onto headings that will give them extra\nproperties (See the [markdown source](https://github.com/jaredly/demobox/blob/master/Readme.md) of this page for an example).\n\n- `(\u003c\u003c)` marks the section as collapsed\n- `(\u003e\u003e)` marks the section as collapsible but expanded\n- `(||)` makes the section part of a column group. Adjascent sections (of the\n    same heading level) that have this marking will be rendered side-by-side.\n    An example of this is the `demo.md` and \"`demo.html` rendered page\"\n    sections above.\n\n\n# The `demobox.js` drop-in script\n\n### Included in the `\u003chead\u003e`\n\n```html\n\u003c!-- if you want codemirror, that needs to be included separately --\u003e\n\u003cscript src=\"https://jaredly.github.io/demobox/demobox.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://jaredly.github.io/demobox/demobox.css\"\u003e\n```\n\n### Markup in the page\n\n```html\n\u003ctextarea data-demobox\u003e\n// some great code here\nvar x = \u003cem\u003eelement\u003c/em\u003e;\n\n\u003cstrong\u003eEnd with a react {x}\u003c/strong\u003e\n\u003c/textarea\u003e\n```\n\n### Rendered as a demobox\n\nThe `demobox.js` script finds all `textarea`s with the `data-demobox`\nattribute and converts them into demoboxes that look like this:\n\n```jsx\n// @demobox\n// some great code here\nvar x = \u003cem\u003eelement\u003c/em\u003e;\n\n\u003cstrong\u003eEnd with a react {x}\u003c/strong\u003e\n```\n\nConfiguration options can be given as `data-*` attributes on the textarea.\nLook at the html source of this page (and [the demo page](demo.html)) for example usage.\n\n# As a react component\n\nIf you install the `demobox` library from npm (`npm install -S demobox`) then\nyou can use the `DemoBox` react component in your project.\n\nIn this demobox, you can play with the `DemoBox` component :).\n\n```jsx\n// @demobox\nvar value = `\\\n\u003cstrong\u003e\n  It's demoboxes all the way down...\n\u003c/strong\u003e\n`;\n\n// Try changing position to left, right\n// or top, and codeMirror to false\n\u003cDemoBox\n    position='bottom'\n    header={true}\n    style={{width: 360}}\n    codeMirror={true}\n    initialValue={value}/\u003e\n```\n\n# FAQ\n\n### Why not use jekyll / some other static site generator?\nDemobox is for quick and simple jobs, and requires very little configuration\nto get something usable and beautiful. You don't have time to set up a\nfull-blown website for each little component you create, but you want a way to\n**show the world** what you've done in a classy way.\n\n### Why not use jsfiddle / plunkr / codepen for embedding editable code snippets?\nDemobox works with vesion control; jsfiddle etc. does not. Demobox also has\nfirst-class support for JSX and React components (and support for HTML/CSS coming soon!).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaredly%2Fdemobox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaredly%2Fdemobox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaredly%2Fdemobox/lists"}