Merge pull request #574 from razzeee/add-merch-on-more-pages

src/components/Page.tsx

@@ -14,8 +14,11 @@ import {
   DownloadNotice,
   SponsorList,
 } from "./SectionWidgets";
+import { StoreCta } from "./StoreCta";
 
-function PreviewNoticeCard(props: { section: "downloadlist" | "sponsors" }) {
+function PreviewNoticeCard(props: {
+  section: "downloadlist" | "sponsors" | "merch-cta";
+}) {
   return (
     <Card>
       <h3 className="text-2xl font-bold">No Live Preview</h3>
@@ -25,13 +28,16 @@ function PreviewNoticeCard(props: { section: "downloadlist" | "sponsors" }) {
 }
 
 function DynamicSection(props: { preview: any; section: string | number }) {
+  let storeCta = <StoreCta />;
   let dlcomponent = <DownloadList />;
   let spcomponent = <SponsorList />;
   if (props.preview) {
+    storeCta = <PreviewNoticeCard section="store-cta" />;
     dlcomponent = <PreviewNoticeCard section="downloadlist" />;
     spcomponent = <PreviewNoticeCard section="sponsors" />;
   }
   let sections = {
+    "store-cta": storeCta,
     downloadlist: dlcomponent,
     sponsors: spcomponent,
     aboutdisclaimer: <AboutDisclaimer />,

src/components/StoreCta.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { StoreList } from "../hooks/StoreList";
+import StoreRow from "./StoreRow";
+
+function StoreCta(props: { items?: any[] }) {
+  const items = StoreList();
+
+  return <StoreRow data={items} />;
+}
+
+export { StoreCta };

src/components/StoreRow.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Merch } from "../hooks/StoreList";
+import { IconList } from "./IconList";
+import Button from "./Button";
+
+export default function StoreRow({ data }: { data: Merch[] }) {
+  return (
+    <>
+      <div className="flex flex-col gap-3 mb-8">
+        <h2 className="text-2xl font-bold mb-4">Grab some merch</h2>
+        <IconList
+          className="flex justify-between flex-wrap h-[280px] overflow-hidden"
+          items={data}
+          iconwidth="256"
+          iconheight="256"
+        />
+        <Button href="/store" buttonType="internal">
+          More Merch
+        </Button>
+      </div>
+    </>
+  );
+}

src/content/pages/donate/index.md

@@ -24,6 +24,8 @@ If you don't want to give directly to us, you can still support us in other ways
 * If you use Amazon for any of your online shopping, you can [select the Kodi Foundation as your Amazon Smile donation choice](https://smile.amazon.com/ch/47-4565769). Amazon Smile donates a small amount to the non-profit of your choice each time you purchase from Amazon.
 * Purchasing Kodi gear helps just as much as a donation, and you get something in return! [Check out our store for Kodi branded gear](/store). We are regularly adding new products so check back often.
 
+x-section-x store-cta x-section-x
+
 ## Donor Recognition
 
 Everyone who donates **50 USD** (or **40 EUR**) or more may be recognized as an official Kodi Foundation donor in the forums. We also have a [wall of our most recent donors](/donate/wall). Donations via Credit Card and PayPal automatically show up on our donor wall within a day.  Other donations we have to do manually, so it may take longer for those to show up.

src/content/pages/download/index.md

@@ -6,12 +6,15 @@ description: Kodi is available as a native application for Android, Linux, Mac
   OS X, iOS and Windows operating systems, running on most common processor
   architectures.
 ---
+
 ## Join the millions already enjoying Kodi
 
 Kodi is available as a native application for Android, Linux, Mac OS X, iOS and Windows operating systems, running on most common processor architectures. A small overview of the features can be found on our about page. For each platform, we offer a stable and development release(s). For normal users we recommend installing the stable releases.
 
 x-section-x downloadnotice x-section-x
 
+x-section-x store-cta x-section-x
+
 ## Select Your Platform
 
 Kodi has many flavours, our developers have worked hard to make it support a large range of devices and operating system. We provide final as well as development builds for future final release versions. To get started, simply select the platform that you want to install it on.
@@ -40,4 +43,4 @@ $ git clone https://github.com/xbmc/xbmc.git
 
 You can help in so many different ways. As you may or may not know, Kodi is maintained completely by volunteers and we need and value any contributions to the project. If you can code, we are always [on the lookout for new team members](/contribute/developers) to assist with development. Even if you don't code, you can [help others in the forum](https://forum.kodi.tv/), [assist with quality assurance testing](https://kodi.wiki/view/HOW-TO:Help_with_quality_assurance_testing), or [contibute to language translations](https://kodi.wiki/view/Translation_System). If you are pressed for time but still want to give back, then you can [donate](/donate) or [purchase some great Kodi merchandise](/store). [Visit our contribute page](/contribute) for all the other ways you can help.
 
-x-section-x otherwaystohelp x-section-x
+x-section-x otherwaystohelp x-section-x

src/hooks/StoreList.tsx

@@ -0,0 +1,22 @@
+import { useStaticQuery, graphql } from "gatsby";
+
+export interface Merch {
+  name: string;
+  icon: string;
+  slug: string;
+}
+
+export function StoreList(): Merch[] {
+  const { allStoreYaml } = useStaticQuery(graphql`
+    {
+      allStoreYaml(sort: [{ group_number: ASC }, { name: ASC }]) {
+        nodes {
+          name
+          icon
+          slug
+        }
+      }
+    }
+  `);
+  return allStoreYaml.nodes;
+}