Skip to content

Commit

Permalink
Render new docs
Browse files Browse the repository at this point in the history
  • Loading branch information
ddamato committed Jun 20, 2020
1 parent 255b985 commit 93c3663
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions docs/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<span class="token keyword">const</span> savager <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Savager</span><span class="token punctuation">(</span>symbols<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> assets<span class="token punctuation">,</span> sheet <span class="token punctuation">}</span> <span class="token operator">=</span> savager<span class="token punctuation">.</span><span class="token function">prepareAssets</span><span class="token punctuation">(</span><span class="token string">'balloon'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> assets<span class="token punctuation">.</span>balloon<span class="token punctuation">;</span>
</code></pre><h2 id="external-assets">External Assets</h2><p>When hosting assets externally, they should still be processed first by the <code>create-symbols</code> script. The script will create a manifest which the <code>Savager</code> instance uses to prepare assets.</p><pre class="language-js"><code class="language-js"><span class="token keyword">import</span> Savager <span class="token keyword">from</span> <span class="token string">'savager'</span><span class="token punctuation">;</span> <span class="token comment">/* The constructor */</span>
</code></pre><p>More information about the API can be found on <a href="https://github.com/ddamato/savager">github</a>.</p><h2 id="external-assets">External Assets</h2><p>When hosting assets externally, they should still be processed first by the <code>create-symbols</code> script. The script will create a manifest which the <code>Savager</code> instance uses to prepare assets.</p><pre class="language-js"><code class="language-js"><span class="token keyword">import</span> Savager <span class="token keyword">from</span> <span class="token string">'savager'</span><span class="token punctuation">;</span> <span class="token comment">/* The constructor */</span>
<span class="token keyword">import</span> symbols <span class="token keyword">from</span> <span class="token string">'./manifest.js'</span><span class="token punctuation">;</span> <span class="token comment">/* manifest.js, created from the `create-symbols` script */</span>
</code></pre><p>The assets created should be the ones hosted externally. Savager will then construct the urls based on the <code>externalPath</code> option provided. It's probably best to set this in the constructor options.</p><pre class="language-js"><code class="language-js"><span class="token keyword">import</span> Savager <span class="token keyword">from</span> <span class="token string">'savager'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> symbols <span class="token keyword">from</span> <span class="token string">'./manifest.js'</span><span class="token punctuation">;</span>
Expand Down Expand Up @@ -35,7 +35,7 @@
<span class="token keyword">const</span> savager <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Savager</span><span class="token punctuation">(</span>symbols<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> assets <span class="token punctuation">}</span> <span class="token operator">=</span> savager<span class="token punctuation">.</span><span class="token function">prepareAssets</span><span class="token punctuation">(</span>assetNames<span class="token punctuation">)</span><span class="token punctuation">;</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> assets<span class="token punctuation">.</span>balloon<span class="token punctuation">;</span> <span class="token comment">// Now includes accessibility features</span>
</code></pre><p>This also allows for an array of these objects. When providing a <code>desc</code>, you must also provide a <code>title</code>.</p><h2 id="contingencies">Contingencies</h2><p>Depending on the method you choose, there may be reasons why the SVG doesn't render.</p><ul><li>When using the <a href="https://bitsofco.de/what-is-the-shadow-dom/">Shadow DOM</a>, referencing by <code>id</code> only exists within the root document that the element exists in; it cannot pentrate its search to a parent root document.</li><li>When hosting your assets externally, often it becomes beneficial to host via a <a href="https://www.cloudflare.com/learning/cdn/what-is-a-cdn/">CDN</a>. SVG requests are subject to <a href="https://www.codecademy.com/articles/what-is-cors">CORS</a>. Specifically, attempting to request an SVG resource from a different domain will often be blocked.</li></ul><p>Both of these can be resolved using the <code>attemptInject</code> option, which will take the referenced asset shape and make a copy to be injected into the node. When preparing the assets, you will also receive a <code>inject</code> function which should be executed on the page where the SVGs will appear.</p><pre class="language-js"><code class="language-js"><span class="token keyword">import</span> Savager <span class="token keyword">from</span> <span class="token string">'savager'</span><span class="token punctuation">;</span>
</code></pre><p>This also allows for an array of these objects. When providing a <code>desc</code>, you must also provide a <code>title</code>.</p><h2 id="contingencies">Contingencies</h2><p>Depending on the method you choose, there may be reasons why the SVG doesn't render.</p><ul><li>When using the <a href="https://bitsofco.de/what-is-the-shadow-dom/">Shadow DOM</a>, referencing by <code>id</code> only exists within the root document that the element exists in; it cannot penatrate its search to a parent root document.</li><li>When hosting your assets externally, often it becomes beneficial to host via a <a href="https://www.cloudflare.com/learning/cdn/what-is-a-cdn/">CDN</a>. SVG requests are subject to <a href="https://www.codecademy.com/articles/what-is-cors">CORS</a>. Specifically, attempting to request an SVG resource from a different domain will often be blocked.</li></ul><p>Both of these can be resolved using the <code>attemptInject</code> option, which will take the referenced asset shape and make a copy to be injected into the node. When preparing the assets, you will also receive a <code>inject</code> function which should be executed on the page where the SVGs will appear.</p><pre class="language-js"><code class="language-js"><span class="token keyword">import</span> Savager <span class="token keyword">from</span> <span class="token string">'savager'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> symbols <span class="token keyword">from</span> <span class="token string">'./manifest.js'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> savager <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Savager</span><span class="token punctuation">(</span>symbols<span class="token punctuation">,</span> <span class="token punctuation">{</span> attemptInject<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
Expand Down

0 comments on commit 93c3663

Please sign in to comment.