Development (#114)

* Update README.md * [FIX] Reupload the frontend code [ADDED] Template files to the react app [ENHANCEMENT] Reduced api calls to server * Updated static quote * .gitignore fix * [FRONTEND] Preview quotes and generate URL (#100) * [FIX] Reupload the frontend code [ADDED] Template files to the react app [ENHANCEMENT] Reduced api calls to server * Updated static quote * .gitignore fix * Width refactor in zues layout and change in static quote in frontend * Release/docs/v1.2 (#101) * [ Major Docs Updated ] | Documentation | updated ./README.md * [ Major Docs Updated ] | Documentation | updated ./README.md * Update README.md (#105) * Updated project from upstream * Fixed layout issues with dark mode * [FIX] Layout compatibility with Dark mode (#110) * [FIX] Reupload the frontend code [ADDED] Template files to the react app [ENHANCEMENT] Reduced api calls to server * Updated static quote * .gitignore fix * Updated project from upstream * Fixed layout issues with dark mode * Added Custom Font support * Added support for custom fonts in the Frontend * Updated contribution document to add custom fonts docs Co-authored-by: ShubhKotnala <skshubhankar@gmail.com> Co-authored-by: nishantpersonal <nishantvenugopalnair@gmail.com> Co-authored-by: Nishant Venugopal <67575384+nishantpersonal@users.noreply.github.com>
shravan20 · Feb 25, 2021 · 66cd748 · 66cd748
1 parent 57390ad
commit 66cd748
Show file tree

Hide file tree

Showing 15 changed files with 157 additions and 25 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -24,6 +24,7 @@ Pull requests are the best way to propose changes. We actively welcome your pull
 | 2 | [Design Layout Contribution](#layout-contribution) | Feel free to contribute to new design card layouts |
 | 3 | [Quotes Based on Gist file](#quote-based-on-github-gist-contribution) | Feel free to contribute to GitHub Gists |
 | 4 | [Quotes Based on Categories](#category-based-quotes) | Feel free to contribute to adding quotes to categories and new categories with quotes itself |
+| 5 | [Custom Fonts for Quotes](#custom-fonts) | Feel free to contribute to adding custom fonts |
 
 
 ## Themes Contribution
@@ -89,6 +90,36 @@ You can also provide a category to fetch the list of quotes based on certain cat
 <br>
 
 
+## Custom Fonts
+You can provide fonts data to show the quotes in the font. 
+
+#### Follow the steps to add custom fonts for the quotes,
+##### Server
+- Select the font from [Google fonts](https://fonts.google.com)
+- Get the CSS link of the font
+  - Example https://fonts.googleapis.com/css2?family=Redressed
+- Generate BASE 64 font data from using any tool of your choice, or using [this](https://amio.github.io/embedded-google-fonts/) tool
+-  Add the font you want in this [file](./src/fonts/fonts.js) in the following pattern, 
+   - `FONT_NAME:{
+    fontFamily: 'family', 
+    src: 'BASE_64 FONT DATA'
+  }`
+  
+- Use `font=FONT_NAME` as shown below
+  - ```
+    ![Quote](https://github-readme-quotes.herokuapp.com/quote?font=FONT_NAME)
+    ```
+##### Frontend
+
+-  Add the font you want in this [file](./frontend/src/util/fonts/index.js) in the following pattern, 
+   - `FONT_NAME:{
+    fontFamily: 'family', 
+    src: 'BASE_64 FONT DATA'
+  }`
+- Add the FONT_NAME in the `fonts` array in the [file](./frontend/src/config/cardTemplate/index.js)
+
+<br>
+
 
 ## Any contributions you make will be under the MIT Software License
 

diff --git a/frontend/src/components/Pages/Home/index.js b/frontend/src/components/Pages/Home/index.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Typography, Grid } from '@material-ui/core';
 import TemplateCard from '../../organisms/TemplateCard';
-import { themes, animations, layouts } from '../../../config/cardTemplate';
+import { themes, animations, layouts, fonts } from '../../../config/cardTemplate';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 
@@ -10,6 +10,7 @@ const Home = () => {
     const [theme, setTheme] = useState(themes[0]);
     const [animation, setAnimation] = useState(animations[0]);
     const [layout, setLayout] = useState(layouts[0]);
+    const [font, setFont] = useState(fonts[0]);
 
     return (
         <React.Fragment>
@@ -21,7 +22,7 @@ const Home = () => {
                 spacing={3}
             >
 
-                <Grid item xs={12} sm={6} md={4}>
+                <Grid item xs={12} sm={6} lg={3}>
                     <Autocomplete
                         id="theme"
                         options={themes}
@@ -34,7 +35,7 @@ const Home = () => {
                         renderInput={(params) => <TextField {...params} label="Theme" variant="outlined" />}
                     />
                 </Grid>
-                <Grid item xs={12} sm={6} md={4}>
+                <Grid item xs={12} sm={6} lg={3}>
                     <Autocomplete
                         id="layout"
                         options={layouts}
@@ -47,7 +48,7 @@ const Home = () => {
                         renderInput={(params) => <TextField {...params} label="Layout" variant="outlined" />}
                     />
                 </Grid>
-                <Grid item xs={12} sm={12} md={4}>
+                <Grid item xs={12} sm={6} lg={3}>
                     <Autocomplete
                         id="animation"
                         options={animations}
@@ -62,21 +63,34 @@ const Home = () => {
 
                 </Grid>
 
+                <Grid item xs={12} sm={6} lg={3}>
+                    <Autocomplete
+                        id="font"
+                        options={fonts}
+                        value={font}
+                        style={{ width: 300 }}
+                        onChange={(_event, newValue) => {
+                            if (newValue != null)
+                                setFont(newValue)
+                        }}
+                        renderInput={(params) => <TextField {...params} label="Font" variant="outlined" />}
+                    />
+                </Grid>
+
             </Grid>
 
             <Grid container spacing={4}>
                 <Grid item xs={12}>
-                    <TemplateCard theme={theme} animation={animation} layout={layout} />
+                    <TemplateCard theme={theme} animation={animation} layout={layout} font={font} />
                 </Grid>
                 <Grid item xs={12}>
                     <Typography align="center">Other layouts</Typography>
-                    {console.log("All Layouts ", layouts)}
                 </Grid>
                 {
                     layouts.filter((item) => item !== layout).map((restLayout) => {
                         return (
                             <Grid key={restLayout} item xs={12} sm={12} md={6}>
-                                <TemplateCard theme={theme} animation={animation} layout={restLayout} />
+                                <TemplateCard theme={theme} animation={animation} layout={restLayout} font={font} />
                             </Grid>
                         )
                     })

diff --git a/frontend/src/components/organisms/TemplateCard/index.js b/frontend/src/components/organisms/TemplateCard/index.js
@@ -13,6 +13,7 @@ import Template from "../../../util/template/Template";
 import mainLayouts from "../../../util/layouts";
 import mainAnimations from "../../../util/animation";
 import mainThemes from "../../../util/themes";
+import mainFonts from "../../../util/fonts";
 
 const TemplateCard = (props) => {
   const [showSnackbar, setShowSnackbar] = useState(false);
@@ -26,6 +27,7 @@ const TemplateCard = (props) => {
   };
   template.setTheme(mainThemes[props.theme]);
   template.setData(data);
+  template.setFont(mainFonts[props.font]);
   template.setAnimation(mainAnimations[props.animation]);
   template.setLayout(mainLayouts[props.layout]);
 
@@ -49,7 +51,7 @@ const TemplateCard = (props) => {
     setShowSnackbar(false);
   };
 
-  const quoteUrl = `https://github-readme-quotes.herokuapp.com/quote?theme=${props.theme}&animation=${props.animation}&layout=${props.layout}`;
+  const quoteUrl = `https://github-readme-quotes.herokuapp.com/quote?theme=${props.theme}&animation=${props.animation}&layout=${props.layout}&font=${props.font}`;
 
   function SlideTransition(prop) {
     return <Slide {...prop} direction="up" />;

diff --git a/frontend/src/config/cardTemplate/index.js b/frontend/src/config/cardTemplate/index.js
@@ -43,4 +43,5 @@ export const themes = ['default',
     'slateorange',
     'kacho_ga'];
 export const animations = ['default', 'grow_out_in'];
-export const layouts = ['default', 'samuel', 'churchill', 'socrates', 'zues'];
+export const layouts = ['default', 'samuel', 'churchill', 'socrates', 'zues'];
+export const fonts = ['default', 'Gabrielle', 'Redressed'];
diff --git a/frontend/src/util/fonts/index.js b/frontend/src/util/fonts/index.js
diff --git a/frontend/src/util/layouts/index.js b/frontend/src/util/layouts/index.js
@@ -7,7 +7,7 @@ const layouts = {
                   box-sizing: border-box;
                   }
                   .container {
-                  font-family: Arial, Helvetica, sans-serif;
+                  font-family:customFont, Arial, Helvetica, sans-serif;
                   padding: 40px 20px;
                   width: 600px;
                   background-color: #${template.theme.bg_color};
@@ -53,7 +53,7 @@ const layouts = {
         style: (template) => {
             return `.square-brackets-quote {
                   display:inline-block;
-                  font-family:Arial,Helvetica,sans-serif;
+                  font-family:customFont,Arial,Helvetica,sans-serif;
                   margin:1em;
                   width:600px;
                   ${template.animation.animation};
@@ -116,6 +116,7 @@ const layouts = {
                     width:600px;
                     margin: 20px 50px 20px 10px;
                     text-align:center;
+                    font-family:customFont,Arial,Helvetica,sans-serif;
                     position:relative;
                     color:#${template.theme.quote_color};
                     padding:15px;
@@ -230,6 +231,7 @@ const layouts = {
                     display: inline-block;
                     margin: 1em;
                     width:600px;
+                    font-family:customFont,Arial,Helvetica,sans-serif;
                     ${template.animation.animation};
                   } 
                   ${template.animation.keyframes}
@@ -293,6 +295,7 @@ const layouts = {
               width:550px;
               height:auto;
               padding:30px 20px 40px 40px;
+              font-family:customFont,Arial,Helvetica,sans-serif;
               ${template.animation.animation};
           }
           ${template.animation.keyframes}
@@ -313,7 +316,6 @@ const layouts = {
                     .quote4::before, .quote4::after{
                       position:absolute;
                       font-size:105px;
-                      font-family: 'Dosis', sans-serif;
                       background:#000;
                       display:block;
                       height:30px;
@@ -349,22 +351,18 @@ const layouts = {
                       width:100%;
                       color: #DAB49D;
                       font-size:14px;  
-                      font-family: 'Dosis', sans-serif;
                       text-transform:uppercase;
                       letter-spacing:1px;
                     }
                     .quote4 .txt{
                       color:#F3E9DC;
-                      font-size:16px;
-                      font-family: 'Roboto Slab', serif;  
-                      
+                      font-size:16px; 
                     }
   
                     .quote4 .from{
                       text-align:center;
                       margin-top:15px;
                       font-size:13px;
-                      font-family: 'Exo', sans-serif;
                       color: #5E3023;
                     }
   

diff --git a/frontend/src/util/template/Template.js b/frontend/src/util/template/Template.js
@@ -29,6 +29,10 @@ class Template {
     this.structure = structure(this);
   }
 
+  setFont(font){
+    this.font = font;
+  }
+
   calculateHeight(length) {
     let lines;
     if (this.layout !== layouts["zues"]) {

diff --git a/frontend/src/util/template/getTemplate.js b/frontend/src/util/template/getTemplate.js
@@ -3,6 +3,14 @@ const getTemplate = (template) => {
       <svg width="700px" height="${parseInt(
         template.height
       )}px" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+          <style>
+          @font-face{
+            font-family: "customFont";
+            src: ${template.font.src}
+          }
+          </style>
+      </defs>
       <foreignObject width="100%" height="100%">
           <div xmlns="http://www.w3.org/1999/xhtml">
               <style>

diff --git a/src/api/controllers/quotesController.js b/src/api/controllers/quotesController.js
@@ -2,6 +2,7 @@ const themes = require("../../themes/themes");
 const animations = require("../../animations/animation");
 const layouts=require("../../layouts/layout");
 const quoteService=require("../services/quotesService");
+const fonts=require("../../fonts/fonts");
 
 const quoteController = async (req, res, next) => {
 
@@ -18,7 +19,9 @@ const quoteController = async (req, res, next) => {
 
      let quoteCategory = req.query.quoteCategory || '';
 
-     let quoteObject={theme,animation,layout,quotesUrl,quoteCategory}
+     let font = fonts[req.query.font] ? fonts[req.query.font] : fonts['default'];
+
+     let quoteObject={theme,animation,layout,quotesUrl,quoteCategory,font}
 
      let svgResponse = await quoteService.getQuote(quoteObject);
 

diff --git a/src/api/services/quotesService.js b/src/api/services/quotesService.js
@@ -7,10 +7,9 @@ const quoteFromCategory = require('../../../customQuotes/category.json');
 
 const getQuote = async (quoteObj) => {
   try {
-    let { theme, animation, layout, quotesUrl, quoteCategory } = quoteObj;
+    let { theme, animation, layout, quotesUrl, quoteCategory, font } = quoteObj;
     let apiResponse;
     let { customQuotesUrl, isValidUrl } = await getValidUrl(quotesUrl);
-
     if (isValidUrl) {
       //url from params is valid, proceed to verfiy the data
       apiResponse = await requestApi(customQuotesUrl);
@@ -35,6 +34,7 @@ const getQuote = async (quoteObj) => {
     const template = new Template();
     template.setTheme(theme);
     template.setData(apiResponse);
+    template.setFont(font);
     template.setAnimation(animation);
     template.setLayout(layout);
 

diff --git a/src/common/getTemplate.js b/src/common/getTemplate.js
@@ -3,6 +3,14 @@ const getTemplate = (template) => {
     <svg width="700px" height="${parseInt(
       template.height
     )}px" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <style>
+      @font-face{
+        font-family: "customFont";
+        src: ${template.font.src}
+      }
+      </style>
+    </defs>
     <foreignObject width="100%" height="100%">
         <div xmlns="http://www.w3.org/1999/xhtml">
             <style>

diff --git a/src/fonts/README.md b/src/fonts/README.md
@@ -0,0 +1,23 @@
+## Available fonts
+
+You can add fonts to your templates without any manual customization.
+
+Use `?font=FONT_NAME` parameter like so :-
+
+```md
+![Quote](https://github-readme-quotes.herokuapp.com/quote?font=Redressed)
+```
+
+### Fonts
+
+- Default <br>
+
+![Quote](https://github-readme-quotes.herokuapp.com/quote?theme=dark)
+
+- Gabrielle <br>
+
+![Quote](https://github-readme-quotes.herokuapp.com/quote?theme=dark&font=Gabrielle)
+
+- Redressed <br>
+
+![Quote](https://github-readme-quotes.herokuapp.com/quote?theme=dark&font=Redressed)
diff --git a/src/fonts/fonts.js b/src/fonts/fonts.js