Add Customizable Border Color Option to Default Layout (#332) (#333)

* Implemented an option to customize the border color in the default layout. (#332) * Added Border Color customization instructions to README. (#332) * Added option to customize border color in the UI. (#332)
shravan20 · Dec 3, 2024 · 8d91674 · 8d91674
1 parent f032d11
commit 8d91674
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -243,6 +243,20 @@ You can also provide a category to fetch the list of quotes based on certain cat
 
 ---
 
+- ### Border Color
+
+You can customize the border color of your templates. Please note that this feature is available only with the Default layout.
+
+Use `?borderColor=COLOR` paramater as shown below
+
+```md
+![Quote](https://github-readme-quotes-bay.vercel.app/quote?borderColor=green)
+```
+
+![Quote](https://github-readme-quotes-bay.vercel.app/quote?borderColor=green)
+
+---
+
 ## Swagger Docs
 
 To view Swagger docs, run `npm start` and open ![localhost:3002/api-docs](localhost:3002/api-docs).

diff --git a/frontend/src/components/Pages/Home/index.js b/frontend/src/components/Pages/Home/index.js
@@ -1,10 +1,19 @@
 import React, { useState } from 'react';
-import { Typography, Grid } from '@material-ui/core';
+import { Typography, Grid, Tooltip } from '@material-ui/core';
 import TemplateCard from '../../organisms/TemplateCard';
 import { themes, animations, layouts, fonts, colorValues, quoteTypes } from '../../../config/cardTemplate';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import ContributorsCard from '../../ContributorsCard/ContributorCard'
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+    customTooltip: {
+      fontSize: '16px',
+      fontWeight: 'bold'
+    },
+  });
+
 const Home = () => {
 
     const [theme, setTheme] = useState(themes[0]);
@@ -13,8 +22,11 @@ const Home = () => {
     const [font, setFont] = useState(fonts[0]);
     const [fontColor, setFontColor] = useState(null);
     const [bgColor, setBgColor] = useState(null);
+    const [borderColor, setBorderColor] = useState(null);
     const [quoteType, setQuoteType] = useState("random");
 
+    const classes = useStyles();
+
     return (
         <React.Fragment>
 
@@ -112,6 +124,26 @@ const Home = () => {
                     />
                 </Grid>
 
+                <Grid item xs={12} sm={6} lg={3}>
+                    <Tooltip 
+                        title="This option only works with the default layout." 
+                        placement="top" 
+                        arrow 
+                        classes={{ tooltip: classes.customTooltip }}
+                    >
+                        <Autocomplete
+                            id="border-color"
+                            options={colorValues}
+                            value={borderColor}
+                            style={{ width: 300 }}
+                            onChange={(_event, newValue) => {
+                                setBorderColor(newValue)
+                            }}
+                            renderInput={(params) => <TextField {...params} label="Border color" placeholder="Select a color" variant="outlined" />}
+                        />
+                    </Tooltip>
+                </Grid>
+
                 <Grid item xs={12} sm={6} lg={3}>
                     <Autocomplete
                         id="quote-type"
@@ -130,7 +162,7 @@ const Home = () => {
 
             <Grid container spacing={4}>
                 <Grid item xs={12} style={{ marginTop: '20px' }}>
-                    <TemplateCard theme={theme} animation={animation} layout={layout} font={font} fontColor={fontColor} bgColor={bgColor} quoteType={quoteType} />
+                    <TemplateCard theme={theme} animation={animation} layout={layout} font={font} fontColor={fontColor} bgColor={bgColor} borderColor={borderColor} quoteType={quoteType} />
                 </Grid>
                 <Grid item xs={12}>
                     <Typography align="center">Other layouts</Typography>
@@ -139,7 +171,7 @@ const Home = () => {
                     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} font={font} fontColor={fontColor} bgColor={bgColor} quoteType={quoteType} />
+                                <TemplateCard theme={theme} animation={animation} layout={restLayout} font={font} fontColor={fontColor} bgColor={bgColor} borderColor={borderColor} quoteType={quoteType} />
                             </Grid>
                         )
                     })

diff --git a/frontend/src/components/organisms/TemplateCard/index.js b/frontend/src/components/organisms/TemplateCard/index.js
@@ -36,10 +36,14 @@ const TemplateCard = (props) => {
     theme.bg_color = props.bgColor;
   }
 
+  const isLayoutDefault = props.layout === 'default';
+  const borderColor = isLayoutDefault && props.borderColor ? props.borderColor : 'rgba(0, 0, 0, 0.2)';
+
   template.setTheme(theme);
   template.setData(data);
   template.setFont(mainFonts[props.font]);
   template.setAnimation(mainAnimations[props.animation]);
+  template.setBorderColor(borderColor);
   template.setLayout(mainLayouts[props.layout]);
   const file = new Blob([getTemplate(template)], { type: "image/svg+xml" });
   const url = URL.createObjectURL(file);
@@ -72,7 +76,8 @@ const TemplateCard = (props) => {
     font: props.font,
     quoteType: props.quoteType,
     ...(props.bgColor && { bgColor: props.bgColor }),
-    ...(props.fontColor && { fontColor: props.fontColor })
+    ...(props.fontColor && { fontColor: props.fontColor }),
+    ...(isLayoutDefault && props.borderColor && { borderColor }),
   });
   const quoteUrl = `${originUrl}/quote?${params.toString()}`;
 

diff --git a/frontend/src/util/layouts/index.js b/frontend/src/util/layouts/index.js
@@ -11,7 +11,7 @@ const layouts = {
                   padding: 40px 20px;
                   min-width: 600px;
                   background-color: ${template.theme.bg_color};
-                  border: 1px solid rgba(0, 0, 0, 0.2);
+                  border: 1px solid ${template.borderColor};
                   border-radius: 5px;
                   ${template.animation.animation};
                   }

diff --git a/frontend/src/util/template/Template.js b/frontend/src/util/template/Template.js
@@ -21,6 +21,11 @@ class Template {
     this.setStructure(layout.structure);
     this.calculateHeight(this.quote.length);
   }
+
+  setBorderColor(borderColor) {
+    this.borderColor = borderColor;
+  }
+
   setStyle(style) {
     this.css = style(this);
   }

diff --git a/src/api/controllers/quotesController.js b/src/api/controllers/quotesController.js
@@ -18,6 +18,8 @@ const quoteController = async (req, res, next) => {
       theme.bg_color = bgColor;
     }
 
+    let borderColor = req.query.borderColor || 'rgba(0, 0, 0, 0.2)';
+
     let animation = animations[req.query.animation] ? animations[req.query.animation]
       : animations["default"];
 
@@ -39,10 +41,10 @@ const quoteController = async (req, res, next) => {
       quotesUrl,
       quoteCategory,
       font,
-      quoteType
+      quoteType,
+      borderColor
     }
 
-
     let svgResponse = await quoteService.getQuote(quoteObject);
 
     res.setHeader("Content-Type", "image/svg+xml");

diff --git a/src/api/services/quotesService.js b/src/api/services/quotesService.js
@@ -15,7 +15,7 @@ getQuoteIndex = (apiResponseLength, quoteType) => {
 const getQuote = async (quoteObj) => {
 
   try {
-    let { theme, animation, layout, quotesUrl, quoteCategory, font, quoteType } = quoteObj;
+    let { theme, animation, layout, quotesUrl, quoteCategory, font, quoteType, borderColor } = quoteObj;
     let apiResponse;
     let { customQuotesUrl, isValidUrl } = await getValidUrl(quotesUrl);
     let isCustomQuote = false;
@@ -49,6 +49,7 @@ const getQuote = async (quoteObj) => {
     template.setData(isCustomQuote ? apiResponse : apiResponse[Math.floor(getQuoteIndex(apiResponse.length, quoteType))]);
     template.setFont(font);
     template.setAnimation(animation);
+    template.setBorderColor(borderColor);
     template.setLayout(layout);
 
     let svg = cardTemplate.generateTemplate(template);

diff --git a/src/layouts/layout.js b/src/layouts/layout.js
@@ -11,7 +11,7 @@ const layouts = {
                 padding: 40px 20px;
                 min-width: 600px;
                 background: ${template.theme.bg_color};
-                border: 1px solid rgba(0, 0, 0, 0.2);
+                border: 1px solid ${template.borderColor};
                 border-radius: 5px;
                 ${template.animation.animation};
                 }

diff --git a/src/models/Template.js b/src/models/Template.js
@@ -22,6 +22,11 @@ class Template {
     this.setStructure(layout.structure);
     this.calculateHeight(this.quote.length);
   }
+
+  setBorderColor(borderColor) {
+    this.borderColor = borderColor;
+  }
+
   setStyle(style) {
     this.css = style(this);
   }