Skip to content

Commit

Permalink
remove all .html from doc links
Browse files Browse the repository at this point in the history
  • Loading branch information
ECorreia45 committed Nov 16, 2023
1 parent bc2c79f commit c3713c5
Show file tree
Hide file tree
Showing 27 changed files with 49 additions and 49 deletions.
4 changes: 2 additions & 2 deletions docs/documentation/conditional-attributes.html

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions docs/documentation/conditional-rendering.html

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions docs/documentation/creating-and-rendering.html

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions docs/documentation/custom-helper.html

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions docs/documentation/dom-references.html

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions docs/documentation/dynamic-values-and-update.html

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions docs/documentation/effect-helper.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/documentation/essential-training.html

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions docs/documentation/event-handling.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Tutorial - HTML Templating System - Before Semicolon</title><link rel="stylesheet" href="../stylesheets/hybrid.hightlighter.css"><link rel="stylesheet" href="../stylesheets/documentation.css"></head><body><header class="wrapper"><h1><a href="../"><strong style="text-transform: uppercase">Markup</strong></a></h1><nav><a href="https://www.npmjs.com/package/@beforesemicolon/markup">v<em>0.2.5-beta</em></a></nav></header><main><div class="wrapper docs"><div class="doc-nav" id="menu"><a class="mobile-menu-open" href="#menu"><span>menu</span></a><ul class="doc-nav-list" id="doc-nav-list" tabindex="0"><li><span>Introduction</span><ul><li><a href="../documentation">What is Markup?</a></li><li><a href="../documentation/installation.html">Installation</a></li><li><a href="../documentation/essential-training.html">Essential Training</a></li><li><a href="../documentation/tutorial.html">Tutorial</a></li><li><a href="../documentation/examples.html">Examples</a></li></ul></li><li><span>Templating</span><ul><li><a href="../documentation/creating-and-rendering.html">Creating &amp; Rendering</a></li><li><a href="../documentation/template-values.html">Template values</a></li><li><a href="../documentation/replacing-content.html">Replacing content</a></li><li><a href="../documentation/dom-references.html">DOM references</a></li><li><a href="../documentation/conditional-attributes.html">Conditional attributes</a></li><li class="active"><a href="../documentation/event-handling.html">Event handling</a></li><li><a href="../documentation/dynamic-values-and-update.html">Dynamic values &amp; Update</a></li><li><a href="../documentation/state-values.html">State values</a></li></ul></li><li><span>Helpers</span><ul><li><a href="../documentation/what-is-a-helper.html">What is a Helper?</a></li><li><a href="../documentation/effect-helper.html">Effect helper</a></li><li><a href="../documentation/conditional-rendering.html">Conditional Rendering</a></li><li><a href="../documentation/repetition-and-lists.html">Repetition &amp; Lists</a></li><li><a href="../documentation/is-isnot-helpers.html">Is &amp; IsNot helpers</a></li><li><a href="../documentation/or-and-oneof-helpers.html">Or, And, &amp; OneOf helpers</a></li><li><a href="../documentation/pick-helper.html">Pick helper</a></li><li><a href="../documentation/suspense-helper.html">Suspense helper</a></li><li><a href="../documentation/custom-helper.html">Custom helper</a></li></ul></li><li><span>Capabilities</span><ul><li><a href="../documentation/function-components.html">Function Components</a></li><li><a href="../documentation/web-components.html">Web Components</a></li><li><a href="../documentation/server-side-rendering.html">Server Side Rendering</a></li><li><a href="../documentation/state-store.html">State Store</a></li></ul></li></ul><a href="../documentation/event-handling.html" class="mobile-menu-close"></a></div><article><h2 id="event-handling" class="heading"><a href="#event-handling">Event handling</a></h2><p>Event handling remains close to the native way but enhanced withactive listeners instead. Think about it more like an inline<a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a>more than anything.</p><div class="code-snippet"><pre><code class="language-typescript theme-hybrid hljs" data-highlighted="yes"><span class="hljs-keyword">const</span> <span class="hljs-title function_">handleClick</span> = (<span class="hljs-params">evt: Event</span>) =&gt; {evt.<span class="hljs-title function_">preventDefault</span>();evt.<span class="hljs-title function_">stopPropagation</span>();
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Tutorial - HTML Templating System - Before Semicolon</title><link rel="stylesheet" href="../stylesheets/hybrid.hightlighter.css"><link rel="stylesheet" href="../stylesheets/documentation.css"></head><body><header class="wrapper"><h1><a href="../"><strong style="text-transform: uppercase">Markup</strong></a></h1><nav><a href="https://www.npmjs.com/package/@beforesemicolon/markup">v<em>0.2.5-beta</em></a></nav></header><main><div class="wrapper docs"><div class="doc-nav" id="menu"><a class="mobile-menu-open" href="#menu"><span>menu</span></a><ul class="doc-nav-list" id="doc-nav-list" tabindex="0"><li><span>Introduction</span><ul><li><a href="../documentation">What is Markup?</a></li><li><a href="../documentation/installation">Installation</a></li><li><a href="../documentation/essential-training">Essential Training</a></li><li><a href="../documentation/tutorial">Tutorial</a></li><li><a href="../documentation/examples">Examples</a></li></ul></li><li><span>Templating</span><ul><li><a href="../documentation/creating-and-rendering">Creating &amp; Rendering</a></li><li><a href="../documentation/template-values">Template values</a></li><li><a href="../documentation/replacing-content">Replacing content</a></li><li><a href="../documentation/dom-references">DOM references</a></li><li><a href="../documentation/conditional-attributes">Conditional attributes</a></li><li class="active"><a href="../documentation/event-handling">Event handling</a></li><li><a href="../documentation/dynamic-values-and-update">Dynamic values &amp; Update</a></li><li><a href="../documentation/state-values">State values</a></li></ul></li><li><span>Helpers</span><ul><li><a href="../documentation/what-is-a-helper">What is a Helper?</a></li><li><a href="../documentation/effect-helper">Effect helper</a></li><li><a href="../documentation/conditional-rendering">Conditional Rendering</a></li><li><a href="../documentation/repetition-and-lists">Repetition &amp; Lists</a></li><li><a href="../documentation/is-isnot-helpers">Is &amp; IsNot helpers</a></li><li><a href="../documentation/or-and-oneof-helpers">Or, And, &amp; OneOf helpers</a></li><li><a href="../documentation/pick-helper">Pick helper</a></li><li><a href="../documentation/suspense-helper">Suspense helper</a></li><li><a href="../documentation/custom-helper">Custom helper</a></li></ul></li><li><span>Capabilities</span><ul><li><a href="../documentation/function-components">Function Components</a></li><li><a href="../documentation/web-components">Web Components</a></li><li><a href="../documentation/server-side-rendering">Server Side Rendering</a></li><li><a href="../documentation/state-store">State Store</a></li></ul></li></ul><a href="../documentation/event-handling" class="mobile-menu-close"></a></div><article><h2 id="event-handling" class="heading"><a href="#event-handling">Event handling</a></h2><p>Event handling remains close to the native way but enhanced withactive listeners instead. Think about it more like an inline<a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a>more than anything.</p><div class="code-snippet"><pre><code class="language-typescript theme-hybrid hljs" data-highlighted="yes"><span class="hljs-keyword">const</span> <span class="hljs-title function_">handleClick</span> = (<span class="hljs-params">evt: Event</span>) =&gt; {evt.<span class="hljs-title function_">preventDefault</span>();evt.<span class="hljs-title function_">stopPropagation</span>();
}html`<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"</span></span></span><span class="hljs-subst">${handleClick}</span><span class="language-xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span>click me<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>`</span>
<span class="hljs-comment">// renders: &lt;button&gt;click me&lt;/button&gt;`</span></code></pre></div><p>The inline event attributes are removed during parsing before theDOM element is created and will never show on the page.</p><p>All event attributes must start with <code>on</code> keywordfollowed by the name of the event. This is nothing specific to thislibrary but something native to HTML.</p><p>The value of this attribute must be a function of any type.</p><h3 id="custom-events" class="heading"><a href="#custom-events">Custom events</a></h3><p>You may also listen to custom events just like you would with nativeones. The pattern remains the same and you get a<code>CustomEvent</code> instead of an <code>Event</code> instance.</p><div class="code-snippet"><pre><code class="language-typescript theme-hybrid hljs" data-highlighted="yes"><span class="hljs-keyword">const</span> <span class="hljs-title function_">handleClick</span> = (<span class="hljs-params">evt: CustomEvent</span>) =&gt; {<span class="hljs-comment">// handle here</span>
}html`<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">my-button</span> <span class="hljs-attr">onclicked</span>=<span class="hljs-string">"</span></span></span><span class="hljs-subst">${handleClick}</span><span class="language-xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span>click me<span class="hljs-tag">&lt;/<span class="hljs-name">my-button</span>&gt;</span>`</span>
<span class="hljs-comment">// renders: &lt;button&gt;click me&lt;/button&gt;`</span></code></pre></div><h3 id="event-options" class="heading"><a href="#event-options">Event options</a></h3><p>One thing that you cannot do natively in HTML, but you can with thislibrary is providing<a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options">event listener options</a>.</p><div class="code-snippet"><pre><code class="language-typescript theme-hybrid hljs" data-highlighted="yes"><span class="hljs-keyword">const</span> <span class="hljs-title function_">handleClick</span> = (<span class="hljs-params">evt</span>) =&gt; {<span class="hljs-comment">// will only get called once</span>
}html`<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"</span></span></span><span class="hljs-subst">${handleClick}</span><span class="language-xml"><span class="hljs-tag"><span class="hljs-string">, </span></span></span><span class="hljs-subst">${{once: <span class="hljs-literal">true</span>}}</span><span class="language-xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span>click me<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>`</span>
<span class="hljs-comment">// renders: &lt;button&gt;click me&lt;/button&gt;</span></code></pre></div><p>All you need to do is add a comma followed by the option you want toprovide to the listener.</p></article></div></main><footer class="wrapper"><ul class="learning-resources"><h5>Learning Resources</h5><li><a href="../documentation">Documentation</a></li><li><a href="../documentation/essential-training.html">Essential Training</a></li><li><a href="../documentation/tutorial.html">Tutorial</a></li><li><a href="../documentation/examples.html">Examples</a></li></ul><ul class="about-bfs"><h5>About <em>Before Semicolon</em></h5><li><a href="https://github.com/beforesemicolon" rel="noopener" target="_blank">Open Source</a></li><li><a href="https://beforesemicolon.com/" rel="noopener" target="_blank">Website</a></li><li><a href="https://medium.com/before-semicolon" rel="noopener" target="_blank">Blog</a></li><li><a href="https://www.youtube.com/channel/UCrU33aw1k9BqTIq2yKXrmBw" rel="noopener" target="_blank">YouTube Channel</a></li><li><address aria-label="social-media"><a href="https://medium.com/before-semicolon" rel="noopener" target="_blank"><img src="../assets/medium2.svg" alt="Medium blog" width="20"></a><a href="https://www.facebook.com/beforesemicolon/" rel="noopener" target="_blank"><img src="../assets/facebook.svg" alt="Facebook" width="20"></a><a href="https://www.instagram.com/before_semicolon_/" rel="noopener" target="_blank"><img src="../assets/instagram.svg" alt="Instagram" width="20"></a><a href="https://www.reddit.com/r/beforesemicolon/" rel="noopener" target="_blank"><img src="../assets/reddit.svg" alt="Reddit" width="20"></a><a href="https://twitter.com/BeforeSemicolon" rel="noopener" target="_blank"><img src="../assets/twitter.svg" alt="Twitter" width="20"></a><a href="https://www.youtube.com/channel/UCrU33aw1k9BqTIq2yKXrmBw" rel="noopener" target="_blank"><img src="../assets/youtube.svg" alt="YouTube" width="20"></a></address></li></ul><div class="copyright"><img src="../assets/before-semicolon-logo.png" alt="Before Semicolon logo"><p><small>Copyright © 2023 BeforeSemicolon. All rights reserved.</small></p></div></footer></body></html>
<span class="hljs-comment">// renders: &lt;button&gt;click me&lt;/button&gt;</span></code></pre></div><p>All you need to do is add a comma followed by the option you want toprovide to the listener.</p></article></div></main><footer class="wrapper"><ul class="learning-resources"><h5>Learning Resources</h5><li><a href="../documentation">Documentation</a></li><li><a href="../documentation/essential-training">Essential Training</a></li><li><a href="../documentation/tutorial">Tutorial</a></li><li><a href="../documentation/examples">Examples</a></li></ul><ul class="about-bfs"><h5>About <em>Before Semicolon</em></h5><li><a href="https://github.com/beforesemicolon" rel="noopener" target="_blank">Open Source</a></li><li><a href="https://beforesemicolon.com/" rel="noopener" target="_blank">Website</a></li><li><a href="https://medium.com/before-semicolon" rel="noopener" target="_blank">Blog</a></li><li><a href="https://www.youtube.com/channel/UCrU33aw1k9BqTIq2yKXrmBw" rel="noopener" target="_blank">YouTube Channel</a></li><li><address aria-label="social-media"><a href="https://medium.com/before-semicolon" rel="noopener" target="_blank"><img src="../assets/medium2.svg" alt="Medium blog" width="20"></a><a href="https://www.facebook.com/beforesemicolon/" rel="noopener" target="_blank"><img src="../assets/facebook.svg" alt="Facebook" width="20"></a><a href="https://www.instagram.com/before_semicolon_/" rel="noopener" target="_blank"><img src="../assets/instagram.svg" alt="Instagram" width="20"></a><a href="https://www.reddit.com/r/beforesemicolon/" rel="noopener" target="_blank"><img src="../assets/reddit.svg" alt="Reddit" width="20"></a><a href="https://twitter.com/BeforeSemicolon" rel="noopener" target="_blank"><img src="../assets/twitter.svg" alt="Twitter" width="20"></a><a href="https://www.youtube.com/channel/UCrU33aw1k9BqTIq2yKXrmBw" rel="noopener" target="_blank"><img src="../assets/youtube.svg" alt="YouTube" width="20"></a></address></li></ul><div class="copyright"><img src="../assets/before-semicolon-logo.png" alt="Before Semicolon logo"><p><small>Copyright © 2023 BeforeSemicolon. All rights reserved.</small></p></div></footer></body></html>
Loading

0 comments on commit c3713c5

Please sign in to comment.