diff --git a/astro.config.mjs b/astro.config.mjs index b8493d6..df7b9f9 100644 --- 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 index 54a1b24..98b91d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,7 @@ "zod": "^3.20.2" }, "devDependencies": { - "prettier-plugin-astro": "^0.7.2", + "prettier-plugin-astro": "^0.14.0", "typescript": "^4.9.4" } }, @@ -78,6 +78,21 @@ "astro-ls": "bin/nodeServer.js" } }, + "node_modules/@astrojs/language-server/node_modules/prettier-plugin-astro": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.7.2.tgz", + "integrity": "sha512-mmifnkG160BtC727gqoimoxnZT/dwr8ASxpoGGl6EHevhfblSOeu+pwH1LAm5Qu1MynizktztFujHHaijLCkww==", + "dependencies": { + "@astrojs/compiler": "^0.31.3", + "prettier": "^2.7.1", + "sass-formatter": "^0.7.5", + "synckit": "^0.8.4" + }, + "engines": { + "node": "^14.15.0 || >=16.0.0", + "pnpm": ">=7.14.0" + } + }, "node_modules/@astrojs/markdown-remark": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-1.2.0.tgz", @@ -4957,18 +4972,38 @@ } }, "node_modules/prettier-plugin-astro": { - "version": "0.7.2", - "resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.7.2.tgz", - "integrity": "sha512-mmifnkG160BtC727gqoimoxnZT/dwr8ASxpoGGl6EHevhfblSOeu+pwH1LAm5Qu1MynizktztFujHHaijLCkww==", + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.14.0.tgz", + "integrity": "sha512-7jRGJsexaRIyUzTk8uzXlP45cw6DQ5Ci4bTe0xCBCcuO1Fff8jJy9oI+kRCQKSdDFTSAArMSg8GpvzlKBtSaZA==", + "dev": true, "dependencies": { - "@astrojs/compiler": "^0.31.3", - "prettier": "^2.7.1", - "sass-formatter": "^0.7.5", - "synckit": "^0.8.4" + "@astrojs/compiler": "^1.5.5", + "prettier": "^3.0.0", + "sass-formatter": "^0.7.6" }, "engines": { - "node": "^14.15.0 || >=16.0.0", - "pnpm": ">=7.14.0" + "node": "^14.15.0 || >=16.0.0" + } + }, + "node_modules/prettier-plugin-astro/node_modules/@astrojs/compiler": { + "version": "1.8.2", + "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-1.8.2.tgz", + "integrity": "sha512-o/ObKgtMzl8SlpIdzaxFnt7SATKPxu4oIP/1NL+HDJRzxfJcAkOTAb/ZKMRyULbz4q+1t2/DAebs2Z1QairkZw==", + "dev": true + }, + "node_modules/prettier-plugin-astro/node_modules/prettier": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz", + "integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==", + "dev": true, + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" } }, "node_modules/prismjs": { diff --git a/package.json b/package.json index 1d5dc63..4e05f5c 100644 --- 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" } -} \ No newline at end of file +} diff --git a/src/components/Button.astro b/src/components/Button.astro new file mode 100644 index 0000000..75381e5 --- /dev/null +++ b/src/components/Button.astro @@ -0,0 +1,140 @@ +--- +const { title, variant = "primary", href } = Astro.props; +--- + + + {title} + + + diff --git a/src/components/content/BigPicture.astro b/src/components/content/BigPicture.astro index 8958619..e16fbd4 100644 --- a/src/components/content/BigPicture.astro +++ b/src/components/content/BigPicture.astro @@ -2,15 +2,90 @@ import TeamBoundaries from "../teamBoundaries.astro"; --- -

Big picture / Team responsabilities

-
-
- +

+ Big picture / Team responsabilities +

+ +
+
+

Team Explore

+

+ Mission
+ Help users explore the tractor portfolio and stores locations.

+ + Responsibility
+ home, product lists, stores, recommendations +

-
+
+

Team Decide

- E-Commerce project with boundaries for three teams and use-cases for - routing, integration and communication. + Mission
+ Help users decide what model tractor they should choose. +

+ + Responsibility
+ product page +

+
+
+

Team Checkout

+

+ Mission
+ Guide users through the checkout process. +

+ + Responsibility
+ cart, checkout, thanks

+ + diff --git a/src/components/content/Contribute.astro b/src/components/content/Contribute.astro index a112165..de5627c 100644 --- a/src/components/content/Contribute.astro +++ b/src/components/content/Contribute.astro @@ -2,25 +2,35 @@ ---
-
- -
-
-

- How to Contribute -

-
    -
  1. -
    Create a new repository
    - 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. -
    2. -
  2. -
    Chose framework, technique and implement
    - 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.
    3. -
  3. -
    Submit your implementation
    - 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. -
    4. -
-
-
\ No newline at end of file +
+ +
+
+

+ How to Contribute +

+
    +
  1. +
    Create a new repository
    + Fork the Tractor Store repository (e.g. + Blueprint + or + + Preact-Version + ) 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. +
    2. +
  2. +
    Chose framework, technique and implement
    + Choose a framework or technique you want to implement the Tractor Store with. +
    3. +
  3. +
    Submit your implementation
    + Submit a pull request to the Tractor Store repository with your implementation. +
    4. +
+
+ diff --git a/src/components/content/Implementations.astro b/src/components/content/Implementations.astro index 175a6ad..0cf372e 100644 --- a/src/components/content/Implementations.astro +++ b/src/components/content/Implementations.astro @@ -39,15 +39,17 @@ import MFExample from "../MFExample.astro"; author="Michael Geers" company="neuland - Büro für Informatik" githubUrl="https://github.com/neuland/tractor-store-preact" - liveUrl="https://tractor-store-blueprint.neuland-bfi.workers.dev" />
@@ -89,132 +91,4 @@ import MFExample from "../MFExample.astro"; grid-column: span 3; } } - - .c_Button--size-normal { - --button-height: 50px; - } - - .c_Button--size-small { - --button-height: 40px; - } - - .c_Button { - display: block; - height: var(--button-height); - width: 100%; - 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: 20px; - padding-right: 20px; - 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; - } diff --git a/src/components/content/TechnologicalChallenges.astro b/src/components/content/TechnologicalChallenges.astro index a32b077..380caf0 100644 --- a/src/components/content/TechnologicalChallenges.astro +++ b/src/components/content/TechnologicalChallenges.astro @@ -3,18 +3,18 @@

Technological challenges

-
+ + diff --git a/src/components/content/TodoMVC.astro b/src/components/content/TodoMVC.astro index 4eba780..c7d0a8f 100644 --- a/src/components/content/TodoMVC.astro +++ b/src/components/content/TodoMVC.astro @@ -1,4 +1,5 @@ --- +import Button from "../Button.astro"; ---
@@ -30,6 +31,11 @@ learning resource for people new to this topic and also a good basis for advanced discussions.

+ +
diff --git a/src/components/content/UseCases.astro b/src/components/content/UseCases.astro index df3e44c..aec3a26 100644 --- a/src/components/content/UseCases.astro +++ b/src/components/content/UseCases.astro @@ -1,10 +1,10 @@ --- --- -
+

Features