diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..61af16a --- /dev/null +++ b/.env.production @@ -0,0 +1 @@ +VUE_FONT_API_KEY=AIzaSyBOYf5oHoeJ88t4teIdvsNFBcN9MiUz1Iw diff --git a/README.md b/README.md index edec48d..545199a 100644 --- 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 diff --git a/package-lock.json b/package-lock.json index 0f30848..1001b1d 100644 --- 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", diff --git a/package.json b/package.json index 7f81fb9..41fe4bd 100644 --- 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", diff --git a/public/index.html b/public/index.html index 4123528..f754539 100644 --- a/public/index.html +++ b/public/index.html @@ -1,17 +1,19 @@ - - - - - - <%= htmlWebpackPlugin.options.title %> - - - -
- - + + + + + + + <%= htmlWebpackPlugin.options.title %> + + + +
+ + diff --git a/src/App.vue b/src/App.vue index 34e04e1..4f654b4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,21 +1,29 @@ @@ -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) { diff --git a/src/components/FontSelector.vue b/src/components/FontSelector.vue index 1d53d1f..2de5d58 100644 --- a/src/components/FontSelector.vue +++ b/src/components/FontSelector.vue @@ -1,10 +1,31 @@ diff --git a/vue.config.js b/vue.config.js index e69de29..a4f98fb 100644 --- a/vue.config.js +++ b/vue.config.js @@ -0,0 +1,4 @@ +module.exports = { + outputDir: './docs/', + publicPath: process.env.NODE_ENV === 'production' ? '/calligraphy/' : '/', +}