dashersupply/src/pages/about.astro

---
import Layout from '../layouts/Layout.astro';
import CategoryCard from '../components/CategoryCard.astro';
// import { about } from '../data/about';
import { ALL_CATEGORIES } from '../data/categories';
---

<Layout title="Dasher Supply">
	<main>
        <h1 class="center"><a href="/"><span class="text-gradient">Dasher Supply</span></a> &gt; About</h1>
        <nav>
        </nav>
		<p class="instructions">
			Your one-stop shop for all your after-market Dasher supplies.
		</p>
		<div class="disclaimers">
			<a href="https://daball.me"><div class="user"></div></a>
			<h2>Who We Are</h2>
			<p>
				Dasher Supply is a concept niche wish for delivery drivers of all sorts, including Dashers, like myself.
				Assisted by artificial intelligence (AI) large language models (LLMs), I have hand-curated these fine products
				from around the web and presented them to you as they relate to your expertise in delivery services.
			</p>
			<h2>Who I Am</h2>
			<p>
				My name is <a href="https://daball.me/">David A. Ball</a>. I'm also an expert at making web sites in my spare time.
				As such, I am uniquely qualified as an expert of both fields. My gift to you is a thoughtful, curated shopping
				list of things I believe are the most practical and best in-class products.
			</p>
			<h2>Our Mission</h2>
			<p>
				Dasher Supply strives to document the latest and best quality accesories to help you along your route. I have
				hand-picked each of these products because I believe each one of these are indispensible tools of the trade from
				brands you can trust. I've shopped ahead so you don't have to. Cut through the noise. <a href="/">Begin all of
				your shopping journeys here.</a>
			</p>
			<h2>Who We Aren't</h2>
			<p>
				Dasher Supply is not endorsed by or affiliated with <a href="https://www.doordash.com/" target="_blank">DoorDash</a>.
			</p>
			<h2>How I Earn Money</h2>
			<p>
				As an Amazon Associate I earn from qualifying purchases.
				Apart from this Dasher Supply website, as a DoorDash Dasher I earn by completing deliveries.
			</p>
			<h2>Cookies?</h2>
			<p>
				We probably use them. I'm using Google Analytics and Cloudflare Analytics. I'm interested in knowing what everyone else likes.
			</p>
			<h2>Contact</h2>
			<p>
				You may contact me about anything related to Dasher Supply at the email address,
				<a href="mailto:dashersupply@daball.me">dashersupply@daball.me</a>. I look forward to the opportunity to serve you better. If
				you have any product suggestions based on your experience, be sure to reach out to me and let me know; provide URL links if you
				have them. I'm committed to showcasing the products and services that fellow delivery drivers rave about, so that
				others can enjoy the same level of satisfaction.
			</p>
			<h2>Work In Progress</h2>
			<p>
				Don't mind the dust. We're still building. And currently I am blocked on moving forward on some important items in the site
				development, described below.
			</p>
			<h2>Phase 1 (The Current Phase): Qualify for API access.</h2>
			<ul>
				<li>The Amazon Associates Operating Agreement requires 3 qualifying purchases and approval to continue.</li>
				<li>I am unable to reliably scrape current pricing and review details without access to the API.</li>
				<li>Therefore, in this series of iterations, it is a known issue that some information may be out-of-date and unverifiable,
					as it pertains to Amazon products in their database.</li>
				<li>Upon completion of qualification for API access, I will move into Phase 2.</li>
				<li>Simultaneously, I have requested access to Walmart Affiliate Program with API access.</li>
				<li>Access to either API will mark a transition into Phase 2.</li>
			</ul>
			<h2>Phase 2: Develop a site API that allows near real-time access to current product information.</h2>
			<ul>
				<li>So I probably need to implement a cache on the site API proxy. We wouldn't want to bother Amazon with frequent requests
					when a user might press the Refresh button 1,000 times for no really good reason.</li>
				<li>Crawlee worked really well as an intermittently capable site crawler for reading current data from the Amazon web site.
					This method can not be used with any reliabilty, but has been useful in building the current data set. Simple is better.
					Use a trusted and tested Amazon API client library if it's available.</li>
				<li>The frontend is built in Astro. But there's no requirement that any particular backend is needed. In theory it could work
					using Astro Islands and partial site generation with a memcached or redis cache. Highly performant is important,
					e.g. Rust, but if Node.js doesn't block for a long time it could be useful to use Astro top-to-bottom.</li>
				<li>To prevent abuse, only items that have previously been curated as part of my product listings will be accessible using the site API.</li>
				<li>For SEO and DoS purposes, all product pages should be statically generated. Be advised of XSS, XSRF, and any other security
					challenges with a public-facing API.</li>
				<li>Consider any mechanism that would enable partial site regeneration whenever the underlying data source changes. The current
					product listing data sources currently include TypeScript files in the project source directory. And the current rebuild can be
					achieved using dev mode filesystem change notifications.</li>
			</ul>
			<h2>Phase 3: Expand inventory.</h2>
			<ul>
				<li>Armed with confidence in the algorithms, begin expanding the curated list. I probably need hundreds of products in several categories.</li>
			</ul>
			<h2>Courtesies</h2>
			<p>
				While much of the language is my own, some of it was generated by one or more artificial intelligence (AI) large language models (LLMs).
				Many of the images are from the sellers. One of the images was from Unsplash. Most of the category images were generated with DALL-E. I want to
				thank the open source community for building amazing tools like Astro, which accelerates time to market for custom and unique web sites.
			</p>
			<h2>Open Source Software</h2>
			<p>
				This application is open source software. <a href="https://gitea.daball.me/daball/dashersupply">View source.</a>
			</p>
			<h2>Prime</h2>
			<p>
				Shout out to <a href="https://www.twitch.tv/theprimeagen">@theprimeagen</a> for the love of all things programming, inspiring us all
				to be better builders.
			</p>
			<h2>Getting Started Now</h2>
			<p>
				Please excuse us while we build. If you want to take part of the shopping experience in these preliminary phases, I appreciate you for
				helping out with any feedback you may have.
			</p>
			<p>
				<a href="/">Otherwise, you may click here to begin your curated shopping experience.</a>
			</p>
		</div>
	</main>
