fix: update template

textlint · Oct 27, 2020 · 14dd55f · 14dd55f
1 parent c2ab4d1
commit 14dd55f
Show file tree

Hide file tree

Showing 5 changed files with 380 additions and 101 deletions.
diff --git a/packages/@textlint/website-generator/template/index.html b/packages/@textlint/website-generator/template/index.html
@@ -2,18 +2,213 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>{{title}}</title>
+    <title>textlint editor playground</title>
     <style>
-        .main {
+
+        /* Basic.css  */
+
+        * {
+            box-sizing: border-box
+        }
+
+        :root {
+            --sans: 1em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Fira Sans, sans-serif;
+            --mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, 'Courier New', monospace;
+            --c1: #0074d9;
+            --c2: #eee;
+            --c3: #fff;
+            --c4: #000;
+            --c5: #fff;
+            --m1: 8px;
+            --rc: 8px;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --c2: #333;
+                --c3: #1e1f20;
+                --c4: #fff;
+            }
+        }
+
+        html {
+            -ms-text-size-adjust: 100%;
+            -webkit-text-size-adjust: 100%;
+
+        }
+
+        /* General settings */
+
+        body {
+            margin: 0;
+            font: var(--sans);
+            font-weight: 400;
+            font-style: normal;
+            text-rendering: optimizeLegibility;
+            -webkit-font-smoothing: antialiased;
+            background-color: var(--c3);
+            color: var(--c4);
+        }
+
+        img, iframe {
+            border: none;
+            max-width: 100%
+        }
+
+        a {
+            color: var(--c1);
+            text-decoration: none
+        }
+
+        a:hover {
+            color: var(--c1);
+            text-decoration: underline
+        }
+
+        pre {
+            font: 1em/1.6 var(--mono);
+            background: var(--c2);
+            padding: 1em;
+            overflow: auto
+        }
+
+        code {
+            font: 1em/1.6 var(--mono);
+        }
+
+        blockquote {
+            border-left: 5px solid var(--c2);
+            padding: 1em 1.5em;
+            margin: 0
+        }
+
+        hr {
+            border: 0;
+            border-bottom: 1px solid var(--c4)
+        }
+
+        /* Headlines */
+
+        h1, h2, h3, h4, h5, h6 {
+            margin: 0.6em 0;
+            font-weight: normal
+        }
+
+        h1 {
+            font-size: 2.625em;
+            line-height: 1.2
+        }
+
+        h2 {
+            font-size: 1.625em;
+            line-height: 1.2
+        }
+
+        h3 {
+            font-size: 1.3125em;
+            line-height: 1.24
+        }
+
+        h4 {
+            font-size: 1.1875em;
+            line-height: 1.23
+        }
+
+        h5, h6 {
+            font-size: 1em;
+            font-weight: bold
+        }
+
+        /* Table */
+
+        table {
+            border-collapse: collapse;
+            border-spacing: 0;
+            margin: 1em 0
+        }
+
+        th, td {
+            text-align: left;
+            vertical-align: top;
+            border: 1px solid;
+            padding: 0.4em
+        }
+
+        thead, tfoot {
+            background: var(--c2)
+        }
+
+        /* Rounded Corners*/
+
+        pre, code, input, select, textarea, button, img {
+            border-radius: var(--rc)
+        }
+
+
+        /* Forms */
+
+        input, select, textarea {
+            font-size: 1em;
+            color: var(--c4);
+            background: var(--c2);
+            border: 0;
+            padding: 0.6em
+        }
+
+        button, input[type=submit], input[type=reset], input[type="button"] {
+            -webkit-appearance: none;
+            font-size: 1em;
+            display: inline-block;
+            color: var(--c5);
+            background: var(--c1);
+            border: 0;
+            margin: 4px;
+            padding: 0.6em;
+            cursor: pointer;
+            text-align: center
+        }
+
+        button:hover, button:focus, input:hover, textarea:hover, select:hover {
+            opacity: 0.8
+        }
+
+        /* Infinite Grid */
+
+        section {
+            display: flex;
+            flex-flow: row wrap
+        }
+
+        [style*="--c:"], section > section, aside, article {
+            flex: var(--c, 1);
+            margin: var(--m1)
+        }
+
+        /* Cards */
+
+        article {
+            background: var(--c2);
+            border-radius: var(--rc);
+            padding: 1em;
+            box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3)
+        }
+
+        [style*="--c:"]:first-child, section > section:first-child, article:first-child {
+            margin-left: 0
+        }
+
+        [style*="--c:"]:last-child, section > section:last-child, article:last-child {
+            margin-right: 0
+        }
+    </style>
+    <style>
+        .content {
             width: 800px;
             margin: auto;
             position: relative;
-
-            display: flex;
-            align-items: center;
         }
 
-        textarea {
+        .textarea {
             width: 100%;
             height: 10em;
             font-size: 24px;
@@ -26,14 +221,23 @@
             bottom: 0;
             display: flex;
             align-items: center;
-            background: #ddd;
         }
     </style>
 </head>
 <body>
-<main class="main">
-    <textarea class="textarea">{{placeholder}}</textarea>
-</main>
+<div class="content">
+    <main class="main">
+        <label for="input">Input text for linting:</label>
+        <textarea id="input" class="textarea">お刺身が食べれない！お寿司は食べられる。
+東京特許許可局は難しい漢字だ。
+今すぐ行動することができる。
+</textarea>
+
+    </main>
+    <button id="install">Install</button>
+    <label for="install">＊ require textlint-editor installaion</label>
+    <div id="metadata" class="metadata"></div>
+</div>
 <aside class="side">
     <div id="js-status" class="status"></div>
 </aside>