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.
			</p>
			<p>
				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 want this shopping experience to be as awesome as it could possibly be, so I would be proud to post up the things other delivery drivers love as well.
			</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 as an Amazon Associate.</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>
			</ul>
			<h2>Phase 2: Develop a site API that allows near real-time access to current Amazon 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: 20px;
		line-height: 1.6;
	}
	.center {
		text-align: center;
	}
	h1 {
		font-size: 4rem;
		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 0 rgba(var(--accent-dark), 17%), 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.5rem;
		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>