Skip to content

Commit fd5ae65

Browse files
Merge pull request #35 from developmentseed/feature/meta-images
Add meta images and collection default card thumb
2 parents d8450e9 + 31c42a3 commit fd5ae65

File tree

13 files changed

+156
-77
lines changed

13 files changed

+156
-77
lines changed

packages/client/README.md

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,24 @@ REACT_APP_THEME_SECONDARY_COLOR
2828

2929
You must provide a value for the `REACT_APP_STAC_API` environment variable. This should be the URL of the STAC API you wish to interact with.
3030

31-
If the `REACT_APP_STAC_BROWSER` environment variable is not set, [Radiant Earth's STAC Browser](https://radiantearth.github.io/stac-browser/) will be used by default, which will connect to the STAC API specified in `REACT_APP_STAC_API`.
31+
If the `REACT_APP_STAC_BROWSER` environment variable is not set, [Radiant Earth's STAC Browser](https://radiantearth.github.io/stac-browser/) will be used by default, which will connect to the STAC API specified in `REACT_APP_STAC_API`.
32+
33+
### Theming
34+
35+
The Stac manager client allows for simple theming to give the instance a different look and feel.
36+
The primary and secondary colors can be set using the `REACT_APP_THEME_PRIMARY_COLOR` and `REACT_APP_THEME_SECONDARY_COLOR` environment variables. These should be set to a valid CSS color value.
37+
38+
The app has a default logo shown below, but it can be customized by replacing the necessary files.
39+
40+
<img src='./static/meta/icon-512.png' alt='STAC Manager Logo' width='100px' />
41+
42+
The logo should be a square image with a size of 512x512 pixels and should be placed in the `static/meta` folder with the name `icon-512.png`.
43+
44+
To ensure the branding is consistent, the remaining meta images (in the `static/meta` folder) should also be replaced:
45+
```
46+
icon-192.png 192x192
47+
icon-512.png 512x512
48+
favicon.png 32x32
49+
apple-touch-icon.png 360x360
50+
meta-image.png 1920x1080
51+
```

packages/client/src/App.tsx

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,13 @@ import {
88
Heading,
99
Text,
1010
Badge,
11-
Divider
11+
Divider,
12+
Image
1213
} from '@chakra-ui/react';
1314
import { StacApiProvider } from '@developmentseed/stac-react';
1415
import { PluginConfigProvider } from '@stac-manager/data-core';
1516

16-
import theme from './theme';
17+
import theme from './theme/theme';
1718
import { MainNavigation } from './components';
1819
import Home from './pages/Home';
1920
import CollectionList from './pages/CollectionList';
@@ -43,9 +44,23 @@ export const App = () => (
4344
justifyContent='space-between'
4445
py={8}
4546
>
46-
<Heading as='p' size='sm'>
47-
STAC Manager
48-
</Heading>
47+
<Flex gap={4} alignItems='center'>
48+
<Image
49+
src='/meta/icon-512.png'
50+
width={8}
51+
aspectRatio={1}
52+
borderRadius='md'
53+
/>
54+
<Divider
55+
orientation='vertical'
56+
borderColor='base.200a'
57+
h='1rem'
58+
borderLeftWidth='2px'
59+
/>
60+
<Heading as='p' size='sm'>
61+
STAC Manager
62+
</Heading>
63+
</Flex>
4964

5065
<MainNavigation />
5166
</Flex>

packages/client/src/components/ItemCard.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,12 @@ import {
1515
SkeletonText
1616
} from '@chakra-ui/react';
1717
import SmartLink from './SmartLink';
18+
import { ItemCardThumbPlaceholder } from './ItemCardThumbPlaceholder';
1819

1920
interface ItemCardProps {
2021
imageSrc?: string;
2122
imageAlt?: string;
23+
showPlaceholder?: boolean;
2224
title?: string;
2325
subtitle?: string;
2426
description?: string;
@@ -30,6 +32,7 @@ interface ItemCardProps {
3032
export function ItemCard({
3133
imageSrc,
3234
imageAlt,
35+
showPlaceholder,
3336
title,
3437
subtitle,
3538
description,
@@ -47,19 +50,22 @@ export function ItemCard({
4750
);
4851
};
4952

53+
const shouldUsePlaceholder = showPlaceholder && !imageSrc;
54+
5055
return (
5156
<Card as='article' variant='filled'>
5257
{imageSrc &&
5358
renderLink(
5459
<Image
5560
src={imageSrc}
5661
alt={imageAlt}
57-
height='16rem'
5862
width='100%'
63+
aspectRatio={2}
5964
objectFit='cover'
6065
borderRadius='md'
6166
/>
6267
)}
68+
{shouldUsePlaceholder && <ItemCardThumbPlaceholder />}
6369
<CardHeader as='header'>
6470
<Flex direction='row' gap={4}>
6571
{(title || subtitle) && (
Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import React from 'react';
2+
import { chakra, ChakraProps } from '@chakra-ui/react';
3+
4+
export function ItemCardThumbPlaceholder(props: ChakraProps) {
5+
return (
6+
<chakra.svg
7+
viewBox='0 0 640 320'
8+
fill='primary.100'
9+
xmlns='http://www.w3.org/2000/svg'
10+
objectFit='cover'
11+
borderRadius='md'
12+
{...props}
13+
>
14+
<g clipPath='url(#clip0_1139_3165)'>
15+
<rect width='640' height='320' fill='' />
16+
<path
17+
d='M112.905 -168.033C85.1573 -152.445 80.2157 -115.289 78.449 -83.5117C78.1219 -77.645 77.8344 -71.5471 80.0886 -66.1221C86.7094 -50.1888 109.745 -49.3742 121.43 -36.6804C138.401 -18.245 123.103 10.6759 121.707 35.7009C119.83 69.4176 143.764 96.6385 156.232 126.007C167.428 152.372 172.118 197.932 150.366 220.072C139.393 231.241 125.028 239.899 118.526 254.143C113.209 265.787 112.505 281.618 100.895 287.009C87.5178 293.224 72.899 279.295 58.1719 280.105C49.099 280.607 41.4344 286.589 33.4344 290.895C25.4344 295.199 14.7635 297.657 7.84271 291.77C4.36354 288.812 2.6281 284.343 1.02393 280.066C-4.69274 264.822 -10.4115 249.576 -16.1302 234.332C-54.8678 244.082 -94.8824 248.751 -134.824 248.178C-140.089 248.103 -145.695 248.026 -150.162 250.809C-158.728 256.149 -158.555 268.295 -160.139 278.266C-163.226 297.707 -177.503 314.962 -196.02 321.637C-205.13 324.92 -215.503 326.032 -222.674 332.541C-232.699 341.641 -232.395 357.201 -237.272 369.83C-246.962 394.926 -278.316 410.868 -277.939 437.766C-277.745 451.614 -268.693 463.635 -259.401 473.903C-245.228 489.568 -229.482 503.808 -212.476 516.339C-217.61 529.066 -208.845 544.053 -196.639 550.326C-184.432 556.599 -169.982 556.266 -156.307 555.112C-142.632 553.958 -128.589 552.166 -115.393 555.931C-103.399 559.353 -93.1761 567.076 -83.2616 574.643C-64.2657 589.133 -45.274 603.624 -26.2802 618.116C-17.7323 624.639 -8.6969 631.839 -5.59273 642.135C-4.24898 646.589 -3.95731 651.703 -0.684389 655.012C1.69478 657.416 5.16144 658.318 8.44686 659.12C30.0802 664.399 54.4698 669.293 73.3656 657.51C83.3865 651.262 90.2615 641.162 96.8386 631.354C117.834 600.041 133.991 556.833 158.512 529.128C181.118 503.587 220.143 482.887 251.693 471.366C299.141 454.039 354.81 449.718 389.608 413.103C413.57 387.889 421.449 353.37 428.847 320.507C432.651 303.603 438.333 286.487 441.403 269.522C444.276 253.655 439.714 236.764 445.516 221.42C450.406 208.497 459.62 197.757 468.662 187.309C481.556 172.409 494.447 157.509 507.341 142.609C512.703 136.409 518.751 129.816 526.845 128.52C532.906 127.547 538.972 129.774 544.71 131.961C560.618 138.03 576.526 144.097 592.433 150.164C597.372 152.049 602.774 154.347 605.008 159.139C607.014 163.441 605.849 168.493 604.514 173.049C600.666 186.189 595.693 198.999 589.668 211.295C600.947 227.293 616.604 245.253 635.904 241.978C645.818 240.297 653.827 233.155 663.045 229.13C672.264 225.107 685.533 225.78 689.464 235.041C691.141 238.997 690.612 243.516 691.464 247.728C693.441 257.497 702.645 264.33 712.164 267.284C721.683 270.237 731.833 270.243 741.672 271.828C767.25 275.953 791.281 291.999 802.352 315.424C813.427 338.849 809.814 369.207 791.549 387.585C782.174 397.018 769.293 403.522 763.368 415.43C760.831 420.528 759.512 426.672 754.912 430.03C749.818 433.749 742.843 432.57 736.543 432.299C715 431.37 694.525 443.372 680.139 459.437C665.754 475.501 656.447 495.36 647.343 514.908C660.943 521.891 674.86 529.108 685.129 540.435C695.395 551.76 701.397 568.253 696.241 582.645C695.122 585.774 693.491 588.824 693.395 592.143C693.227 598.047 697.802 602.826 701.364 607.537C742.987 662.537 640.854 744.295 616.283 788.679C593.295 830.193 585.162 886.322 616.11 922.295'
18+
stroke='white'
19+
strokeWidth='8'
20+
strokeMiterlimit='10'
21+
/>
22+
<path
23+
d='M-107.312 -166.705C-95.6844 -138.803 -106.872 -106.933 -104.268 -76.8179C-101.205 -41.422 -79.1657 -9.78868 -76.0636 25.603C-73.2594 57.6218 -86.0678 91.301 -74.4344 121.266C-60.0969 158.199 -15.6948 172.866 9.78442 203.205C19.3678 214.618 27.3615 229.126 41.5782 233.597C60.0553 239.407 78.9636 224.83 89.2803 208.439C97.6991 195.064 103.199 178.918 99.9574 163.451C95.4116 141.768 75.3553 126.857 66.4511 106.572C57.2907 85.7114 60.8615 61.6968 65.1595 39.3218C66.5282 32.1968 67.9199 24.6259 65.3115 17.8551C62.2574 9.92592 54.524 5.01967 48.3719 -0.842836C26.4073 -21.7741 24.2553 -56.3846 30.5469 -86.0638C36.8407 -115.747 49.9886 -143.889 53.5553 -174.018'
24+
stroke='white'
25+
strokeWidth='8'
26+
strokeMiterlimit='10'
27+
/>
28+
<path
29+
d='M-55.2991 -160.516C-49.1553 -132.341 -42.9866 -103.956 -42.3303 -75.1246C-41.9845 -59.9767 -43.1657 -44.7517 -41.3886 -29.7038C-39.6136 -14.6537 -34.4928 0.633777 -23.572 11.138C-21.597 13.038 -19.2824 14.8359 -16.5574 15.1255C-10.4199 15.7755 -6.3657 8.91503 -4.74487 2.96086C-0.555279 -12.4267 -1.4157 -28.6933 -2.70737 -44.5892C-4.58653 -67.6934 -7.30528 -90.9746 -4.38237 -113.968C-1.46153 -136.962 7.85514 -160.139 25.9406 -174.639'
30+
stroke='white'
31+
strokeWidth='8'
32+
strokeMiterlimit='10'
33+
/>
34+
<path
35+
d='M-9.74683 120.591C-4.00933 124.772 2.96568 126.838 9.27193 130.103C21.7636 136.57 31.5865 148.02 36.0824 161.347C37.5678 165.753 38.9282 170.895 43.1136 172.92C49.2928 175.909 56.4595 168.863 56.4553 161.999C56.4491 155.136 52.0386 149.174 48.0324 143.599C35.7511 126.497 26.7324 91.5488 7.94902 81.1218C-21.6635 64.6863 -31.6656 104.618 -9.74683 120.591Z'
36+
stroke='white'
37+
strokeWidth='8'
38+
strokeMiterlimit='10'
39+
/>
40+
<path
41+
d='M-5.78639 328.88C-27.5781 323.174 -43.751 303.826 -65.4781 297.876C-86.9198 292.005 -110.072 300.449 -127.911 313.714C-145.751 326.98 -159.645 344.724 -175.001 360.801C-187.414 373.793 -201.143 386.145 -209.037 402.287C-216.93 418.428 -217.38 439.918 -204.595 452.543C-194.051 462.953 -176.064 466.262 -170.587 480.028C-168.37 485.601 -168.718 492.06 -165.818 497.308C-160.257 507.389 -146.409 508.135 -134.907 508.645C-77.251 511.203 -21.4281 541.341 12.3449 588.141C19.149 597.57 26.7907 608.67 38.3907 609.499C47.0741 610.122 55.0574 604.414 60.4907 597.612C75.2782 579.103 76.0907 553.489 83.147 530.876C89.6283 510.101 101.882 491.16 118.176 476.733C136.124 460.841 160.276 448.247 166.21 425.022C174.251 393.537 137.726 351.749 113.141 334.47C75.997 308.37 33.4428 339.153 -5.78639 328.88Z'
42+
stroke='white'
43+
strokeWidth='8'
44+
strokeMiterlimit='10'
45+
/>
46+
<path
47+
d='M564.781 -183.514C584.57 -159.755 594.124 -128.714 596.268 -97.8679C598.416 -67.02 593.624 -36.1137 587.408 -5.8241C584.008 10.7509 579.991 27.6676 570.485 41.6635C555.187 64.1885 528.508 75.4489 505.935 90.676C443.562 132.749 411.135 207.484 395.558 281.091C392.041 297.718 389.116 314.776 381.249 329.841C372.858 345.914 359.322 358.724 344.899 369.718C327.666 382.855 308.385 394.022 287.151 398.357C265.918 402.695 242.464 399.499 225.278 386.295C213.701 377.399 205.662 364.649 199.485 351.42C189.184 329.364 183.401 304.876 185.291 280.607C189.374 228.124 228.343 178.149 214.205 127.441C204.593 92.9593 171.445 65.7614 172.093 29.9697C172.43 11.3697 182.23 -6.92619 178.359 -25.122C174.093 -45.1825 154.797 -58.2262 145.237 -76.37C138.328 -89.4783 136.807 -104.662 135.409 -119.412C133.812 -136.289 135.491 -158.364 151.755 -163.135C174.184 -169.716 186.416 -188.858 206.62 -200.614C225.482 -211.593 244.503 -222.643 265.172 -229.658C289.528 -237.926 315.497 -240.349 341.216 -240.762C415.762 -241.96 517.062 -240.799 564.781 -183.514Z'
48+
stroke='white'
49+
strokeWidth='8'
50+
strokeMiterlimit='10'
51+
/>
52+
<path
53+
d='M199.718 -138.566C216.868 -144.012 226.512 -158.493 242.106 -167.599C256.666 -176.101 271.372 -184.641 287.339 -190.135C306.124 -196.593 326.151 -198.547 346.024 -199.16C381.568 -200.258 423.814 -200.549 459.929 -190.974C484.524 -184.493 506.202 -173.478 520.987 -155.295C536.772 -135.878 543.643 -109.891 544.67 -83.7658C544.783 -80.8846 544.843 -77.9971 544.831 -75.1117C544.76 -52.5429 540.762 -29.8616 535.875 -7.61996C532.852 6.12588 529.406 20.1384 521.752 31.803C509.981 49.7488 489.447 58.9822 472.249 71.351C446.543 89.8468 427.485 115.138 413.758 142.839C401.447 167.682 393.231 195.028 387.647 222.149C384.954 235.237 382.662 248.632 376.679 260.557C370.193 273.484 359.804 284.003 348.581 293.055C336.154 303.093 322.233 311.747 306.831 315.989C305.597 316.328 304.358 316.639 303.106 316.918C286.228 320.687 267.431 318.389 253.539 308.147C244.153 301.237 237.518 291.226 232.533 280.632C228.67 272.437 225.764 263.762 223.803 254.916C221.489 244.497 220.468 233.77 221.126 223.057C222.893 194.949 236.072 167.472 241.616 140.039C244.46 126.155 245.312 112.288 241.645 98.3551C234.256 70.2405 209.318 47.5676 209.933 18.5342C210.255 3.36338 217.741 -11.5512 215.053 -26.3471C212.103 -42.7242 197.991 -53.7783 191.316 -68.5742C188.472 -74.9054 187.066 -81.7659 186.285 -88.7617C185.743 -93.6055 185.503 -98.5159 185.295 -103.364C184.699 -116.903 186.628 -134.41 199.718 -138.566Z'
54+
stroke='white'
55+
strokeWidth='8'
56+
strokeMiterlimit='10'
57+
/>
58+
<path
59+
d='M247.678 -113.995C259.557 -118.255 266.605 -128.128 277.591 -134.583C287.851 -140.61 298.241 -146.637 309.503 -150.61C322.718 -155.26 336.81 -156.764 350.83 -157.558C377.295 -159.055 407.551 -159.749 433.21 -153.112C451.187 -148.537 466.756 -140.443 477.193 -127.076C488.968 -111.993 493.185 -91.0763 493.07 -69.6637C493.056 -67.3804 493.018 -65.095 492.92 -62.8033C492.208 -45.0387 488.599 -27.0283 484.341 -9.4137C481.697 1.50297 478.814 12.5988 473.02 21.9447C464.747 35.2863 450.391 42.5405 438.566 52.028C420.339 66.6551 406.953 85.576 397.691 105.17C389.078 123.393 383.614 143.401 379.735 163.205C377.864 172.755 376.21 182.495 372.105 191.272C367.533 201.059 360.285 209.282 352.262 216.395C343.364 224.301 333.235 231.139 321.822 234.695C320.91 234.978 319.987 235.241 319.06 235.478C306.535 238.682 292.397 237.28 281.797 229.999C274.603 225.078 269.374 217.801 265.582 209.847C262.576 203.557 260.53 196.824 259.128 189.999C257.48 182.022 256.668 173.782 256.962 165.505C257.791 144.045 266.085 122.738 269.489 101.374C271.189 90.6926 271.641 80.0093 269.08 69.2697C263.916 47.5218 247.189 29.3759 247.77 7.09673C248.08 -4.64077 253.251 -16.1741 251.749 -27.5741C250.114 -40.2637 241.16 -49.3221 237.393 -60.7783C235.778 -65.6929 235.178 -70.945 235.02 -76.2596C234.914 -79.9409 235.024 -83.6554 235.176 -87.3117C235.585 -97.52 237.76 -110.437 247.678 -113.995Z'
60+
stroke='white'
61+
strokeWidth='8'
62+
strokeMiterlimit='10'
63+
/>
64+
<path
65+
d='M295.639 -89.4242C302.268 -92.3825 306.701 -97.7617 313.076 -101.566C319.033 -105.118 325.108 -108.635 331.668 -111.085C339.31 -113.924 347.472 -115.035 355.635 -115.955C373.037 -117.918 391.272 -118.889 406.489 -115.249C417.839 -112.535 427.277 -107.378 433.397 -98.8575C441.137 -88.0784 442.779 -72.2659 441.468 -55.5617C441.335 -53.8804 441.195 -52.1908 441.012 -50.495C439.652 -37.5325 436.437 -24.1971 432.806 -11.2096C430.537 -3.11996 428.191 5.03838 424.285 12.0863C419.46 20.7842 411.356 26.1592 404.881 32.7071C394.158 43.5467 386.456 56.0405 381.626 67.4988C376.726 79.1197 373.997 91.7718 371.822 104.261C370.774 110.274 369.772 116.366 367.533 121.991C364.883 128.643 360.764 134.561 355.941 139.734C350.574 145.511 344.239 150.528 336.814 153.399C336.22 153.628 335.618 153.843 335.01 154.038C326.843 156.676 317.364 156.17 310.056 151.853C305.053 148.918 301.231 144.378 298.633 139.059C296.478 134.678 295.297 129.886 294.453 125.084C293.47 119.547 292.853 113.793 292.795 107.955C292.649 93.1426 296.151 78.0176 297.358 62.7093C297.947 55.2363 297.97 47.728 296.516 40.1842C293.576 24.8051 285.058 11.1842 285.606 -4.33871C285.906 -12.645 288.741 -20.7991 288.441 -28.7992C288.103 -37.8033 284.347 -44.8804 283.47 -52.9804C283.093 -56.4846 283.287 -60.1242 283.756 -63.7575C284.083 -66.2763 284.545 -68.7929 285.058 -71.2617C286.47 -78.1346 288.881 -86.4096 295.639 -89.4242Z'
66+
stroke='white'
67+
strokeWidth='8'
68+
strokeMiterlimit='10'
69+
/>
70+
<path
71+
d='M329.78 60.1696C330.066 62.9467 330.385 65.8009 331.68 68.2738C335.247 75.0738 345.326 76.2259 351.805 72.1051C358.283 67.9822 361.589 60.2592 362.96 52.7051C364.33 45.1509 364.149 37.378 365.56 29.83C366.451 25.0717 370.703 14.7175 375.549 2.22586C380.395 -10.2658 385.837 -24.8908 389.101 -38.1888C392.368 -51.4867 393.458 -63.4575 389.603 -70.6409C387.676 -74.2305 384.514 -76.6242 379.77 -77.3867C375.024 -78.1513 368.697 -77.2846 360.443 -74.3534C353.76 -71.9825 348.201 -68.7596 343.599 -64.8554C338.997 -60.9492 335.351 -56.3596 332.493 -51.2554C326.774 -41.045 324.208 -28.7721 323.443 -15.7762C322.683 -2.77831 323.726 10.9425 325.23 24.0467C326.735 37.1509 328.699 49.6384 329.78 60.1696Z'
72+
stroke='white'
73+
strokeWidth='8'
74+
strokeMiterlimit='10'
75+
/>
76+
<path
77+
d='M630.837 44.0196C624.25 52.203 614.324 56.8009 605.799 62.9384C597.274 69.0759 589.454 78.4426 590.706 88.8718C591.893 98.7489 600.781 105.866 609.735 110.197C618.689 114.53 628.629 117.382 636.027 124.034C643.956 131.163 647.977 142.395 646.375 152.936C645.472 158.861 643.014 165.291 645.962 170.509C647.633 173.466 650.754 175.318 653.927 176.528C665.027 180.753 677.377 178.557 689.252 178.711C701.129 178.868 714.72 182.845 719.262 193.818C721.766 199.861 720.95 206.87 723.375 212.945C728.966 226.961 747.316 229.111 762.108 232.107C814.558 242.728 855.183 295.066 852.46 348.512C851.581 365.799 847.296 385.207 857.937 398.86C865.779 408.922 879.287 412.257 891.752 414.966C909.239 418.762 929.716 421.853 943.127 410.007C950.775 403.251 954.227 393.053 957.364 383.343C966.244 355.882 975.123 328.424 984 300.966C986.577 292.995 989.162 284.987 990.473 276.712C992.55 263.609 991.352 250.093 987.81 237.309C984.458 225.214 978.971 213.622 971.004 203.922C957.637 187.643 938.137 177.511 923.8 162.078C900.56 137.059 891.843 99.2718 863.548 80.1551C842.191 65.7259 815.641 65.7759 791.464 59.6697C765.364 53.0801 745.295 38.9321 729.858 16.9592C713.341 -6.54916 697.183 -59.7513 659.489 -30.9721C635.485 -12.645 648.495 22.0863 630.837 44.0196Z'
78+
stroke='white'
79+
strokeWidth='8'
80+
strokeMiterlimit='10'
81+
/>
82+
<path
83+
d='M216.012 731.908C203.872 719.499 188.097 710.906 176.895 697.643C148.009 663.443 159.845 608.341 190.518 575.737C221.191 543.133 265.259 527.426 307.503 512.612C349.745 497.797 393.743 481.578 423.745 448.355C461.422 406.632 469.47 347.105 482.951 292.53C486.155 279.557 490.016 266.184 498.895 256.201C507.776 246.218 523.106 240.72 534.901 246.997C546.32 253.072 550.353 267.078 557.512 277.851C573.353 301.697 604.766 309.339 633.347 310.92C661.933 312.501 691.76 310.182 718.012 321.601C725.204 324.73 732.547 329.582 734.568 337.162C737.499 348.162 728.114 358.266 719.581 365.801L628.797 445.945C618.774 454.793 608.568 463.864 601.941 475.474C588.703 498.674 593.149 530.56 612.235 549.245C617.974 554.868 624.787 559.316 630.445 565.02C650.951 585.689 652.547 619.266 643.674 646.997C634.804 674.731 617.339 698.735 603.176 724.176C573.762 777.008 558.278 837.516 558.699 897.985C558.743 903.977 558.847 910.331 555.781 915.477C552.735 920.589 547.135 923.531 541.743 926.043C480.512 954.541 408.812 958.683 344.243 939.464C322.726 933.062 288.068 923.71 273.157 905.37C256.526 884.912 255.264 848.952 251.268 824.052C246.037 791.445 240.066 756.497 216.012 731.908Z'
84+
stroke='white'
85+
strokeWidth='8'
86+
strokeMiterlimit='10'
87+
/>
88+
</g>
89+
<defs>
90+
<clipPath id='clip0_1139_3165'>
91+
<rect width='640' height='320' />
92+
</clipPath>
93+
</defs>
94+
</chakra.svg>
95+
);
96+
}

packages/client/src/pages/CollectionList/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,7 @@ function CollectionList() {
150150
key={col.id}
151151
imageSrc={col.assets?.thumbnail?.href}
152152
imageAlt={col.assets?.thumbnail?.title}
153+
showPlaceholder
153154
title={col.title || col.id}
154155
description={col.description}
155156
tags={col.keywords}

0 commit comments

Comments
 (0)