footer adjustments

neuland · Jun 3, 2024 · d59f72b · d59f72b
1 parent 80d1d2b
commit d59f72b
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 12 deletions.
diff --git a/src/explore/components/Footer.css b/src/explore/components/Footer.css
@@ -98,14 +98,20 @@
 }
 
 .e_Footer__initiative {
-  grid-area: initiave;
   display: flex;
   gap: 1rem;
   align-items: flex-start;
   flex: 1;
   margin-bottom: 2rem;
 }
 
+.e_Footer__initiative,
+.e_Footer__credits {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 50%;
+}
+
 .e_Footer__initiative img {
   margin-top: 4px;
   width: 45px;
@@ -115,10 +121,6 @@
   margin: 0;
 }
 
-.e_Footer__credits {
-  grid-area: credits;
-}
-
 .e_Footer__credits h4 {
   margin: 0;
   font-size: 1em;

diff --git a/src/explore/components/Footer.js b/src/explore/components/Footer.js
@@ -5,28 +5,46 @@ export default () => {
     <div class="e_Footer__cutter">
       <div class="e_Footer__inner">
         <div class="e_Footer__initiative">
+          <!-- please leave this part untouched -->
           <img
             src="${IMAGE_SERVER}/cdn/img/neulandlogo.svg"
             alt="neuland - Büro für Informatik"
           />
           <p>
-            the tractor store reference implementation <br />
-            a <a href="https://neuland-bfi.de">neuland</a> project
+            based on
+            <a
+              href="https://micro-frontends.org/tractor-store/"
+              target="_blank"
+            >
+              the tractor store 2.0
+            </a>
+            <br />
+            a
+            <a href="https://neuland-bfi.de" target="_blank">neuland</a> project
           </p>
         </div>
 
         <div class="e_Footer__credits">
+          <!-- replace this details about your implementation and organization -->
           <h4>techstack</h4>
           <p>
-            build with no frameworks, server-side, modular monolith, Node.js
+            ssr-only, modular monolith, template strings, esbuild, hono,
+            cloudflare workers
           </p>
           <p>
             build by
             <img
               src="${IMAGE_SERVER}/cdn/img/neulandlogo.svg"
               alt="neuland - Büro für Informatik"
             />
-            <a href="https://neuland-bfi.de"> neuland</a>
+            <a href="https://neuland-bfi.de" target="_blank">neuland</a>
+            /
+            <a
+              href="https://github.com/neuland/tractor-store-blueprint"
+              target="_blank"
+            >
+              github
+            </a>
           </p>
         </div>
       </div>

diff --git a/src/explore/components/Product.js b/src/explore/components/Product.js
@@ -1,4 +1,4 @@
-import { html, src, srcset } from "../utils.js";
+import { html, src, srcset, fmtprice } from "../utils.js";
 
 /**
  * Product component.
@@ -17,7 +17,7 @@ export default ({ name, url, image, startPrice }) => {
         height="200"
       />
       <span class="e_Product_name">${name}</span>
-      <span class="e_Product_price">${startPrice},00 Ø</span>
+      <span class="e_Product_price">${fmtprice(startPrice)}</span>
     </a>
   </li>`;
 };
diff --git a/src/explore/components/Recommendations.js b/src/explore/components/Recommendations.js
@@ -23,7 +23,6 @@ function averageColor(colors) {
  * @returns {number[][]} The array of colors.
  */
 function skusToColors(skus) {
-  console.log({ skus });
   return skus.filter((sku) => r[sku]).map((sku) => r[sku].rgb);
 }
 

diff --git a/src/explore/utils.js b/src/explore/utils.js
@@ -27,3 +27,12 @@ export function src(image, size) {
 export function srcset(image, sizes = []) {
   return sizes.map((size) => `${src(image, size)} ${size}w`).join(", ");
 }
+
+/**
+ * Formats a price value.
+ * @param {number} price - The price value to format.
+ * @returns {string} - The formatted price.
+ */
+export function fmtprice(price) {
+  return `${price},00 Ø`;
+}