Add link functionality to uses cards

whitep4nth3r · Dec 12, 2024 · 4d6e4b8 · 4d6e4b8
1 parent 8529a3f
commit 4d6e4b8
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 31 deletions.
diff --git a/lib/contentfulThingsIUse.js b/lib/contentfulThingsIUse.js
@@ -16,6 +16,7 @@ const ContentfulThingsIUse = {
           }
           name
           category
+          link
           image {
             ${GraphQLStringBlocks.imageAsset()}
           }

diff --git a/src/_components/card.js b/src/_components/card.js
@@ -15,7 +15,8 @@ function openingTag({ item, heading }) {
     href = `/blog/${item.slug}/`;
   }
 
-  if (item.link) {
+  if (item.link && item.type !== "thing"
+  ) {
     href = item.link;
   }
 
@@ -150,9 +151,9 @@ const Card = ({ item, showType = true, lazyLoad = false }) => {
       ${renderDate(item)}
       <h2 class="card__title">${heading}</h2>
       ${description(item)}
-      
+      ${item.type === "thing" && item.link ? `<a href="${item.link}" class="card__linkButton" target="_blank">Buy this thing</a>` : ""}
       ${showType === false ? itemMeta(item) : renderType(item)}
-  </div>
+    </div>
     ${closingTag(item)}`;
 };
 

diff --git a/src/_css/main.css b/src/_css/main.css
diff --git a/src/_css/main.css.map b/src/_css/main.css.map
diff --git a/src/_sass/_card.scss b/src/_sass/_card.scss
@@ -11,10 +11,8 @@
 [color-mode="light"] {
   --card-bg: rgba(255, 255, 255, 0.32);
   --card-bg-hover: rgba(255, 255, 255, 0.72);
-  --card-box-shadow: 0px 0px 0px -16px rgba(27, 27, 27, 0.01),
-    inset 0px 1px 0px rgba(255, 255, 255, 0.16);
-  --card-box-shadow-hover: 0px 24px 32px -16px rgba(27, 27, 27, 0.16),
-    inset 0px 1px 0px rgba(255, 255, 255, 0.16);
+  --card-box-shadow: 0px 0px 0px -16px rgba(27, 27, 27, 0.01), inset 0px 1px 0px rgba(255, 255, 255, 0.16);
+  --card-box-shadow-hover: 0px 24px 32px -16px rgba(27, 27, 27, 0.16), inset 0px 1px 0px rgba(255, 255, 255, 0.16);
 }
 
 .card {
@@ -127,3 +125,24 @@
   line-height: 1.125;
   color: var(--color-fg);
 }
+
+.card__linkButton {
+  background: linear-gradient(45deg, var(--pink) 0%, var(--orange) 75%);
+  display: block;
+  border-width: 0;
+  border-radius: var(--border-radius-base);
+  width: 100%;
+  color: var(--white);
+  font-weight: bold;
+  text-transform: uppercase;
+  font-size: 1.5rem;
+  text-align: center;
+  text-decoration: none;
+  padding: 0.5rem 1rem;
+  margin: 0 auto 0.5rem auto;
+}
+
+.card__linkButton:focus-visible,
+.card__linkButton:focus-visible:focus {
+  @include utils.link_focus;
+}
diff --git a/src/_sass/_newsletter-signup.scss b/src/_sass/_newsletter-signup.scss
@@ -36,8 +36,8 @@
 }
 
 .newsletterSignup__submit {
-  background-color: var(--pink);
-  display: block;
+  background: linear-gradient(45deg, var(--pink) 0%, var(--orange) 75%);
+    display: block;
   border-width: 0;
   border-radius: var(--border-radius-base);
   width: 100%;
@@ -53,5 +53,5 @@
 
 .newsletterSignup__submit:focus-visible,
 .newsletterSignup__submit:focus-visible:focus {
-  @include utils.input_focus;
+  @include utils.link_focus;
 }
diff --git a/src/_sass/_page.scss b/src/_sass/_page.scss
@@ -7,3 +7,10 @@
   line-height: 1.4;
   color: var(--color-fg);
 }
+
+.page__text {
+  @include font.font_main;
+  font-size: 1.125rem;
+  line-height: 1.75;
+  color: var(--color-copy);
+}
diff --git a/src/_sass/_webring.scss b/src/_sass/_webring.scss
@@ -95,12 +95,12 @@
 }
 
 .tcwr__join {
-  background-color: var(--orange);
+  background: linear-gradient(45deg, var(--pink) 0%, var(--orange) 75%);
   display: block;
   border-width: 0;
   border-radius: var(--border-radius-base);
   width: 100%;
-  color: var(--black);
+  color: var(--white);
   font-weight: bold;
   text-transform: uppercase;
   font-size: 1.5rem;
@@ -112,5 +112,5 @@
 
 .tcwr__join:focus-visible,
 .tcwr__join:focus-visible:focus {
-  @include utils.input_focus;
+  @include utils.link_focus;
 }
diff --git a/src/uses/index.11ty.js b/src/uses/index.11ty.js
@@ -26,6 +26,7 @@ exports.render = function (data) {
   return /* html */ `
     <section class="uses">
         <h1 class="page__headerTitle">${pageTitle}</h1>
+        <p class="page__text"><em>Buy this thing</em> links will earn me a small commission.</p>
         ${categories
           .map(
             (cat) => `
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,6 +16,7 @@ const ContentfulThingsIUse = { @@
               }
               name
               category
+              link
               image {
                 ${GraphQLStringBlocks.imageAsset()}
               }
@@ Expand Down @@