danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2024-11-30 04:29:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use LiquidJS template instead of constructing HTML in JS.

Browse Source
This commit is contained in:
Jonny Gerig Meyer 2023-06-07 16:36:06 -04:00
parent 11cda5d580
commit ffa46e5f5b
No known key found for this signature in database
2 changed files with 13 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
source/_includes/function.liquid Normal file
View File

@ -0,0 +1,5 @@
{% for name in names offset: 1 %}<div id="{{ name }}">{% endfor -%}
<div class="sl-c-callout sl-c-callout--function" id="{{ names[0] }}"><pre class="signature language-scss"><a class="anchor" href="#{{ names[0] }}"></a><code class="language-scss">{{ signatures }}{% if returns %} <span class="token comment">//=&gt; {{ returns }}</span>{% endif %}</code></pre>
{{ content }}
</div>
{%- for name in names offset: 1 %}</div>{% endfor %}

34
source/helpers/function.ts
View File

@ -2,6 +2,7 @@ import * as cheerio from 'cheerio';
import stripIndent from 'strip-indent'; import stripIndent from 'strip-indent';
import { codeBlock } from './components'; import { codeBlock } from './components';
import { liquidEngine } from './engines';
const links: Record<string, string> = { const links: Record<string, string> = {
number: '/documentation/values/numbers', number: '/documentation/values/numbers',
@ -33,7 +34,7 @@ const returnTypeLink = (returnType: string) =>
/** Renders API docs for a Sass function (or mixin). /** Renders API docs for a Sass function (or mixin).
* *
* The function's name is parsed from the signature. The API description is * The function's name is parsed from the signature. The API description is
* passed as a Markdown block. If `returns:type` is passed as the last argument, * passed as an HTML block. If `returns:type` is passed as the last argument,
* it's included as the function's return type. * it's included as the function's return type.
* *
* Multiple signatures may be passed, in which case they're all included in * Multiple signatures may be passed, in which case they're all included in
@ -75,32 +76,13 @@ export function _function(content: string, ...signatures: string[]) {
.trim(); .trim();
}); });
// Add the return type after the last signature // Render the final HTML
let mergedSignatures = highlightedSignatures.join('\n'); return liquidEngine.renderFile('function', {
if (returns) { names,
mergedSignatures += ` <span class="token comment">//=> ${returnTypeLink( signatures: highlightedSignatures.join('\n'),
returns, content,
)}</span>`; returns: returns ? returnTypeLink(returns) : null,
}
// Assemble the final HTML
const $ = cheerio.load('');
const div = $('<div></div>')
.addClass('sl-c-callout sl-c-callout--function')
.attr('id', names[0]);
const pre = $('<pre></pre>').addClass('signature language-scss');
const anchor = $('<a></a>').addClass('anchor').attr('href', `#${names[0]}`);
const code = $('<code></code>')
.addClass('language-scss')
.html(mergedSignatures);
pre.append(anchor).append(code);
div.append(pre).append(content);
$('body').append(div);
names.slice(1).forEach((name) => {
const div = $('<div></div>').attr('id', name);
$('body').append(div);
}); });
return $('body').html() || '';
} }
/* eslint-disable @typescript-eslint/no-unsafe-member-access, /* eslint-disable @typescript-eslint/no-unsafe-member-access,