Merge pull request #965 from nature-of-code/dev/mobile-purchase-button

Add purchase button to the index page on mobile

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

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>
   );