!logo.svg
> Generate a svg logo, then you can embed it in you README.md
Feature:
- Custom font, font size, letter spacing
- Generate individual path for every char
- Support any valid attributes and style
- Handily cli
Install
To use the logo command, install it globally:
``
$ npm install logo.svg -g
To use the JavaScript API, install logo.svg locally:
`
$ npm install logo.svg --save
If you need both the logo command and the JavaScript API, install logo.svg.js both ways.
Usage
$3
`
$ logo [options]
Options:
`
-l, --logo ??? ............. The logo text. Default is the of the package.json.
-f, --font ??? ............. Specify the font path or url.
-s, --fontSize ??? ......... Specify the font size. Default 72.
-o, --output ??? ........... Specify the output path. Default logo.svg
-c, --config ??? ........... Specify the file.
-O, --overwrite ............ Overwrite when a logo file exist. Default true.
-k, --kerning .............. Take kerning information into account. Default true.
-d, --divided .............. Generate individual path for every char. Default false.
-V, --version .............. Print the current version.
-h, --help ................. You're looking at it.
-h, --help ??? ............. Show details for the specified command.
`
Examples:
`
$ logo
$ logo -Odo ./logo/logo.svg
$ logo --config ./logo/.logorc
$ logo --help
$ logo --help font
$ logo --help config
$ logo --version
$3
`js
var logo = require('logo.svg');
// generate the svg string, then you can use it in you code
var svg = logo.generate(options);
`
Options
$3
The font's path or full url. If it's an url, we will load the font asynchronous then generate the logo.
If the path is relative, it is relative to the current work directory(process.cwd()).
If the path is a basename, such as fontName.ttf, we will fisrtly try to load it as a relative path, if that failed we will search it from the preset folder, and then search it from system and user fonts folders.
The preset folder is ./fonts/, contribute your fonts by pull request.
$3
The logo text. Default is the name in package.json.
$3
Horizontal position of the beginning of the text. (default: 0)
$3
Vertical position of the baseline of the text. (default: 0)
$3
Size of the text. (default: 72)
$3
The letter spacing. (default: 0)
$3
If true takes kerning information into account. (default: true)
$3
If true generates individual path for every char. (default: false)
$3
If true groups the individual with element. (default: false)
$3
If specified will generate a
<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> at the root of </code><svg><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. (default: </code>logo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">If specified will generate a </code><desc><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> at the root of </code><svg><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. (default: </code>null<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)</p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">Styling the logo</h2></p><p class="my-3">Specify the padding of the </code><path><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> relative to the </code><svg><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:</p><p class="my-3">- options.padding<br />- options.paddingTop or options['padding-top']<br />- options.paddingRight or options['padding-right']<br />- options.paddingBottom or options['padding-bottom']<br />- options.paddingLeft or options['padding-left']</p><p class="my-3">The </code><svg><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code><path><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code><g><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> elements can be styled by any valid attributes. </p><p class="my-3">The generated </code><svg><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> has the following default attributes:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />{<br /> 'version' : '1.1',<br /> 'xmlns' : 'http://www.w3.org/2000/svg',<br /> 'xmlns:xlink': 'http://www.w3.org/1999/xlink',<br /> 'role' : 'img',<br /> 'width' : width,<br /> 'height' : height,<br /> 'viewbox': [x, y, width, height].join(' ')<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">We can <strong>add</strong>/<strong>update</strong>/<strong>remove</strong> by </code>options.svg<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />options.svg = {<br /> 'version': '', // remove this attribute<br /> 'role' : 'logo', // update this attribute<br /> 'fill' : 'red' // add some custiom styles<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Note</strong> that the </code>width<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>height<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>viewbox<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> can't be specified.</p><p class="my-3">Styling the </code><path><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> by </code>options.path<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. If </code>divided<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> we can style the individual </code><path><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element by </code>options.path?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, which </code>?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is the index of each char in the </code>logo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />// style for every path(s)<br />options.path = {<br /> 'fill': yellow<br />};</p><p class="my-3">// style the first char<br />options.path0 = {<br /> 'fill': '#FF0000',<br /> 'stroke': '#000000'<br />};<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">As the same </code>options.g<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> specified the style of </code><g><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element. </p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">.logorc</h2></p><p class="my-3">All the options can be specified in the following files:</p><p class="my-3">- .logorc.js<br />- .logorc.yaml<br />- .logorc.yml<br />- .logorc.json<br />- .logorc<br />- The </code>logo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> section in </code>package.json<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">We will try to load configuration from these files order by order, stop <strong>until</strong> any file load succeed.</p><p class="my-3">Example for </code>.logorc<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">yaml<br />font: Origami-Mommy-Pixellated.ttf<br />fontSzie: 72<br />output: logo.svg<br /><h1 class="text-2xl font-bold mt-6 mb-4">style the logo</h1><br />path:<br /> fill: '#6ccb99'<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Example for </code>package.json<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">json<br />{<br /> "name": "module",<br /> "version": "1.0.0",<br /> <br /> "logo": {<br /> "font": "Origami-Mommy-Pixellated.ttf",<br /> "fontSzie": 72,<br /> "output": "logo.svg",<br /> "path": {<br /> "fill": "#6ccb99"<br /> }<br /> },<br /> <br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">Embed the logo</h2></p><p class="my-3">SVG does not work from README by design for security concerns <a href="http://stackoverflow.com/a/21521184/895245" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">...</a></p><p class="my-3">> We have had to disable svg image rendering on GitHub.com due to potential cross site scripting vulnerabilities.</p><p class="my-3">So, we can not embed by the raw url, <a href="http://rawgit.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">rawgit.com</a> solves this problem nicely. For each request, it retrieves the appropriate document from GitHub and, crucially, serves it with the correct Content-Type header.</p><p class="my-3">Link to your logo.svg using the following pattern:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />https://cdn.rawgit.com/<repo-owner>/<repo>/<branch>/path/to.svg<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">To ensure that the CDN always serves the version of the file you want, use a git tag or commit hash in the file's path instead of a branch name, and update the URL if you push a new version of the file.</p><p class="my-3">So, instead of a URL like </code>https://cdn.rawgit.com/user/repo/branch/file<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, use a URL like </code>https://cdn.rawgit.com/user/repo/tag/file<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>https://cdn.rawgit.com/user/repo/commit/file<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><br />The embed code looks like:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">mk<br />!<a href="https://cdn.rawgit.com/<repo-owner>/<repo>/<branch>/path/to.svg" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">logo.svg</a></p><p class="my-3"><img alt="logo.svg" width="500" src="https://cdn.rawgit.com/<repo-owner>/<repo>/<branch>/path/to.svg"><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Demos</h2></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">yaml<br />font: 'gubblebum-glocky.ttf'<br />logo: 'npm '<br />output: './demos/gubblebum-blocky/npm.svg'<br />path:<br /> fill: '#cb3837'<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><img alt="npm" width="450" src="https://cdn.rawgit.com/bubkoo/logo.svg/3321802/demos/gubblebum-blocky/npm.svg"></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">yaml<br />logo: 'divided'<br />font: 'origami-mommy.ttf'<br />output: './demos/origami-mommy/divided.svg'<br />divided: true<br />path:<br /> fill: '#6af72e'<br />path1:<br /> fill: '#c6e03c'<br />path2:<br /> fill: '#fc428f'<br />path3:<br /> fill: '#cea2fd'<br />path4:<br /> fill: '#fb3f24'<br />path5:<br /> fill: '#3cc8f6'<br />path6:<br /> fill: '#ff3e74'<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">!<a href="https://cdn.rawgit.com/bubkoo/logo.svg/3321802/demos/origami-mommy/divided.svg" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">divided</a></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">yaml<br />logo: 'Blocked'<br />font: 'blocked.ttf'<br />output: './demos/blocked/blocked.svg'<br />path:<br /> fill: '#fc174f'<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">!<a href="https://cdn.rawgit.com/bubkoo/logo.svg/3321802/demos/blocked/blocked.svg" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">blocked</a></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">yaml<br />logo: 'Square'<br />font: 'mk-zodnig-square.ttf'<br />fontSize: 96<br />output: './demos/mk-zodnig-square/square.svg'<br />path:<br /> fill: '#fd742d'<br /><h1 class="text-2xl font-bold mt-6 mb-4"> stroke: '#fd742d'</h1><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">!<a href="https://cdn.rawgit.com/bubkoo/logo.svg/3321802/demos/mk-zodnig-square/square.svg" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">square</a></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">yaml<br />logo: 'Gubblebum '<br />font: 'gubblebum.ttf'<br />output: './demos/gubblebum/gubblebum.svg'<br />spacing: 10<br />divided: true<br />path:<br /> fill: '#6af72e'<br />path0:<br /> fill: '#fc428f'<br /></code>``</p><p class="my-3">!<a href="https://cdn.rawgit.com/bubkoo/logo.svg/3321802/demos/gubblebum/gubblebum.svg" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">gubblebum</a></p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">Related</h2><br /> <br />- <a href="https://github.com/bubkoo/text2svg" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">text2svg</a> Convert text to svg path.<br />- <a href="https://github.com/bubkoo/loadrc" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">loadrc</a> Load runtime configuration files for your module.</p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">TODO</h2></p><p class="my-3">- Support logo template.<br />- What's your suggestion? Open an <a href="https://github.com/bubkoo/logo.svg/issues/new" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">issue</a>.</p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">Contributing</h2></p><p class="my-3">Pull requests and stars are highly welcome.</p><p class="my-3">For bugs and feature requests, please <a href="https://github.com/bubkoo/logo.svg/issues/new" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">create an issue</a>.<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"2a:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n2b:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.2.0\"}]\n2c:[\"$\",\"$L5\",\"mkdirp\",{\"href\":\"/package/mkdirp\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"mkdirp\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.5.1\"}]]}]\n2d:[\"$\",\"$L5\",\"path-is-absolute\",{\"href\":\"/package/path-is-absolute\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"path-is-absolute\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.0.0\"}]]}]\n2e:[\"$\",\"$L5\",\"text2svg\",{\"href\":\"/package/text2svg\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"text2svg\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.0.0\"}]]}]\n2f:[\"$\",\"$L5\",\"update-notifier\",{\"href\":\"/package/update-notifier\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"update-notifier\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.6.3\"}]]}]\n"])</script><script>self.__next_f.push([1,"30:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}],\"Dev Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":1}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"jshint\",{\"href\":\"/package/jshint\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"jshint\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.9.1\"}]]}]]}]}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>