kickoff contribute

neuland · Jun 14, 2024 · b42366f · b42366f
1 parent 24b358e
commit b42366f
Show file tree

Hide file tree

Showing 10 changed files with 357 additions and 186 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -32,6 +32,7 @@ export default defineConfig({
   site: BASE_URL,
   base: "/tractor-store/",
   trailingSlash: "always",
+  compressHTML: true,
   integrations: [
     sitemap(),
     tailwind({

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
     "zod": "^3.20.2"
   },
   "devDependencies": {
-    "prettier-plugin-astro": "^0.7.2",
+    "prettier-plugin-astro": "^0.14.0",
     "typescript": "^4.9.4"
   }
-}
+}
diff --git a/src/components/Button.astro b/src/components/Button.astro
@@ -0,0 +1,140 @@
+---
+const { title, variant = "primary", href } = Astro.props;
+---
+
+<a
+  class=`unset mt-2 mb-2 mx-auto c_Button c_Button--${variant} c_Button--size-normal`
+  href={href}
+>
+  <span class="c_Button__inner">{title}</span>
+</a>
+
+<style>
+  .c_Button--size-normal {
+    --button-height: 50px;
+  }
+
+  .c_Button--size-small {
+    --button-height: 40px;
+  }
+
+  a.c_Button {
+    text-decoration: none;
+    display: inline-block;
+    height: var(--button-height);
+    border-radius: calc(var(--button-height) / 2);
+    padding: 2px;
+    border: 0;
+    background: linear-gradient(180deg, rgb(168, 168, 168), rgb(255, 255, 255)),
+      var(--accent-color);
+    box-shadow: 0 -2px 3px rgb(229, 229, 229), 0 2px 3px 2px rgb(255, 255, 255),
+      0 0 25px rgba(0, 0, 0, 0.05), 0 -10px 5px rgb(255, 255, 255) inset;
+    position: relative;
+    text-transform: uppercase;
+    letter-spacing: 0.3em;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    text-decoration: none;
+    font-size: 16px;
+  }
+
+  .c_Button--primary {
+    --accent-color: #ff5a55;
+    color: #fff;
+  }
+
+  .c_Button--secondary {
+    --accent-color: #ffffff;
+    color: #000;
+  }
+
+  .c_Button--rounded.c_Button--size-normal {
+    @media (max-width: 499px) {
+      --button-height: 40px;
+    }
+    @media (min-width: 500px) {
+      --button-height: 66px;
+    }
+    width: var(--button-height);
+  }
+
+  .c_Button--rounded.c_Button--size-small {
+    --button-height: 40px;
+
+    width: var(--button-height);
+  }
+
+  .c_Button--rounded .c_Button__inner {
+    padding: 0;
+  }
+
+  @media (max-width: 499px) {
+    .c_Button--rounded svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .c_Button[disabled] {
+    --accent-color: #d3d3d3;
+    pointer-events: none;
+  }
+
+  .c_Button::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: inherit;
+    left: 0;
+    background: linear-gradient(
+        0deg,
+        rgba(0, 0, 0, 0.19),
+        rgba(255, 255, 255, 0.3)
+      ),
+      var(--accent-color);
+    content: "";
+    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.1);
+    display: block;
+    transition: transform 0.3s, box-shadow 0.3s, background 0.1s 0.2s;
+  }
+
+  .c_Button__inner {
+    position: relative;
+    padding-left: 30px;
+    padding-right: 30px;
+    background-color: var(--accent-color);
+    height: calc(var(--button-height) - 4px);
+    border-radius: inherit;
+    display: grid;
+    place-content: center;
+    transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  .c_Button:hover .c_Button__inner,
+  .c_Button:focus .c_Button__inner {
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),
+      var(--accent-color);
+  }
+
+  .c_Button:active::before {
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.16)),
+      var(--accent-color);
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.6) inset,
+      0 2px 1px -1px rgba(0, 0, 0, 0.1);
+    transform: scale(0.97);
+    transition: all 0.1s, background 0.05s;
+  }
+
+  .c_Button:active .c_Button__inner {
+    transform: scale(0.97);
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
+      var(--accent-color);
+    transition: all 0.1s;
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2) inset,
+      0 -3px 3px rgba(255, 255, 255, 0.2) inset;
+  }
+</style>
diff --git a/src/components/content/BigPicture.astro b/src/components/content/BigPicture.astro
@@ -2,15 +2,90 @@
 import TeamBoundaries from "../teamBoundaries.astro";
 ---
 
