README, general font icon, google fonts API, ready for FontSelector component, testing/fixes with jsPDF

2025-12-06 01:14:35 -06:00 · 2020-08-24 20:29:58 -05:00
parent ea13340efd
commit c34a648f1b
8 changed files with 98 additions and 40 deletions
--- a/.env.production
+++ b/.env.production
@@ -0,0 +1 @@
+VUE_FONT_API_KEY=AIzaSyBOYf5oHoeJ88t4teIdvsNFBcN9MiUz1Iw
--- a/README.md
+++ b/README.md
@@ -18,6 +18,11 @@ generated sheets on the fly.
    - Guideline Opacity
    - Guideline Color
    - Guideline Style
+    
+## Method
+
+Vue.js is used to manage all of the UI. Material Design is the CSS framework used to design this
+web application. 

 ## Local Deployment

--- a/package-lock.json
+++ b/package-lock.json
@@ -11155,6 +11155,11 @@
        "vue-toc": "0.0.1"
      }
    },
+    "vue-material-design-icons": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-4.9.0.tgz",
+      "integrity": "sha512-g+4dKL2Dk0oHljLoUoeeu41z1moHaUcjEIz5H+ml52KTzimPA86W/kj9/kfbI7Ex24lEMGFAxpD6jU3rEJvlwg=="
+    },
    "vue-style-loader": {
      "version": "4.1.2",
      "resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz",
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
    "sass-loader": "^10.0.1",
    "vue": "^2.6.11",
    "vue-axios": "^2.1.5",
-    "vue-highlightjs": "^1.3.3"
+    "vue-highlightjs": "^1.3.3",
+    "vue-material-design-icons": "^4.9.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
--- a/public/index.html
+++ b/public/index.html
@@ -1,17 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width,initial-scale=1.0">
+        <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">
+        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+        <title><%= htmlWebpackPlugin.options.title %></title>
+    </head>
+    <body>
+        <noscript>
+            <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript
+                enabled. Please enable it to continue.</strong>
+        </noscript>
+        <div id="app"></div>
+        <!-- built files will be auto injected -->
+    </body>
 </html>
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,21 +1,29 @@
 <template>
    <div id="app">
-        <div class="md-layout md-center md-alignment-center-center">
+        <div class="md-layout md-center md-alignment-center-space-between">
            <div class="md-layout-item md-size-50">
                <md-field>
                    <label for="fonturl">Font URL</label>
                    <md-input id="fonturl" v-model="fontURL"></md-input>
                </md-field>
            </div>
-            <div class="md-layout-item md-size-20">
-                <md-button class="md-raised md-primary" v-on:click="loadFile(fontURL)">Load Font</md-button>
-            </div>
-            <div class="md-layout-item md-size-20">
-                <md-button class="md-raised md-primary" v-on:click="createPDF">Save PDF</md-button>
+            <div class="md-layout-item md-size-30 md-layout md-alignment-center-right">
+                    <div class="md-layout-item">
+                        <md-button class="md-raised md-primary" v-on:click="loadFile(fontURL)">
+                            Load Font
+                            <md-icon>cached</md-icon>
+                        </md-button>
+                    </div>
+                    <div class="md-layout-item">
+                        <md-button class="md-raised md-primary" v-on:click="createPDF">
+                            Save PDF
+                            <md-icon class="md-size-1x">get_app</md-icon>
+                        </md-button>
+                    </div>
            </div>
            <div class="md-layout-item md-size-100">
-                <md-card style="padding: 0.10em 0.3em;">
-                    <pre v-highlightjs="JSON.stringify({'data': fontData})"><code class="json"></code></pre>
+                <md-card style="padding: 1.5em 1.5em 1.8em;">
+                    <span id="font-data">{{ fontData }}</span>
                </md-card>
            </div>
        </div>
@@ -23,13 +31,16 @@
 </template>

 <style lang="css">
-#app {
-    width: 50%;
-    margin: 60px auto;
-    font-family: Avenir, Helvetica, Arial, sans-serif;
+body, html {
+    font-family: "Roboto", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
+}
+
+#app {
+    width: 50%;
+    margin: 60px auto;
    color: #2c3e50;
 }

@@ -37,12 +48,13 @@
    background-color: transparent !important;
 }

-pre {
- white-space: pre-wrap;       /* css-3 */
- white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
- white-space: -pre-wrap;      /* Opera 4-6 */
- white-space: -o-pre-wrap;    /* Opera 7 */
- word-wrap: break-word;       /* Internet Explorer 5.5+ */
+#font-data {
+    padding: 0 2em;
+    white-space: pre-wrap; /* css-3 */
+    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
+    white-space: -pre-wrap; /* Opera 4-6 */
+    white-space: -o-pre-wrap; /* Opera 7 */
+    word-wrap: break-word; /* Internet Explorer 5.5+ */
 }
 </style>

@@ -52,7 +64,8 @@ import axios from 'axios';

 export default {
    name: 'App',
-    components: {},
+    components: {
+    },
    data() {
        return {
            fontURL: "https://themes.googleusercontent.com/static/fonts/anonymouspro/v3/WDf5lZYgdmmKhO8E1AQud--Cz_5MeePnXDAcLNWyBME.ttf",
@@ -61,18 +74,24 @@ export default {
        }
    },
    methods: {
+        getFonts() {
+            this.directAxios.get({
+                url: `https://www.googleapis.com/webfonts/v1/webfonts?key=${process.env.FONT_API_KEY}`
+            })
+        },
        createPDF() {
            var doc = new jsPDF();

-            if(!this.fontData)
+            if (!this.fontData)
                this.loadFile(this.fontURL)

-            doc.addFileToVFS('antic.ttf', this.fontURL);
+            console.log(this.fontData)
+
+            doc.addFileToVFS('antic.ttf', this.fontData);
            doc.addFont('antic.ttf', 'Antic', 'regular')
            doc.setFont('Antic', 'regular');
-            // doc.setFontType("regular");
            doc.setFontSize(15);
-            doc.text("Some Text with Google Fonts", 0, 10);
+            doc.text("Some Text with Google Fonts", 5, 10);
            doc.save('test.pdf');
        },
        loadFile(fontURL) {
--- a/src/components/FontSelector.vue
+++ b/src/components/FontSelector.vue
@@ -1,10 +1,31 @@
 <template>
-$END$
+    <div>
+        <md-dialog :md-active.sync="showDialog">
+            <md-dialog-title>Preferences</md-dialog-title>
+
+            <md-tabs md-dynamic-height>
+                <md-tab md-label="General">
+                </md-tab>
+
+                <md-tab md-label="Activity">
+                </md-tab>
+
+                <md-tab md-label="Account">
+                </md-tab>
+            </md-tabs>
+
+            <md-dialog-actions>
+                <md-button class="md-primary" @click="showDialog = false">Close</md-button>
+                <md-button class="md-primary" @click="showDialog = false">Save</md-button>
+            </md-dialog-actions>
+        </md-dialog>
+    </div>
 </template>

 <script>
 export default {
-name: "FontSelector"
+    name: "FontSelector",
+    data: () => ({})
 }
 </script>

--- a/vue.config.js
+++ b/vue.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+    outputDir: './docs/',
+    publicPath: process.env.NODE_ENV === 'production' ? '/calligraphy/' : '/',
+}
				`@@ -0,0 +1 @@`
				`VUE_FONT_API_KEY=AIzaSyBOYf5oHoeJ88t4teIdvsNFBcN9MiUz1Iw`