Update playground example

NiklasPor · Apr 1, 2022 · da38f29 · da38f29
1 parent 57856f0
commit da38f29
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 18 deletions.
diff --git a/website/public/global.css b/website/public/global.css
@@ -13,6 +13,7 @@ body {
   box-sizing: border-box;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 16px;
 }
 
 a {
@@ -45,7 +46,6 @@ textarea {
   box-sizing: border-box;
   border-radius: 0px;
   color: whitesmoke;
-  font-size: 1.5rem;
   border: none;
 }
 

diff --git a/website/public/index.html b/website/public/index.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-	<meta charset='utf-8'>
-	<meta name='viewport' content='width=device-width,initial-scale=1'>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
 
-	<title>Svelte app</title>
+    <title>Prettier Go Template Playground</title>
 
-	<link rel='icon' type='image/png' href='/favicon.png'>
-	<link rel='stylesheet' href='/global.css'>
-	<link rel='stylesheet' href='/build/bundle.css'>
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="stylesheet" href="/global.css" />
+    <link rel="stylesheet" href="/build/bundle.css" />
 
-	<script defer src='/build/bundle.js'></script>
-</head>
+    <script defer src="/build/bundle.js"></script>
+  </head>
 
-<body>
-</body>
+  <body></body>
 </html>
diff --git a/website/src/App.svelte b/website/src/App.svelte
@@ -5,23 +5,34 @@
   import pluginCSS from "prettier/parser-postcss";
   import * as pluginGoTemplate from "prettier-plugin-go-template";
 
-  let input = "";
-  let output = "";
+  let input = `{{ if or .Prev .Next -}}
+{{ $p := where site.Pages }}
+<div class="my-navigation">
+{{ with $p.Next . -}}
+<a href="{{ .RelPermalink }}">
+<div class="row">
+<div class="cell py-2">
+  {{ .Title }} 
+</div> </div> </a>
+{{ end -}}
+</div>
+{{ end -}}`;
+  $: output = getFormattedInput(input);
 
-  function onInput(event) {
+  function getFormattedInput(text: string): string {
     try {
-      output = prettier.format(event.target.value, {
+      return prettier.format(text, {
         parser: "go-template",
         plugins: [pluginHtml, pluginBabel, pluginCSS, pluginGoTemplate],
       });
     } catch (e) {
-      output = e.toString();
+      return e.toString();
     }
   }
 </script>
 
 <main>
-  <textarea bind:value={input} on:input={onInput} />
+  <textarea bind:value={input} />
   <div class="divider" />
   <textarea bind:value={output} class="output-only" disabled />
 </main>