chore: bump version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "icjia-markdown-next",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/components/NavMarkdown.vue

@@ -6,31 +6,43 @@
         color="grey lighten-2"
         style="padding-top: 5px; z-index: 100; position: fixed; top: 50px;"
       >
-        <div v-for="tool in config.tools" :key="tool.action" class="hidden-sm-and-down">
+        <div
+          v-for="tool in config.tools"
+          :key="tool.action"
+          class="hidden-sm-and-down"
+          style="margin-left: -5px"
+        >
           <v-tooltip bottom>
             <v-btn small icon slot="activator" @click.prevent="getEntity(tool.action)">
               <v-icon size="20px">{{tool.icon}}</v-icon>
             </v-btn>
             <span>{{tool.tooltip}}</span>
           </v-tooltip>
         </div>
+
         <v-tooltip bottom>
           <v-btn
             small
             dark
             color="blue darken-4"
             slot="activator"
             @click.prevent="getEntity('saveMarkdown')"
-            style="font-size: 12px"
+            style="font-size: 10px; font-weight: 900"
           >Save
-            <v-icon dark right style="font-size: 18px">save_alt</v-icon>
+            <v-icon dark right style="font-size: 14px; font-weight: 900">save_alt</v-icon>
           </v-btn>
           <span>Save As Markdown</span>
         </v-tooltip>
 
         <v-dialog v-model="dialog" persistent max-width="290">
-          <v-btn small slot="activator" color="blue darken-4" dark>Load
-            <v-icon dark right style="font-size: 18px">cloud_upload</v-icon>
+          <v-btn
+            small
+            slot="activator"
+            color="blue darken-4"
+            dark
+            style="font-size: 10px; font-weight: 900"
+          >Load
+            <v-icon dark right style="font-size: 14px; font-weight: 900">cloud_upload</v-icon>
           </v-btn>
           <v-card class="text-xs-center">
             <v-card-title class="headline">Load Markdown File</v-card-title>
@@ -43,6 +55,26 @@
             </v-card-actions>
           </v-card>
         </v-dialog>
+
+        <v-tooltip bottom>
+          <v-menu
+            offset-y
+            nudge-left="100"
+            transition="slide-x-transition"
+            style="z-index: 150;"
+            slot="activator"
+          >
+            <v-btn icon slot="activator">
+              <v-icon>more_vert</v-icon>
+            </v-btn>
+            <v-list>
+              <v-list-tile v-for="(sample, index) in samples" :key="index" class="sampleTitle">
+                <v-list-tile-title v-on:click="loadSample(sample.body)">{{sample.title}}</v-list-tile-title>
+              </v-list-tile>
+            </v-list>
+          </v-menu>
+          <span>Load markdown samples</span>
+        </v-tooltip>
       </v-toolbar>
     </v-flex>
     <v-flex xs6 class="hidden-sm-and-down">
@@ -65,9 +97,9 @@
             dark
             slot="activator"
             @click.prevent="getEntity('showHtml')"
-            style="font-size: 11px"
+            style="font-size: 10px; font-weight: 900"
           >Show HTML
-            <v-icon dark right style="font-size: 18px">code</v-icon>
+            <v-icon dark right style="font-size: 14px;font-weight: 900">code</v-icon>
           </v-btn>
           <span>Show HTML</span>
         </v-tooltip>
@@ -78,9 +110,9 @@
             dark
             slot="activator"
             @click.prevent="getEntity('saveHtml')"
-            style="font-size: 12px"
+            style="font-size: 10px; font-weight: 900"
           >Save HTML
-            <v-icon dark right style="font-size: 18px">save_alt</v-icon>
+            <v-icon dark right style="font-size: 14px; font-weight: 900">save_alt</v-icon>
           </v-btn>
           <span>Save As HTML</span>
         </v-tooltip>
@@ -98,6 +130,7 @@ function clearFileInput(ctrl) {
     ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
   }
 }
