feat: jekyll site build

2020-03-04 12:49:36 +00:00 · 2020-03-04 12:49:36 +00:00 · 9e5506252a
--- a/.gitignore
+++ b/.gitignore
@ -1,3 +1,4 @@
 *.js
 *.js.map
 node_modules
+_site
--- a/site/404.html
+++ b/site/404.html
@ -0,0 +1,24 @@
+---
+layout: default
+---
+
+<style type="text/css" media="screen">
+  .container {
+    margin: 10px auto;
+    max-width: 600px;
+    text-align: center;
+  }
+  h1 {
+    margin: 30px 0;
+    font-size: 4em;
+    line-height: 1;
+    letter-spacing: -1px;
+  }
+</style>
+
+<div class="container">
+  <h1>404</h1>
+
+  <p><strong>Page not found :(</strong></p>
+  <p>The requested page could not be found.</p>
+</div>
--- a/site/Gemfile
+++ b/site/Gemfile
@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+source 'https://rubygems.org'
+
+gem 'jekyll', '~> 3.8.5'
+
+group :jekyll_plugins do
+  gem 'jekyll-commonmark-ghpages', '~> 0.1.5'
+end
--- a/site/Gemfile.lock
+++ b/site/Gemfile.lock
@ -0,0 +1,73 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.7.0)
+      public_suffix (>= 2.0.2, < 5.0)
+    colorator (1.1.0)
+    commonmarker (0.17.13)
+      ruby-enum (~> 0.5)
+    concurrent-ruby (1.1.6)
+    em-websocket (0.5.1)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    eventmachine (1.2.7)
+    ffi (1.12.2)
+    forwardable-extended (2.6.0)
+    http_parser.rb (0.6.0)
+    i18n (0.9.5)
+      concurrent-ruby (~> 1.0)
+    jekyll (3.8.5)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 0.7)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 1.14)
+      liquid (~> 4.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (>= 1.7, < 4)
+      safe_yaml (~> 1.0)
+    jekyll-commonmark (1.3.1)
+      commonmarker (~> 0.14)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-commonmark-ghpages (0.1.6)
+      commonmarker (~> 0.17.6)
+      jekyll-commonmark (~> 1.2)
+      rouge (>= 2.0, < 4.0)
+    jekyll-sass-converter (1.5.2)
+      sass (~> 3.4)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (1.17.0)
+    liquid (4.0.3)
+    listen (3.2.1)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.3.6)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (3.1.1)
+    rb-fsevent (0.10.3)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rouge (3.13.0)
+    ruby-enum (0.7.2)
+      i18n
+    safe_yaml (1.0.5)
+    sass (3.7.4)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  jekyll (~> 3.8.5)
+  jekyll-commonmark-ghpages (~> 0.1.5)
+
+BUNDLED WITH
+   2.0.2
--- a/site/_config.yml
+++ b/site/_config.yml
@ -0,0 +1,17 @@
+title: Catalyst
+
+markdown: CommonMarkGhPages
+
+commonmark:
+  extensions: ["autolink", "table"]
+
+permalink: pretty
+
+exclude:
+  - Gemfile
+  - Gemfile.lock
+  - node_modules
+
+collections:
+  guide:
+    output: true
--- a/site/_guide/decorators.md
+++ b/site/_guide/decorators.md
@ -0,0 +1,7 @@
+---
+layout: guide
+chapter: 3
+subtitle: Using TypeScript for ergonomics
+---
+
+This is decorators
--- a/site/_guide/introduction.md
+++ b/site/_guide/introduction.md
@ -0,0 +1,7 @@
+---
+layout: guide
+chapter: 1
+---
+
+
+Hello world!
--- a/site/_guide/your-first-component.md
+++ b/site/_guide/your-first-component.md
@ -0,0 +1,7 @@
+---
+layout: guide
+subtitle: Building an HTMLElement
+chapter: 2
+---
+
+Your first component
--- a/site/_layouts/default.html
+++ b/site/_layouts/default.html
@ -0,0 +1,44 @@
+---
+---
+<!DOCTYPE html>
+<html class="height-full">
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="/primer.css">
+  </head>
+  <body class="d-flex flex-column height-full">
+    <header class="position-sticky top-0 d-flex"
+      style="z-index: 1; background-image: linear-gradient(to top, transparent, white 25%)">
+      <div class="flex-1 pl-3 pb-6 col-3 {% if page.layout  == "guide" %}bg-gray{% endif %}">
+        <h1 class="m-0 mt-2">Catalyst</h1>
+      </div>
+      <nav class="f3 col-9 d-flex flex-justify-end">
+        <ul class="d-flex list-style-none mr-6">
+          <li class="m-3">
+            <a href="/">
+              Home
+            </a>
+          </li>
+          <li class="m-3">
+            <a href="/guide/introduction">
+              Guide
+            </a>
+          </li>
+          <li class="m-3">
+            <a href="/reference">
+              Reference
+            </a>
+          </li>
+          <li class="m-3">
+            <a href="https://github.com/github/catalyst">
+              Source Code
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </header>
+
+    {{ content }}
+    
+  </body>
+</html>
--- a/site/_layouts/guide.html
+++ b/site/_layouts/guide.html
@ -0,0 +1,26 @@
+---
+layout: default
+---
+
+<div class="d-flex flex-1">
+
+  <aside class="col-3 pl-4 pt-1 bg-gray">
+    <nav>
+      <ol class="f3-light ml-4">
+        {% assign sorted = site.guide | sort: 'chapter' %}
+        {% for guide in sorted %}
+        <li class="py-1">
+          <a href="{{ guide.url }}">{{ guide.title }}</a>
+          <span class="d-block text-gray-light f5">{{ guide.subtitle }}</span>
+        </li>
+        {% endfor %}
+      </ol>
+    </nav>
+  </aside>
+
+  <section class="col-9 pl-4">
+    <h1 class="mb-4 f0-light">{{ page.title }}</h1>
+    {{ content }}
+  </section>
+
+</div>
--- a/site/index.html
+++ b/site/index.html
@ -1,101 +1,64 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="primer.css">
-  </head>
-  <body class="mb-6">
-    <header class="position-sticky top-0 d-flex"
-      style="z-index: 1; height: 125px; background-image: linear-gradient(to top, transparent, white 50%)">
-      <div class="flex-1 ml-3">
-        <h1 class="m-0 mt-2">Catalyst</h1>
+---
+layout: default
+---
+
+<section class="d-flex flex-justify-center container-xl clearfix">
+  <div class="mt-6">
+    <h1 class="h000-mktg mt-6 mr-6" style="max-width: 500px">Write YavaScript<br class="hide-sm"> Like a Boss</h1>
+    <ul class="d-flex list-style-none mt-4">
+      <li class="mt-3">
+        <a href="/guide/introduction" class="f3 btn btn-large btn-outline bg-blue text-white" style="height: 56px; line-height: 1.2;">
+          Read the Guide
+        </a>
+      </li>
+      <li class="ml-4 mt-3">
+        <a href="/reference" class="f3 btn btn-large btn-outline" style="height: 56px; line-height: 1.2;">
+          <svg width="24" height="24" class="octicon octicon-book mr-1" viewBox="0 0 16 16" version="1.1"><path fill-rule="evenodd" d="M3 5h4v1H3V5zm0 3h4V7H3v1zm0 2h4V9H3v1zm11-5h-4v1h4V5zm0 2h-4v1h4V7zm0 2h-4v1h4V9zm2-6v9c0 .55-.45 1-1 1H9.5l-1 1-1-1H2c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h5.5l1 1 1-1H15c.55 0 1 .45 1 1zm-8 .5L7.5 3H2v9h6V3.5zm7-.5H9.5l-.5.5V12h6V3z"></path></svg>
+          Reference
+        </a>
+      </li>
+    </ul>
+  </div>
+  <svg width="500px" class="hide-md hide-sm" xmlns="http://www.w3.org/2000/svg" width="888" height="475.27072" viewBox="0 0 888 475.27072"><title>true_love</title><rect x="402.54442" y="219.17275" width="2.57298" height="13.89411" transform="translate(-11.71503 -369.44906) rotate(26.64397)" fill="#fff"/><path d="M426.98456,248.842a66.00006,66.00006,0,0,0-93.33814,0l-.01788.01788a65.982,65.982,0,0,0-93.30231,93.30237l-.01788.01788,93.33807,93.33807,93.33814-93.33807A66,66,0,0,0,426.98456,248.842Z" transform="translate(-156 -212.36464)" fill="#ff6584"/><path d="M709.42956,621.81706h-489.679a9.98831,9.98831,0,0,1-1.82989-.145l231.59565-401.157a16.2157,16.2157,0,0,1,28.22705,0L633.17308,489.72253l7.44637,12.8816Z" transform="translate(-156 -212.36464)" fill="#6c63ff"/><polygon points="553.43 409.452 386.241 409.452 468.314 290.239 474.22 281.652 477.173 277.358 484.619 290.239 553.43 409.452" opacity="0.2"/><path d="M982.07935,621.36464H558.54722l82.07223-119.21293,5.9062-8.58777L753.47313,338.20663c7.01145-10.182,23.87881-10.81607,32.12223-1.92044a19.328,19.328,0,0,1,1.54006,1.92044Z" transform="translate(-156 -212.36464)" fill="#3f3d56"/><rect y="407.93322" width="888" height="2.24072" fill="#3f3d56"/><ellipse cx="570.05705" cy="586.26729" rx="32.34192" ry="10.15313" transform="translate(-329.28848 33.15083) rotate(-21.1763)" fill="#2f2e41"/><circle cx="349.2698" cy="382.74826" r="64.68385" fill="#2f2e41"/><rect x="319.79361" y="433.51279" width="19.65079" height="35.20766" fill="#2f2e41"/><rect x="359.09519" y="433.51279" width="19.65079" height="35.20766" fill="#2f2e41"/><ellipse cx="336.16927" cy="469.12985" rx="16.37566" ry="6.14087" fill="#2f2e41"/><ellipse cx="375.47085" cy="468.31107" rx="16.37566" ry="6.14087" fill="#2f2e41"/><circle cx="350.90736" cy="366.3726" r="22.10714" fill="#fff"/><circle cx="350.90736" cy="366.3726" r="7.36905" fill="#3f3d56"/><path d="M442.52428,534.95878c-5.22292-23.39065,11.47266-47.02591,37.29064-52.79083s50.9816,8.52354,56.20452,31.91418-11.88759,32.01752-37.70556,37.78245S447.74721,558.34942,442.52428,534.95878Z" transform="translate(-156 -212.36464)" fill="#e6e6e6"/><ellipse cx="440.41422" cy="603.0993" rx="32.34192" ry="10.15313" transform="translate(-453.46127 275.69894) rotate(-45)" fill="#2f2e41"/><path d="M473.49729,618.44821c0,6.33082,16.30083,18.832,34.38888,18.832s35.04764-17.82327,35.04764-24.15409-16.95958,1.22817-35.04764,1.22817S473.49729,612.11739,473.49729,618.44821Z" transform="translate(-156 -212.36464)" fill="#fff"/><ellipse cx="623.94295" cy="586.26729" rx="10.15313" ry="32.34192" transform="translate(-304.12811 743.93025) rotate(-68.8237)" fill="#2f2e41"/><circle cx="532.7302" cy="382.74826" r="64.68385" fill="#2f2e41"/><rect x="698.5556" y="645.87743" width="19.65079" height="35.20766" transform="translate(1260.76198 1114.59789) rotate(-180)" fill="#2f2e41"/><rect x="659.25402" y="645.87743" width="19.65079" height="35.20766" transform="translate(1182.15883 1114.59789) rotate(-180)" fill="#2f2e41"/><ellipse cx="545.83073" cy="469.12985" rx="16.37566" ry="6.14087" fill="#2f2e41"/><ellipse cx="506.52915" cy="468.31107" rx="16.37566" ry="6.14087" fill="#2f2e41"/><circle cx="531.09264" cy="366.3726" r="22.10714" fill="#fff"/><circle cx="531.09264" cy="366.3726" r="7.36905" fill="#3f3d56"/><path d="M751.47572,534.95878c5.22292-23.39065-11.47266-47.02591-37.29064-52.79083s-50.9816,8.52354-56.20452,31.91418,11.88759,32.01752,37.70556,37.78245S746.25279,558.34942,751.47572,534.95878Z" transform="translate(-156 -212.36464)" fill="#6c63ff"/><ellipse cx="753.58578" cy="603.0993" rx="10.15313" ry="32.34192" transform="translate(-361.73544 497.14467) rotate(-45)" fill="#2f2e41"/><path d="M720.50271,618.44821c0,6.33082-16.30083,18.832-34.38888,18.832s-35.04764-17.82327-35.04764-24.15409,16.95958,1.22817,35.04764,1.22817S720.50271,612.11739,720.50271,618.44821Z" transform="translate(-156 -212.36464)" fill="#fff"/><path d="M1044,527.22724c0,41.80115-24.85012,56.39655-55.5043,56.39655s-55.5043-14.5954-55.5043-56.39655,55.5043-94.97881,55.5043-94.97881S1044,485.42608,1044,527.22724Z" transform="translate(-156 -212.36464)" fill="#e6e6e6"/><polygon points="830.474 364.865 831.042 329.881 854.699 286.601 831.131 324.393 831.387 308.663 847.691 277.35 831.454 304.5 831.454 304.5 831.914 276.209 849.373 251.28 831.986 271.76 832.273 219.884 830.469 288.559 830.617 285.726 812.866 258.555 830.332 291.164 828.678 322.761 828.629 321.922 808.166 293.329 828.567 324.885 828.36 328.836 828.323 328.896 828.34 329.22 824.144 409.383 829.751 409.383 830.423 367.977 850.775 336.499 830.474 364.865" fill="#3f3d56"/></svg>
+</section>
+
+<section class="d-flex flex-justify-center container-xl">
+  <div class="mt-6">
+    <h1 class="h000-mktg mt-6 mr-6">Catalyse your Web Components</h1>
+    <div class="d-flex">
+      <div class="">
+        <pre><code>
+
+
+        &lt;div data-controller=&quot;hello&quot;&gt;
+          &lt;input data-target=&quot;hello.name&quot; type=&quot;text&quot;&gt;
+
+          &lt;button data-action=&quot;click-&gt;hello#greet&quot;&gt;
+            Greet
+          &lt;/button&gt;
+
+          &lt;span data-target=&quot;hello.output&quot;&gt;
+          &lt;/span&gt;
+        &lt;/div&gt;
+          </code></pre>
      </div>
