New shop page

sites/main-site/astro.config.mjs

@@ -83,6 +83,9 @@ export default defineConfig({
                 ],
                 'simple-icons': ['bluesky'],
                 ri: ['open-source-line'],
+                'pepicons-print': ['t-shirt'],
+                fluent: ['paint-brush-sparkle-24-filled'],
+                bi: ['bag-heart-fill'],
             },
         }),
         sitemap(),

sites/main-site/package.json

@@ -27,12 +27,15 @@
         "@docsearch/js": "^3.6.1",
         "@fontsource-variable/inter": "^5.0.19",
         "@fontsource-variable/maven-pro": "^5.0.19",
+        "@iconify-json/bi": "^1.2.1",
         "@iconify-json/fa": "^1.1.8",
         "@iconify-json/fa-brands": "^1.1.8",
         "@iconify-json/file-icons": "^1.1.9",
+        "@iconify-json/fluent": "^1.2.4",
         "@iconify-json/logos": "^1.1.43",
         "@iconify-json/mdi": "^1.1.67",
         "@iconify-json/octicon": "^1.1.56",
+        "@iconify-json/pepicons-print": "^1.2.1",
         "@iconify-json/ri": "^1.2.0",
         "@iconify-json/simple-icons": "^1.1.109",
         "@iconify/utils": "^2.1.25",

sites/main-site/src/components/navbar/Navbar.astro

