1
0
Fork 0
opengraph-image-gen/svg.tmpl

198 lines
8.8 KiB
Cheetah

<DOCTYPE html>
<html>
<head><style>html, head, body { margin: 0; padding: 0; background-color: {{ .fgColor }}; } * { box-sizing: border-box; }</style></head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1200px" height="600px" style="border: 15px solid {{ .fgColor }}; border-radius: 20px;">
<foreignObject x="0" y="0" width="100%" height="100%">
<style>
@font-face {
font-family: "Roboto Bold";
src: url("https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmYUtfBBc4AMP6lQ.woff2") format("woff2");
font-style: normal;
unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Roboto Medium";
src: url("https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2") format("woff2");
font-style: normal;
font-weight: 500;
unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Roboto Light";
src: url("https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2") format("woff2");
font-style: normal;
font-weight: 400;
unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
* {
font-family: 'Roboto Light';
}
:root {
--background-color: {{ .bgColor }};
--foreground-color: {{ .fgColor }};
}
#main {
width: 100%;
height: 100%;
background: var(--background-color);
color: var(--foreground-color);
}
h1 {
font-family: 'Roboto Bold';
margin: 0;
position: fixed;
top: 100px;
left: 50px;
height: 300px;
width: 780px;
font-size: 80px;
font-weight: 900;
line-height: 75px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box !important;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
white-space: normal;
}
h2 {
font-family: 'Roboto Medium';
margin: 0;
position: fixed;
top: 50px;
left: 50px;
font-size: 40px;
font-weight: 900;
width: 780px;
}
#profilePic {
position: fixed;
top: 50px;
right: 50px;
border-radius: 50px;
width: 300px;
}
.tags {
position: fixed;
left: 50px;
top: 420px;
width: 800px;
height: 25px;
line-height: 25px;
font-size: 25px;
font-weight: 200;
display: flex;
flex-direction: row;
}
.tags span {
margin: 0 3px;
}
.social {
position: fixed;
left: 50px;
right: 50px;
bottom: 25px;
height: 25px;
line-height: 25px;
font-size: 20px;
font-weight: 200;
display: flex;
flex-direction: row;
color: var(--foreground-color);
fill: var(--foreground-color);
}
.social span {
margin: 0 5px;
}
.social svg:not(:first-of-type) {
margin-left: 20px;
}
hr {
position: fixed;
height: 15px;
left: 0;
right: 0;
bottom: 65px;
border: none;
outline: none;
background-color: var(--foreground-color);
}
</style>
<div id="main">
<h2>{{ .siteTitle }}</h2>
<h1>{{ .title }}</h1>
<img id="profilePic" src="{{ with .image }}{{ . }}{{ end }}" />
<div class="tags">
{{ with .tags }}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag meta-icon">
<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
<line x1="7" y1="7" x2="7" y2="7"></line>
</svg>
{{ range (split .) }}
<span>#{{ . }}</span>
{{ end }}
{{ end }}
</div>
<hr />
<div class="social">
{{ with .twitter}}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 310 310" height="25px" width="25px">
<path d="M302.973,57.388c-4.87,2.16-9.877,3.983-14.993,5.463c6.057-6.85,10.675-14.91,13.494-23.73
c0.632-1.977-0.023-4.141-1.648-5.434c-1.623-1.294-3.878-1.449-5.665-0.39c-10.865,6.444-22.587,11.075-34.878,13.783
c-12.381-12.098-29.197-18.983-46.581-18.983c-36.695,0-66.549,29.853-66.549,66.547c0,2.89,0.183,5.764,0.545,8.598
C101.163,99.244,58.83,76.863,29.76,41.204c-1.036-1.271-2.632-1.956-4.266-1.825c-1.635,0.128-3.104,1.05-3.93,2.467
c-5.896,10.117-9.013,21.688-9.013,33.461c0,16.035,5.725,31.249,15.838,43.137c-3.075-1.065-6.059-2.396-8.907-3.977
c-1.529-0.851-3.395-0.838-4.914,0.033c-1.52,0.871-2.473,2.473-2.513,4.224c-0.007,0.295-0.007,0.59-0.007,0.889
c0,23.935,12.882,45.484,32.577,57.229c-1.692-0.169-3.383-0.414-5.063-0.735c-1.732-0.331-3.513,0.276-4.681,1.597
c-1.17,1.32-1.557,3.16-1.018,4.84c7.29,22.76,26.059,39.501,48.749,44.605c-18.819,11.787-40.34,17.961-62.932,17.961
c-4.714,0-9.455-0.277-14.095-0.826c-2.305-0.274-4.509,1.087-5.294,3.279c-0.785,2.193,0.047,4.638,2.008,5.895
c29.023,18.609,62.582,28.445,97.047,28.445c67.754,0,110.139-31.95,133.764-58.753c29.46-33.421,46.356-77.658,46.356-121.367
c0-1.826-0.028-3.67-0.084-5.508c11.623-8.757,21.63-19.355,29.773-31.536c1.237-1.85,1.103-4.295-0.33-5.998
C307.394,57.037,305.009,56.486,302.973,57.388z"/>
</svg>
<span>@{{ . }}</span>
{{ end }}
{{ with .github }}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 291.32 291.32" height="25px" width="25px">
<path d="M145.66,0C65.219,0,0,65.219,0,145.66c0,80.45,65.219,145.66,145.66,145.66
s145.66-65.21,145.66-145.66C291.319,65.219,226.1,0,145.66,0z M186.462,256.625c-0.838-11.398-1.775-25.518-1.83-31.235
c-0.364-4.388-0.838-15.549-11.434-22.677c42.068-3.523,62.087-26.774,63.526-57.499c1.202-17.497-5.754-32.883-18.107-45.3
c0.628-13.282-0.401-29.023-1.256-35.941c-9.486-2.731-31.608,8.949-37.79,13.947c-13.037-5.062-44.945-6.837-64.336,0
c-13.747-9.668-29.396-15.64-37.926-13.974c-7.875,17.452-2.813,33.948-1.275,35.914c-10.142,9.268-24.289,20.675-20.447,44.572
c6.163,35.04,30.816,53.94,70.508,58.564c-8.466,1.73-9.896,8.048-10.606,10.788c-26.656,10.997-34.275-6.791-37.644-11.425
c-11.188-13.847-21.23-9.832-21.849-9.614c-0.601,0.218-1.056,1.092-0.992,1.511c0.564,2.986,6.655,6.018,6.955,6.263
c8.257,6.154,11.316,17.27,13.2,20.438c11.844,19.473,39.374,11.398,39.638,11.562c0.018,1.702-0.191,16.032-0.355,27.184
C64.245,245.992,27.311,200.2,27.311,145.66c0-65.365,52.984-118.348,118.348-118.348S264.008,80.295,264.008,145.66
C264.008,196.668,231.69,239.992,186.462,256.625z"/>
</svg>
<span>{{ . }}</span>
{{ end }}
{{ with .website }}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" height="25px" width="25px">
<polygon points="478.609,55.652 478.609,155.826 33.391,155.826 33.391,55.652 0,55.652 0,456.348 33.391,456.348 33.391,189.217 478.609,189.217 478.609,456.348 512,456.348 512,55.652"/>
<rect x="33.391" y="22.261" width="445.217" height="33.391"/>
<rect x="33.391" y="456.348" width="445.217" height="33.391"/>
<rect x="411.826" y="89.044" width="33.391" height="33.391"/>
<rect x="345.043" y="89.044" width="33.391" height="33.391"/>
<rect x="77.913" y="233.739" width="356.174" height="33.391"/>
<rect x="77.913" y="311.652" width="178.087" height="33.391"/>
</svg>
<span>{{ . }}</span>
{{ end }}
</div>
</div>
</foreignObject>
</svg>
</body>
</html>