From fc269e3f989e01e7aa1319919aa573de81d54839 Mon Sep 17 00:00:00 2001
From: Jason Gao <jasongao97@gmail.com>
Date: Mon, 27 May 2024 09:59:49 +0800
Subject: [PATCH] add purchase link to the index page on mobile

---
 src/components/PurchaseButton.js |  8 +++++---
 src/pages/index.js               | 22 ++++++++++++++++++++--
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/PurchaseButton.js b/src/components/PurchaseButton.js
index 40e0862..73cce79 100644
--- a/src/components/PurchaseButton.js
+++ b/src/components/PurchaseButton.js
@@ -17,7 +17,7 @@ const links = [
   },
 ];
 
-const PurchaseButton = () => {
+const PurchaseButton = ({ aligned = 'right', className }) => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
 
@@ -45,7 +45,7 @@ const PurchaseButton = () => {
   }, []);
 
   return (
-    <div className="relative" ref={dropdownRef}>
+    <div className={`not-prose relative ${className}`} ref={dropdownRef}>
       <button
         aria-haspopup="true"
         aria-expanded={isOpen}
@@ -59,7 +59,9 @@ const PurchaseButton = () => {
       </button>
 
       {isOpen && (
-        <ul className="absolute right-0 z-50 mt-1 w-40 divide-y rounded-xl border border-noc-200 bg-white">
+        <ul
+          className={`absolute ${aligned === 'right' ? 'right-0' : 'left-0'} z-50 mt-1 w-40 divide-y rounded-xl border border-noc-200 bg-white`}
+        >
           {links.map((link) => (
             <li key={link.href} className="border-noc-200">
               <a
diff --git a/src/pages/index.js b/src/pages/index.js
index 029c634..29928ea 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { StaticImage } from 'gatsby-plugin-image';
 
 import SideNavLayout from '../layouts/SideNavLayout';
+import PurchaseButton from '../components/PurchaseButton';
 
 export default function IndexPage() {
   return (
@@ -11,8 +12,25 @@ export default function IndexPage() {
         width={1200}
         alt="nature of code book cover"
       />
-      <div className='my-8'>
-        Hi there! Welcome to The Nature of Code! Ever wondered how the unpredictable evolutionary and emergent properties of nature can be captured in a digital canvas, all through the magic of code? Running right in your browser! That’s exactly what this book is all about! You can read the whole thing right here, thank you to Creative Commons! If this project sparks joy and want to support it, you can <a href="https://github.com/sponsors/CodingTrain">sponsor on GitHub</a> or grab a copy of an artfully bound version of processed cellulose fibers, imprinted with symbolic glyphs via pigment-based transfer particles, available at <a href="https://nostarch.com/nature-code">No Starch Press</a> and <a href="https://www.amazon.com/Nature-Code-Daniel-Shiffman/dp/1718503709">other places where people buy books</a>. Don't forget to touch grass!
+
+      <PurchaseButton className="my-6 lg:hidden" aligned="left" />
+
+      <div className="my-6">
+        Hi there! Welcome to The Nature of Code! Ever wondered how the
+        unpredictable evolutionary and emergent properties of nature can be
+        captured in a digital canvas, all through the magic of code? Running
+        right in your browser! That’s exactly what this book is all about! You
+        can read the whole thing right here, thank you to Creative Commons! If
+        this project sparks joy and want to support it, you can{' '}
+        <a href="https://github.com/sponsors/CodingTrain">sponsor on GitHub</a>{' '}
+        or grab a copy of an artfully bound version of processed cellulose
+        fibers, imprinted with symbolic glyphs via pigment-based transfer
+        particles, available at{' '}
+        <a href="https://nostarch.com/nature-code">No Starch Press</a> and{' '}
+        <a href="https://www.amazon.com/Nature-Code-Daniel-Shiffman/dp/1718503709">
+          other places where people buy books
+        </a>
+        . Don't forget to touch grass!
       </div>
     </SideNavLayout>
   );