+import { samples } from "@/samples";
 import { EventBus } from "@/event-bus.js";
 import config from "@/config";
 export default {
@@ -120,14 +153,16 @@ export default {
       document.head.appendChild(file);
       this.currentStyleSheet = e;
     },
+    loadSample(markdown) {
+      EventBus.$emit("loadMarkdown", markdown);
+    },
     loadMarkdown() {
       let fileInput = document.getElementById("fileInput");
-      let markdownDiv = document.getElementById("markdown");
+      //let markdownDiv = document.getElementById("markdown");
       let file = fileInput.files[0];
       let fileTitle = file.name;
       fileTitle = fileTitle.replace(/\.[^/.]+$/, "");
 
-      console.log(fileTitle);
       let reader = new FileReader();
       //Filereader: https://developer.mozilla.org/en-US/docs/Web/API/FileReader
       reader.onload = function(e) {
@@ -144,6 +179,7 @@ export default {
       currentStyleSheet: null,
       select: { text: "Default", value: "default.css" },
       config,
+      samples,
       dialog: false
     };
   }
@@ -162,4 +198,9 @@ export default {
 .v-btn--icon.v-btn--small {
   width: 20px !important;
 }
+
+.sampleTitle:hover {
+  cursor: pointer;
+  color: blue;
+}
 </style>

src/samples/boilerplate01.js

@@ -0,0 +1,36 @@
+const boilerplate01 =
+`# We respect your privacy​
+
+This is the web site of ***AGENCY NAME***
+
+Our postal address:
+
+***AGENCY NAME***
+
+*STREET ADDRESS 1*
+
+*STREET ADDRESS 2*
+
+*CITY, STATE ZIP*
+
+
+Our phone number:
+
+*PHONE NUMBER*
+
+We can also be reached via e-mail at the ICJIA's Information Clearinghouse:
+
+[EMAIL_ADDRESS](mailto:EMAIL_ADDRESS)
+
+Questions about the website should be directed to:
+
+[CONTACT_NAME](mailto:CONTACT_NAME)
+
+For each visitor to our Web page, our Web server automatically recognizes the visitor's IP address.
+
+We collect the domain name of users to our Web page, the e-mail addresses of those who communicate with us via e-mail, and aggregate information on what pages visitors access or visit and information volunteered by the visitor -- such as survey information and/or site registrations.
+
+The information we collect is used to improve our web content and services. If you want to receive e-mail from us in the future, please let us know by sending email to us at the above address or writing to us at the above address and telling us that you want to receive e-mail from our agency.
+
+Persons who supply us with their telephone numbers on-line may receive telephone contact from us with information regarding orders they have placed on-line.`
+export {boilerplate01}

src/samples/boilerplate02.js

@@ -0,0 +1,9 @@
+const boilerplate02 =
+`# This is Boilerplate 02
+
+Test one two three four.
+
+*test italics*
+
+`
+export {boilerplate02}

src/samples/boilerplate03.js

@@ -0,0 +1,129 @@
+const boilerplate03 =
+`# H1 HEADER
+
+
+Paragraphs are separated by a blank line.
+
+2nd paragraph. *Italic*, **bold**, and \`monospace\`. Itemized lists
+look like:
+
+  * this one
+  * that one
+  * the other one
+
+Note that --- not considering the asterisk --- the actual text
+content starts at 4-columns in.
+
+> Block quotes are
+> written like so.
+>
+> They can span multiple paragraphs,
+> if you like.
+
+Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
+in chapters 12--14"). Three dots ... will be converted to an ellipsis.
+Unicode is supported. ☺
+
+----
+
+## H2 HEADER
+### H3 HEADER
+#### h4 HEADER
+
+Here's a numbered list:
+
+ 1. first item
+ 2. second item
+ 3. third item
+
+Note again how the actual text starts at 4 columns in (4 characters
+from the left side). Here's a code sample:
+
+    # Let me re-iterate ...
+    for i in 1 .. 10 { do-something(i) }
+
+As you probably guessed, indented 4 spaces. By the way, instead of
+indenting the block, you can use delimited blocks, if you like:
+
+~~~
+define foobar() {
+    print "Welcome to flavor country!";
+}
+~~~
+
+(which makes copying & pasting easier). You can optionally mark the
+delimited block for Pandoc to syntax highlight it:
+
+~~~python
+import time
+# Quick, count to ten!
+for i in range(10):
+    # (but not *too* quick)
+    time.sleep(0.5)
+    print i
+~~~
+
+----
+
+### H3 HEADER
+
+Now a nested list:
+
+ 1. First, get these ingredients:
+
+      * carrots
+      * celery
+      * lentils
+
+ 2. Boil some water.
+
+ 3. Dump everything in the pot and follow
+    this algorithm:
+
+        find wooden spoon
+        uncover pot
+        stir
+        cover pot
+        balance wooden spoon precariously on pot handle
+        wait 10 minutes
+        goto first step (or shut off burner when done)
+
+    Do not bump wooden spoon or it will fall.
+
+Notice again how text always lines up on 4-space indents (including
+that last line which continues item 3 above).
+
+Here's a link to [a website](http://foo.bar), to a [local
+doc](local-doc.html), and to a [section heading in the current
+doc](#an-h2-header). Here's a footnote [^1].
+
+[^1]: Footnote text goes here.
+
+***
+
+and images can be specified like so:
+
+![example image](https://avatars0.githubusercontent.com/u/6942692?v=3&s=260 )
+
+And note that you can backslash-escape any punctuation characters
+which you wish to be displayed literally, ex.: \`foo\`, \*bar\*, etc.
+
+
+### Tables
+
+**Markdown Extra** has a special syntax for tables:
+
+Item     | Value
+-------- | ---
+Computer | $1600
+Phone    | $12
+Pipe     | $1
+
+You can specify column alignment with one or two colons:
+
+| Item     | Value | Qty   |
+| :------- | ----: | :---: |
+| Computer | $1600 |  5    |
+| Phone    | $12   |  12   |
+| Pipe     | $1    |  234  |`
+export {boilerplate03}

src/samples/boilerplate04.js

@@ -0,0 +1,18 @@
+const boilerplate04 = `# Footnotes
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget turpis nec justo volutpat efficitur. Sed ac sapien in magna faucibus faucibus eu sed nisl. Aenean non tristique odio, eu condimentum nisl. Suspendisse porttitor ante id lectus pharetra, id pretium odio lacinia. Vestibulum auctor volutpat pharetra. Nam rhoncus dapibus enim eget ornare.[^1] Phasellus convallis nisi a efficitur iaculis.[^2] Etiam tempus massa diam, sit amet lacinia metus suscipit sit amet. Nunc consequat ligula ac auctor mollis. Integer accumsan ornare neque, id dapibus elit. Ut accumsan lacinia metus nec luctus.[^3]
+
+
+[^1]: Here is the footnote.
+
+[^2]: Here is the second footnote.
+
+[^3]: Here's one with multiple blocks.
+
+    Subsequent paragraphs are indented to show that they
+belong to the previous footnote.
+
+
+
+`;
+export { boilerplate04 };