mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-14 10:06:04 +02:00
Code Issues Releases Wiki Activity

feat: Add pattern shortcode

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-20 16:28:15 +07:00
parent 9ed4eebe82
commit 59c302c11e
2 changed files with 63 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
.eleventy.js
View File

@@ -27,6 +27,15 @@ module.exports = function(eleventyConfig) {
<div class="example__content example__content--medium">${content}</div>
</div>`;
});
eleventyConfig.addPairedShortcode('pattern', function(content, name) {
const href = `/${name.toLowerCase().split(' ').join('-')}/`;
return `<div class="pattern__item">
<a class="pattern__link" href="${href}">
<div class="pattern__cover">${content}</div>
<div class="pattern__title">${name}</div>
</a>
</div>`;
});
// `size` can be `sm`, `md`, `lg`
eleventyConfig.addShortcode('circle', function(size) {

373
contents/index.njk
View File

@@ -12,325 +12,60 @@ eleventyExcludeFromCollections: true
<div class="category">
<h2 class="category__name">Display</h2>
<div class="category__posts">
<div class="pattern__item">
<a class="pattern__link" href="/accordion/">
<div class="pattern__cover">{% include "patterns/accordion.njk" %}</div>
<div class="pattern__title">Accordion</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/arrow-buttons/">
<div class="pattern__cover">{% include "patterns/arrow-buttons.njk" %}</div>
<div class="pattern__title">Arrow buttons</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/avatar/">
<div class="pattern__cover">{% include "patterns/avatar.njk" %}</div>
<div class="pattern__title">Avatar</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/avatar-list/">
<div class="pattern__cover">{% include "patterns/avatar-list.njk" %}</div>
<div class="pattern__title">Avatar list</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/badge/">
<div class="pattern__cover">{% include "patterns/badge.njk" %}</div>
<div class="pattern__title">Badge</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/card/">
<div class="pattern__cover">{% include "patterns/card.njk" %}</div>
<div class="pattern__title">Card</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/centering/">
<div class="pattern__cover">{% include "patterns/centering.njk" %}</div>
<div class="pattern__title">Centering</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/close-button/">
<div class="pattern__cover">{% include "patterns/close-button.njk" %}</div>
<div class="pattern__title">Close button</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/color-swatch/">
<div class="pattern__cover">{% include "patterns/color-swatch.njk" %}</div>
<div class="pattern__title">Color swatch</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/concave-corners/">
<div class="pattern__cover">{% include "patterns/concave-corners.njk" %}</div>
<div class="pattern__title">Concave corners</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/cookie-banner/">
<div class="pattern__cover">{% include "patterns/cookie-banner.njk" %}</div>
<div class="pattern__title">Cookie banner</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/corner-ribbon/">
<div class="pattern__cover">{% include "patterns/corner-ribbon.njk" %}</div>
<div class="pattern__title">Corner ribbon</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/curved-background/">
<div class="pattern__cover">{% include "patterns/curved-background.njk" %}</div>
<div class="pattern__title">Curved background</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/diagonal-section/">
<div class="pattern__cover">{% include "patterns/diagonal-section.njk" %}</div>
<div class="pattern__title">Diagonal section</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/docked-at-corner/">
<div class="pattern__cover">{% include "patterns/docked-at-corner.njk" %}</div>
<div class="pattern__title">Docked at corner</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/dot-leader/">
<div class="pattern__cover">{% include "patterns/dot-leader.njk" %}</div>
<div class="pattern__title">Dot leader</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/drop-area/">
<div class="pattern__cover">{% include "patterns/drop-area.njk" %}</div>
<div class="pattern__title">Drop area</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/drop-cap/">
<div class="pattern__cover">{% include "patterns/drop-cap.njk" %}</div>
<div class="pattern__title">Drop cap</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/fading-long-section/">
<div class="pattern__cover">{% include "patterns/fading-long-section.njk" %}</div>
<div class="pattern__title">Fading long section</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/feature-comparison/">
<div class="pattern__cover">{% include "patterns/feature-comparison.njk" %}</div>
<div class="pattern__title">Feature comparison</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/feature-list/">
<div class="pattern__cover">{% include "patterns/feature-list.njk" %}</div>
<div class="pattern__title">Feature list</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/fixed-at-corner/">
<div class="pattern__cover">{% include "patterns/fixed-at-corner.njk" %}</div>
<div class="pattern__title">Fixed at corner</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/fixed-at-side/">
<div class="pattern__cover">{% include "patterns/fixed-at-side.njk" %}</div>
<div class="pattern__title">Fixed at side</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/folder-structure/">
<div class="pattern__cover">{% include "patterns/folder-structure.njk" %}</div>
<div class="pattern__title">Folder structure</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/full-background/">
<div class="pattern__cover">{% include "patterns/full-background.njk" %}</div>
<div class="pattern__title">Full background</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/initial-avatar/">
<div class="pattern__cover">{% include "patterns/initial-avatar.njk" %}</div>
<div class="pattern__title">Initial avatar</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/inverted-corners/">
<div class="pattern__cover">{% include "patterns/inverted-corners.njk" %}</div>
<div class="pattern__title">Inverted corners</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/keyboard-shortcut/">
<div class="pattern__cover">{% include "patterns/keyboard-shortcut.njk" %}</div>
<div class="pattern__title">Keyboard shortcut</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/layered-card/">
<div class="pattern__cover">{% include "patterns/layered-card.njk" %}</div>
<div class="pattern__title">Layered card</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/lined-paper/">
<div class="pattern__cover">{% include "patterns/lined-paper.njk" %}</div>
<div class="pattern__title">Lined paper</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/media-object/">
<div class="pattern__cover">{% include "patterns/media-object.njk" %}</div>
<div class="pattern__title">Media object</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/overlay-play-button/">
<div class="pattern__cover">{% include "patterns/overlay-play-button.njk" %}</div>
<div class="pattern__title">Overlay play button</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/price-tag/">
<div class="pattern__cover">{% include "patterns/price-tag.njk" %}</div>
<div class="pattern__title">Price tag</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/pricing-table/">
<div class="pattern__cover">{% include "patterns/pricing-table.njk" %}</div>
<div class="pattern__title">Pricing table</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/property-list/">
<div class="pattern__cover">{% include "patterns/property-list.njk" %}</div>
<div class="pattern__title">Property list</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/questions-and-answers/">
<div class="pattern__cover">{% include "patterns/questions-and-answers.njk" %}</div>
<div class="pattern__title">Questions and answers</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/ribbon/">
<div class="pattern__cover">{% include "patterns/ribbon.njk" %}</div>
<div class="pattern__title">Ribbon</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/separator/">
<div class="pattern__cover">{% include "patterns/separator.njk" %}</div>
<div class="pattern__title">Separator</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/stacked-cards/">
<div class="pattern__cover">{% include "patterns/stacked-cards.njk" %}</div>
<div class="pattern__title">Stacked cards</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/stamp-border/">
<div class="pattern__cover">{% include "patterns/stamp-border.njk" %}</div>
<div class="pattern__title">Stamp border</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/statistic/">
<div class="pattern__cover">{% include "patterns/statistic.njk" %}</div>
<div class="pattern__title">Statistic</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/status-light/">
<div class="pattern__cover">{% include "patterns/status-light.njk" %}</div>
<div class="pattern__title">Status light</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/sticky-table-column/">
<div class="pattern__cover">{% include "patterns/sticky-table-column.njk" %}</div>
<div class="pattern__title">Sticky table column</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/sticky-table-headers/">
<div class="pattern__cover">{% include "patterns/sticky-table-headers.njk" %}</div>
<div class="pattern__title">Sticky table headers</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/teardrop/">
<div class="pattern__cover">{% include "patterns/teardrop.njk" %}</div>
<div class="pattern__title">Teardrop</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/three-dimensions-card/">
<div class="pattern__cover">{% include "patterns/three-dimensions-card.njk" %}</div>
<div class="pattern__title">Three dimensions card</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/timeline/">
<div class="pattern__cover">{% include "patterns/timeline.njk" %}</div>
<div class="pattern__title">Timeline</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/tree-diagram/">
<div class="pattern__cover">{% include "patterns/tree-diagram.njk" %}</div>
<div class="pattern__title">Tree diagram</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/triangle-buttons/">
<div class="pattern__cover">{% include "patterns/triangle-buttons.njk" %}</div>
<div class="pattern__title">Triangle buttons</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/video-background/">
<div class="pattern__cover">{% include "patterns/video-background.njk" %}</div>
<div class="pattern__title">Video background</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/voting/">
<div class="pattern__cover">{% include "patterns/voting.njk" %}</div>
<div class="pattern__title">Voting</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/watermark/">
<div class="pattern__cover">{% include "patterns/watermark.njk" %}</div>
<div class="pattern__title">Watermark</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/zigzag-timeline/">
<div class="pattern__cover">{% include "patterns/zigzag-timeline.njk" %}</div>
<div class="pattern__title">Zigzag timeline</div>
</a>
</div>
<div class="category__posts">
{% pattern "Accordion" %}{% include "patterns/accordion.njk" %}{% endpattern %}
{% pattern "Arrow buttons" %}{% include "patterns/arrow-buttons.njk" %}{% endpattern %}
{% pattern "Avatar" %}{% include "patterns/avatar.njk" %}{% endpattern %}
{% pattern "Avatar list" %}{% include "patterns/avatar-list.njk" %}{% endpattern %}
{% pattern "Badge" %}{% include "patterns/badge.njk" %}{% endpattern %}
{% pattern "Card" %}{% include "patterns/card.njk" %}{% endpattern %}
{% pattern "Centering" %}{% include "patterns/centering.njk" %}{% endpattern %}
{% pattern "Close button" %}{% include "patterns/close-button.njk" %}{% endpattern %}
{% pattern "Color swatch" %}{% include "patterns/color-swatch.njk" %}{% endpattern %}
{% pattern "Concave corners" %}{% include "patterns/concave-corners.njk" %}{% endpattern %}
{% pattern "Cookie banner" %}{% include "patterns/cookie-banner.njk" %}{% endpattern %}
{% pattern "Corner ribbon" %}{% include "patterns/corner-ribbon.njk" %}{% endpattern %}
{% pattern "Curved background" %}{% include "patterns/curved-background.njk" %}{% endpattern %}
{% pattern "Diagonal section" %}{% include "patterns/diagonal-section.njk" %}{% endpattern %}
{% pattern "Docked at corner" %}{% include "patterns/docked-at-corner.njk" %}{% endpattern %}
{% pattern "Dot leader" %}{% include "patterns/dot-leader.njk" %}{% endpattern %}
{% pattern "Drop area" %}{% include "patterns/drop-area.njk" %}{% endpattern %}
{% pattern "Drop cap" %}{% include "patterns/drop-cap.njk" %}{% endpattern %}
{% pattern "Fading long section" %}{% include "patterns/fading-long-section.njk" %}{% endpattern %}
{% pattern "Feature comparison" %}{% include "patterns/feature-comparison.njk" %}{% endpattern %}
{% pattern "Feature list" %}{% include "patterns/feature-list.njk" %}{% endpattern %}
{% pattern "Fixed at corner" %}{% include "patterns/fixed-at-corner.njk" %}{% endpattern %}
{% pattern "Fixed at side" %}{% include "patterns/fixed-at-side.njk" %}{% endpattern %}
{% pattern "Folder structure" %}{% include "patterns/folder-structure.njk" %}{% endpattern %}
{% pattern "Full background" %}{% include "patterns/full-background.njk" %}{% endpattern %}
{% pattern "Initial avatar" %}{% include "patterns/initial-avatar.njk" %}{% endpattern %}
{% pattern "Inverted corners" %}{% include "patterns/inverted-corners.njk" %}{% endpattern %}
{% pattern "Keyboard shortcut" %}{% include "patterns/keyboard-shortcut.njk" %}{% endpattern %}
{% pattern "Layered card" %}{% include "patterns/layered-card.njk" %}{% endpattern %}
{% pattern "Lined paper" %}{% include "patterns/lined-paper.njk" %}{% endpattern %}
{% pattern "Media object" %}{% include "patterns/media-object.njk" %}{% endpattern %}
{% pattern "Overlay play button" %}{% include "patterns/overlay-play-button.njk" %}{% endpattern %}
{% pattern "Price tag" %}{% include "patterns/price-tag.njk" %}{% endpattern %}
{% pattern "Pricing table" %}{% include "patterns/pricing-table.njk" %}{% endpattern %}
{% pattern "Property list" %}{% include "patterns/property-list.njk" %}{% endpattern %}
{% pattern "Questions and answers" %}{% include "patterns/questions-and-answers.njk" %}{% endpattern %}
{% pattern "Ribbon" %}{% include "patterns/ribbon.njk" %}{% endpattern %}
{% pattern "Separator" %}{% include "patterns/separator.njk" %}{% endpattern %}
{% pattern "Stacked cards" %}{% include "patterns/stacked-cards.njk" %}{% endpattern %}
{% pattern "Stamp border" %}{% include "patterns/stamp-border.njk" %}{% endpattern %}
{% pattern "Statistic" %}{% include "patterns/statistic.njk" %}{% endpattern %}
{% pattern "Status light" %}{% include "patterns/status-light.njk" %}{% endpattern %}
{% pattern "Sticky table column" %}{% include "patterns/sticky-table-column.njk" %}{% endpattern %}
{% pattern "Sticky table headers" %}{% include "patterns/sticky-table-headers.njk" %}{% endpattern %}
{% pattern "Teardrop" %}{% include "patterns/teardrop.njk" %}{% endpattern %}
{% pattern "Three dimensions card" %}{% include "patterns/three-dimensions-card.njk" %}{% endpattern %}
{% pattern "Timeline" %}{% include "patterns/timeline.njk" %}{% endpattern %}
{% pattern "Tree diagram" %}{% include "patterns/tree-diagram.njk" %}{% endpattern %}
{% pattern "Triangle buttons" %}{% include "patterns/triangle-buttons.njk" %}{% endpattern %}
{% pattern "Video background" %}{% include "patterns/video-background.njk" %}{% endpattern %}
{% pattern "Voting" %}{% include "patterns/voting.njk" %}{% endpattern %}
{% pattern "Watermark" %}{% include "patterns/Watermark.njk" %}{% endpattern %}
{% pattern "Zigzag timeline" %}{% include "patterns/zigzag-timeline.njk" %}{% endpattern %}
</div>
</div>