</Layout>

<style>
	main {
		margin: auto;
		padding: 1rem;
		min-width: 800px;
		max-width: calc(100% - 2rem);
		color: white;
		font-size: 16pt;
		line-height: 1.6;
	}
	.center {
		text-align: center;
	}
	h1 {
		font-size: 3rem;
		font-weight: 700;
		line-height: 1;
		margin-bottom: 1em;
		font-family: "Holtwood One SC", sans-serif;
  		font-weight: 600;
  		font-style: bold;
		text-shadow: -5px -5px 3px rgba(var(--accent-light), 7%), 3px -3px 0 rgba(var(--accent-light), 10%), -2px 2px 0 rgba(var(--accent-light), 5%), 5px 5px 0 rgba(var(--accent-light), 10%);
	}
	.text-gradient {
		background-image: var(--accent-gradient);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-size: 400%;
		background-position: 0%;
	}
	.disclaimers {
		margin-bottom: 2rem;
		border: 1px solid rgba(var(--accent-light), 25%);
		background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
		padding: 1.5rem;
		border-radius: 8px;
		font-family: "Urbanist", sans-serif;
  		font-weight: 400;
  		font-style: normal;
	}
	.instructions {
		margin-bottom: 2rem;
		border: 1px solid rgba(var(--accent-light), 25%);
		background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
		padding: 0.5rem;
		border-radius: 8px;
		font-family: "Caveat", cursive;
  		font-weight: 400;
  		font-style: normal;
		font-size: 2.2rem;
		text-align: center;
	}
	.instructions code {
		font-size: 0.8em;
		font-weight: bold;
		background: rgba(var(--accent-light), 12%);
		color: rgb(var(--accent-light));
		border-radius: 4px;
		padding: 0.3em 0.4em;
	}
	.instructions strong {
		color: rgb(var(--accent-light));
	}
	.link-card-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
		gap: 2rem;
		padding: 0;
	}
	a, a:link, a:visited { text-decoration: none; color: #fff }
	a:hover, a:active { text-decoration: underline; color: #fff }
	.user {
		display: inline-block;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		object-fit: scale-down;
		float: right;
	/* }
	.image{ */
		width: 20em;
		height: 20em;
		border-radius: 50%; /*don't forget prefixes*/
		background-image: url("https://daball.me/images/backgrounds/portrait-2.jpg");
		background-position: top 0px center;
		/* as mentioned by Vad: */
		background-size: cover;
	}
</style>