xevion/calligraphy
1
0
Fork 0
mirror of https://github.com/Xevion/calligraphy.git synced 2025-12-06 07:14:34 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Xevion
2020-08-24 20:29:58 -05:00
parent ea13340efd
commit c34a648f1b
8 changed files with 98 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.env.production Normal file
View File

@@ -0,0 +1 @@
VUE_FONT_API_KEY=AIzaSyBOYf5oHoeJ88t4teIdvsNFBcN9MiUz1Iw

5
README.md
View File

@@ -19,6 +19,11 @@ generated sheets on the fly.
- Guideline Color - Guideline Color
- Guideline Style - 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 ## Local Deployment
- Project setup - Project setup

5
package-lock.json generated
View File

@@ -11155,6 +11155,11 @@
"vue-toc": "0.0.1" "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": { "vue-style-loader": {
"version": "4.1.2", "version": "4.1.2",
"resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz", "resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz",

3
package.json
View File

@@ -14,7 +14,8 @@
"sass-loader": "^10.0.1", "sass-loader": "^10.0.1",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-axios": "^2.1.5", "vue-axios": "^2.1.5",
"vue-highlightjs": "^1.3.3" "vue-highlightjs": "^1.3.3",
"vue-material-design-icons": "^4.9.0"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-babel": "~4.5.0",

4
public/index.html
View File

@@ -4,12 +4,14 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <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"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->

53
src/App.vue
View File

@@ -1,21 +1,29 @@
<template> <template>
<div id="app"> <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"> <div class="md-layout-item md-size-50">
<md-field> <md-field>
<label for="fonturl">Font URL</label> <label for="fonturl">Font URL</label>
<md-input id="fonturl" v-model="fontURL"></md-input> <md-input id="fonturl" v-model="fontURL"></md-input>
</md-field> </md-field>
</div> </div>
<div class="md-layout-item md-size-20"> <div class="md-layout-item md-size-30 md-layout md-alignment-center-right">
<md-button class="md-raised md-primary" v-on:click="loadFile(fontURL)">Load Font</md-button> <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-20">
<md-button class="md-raised md-primary" v-on:click="createPDF">Save PDF</md-button>
</div> </div>
<div class="md-layout-item md-size-100"> <div class="md-layout-item md-size-100">
<md-card style="padding: 0.10em 0.3em;"> <md-card style="padding: 1.5em 1.5em 1.8em;">
<pre v-highlightjs="JSON.stringify({'data': fontData})"><code class="json"></code></pre> <span id="font-data">{{ fontData }}</span>
</md-card> </md-card>
</div> </div>
</div> </div>
@@ -23,13 +31,16 @@
</template> </template>
<style lang="css"> <style lang="css">
#app { body, html {
width: 50%; font-family: "Roboto", sans-serif;
margin: 60px auto;
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
}
#app {
width: 50%;
margin: 60px auto;
color: #2c3e50; color: #2c3e50;
} }
@@ -37,7 +48,8 @@
background-color: transparent !important; background-color: transparent !important;
} }
pre { #font-data {
padding: 0 2em;
white-space: pre-wrap; /* css-3 */ white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */ white-space: -pre-wrap; /* Opera 4-6 */
@@ -52,7 +64,8 @@ import axios from 'axios';
export default { export default {
name: 'App', name: 'App',
components: {}, components: {
},
data() { data() {
return { return {
fontURL: "https://themes.googleusercontent.com/static/fonts/anonymouspro/v3/WDf5lZYgdmmKhO8E1AQud--Cz_5MeePnXDAcLNWyBME.ttf", fontURL: "https://themes.googleusercontent.com/static/fonts/anonymouspro/v3/WDf5lZYgdmmKhO8E1AQud--Cz_5MeePnXDAcLNWyBME.ttf",
@@ -61,18 +74,24 @@ export default {
} }
}, },
methods: { methods: {
getFonts() {
this.directAxios.get({
url: `https://www.googleapis.com/webfonts/v1/webfonts?key=${process.env.FONT_API_KEY}`
})
},
createPDF() { createPDF() {
var doc = new jsPDF(); var doc = new jsPDF();
if(!this.fontData) if (!this.fontData)
this.loadFile(this.fontURL) 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.addFont('antic.ttf', 'Antic', 'regular')
doc.setFont('Antic', 'regular'); doc.setFont('Antic', 'regular');
// doc.setFontType("regular");
doc.setFontSize(15); 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'); doc.save('test.pdf');
}, },
loadFile(fontURL) { loadFile(fontURL) {

25
src/components/FontSelector.vue
View File

@@ -1,10 +1,31 @@
<template> <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> </template>
<script> <script>
export default { export default {
name: "FontSelector" name: "FontSelector",
data: () => ({})
} }
</script> </script>

4
vue.config.js
View File

@@ -0,0 +1,4 @@
module.exports = {
outputDir: './docs/',
publicPath: process.env.NODE_ENV === 'production' ? '/calligraphy/' : '/',
}