Updated test bed with proper instructions.

namitoyokota · May 18, 2024 · ca449d4 · ca449d4
1 parent a2fb184
commit ca449d4
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 51 deletions.
diff --git a/src/abstractions/code-snippets.ts b/src/abstractions/code-snippets.ts
@@ -10,20 +10,6 @@ export class CodeSnippets {
 })
 export class AppModule {}`;
 
-    /** Code snippet to set component config input */
-    static config = `readonly underline = {
-    type: 'underline',
-    color: '#F38181',
-} as RoughAnnotationConfig;`;
-
     /** Code snippet to use notation reveal component */
-    static html = `<code-snippet [config]="underline">
-    This sentence will be underlined.
-</code-snippet>`;
-
-    /** Code snippet to use reset flag */
-    static reset = `<code-snippet [reset]="false"></code-snippet>`;
-
-    /** Code snippet to override delay */
-    static delay = `<code-snippet [delay]="5000"></code-snippet>`;
+    static html = `<code-snippet code="<div></div>"></code-snippet>`;
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -45,35 +45,14 @@ <h2>Installation</h2>
     <h2>Usage</h2>
     <div class="content-pane">
         <span>First, import the module.</span>
-        <code-snippet [code]="snippets.module" [showLineNumbers]="true"></code-snippet>
+        <code-snippet [code]="snippets.module" [showLineNumbers]="true" language="typescript"></code-snippet>
 
-        <span>
-            Next, set up a
-            <a href="https://github.com/rough-stuff/rough-notation/blob/master/src/model.ts#L17" target="_blank">config</a>
-            property. You can read all annotation types on
-            <a href="https://roughnotation.com/" target="_blank">Rough Notation's official documentation</a>.
-        </span>
-        <code-snippet [code]="snippets.config" [showLineNumbers]="true"></code-snippet>
-
-        <span>Lastly, add component in the HTML.</span>
-        <code-snippet [code]="snippets.html" [showLineNumbers]="true"></code-snippet>
-    </div>
-</section>
-
-<!-- Directives -->
-<section>
-    <h2>Directives</h2>
-    <div class="content-pane">
-        <span>Optionally, override the <b>reset</b> flag to avoid re-animations.</span>
-        <code-snippet [code]="snippets.reset" language="xml" [showCopy]="false"></code-snippet>
-
-        <span><b>Delay</b>, set to 1000 milliseconds (1 second) by default, can also be overridden.</span>
-        <code-snippet [code]="snippets.delay" language="xml" [showCopy]="false"></code-snippet>
+        <span>Now, simply use the component in the HTML file.</span>
+        <code-snippet [code]="snippets.html" language="xml"></code-snippet>
     </div>
 </section>
 
 <!-- API -->
-
 <section>
     <h2>API</h2>
     <div class="content-pane">
@@ -90,41 +69,49 @@ <h2>API</h2>
             <tbody>
                 <tr>
                     <td>
-                        <span class="name">config</span>
+                        <span class="name">code</span>
                     </td>
                     <td>
-                        <span class="type">RoughAnnotationConfig</span>
+                        <span class="type">string</span>
                     </td>
-                    <td></td>
-                    <td>Styling of the annotation.</td>
+                    <td>""</td>
+                    <td>Code to display.</td>
                 </tr>
                 <tr>
                     <td>
-                        <span class="name">reset</span>
+                        <span class="name">language</span>
+                    </td>
+                    <td>
+                        <span class="type">string</span>
+                    </td>
+                    <td>""</td>
+                    <td>Language of the code snippet. Automatic language detection is supported when this field is not provided.</td>
+                </tr>
+                <tr>
+                    <td>
+                        <span class="name">showCopy</span>
                     </td>
                     <td>
                         <span class="type">boolean</span>
                     </td>
                     <td>true</td>
-                    <td>Whether to re-animate annotation each time element enters viewport.</td>
+                    <td>Show/hide copy button.</td>
                 </tr>
                 <tr>
                     <td>
-                        <span class="name">delay</span>
+                        <span class="name">showLineNumbers</span>
                     </td>
                     <td>
-                        <span class="type">number</span>
+                        <span class="type">boolean</span>
                     </td>
-                    <td>1000</td>
-                    <td>Time before animation after element enters viewport (in ms).</td>
+                    <td>false</td>
+                    <td>Show/hide line numbers.</td>
                 </tr>
             </tbody>
         </table>
     </div>
 </section>
 
-<!-- TODO: Demo -->
-
 <hr />
 
 <!-- License -->