Miroirs/noc-book-2
1
0
Fork 0
mirror of https://github.com/nature-of-code/noc-book-2 synced 2024-11-17 07:49:05 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

add purchase link to the index page on mobile

Browse source
This commit is contained in:
Jason Gao 2024-05-27 09:59:49 +08:00
parent 907af83348
commit fc269e3f98
2 changed files with 25 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/PurchaseButton.js
View file

@ -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

22
src/pages/index.js
View file

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