├── .gitignore
├── app.vue
├── tsconfig.json
├── .env.example
├── layouts
    └── custom.vue
├── static
    └── building-headless-commerce-nuxt-shopify-tailwind.png
├── queries
    ├── checkout.gql
    ├── product.gql
    └── products.gql
├── components
    ├── TheHeader.vue
    ├── HeroBanner.vue
    ├── ProductList.vue
    ├── ProductCard.vue
    ├── ProductDetail.vue
    └── TheFooter.vue
├── pages
    ├── index.vue
    └── products
    │   └── [handle].vue
├── package.json
├── public
    └── logo.svg
├── nuxt.config.ts
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log*
3 | .nuxt
4 | .nitro
5 | .cache
6 | .output
7 | .env
8 | dist
9 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <NuxtLayout name="custom">
3 |     <NuxtPage />
4 |   </NuxtLayout>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://v3.nuxtjs.org/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | SHOPIFY_DOMAIN=https://<YOUR_SHOP>.myshopify.com/api/graphql.json
2 | SHOPIFY_STOREFRONT_TOKEN=<YOUR_TOKEN>


--------------------------------------------------------------------------------
/layouts/custom.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="px-20">
3 |     <TheHeader />
4 |     <slot />
5 |     <TheFooter />
6 |   </div>
7 | </template>


--------------------------------------------------------------------------------
/static/building-headless-commerce-nuxt-shopify-tailwind.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Baroshem/nuxt-shopify-tailwind/HEAD/static/building-headless-commerce-nuxt-shopify-tailwind.png


