font CLI & UI

Codeinwp · Mar 22, 2021 · da27591 · da27591
1 parent 88d647e
commit da27591
Show file tree

Hide file tree

Showing 12 changed files with 289 additions and 41 deletions.
diff --git a/development/createFontConfigFile.js b/development/createFontConfigFile.js
@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+// Importing the Required Modules 
+const fs = require('fs'); 
+const readline = require('readline'); 
+
+const file = readline.createInterface({ 
+    input: fs.existsSync('development/fonts.txt') ? fs.createReadStream('development/fonts.txt') :  fs.createReadStream('fonts.txt'), 
+    output: process.stdout, 
+    terminal: false
+}); 
+
+const fonts = []
+file.on('line', (line) => { 
+    fonts.push(line.trim())
+}); 
+
+file.on('close', () => {
+    console.log(`Total Fonts: ${fonts.length} :`,fonts )
+    fs.writeFileSync( './src/assets/fonts/fonts.json', JSON.stringify(fonts, {}, 4), function(err) {
+        if (err) throw err;
+        console.log('Fonts JSON file created');
+    } )
+
+    const webpackFonts = fonts.map( function(font){
+        return {
+            family: font
+        }
+    })
+    fs.writeFileSync( './webpack.fonts.json', JSON.stringify(webpackFonts, {}, 4), function(err) {
+        if (err) throw err;
+        console.log('Webpack Fonts JSON file created');
+    } )
+})
diff --git a/development/fonts.txt b/development/fonts.txt
@@ -0,0 +1,33 @@
+Open Sans 
+Bangers 
+Roboto 
+Dancing Script 
+Henny Penny
+Alfa Slab One 
+Oswald 
+Anton 
+Permanent Marker 
+Cinzel Decorative 
+Lato 
+Karla 
+Montserrat 
+Libre Baskerville 
+Bebas Neue 
+Fira Sans 
+Play 
+Crete Round 
+Rajdhani 
+Satisfy  
+Lobster Two 
+Orbitron 
+Parisienne 
+Playball 
+Noto Serif 
+Noto Sans 
+Lora 
+Source Serif Pro 
+Ubuntu 
+Lemonada 
+UnifrakturMaguntia 
+Oleo Script Swash Caps 
+Creepster 
diff --git a/package.json b/package.json
@@ -7,9 +7,11 @@
     "start-plugin": "webpack --watch --mode development",
     "plugin-build": "webpack --mode production",
     "linux:make-zip": "npm run plugin-build && zip -r logo_maker_plugin.zip index.php plugin_build && mv logo_maker_plugin.zip development/",
+    "create:font:config": "node development/createFontConfigFile.js",
     "gen-docs": "npx typedoc",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
     "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\""
+
   },
   "dependencies": {
     "@beyonk/google-fonts-webpack-plugin": "^1.5.0",

diff --git a/plugin_build/logo-maker.asset.php b/plugin_build/logo-maker.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom'), 'version' => 'ae1bb6f1a2ca77fa74f2fa4343935695');
+<?php return array('dependencies' => array('react', 'react-dom'), 'version' => '3e63f244d75252778e7269ca7092b12d');
diff --git a/plugin_build/logo-maker.js b/plugin_build/logo-maker.js
diff --git a/src/assets/fonts/fonts.json b/src/assets/fonts/fonts.json
@@ -0,0 +1,35 @@
+[
+    "Open Sans",
+    "Bangers",
+    "Roboto",
+    "Dancing Script",
+    "Henny Penny",
+    "Alfa Slab One",
+    "Oswald",
+    "Anton",
+    "Permanent Marker",
+    "Cinzel Decorative",
+    "Lato",
+    "Karla",
+    "Montserrat",
+    "Libre Baskerville",
+    "Bebas Neue",
+    "Fira Sans",
+    "Play",
+    "Crete Round",
+    "Rajdhani",
+    "Satisfy",
+    "Lobster Two",
+    "Orbitron",
+    "Parisienne",
+    "Playball",
+    "Noto Serif",
+    "Noto Sans",
+    "Lora",
+    "Source Serif Pro",
+    "Ubuntu",
+    "Lemonada",
+    "UnifrakturMaguntia",
+    "Oleo Script Swash Caps",
+    "Creepster"
+]
diff --git a/src/assets/fonts/google-fonts.ts b/src/assets/fonts/google-fonts.ts
@@ -1,39 +1,47 @@
-const fonts = [
-    "Helvetica",
-    "Open Sans",
-    "Bangers",
-    "Roboto",
-    "Dancing Script",
-    "Henny Penny",
-    "Pacifico",
-    "Amatic SC",
-    "Alfa Slab One",
-    "Oswald",
-    "Anton",
-    "Permanent Marker",
-    "Cinzel Decorative",
-    "Lato",
-    "Karla",
-    "Montserrat",
-    "Libre Baskerville",
-    "Bebas Neue",
-    "IBM Plex Serif",
-    "Fira Sans",
-    "Caveat",
-    "Tinos",
-    "Play",
-    "Crete Round",
-    "Rajdhani",
-    "Satisfy",
-    "Arial",
-    "Consolas",
-    "Georgia",
-    "Lobster Two",
-    "Orbitron",
-    "Parisienne",
-    "Playball",
-    "Noto Serif"
-]
+import fonts from './fonts.json'
+console.log(fonts)
+// const fonts = [
+//     "Helvetica",
+//     "Open Sans",
+//     "Bangers",
+//     "Roboto",
+//     "Dancing Script",
+//     "Henny Penny",
+//     "Amatic SC",
+//     "Alfa Slab One",
+//     "Oswald",
+//     "Anton",
+//     "Permanent Marker",
+//     "Cinzel Decorative",
+//     "Lato",
+//     "Karla",
+//     "Montserrat",
+//     "Libre Baskerville",
+//     "Bebas Neue",
+//     "IBM Plex Serif",
+//     "Fira Sans",
+//     "Caveat",
+//     "Tinos",
+//     "Play",
+//     "Crete Round",
+//     "Rajdhani",
+//     "Satisfy",
+//     "Arial",
+//     "Georgia",
+//     "Lobster Two",
+//     "Orbitron",
+//     "Parisienne",
+//     "Playball",
+//     "Noto Serif",
+//     "Noto Sans",
+//     "Lora",
+//     "Source Serif Pro",
+//     "Ubuntu",
+//     "Lemonada",
+//     "UnifrakturMaguntia",
+//     "Oleo Script Swash Caps",
+//     "Creepster"
+// ]
 
 type WebpackFont = {
     family: string,

diff --git a/src/components/ui/SelectTypography.tsx b/src/components/ui/SelectTypography.tsx
@@ -83,6 +83,13 @@ const SelectTypography: React.FunctionComponent<unknown> = () => {
             ...base,
             boxShadow: "none",
         }),
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        option: (styles: Record<string, any>, { data } : { data: { label: string, value: string }}) => {
+            return {
+                ...styles,
+                fontFamily: ! Number.isInteger(Number.parseInt(data.value)) ? data.value : 'Nato Sans'
+            }
+        }
     }
 
     const defaultTitleFontFamily = UIStore.useState((s) => s.title.style.fontFamily)