-<h2>Big picture / Team responsabilities</h2>
-<div class="md:flex items-center mt-8">
-  <div class="basis-3/4">
-    <TeamBoundaries />
+<h2
+  class="font-bold text-text-heading text-2xl md:text-3xl pt-4 mb-12 w-fit overflow-hidden"
+>
+  Big picture / Team responsabilities
+</h2>
+
+<div class="teams mb-12">
+  <div class="team explore">
+    <h3 class="font-bold text-text-heading text-xl mb-4">Team Explore</h3>
+    <p>
+      <strong>Mission</strong><br />
+      Help users explore the tractor portfolio and stores locations.<br /><br />
+
+      <strong>Responsibility</strong><br />
+      home, product lists, stores, recommendations
+    </p>
   </div>
-  <div class="basis-1/4 md:pl-4 pt-4">
+  <div class="team decide">
+    <h3 class="font-bold text-text-heading text-xl mb-4">Team Decide</h3>
     <p>
-      E-Commerce project with boundaries for three teams and use-cases for
-      routing, integration and communication.
+      <strong>Mission</strong><br />
+      Help users decide what model tractor they should choose.
+      <br /><br />
+
+      <strong>Responsibility</strong><br />
+      product page
+    </p>
+  </div>
+  <div class="team checkout">
+    <h3 class="font-bold text-text-heading text-xl mb-4">Team Checkout</h3>
+    <p>
+      <strong>Mission</strong><br />
+      Guide users through the checkout process.
+      <br /><br />
+
+      <strong>Responsibility</strong><br />
+      cart, checkout, thanks
     </p>
   </div>
 </div>
+
+<style>
+  .teams {
+    @media (max-width: 499px) {
+      grid-template-columns: 1fr;
+    }
+
+    @media (min-width: 500px) and (max-width: 999px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (min-width: 1000px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    display: grid;
+    gap: 1rem;
+  }
+
+  .team {
+    position: relative;
+    padding-left: 1.3rem;
+    padding-right: 10%;
+  }
+
+  .team::before {
+    display: block;
+    content: "";
+    width: 5px;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    border-radius: 3px;
+  }
+
+  .team.explore::before {
+    background-color: rgba(255, 90, 84, 1);
+  }
+
+  .team.decide::before {
+    background-color: rgba(84, 255, 144, 1);
+  }
+
+  .team.checkout::before {
+    background-color: rgba(255, 222, 84, 1);
+  }
+</style>
diff --git a/src/components/content/Contribute.astro b/src/components/content/Contribute.astro
@@ -2,25 +2,35 @@
 ---
 
 <section class="lg:flex">
-    <div class="basis-3/5">
-        <img src="images/contribute.svg" typeof="foaf:Image" />
-    </div>
-    <div class="basis-2/5 md:pt-12">
-        <h3 class="font-bold text-text-heading text-2xl md:text-3xl pb-2">
-            How to Contribute
-        </h3>
-        <ol class="list-decimal">
-            <li>
-                <h6 class="font-bold">Create a new repository</h6>
-                A micro frontends architecture can be built in many ways. Custom crafted and tailored to your organization's specific needs or by following the rules of a specific micro frontends meta-framework. The final result is also affected by the technologies you choose and whether you want to render your application on the server and/or client.
-            </li>
-            <li>
-                <h6 class="font-bold">Chose framework, technique and implement</h6>
-                Making good choices is not always easy. Being able to look at real-world code and examples helps everyone involved to get a good understanding of your decisions and their implications.</li>
-            <li>
-                <h6 class="font-bold">Submit your implementation</h6>
-                The Tractor Store aims to be to micro frontends what TodoMVC was to the advent of JavaScript Frameworks in the late 2000s: An awesome collection of different implementations for the same application. A valuable learning resource for people new to this topic and also a good basis for advanced discussions.
-            </li>
-        </ol>
-    </div>
-</section>
+  <div class="basis-3/5">
+    <img src="images/contribute.svg" typeof="foaf:Image" />
+  </div>
+  <div class="basis-2/5 md:pt-12">
+    <h3 class="font-bold text-text-heading text-2xl md:text-3xl pb-2">
+      How to Contribute
+    </h3>
+    <ol class="list-decimal">
+      <li>
+        <h6 class="font-bold">Create a new repository</h6>
+        Fork the Tractor Store repository (e.g. <a
+          href="https://github.com/neuland/tractor-store"
+        >
+          Blueprint
+        </a> or
+        <a href="https://github.com/neuland/tractor-store-preact">
+          Preact-Version
+        </a>) and create a new repository with the name of the framework or
+        technique you want to implement. This will be the place where you will
+        implement your version of the Tractor Store.
+      </li>
+      <li>
+        <h6 class="font-bold">Chose framework, technique and implement</h6>
+        Choose a framework or technique you want to implement the Tractor Store with.
+      </li>
+      <li>
+        <h6 class="font-bold">Submit your implementation</h6>
+        Submit a pull request to the Tractor Store repository with your implementation.
+      </li>
+    </ol>
+  </div>
+</section>