Skip to content

Commit 3976243

Browse files
zhravanzhravan
authored
Merge pull request #90 from shravan20/height-issue
Dynamic height calculation for svg. Closes #87
2 parents b5d488d + 46eb97e commit 3976243

File tree

6 files changed

+89
-72
lines changed

6 files changed

+89
-72
lines changed

‎src/api/services/quotesService.js‎

Lines changed: 44 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,48 @@
1-
const requestApi =require('../../utils/fetchApi');
1+
const requestApi = require("../../utils/fetchApi");
22
const url = process.env.SERVICE_URL;
3-
const cardTemplate = require('../../utils/generateTemplate');
4-
const Template=require("../../models/Template");
5-
const getValidUrl = require('../../utils/validateUrl');
6-
7-
8-
const getQuote= async (quoteObj) =>{
9-
10-
try{
11-
12-
let {theme,animation,layout,quotesUrl}=quoteObj;
13-
let apiResponse;
14-
15-
let {customQuotesUrl, isValidUrl} = await getValidUrl(quotesUrl);
16-
17-
if(isValidUrl){
18-
//url from params is valid, proceed to verfiy the data
19-
apiResponse = await requestApi(customQuotesUrl);
20-
21-
if(apiResponse.length > 0){
22-
apiResponse = apiResponse[Math.floor(Math.random() * Math.floor(apiResponse.length))];
23-
if(!apiResponse.quote && !apiResponse.author){
24-
apiResponse = await requestApi(url);
25-
}
26-
}else{
27-
apiResponse = await requestApi(url);
28-
}
29-
30-
}else{
31-
apiResponse = await requestApi(url);
32-
}
33-
34-
const template=new Template();
35-
template.setTheme(theme);
36-
template.setData(apiResponse);
37-
template.setAnimation(animation);
38-
template.setLayout(layout);
39-
40-
let svg = cardTemplate.generateTemplate(template);
41-
return svg;
42-
3+
const cardTemplate = require("../../utils/generateTemplate");
4+
const Template = require("../../models/Template");
5+
const getValidUrl = require("../../utils/validateUrl");
6+
7+
const getQuote = async (quoteObj) => {
8+
try {
9+
let { theme, animation, layout, quotesUrl } = quoteObj;
10+
let apiResponse;
11+
12+
let { customQuotesUrl, isValidUrl } = await getValidUrl(quotesUrl);
13+
14+
if (isValidUrl) {
15+
//url from params is valid, proceed to verfiy the data
16+
apiResponse = await requestApi(customQuotesUrl);
17+
18+
if (apiResponse.length > 0) {
19+
apiResponse =
20+
apiResponse[
21+
Math.floor(Math.random() * Math.floor(apiResponse.length))
22+
];
23+
if (!apiResponse.quote && !apiResponse.author) {
24+
apiResponse = await requestApi(url);
4325
}
44-
catch (error){
45-
throw error;
26+
} else {
27+
apiResponse = await requestApi(url);
28+
}
29+
} else {
30+
apiResponse = await requestApi(url);
4631
}
47-
48-
}
4932

50-
module.exports={
51-
getQuote
52-
}
33+
const template = new Template();
34+
template.setTheme(theme);
35+
template.setData(apiResponse);
36+
template.setAnimation(animation);
37+
template.setLayout(layout);
38+
39+
let svg = cardTemplate.generateTemplate(template);
40+
return svg;
41+
} catch (error) {
42+
throw error;
43+
}
44+
};
45+
46+
module.exports = {
47+
getQuote,
48+
};

‎src/app.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,26 @@ const express = require('express');
22
const port = process.env.PORT || 3002;
33
const routes = require('./api/routes/quotes-router');
44
const bodyParser = require('body-parser');
5-
const morgan =require('morgan');
5+
const morgan = require('morgan');
6+
const path = require("path");
67

78
const initiateServer = () => {
8-
9+
910
const app = express();
10-
11+
1112
app.use(bodyParser.json());
1213
app.use(bodyParser.urlencoded({ extended: false }))
1314

1415
app.use(morgan('dev'));
15-
16+
app.use(express.static(path.join(__dirname, "../","frontend", "/", "build")));
1617
routes(app);
1718

19+
app.get("/*", (req, res) => {
20+
res.sendFile(path.join(__dirname, "../","frontend", "/", "build", "index.html"));
21+
});
1822
app.listen(port, () => console.log(`App listening at http://localhost:${port}`));
1923

20-
}
24+
}
2125

2226
module.exports = {
2327
initiateServer

‎src/common/getTemplate.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
const getTemplate=template=>{
2-
return `
3-
<svg width="700px" height="300px" fill="none" xmlns="http://www.w3.org/2000/svg">
1+
const getTemplate = (template) => {
2+
return `
3+
<svg width="700px" height="${parseInt(
4+
template.height
5+
)}px" fill="none" xmlns="http://www.w3.org/2000/svg">
46
<foreignObject width="100%" height="100%">
57
<div xmlns="http://www.w3.org/1999/xhtml">
68
<style>
@@ -10,6 +12,6 @@ const getTemplate=template=>{
1012
</div>
1113
</foreignObject>
1214
</svg>`;
13-
}
15+
};
1416

15-
module.exports=getTemplate;
17+
module.exports = getTemplate;

‎src/layouts/layout.js‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const layouts = {
5656
display:inline-block;
5757
font-family:Arial,Helvetica,sans-serif;
5858
margin:1em;
59-
max-width:35em;
59+
width:600px;
6060
${template.animation.animation};
6161
}
6262
${template.animation.keyframes}
@@ -70,6 +70,7 @@ const layouts = {
7070
margin:0;
7171
padding:1em;
7272
position:relative;
73+
font-size:15px;
7374
7475
}
7576
.square-brackets-quote blockquote::before {
@@ -113,8 +114,8 @@ const layouts = {
113114
churchill: {
114115
style: (template) => {
115116
return `#ct{
116-
height:auto
117-
width:100px;
117+
height:auto;
118+
width:600px;
118119
border:1px solid #f1c40f;
119120
margin: 20px 50px 20px 10px;
120121
text-align:center;
@@ -165,7 +166,7 @@ const layouts = {
165166
}
166167
p{
167168
padding-top:0px;
168-
font-size:18px
169+
font-size:17px
169170
}`;
170171
},
171172
structure: (template) => {
@@ -190,16 +191,19 @@ const layouts = {
190191
return `.quote {
191192
display: inline-block;
192193
margin: 1em;
193-
width:450px;
194+
width:600px;
194195
${template.animation.animation};
195196
}
196197
${template.animation.keyframes}
197198
blockquote {
198-
border: solid 6px #${(template.theme.bg_color === "fffefe"
199-
? "757575"
200-
: template.theme.bg_color)};
199+
border: solid 6px #${
200+
template.theme.bg_color === "fffefe"
201+
? "757575"
202+
: template.theme.bg_color
203+
};
201204
display: inline-block;
202205
margin: 0;
206+
font-size:16px;
203207
padding: 1em;
204208
position: relative;
205209
}
@@ -247,7 +251,7 @@ const layouts = {
247251
248252
.container{
249253
background-color:#000;
250-
width:550px;
254+
width:600px;
251255
height:auto;
252256
padding:30px 20px 40px 40px;
253257
${template.animation.animation};
@@ -303,7 +307,7 @@ const layouts = {
303307
}
304308
.quote4 .first{
305309
margin-top:10px;
306-
width:95%;
310+
width:100%;
307311
color: #DAB49D;
308312
font-size:14px;
309313
font-family: 'Dosis', sans-serif;

‎src/models/Template.js‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
const layouts = require("../layouts/layout");
22

33
class Template {
4-
constructor() {
5-
}
4+
constructor() {}
65

76
setTheme(theme) {
87
this.theme = theme;
@@ -18,9 +17,10 @@ class Template {
1817
}
1918

2019
setLayout(layout) {
21-
this.layout = layout;
20+
this.layout = layout;
2221
this.setStyle(layout.style);
2322
this.setStructure(layout.structure);
23+
this.calculateHeight(this.quote.length);
2424
}
2525
setStyle(style) {
2626
this.css = style(this);
@@ -29,6 +29,17 @@ class Template {
2929
setStructure(structure) {
3030
this.structure = structure(this);
3131
}
32+
33+
calculateHeight(length) {
34+
let lines;
35+
if (this.layout !== layouts["zues"]) {
36+
lines = Math.floor(length / 64);
37+
this.height = lines > 2 ? (lines - 2) * 22 + 173 : 173;
38+
} else {
39+
lines = Math.floor(length / 62);
40+
this.height = lines * 18 + 198;
41+
}
42+
}
3243
}
3344

3445
module.exports = Template;

‎src/utils/generateTemplate.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const getTemplate=require('../common/getTemplate');
1+
const getTemplate = require("../common/getTemplate");
22

33
const generateTemplate = (template) => {
44
return getTemplate(template);

0 commit comments

Comments
 (0)