respec-themeable is a JS library that makes it easier to customize ReSpec for writing technical specifications. ReSpec developers are done a good job but there are some minor issues when you try to use it outside of W3C context. respec-themeable provides workarounds for these problems.
## Features
- set background image text (left side bar) based on specStatus - customizable publisher name (instead of the hardwired W3C) - hide hardwired documentation W3C copyright texts - set defaults for some respecConfig properties - set logo from element - make main colors customizable via CSS variables
Demo
You can view this README file formatted with ReSpec at: https://respec-themeable.github.io
Installing
Add the following script tag after your respecConfig declaration script tag:
``html
`
Configuration
$3
By default ReSpec uses W3C as an implicit publisher (ie: in background image text). respec-themeable accepts publisher from publisher configuration property.
`JavaScript "example": "set document publisher" var respecConfig = { publisher: "My Company" } `
When no publisher property is set, respec-themeable try to find company in the properties of authors and editors otherwise it falls back to shortName configuration property value.
$3
If the HTML document has web manifest link, respec-themeable will use it as source of some default respecConfig properties. Otherwise respec-themeable tries to use the file package.json relative to the HTML document. You can disable package.json usage by setting noPackage to true.
If the HTML document has icon link with sizes="any" attribute and there is no logo in respecConfig then the href from icon link will be used as logo src.
`HTML "example": "set logo"
`
`note You can use data URL in the link's href attribute. `
$3
If there is no subtitle in respecConfig then description property from manifest or package.json will be used as subtitle.
$3
If there is no
<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag in the HTML document then </code>name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property from manifest or package.json will be used as title.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">If there is no </code>shortName<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in </code>respecConfig<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> then </code>name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property from manifest or package.json will be used as </code>shortName<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">The main theme color can be set using </code>--theme-color<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> CSS variable.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">CSS "example": "set theme color"<br />:root {<br /> --theme-color: red;<br />}<br /></code>`<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">The accent color can be set using </code>--accent-color<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> CSS variable.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">CSS "example": "set accent color"<br />:root {<br /> --accent-color: green;<br />}<br /></code>`<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 there is a </code>version<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property in manifest or package.json then it will be displayed under the subtitle.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">If there is a </code>bugs<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property in manifest or package.json then it will be set with label <em>Issues</em> in the </code>otherLinks<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> configuration property.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">If there is a </code>repisotroy.url<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property in manifest or package.json then it will be set with label <em>Repository</em> in the </code>otherLinks<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> configuration property.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">You can use </code>nunjucks<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>handlebars<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>mustache<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in </code>data-format` property (with data-include) for template processing external markdown files. Don't forget to provide script tag for selected template engine.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">License</h2></p><p class="my-3">This project is licensed under the MIT License. See the <a href="https://github.com/respec-themeable/respec-themeable.github.io/blob/main/LICENSE" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">LICENSE</a> for details.<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,"27:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n28:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.2.0\"}]\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>