SoakersUtah Hot Tub Dealership2024-01-05T20:47:29Zhttps://soakers.bizSoakers.bizAbout2024-01-05T20:47:29Zhttps://soakers.biz/about/<h2 id="intro-to-jumpstart" tabindex="-1">Intro to Jumpstart<a class="tdbc-anchor" href="https://soakers.biz/about/#intro-to-jumpstart">#</a></h2>
<p>This jumpstart is intended to be <em>just enough</em> to be a functional site/blog using 11ty, and also to introduce essential 11ty features.</p>
<p><a href="https://soakers.biz/#quickstart"><strong>Review the "Quick Start"</strong></a> on the home page for how to get this starter up and running for your project.</p>
<h3 id="colophon" tabindex="-1">Colophon<a class="tdbc-anchor" href="https://soakers.biz/about/#colophon">#</a></h3>
<p>Hi, I'm Stephanie Eckles - @5t3ph on <a href="https://twitter.com/5t3ph">Twitter</a>, <a href="https://github.com/5t3ph">Github</a>, <a href="https://codepen.com/5t3ph">CodePen</a>, and <a href="https://dev.to/5t3ph">DEV</a>. You may know me as the author of <a href="https://moderncss.dev/">ModernCSS.dev</a> or the creator of <a href="https://stylestage.dev/">StyleStage.dev</a>. I can also be found on <a href="https://egghead.io/instructors/stephanie-eckles?af=2s65ms">egghead as an instructor</a>.</p>
<p>I spent a decade creating WordPress themes and plugins then flipped to product development + leading development of a multi-platform enterprise design system. My intro to JAMstack was with Gatsby, but 11ty fills a special place that is so needed for truly static sites. I'm in love, and I think you will be, too.</p>
<h3 id="jump-to" tabindex="-1">Jump to:<a class="tdbc-anchor" href="https://soakers.biz/about/#jump-to">#</a></h3>
<ul>
<li><a href="https://soakers.biz/about/#global-site-data-and-env">Global Site Data and .env</a></li>
<li><a href="https://soakers.biz/about/#template-languages-used">Template Languages Used</a></li>
<li><a href="https://soakers.biz/about/#layout-hierarchy-and-features">Layout Hierarchy and Features</a></li>
<li><a href="https://soakers.biz/about/#expected-frontmatter">Expected Frontmatter</a></li>
<li><a href="https://soakers.biz/about/#permalink-style">Permalink Style</a></li>
<li><a href="https://soakers.biz/about/#asset-handling">Asset Handling</a></li>
<li><a href="https://soakers.biz/about/#linting">Linting</a></li>
<li><a href="https://soakers.biz/about/#sass-framework">Sass Framework</a></li>
<li><a href="https://soakers.biz/about/#anchor-links">Anchor links</a></li>
<li><a href="https://soakers.biz/about/#sitemap">Sitemap</a></li>
<li><a href="https://soakers.biz/about/#rss-feed">RSS Feed</a></li>
<li><a href="https://soakers.biz/about/#social-share-preview-images">Social Share Preview Images</a></li>
<li><a href="https://soakers.biz/about/#prism-syntax-highlighting">Prism Syntax Highlighting</a></li>
<li><a href="https://soakers.biz/about/#eleventyjs-config-features">.eleventy.js Config Features</a></li>
<li><a href="https://soakers.biz/about/#vscode-tips">VSCode Tips</a></li>
</ul>
<h2 id="global-site-data-and-env" tabindex="-1">Global Site Data and .env<a class="tdbc-anchor" href="https://soakers.biz/about/#global-site-data-and-env">#</a></h2>
<p>As noted in the <a href="https://soakers.biz/#quickstart">Quick Start</a>, there are global site data variables in <code>src/_data/meta.json</code>.</p>
<p>Those include:</p>
<ul>
<li><code>url</code> - should remain unchanged, reads from the single expected <code>.env</code> value of <code>URL</code></li>
<li><code>siteName</code> - your "brand" if you will, appended to the <code><title></code> tag, shown in the <code>sitenav</code>, displayed in the "hero" for the <code>home</code> layout, in the footer by the copyright, as the "credit" for social share images, and as the identifier throughout the RSS feed</li>
<li><code>siteDescription</code> - used in the "description" meta tag, and below the <code>siteName</code> on the <code>home</code> layout</li>
<li><code>authorName</code> - Used in the RSS feed, intended to be your full name</li>
<li><code>twitterUsername</code> - without the "@", this value is used for the Twitter meta tags, and for the URL of the icon link in the footer</li>
</ul>
<h3 id="env" tabindex="-1">.env<a class="tdbc-anchor" href="https://soakers.biz/about/#env">#</a></h3>
<p>See <code>.env-sample</code> for the single expected value of <code>URL</code> which should be set to your localhost. The sample uses the default 11ty port, so you can simply rename the file to <code>.env</code> if you haven't changed the port.</p>
<p>The <code>URL</code> value is then available via the global data described previously, and can be used in templates with <code>meta.url</code>. You can see this used for the RSS feed and sitemap as well as meta tag links to the social share preview images to create the absolute URLs.</p>
<h2 id="template-languages-used" tabindex="-1">Template Languages Used<a class="tdbc-anchor" href="https://soakers.biz/about/#template-languages-used">#</a></h2>
<p>Page templates are created as Nunjucks (.njk), and feature are added that expect Markdown for most page content.</p>
<p>The home page - <code>_includes/home.njk</code> - is set to process first as Markdown followed by Nunjucks. This allows mixing HTML with Markdown, with benefits being code syntax highlighting and ability to include classes on HTML elements. This functionality is provided by the <code>templateEngineOverride: md, njk</code> in the frontmatter.</p>
<p>A unique case uses Nunjucks to create the <code>json</code> that is used to generate the <a href="https://soakers.biz/about/#social-share-preview-images">social share preview images</a>.</p>
<p>Review the list of <a href="https://www.11ty.dev/docs/languages/">available templating languages</a> in the 11ty docs.</p>
<h2 id="layout-hierarchy-and-features" tabindex="-1">Layout Hierarchy and Features<a class="tdbc-anchor" href="https://soakers.biz/about/#layout-hierarchy-and-features">#</a></h2>
<p>There are two layouts + a base for those, and one partial included.</p>
<p>The <code>base.njk</code> layout receives both the <code>home.njk</code> layout and the <code>page.njk</code> layout.</p>
<p><code>base.njk</code> includes the standard HTML boilerplate including meta and "og" tags in <code><head></code>.</p>
<p><code>page.njk</code> includes the <code>sitenav.njk</code> partial.</p>
<p><code>home.njk</code> includes a loop that will create "cards" for everything in <code>collections.pages</code>.</p>
<h2 id="expected-frontmatter" tabindex="-1">Expected Frontmatter<a class="tdbc-anchor" href="https://soakers.biz/about/#expected-frontmatter">#</a></h2>
<p>There are only two fields expected:</p>
<ul>
<li><code>title</code> - essentially required, by default is used in the page <code><title></code>, in the layout "hero", in social share preview images, and in social share meta tags.</li>
<li><code>description</code> - optional, by default appears below the title for the <code>page</code> template and is used as for the "description" meta tag and social share meta tag descriptions.</li>
</ul>
<h2 id="permalink-style" tabindex="-1">Permalink Style<a class="tdbc-anchor" href="https://soakers.biz/about/#permalink-style">#</a></h2>
<p>The default setup expects content - using any template language - within <code>pages/</code>.</p>
<p>The <code>pages.json</code> in that directory includes a <code>permalink</code> setting so that the file name is used directly to prevent 'pages' being the base of the URL.</p>
<p>You can <a href="https://www.11ty.dev/docs/permalinks/">override permalinks per file</a>.</p>
<h2 id="asset-handling" tabindex="-1">Asset Handling<a class="tdbc-anchor" href="https://soakers.biz/about/#asset-handling">#</a></h2>
<p>In the <code>.eleventy.js</code> config, there are included "pass-throughs" for an <code>img/</code> directory as well as <code>favicon.png</code>.</p>
<p>You can replace the included favicon, and create an <code>img</code> directory or remove the <code>addPassthroughCopy</code> if you do not have need of images.</p>
<p>Creating an <code>img</code> directory and keeping the pass-through directive will make images available at <code>/img/[image-file-path]</code> relative to the site root.</p>
<h2 id="linting" tabindex="-1">Linting<a class="tdbc-anchor" href="https://soakers.biz/about/#linting">#</a></h2>
<p>For Sass, <a href="https://stylelint.io/">stylelint</a> is included. If you want to keep it, you may want to do a find/replace for <code>tdbc</code> to the prefix of your choice. If not, you'll want to remove the related files at the project root as well as the related items in the <code>package.json</code>.</p>
<p>A <code>prettier</code> config is included, with the only update being <code>printWidth: 100</code>.</p>
<h2 id="sass-framework" tabindex="-1">Sass Framework<a class="tdbc-anchor" href="https://soakers.biz/about/#sass-framework">#</a></h2>
<p>Review the <a href="https://5t3ph.github.io/html-sass-jumpstart/">styling documentation</a> for the included minimal Sass framework, particularly the theme variables, to quickly customize the starter.</p>
<p>The only notable differences are:</p>
<ol>
<li><code>sitenav</code> - adjust the styles for the navigation header that appears on pages</li>
<li><code>tdbc-anchor</code> - styles for the <code>#</code> anchor that appears next to page headings (<a href="https://soakers.biz/about/#anchor-links">or turn that feature off</a>) can be adjusted in <code>sass/_utilities</code></li>
<li>Additional <code>article</code>-scoped styling for typography as it appears on <code>pages</code></li>
<li>A theme for the <a href="https://soakers.biz/about/#prism-syntax-highlighting"><code>prism</code> syntax highlighting</a> for code blocks. You can adjust or replace the theme in <code>sass/_prism</code>.</li>
</ol>
<h3 id="fonts" tabindex="-1">Fonts<a class="tdbc-anchor" href="https://soakers.biz/about/#fonts">#</a></h3>
<p>The default font is <a href="https://fonts.google.com/specimen/Baloo+2">Baloo 2</a> and is locally hosted with files in <code>fonts/</code>. If you swap to a different font, be sure to remove the font files as well as the <code>@font-face</code> rules at the top of <code>sass/style.scss</code>, and update the <code>$tdbc-font-family</code> Sass variable.</p>
<h2 id="anchor-links" tabindex="-1">Anchor Links<a class="tdbc-anchor" href="https://soakers.biz/about/#anchor-links">#</a></h2>
<p>Anchor links next to headings throughout Markdown content are generated by an add-on plugin for <code>markdownIt</code>.</p>
<p>This feature can be adjusted or removed in the <code>.eleventy.js</code> config file.</p>
<h2 id="generated-features" tabindex="-1">Generated Features<a class="tdbc-anchor" href="https://soakers.biz/about/#generated-features">#</a></h2>
<h3 id="sitemap" tabindex="-1">Sitemap<a class="tdbc-anchor" href="https://soakers.biz/about/#sitemap">#</a></h3>
<p>A <code>sitemap.xml</code> is generated from all available content.</p>
<p>To exclude non-page or non-public content from the sitemap, include <code>eleventyExcludeFromCollections: true</code> in frontmatter, or <a href="https://www.11ty.dev/docs/collections/#advanced-custom-filtering-and-sorting">create a custom filter</a>.</p>
<h3 id="rss-feed" tabindex="-1">RSS Feed<a class="tdbc-anchor" href="https://soakers.biz/about/#rss-feed">#</a></h3>
<p>An RSS feed is included, and output at <code>[siteurl]/feed/feed.xml</code>.</p>
<p>If publishing from Netlify, the included <code>netlify.toml</code> file will create a redirect so that the feed becomes available at <code>[siteurl]/feed</code>.</p>
<h3 id="social-share-preview-images" tabindex="-1">Social Share Preview Images<a class="tdbc-anchor" href="https://soakers.biz/about/#social-share-preview-images">#</a></h3>
<p>Upon use of the build command, social share preview images are generated for each page + the home page, and available in <code>public/previews/[title-as-slug].png</code>.</p>
<p>Here's an example of the default template:</p>
<p><img src="https://soakers.biz/previews/hello-world.png" alt="default social share preview image template" /></p>
<p>For technical details on how this is generated, <a href="https://dev.to/5t3ph/automated-social-sharing-images-with-puppeteer-11ty-and-netlify-22ln">review my article on DEV</a>.</p>
<p>Any changes made can be previewed by running the build command and reviewing the contents of <code>public/previews/</code>.</p>
<h4>Update template HTML</h4>
<p>HTML can be changed in <code>_generate/social-previews.njk</code></p>
<h4>Update template style</h4>
<p>An isolated, slimmed down stylesheet is created for the template: <code>sass/social-previews.scss</code></p>
<h4>Change included pages OR available data</h4>
<p>Adjust the collections loop in <code>_generate/pagesjson.liquid</code></p>
<h2 id="prism-syntax-highlighting" tabindex="-1">Prism Syntax Highlighting<a class="tdbc-anchor" href="https://soakers.biz/about/#prism-syntax-highlighting">#</a></h2>
<p>Syntax highlighting of inline or code blocks found within Markdown content is provided by Prism via <code>@11ty/eleventy-plugin-syntaxhighlight</code>.</p>
<p>You can change the theme used in <code>sass/_prism.scss</code>.</p>
<p>Or, remove the plugin if you are not in need of code highlighting.</p>
<h2 id="eleventyjs-config-features" tabindex="-1">.eleventy.js Config Features<a class="tdbc-anchor" href="https://soakers.biz/about/#eleventyjs-config-features">#</a></h2>
<h3 id="overrides" tabindex="-1">Overrides<a class="tdbc-anchor" href="https://soakers.biz/about/#overrides">#</a></h3>
<p><strong>Input directory</strong>: <code>src</code></p>
<p><strong>Output directory</strong>: <code>public</code></p>
<p>Also, <code>markdownLibrary</code> is extended to add the <code>markdownItAnchor</code> plugin for <a href="https://soakers.biz/about/#anchor-links">anchor links</a>.</p>
<h3 id="shortcode-year" tabindex="-1">Shortcode: <code>year</code><a class="tdbc-anchor" href="https://soakers.biz/about/#shortcode-year">#</a></h3>
<p>Returns the current <code>YYYY</code> year, used by the footer copyright.</p>
<h3 id="filter-slug" tabindex="-1">Filter: <code>slug</code><a class="tdbc-anchor" href="https://soakers.biz/about/#filter-slug">#</a></h3>
<p>Extends the default slug function to also:</p>
<ul>
<li>remove emojis</li>
<li>expand list of characters to remove</li>
</ul>
<h3 id="filter-jsontitle" tabindex="-1">Filter: <code>jsonTitle</code><a class="tdbc-anchor" href="https://soakers.biz/about/#filter-jsontitle">#</a></h3>
<p>Used in <code>_generate/pagesjson.liquid</code> to ensure titles are escaped, and also applies non-breaking spaces to the last three words to prevent orphans in preview images.</p>
<h2 id="vscode-tips" tabindex="-1">VSCode Tips<a class="tdbc-anchor" href="https://soakers.biz/about/#vscode-tips">#</a></h2>
<h3 id="nunjucks" tabindex="-1">Nunjucks<a class="tdbc-anchor" href="https://soakers.biz/about/#nunjucks">#</a></h3>
<p>If you haven't previously worked with Nunjucks, you will want a syntax highlighting extension: <a href="https://marketplace.visualstudio.com/items?itemName=ronnidc.nunjucks">Nunjucks</a></p>
<p>In addition, you may want to ensure Emmet works on <code>.njk</code> files by updating/adding the following in the <code>settings.json</code>:</p>
<pre class="language-json"><code class="language-json"><span class="token property">"emmet.includeLanguages"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token property">"nunjucks"</span><span class="token operator">:</span> <span class="token string">"html"</span><span class="token punctuation">,</span><br /><span class="token punctuation">}</span><span class="token punctuation">,</span></code></pre>
<h3 id="formatting" tabindex="-1">Formatting<a class="tdbc-anchor" href="https://soakers.biz/about/#formatting">#</a></h3>
<p>As noted previously, a <code>prettier</code> config is included, and you may want to get the
Prettier extension and update your VSCode settings to "Format on Save".</p>
<p>However, to format template files Prettier doesn't recognize like <code>.njk</code>, you can update the "Language Mode" on the currently open file from "Nunjucks" (or other current templating language) to "HTML" to allow formatting to be applied. Then, flip it back to re-allow the syntax highlighting if needed.</p>
<p>This is located in the VSCode bottom toolbar near the right-hand side and will display the value of the current file's detected language. Click the name to open the selector.</p>
Hello World2024-01-05T20:47:29Zhttps://soakers.biz/helloworld/<blockquote>
<p>Credit for the kitchen sink elements to the <a href="https://github.com/pmarsceill/just-the-docs">"Just the Docs"</a> project by <a href="https://github.com/pmarsceill">pmarsceill</a>.</p>
</blockquote>
<h1 id="header-1" tabindex="-1">Header 1<a class="tdbc-anchor" href="https://soakers.biz/helloworld/#header-1">#</a></h1>
<p>This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.</p>
<p>Text can be <strong>bold</strong>, <em>italic</em>, or <s>strikethrough</s>.</p>
<p><a href="https://soakers.biz/about">Link to another page</a>.</p>
<h2 id="header-2" tabindex="-1">Header 2<a class="tdbc-anchor" href="https://soakers.biz/helloworld/#header-2">#</a></h2>
<blockquote>
<p>This is a blockquote following a header.</p>
<p>When something is important enough, you do it even if the odds are not in your favor.</p>
</blockquote>
<h3 id="header-3" tabindex="-1">Header 3<a class="tdbc-anchor" href="https://soakers.biz/helloworld/#header-3">#</a></h3>
<pre class="language-js"><code class="language-js"><span class="token comment">// Javascript code with syntax highlighting.</span><br /><span class="token keyword">var</span> <span class="token function-variable function">fun</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">lang</span><span class="token punctuation">(</span><span class="token parameter">l</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> dateformat<span class="token punctuation">.</span>i18n <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"./lang/"</span> <span class="token operator">+</span> l<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<pre class="language-ruby"><code class="language-ruby"><span class="token comment"># Ruby code with syntax highlighting</span><br />GitHubPages<span class="token double-colon punctuation">::</span>Dependencies<span class="token punctuation">.</span>gems<span class="token punctuation">.</span><span class="token keyword">each</span> <span class="token keyword">do</span> <span class="token operator">|</span>gem<span class="token punctuation">,</span> version<span class="token operator">|</span><br /> s<span class="token punctuation">.</span>add_dependency<span class="token punctuation">(</span>gem<span class="token punctuation">,</span> <span class="token string-literal"><span class="token string">"= </span><span class="token interpolation"><span class="token delimiter punctuation">#{</span><span class="token content">version</span><span class="token delimiter punctuation">}</span></span><span class="token string">"</span></span><span class="token punctuation">)</span><br /><span class="token keyword">end</span></code></pre>
<pre><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.
</code></pre>
<h4>Header 4</h4>
<ul>
<li>This is an unordered list following a header.</li>
<li>This is an unordered list following a header.</li>
<li>This is an unordered list following a header.</li>
</ul>
<h5>Header 5</h5>
<ol>
<li>This is an ordered list following a header.</li>
<li>This is an ordered list following a header.</li>
<li>This is an ordered list following a header.</li>
</ol>
<h3 id="theres-a-horizontal-rule-below-this" tabindex="-1">There's a horizontal rule below this.<a class="tdbc-anchor" href="https://soakers.biz/helloworld/#theres-a-horizontal-rule-below-this">#</a></h3>
<hr />
<h3 id="here-is-an-unordered-list" tabindex="-1">Here is an unordered list:<a class="tdbc-anchor" href="https://soakers.biz/helloworld/#here-is-an-unordered-list">#</a></h3>
<ul>
<li>Item foo</li>
<li>Item bar</li>
<li>Item baz</li>
<li>Item zip</li>
</ul>
<h3 id="and-an-ordered-list" tabindex="-1">And an ordered list:<a class="tdbc-anchor" href="https://soakers.biz/helloworld/#and-an-ordered-list">#</a></h3>
<ol>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
</ol>
<h3 id="and-a-nested-list" tabindex="-1">And a nested list:<a class="tdbc-anchor" href="https://soakers.biz/helloworld/#and-a-nested-list">#</a></h3>
<ul>
<li>level 1 item
<ul>
<li>level 2 item</li>
<li>level 2 item
<ul>
<li>level 3 item</li>
<li>level 3 item</li>
</ul>
</li>
</ul>
</li>
<li>level 1 item
<ul>
<li>level 2 item</li>
<li>level 2 item</li>
<li>level 2 item</li>
</ul>
</li>
<li>level 1 item
<ul>
<li>level 2 item</li>
<li>level 2 item</li>
</ul>
</li>
<li>level 1 item</li>
</ul>
<h3 id="small-image" tabindex="-1">Small Image<a class="tdbc-anchor" href="https://soakers.biz/helloworld/#small-image">#</a></h3>
<p><img src="https://picsum.photos/200" alt="" /></p>
<h3 id="large-image" tabindex="-1">Large image<a class="tdbc-anchor" href="https://soakers.biz/helloworld/#large-image">#</a></h3>
<p><img src="https://picsum.photos/800/300" alt="" /></p>
Artesian Elite2024-01-05T20:47:29Zhttps://soakers.biz/artesian-elite/<iframe width="1170" height="658" src="https://www.youtube.com/embed/UwbykPlSR-I" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
test index2024-01-05T20:47:29Zhttps://soakers.biz/spa-models/<p>foo bar</p>