mirror of
https://github.com/Mibew/simple-icons.git
synced 2025-10-31 10:31:06 +03:00
Added sharing image generator
This commit is contained in:
Dan Leech
parent
1d01a165bf
commit
34114b5f77
38
build.js
38
build.js
@ -109,4 +109,42 @@ fs.writeFile("./index.html", htmlOutput, function(err) {
|
||||
return console.log(err);
|
||||
}
|
||||
console.log("The file was saved!");
|
||||
});
|
||||
|
||||
// Build Sharing content
|
||||
var sharingMain = "";
|
||||
for (var i = 0; i < source.icons.length; i++) {
|
||||
var fileName = source.icons[i].title.toLowerCase();
|
||||
fileName = fileName.replace(' ', '');
|
||||
fileName = fileName.replace('!', '');
|
||||
fileName = fileName.replace('.', '');
|
||||
fileName = fileName.replace('+', 'plus');
|
||||
filePath = "./icons/" + fileName + ".svg";
|
||||
console.log(source.icons[i].title + ", sat = " + source.icons[i].saturation);
|
||||
var fs = require('fs');
|
||||
var svg = fs.readFileSync(filePath, 'utf8');
|
||||
sharingMain += "\t\t\t<li style=\"background-color:#" + source.icons[i].hex + "\" class=\"bars__item\"></li>\n";
|
||||
}
|
||||
|
||||
// Read sharing header and footer content into variables
|
||||
var fs = require('fs');
|
||||
function readFile(path, callback) {
|
||||
try {
|
||||
var filename = require.resolve(path);
|
||||
fs.readFile(filename, 'utf8', callback);
|
||||
} catch (e) {
|
||||
callback(e);
|
||||
}
|
||||
}
|
||||
var fs = require('fs');
|
||||
var sharingHeader = fs.readFileSync('./src/sharing-header.html', 'utf8');
|
||||
var sharingFooter = fs.readFileSync('./src/sharing-footer.html', 'utf8');
|
||||
|
||||
// Put all sharing content together and export to sharing.html
|
||||
var sharingHtmlOutput = sharingHeader + sharingMain + sharingFooter;
|
||||
fs.writeFile("./sharing.html", sharingHtmlOutput, function(err) {
|
||||
if(err) {
|
||||
return console.log(err);
|
||||
}
|
||||
console.log("The sharing file was saved!");
|
||||
});
|
||||
169
sharing.html
Normal file
169
sharing.html
Normal file
@ -0,0 +1,169 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Simple Icons Open Graph Image</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400">
|
||||
<style>
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
body {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
.sharing {
|
||||
background: #EEE;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 70rem;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
width: 140rem;
|
||||
}
|
||||
.bars {
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
width: 60rem;
|
||||
}
|
||||
.bars__item {
|
||||
background: #000;
|
||||
border: 0.375rem solid #EEE;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
height: 1.5rem;
|
||||
width: 20%;
|
||||
}
|
||||
.title {
|
||||
clear: both;
|
||||
color: #666;
|
||||
font-family: Lato, sans-serif;
|
||||
-webkit-font-feature-settings: "dlig", "kern", "liga";
|
||||
font-feature-settings: "dlig", "kern", "liga";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 6rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.3rem;
|
||||
line-height: 1.5rem;
|
||||
margin: 6rem 0;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="sharing">
|
||||
<ul class="bars"> <li style="background-color:#4574E0" class="bars__item"></li>
|
||||
<li style="background-color:#3B5998" class="bars__item"></li>
|
||||
<li style="background-color:#1769FF" class="bars__item"></li>
|
||||
<li style="background-color:#4285F4" class="bars__item"></li>
|
||||
<li style="background-color:#094AB2" class="bars__item"></li>
|
||||
<li style="background-color:#2D72D9" class="bars__item"></li>
|
||||
<li style="background-color:#36465D" class="bars__item"></li>
|
||||
<li style="background-color:#0063DC" class="bars__item"></li>
|
||||
<li style="background-color:#314359" class="bars__item"></li>
|
||||
<li style="background-color:#6383A8" class="bars__item"></li>
|
||||
<li style="background-color:#3C80CA" class="bars__item"></li>
|
||||
<li style="background-color:#205081" class="bars__item"></li>
|
||||
<li style="background-color:#3399FF" class="bars__item"></li>
|
||||
<li style="background-color:#0074E4" class="bars__item"></li>
|
||||
<li style="background-color:#0084FF" class="bars__item"></li>
|
||||
<li style="background-color:#2E9FFF" class="bars__item"></li>
|
||||
<li style="background-color:#007EE5" class="bars__item"></li>
|
||||
<li style="background-color:#55ACEE" class="bars__item"></li>
|
||||
<li style="background-color:#005EA5" class="bars__item"></li>
|
||||
<li style="background-color:#0072C6" class="bars__item"></li>
|
||||
<li style="background-color:#125688" class="bars__item"></li>
|
||||
<li style="background-color:#0079BF" class="bars__item"></li>
|
||||
<li style="background-color:#0077B5" class="bars__item"></li>
|
||||
<li style="background-color:#0099E5" class="bars__item"></li>
|
||||
<li style="background-color:#1E8CBE" class="bars__item"></li>
|
||||
<li style="background-color:#21759B" class="bars__item"></li>
|
||||
<li style="background-color:#00AFF0" class="bars__item"></li>
|
||||
<li style="background-color:#1AB7EA" class="bars__item"></li>
|
||||
<li style="background-color:#40A4C4" class="bars__item"></li>
|
||||
<li style="background-color:#00B7E3" class="bars__item"></li>
|
||||
<li style="background-color:#34A7C1" class="bars__item"></li>
|
||||
<li style="background-color:#4CADC0" class="bars__item"></li>
|
||||
<li style="background-color:#005A5F" class="bars__item"></li>
|
||||
<li style="background-color:#00B1AB" class="bars__item"></li>
|
||||
<li style="background-color:#11B48A" class="bars__item"></li>
|
||||
<li style="background-color:#02B875" class="bars__item"></li>
|
||||
<li style="background-color:#56B68B" class="bars__item"></li>
|
||||
<li style="background-color:#00B057" class="bars__item"></li>
|
||||
<li style="background-color:#2BDE73" class="bars__item"></li>
|
||||
<li style="background-color:#05CC47" class="bars__item"></li>
|
||||
<li style="background-color:#5FCF80" class="bars__item"></li>
|
||||
<li style="background-color:#66CC66" class="bars__item"></li>
|
||||
<li style="background-color:#5AB552" class="bars__item"></li>
|
||||
<li style="background-color:#64D448" class="bars__item"></li>
|
||||
<li style="background-color:#6CC655" class="bars__item"></li>
|
||||
<li style="background-color:#589442" class="bars__item"></li>
|
||||
<li style="background-color:#7AB55C" class="bars__item"></li>
|
||||
<li style="background-color:#467126" class="bars__item"></li>
|
||||
<li style="background-color:#6Fb536" class="bars__item"></li>
|
||||
<li style="background-color:#8CC63F" class="bars__item"></li>
|
||||
<li style="background-color:#82BC23" class="bars__item"></li>
|
||||
<li style="background-color:#84BD00" class="bars__item"></li>
|
||||
<li style="background-color:#A4C639" class="bars__item"></li>
|
||||
<li style="background-color:#9DB63B" class="bars__item"></li>
|
||||
<li style="background-color:#F5C300" class="bars__item"></li>
|
||||
<li style="background-color:#E6B91E" class="bars__item"></li>
|
||||
<li style="background-color:#F4BD27" class="bars__item"></li>
|
||||
<li style="background-color:#FBB631" class="bars__item"></li>
|
||||
<li style="background-color:#FFA500" class="bars__item"></li>
|
||||
<li style="background-color:#FF8000" class="bars__item"></li>
|
||||
<li style="background-color:#F88D2D" class="bars__item"></li>
|
||||
<li style="background-color:#F08C35" class="bars__item"></li>
|
||||
<li style="background-color:#FF7102" class="bars__item"></li>
|
||||
<li style="background-color:#F4731C" class="bars__item"></li>
|
||||
<li style="background-color:#F45800" class="bars__item"></li>
|
||||
<li style="background-color:#E44600" class="bars__item"></li>
|
||||
<li style="background-color:#EE6123" class="bars__item"></li>
|
||||
<li style="background-color:#FF4A00" class="bars__item"></li>
|
||||
<li style="background-color:#FF4500" class="bars__item"></li>
|
||||
<li style="background-color:#E6461A" class="bars__item"></li>
|
||||
<li style="background-color:#FF3300" class="bars__item"></li>
|
||||
<li style="background-color:#EB4924" class="bars__item"></li>
|
||||
<li style="background-color:#DD4B39" class="bars__item"></li>
|
||||
<li style="background-color:#E74430" class="bars__item"></li>
|
||||
<li style="background-color:#C41200" class="bars__item"></li>
|
||||
<li style="background-color:#EE3322" class="bars__item"></li>
|
||||
<li style="background-color:#E62B1E" class="bars__item"></li>
|
||||
<li style="background-color:#D51007" class="bars__item"></li>
|
||||
<li style="background-color:#B92B27" class="bars__item"></li>
|
||||
<li style="background-color:#CD201F" class="bars__item"></li>
|
||||
<li style="background-color:#990000" class="bars__item"></li>
|
||||
<li style="background-color:#E12828" class="bars__item"></li>
|
||||
<li style="background-color:#FF6B6B" class="bars__item"></li>
|
||||
<li style="background-color:#ED1C24" class="bars__item"></li>
|
||||
<li style="background-color:#EC4047" class="bars__item"></li>
|
||||
<li style="background-color:#BD081C" class="bars__item"></li>
|
||||
<li style="background-color:#E6162D" class="bars__item"></li>
|
||||
<li style="background-color:#EF3F56" class="bars__item"></li>
|
||||
<li style="background-color:#F94877" class="bars__item"></li>
|
||||
<li style="background-color:#F80046" class="bars__item"></li>
|
||||
<li style="background-color:#EA4C89" class="bars__item"></li>
|
||||
<li style="background-color:#AD29B6" class="bars__item"></li>
|
||||
<li style="background-color:#440099" class="bars__item"></li>
|
||||
<li style="background-color:#6441A5" class="bars__item"></li>
|
||||
<li style="background-color:#999999" class="bars__item"></li>
|
||||
<li style="background-color:#757575" class="bars__item"></li>
|
||||
<li style="background-color:#3A393C" class="bars__item"></li>
|
||||
<li style="background-color:#181717" class="bars__item"></li>
|
||||
<li style="background-color:#030303" class="bars__item"></li>
|
||||
<li style="background-color:#000000" class="bars__item"></li>
|
||||
<li style="background-color:#000000" class="bars__item"></li>
|
||||
<li style="background-color:#000000" class="bars__item"></li>
|
||||
<li style="background-color:#000000" class="bars__item"></li>
|
||||
<li style="background-color:#000000" class="bars__item"></li>
|
||||
<li style="background-color:#000000" class="bars__item"></li>
|
||||
</ul>
|
||||
<h1 class="title">Simple Icons</h1>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
5
src/sharing-footer.html
Normal file
5
src/sharing-footer.html
Normal file
@ -0,0 +1,5 @@
|
||||
</ul>
|
||||
<h1 class="title">Simple Icons</h1>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
60
src/sharing-header.html
Normal file
60
src/sharing-header.html
Normal file
@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Simple Icons Open Graph Image</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400">
|
||||
<style>
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
body {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
.sharing {
|
||||
background: #EEE;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 70rem;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
width: 140rem;
|
||||
}
|
||||
.bars {
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
width: 60rem;
|
||||
}
|
||||
.bars__item {
|
||||
background: #000;
|
||||
border: 0.375rem solid #EEE;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
height: 1.5rem;
|
||||
width: 20%;
|
||||
}
|
||||
.title {
|
||||
clear: both;
|
||||
color: #666;
|
||||
font-family: Lato, sans-serif;
|
||||
-webkit-font-feature-settings: "dlig", "kern", "liga";
|
||||
font-feature-settings: "dlig", "kern", "liga";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 6rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.3rem;
|
||||
line-height: 1.5rem;
|
||||
margin: 6rem 0;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="sharing">
|
||||
<ul class="bars">
|
||||
Loading…
Reference in New Issue
Block a user