mirror of
https://github.com/danog/sass-site.git
synced 2024-11-30 04:29:17 +01:00
Merge pull request #20 from oddbird/markdown-it-attrs
Try out markdown-it-attrs
This commit is contained in:
Jonny Gerig Meyer
GitHub
commit
1a0b8fbb8c
@ -64,8 +64,10 @@ yarn lint
|
||||
## Templates
|
||||
|
||||
- `.liquid` files are parsed as [LiquidJS](https://liquidjs.com/) templates.
|
||||
- To embed Markdown (or other languages) inside LiquidJS templates, use the
|
||||
[11ty `{% renderTemplate 'md' %}` tag](https://www.11ty.dev/docs/plugins/render/#rendertemplate). Note that multiple languages can be used, e.g.
|
||||
- To embed Markdown (or other languages) inside LiquidJS templates, use either
|
||||
the `{% markdown %}` tag or the [11ty `{% renderTemplate 'md' %}`
|
||||
tag](https://www.11ty.dev/docs/plugins/render/#rendertemplate). With the
|
||||
latter, note that multiple languages can be used, e.g.
|
||||
`{% renderTemplate 'liquid,md' %}`
|
||||
- To include partials, use either the
|
||||
[11ty `{% renderFile %}` tag](https://www.11ty.dev/docs/plugins/render/#renderfile)
|
||||
|
||||
@ -6,6 +6,7 @@ const formatDistanceToNow = require('date-fns/formatDistanceToNow');
|
||||
const yaml = require('js-yaml');
|
||||
const { LoremIpsum } = require('lorem-ipsum');
|
||||
const markdown = require('markdown-it');
|
||||
const markdownItAttrs = require('markdown-it-attrs');
|
||||
const markdownDefList = require('markdown-it-deflist');
|
||||
const typogrify = require('typogr');
|
||||
|
||||
@ -24,7 +25,9 @@ module.exports = (eleventyConfig) => {
|
||||
const mdown = markdown({
|
||||
html: true,
|
||||
typographer: true,
|
||||
}).use(markdownDefList);
|
||||
})
|
||||
.use(markdownDefList)
|
||||
.use(markdownItAttrs);
|
||||
|
||||
eleventyConfig.setLibrary('md', mdown);
|
||||
eleventyConfig.addDataExtension('yml, yaml', (contents) =>
|
||||
|
||||
@ -66,6 +66,8 @@
|
||||
"js-yaml": "^4.1.0",
|
||||
"kleur": "^4.1.5",
|
||||
"lorem-ipsum": "^2.0.8",
|
||||
"markdown-it": "^13.0.1",
|
||||
"markdown-it-attrs": "^4.1.6",
|
||||
"markdown-it-deflist": "^2.1.0",
|
||||
"netlify-plugin-11ty": "^1.3.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
|
||||
@ -6,10 +6,10 @@
|
||||
<div class="sl-l-container sl-l-section">
|
||||
<div class="sl-l-grid sl-l-grid--full sl-l-large-grid--fit sl-l-large-grid--center sl-l-large-grid--gutters">
|
||||
<div class="sl-l-grid__column">
|
||||
{% renderTemplate 'liquid,md' %}
|
||||
{% markdown %}
|
||||
Sass © 2006–{{ 'now' | date: '%Y' }} the Sass team, and numerous contributors.
|
||||
It is available for use and modification under the [MIT License](https://github.com/sass/dart-sass/blob/master/LICENSE).
|
||||
{% endrenderTemplate %}
|
||||
{% endmarkdown %}
|
||||
|
||||
{% renderFile 'source/_includes/footer_nav.md' %}
|
||||
</div>
|
||||
|
||||
@ -35,7 +35,7 @@ the Sass project.
|
||||
Want to create your own Sass implementation? Check out our [implementation
|
||||
guidelines](/implementation).
|
||||
|
||||
<h2 id="Contribute">Contribute</h2>
|
||||
## Contribute {#Contribute}
|
||||
|
||||
Sass is an [open source project][github] and we encourage you to contribute. You
|
||||
can contribute with [bug reports and feature requests][issues], and if you
|
||||
|
||||
@ -66,7 +66,7 @@ about the command-line interface.
|
||||
Once it's all set up, **go and play**. If you're brand new to
|
||||
Sass we've set up some resources to help you learn pretty darn quick.
|
||||
|
||||
<a href="/guide" class="sl-c-button sl-c-button--primary">Learn More About Sass</a>
|
||||
[Learn More About Sass](/guide){.sl-c-button .sl-c-button--primary}
|
||||
|
||||
Install Anywhere (Standalone)
|
||||
|
||||
|
||||
@ -1,52 +0,0 @@
|
||||
---
|
||||
title: Brand Guidelines
|
||||
---
|
||||
|
||||
{% markdown %}
|
||||
|
||||
## Brand Usage
|
||||
|
||||
- Do not stretch or distort the logo. Use the "seal" version of the logo when
|
||||
needing to use a square image (like avatars).
|
||||
- Do not alter the color of the logo. The official logo color is
|
||||
`$sl-color--hopbush` (`#c69`).
|
||||
- If you have to put the logo on a busy/colorful background, then you can use
|
||||
one of the reversed (on white) logos, provided here.
|
||||
- When using the Sass brand and identity in your presentations, articles,
|
||||
videos, or any other media, please be respectful. The Sass brand is feminine
|
||||
and we love that. But our brand must never be used alongside sexist imagery.
|
||||
In fact, we [explicitly changed our
|
||||
logo](https://github.com/sass/sass/issues/349) for that very reason. Read
|
||||
our [community guidelines](/community-guidelines) for more information. If
|
||||
you have questions about the images you want to use, please feel free to
|
||||
contact us at: [community@sass-lang.com](mailto:community@sass-lang.com?subject=[Sass Community] Hello 'Email the Sass community leaders').
|
||||
|
||||
<a href="/assets/img/styleguide/sass-logo.zip" class="sl-c-button sl-c-button--primary">Download vector logos</a>
|
||||
|
||||
<a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="https://licensebuttons.net/l/by-nc-sa/3.0/88x31.png" /></a>
|
||||
|
||||
This work is licensed under a <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.
|
||||
|
||||
{% endmarkdown %}
|
||||
|
||||
<h3>Standard</h3>
|
||||
|
||||
<ul class="sl-l-grid sl-l-grid--full sl-l-large-grid--fit sl-l-large-grid--gutters-large sl-l-large-grid--center">
|
||||
<li class="sl-l-grid__column"><img height="80" alt="Sass" src="/assets/img/styleguide/color.png"></li>
|
||||
<li class="sl-l-grid__column"><img height="80" alt="Sass" src="/assets/img/styleguide/seal-color.png"></li>
|
||||
</ul>
|
||||
|
||||
<h3>White</h3>
|
||||
|
||||
<ul class="sl-l-grid sl-l-grid--full sl-l-large-grid--fit sl-l-large-grid--gutters-large sl-l-large-grid--center sl-background--midnight-blue">
|
||||
<li class="sl-l-grid__column"><img height="80" alt="Sass" src="/assets/img/styleguide/white.png"></li>
|
||||
<li class="sl-l-grid__column"><img height="80" alt="Sass" src="/assets/img/styleguide/seal-color-reversed.png"></li>
|
||||
<li class="sl-l-grid__column"><img height="80" alt="Sass" src="/assets/img/styleguide/seal-black-reversed.png"></li>
|
||||
</ul>
|
||||
|
||||
<h3>Black</h3>
|
||||
|
||||
<ul class="sl-l-grid sl-l-grid--full sl-l-large-grid--fit sl-l-large-grid--gutters-large sl-l-large-grid--center">
|
||||
<li class="sl-l-grid__column"><img height="80" alt="Sass" src="/assets/img/styleguide/black.png"></li>
|
||||
<li class="sl-l-grid__column"><img height="80" alt="Sass" src="/assets/img/styleguide/seal-black.png"></li>
|
||||
</ul>
|
||||
47
source/styleguide/brand.md
Normal file
47
source/styleguide/brand.md
Normal file
@ -0,0 +1,47 @@
|
||||
---
|
||||
title: Brand Guidelines
|
||||
---
|
||||
|
||||
## Brand Usage
|
||||
|
||||
- Do not stretch or distort the logo. Use the "seal" version of the logo when
|
||||
needing to use a square image (like avatars).
|
||||
- Do not alter the color of the logo. The official logo color is
|
||||
`$sl-color--hopbush` (`#c69`).
|
||||
- If you have to put the logo on a busy/colorful background, then you can use
|
||||
one of the reversed (on white) logos, provided here.
|
||||
- When using the Sass brand and identity in your presentations, articles,
|
||||
videos, or any other media, please be respectful. The Sass brand is feminine
|
||||
and we love that. But our brand must never be used alongside sexist imagery.
|
||||
In fact, we [explicitly changed our
|
||||
logo](https://github.com/sass/sass/issues/349) for that very reason. Read
|
||||
our [community guidelines](/community-guidelines) for more information. If
|
||||
you have questions about the images you want to use, please feel free to
|
||||
contact us at: [community@sass-lang.com](mailto:community@sass-lang.com?subject=[Sass Community] Hello 'Email the Sass community leaders').
|
||||
|
||||
[Download vector logos](/assets/img/styleguide/sass-logo.zip){.sl-c-button .sl-c-button--primary}
|
||||
|
||||
[{style="border-width:0"}](https://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US){rel=license}<br />
|
||||
This work is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License](https://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US){rel=license}.
|
||||
|
||||
### Standard
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
- {height=80} {.sl-l-grid__column}
|
||||
- {height=80} {.sl-l-grid__column}
|
||||
{.sl-l-grid .sl-l-grid--full .sl-l-large-grid--fit .sl-l-large-grid--gutters-large .sl-l-large-grid--center}
|
||||
|
||||
### White
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
- {height=80} {.sl-l-grid__column}
|
||||
- {height=80} {.sl-l-grid__column}
|
||||
- {height=80} {.sl-l-grid__column}
|
||||
{.sl-l-grid .sl-l-grid--full .sl-l-large-grid--fit .sl-l-large-grid--gutters-large .sl-l-large-grid--center .sl-background--midnight-blue}
|
||||
|
||||
### Black
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
- {height=80} {.sl-l-grid__column}
|
||||
- {height=80} {.sl-l-grid__column}
|
||||
{.sl-l-grid .sl-l-grid--full .sl-l-large-grid--fit .sl-l-large-grid--gutters-large .sl-l-large-grid--center}
|
||||
11
yarn.lock
11
yarn.lock
@ -5033,6 +5033,15 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"markdown-it-attrs@npm:^4.1.6":
|
||||
version: 4.1.6
|
||||
resolution: "markdown-it-attrs@npm:4.1.6"
|
||||
peerDependencies:
|
||||
markdown-it: ">= 9.0.0"
|
||||
checksum: 3487fab315a5955f1882edcb29b5362fcdc9a369c4cd1c38688b3d32a145254094d2d8389bdd6887c3af66f9a9a75143f167d88421dcf201e54ec587675756a0
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"markdown-it-deflist@npm:^2.1.0":
|
||||
version: 2.1.0
|
||||
resolution: "markdown-it-deflist@npm:2.1.0"
|
||||
@ -6481,6 +6490,8 @@ __metadata:
|
||||
js-yaml: ^4.1.0
|
||||
kleur: ^4.1.5
|
||||
lorem-ipsum: ^2.0.8
|
||||
markdown-it: ^13.0.1
|
||||
markdown-it-attrs: ^4.1.6
|
||||
markdown-it-deflist: ^2.1.0
|
||||
netlify-plugin-11ty: ^1.3.0
|
||||
npm-run-all: ^4.1.5
|
||||
|
||||
Loading…
Reference in New Issue
Block a user