-      <nav class="f3">
-        <ul class="d-flex list-style-none mr-6">
-          <li class="m-3">
-            <a href="/">
-              Home
-            </a>
-          </li>
-          <li class="m-3">
-            <a href="/handbook">
-              Guide
-            </a>
-          </li>
-          <li class="m-3">
-            <a href="/reference">
-              Reference
-            </a>
-          </li>
-          <li class="m-3">
-            <a href="https://github.com/github/catalyst">
-              Source Code
-            </a>
-          </li>
-        </ul>
-      </nav>
-    </header>
+      <div class="">
+        <pre><code>
+        import { bindEvents, target,  } from "@catalyst/core"

-    <section class="d-flex flex-justify-center container-xl clearfix">
-      <div class="mt-6">
-        <h1 class="h000-mktg mt-6 mr-6" style="max-width: 500px">Write YavaScript<br class="hide-sm"> Like a Boss</h1>
-        <ul class="d-flex list-style-none mt-4">
-          <li class="mt-3">
-            <a href="/handbook" class="f3 btn btn-large btn-outline bg-blue text-white" style="height: 56px; line-height: 1.2;">
-              Read the Guide
-            </a>
-          </li>
-          <li class="ml-4 mt-3">
-            <a href="/reference" class="f3 btn btn-large btn-outline" style="height: 56px; line-height: 1.2;">
-              <svg width="24" height="24" class="octicon octicon-book mr-1" viewBox="0 0 16 16" version="1.1"><path fill-rule="evenodd" d="M3 5h4v1H3V5zm0 3h4V7H3v1zm0 2h4V9H3v1zm11-5h-4v1h4V5zm0 2h-4v1h4V7zm0 2h-4v1h4V9zm2-6v9c0 .55-.45 1-1 1H9.5l-1 1-1-1H2c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h5.5l1 1 1-1H15c.55 0 1 .45 1 1zm-8 .5L7.5 3H2v9h6V3.5zm7-.5H9.5l-.5.5V12h6V3z"></path></svg>
-              Reference
-            </a>
-          </li>
-        </ul>
+        @register
+        @bindEvents
+        export default class extends Controller {
+          @target nameTarget: HTMLElement
+          @target outputTarget: HTMLElement
+
+          greet() {
+            this.outputTarget.textContent =
+              `Hello, ${this.nameTarget.value}!`
+          }
+        }
+        </code></pre>
      </div>