@@ -184,6 +184,7 @@ if (onGoingEvents?.length > 0) {
                         <li><a class="dropdown-item" href="/special-interest-groups/">Special interest groups</a></li>
                         <li><a class="dropdown-item" href="/mentorships/">Mentorships</a></li>
                         <li><a class="dropdown-item" href="/contributors/">Contributors</a></li>
+                        {/* <li><a class="dropdown-item" href="/shop/">Shop</a></li> */}
                     </ul>
                 </li>
                 <li class="nav-item p-1 px-3 px-xl-1 dropdown">
@@ -193,6 +194,7 @@ if (onGoingEvents?.length > 0) {
                         <li><a class="dropdown-item" href="/governance/">Governance</a></li>
                         <li><a class="dropdown-item" href="/marketing/">Marketing</a></li>
                         <li><a class="dropdown-item" href="/code_of_conduct/">Code of conduct</a></li>
+                        {/* <li><a class="dropdown-item" href="/shop/">Shop</a></li> */}
                         <li><hr class="dropdown-divider" /></li>
                         <li><a class="dropdown-item" href="/publications/">Publications</a></li>
                         <li><a class="dropdown-item" href="/stats/">Statistics</a></li>

sites/main-site/src/config.ts

@@ -3,3 +3,30 @@
 export const SITE_TITLE = 'nf-core';
 export const SITE_DESCRIPTION =
     'A community effort to collect a curated set of open-source analysis pipelines built using Nextflow.';
+// Details from
+// https://help.spreadshop.support/hc/en-us/articles/360010529039-Website-Integration-with-JavaScript
+export const spreadshopLocales = [
+    ['🇺🇸 United States: English, Dollar ($)', 'US', 'com'],
+    ['🇬🇧 United Kingdom: English, Pound Sterling (£)', 'EN_GB', 'net'],
+    ['🇩🇪 Germany: German, Euro (€)', 'DE', 'net'],
+    ['🇪🇸 Spain: Spanish, Euro (€)', 'ES', 'net'],
+    ['🇫🇷 France: French, Euro (€)', 'FR', 'net'],
+    ['🇸🇪 Sweden: Swedish, Swedish krone (kr)', 'SE', 'net'],
+    ['🇮🇹 Italy: Italian, Euro (€)', 'IT', 'net'],
+    ['🇦🇺 Australia: English, Australian Dollar (AUD$)', 'AU', 'com'],
+    ['🇨🇦 Canada: English, Dollar ($)', 'CA', 'com'],
+    ['🇨🇦 Canada: French, Canadian Dollar (CAD$)', 'CA', 'com'],
+    ['🇳🇱 Netherlands: Dutch, Euro (€)', 'NL', 'net'],
+    ['🇨🇭 Switzerland: French, Swiss Franc (CHF)', 'CH', 'net'],
+    ['🇨🇭 Switzerland: German, Swiss Franc (CHF)', 'CH', 'net'],
+    ['🇨🇭 Switzerland: Italian, Swiss Franc (CHF)', 'CH', 'net'],
+    ['🇩🇰 Denmark: Danish, Danish krone (kr)', 'DK', 'net'],
+    ['🇦🇹 Austria: German, Euro (€)', 'AT', 'net'],
+    ['🇧🇪 Belgium: Dutch, Euro (€)', 'BE', 'net'],
+    ['🇧🇪 Belgium: French, Euro (€)', 'BE', 'net'],
+    ['🇫🇮 Finland: Finnish, Euro (€)', 'FI', 'net'],
+    ['🇵🇱 Poland: Polish, Euro (€)', 'PL', 'net'],
+    ['🇳🇴 Norway: Norwegian, Norwegian krone (kr)', 'NO', 'net'],
+    ['🇮🇪 Ireland: English, Euro (€)', 'EN_IE', 'net'],
+    ['🇪🇺 Europe: English, Euro (€)', 'EN_EU', 'net'],
+];

sites/main-site/src/pages/shop/[shopLocale].astro

@@ -0,0 +1,75 @@
+---
+import PageLayout from '@layouts/PageLayout.astro';
+import { spreadshopLocales } from '../../config';
+
+export function getStaticPaths() {
+    return spreadshopLocales.map((data) => ({
+        params: {
+            shopLocale: data[1].toLowerCase(),
+        },
+        props: {
+            domain: data[2],
+        },
+    }));
+}
+const { shopLocale } = Astro.params;
+const domain = Astro.props.domain;
+---
+
+<PageLayout
+    title="nf-core/shop"
+    subtitle="Share your love for the nf-core community! <a class='ms-3' href='/shop'>[back to shop index]</a>"
+    mainpage_container={false}
+>
+    <div id="nf-core-shop-embed" class="text-center mt-5">
+        <a href={'https://nf-core.myspreadshop.' + domain}>nf-core</a>
+    </div>
+    <script define:vars={{ shopLocale, domain }}>
+        window.spread_shop_config = {
+            shopName: 'nf-core',
+            locale: shopLocale,
+            prefix: 'https://nf-core.myspreadshop.' + domain,
+            baseId: 'nf-core-shop-embed',
+        };
+    </script>
+
+    <script
+        is:inline
+        type="text/javascript"
+        src={'https://nf-core.myspreadshop.' + domain + '/shopfiles/shopclient/shopclient.nocache.js'}></script>
+</PageLayout>
+
+<style is:global>
+    :root {
+        --sprd-main1: var(--bs-body-bg) !important;
+        --sprd-main2: var(--bs-body-bg) !important;
+        --sprd-main3: var(--bs-body-bg) !important;
+        --sprd-sub1: var(--bs-body-color) !important;
+        --sprd-sub2: var(--bs-body-color) !important;
+        --sprd-sub3: var(--bs-body-color) !important;
+    }
+    .sprd-c-m3.sprd-bg-s2 {
+        color: var(--bs-body-color) !important;
+        background-color: var(--bs-body-bg) !important;
+    }
+    .sprd-hc-m2:hover {
+        color: inherit !important;
+        text-decoration: underline !important;
+    }
+    .SprdMain .customPageBackground {
+        background-color: var(--sprd-main1) !important;
+    }
+    #sprd-main {
+        margin-top: 30px !important;
+    }
+    .sprd-header.sprd-bg-m1.sprd-c-s3 {
+        display: none;
+    }
+    .sprd-btn-primary {
+        background-color: var(--bs-green) !important;
+        border-color: var(--bs-green) !important;
+    }
+    a[href='#!/about'] {
+        display: none !important;
+    }
+</style>

sites/main-site/src/pages/shop/index.astro

@@ -0,0 +1,124 @@
+---
+import PageLayout from '@layouts/PageLayout.astro';
+import { spreadshopLocales } from '../../config';
+import HomepageCard from '@components/homepage/HomepageCard.astro';
+import { Icon } from 'astro-icon/components';
+---
+
+<PageLayout title="nf-core/shop" subtitle="Share your love for the nf-core community!">
+    <h1>Welcome to the nf-core shop!</h1>
+    <p class="mt-3 mb-4">
+        We are excited to announce the launch of the nf-core shop! We have a range of products available, including
+        t-shirts, hoodies, mugs, and stickers. All products are printed and shipped by our partners at Spreadshirt.
+    </p>
+    <div class="row row-cols-1 row-cols-lg-2 row-cols-xl-3 g-4 mb-4">
+        <div class="col">
+            <HomepageCard title="Big range of products" icon="pepicons-print:t-shirt" icon_class="text-secondary">
+                From tote bags to t-shirts, magnets to mugs, there's something for everyone! See <em>All Products</em>.
+            </HomepageCard>
+        </div>
+        <div class="col">
+            <HomepageCard title="Pipeline specific swag" icon="bi:bag-heart-fill" icon_class="text-secondary">
+                Many pipelines have their logos added to the shop, so you can show your love for your favourite
+                pipeline!
+            </HomepageCard>
+        </div>
+        <div class="col">
+            <HomepageCard
+                title="Customise your colours"
+                icon="fluent:paint-brush-sparkle-24-filled"
+                icon_class="text-secondary"
+            >
+                Each product can be customised with your favoruite colours and even designs. Make it your own!
+            </HomepageCard>
+        </div>
+    </div>
+    <div class="text-center mb-3">
+        <div class="dropdown">
+            <button
+                class="btn btn-success btn-lg dropdown-toggle"
+                type="button"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+            >
+                Choose your shop's region
+            </button>
+            <ul class="dropdown-menu">
+                {
+                    spreadshopLocales.map((data) => (
+                        <li>
+                            <a class="dropdown-item" href={'/shop/' + data[1].toLowerCase()}>
+                                {data[0]}
+                            </a>
+                        </li>
+                    ))
+                }
+            </ul>
+        </div>
+    </div>
+    <p class="text-secondary text-center small">
+        Something funky going on? Here are the direct links to the shops without any clever website embeds:
+    </p>
+    <p class="text-center mb-5">
+        <a href="https://nf-core.myspreadshop.net" class="btn btn-outline-secondary me-2">🇪🇺 Direct link to EU shop</a>
+        <a href="https://nf-core.myspreadshop.com" class="btn btn-outline-secondary">🇺🇸 Direct link to USA shop</a>
+    </p>
+    <div class="grid mb-4">
+        <div class="card g-col-4">
+            <div class="card-body">
+                <h5>How does this work?</h5>
+                <p class="card-text small">
+                    When you buy something, Spreadshirt will print and ship the product to you. This means we don't have
+                    to hold any inventory in stock, or really do anything. The entire shop runs directly with
+                    Spreadshirt.
+                </p>
+            </div>
+        </div>
+        <div class="card g-col-4">
+            <div class="card-body">
+                <h5>Does nf-core make a profit?</h5>
+                <p class="card-text small">
+                    No, we have set the profit margin to zero, everything is at cost price. This means everything is as
+                    cheap as possible, and also saves us from having to navigate legal / tax headaches.
+                </p>
+            </div>
+        </div>
+        <div class="card g-col-4">
+            <div class="card-body">
+                <h5>What about shipping?</h5>
+                <p class="card-text small">
+                    There are two shops, one in the US and one in the EU. Plus, many locales. Pick the one closest to
+                    you to use your local currency and get the best shipping.
+                </p>
+            </div>
+        </div>
+        <div class="card g-col-4">
+            <div class="card-body">
+                <h5>What if something goes wrong?</h5>
+                <p class="card-text small">
+                    If you have any issues with your order, please contact Spreadshirt directly. They should be able to
+                    help you out. Let us know if you have any problems.
+                </p>
+            </div>
+        </div>
+        <div class="card g-col-4">
+            <div class="card-body">
+                <h5>Can I suggest new products or designs?</h5>
+                <p class="card-text small">
+                    Yes, please do! We are always open to new ideas. If you have a suggestion, please post it in the <code
+                        >#shop</code
+                    > channel on the nf-core Slack.
+                </p>
+            </div>
+        </div>
+        <div class="card g-col-4">
+            <div class="card-body">
+                <h5>Ok, I'm ready...</h5>
+                <p class="card-text small">
+                    Great! We'd love to see you rocking your nf-core swag. Take lots of photos of your new gear when it
+                    arrives and tag us on social media!
+                </p>
+            </div>
+        </div>
+    </div>
+</PageLayout>