nf-core · ewels · Oct 14, 2024 · Mar 1, 2024 · Mar 2, 2024 · Mar 2, 2024
diff --git a/src/components/navbar/Navbar.astro b/src/components/navbar/Navbar.astro
@@ -171,6 +171,7 @@ newBlogPost = await getCollection('blog').then((posts) => {
                             <li><a class="dropdown-item" href="/contributors/">Contributors</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><span class="dropdown-header">Initiatives</span></li>
                             <li><a class="dropdown-item" href="/mentorships/">Mentorships</a></li>

diff --git a/src/config.ts b/src/config.ts
@@ -3,3 +3,31 @@
 export const SITE_TITLE = 'nf-core';
 export const SITE_DESCRIPTION =
     'A community effort to collect a curated set of 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'],
+];
diff --git a/src/pages/shop/[shopLocale].astro b/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>
diff --git a/src/pages/shop/index.astro b/src/pages/shop/index.astro
@@ -0,0 +1,102 @@
+---
+import PageLayout from '@layouts/PageLayout.astro';
+import { spreadshopLocales } from '../../config';
+---
+
+<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.
+        Before you go in, make sure you're aware of some FAQ:
+    </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 have a great
+                    customer service team and will be able to help you out.
+                </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>
+    <div class="text-center my-5">
+        <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>
+        <p class="text-secondary mt-3 fst-italic small">(sorted by web visitor stats counts, in case you're curious)</p>
+    </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>
+</PageLayout>