diff options
| -rw-r--r-- | app/views/dashboard/show.html.tmpl | 19 | ||||
| -rw-r--r-- | public/application.js | 3 | ||||
| -rw-r--r-- | public/index.html | 10 |
3 files changed, 19 insertions, 13 deletions
diff --git a/app/views/dashboard/show.html.tmpl b/app/views/dashboard/show.html.tmpl index acb0b3f..899b798 100644 --- a/app/views/dashboard/show.html.tmpl +++ b/app/views/dashboard/show.html.tmpl @@ -6,12 +6,14 @@ <meta name="color-scheme" content="light dark"> <title>SparkleLab</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"> + <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> + <script src="/application.js"></script> </head> <body> - <main class="container"> + <main id="app" class="container"> <nav> <ul> - <li><strong>SparkleLab</strong></li> + <li><strong>SparkleLab✨</strong></li> </ul> <ul> <li> @@ -21,10 +23,19 @@ </li> </ul> </nav> + + <form v-on:submit.prevent="submitSparkle"> + <label>/sparkle <input type="text" placeholder="@tanuki for helping me with my homework!" v-model="sparkle" /> </label> + <button type="submit" v-bind:disabled="isDisabled">✨ Sparkle</button> + </form> + <span class="error">${ errorMessage }</span> + + <h1>${ heading }</h1> + <div v-for="sparkle in recentSparkles"> + <p> <strong>${ sparkle.sparklee }</strong> ${ sparkle.reason } </p> + </div> {{range .Sparkles}} <div>{{ . }}</div> - {{else}} - <div><strong>No Sparkles</strong></div> {{end}} </main> </body> diff --git a/public/application.js b/public/application.js index dcc45f8..35ea2b6 100644 --- a/public/application.js +++ b/public/application.js @@ -21,7 +21,7 @@ document.addEventListener('DOMContentLoaded', (event) => { }, isDisabled: function() { return this.isSending || !this.isValid(); - }, + } }, data() { return { @@ -71,6 +71,7 @@ document.addEventListener('DOMContentLoaded', (event) => { } }) + app.config.compilerOptions.delimiters = ["${", "}"]; app.mount('#app') }) diff --git a/public/index.html b/public/index.html index d9033a5..03a393b 100644 --- a/public/index.html +++ b/public/index.html @@ -20,15 +20,9 @@ </ul> </nav> - <form v-on:submit.prevent="submitSparkle"> - <label>/sparkle <input type="text" placeholder="@tanuki for helping me with my homework!" v-model="sparkle" /> </label> - <button type="submit" v-bind:disabled="isDisabled">✨ Sparkle</button> - </form> - <span class="error">{{ errorMessage }}</span> - - <h1>{{ heading }}</h1> + <h1>${ heading }</h1> <div v-for="sparkle in recentSparkles"> - <p> <strong>{{ sparkle.sparklee }}</strong> {{ sparkle.reason }} </p> + <p> <strong>${ sparkle.sparklee }</strong> ${ sparkle.reason } </p> </div> </main> </body> |