Hopiu/djLint
1
0
Fork 0
mirror of https://github.com/Hopiu/djLint.git synced 2026-03-16 21:40:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs(demo): fixed unicode issue, added readme and misc updates

Browse source
This commit is contained in:
Christopher Pickering 2022-11-23 11:11:53 +01:00
parent 4318b52a15
commit fef917e492
No known key found for this signature in database
GPG key ID: E14DB3B0A0FACF84
10 changed files with 209 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
docs/.eleventy.js
View file

@ -224,6 +224,15 @@ module.exports = function (eleventyConfig) {
}
});
eleventyConfig.addFilter('year', (value) => {
try {
const options = { year: 'numeric' };
return value.toLocaleDateString('en-us', options);
} catch (e) {
return value;
}
});
eleventyConfig.addFilter('algExcerpt', (text) => {
return text
.replace(/<code class="language-.*?">.*?<\/code>/gs, '')
@ -266,6 +275,7 @@ module.exports = function (eleventyConfig) {
'download',
'code-commit',
'spinner',
'circle-question',
],
},
'_site/static/font/fontawesome/webfonts',

17
docs/readme.md Normal file
View file

@ -0,0 +1,17 @@
# djLint Docs
Docs are made with [11ty](https://www.11ty.dev).
## Running the docs website locally
1. change into the docs dir. `cd docs`
2. install node deps. `npm install`
3. turn on the website. `npm start`
## How the demo works
The demo is running python as a webworker in web assembly from [pyodide](https://pyodide.org/en/stable/index.html).
When the page is access a webworker starts, downloads python, installs djLint and deps (notice the wheels in `/src/static/py` that are updated when a new release is created.).
Once the worker responds "ready" the web UI is shown.

15
docs/src/_data/i18n/index.js
View file

@ -137,7 +137,18 @@ module.exports = {
},
try_online: {
'en-US': '🤩 Try Online',
ru: '🤩 Essayez',
fr: '🤩 Попробуйте онлайн',
fr: '🤩 Essayez Ici',
ru: '🤩 Попробуйте онлайн',
},
demo_description: {
'en-US': 'Online HTML Template formatter using djLint!',
ru: 'Онлайн форматировщик HTML-шаблонов с использованием djLint',
fr: 'Formateur de modèles HTML en ligne utilisant djLint !',
},
footer_credits: {
'en-US':
'djLint was originally created for use in the <a href="https://atlas.bi" target="_blank">Atlas</a> projects by the <a href="https://github.com/riverside-Healthcare/" target="_blank">Riverside Healthcare Analytics</a> team.',
fr: 'djLint a été créé à l\'origine pour être utilisé dans les projets <a href="https://atlas.bi" target="_blank">Atlas</a> par l\'équipe <a href="https://github.com/riverside-Healthcare/" target="_blank">Riverside Healthcare Analytics</a>.',
ru: 'Изначально djLint был создан для использования в проектах <a href="https://atlas.bi" target="_blank">Atlas</a> командой <a href="https://github.com/riverside-Healthcare/" target="_blank">Riverside Healthcare Analytics</a>.',
},
};

154
docs/src/_includes/demo.njk Normal file
View file

@ -0,0 +1,154 @@
---
layout: layout.njk
date: Last Modified
description: Online HTML Template formatter. Reformat your HTML templates online with djLint.
keywords: online template formatter, djLint, HTML, templates, formatter, linter, rules, online html template formatter
---
<div class="container is-fluid pb-5">
<hr class="mt-0" />
<h1 class="title is-3">{{ "demo_description" | i18n | safe }}</h1>
<div class="block" id="djlint-status">
<span class="icon-text">
<span class="icon">
<i class="fas fa-spinner fa-spin"></i>
</span>
<span><strong>Loading djLint ..</strong></span>
</span>
</div>
<div class="columns is-hidden">
<div class="column is-narrow">
<form id="djlint-settings">
<div class="field">
<label class="label">Custom Blocks <a href="/docs/configuration/#custom_blocks" target="_blank"><span class="icon has-text-grey-light">
<i class="fas fa-circle-question"></i>
</span></a></label>
<div class="control">
<input id="settings-custom-blocks" class="input" type="text" placeholder="toc,example">
</div>
</div>
<div class="field">
<label class="label">Custom HTML <a href="/docs/configuration/#custom_html" target="_blank"><span class="icon has-text-grey-light">
<i class="fas fa-circle-question"></i>
</span></a></label>
<div class="control">
<input id="settings-custom-html" class="input" type="text" placeholder="mjml,simple-greeting,mj-\w+">
</div>
</div>
<div class="field">
<label class="label">Indent <a href="/docs/configuration/#indent" target="_blank"><span class="icon has-text-grey-light">
<i class="fas fa-circle-question"></i>
</span></a></label>
<div class="control">
<input id="settings-indent" class="input" type="text" placeholder="4">
</div>
</div>
<div class="field">
<label class="label">Blank Line after Tag <a href="/docs/configuration/#blank_line_after_tag" target="_blank"><span class="icon has-text-grey-light">
<i class="fas fa-circle-question"></i>
</span></a></label>
<div class="control">
<input id="settings-blank-line-after-tag" class="input" type="text" placeholder="load,extends,include">
</div>
</div>
<div class="field">
<label class="label">Blank Line before Tag <a href="/docs/configuration/#blank_line_before_tag" target="_blank"><span class="icon has-text-grey-light">
<i class="fas fa-circle-question"></i>
</span></a></label>
<div class="control">
<input id="settings-blank-line-before-tag" class="input" type="text" placeholder="load,extends,include">
</div>
</div>
<div class="field">
<label class="label">Profile <a href="/docs/configuration/#profile" target="_blank"><span class="icon has-text-grey-light">
<i class="fas fa-circle-question"></i>
</span></a></label>
<div class="control">
<div class="select">
<select id="settings-profile" >
<option value="html">html (default)</option>
<option value="django">django</option>
<option value="jinja">jinja</option>
<option value="nunjucks">nunjucks (nunjucks and twig)</option>
<option value="handlebars">handlebars (handlebars and mustache)</option>
<option value="golang">golang</option>
<option value="angular">angular</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label">Max Line Length <a href="/docs/configuration/#max_line_length" target="_blank"><span class="icon has-text-grey-light">
<i class="fas fa-circle-question"></i>
</span></a></label>
<div class="control">
<input id="settings-max-line-length" class="input" type="text" placeholder="80">
</div>
</div>
<div class="field">
<label class="label">Max Attribute Length <a href="/docs/configuration/#max_attribute_length" target="_blank"><span class="icon has-text-grey-light">
<i class="fas fa-circle-question"></i>
</span></a></label>
<div class="control">
<input id="settings-max-attribute-length" class="input" type="text" placeholder="0">
</div>
</div>
<div class="field">
<label class="checkbox">
<input id="settings-format-attribute-template-tags" type="checkbox">
Format Attribute Template Tags <a href="/docs/configuration/#format_attribute_template_tags" target="_blank"><span class="icon has-text-grey-light">
<i class="fas fa-circle-question"></i>
</span></a>
</label>
</div>
<div class="field">
<label class="checkbox">
<input id="settings-preserve-leading-space" type="checkbox">
Preserve Leading Space <a href="/docs/configuration/#preserve_leading_space" target="_blank"><span class="icon has-text-grey-light">
<i class="fas fa-circle-question"></i>
</span></a>
</label>
</div>
<div class="field">
<label class="checkbox">
<input id="settings-preserve-blank-space" type="checkbox">
Preserve Blank Space <a href="/docs/configuration/#preserve_blank_lines" target="_blank"><span class="icon has-text-grey-light">
<i class="fas fa-circle-question"></i>
</span></a>
</label>
</div>
<div class="field">
<label class="checkbox">
<input id="settings-format-js" type="checkbox">
Format JS <a href="/docs/configuration/#format_js" target="_blank"><span class="icon has-text-grey-light">
<i class="fas fa-circle-question"></i>
</span></a>
</label>
</div>
<div class="field">
<label class="checkbox">
<input id="settings-format-css" type="checkbox">
Format CSS <a href="/docs/configuration/#format_css" target="_blank"><span class="icon has-text-grey-light">
<i class="fas fa-circle-question"></i>
</span></a>
</label>
</div>
</form>
</div>
<div class="column" id="djlint-input">
</div>
<div class="column" id="djlint-output">
</div>
</div>
</div>
{% rollup "src/static/js/editor.js" | url %}

5
docs/src/_includes/foot.njk
View file

@ -12,7 +12,10 @@
<div class="column"></div>
<div class="column">
<p class="copyright has-text-grey-dark has-text-right">
djLint | ©2021 Riverside Healthcare
djLint | ©{{ page.date | year }} Riverside Healthcare
</p>
<p class="has-text-grey-dark has-text-right mt-2">
<small>{{ "footer_credits" | i18n | safe }}</small>
</p>
</div>
</div>

125
docs/src/demo.njk
View file

@ -1,127 +1,4 @@
---
layout: layout.njk
layout: demo.njk
date: Last Modified
description: Online HTML Template formatter. Reformat your HTML templates online with djLint.
keywords: online template formatter, djLint, HTML, templates, formatter, linter, rules, online html template formatter
---
<div class="section">
<div class="container">
<h1 class="title is-3">Online HTML Template formatter using djLint!</h1>
<div class="block" id="djlint-status">
<span class="icon-text">
<span class="icon">
<i class="fas fa-spinner fa-spin"></i>
</span>
<span><strong>Loading djLint ..</strong></span>
</span>
</div>
<div class="columns is-hidden">
<div class="column is-narrow">
<form id="djlint-settings">
<div class="field">
<label class="label">Custom Blocks</label>
<div class="control">
<input id="settings-custom-blocks" class="input" type="text" placeholder="toc,example">
</div>
</div>
<div class="field">
<label class="label">Custom HTML</label>
<div class="control">
<input id="settings-custom-html" class="input" type="text" placeholder="mjml,simple-greeting,mj-\w+">
</div>
</div>
<div class="field">
<label class="label">Indent</label>
<div class="control">
<input id="settings-indent" class="input" type="text" placeholder="4">
</div>
</div>
<div class="field">
<label class="label">Blank Line after Tag</label>
<div class="control">
<input id="settings-blank-line-after-tag" class="input" type="text" placeholder="load,extends,include">
</div>
</div>
<div class="field">
<label class="label">Blank Line before Tag</label>
<div class="control">
<input id="settings-blank-line-before-tag" class="input" type="text" placeholder="load,extends,include">
</div>
</div>
<div class="field">
<label class="label">Profile</label>
<div class="control">
<div class="select">
<select id="settings-profile" >
<option value="html">html (default)</option>
<option value="django">django</option>
<option value="jinja">jinja</option>
<option value="nunjucks">nunjucks (nunjucks and twig)</option>
<option value="handlebars">handlebars (handlebars and mustache)</option>
<option value="golang">golang</option>
<option value="angular">angular</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label">Max Line Length</label>
<div class="control">
<input id="settings-max-line-length" class="input" type="text" placeholder="80">
</div>
</div>
<div class="field">
<label class="label">Max Attribute Length</label>
<div class="control">
<input id="settings-max-attribute-length" class="input" type="text" placeholder="0">
</div>
</div>
<div class="field">
<label class="checkbox">
<input id="settings-format-attribute-template-tags" type="checkbox">
Format Attribute Template Tags
</label>
</div>
<div class="field">
<label class="checkbox">
<input id="settings-preserve-leading-space" type="checkbox">
Preserve Leading Space
</label>
</div>
<div class="field">
<label class="checkbox">
<input id="settings-preserve-blank-space" type="checkbox">
Preserve Blank Space
</label>
</div>
<div class="field">
<label class="checkbox">
<input id="settings-format-js" type="checkbox">
Format JS
</label>
</div>
<div class="field">
<label class="checkbox">
<input id="settings-format-css" type="checkbox">
Format CSS
</label>
</div>
</form>
</div>
<div class="column" id="djlint-input">
</div>
<div class="column" id="djlint-output">
</div>
</div>
</div>
</div>
{% rollup "src/static/js/editor.js" | url %}

4
docs/src/fr/demo.njk Normal file
View file

@ -0,0 +1,4 @@
---
layout: demo.njk
date: Last Modified
---

4
docs/src/ru/demo.njk Normal file
View file

@ -0,0 +1,4 @@
---
layout: demo.njk
date: Last Modified
---

1
docs/src/static/font/fontawesome/stylesheet.scss vendored
View file

@ -68,6 +68,7 @@ $icons: (
globe: $fa-var-globe,
code-commit: $fa-var-code-commit,
spinner: $fa-var-spinner,
circle-question: $fa-var-circle-question,
);
@each $key, $value in $icons {

2
docs/src/static/js/worker.js
View file

@ -117,7 +117,7 @@ self.onmessage = async (event) => {
await pyodide.runPythonAsync(`
temp_file = tempfile.NamedTemporaryFile(delete=False)
temp_file.write(b"""${html}""")
temp_file.write(str.encode("""${html}"""))
temp_file.seek(0)
config = Config(
temp_file.name${indent}${profile}${preserveLeadingSpace}${preserveBlankSpace}${formatJs}${formatCss}