daball/dashersupply
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hoisted disclaimers to layout slot. Display Amazon disclaimer if and only if an Amazon product is showing.

Browse Source
This commit is contained in:
David Ball 2024-07-13 02:23:54 -04:00
parent 34c775713f
commit 47bd92b520
5 changed files with 78 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/layouts/Layout.astro
View File

@ -23,10 +23,22 @@ const { title } = Astro.props;
<script src={bootstrap}></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Holtwood+One+SC&family=Caveat:wght@400..700&Protest+Strike&family=Charm:wght@400;700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Holtwood+One+SC&family=Caveat:wght@400..700&family=Protest+Strike&family=Charm:wght@400;700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Urbanist:ital,wght@0,100..900;1,100..900&family=Saira+Extra+Condensed&display=swap" rel="stylesheet">
</head>
<body>
<slot />
<div class="footer">
<div class="footer-header">
<p class="logo"><a class="daball-navbar-brand" href="https://daball.me">A <span class="pretty">pretty</span> <span class="cool">cool</span> website by <span class="david">David</span> <span class="allen">A.</span> <span class="ball">Ball</span>.</a></p>
</div>
<div class="footer-content">
<p>
&copy; Copyright 2024 David A. Ball. Dasher Supply is not endorsed by nor affiliated with DoorDash.
<slot name="disclaimers" />
</p>
<p><a href="/about">About this site</a>. | <a href="https://gitea.daball.me/daball/dashersupply">View source</a>.</p>
</div>
</div>
</body>
</html>
<style is:global>
@ -58,4 +70,58 @@ const { title } = Astro.props;
Courier New,
monospace;
}
.footer {
margin-left: 2rem;
margin-right: 2rem;
/* border: 1px solid #23262d; */
border: none;
background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
border: 1px solid rgba(var(--accent-light), 25%);
border-bottom: 0px;
padding: 0;
color: #fff;
font-family: "Urbanist", sans-serif;
font-weight: 400;
font-size: 1.2em;
font-style: normal;
}
.footer, .footer-header {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.footer-header, .footer-content {
padding: 1.5rem;
}
.footer-header {
background-color: #23262d;
padding-bottom: 0.25em;
}
.footer-content {
padding-top: 1.25em;
}
a.daball-navbar-brand {
font-size: 1.5em;
font-weight: 700;
font-family: "Saira Extra Condensed";
text-transform: uppercase;
color: #fff;
text-decoration: none;
}
a .pretty, a .cool {
display: none;
}
a:hover .david, a:active .david, a:hover .cool, a:active .cool {
display: inline;
color: #0076ff;
}
a:hover .allen, a:active .allen {
display: inline;
color: #fff;
}
a:hover .ball, a:active .ball, a:hover .pretty, a:active .pretty {
display: inline;
color: rgb(var(--accent))
}
a, a:link, a:visited, .logo a:hover, .logo a:active { text-decoration: none; color: #fff }
a:hover, a:active { text-decoration: underline; color: #fff }
</style>

7
src/pages/[productLookup].astro
View File

@ -77,11 +77,10 @@ const brand: Brand = ALL_BRANDS.find(b => b.slug === product.brandStoreSlug)!;
</div>
</div>
<br />
<div class="disclaimers">
<p>Dasher Supply is not endorsed by or affiliated with DoorDash. As an Amazon Associate I earn from qualifying purchases.</p>
<a href="/about">About this site.</a>
</div>
</main>
{product?.amazonProductDetails &&
<span slot="disclaimers">As an Amazon Associate I earn from qualifying purchases.</span>
}
</Layout>
<style>

11
src/pages/brand/[brandLookup].astro
View File

@ -32,6 +32,7 @@ export function getStaticPaths() {
const { brandLookup } = Astro.params;
const brand: Brand = ALL_BRANDS.find(b => b.slug === brandLookup)!;
const brandProducts: Product[] = ALL_PRODUCTS.filter(p => p.brandStoreSlug === brand.slug)||[];
const isAnyAmazon = brandProducts.find(p => p.amazonLink) || false;
---
<Layout title={`${brand.name} Store - Dasher Supply`}>
@ -46,7 +47,6 @@ const brandProducts: Product[] = ALL_PRODUCTS.filter(p => p.brandStoreSlug === b
</div>
{brand.description && <div class="after-flex" set:html={md.render(brand.description)}></div> }
</div>
<!-- <div role="row"> -->
<ul role="list" class="link-card-grid">
{brandProducts.map((product, id) => (
<ProductCard
@ -54,13 +54,10 @@ const brandProducts: Product[] = ALL_PRODUCTS.filter(p => p.brandStoreSlug === b
/>
))}
</ul>
<!-- </div> -->
<br />
<div class="disclaimers">
<p>Dasher Supply is not endorsed by or affiliated with DoorDash. As an Amazon Associate I earn from qualifying purchases.</p>
<a href="/about">About this site.</a>
</div>
</main>
{isAnyAmazon &&
<span slot="disclaimers">As an Amazon Associate I earn from qualifying purchases.</span>
}
</Layout>
<style>

8
src/pages/category/[categoryLookup].astro
View File

@ -18,6 +18,7 @@ export function getStaticPaths() {
const { categoryLookup } = Astro.params;
const category = ALL_CATEGORIES.find(c => c.slug === categoryLookup)!;
const categoryProducts = ALL_PRODUCTS.filter(p => p.categoryId === category.id)!;
const isAnyAmazon = categoryProducts.find(p => p.amazonLink) || false;
---
<Layout title={`${category.category} - Dasher Supply`}>
@ -36,11 +37,10 @@ const categoryProducts = ALL_PRODUCTS.filter(p => p.categoryId === category.id)!
</ul>
<!-- </div> -->
<br />
<div class="disclaimers">
<p>Dasher Supply is not endorsed by or affiliated with DoorDash. As an Amazon Associate I earn from qualifying purchases.</p>
<a href="/about">About this site.</a>
</div>
</main>
{isAnyAmazon &&
<span slot="disclaimers">As an Amazon Associate I earn from qualifying purchases.</span>
}
</Layout>
<style>

14
src/pages/index.astro
View File

@ -30,10 +30,6 @@ import { getProductsForCategoryId } from '../data/products';
/>
))}
</ul>
<div class="disclaimers">
<p>Dasher Supply is not endorsed by or affiliated with DoorDash. As an Amazon Associate I earn from qualifying purchases.</p>
<a href="/about">About this site.</a>
</div>
</main>
</Layout>
@ -67,16 +63,6 @@ import { getProductsForCategoryId } from '../data/products';
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%);