demobox - npm Package Compare versions
Comparing version 1.1.0 to 1.2.0
@@ -14,2 +14,6 @@ | ||
| function linkTarget(title) { | ||
| return title.replace(/<[^>]+>/g, '').replace(/\./g, '').replace(/[^\w]/g, '-').toLowerCase() | ||
| } | ||
| module.exports = function (raw, config) { | ||
@@ -36,3 +40,3 @@ var rend = new marked.Renderer() | ||
| title = title.slice(0, -collapsed[0].length).trim() | ||
| text += '\n<a name="' + title + '"></a>' | ||
| text += '\n<a name="' + linkTarget(title) + '"></a>' | ||
| text += '\n<section data-collapsible ' + | ||
@@ -48,3 +52,3 @@ (collapsed[1] === '<<' ? 'class="collapsed"' : '') + '>\n' | ||
| title = title.slice(0, -column[0].length).trim() | ||
| text += '\n<a name="' + title + '"></a>' | ||
| text += '\n<a name="' + linkTarget(title) + '"></a>' | ||
| text += '\n<section>\n' | ||
@@ -56,3 +60,3 @@ } else { | ||
| } | ||
| text += '\n<a name="' + title + '"></a>' | ||
| text += '\n<a name="' + linkTarget(title) + '"></a>' | ||
| text += '\n<section>\n' | ||
@@ -62,3 +66,3 @@ } | ||
| text += '<h' + level + '>' + | ||
| '<a href="#' + title + '">' + | ||
| '<a href="#' + linkTarget(title) + '">' + | ||
| title + | ||
@@ -65,0 +69,0 @@ '</a></h' + level + '>\n' |
34
demo.md
| --- | ||
| title: Demobox Demos | ||
| subtitle: Getting rather meta | ||
| extraHead: demo-head.html | ||
| styles: demo.css | ||
| fontPair: Open Sans | ||
@@ -13,7 +11,8 @@ colors: light-green | ||
| Github: https://github.com/jaredly/demobox | ||
| demobox: | ||
| - height: 200px | ||
| --- | ||
| Check out [the source for this page](https://github.com/jaredly/demobox/blob/master/demo.md)) and [the source for the home page](https://github.com/jaredly/demobox/blob/master/Readme.md) for extended examples of using `demobox` page generator. | ||
| This page demonstrates some of the configuration for the `DemoBox` component. | ||
| # First example | ||
@@ -35,12 +34,19 @@ | ||
| ### In the `<head>` | ||
| ### Using `demobox` cli (||) | ||
| ```html | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.11.0/codemirror.min.css"> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.11.0/codemirror.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.11.0/mode/javascript/javascript.min.js"></script> | ||
| <script src="demobox.js"></script> | ||
| ````markdown | ||
| ```javascript | ||
| // @demobox | ||
| var first = 'javascript code' | ||
| , second = `You can evaluate ${first} with es6 goodness.`; | ||
| // the last line must be an expression that results in a react | ||
| // element. | ||
| <p> | ||
| <span>{second} </span> | ||
| <strong>JSX is just fine</strong> | ||
| </p> | ||
| ``` | ||
| ```` | ||
| ### In the `<body>` | ||
| ### Using `demobox.js` drop-in script (||) | ||
@@ -78,3 +84,5 @@ ```html | ||
| <DemoBox initialValue={initialValue} position='top'/> | ||
| <DemoBox | ||
| initialValue={initialValue} | ||
| position='top'/> | ||
| ``` | ||
@@ -81,0 +89,0 @@ |
| { | ||
| "name": "demobox", | ||
| "version": "1.1.0", | ||
| "version": "1.2.0", | ||
| "description": "Demo Page Generator & Live Editor Component", | ||
| "main": "index.js", | ||
| "bin": "./bin/demobox", | ||
| "scripts": { | ||
@@ -7,0 +8,0 @@ "test": "echo \"Error: no test specified\" && exit 1" |
@@ -5,3 +5,2 @@ <!-- | ||
| subtitle: Demo Page Generator | ||
| styles: demo.css | ||
| fontPair: Open Sans | ||
@@ -22,2 +21,6 @@ colors: light-green | ||
| 1. [demo page generator](#demo-page-generator) | ||
| 2. [drop-in script](#the-demoboxjs-drop-in-script) | ||
| 3. [react component](#as-a-react-component) | ||
| # Demo Page Generator | ||
@@ -30,3 +33,3 @@ | ||
| example. Also the source for the demo page | ||
| ([demo.md](https://github.com/jaredly/demobox/blob/master/Readme.md)) | ||
| ([demo.md](https://github.com/jaredly/demobox/blob/master/demo.md)) | ||
| showcases a number of features. | ||
@@ -45,8 +48,9 @@ | ||
| title: Demobox | ||
| extraHead: demo-head.html | ||
| styles: demo.css | ||
| fontPair: Open Sans | ||
| colors: light-green | ||
| links: | ||
| Github: http://github.com/jaredly/demobox | ||
| Home: index.html | ||
| Demos: demos.html | ||
| Themes: themes.html | ||
| Github: https://github.com/jaredly/demobox | ||
| --- | ||
@@ -80,2 +84,15 @@ | ||
| ## Special Headings | ||
| There are a few suffixes you can put onto headings that will give them extra | ||
| properties. | ||
| - `(<<)` marks the section as collapsed | ||
| - `(>>)` marks the section as collapsible but expanded | ||
| - `(||)` makes the section part of a column group. Adjascent sections (of the | ||
| same heading level) that have this marking will be rendered side-by-side. | ||
| An example of this is the `demo.md` and "`demo.html` rendered page" | ||
| sections above. | ||
| # The `demobox.js` drop-in script | ||
@@ -116,6 +133,11 @@ | ||
| Configuration options can be given as `data-*` attributes on the textarea. | ||
| Look at the html source of this page (and the demo page) for example usage. | ||
| Look at the html source of this page (and [the demo page](demo.html)) for example usage. | ||
| # As a react component | ||
| If you install the `demobox` library from npm (`npm install -S demobox`) then | ||
| you can use the `DemoBox` react component in your project. | ||
| In this demobox, you can play with the `DemoBox` component :). | ||
| ```jsx | ||
@@ -122,0 +144,0 @@ // @demobox |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Native code
Supply chain riskContains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.
Found 6 instances in 1 package
Improved metrics
- Lines of code
- increased by0.38%
789
- Number of lines in readme file
- increased by16.54%
155
- Number of medium supply chain risk alerts
- decreased by-85.71%
1
Worsened metrics
- Total package byte prevSize
- decreased by-26.16%
205359
- Number of package files
- decreased by-18.42%
31