Adding Why Forage and About Pages

app/about/layout.tsx

@@ -0,0 +1,12 @@
+import Link from "next/link";
+import ContactForm from "@/components/contact/contact";
+export default function MdxLayout({ children }: { children: React.ReactNode }) {
+ return (
+ <div className="blog-content">
+ {children}
+ <ContactForm />
+ {"Also check out some of the other stuff I've made at "}
+ <Link href="https://ailanth.us">ailanth.us</Link>!
+ </div>
+ );
+}

app/about/page.mdx

@@ -0,0 +1,13 @@
+## About Me
+
+![It's me](/assets/aidan/aidan.jpg)
+
+Hi there! I'm Aidan.
+
+My hometown is the high desert city of Albuquerque, New Mexico. I've always loved the plants that grow here: their unique beauty, the unique wildlife they support, and of course their numerous unique flavors!
+
+Foraging is a big part of my diet—except for an occasional Chinese cabbage, I haven't bought greens since 2018. I've had the honor of learning about our edible plants from knowledgeable people of many different backgrounds. I made this site to share what I've learned.
+
+I'm still learning! If you have knowledge to share, corrections, or suggestions, please open an issue on the project's [Github](https://github.com/SnailBones/forage-abq) or just reach out below!
+
+## Contact Me

app/actions.ts

@@ -0,0 +1,49 @@
+"use server";
+
+import nodemailer from "nodemailer";
+import fs from "fs";
+import path from "path";
+
+export async function sendEmail(formData: FormData) {
+ const name = formData.get("name");
+ const email = formData.get("email");
+ const message = formData.get("message");
+
+ let transporter = nodemailer.createTransport({
+ service: "gmail",
+ auth: {
+ user: process.env.EMAIL,
+ pass: process.env.PASSWORD,
+ },
+ });
+ const logFilePath = path.join(__dirname, "../../../../emails.log");
+
+ console.log("sending email and logging to: ", logFilePath);
+ console.log("email is", process.env.EMAIL);
+ console.log("password is", process.env.PASSWORD);
+
+ function writeToFile(logMessage: string) {
+ fs.appendFileSync(logFilePath, logMessage);
+ }
+ const logMessage = `${new Date().toISOString()} \n Name: ${name}, Email: ${email}, \n Message: ${message}\n`;
+ writeToFile(logMessage);
+
+ const mailOptions = {
+ to: "cassowary4@gmail.com", // List of recipients
+ subject: "Someone reached out on forageABQ.com",
+ text: `Name: ${name}\nEmail: ${email}\nMessage: ${message}`, // Plain text body
+ html: `<b>Name:</b>${name}<br><b>Email:</b> ${email}<br><b>Message:</b> ${message}`, // HTML body
+ };
+ await transporter.sendMail(
+ mailOptions,
+ function (error: any, info: { response: string }) {
+ if (error) {
+ console.log(error);
+ writeToFile(error + "\n\n");
+ } else {
+ console.log("Email sent: " + info.response);
+ writeToFile(`Email sent: ${info.response}\n\n`);
+ }
+ }
+ );
+}

app/responsible-foraging/layout.tsx

@@ -0,0 +1,3 @@
+export default function MdxLayout({ children }: { children: React.ReactNode }) {
+ return <div className="blog-content">{children}</div>;
+}

app/responsible-foraging/page.mdx

@@ -0,0 +1,22 @@
+## Acknowledgements
+
+Albuquerque exists on the unceded land of the Tiwa-speaking Pueblo people, specifically the Sandia and Isleta Pueblos.
+
+The uses of plants is indigenous knowledge. Whether the Pueblo people who continue to steward the Rio Grande valley and harvest [amaranth](/plant/amaranthus), [quelites](/plant/chenopodium), and [verdolagas](plant/portulaca), the Bedouin of the Sinai and Palestine for their use of [khardal barri](plant/sisybrium), or numerous east Asian cultures for [kochia](/plant/bassia) and [Siberian elm](/plant/ulmus), we are grateful for their knowledge and stewardship.
+
+## Responsible Foraging
+
+This site lists only non-native and abundant "weedy" native species. If done with care, foraging for these species can provide fresh food while reducing our reliance on resource-intensive supply chains. Here are some guidelines on sustainability:
+
+- **Take only what you will use**. Leave most plants for others, wildlife, and so the plants themselves can continue to grow and reproduce. Often, processing and cooking your foraged food will take much longer than harvesting them, so don't get carried away!
+- **Cut, don't pull**. Even if you're harvesting a non-native weed, pulling disturbs soil life and can contribute to erosion.
+- **Learn the natives.** If you harvest native plants, do so with extra restraint and care. Better yet, consider growing them!
+- **Don't spread invasives.** Harvest non-native plants before they go to seed. Take care not to spread seeds to new areas. Watch out for goatheads on your shoes!
+- **Start in your neighborhood.** The plants listed here are probably growing near you, maybe even in your yard! By foraging near home, we avoid disrupting natural ecosystems and burning fossil fuels for transit. Get to know your neighbors, odds are they'll be happy to share some "weeds"!
+
+Stay safe! A few basic precautions:
+
+- **If you're not sure, don't eat it.** Some plants have toxic lookalikes. Ask an expert or [contact me](about) if you're not sure, and don't eat anything that tastes bitter or strange.
+- **Try a small amount first.** Even if your ID is correct, you don't know.
+- **Don't get lead poisoned.** Wash thoroughly. Avoid plants growing near busy streets or gas stations, where leaded gasoline may have contaminated the soil.
+- **Avoid pesticides, herbicides and fertilizers.** Some weeds can accumulate toxic levels of nitrates when fertilized.

app/why-forage/layout.tsx

@@ -0,0 +1,3 @@
+export default function MdxLayout({ children }: { children: React.ReactNode }) {
+ return <div className="blog-content">{children}</div>;
+}

app/why-forage/page.mdx

@@ -0,0 +1,18 @@
+## Why forage?
+
+So many reasons! Perhaps one of these will resonate with you:
+
+- Unique ingredients—Most of the foods listed here are unavailable in supermarkets, making them perfect for adventurous chefs.
+- Nutrition—Wild foods often have more nutrients than their larger domesticated counterparts.
+- Freshness—Nothing you get from the supermarket will be as fresh as the food you can pick today! I find that freshly picked [nopales](plant/opuntia) and [cherry plums](plant/prunus) taste much better than their purchased counterparts, and [elm seeds](plant/ulmus) are just little disks of pure freshness.
+- Sustainability—Growing your own food is a sustainable alternative buying it, but foraging is even better. You can feed yourself without no irrigation water, pesticides or fertilizers. Walk or bike to your foraging spot, and even the transport is carbon neutral!(Note: foraging native species is not always sustainable. For that reason, this site exclusively lists introduced or abundant plants.)
+- Ease—Gardening is hard work. Foraging is easy! You can even save a trip to the store by weeding [khardal](plant/sisybrium) or [verdolagas](plant/portulaca) form your own yard! (Though some foraged foods are more time-consuming to process.)
+- Cost—It should go without saying: foraged food is free!
+- Connection to our part of the Earth—the more we realize the abundance of the natural world around us, the more we'll care for it. At least, that's what I like to hope.
+- Tradition—Some of our wild foods have been eaten here for thousands of years. Others are recent introductions with long traditions of use in their native homes. Together, they form a contemporary New Mexican ingredient palette that's available nowhere else.
+- Instinct—Humans have foraged since the dawn of our species. It's only a tiny bit of our history that we've relied on agriculture for most of our food. Get in touch with your roots!
+- Fun—It's like a treasure hunt, but the treasure is a treat!
+
+With so many good reasons, it's hard for me to pick just one. To me, the truly perplexing question is why we don't more heavily use the bountiful foods that grow in our neighborhoods.
+
+But before you run outside to get started, take a moment to learn about the plants you'll be eating and make sure to be [responsible and safe](responsible-foraging)!

components/Footer/index.js

@@ -3,14 +3,15 @@ import "./Footer.scss";
 import Link from "next/link";
 
 const Footer = () => {
- return (
- <footer className="footer">
- <Link href="/responsible-foraging">Please forage with care.</Link>
- <p>
- Made with 🖤 & GPT-4 by <a href="http:ailanth.us">ailanth.us</a>
- </p>
- </footer>
- );
+ return (
+ <footer className="footer">
+ <Link href="/responsible-foraging">Please forage with care.</Link>
+ <p>
+ Made with 🖤 & GPT-4 by <a href="about">Aidan</a>. Code on{" "}
+ <a href="https://github.com/SnailBones/forage-abq">Github</a>.
+ </p>
+ </footer>
+ );
 };
 
 export default Footer;

components/NavBar/index.js

@@ -4,21 +4,26 @@ import Link from "next/link";
 import "./NavBar.css";
 
 const NavBar = () => {
- return (
- <nav>
- <ul>
- <li>
- <Link href="/">What's in Season</Link>
- </li>
- <li>
- <Link href="/all-plants">All Plants</Link>
- </li>
- <li>
- <Link href="/responsible-foraging">Responsible Foraging</Link>
- </li>
- </ul>
- </nav>
- );
+ return (
+ <nav>
+ <ul>
+ <li>
+ <Link href="/">What's in Season</Link>
+ </li>
+ <li>
+ <Link href="/all-plants">All Plants</Link>
+ </li>
+ <li>
+ <Link href="/why-forage">Why Forage?</Link>
+ </li>
+ <li>
+ <Link href="/responsible-foraging">
+ Responsible Foraging
+ </Link>
+ </li>
+ </ul>
+ </nav>
+ );
 };
 
 export default NavBar;

components/contact/contact.scss

@@ -0,0 +1,75 @@
+@import "styles/variables";
+
+$mobile-breakpoint: 1024px;
+.form-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: calc(100% - 20px);
+ padding: 20px;
+ box-sizing: border-box; // Ensures padding doesn't add to the width
+
+ @media (max-width: $mobile-breakpoint) {
+ flex-direction: column;
+ }
+ form {
+ width: 100%;
+ max-width: 1200px;
+ }
+}
+
+textarea,
+input {
+ padding: 16px;
+ box-sizing: border-box; // Ensures padding doesn't add to the width
+}
+
+.form-row {
+ display: flex;
+ justify-content: space-between;
+ width: 100%; // Ensures the form row takes full width of its container
+ margin: auto; // Centers the form row horizontally
+ gap: 20px;
+
+ @media (max-width: $mobile-breakpoint) {
+ flex-direction: column; // Stacks form fields vertically on mobile
+ gap: 10px; // Reduces gap between fields for a tighter mobile layout
+ }
+
+ .message-column {
+ flex: 1 1 50%;
+ textarea {
+ height: 100%;
+ width: 100%;
+ }
+ // Adjustments for mobile
+ @media (max-width: $mobile-breakpoint) {
+ flex: 1; // Take full width on mobile
+ }
+ }
+
+ .info-column {
+ flex: 1 1 50%;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+
+ // Adjustments for mobile
+ @media (max-width: $mobile-breakpoint) {
+ order: 1; // Name and email fields appear first on mobile
+ }
+ }
+}
+
+button[type="submit"] {
+ padding: 10px;
+ background-color: $sandia;
+ color: $gold;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background-color 0.2s;
+ &:hover {
+ background-color: #455b73; /* Darker shade for hover effect */
+ }
+}

components/contact/contact.tsx

@@ -0,0 +1,51 @@
+"use client";
+import React, { useEffect } from "react";
+import { sendEmail } from "@/app/actions";
+import "./contact.scss";
+export default function ContactForm() {
+ useEffect(() => {
+ if (window.location.hash) {
+ setTimeout(() => {
+ const id = window.location.hash.replace("#", "");
+ const element = document.getElementById(id);
+ if (element) {
+ element.scrollIntoView({
+ behavior: "smooth",
+ block: "start",
+ });
+ }
+ }, 0);
+ }
+ }, []);
+ return (
+ <div className="form-container">
+ <form action={sendEmail} id="contact-form">
+ <div className="form-row">
+ <div className="message-column">
+ <textarea
+ name="message"
+ placeholder="Your Message"
+ required
+ />
+ </div>
+ <div className="info-column">
+ <input
+ type="text"
+ name="name"
+ placeholder="Your Name"
+ required
+ />
+ <input
+ type="email"
+ name="email"
+ placeholder="Your Email"
+ required
+ />
+
+ <button type="submit">Send Message</button>
+ </div>
+ </div>
+ </form>
+ </div>
+ );
+}

next.config.js

@@ -2,7 +2,7 @@ const withMDX = require("@next/mdx")();
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
- pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
+  pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
 };
 
 module.exports = withMDX(nextConfig);