Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show Jinja Macro usage in pattern code snippets #5321

Merged
merged 34 commits into from
Sep 19, 2024
Merged

Show Jinja Macro usage in pattern code snippets #5321

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
98a1c7a
Add route for serving raw example template
jmuzina Aug 19, 2024
b448992
Render flask template in HTML code snippet
jmuzina Aug 19, 2024
3209a10
Show rendered/raw example
jmuzina Aug 22, 2024
5daa512
Enable switching between Jinja code snippets and rendered HTML
jmuzina Aug 22, 2024
498347e
Slight example.js docs improvements & refactors
jmuzina Aug 22, 2024
ba05a02
Run prettier
jmuzina Aug 22, 2024
7885811
RM example guide
jmuzina Aug 26, 2024
e0899f1
Switch jinja example trigger from .js-show-template to [data-lang='ji…
jmuzina Aug 28, 2024
6dca5ff
Use raw query parameter instead of `/example` path
jmuzina Aug 28, 2024
1421e27
Syntax-highlight HTML within Jinja template macro calls
jmuzina Aug 29, 2024
2819507
Optional chain to avoid possible null index error
jmuzina Aug 29, 2024
7c1330e
Make HTML the default example language, instead of Jinja
jmuzina Aug 29, 2024
d00ba3a
Simplify example xmlhttprequest check
jmuzina Aug 29, 2024
487238e
Change initializer keywords to `let` or `const`
jmuzina Aug 29, 2024
b6d4944
Move throttle() to a utils function
jmuzina Aug 29, 2024
9871d5c
fix HTML snippets including JS at the bottom
jmuzina Aug 29, 2024
e6834db
Revert "Move throttle() to a utils function"
jmuzina Aug 29, 2024
f750c59
rename `createPreCode` param `hide` to `isHidden`
jmuzina Aug 29, 2024
8370ba5
Reapply "Move throttle() to a utils function"
jmuzina Aug 29, 2024
4cb2f26
swap xmlhttprequest for fetch()
jmuzina Aug 29, 2024
6eff9ca
Moved fetch code from example file into shared utils
jmuzina Aug 29, 2024
cc1ec44
Move utils to window scope, rather than JS import
jmuzina Sep 3, 2024
bdd5fb8
prettier
jmuzina Sep 3, 2024
9821062
set no-cache on raw template endpoint
jmuzina Sep 4, 2024
ee11a59
Re-remove extracted utils functions
jmuzina Sep 4, 2024
3fe03be
replace `let` with `const` where applicable
jmuzina Sep 5, 2024
8d78795
Additional try/catch handler in `fetchResponse()`
jmuzina Sep 5, 2024
e36ca6b
renderdropdown guard
jmuzina Sep 5, 2024
0ace747
promise.all parallelization improvement
jmuzina Sep 5, 2024
b35e115
rename `EXAMPLE_OPTION_CFG` to `EXAMPLE_LANGUAGE_OPTION_CONFIG`
jmuzina Sep 6, 2024
4ebf5e2
Move HTML body extraction functions into `fetchHtmlSource()` and retu…
jmuzina Sep 6, 2024
ff31106
rename `fetchHtmlSource()` to `fetchRenderedHtml()`
jmuzina Sep 6, 2024
c8e32c5
Switch default example language from HTML to jinja if jinja is found
jmuzina Sep 6, 2024
589e9a9
Clean up parallelization per code review
jmuzina Sep 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions templates/docs/patterns/hero/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ This is useful when your hero contents, especially your image, are not suitably
This makes your hero somewhat safer to use, as it helps to avoid awkward content sizing on medium screens, making all
content stack vertically.

<div class="embedded-example"><a href="/docs/examples/patterns/hero/hero-50-50" class="js-example">
<div class="embedded-example"><a href="/docs/examples/patterns/hero/hero-50-50" class="js-example" data-lang="jinja">
View example of the hero pattern in 50/50 split
</a></div>

Expand All @@ -134,7 +134,7 @@ You can use <code>.row--50-50</code> to create a 50/50 hero that is split on lar
This is useful when your available vertical space is limited, and your hero contents are suitably balanced to be viewed
side-by-side on medium screens.

<div class="embedded-example"><a href="/docs/examples/patterns/hero/hero-50-50-split-on-medium" class="js-example">
<div class="embedded-example"><a href="/docs/examples/patterns/hero/hero-50-50-split-on-medium" class="js-example" data-lang="jinja">
View example of the hero pattern in 50/50 that is split on medium and small
</a></div>

Expand All @@ -147,7 +147,7 @@ the first column and place the image in a <code>.p-image-container .is-cover</co
columns.
This will make the image take up the full width of the hero.

<div class="embedded-example"><a href="/docs/examples/patterns/hero/hero-50-50-full-width-image" class="js-example">
<div class="embedded-example"><a href="/docs/examples/patterns/hero/hero-50-50-full-width-image" class="js-example" data-lang="jinja">
View example of the hero pattern in 50/50 split with a full-width image
</a></div>

Expand All @@ -156,15 +156,15 @@ View example of the hero pattern in 50/50 split with a full-width image
If you have a small image that you want to associate with the hero title, you can use the "signpost" layout.
This places the image in a small column beside the primary hero content.

<div class="embedded-example"><a href="/docs/examples/patterns/hero/hero-signpost" class="js-example">
<div class="embedded-example"><a href="/docs/examples/patterns/hero/hero-signpost" class="js-example" data-lang="jinja">
View example of the hero pattern in 50/50 split
</a></div>

This layout also supports a full-width image. Place the image in a <code>.p-image-container .is-cover</code>at the same
level as the hero grid columns to make it take full width beneath the rest of the hero. This is identical to the
full-width image layout for the [50/50 layout](#50-50-with-full-width-image).

<div class="embedded-example"><a href="/docs/examples/patterns/hero/hero-signpost-full-width-image" class="js-example">
<div class="embedded-example"><a href="/docs/examples/patterns/hero/hero-signpost-full-width-image" class="js-example" data-lang="jinja">
View example of the hero pattern in 50/50 split
</a></div>

Expand All @@ -177,7 +177,7 @@ The <code>.row--75-25</code> class is used to maintain the 75/25 split on medium
If you find that the image is too tall on small screens, you can use <code>.u-hide--small</code> to hide the image on
small screens.

<div class="embedded-example"><a href="/docs/examples/patterns/hero/hero-75-25" class="js-example">
<div class="embedded-example"><a href="/docs/examples/patterns/hero/hero-75-25" class="js-example" data-lang="jinja">
View example of the hero pattern in 50/50 split
</a></div>

Expand All @@ -187,7 +187,7 @@ If you have a very large amount of text content that is difficult to balance wit
fallback layout.
This places the title and subtitle in their own row above the rest of the hero content.

<div class="embedded-example"><a href="/docs/examples/patterns/hero/hero-fallback" class="js-example">
<div class="embedded-example"><a href="/docs/examples/patterns/hero/hero-fallback" class="js-example" data-lang="jinja">
View example of the hero pattern in fallback configuration
</a></div>

Expand Down
12 changes: 6 additions & 6 deletions templates/docs/patterns/tiered-list/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ The tiered list pattern is composed of the following elements:
This variant contains a top-level description which is presented side-by-side
with its title on desktop screen sizes.

<div class="embedded-example"><a href="/docs/examples/patterns/tiered-list/50-50-desktop-with-description/" class="js-example">
<div class="embedded-example"><a href="/docs/examples/patterns/tiered-list/50-50-desktop-with-description/" class="js-example" data-lang="jinja">
View example of the tiered list pattern
</a></div>

Expand All @@ -42,7 +42,7 @@ This variant does not contain a top-level description and its child list is
presented with its titles side-by-side with its descriptions on tablet screen
sizes.

<div class="embedded-example"><a href="/docs/examples/patterns/tiered-list/50-50-tablet-without-description/" class="js-example">
<div class="embedded-example"><a href="/docs/examples/patterns/tiered-list/50-50-tablet-without-description/" class="js-example" data-lang="jinja">
View example of the tiered list pattern
</a></div>

Expand All @@ -51,7 +51,7 @@ View example of the tiered list pattern
This variant contains a top-level description and its child list is presented
with its titles side-by-side with its descriptions on tablet screen sizes.

<div class="embedded-example"><a href="/docs/examples/patterns/tiered-list/50-50-tablet-with-description/" class="js-example">
<div class="embedded-example"><a href="/docs/examples/patterns/tiered-list/50-50-tablet-with-description/" class="js-example" data-lang="jinja">
View example of the tiered list pattern
</a></div>

Expand All @@ -61,7 +61,7 @@ This variant contains a top-level description. Its title and description are
presented side-by-side on desktop screen sizes, and its child list is presented
side-by-side on tablet screen sizes.

<div class="embedded-example"><a href="/docs/examples/patterns/tiered-list/50-50-with-description/" class="js-example">
<div class="embedded-example"><a href="/docs/examples/patterns/tiered-list/50-50-with-description/" class="js-example" data-lang="jinja">
View example of the tiered list pattern
</a></div>

Expand All @@ -71,7 +71,7 @@ This variant does not contain a top-level description, and both its title and
child list are presented full-width on desktop and tablet screen sizes
respectively.

<div class="embedded-example"><a href="/docs/examples/patterns/tiered-list/full-width-without-description/" class="js-example">
<div class="embedded-example"><a href="/docs/examples/patterns/tiered-list/full-width-without-description/" class="js-example" data-lang="jinja">
View example of the tiered list pattern
</a></div>

Expand All @@ -81,7 +81,7 @@ This variant contains a top-level description, and its title, description, and
child list are presented full-width on desktop and tablet screen sizes
respectively.

<div class="embedded-example"><a href="/docs/examples/patterns/tiered-list/full-width-with-description/" class="js-example">
<div class="embedded-example"><a href="/docs/examples/patterns/tiered-list/full-width-with-description/" class="js-example" data-lang="jinja">
View example of the tiered list pattern
</a></div>

Expand Down
Loading
Loading