/
[slug].astro
180 lines (150 loc) · 9.09 KB
/
[slug].astro
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
---
import BlankLayout from '../../layouts/BlankLayout.astro';
import PageSection from '../../components/PageSection.astro';
import { getCollection } from 'astro:content';
export async function getStaticPaths() {
const allPosts = await Promise.all( [getCollection('blog'), getCollection('work')] );
return allPosts.flat().map((post) => {
return {
params: { slug: post.slug },
props: { post },
};
});
}
const { post } = Astro.props;
const { title, summary } = post.data;
const year = new Date().getFullYear();
---
<BlankLayout title="Preview Image Generator">
<PageSection class="blog full">
<div class="image-container">
<div class="featured-image" >
<h1>{title}</h1>
<p>{summary}</p>
<div class="site-tag">
<div class="tag-content">
<h6 class="h6">Andrew Walpole © {year}</h6>
<p>andrewwalpole.com</p>
</div>
</div>
<div class="svg-container">
<svg viewBox="0 0 1158 1201" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M31.4674 802.765C31.4674 762.889 36.1875 729.834 45.6278 703.6C54.019 677.366 65.0326 655.854 78.6685 639.064C89.1576 625.422 100.696 614.404 113.283 606.009C125.87 597.614 138.457 591.318 151.043 587.121C163.63 582.923 175.693 580.824 187.231 580.824C213.454 580.824 233.908 590.269 248.592 609.157C263.277 626.997 270.62 646.934 270.62 668.971C270.62 689.959 263.802 708.847 250.166 725.637C236.53 742.427 217.125 750.822 191.951 750.822C168.875 750.822 149.47 742.952 133.736 727.211C116.954 711.471 107.514 691.533 105.416 667.397C91.7799 671.595 80.2418 684.712 70.8016 706.748C60.3125 727.736 55.0679 754.495 55.0679 787.025C55.0679 840.543 71.3261 884.616 103.842 919.245C135.31 952.825 181.462 969.615 242.299 969.615C271.669 969.615 301.563 964.368 331.981 953.874C362.399 942.331 392.294 920.819 421.663 889.338C418.516 871.499 416.419 853.135 415.37 834.246C413.272 815.358 412.223 801.191 412.223 791.747C412.223 772.858 415.37 757.643 421.663 746.1C427.957 734.557 436.872 728.785 448.41 728.785C457.851 728.785 465.193 732.983 470.438 741.377C475.682 748.723 478.304 759.217 478.304 772.858C478.304 792.796 474.109 813.784 465.717 835.82C456.277 857.857 448.935 875.172 443.69 887.764C461.522 948.627 490.891 997.948 531.799 1035.72C571.658 1073.5 628.299 1092.39 701.723 1092.39C774.098 1092.39 835.459 1073.5 885.807 1035.72C936.155 997.948 974.965 947.578 1002.24 884.616C1028.46 820.605 1041.57 749.248 1041.57 670.545C1041.57 614.929 1035.28 562.46 1022.69 513.14C1009.05 462.771 989.65 418.697 964.476 380.92C939.302 342.093 909.408 311.662 874.794 289.625C839.13 267.588 798.747 256.57 753.644 256.57C733.715 256.57 708.541 260.768 678.122 269.162C646.655 277.557 616.236 294.872 586.867 321.106C556.448 347.34 532.848 387.741 516.065 442.308L500.332 423.419C523.408 346.816 560.644 292.249 612.041 259.718C662.389 227.188 719.03 210.923 781.965 210.923C844.899 210.923 905.212 229.811 962.902 267.589C1020.59 305.366 1067.79 359.933 1104.51 431.29C1140.17 502.647 1158 589.219 1158 691.008C1158 759.217 1149.08 824.277 1131.25 886.19C1113.42 947.053 1087.72 1001.1 1054.16 1048.32C1019.54 1095.54 978.111 1132.79 929.861 1160.07C881.611 1187.36 827.068 1201 766.231 1201C709.59 1201 661.34 1189.98 621.481 1167.94C580.573 1145.91 547.008 1118.62 520.785 1086.09C494.563 1053.56 474.633 1021.03 460.997 988.503C446.313 955.973 436.348 929.739 431.103 909.801C415.37 944.43 397.014 973.812 376.035 997.948C354.008 1021.03 330.408 1038.87 305.234 1051.47C279.011 1063.01 253.313 1068.78 228.139 1068.78C202.965 1068.78 178.84 1063.01 155.764 1051.47C131.639 1039.92 110.136 1023.13 91.2554 1001.1C72.375 979.059 57.6902 951.775 47.2011 919.245C36.712 885.665 31.4674 846.839 31.4674 802.765ZM-4.2452e-05 229.811C-4.52959e-05 164.751 18.8804 110.183 56.6413 66.1101C93.3533 22.0367 145.274 -9.53914e-06 212.405 -1.24735e-05C248.068 -1.40324e-05 280.06 6.82088 308.38 20.4626C335.652 33.055 359.777 50.8942 380.755 73.9803C401.734 96.017 419.041 121.202 432.677 149.535C444.215 173.67 456.802 205.676 470.438 245.552C484.073 284.378 497.709 326.353 511.345 371.476C524.981 415.549 538.617 458.049 552.253 498.974C564.84 538.85 575.853 571.38 585.293 596.565C599.978 635.391 618.334 668.446 640.361 695.73C661.34 721.964 688.611 735.081 722.177 735.081C749.448 735.081 772.524 727.211 791.405 711.471C810.285 695.73 824.446 676.841 833.886 654.805C843.326 631.719 848.046 610.207 848.046 590.269C848.046 580.824 846.997 569.281 844.899 555.64C841.753 540.948 837.557 527.831 832.313 516.288C827.068 504.745 820.774 497.924 813.432 495.826C810.285 512.616 802.943 529.405 791.405 546.195C778.818 561.936 759.413 569.806 733.19 569.806C708.016 569.806 688.087 561.411 673.402 544.621C658.717 527.831 651.375 507.369 651.375 483.233C651.375 458.049 659.242 438.111 674.976 423.419C690.709 407.679 711.163 399.809 736.337 399.809C765.707 399.809 790.88 409.778 811.859 429.716C831.788 448.604 846.997 472.74 857.486 502.122C866.927 530.455 871.647 558.788 871.647 587.121C871.647 616.503 865.353 646.41 852.766 676.841C840.179 707.273 820.775 732.458 794.552 752.396C767.28 772.334 731.617 782.303 687.563 782.303C650.851 782.303 618.334 774.433 590.014 758.692C561.693 741.902 536.519 717.242 514.492 684.712C492.465 652.181 473.584 612.305 457.851 565.084C447.361 533.603 435.823 495.301 423.236 450.178C410.649 405.056 397.014 358.883 382.329 311.662C367.644 263.391 351.386 219.842 333.554 181.016C309.429 128.547 284.78 92.8689 259.606 73.9803C234.432 55.0917 208.734 45.6475 182.511 45.6475C152.092 45.6475 125.345 54.0424 102.269 70.8323C78.144 87.6222 59.2636 110.183 45.6277 138.516C30.943 165.8 23.6006 195.707 23.6006 228.237C23.6006 240.83 24.6494 251.323 26.7472 259.718C28.8451 268.113 32.5163 273.36 37.7609 275.459C45.1033 260.768 55.5924 249.749 69.2283 242.404C82.8641 235.058 96.5 231.385 110.136 231.385C132.163 231.385 150.519 240.305 165.204 258.144C179.889 274.934 187.231 295.397 187.231 319.532C187.231 339.47 180.937 358.359 168.351 376.198C154.715 394.037 134.785 402.957 108.562 402.957C81.2907 402.957 59.7881 394.037 44.0544 376.198C28.3206 357.309 17.307 334.748 11.0136 308.514C3.67116 281.23 -4.13511e-05 254.996 -4.2452e-05 229.811Z" fill="var(--accent-color)" />
</svg>
</div>
<div class="bg"></div>
</div>
<div class="preview-area" data-slug={post.data.slug}></div>
</div>
</PageSection>
</BlankLayout>
<script>
import html2canvas from "html2canvas";
const featuredImage = document.querySelector('.featured-image') as HTMLElement;
const previewArea = document.querySelector('.preview-area') as HTMLElement;
saveDown();
setTimeout( ()=> {
saveDown();
featuredImage.style.display = "none";
previewArea.style.display = "block";
}, 500 );
previewArea.addEventListener( 'dblclick', () => {
download();
})
function saveDown() {
const containerToRender = document.querySelector('.image-container') as HTMLElement;
html2canvas(
containerToRender,
{
allowTaint: true,
useCORS: true,
backgroundColor: "transparent",
width: containerToRender.offsetWidth,
height: containerToRender.offsetHeight,
}
).then(canvas => {
const previewArea = document.querySelector('.preview-area');
previewArea.innerHTML = "";
previewArea.appendChild(canvas);
});
}
function download() {
const canvas = document.querySelector('.preview-area canvas') as HTMLCanvasElement;
const link = document.createElement('a');
link.setAttribute('download', `${previewArea.dataset.slug}.png`);
link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
link.click();
}
</script>
<style lang="scss">
.image-container {
overflow:hidden;
display:grid;
place-items:center;
max-width:1260px;
margin:auto;
.featured-image, {
max-width:1260px;
aspect-ratio: 1260 / 620;
width:100%;
padding:6rem 8rem;
z-index:0;
position:relative;
.svg-container {
position:absolute;
right:-5px;
top:-5px;
width:600px;
overflow:visible;
opacity: 0.3;
z-index:-1;
svg {
}
}
h1 {
font-size:var(--fs-5);
margin-top:0;
margin-bottom:2rem;
&::before {
top:-10px;
}
}
p {
font-size:var(--fs-0);
}
.site-tag {
position:absolute;
right:80px;
bottom:50px;
background:transparent;
text-align:right;
h6 {
font-size: 26px;
margin-block:0;
line-height:1;
}
p {
font-size:20px;
margin:5px;
}
.tag-content {
background:transparent;
}
}
.bg {
background-color:var(--bg-color);
z-index:-5;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
}
.preview-area {
display:none;
outline: 1px solid black;
outline-offset:-2px;
}
}
</style>