--------------------------------------------------------------------------------
/queries/checkout.gql:
--------------------------------------------------------------------------------
1 | mutation Checkout($variantId: ID!) {
2 |   checkoutCreate(input: { lineItems: { variantId: $variantId, quantity: 1 } }) {
3 |     checkout {
4 |       webUrl
5 |     }
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/components/TheHeader.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <nav class="py-2 relative w-full">
3 |     <div class="px-6">
4 |         <NuxtLink to="/">
5 |           <img class="h-20 w-20 mr-16" src="/logo.svg" alt="Store logo" />
6 |         </NuxtLink>
7 |     </div>
8 |   </nav>
9 | </template>


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { data } = await useAsyncData('products', () => GqlProducts({ first: 3 }))
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div>
 7 |     <HeroBanner />
 8 |     <ProductList :products="data.products.edges"/>
 9 |   </div>
10 | </template>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-shopify-tailwind",
 3 |   "author": "Baroshem",
 4 |   "scripts": {
 5 |     "build": "nuxt build",
 6 |     "dev": "nuxt dev",
 7 |     "generate": "nuxt generate",
 8 |     "preview": "nuxt preview"
 9 |   },
10 |   "devDependencies": {
11 |     "@nuxtjs/tailwindcss": "^5.1.2",
12 |     "nuxt": "3.0.0-rc.3"
13 |   },
14 |   "dependencies": {
15 |     "nuxt-graphql-client": "^0.0.32"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/queries/product.gql:
--------------------------------------------------------------------------------
 1 | query Product ($handle: String!) {
 2 |   productByHandle(handle: $handle) {
 3 |     id
 4 |     title
 5 |     productType
 6 |     priceRange {
 7 |       maxVariantPrice {
 8 |         amount
 9 |         currencyCode
10 |       }
11 |     }
12 |     description
13 |     images(first: 6) {
14 |       edges {
15 |         node {
16 |           src
17 |         }
18 |       }
19 |     }
20 |     variants (first: 1) {
21 |       edges {
22 |         node {
23 |           id
24 |         }
25 |       }
26 |     }
27 |   }
28 | }


--------------------------------------------------------------------------------
/queries/products.gql:
--------------------------------------------------------------------------------
 1 | query Products ($first: Int!, $query: String) {
 2 |   products(first: $first, query: $query) {
 3 |     edges {
 4 |       node {
 5 |         id
 6 |         images(first: 1) {
 7 |           edges {
 8 |             node {
 9 |               src
10 |             }
11 |           }
12 |         }
13 |         title
14 |         description
15 |         handle
16 |         priceRange {
17 |           maxVariantPrice {
18 |             amount
19 |             currencyCode
20 |           }
21 |         }
22 |       }
23 |     }
24 |   }
25 | }


--------------------------------------------------------------------------------
/components/HeroBanner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section>
 3 |     <img
 4 |       src="https://mdbootstrap.com/img/new/textures/full/142.jpg"
 5 |       class="h-[500px] w-full"
 6 |     />
 7 | 
 8 |     <div class="mx-auto px-32">
 9 |       <div
10 |         class="text-7xl font-bold text-center text-gray-800 rounded-lg shadow-lg py-16 px-12 bg-white/70 -mt-[170px] backdrop-blur-xl"
11 |       >
12 |         <h1 class="mb-3">Find the best products</h1>
13 |         <span class="text-green-600">on the market</span>
14 |       </div>
15 |     </div>
16 |   </section>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
1 | <svg width="40" height="40" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg" alt="Nuxt"><path d="M31.4918 17.1505C29.8172 14.2712 25.6308 14.2712 23.9562 17.1505L5.70589 48.5305C4.03131 51.4099 6.12453 55.009 9.4737 55.009H23.7209C22.2898 53.7583 21.7598 51.5946 22.8428 49.7382L36.6648 26.0451L31.4918 17.1505Z" fill="#80EEC0"></path><path d="M43.0556 24.0338C44.4415 21.678 47.9061 21.678 49.292 24.0338L64.3957 49.7083C65.7816 52.0641 64.0493 55.0089 61.2775 55.0089H31.0701C28.2984 55.0089 26.566 52.0641 27.9519 49.7083L43.0556 24.0338Z" fill="#00DC82"></path></svg>


--------------------------------------------------------------------------------
/components/ProductList.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const props = defineProps({
 3 |   products: {
 4 |     type: undefined,
 5 |     required: true
 6 |   }
 7 | })
 8 | </script>
 9 | 
10 | <template>
11 |   <div class="flex my-20">
12 |     <ProductCard
13 |       v-for="product in products"
14 |       :key="product.node.id"
15 |       :image="product.node.images.edges[0].node.src"
16 |       :title="product.node.title"
17 |       :price="`${product.node.priceRange.maxVariantPrice.amount} ${product.node.priceRange.maxVariantPrice.currencyCode}`"
18 |       :link="`/products/${product.node.handle}`"
19 |       :description="product.node.description"
20 |     />
21 |   </div>
22 | </template>


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineNuxtConfig } from "nuxt";
 2 | 
 3 | // https://v3.nuxtjs.org/api/configuration/nuxt.config
 4 | export default defineNuxtConfig({
 5 |   ssr: false,
 6 |   modules: ["@nuxtjs/tailwindcss", "nuxt-graphql-client"],
 7 | 
 8 |   runtimeConfig: {
 9 |     public: {
10 |       "graphql-client": {
11 |         clients: {
12 |           default: {
13 |             host: process.env.SHOPIFY_DOMAIN,
14 |             token: {
15 |               name: "X-Shopify-Storefront-Access-Token",
16 |               value: process.env.SHOPIFY_STOREFRONT_TOKEN,
17 |               type: null,
18 |             },
19 |             retainToken: true,
20 |           },
21 |         },
22 |       },
23 |     },
24 |   },
25 | });
26 | 


--------------------------------------------------------------------------------
/components/ProductCard.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const props = defineProps({
 3 |   title: {
 4 |     type: String,
 5 |     required: true,
 6 |   },
 7 |   price: {
 8 |     type: String,
 9 |     required: true,
10 |   },
11 |   image: {
12 |     type: String,
13 |     required: true,
14 |   },
15 |   link: {
16 |     type: String,
17 |     required: true,
18 |   },
19 |   description: {
20 |     type: String,
21 |     required: true,
22 |   }
23 | })
24 | </script>
25 | 
26 | <template>
27 |   <div class="mx-2">
28 |     <div class="relative rounded-lg shadow-lg">
29 |       <NuxtLink :to="link">
30 |         <img :src="image" class="shadow-lg rounded-lg opacity-1 hover:opacity-75 transition duration-300 ease-in-out" />
31 |       </NuxtLink>
32 |       <div class="p-6">
33 |         <h5 class="font-bold text-lg mb-3">{{ title }}</h5>
34 |         <pre class="text-gray-500 mb-4">{{ price }}</pre>
35 |         <p>{{ description }}</p>
36 |       </div>
37 |     </div>
38 |   </div>
39 | </template>


--------------------------------------------------------------------------------
/pages/products/[handle].vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const route = useRoute();
 3 | const { data: product } = await useAsyncData(
 4 |   `product-${route.params.handle}`,
 5 |   () => GqlProduct({ handle: route.params.handle as string })
 6 | );
 7 | const { data: related } = await useAsyncData(
 8 |   `product-related-${route.params.handle}`,
 9 |   () =>
10 |     GqlProducts({
11 |       first: 3,
12 |       query: `product_type:${product.value.productByHandle.productType}`,
13 |     })
14 | );
15 | 
16 | const loading = ref(false)
17 | 
18 | const redirectToPayment = async () => {
19 |   loading.value = true
20 |   const { checkoutCreate: { checkout: { webUrl } } } = await GqlCheckout({ variantId: product.value.productByHandle.variants.edges[0].node.id })
21 | 
22 |   window.location.href = webUrl
23 | }
24 | </script>
25 | 
26 | <template>
27 |   <div>
28 |     <ProductDetail
29 |       :title="product.productByHandle.title"
30 |       :description="product.productByHandle.description"
31 |       :price="`${product.productByHandle.priceRange.maxVariantPrice.amount} ${product.productByHandle.priceRange.maxVariantPrice.currencyCode}`"
32 |       :image="product.productByHandle.images.edges[0].node.src"
33 |       :loading="loading"
34 |       @button-clicked="redirectToPayment"
35 |     />
36 |     <ProductList :products="related.products.edges"/>
37 |   </div>
38 | </template>
39 | 


--------------------------------------------------------------------------------
/components/ProductDetail.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const props = defineProps({
 3 |   title: {
 4 |     type: String,
 5 |     required: true,
 6 |   },
 7 |   description: {
 8 |     type: String,
 9 |     required: true,
10 |   },
11 |   price: {
12 |     type: String,
13 |     required: true,
14 |   },
15 |   image: {
16 |     type: String,
17 |     required: true,
18 |   },
19 |   loading: {
20 |     type: Boolean,
21 |     required: true
22 |   }
23 | });
24 | 
25 | const emit = defineEmits(['button-clicked'])
26 | </script>
27 | 
28 | <template>
29 |   <section>
30 |     <div class="grid grid-cols-2 flex items-center px-20">
31 |       <img
32 |         :src="image"
33 |         class="rounded-lg shadow-lg -rotate-6"
34 |         alt="Product Image"
35 |       />
36 |       <div class="rounded-lg shadow-lg p-12 backdrop-blur-2xl">
37 |         <h2 class="text-4xl font-bold mb-6">{{ title }}</h2>
38 |         <p class="text-gray-500 mb-6">
39 |           {{ description }}
40 |         </p>
41 | 
42 |         <button
43 |           @click="emit('button-clicked')"
44 |           class="px-7 py-3 bg-green-600 text-white font-medium text-sm rounded shadow-md hover:bg-green-700 hover:shadow-lg focus:bg-green-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-green-800 active:shadow-lg transition duration-150 ease-in-out"
45 |         >
46 |           {{ loading ? 'Redirecting' : `Pay ${price}` }}
47 |         </button>
48 |       </div>
49 |     </div>
50 |   </section>
51 | </template>
52 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # [Out of date] Headless Commerce with Nuxt 3, Shopify, and TailwindCSS 
 2 | 
 3 | Please use this repository instead -> https://github.com/Baroshem/nuxt-shopify-storyblok
 4 | 
 5 | ![Headless Commerce with Nuxt 3, Shopify, and TailwindCSS](/static/building-headless-commerce-nuxt-shopify-tailwind.png)
 6 | 
 7 | Example of a Headless Commerce website built with Nuxt 3, Shopify, and TailwindCSS. This project is a code repository template used in video tutorial series and an article that will be published soon.
 8 | 
 9 | *This is not a real website template. In order to make it production ready many things would have to be implemented like order, checkout, categories, mobile support, etc. If you are looking for production ready Nuxt store with Shopify, check out [Vue Storefront](https://www.vuestorefront.io/) and especially, the integration with Shopify [here](https://docs.vuestorefront.io/shopify/).*
10 | 
11 | ## Reference
12 | 
13 | [![YouTube Video about Building Headless Commerce with Nuxt 3, Shopify, and TailwindCSS](https://img.youtube.com/vi/QK6wPHFiRyM/0.jpg)](https://www.youtube.com/watch?v=QK6wPHFiRyM)
14 | 
15 | * [TBD] Article tutorial
16 | 
17 | Official docs:
18 | 
19 | * Nuxt.js 3 documentation [here](https://v3.nuxtjs.org)
20 | * TailwindCSS documentation [here](https://tailwindcss.com/)
21 | * Shopify documentation [here](https://shopify.dev/api)
22 | * Tailwind Elements documentation [here](https://tailwind-elements.com/)
23 | 
24 | ## Setup
25 | 
26 | Make sure to install the dependencies:
27 | 
28 | ```bash
29 | # yarn
30 | yarn install
31 | 
32 | # npm
33 | npm install
34 | 
35 | # pnpm
36 | pnpm install --shamefully-hoist
37 | ```
38 | 
39 | ## Development Server
40 | 
41 | Start the development server on http://localhost:3000
42 | 
43 | ```bash
44 | npm run dev
45 | ```
46 | 
47 | ## Production
48 | 
49 | Build the application for production:
50 | 
51 | ```bash
52 | npm run build
53 | ```
54 | 
55 | Locally preview production build:
56 | 
57 | ```bash
58 | npm run preview
59 | ```
60 | 
61 | Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information.
62 | 


--------------------------------------------------------------------------------
/components/TheFooter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer class="p-4 flex items-center justify-center text-xl">
 3 |     <a href="https://v3.nuxtjs.org/" target="_blank">
 4 |       <svg class="h-8 mr-4" viewBox="0 0 204 44" fill="none" xmlns="http://www.w3.org/2000/svg" alt="Nuxt"><path d="M196.302 0H7.69811C3.44656 0 0 3.58172 0 8V36C0 40.4183 3.44656 44 7.69811 44H196.302C200.553 44 204 40.4183 204 36V8C204 3.58172 200.553 0 196.302 0Z" fill="#003C3C"></path><path d="M55.184 28V16.8H56.752L60.784 24.608L64.784 16.8H66.368V28H65.024V19.2L61.28 26.4H60.272L56.528 19.216V28H55.184ZM71.2909 28.192C70.6295 28.192 70.0802 28.08 69.6429 27.856C69.2055 27.632 68.8802 27.3333 68.6669 26.96C68.4535 26.5867 68.3469 26.1813 68.3469 25.744C68.3469 24.9333 68.6562 24.3093 69.2749 23.872C69.8935 23.4347 70.7362 23.216 71.8029 23.216H73.9469V23.12C73.9469 22.4267 73.7655 21.904 73.4029 21.552C73.0402 21.1893 72.5549 21.008 71.9469 21.008C71.4242 21.008 70.9709 21.1413 70.5869 21.408C70.2135 21.664 69.9789 22.0427 69.8829 22.544H68.5069C68.5602 21.968 68.7522 21.4827 69.0829 21.088C69.4242 20.6933 69.8455 20.3947 70.3469 20.192C70.8482 19.9787 71.3815 19.872 71.9469 19.872C73.0562 19.872 73.8882 20.1707 74.4429 20.768C75.0082 21.3547 75.2909 22.1387 75.2909 23.12V28H74.0909L74.0109 26.576C73.7869 27.024 73.4562 27.408 73.0189 27.728C72.5922 28.0373 72.0162 28.192 71.2909 28.192ZM71.4989 27.056C72.0109 27.056 72.4482 26.9227 72.8109 26.656C73.1842 26.3893 73.4669 26.0427 73.6589 25.616C73.8509 25.1893 73.9469 24.7413 73.9469 24.272V24.256H71.9149C71.1255 24.256 70.5655 24.3947 70.2349 24.672C69.9149 24.9387 69.7549 25.2747 69.7549 25.68C69.7549 26.096 69.9042 26.432 70.2029 26.688C70.5122 26.9333 70.9442 27.056 71.4989 27.056ZM80.9071 28.192C80.1178 28.192 79.4245 28.0107 78.8271 27.648C78.2405 27.2853 77.7818 26.7893 77.4511 26.16C77.1311 25.5307 76.9711 24.816 76.9711 24.016C76.9711 23.216 77.1365 22.5067 77.4671 21.888C77.7978 21.2587 78.2565 20.768 78.8431 20.416C79.4298 20.0533 80.1231 19.872 80.9231 19.872C81.5738 19.872 82.1498 20.0053 82.6511 20.272C83.1525 20.5387 83.5418 20.912 83.8191 21.392V16.48H85.1631V28H83.9471L83.8191 26.688C83.5631 27.072 83.1951 27.4187 82.7151 27.728C82.2351 28.0373 81.6325 28.192 80.9071 28.192ZM81.0511 27.024C81.5845 27.024 82.0538 26.9013 82.4591 26.656C82.8751 26.4 83.1951 26.048 83.4191 25.6C83.6538 25.152 83.7711 24.6293 83.7711 24.032C83.7711 23.4347 83.6538 22.912 83.4191 22.464C83.1951 22.016 82.8751 21.6693 82.4591 21.424C82.0538 21.168 81.5845 21.04 81.0511 21.04C80.5285 21.04 80.0591 21.168 79.6431 21.424C79.2378 21.6693 78.9178 22.016 78.6831 22.464C78.4591 22.912 78.3471 23.4347 78.3471 24.032C78.3471 24.6293 78.4591 25.152 78.6831 25.6C78.9178 26.048 79.2378 26.4 79.6431 26.656C80.0591 26.9013 80.5285 27.024 81.0511 27.024ZM90.922 28.192C90.1647 28.192 89.4927 28.0213 88.906 27.68C88.3193 27.328 87.8553 26.8427 87.514 26.224C87.1833 25.6053 87.018 24.8747 87.018 24.032C87.018 23.2 87.1833 22.4747 87.514 21.856C87.8447 21.2267 88.3033 20.7413 88.89 20.4C89.4873 20.048 90.1753 19.872 90.954 19.872C91.722 19.872 92.3833 20.048 92.938 20.4C93.5033 20.7413 93.9353 21.1947 94.234 21.76C94.5327 22.3253 94.682 22.9333 94.682 23.584C94.682 23.7013 94.6767 23.8187 94.666 23.936C94.666 24.0533 94.666 24.1867 94.666 24.336H88.346C88.378 24.944 88.5167 25.4507 88.762 25.856C89.018 26.2507 89.3327 26.5493 89.706 26.752C90.09 26.9547 90.4953 27.056 90.922 27.056C91.4767 27.056 91.9407 26.928 92.314 26.672C92.6873 26.416 92.9593 26.0693 93.13 25.632H94.458C94.2447 26.368 93.834 26.9813 93.226 27.472C92.6287 27.952 91.8607 28.192 90.922 28.192ZM90.922 21.008C90.282 21.008 89.7113 21.2053 89.21 21.6C88.7193 21.984 88.4367 22.5493 88.362 23.296H93.354C93.322 22.5813 93.0767 22.0213 92.618 21.616C92.1593 21.2107 91.594 21.008 90.922 21.008ZM102.298 28L99.9778 20.064H101.322L103.002 26.288L104.858 20.064H106.378L108.25 26.288L109.914 20.064H111.274L108.954 28H107.578L105.626 21.456L103.674 28H102.298ZM113.576 18.304C113.31 18.304 113.086 18.2187 112.904 18.048C112.734 17.8667 112.648 17.6427 112.648 17.376C112.648 17.12 112.734 16.9067 112.904 16.736C113.086 16.5653 113.31 16.48 113.576 16.48C113.832 16.48 114.051 16.5653 114.232 16.736C114.414 16.9067 114.504 17.12 114.504 17.376C114.504 17.6427 114.414 17.8667 114.232 18.048C114.051 18.2187 113.832 18.304 113.576 18.304ZM112.904 28V20.064H114.248V28H112.904ZM119.724 28C118.999 28 118.428 27.824 118.012 27.472C117.596 27.12 117.388 26.4853 117.388 25.568V21.2H116.012V20.064H117.388L117.564 18.16H118.732V20.064H121.068V21.2H118.732V25.568C118.732 26.0693 118.834 26.4107 119.036 26.592C119.239 26.7627 119.596 26.848 120.108 26.848H120.94V28H119.724ZM122.776 28V16.48H124.12V21.424C124.387 20.9333 124.765 20.5547 125.256 20.288C125.747 20.0107 126.28 19.872 126.856 19.872C127.773 19.872 128.509 20.16 129.064 20.736C129.619 21.3013 129.896 22.176 129.896 23.36V28H128.568V23.504C128.568 21.8507 127.901 21.024 126.568 21.024C125.875 21.024 125.293 21.2747 124.824 21.776C124.355 22.2667 124.12 22.9707 124.12 23.888V28H122.776ZM135.947 28V16.8H137.995L143.259 24.688V16.8H145.307V28H143.259L137.995 20.128V28H135.947ZM150.407 28.192C149.415 28.192 148.647 27.8827 148.103 27.264C147.569 26.6453 147.303 25.7387 147.303 24.544V20.064H149.335V24.352C149.335 25.0347 149.473 25.5573 149.751 25.92C150.028 26.2827 150.465 26.464 151.063 26.464C151.628 26.464 152.092 26.2613 152.455 25.856C152.828 25.4507 153.015 24.8853 153.015 24.16V20.064H155.063V28H153.255L153.095 26.656C152.849 27.1253 152.492 27.4987 152.023 27.776C151.564 28.0533 151.025 28.192 150.407 28.192ZM156.413 28L159.293 24.032L156.413 20.064H158.605L160.621 22.88L162.621 20.064H164.829L161.933 24.032L164.829 28H162.621L160.621 25.184L158.605 28H156.413ZM169.67 28C168.838 28 168.171 27.7973 167.67 27.392C167.168 26.9867 166.918 26.2667 166.918 25.232V21.776H165.558V20.064H166.918L167.158 17.936H168.966V20.064H171.11V21.776H168.966V25.248C168.966 25.632 169.046 25.8987 169.206 26.048C169.376 26.1867 169.664 26.256 170.07 26.256H171.062V28H169.67ZM175.844 28.192C174.756 28.192 173.881 27.888 173.22 27.28C172.569 26.6613 172.244 25.7867 172.244 24.656H174.292C174.303 25.1787 174.425 25.5947 174.66 25.904C174.895 26.2133 175.273 26.368 175.796 26.368C176.287 26.368 176.644 26.224 176.868 25.936C177.092 25.6373 177.204 25.248 177.204 24.768V16.8H179.252V24.768C179.252 25.8667 178.943 26.7147 178.324 27.312C177.716 27.8987 176.889 28.192 175.844 28.192ZM185.256 28.192C184.434 28.192 183.709 28.0533 183.08 27.776C182.45 27.488 181.954 27.0827 181.592 26.56C181.229 26.0267 181.042 25.3813 181.032 24.624H183.192C183.213 25.1467 183.4 25.5893 183.752 25.952C184.114 26.304 184.61 26.48 185.24 26.48C185.784 26.48 186.216 26.352 186.536 26.096C186.856 25.8293 187.016 25.4773 187.016 25.04C187.016 24.5813 186.872 24.224 186.584 23.968C186.306 23.712 185.933 23.504 185.464 23.344C184.994 23.184 184.493 23.0133 183.96 22.832C183.096 22.5333 182.434 22.1493 181.976 21.68C181.528 21.2107 181.304 20.5867 181.304 19.808C181.293 19.1467 181.448 18.5813 181.768 18.112C182.098 17.632 182.546 17.264 183.112 17.008C183.677 16.7413 184.328 16.608 185.064 16.608C185.81 16.608 186.466 16.7413 187.032 17.008C187.608 17.2747 188.056 17.648 188.376 18.128C188.706 18.608 188.882 19.1787 188.904 19.84H186.712C186.701 19.4453 186.546 19.0987 186.248 18.8C185.96 18.4907 185.554 18.336 185.032 18.336C184.584 18.3253 184.205 18.4373 183.896 18.672C183.597 18.896 183.448 19.2267 183.448 19.664C183.448 20.0373 183.565 20.336 183.8 20.56C184.034 20.7733 184.354 20.9547 184.76 21.104C185.165 21.2533 185.629 21.4133 186.152 21.584C186.706 21.776 187.213 22 187.672 22.256C188.13 22.512 188.498 22.8533 188.776 23.28C189.053 23.696 189.192 24.2347 189.192 24.896C189.192 25.4827 189.042 26.0267 188.744 26.528C188.445 27.0293 188.002 27.4347 187.416 27.744C186.829 28.0427 186.109 28.192 185.256 28.192Z" fill="#E6F0F0"></path><path d="M22.891 15.818c-.572-.983-2-.983-2.572 0l-6.23 10.712c-.572.983.142 2.212 1.285 2.212h4.864a1.424 1.424 0 0 1-.3-1.8l4.719-8.088-1.766-3.036Z" fill="#80EEC0"></path><path d="M26.839 18.168c.473-.805 1.656-.805 2.129 0l5.156 8.764c.473.805-.119 1.81-1.065 1.81H22.747c-.946 0-1.538-1.005-1.064-1.81l5.156-8.764Z" fill="#00DC82"></path><path d="M45 0h-1v44h1V0Z" fill="#2A5B5B"></path></svg>
 5 |     </a>
 6 |     by
 7 |     <a
 8 |       class="text-green-600 ml-2"
 9 |       target="_blank"
10 |       href="https://twitter.com/jacobandrewsky"
11 |       >@jacobandrewsky</a
12 |     >
13 |   </footer>
14 | </template>
15 | 


--------------------------------------------------------------------------------