diff --git a/src/engine/render/shapesBuilder.ts b/src/engine/render/shapesBuilder.ts
@@ -69,7 +69,6 @@ export function buildDefaultShapes(parent: Svg, componentsProps: LogoProps, font
     const title = isFontFromGoogle(pTitle.style.fontFamily) && fontRenderers ? buildTextToSVG(parent, pTitle, fontRenderers) || parent.text(pTitle.text)  : parent.text(pTitle.text)
     const slogan = isFontFromGoogle(pSlogan.style.fontFamily) && fontRenderers ? buildTextToSVG(parent, pSlogan, fontRenderers) || parent.text(pSlogan.text)  : parent.text(pSlogan.text)
 
-    console.log(isFontFromGoogle(pSlogan.style.fontFamily))
     // Apply other properties
     logo.viewbox(0, 0, logo.bbox().width, logo.bbox().height + 5)
         .size(pLogo.width, pLogo.height)

diff --git a/webpack.config.js b/webpack.config.js
@@ -3,7 +3,7 @@ const path = require("path");
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
 const GoogleFontsPlugin = require("@beyonk/google-fonts-webpack-plugin")
-const webpackFonts = require("./webpack.fonts")
+const webpackFonts = require("./webpack.fonts.json")
 
 module.exports = {
 	entry: {
@@ -36,7 +36,6 @@ module.exports = {
 		path: path.resolve(__dirname, "plugin_build"),
 		clean: true
 	},
-
 	plugins: [
 		new DependencyExtractionWebpackPlugin(),
 		new BundleAnalyzerPlugin({

diff --git a/webpack.fonts.js b/webpack.fonts.js
@@ -63,6 +63,36 @@ const familyFonts = [
     {
         family: "Noto Serif"
     },
+    {
+        family: "Noto Sans"
+    },
+    {
+        family: "Anton"
+    },
+    {
+        family: "Lora"
+    },
+    {
+        family: "Rajdhani"
+    },
+    {
+        family: "Ubuntu"
+    },
+    {
+        family: "Lemonada"
+    },
+    {
+        family: "Source Serif Pro"
+    },
+    {
+        family: "Oleo Script Swash Caps"
+    },
+    {
+        family: "Creepster"
+    },
+    {
+        family: "UnifrakturMaguntia"
+    }
 ]
 
 module.exports = familyFonts
diff --git a/webpack.fonts.json b/webpack.fonts.json
@@ -0,0 +1,101 @@
+[
+    {
+        "family": "Open Sans"
+    },
+    {
+        "family": "Bangers"
+    },
+    {
+        "family": "Roboto"
+    },
+    {
+        "family": "Dancing Script"
+    },
+    {
+        "family": "Henny Penny"
+    },
+    {
+        "family": "Alfa Slab One"
+    },
+    {
+        "family": "Oswald"
+    },
+    {
+        "family": "Anton"
+    },
+    {
+        "family": "Permanent Marker"
+    },
+    {
+        "family": "Cinzel Decorative"
+    },
+    {
+        "family": "Lato"
+    },
+    {
+        "family": "Karla"
+    },
+    {
+        "family": "Montserrat"
+    },
+    {
+        "family": "Libre Baskerville"
+    },
+    {
+        "family": "Bebas Neue"
+    },
+    {
+        "family": "Fira Sans"
+    },
+    {
+        "family": "Play"
+    },
+    {
+        "family": "Crete Round"
+    },
+    {
+        "family": "Rajdhani"
+    },
+    {
+        "family": "Satisfy"
+    },
+    {
+        "family": "Lobster Two"
+    },
+    {
+        "family": "Orbitron"
+    },
+    {
+        "family": "Parisienne"
+    },
+    {
+        "family": "Playball"
+    },
+    {
+        "family": "Noto Serif"
+    },
+    {
+        "family": "Noto Sans"
+    },
+    {
+        "family": "Lora"
+    },
+    {
+        "family": "Source Serif Pro"
+    },
+    {
+        "family": "Ubuntu"
+    },
+    {
+        "family": "Lemonada"
+    },
+    {
+        "family": "UnifrakturMaguntia"
+    },
+    {
+        "family": "Oleo Script Swash Caps"
+    },
+    {
+        "family": "Creepster"
+    }
+]