-      <svg width="500px" class="hide-md hide-sm" xmlns="http://www.w3.org/2000/svg" width="888" height="475.27072" viewBox="0 0 888 475.27072"><title>true_love</title><rect x="402.54442" y="219.17275" width="2.57298" height="13.89411" transform="translate(-11.71503 -369.44906) rotate(26.64397)" fill="#fff"/><path d="M426.98456,248.842a66.00006,66.00006,0,0,0-93.33814,0l-.01788.01788a65.982,65.982,0,0,0-93.30231,93.30237l-.01788.01788,93.33807,93.33807,93.33814-93.33807A66,66,0,0,0,426.98456,248.842Z" transform="translate(-156 -212.36464)" fill="#ff6584"/><path d="M709.42956,621.81706h-489.679a9.98831,9.98831,0,0,1-1.82989-.145l231.59565-401.157a16.2157,16.2157,0,0,1,28.22705,0L633.17308,489.72253l7.44637,12.8816Z" transform="translate(-156 -212.36464)" fill="#6c63ff"/><polygon points="553.43 409.452 386.241 409.452 468.314 290.239 474.22 281.652 477.173 277.358 484.619 290.239 553.43 409.452" opacity="0.2"/><path d="M982.07935,621.36464H558.54722l82.07223-119.21293,5.9062-8.58777L753.47313,338.20663c7.01145-10.182,23.87881-10.81607,32.12223-1.92044a19.328,19.328,0,0,1,1.54006,1.92044Z" transform="translate(-156 -212.36464)" fill="#3f3d56"/><rect y="407.93322" width="888" height="2.24072" fill="#3f3d56"/><ellipse cx="570.05705" cy="586.26729" rx="32.34192" ry="10.15313" transform="translate(-329.28848 33.15083) rotate(-21.1763)" fill="#2f2e41"/><circle cx="349.2698" cy="382.74826" r="64.68385" fill="#2f2e41"/><rect x="319.79361" y="433.51279" width="19.65079" height="35.20766" fill="#2f2e41"/><rect x="359.09519" y="433.51279" width="19.65079" height="35.20766" fill="#2f2e41"/><ellipse cx="336.16927" cy="469.12985" rx="16.37566" ry="6.14087" fill="#2f2e41"/><ellipse cx="375.47085" cy="468.31107" rx="16.37566" ry="6.14087" fill="#2f2e41"/><circle cx="350.90736" cy="366.3726" r="22.10714" fill="#fff"/><circle cx="350.90736" cy="366.3726" r="7.36905" fill="#3f3d56"/><path d="M442.52428,534.95878c-5.22292-23.39065,11.47266-47.02591,37.29064-52.79083s50.9816,8.52354,56.20452,31.91418-11.88759,32.01752-37.70556,37.78245S447.74721,558.34942,442.52428,534.95878Z" transform="translate(-156 -212.36464)" fill="#e6e6e6"/><ellipse cx="440.41422" cy="603.0993" rx="32.34192" ry="10.15313" transform="translate(-453.46127 275.69894) rotate(-45)" fill="#2f2e41"/><path d="M473.49729,618.44821c0,6.33082,16.30083,18.832,34.38888,18.832s35.04764-17.82327,35.04764-24.15409-16.95958,1.22817-35.04764,1.22817S473.49729,612.11739,473.49729,618.44821Z" transform="translate(-156 -212.36464)" fill="#fff"/><ellipse cx="623.94295" cy="586.26729" rx="10.15313" ry="32.34192" transform="translate(-304.12811 743.93025) rotate(-68.8237)" fill="#2f2e41"/><circle cx="532.7302" cy="382.74826" r="64.68385" fill="#2f2e41"/><rect x="698.5556" y="645.87743" width="19.65079" height="35.20766" transform="translate(1260.76198 1114.59789) rotate(-180)" fill="#2f2e41"/><rect x="659.25402" y="645.87743" width="19.65079" height="35.20766" transform="translate(1182.15883 1114.59789) rotate(-180)" fill="#2f2e41"/><ellipse cx="545.83073" cy="469.12985" rx="16.37566" ry="6.14087" fill="#2f2e41"/><ellipse cx="506.52915" cy="468.31107" rx="16.37566" ry="6.14087" fill="#2f2e41"/><circle cx="531.09264" cy="366.3726" r="22.10714" fill="#fff"/><circle cx="531.09264" cy="366.3726" r="7.36905" fill="#3f3d56"/><path d="M751.47572,534.95878c5.22292-23.39065-11.47266-47.02591-37.29064-52.79083s-50.9816,8.52354-56.20452,31.91418,11.88759,32.01752,37.70556,37.78245S746.25279,558.34942,751.47572,534.95878Z" transform="translate(-156 -212.36464)" fill="#6c63ff"/><ellipse cx="753.58578" cy="603.0993" rx="10.15313" ry="32.34192" transform="translate(-361.73544 497.14467) rotate(-45)" fill="#2f2e41"/><path d="M720.50271,618.44821c0,6.33082-16.30083,18.832-34.38888,18.832s-35.04764-17.82327-35.04764-24.15409,16.95958,1.22817,35.04764,1.22817S720.50271,612.11739,720.50271,618.44821Z" transform="translate(-156 -212.36464)" fill="#fff"/><path d="M1044,527.22724c0,41.80115-24.85012,56.39655-55.5043,56.39655s-55.5043-14.5954-55.5043-56.39655,55.5043-94.97881,55.5043-94.97881S1044,485.42608,1044,527.22724Z" transform="translate(-156 -212.36464)" fill="#e6e6e6"/><polygon points="830.474 364.865 831.042 329.881 854.699 286.601 831.131 324.393 831.387 308.663 847.691 277.35 831.454 304.5 831.454 304.5 831.914 276.209 849.373 251.28 831.986 271.76 832.273 219.884 830.469 288.559 830.617 285.726 812.866 258.555 830.332 291.164 828.678 322.761 828.629 321.922 808.166 293.329 828.567 324.885 828.36 328.836 828.323 328.896 828.34 329.22 824.144 409.383 829.751 409.383 830.423 367.977 850.775 336.499 830.474 364.865" fill="#3f3d56"/></svg>
-    </section>
-
-    <section class="d-flex flex-justify-center container-xl">
-      <div class="mt-6">
-        <h1 class="h000-mktg mt-6 mr-6">Catalyse your Web Components</h1>
-        <div class="d-flex">
-          <div class="">
-            <pre><code>
-
-
-            &lt;div data-controller=&quot;hello&quot;&gt;
-              &lt;input data-target=&quot;hello.name&quot; type=&quot;text&quot;&gt;
-
-              &lt;button data-action=&quot;click-&gt;hello#greet&quot;&gt;
-                Greet
-              &lt;/button&gt;
-
-              &lt;span data-target=&quot;hello.output&quot;&gt;
-              &lt;/span&gt;
-            &lt;/div&gt;
-              </code></pre>
-          </div>
-          <div class="">
-            <pre><code>
-            import { bindEvents, target,  } from "@catalyst/core"
-
-            @register
-            @bindEvents
-            export default class extends Controller {
-              @target nameTarget: HTMLElement
-              @target outputTarget: HTMLElement
-
-              greet() {
-                this.outputTarget.textContent =
-                  `Hello, ${this.nameTarget.value}!`
-              }
-            }
-            </code></pre>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-  </body>
-</html>
+    </div>
+  </div>
+</section>