ahmza/blog-ahmza-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated product page, trying to fix tina vars

Browse Source
This commit is contained in:
Hamza Ahmed
2023-11-16 16:36:44 +00:00
parent d6cbde3e8e
commit 867985be61
14 changed files with 321 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitlab-ci.yml
+4 -2
View File
@@ -9,8 +9,10 @@ variables:
# Major - Shouldn't change often, Big changes to the site
# Minor - starts from 0 when Major is incremented +1 for each version that goes public
# Release - For each time a development milestone is reached
VERSION: 1.1.0
VERSION: 1.1.1
IMAGE_TAG: $CI_REGISTRY_IMAGE:$VERSION
# Grab Variables for TINA CMS
TINA_CID: $TINA_CID
TINA_TOKEN: $TINA_TOKEN
services:
@@ -21,6 +23,6 @@ build:
script:
- docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
- docker buildx create --use
- docker buildx build --no-cache --platform linux/arm64,linux/amd64 -t $IMAGE_TAG --push .
- docker buildx build --build-arg TINA_CID=${TINA_CID} --build-arg TINA_TOKEN={$TINA_TOKEN} --no-cache --platform linux/arm64,linux/amd64 -t $IMAGE_TAG --push .
rules:
- if: $CI_PIPELINE_SOURCE == "push" && ($CI_COMMIT_BRANCH == "main" || $CI_COMMIT_BRANCH == "staging") && $BUILD == "1"
Dockerfile
+2 -2
View File
@@ -13,9 +13,9 @@ RUN git clone --recurse-submodules https://gitlab.com/AHMZA/blog.git
# set blog (the folder we just cloned) as the current DIR
WORKDIR blog
# set tina_token
# set tina_cid & tina_token
ARG TINA_TOKEN
RUN echo $TINA_TOKEN
ARG TINA_CID
RUN npm install @tinacms/cli
assets/css/extended/style.css
+2 -1
View File
@@ -1,5 +1,6 @@
:root{
--purple: rgb(145, 70, 255);
--purple: #9146ff;
--green: #B4FF46;
}
h1 {
content/products/Skullstache-Holographic-Sticker-6.md
-9
View File
@@ -1,9 +0,0 @@
---
title: Skullstache Holographic Sticker
code: SkullstacheSticker
image: 'http://localhost:1313/img/SkullstacheHolographicSticker.png'
---
This is a set of 3 stickers you can purchase to personalise any of your surfaces.
The sticker dimensions are: 76mm x 76mm
content/products/Skullstache-Holographic-Sticker.md
+17
View File
@@ -0,0 +1,17 @@
---
layout: products
title: Skullstache Holographic Sticker
code: SkullStacheHolographicSticker
image: '/img/SkullstacheHolographicSticker.png'
shortdesc: Set of 3 Holographic Skullstache stickers
---
Set of 3 Holographic Skullstache stickers to personalise any of your surfaces.
--
Size: 76mm x 76mm
Count: 3
--
layouts/page/products.html
+62
View File
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="{{ site.Language }}" dir="{{ .Language.LanguageDirection | default "auto" }}">
<head>
{{- partial "head.html" . }}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="https://cdn.jsdelivr.net/npm/@commercelayer/drop-in.js@1.0.0/dist/drop-in/drop-in.esm.js"></script>
<link href="/css/minicart.css" rel="stylesheet" />
<link href="/css/drop-in.css" rel="stylesheet" />
<link href="/css/shop.css" rel="stylesheet" />
<link href="/css/product.css" rel="stylesheet"/>
</head>
<body class="
{{- if eq site.Params.defaultTheme `dark` -}}
{{- print " dark" }}
{{- end -}}
" id="top">
{{- partialCached "header.html" . .Page -}}
<main class="main">
{{- block "main" . }}{{ end }}
<!-- Hero Section -->
<section class="hero">
<img src="{{ .Params.image }}" alt="Product Image">
<h1>{{ .Title }}</h1>
<p>Description of the product.</p>
<button>Shop Now</button>
</section>
<!-- Product Details Section -->
<section class="product-details">
<h2>Product Details</h2>
<p>More detailed description of the product and its features.</p>
<ul>
<li>Specification 1: Value</li>
<li>Specification 2: Value</li>
<!-- Add more specifications as needed -->
</ul>
<p>Price: $XX.XX</p>
<button>Add to Cart</button>
</section>
<!-- Image Gallery Section -->
<section class="image-gallery">
<img src="{{ .Params.image }}" alt="Product Image 1">
<img src="{{ .Params.image }}" alt="Product Image 2">
<!-- Add more images as needed -->
</section>
<!-- Related Products Section -->
<section class="related-products">
<h2>Related Products</h2>
<!-- Display related products or accessories here -->
</section>
</main>
{{ partialCached "footer.html" . .Layout .Kind (.Param "hideFooter") (.Param "ShowCodeCopyButtons") -}}
</body>
</html>
layouts/page/shop.html
+5 -81
View File
@@ -6,6 +6,7 @@
<script type="module" src="https://cdn.jsdelivr.net/npm/@commercelayer/drop-in.js@1.0.0/dist/drop-in/drop-in.esm.js"></script>
<link href="/css/minicart.css" rel="stylesheet" />
<link href="/css/drop-in.css" rel="stylesheet" />
<link href="/css/shop.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
@@ -21,9 +22,9 @@
<script>
(function() {
window.commercelayerConfig = {
clientId: 'FhOf27nCAGlzcFebyY1I5I_IERTt_9axJ9QTcID62Ao',
clientId: 'sU2jXv9bJKNyj8Li6bumfgnrGJTrRKHFmkcdtHlmrss',
slug: 'ahmza',
scope: 'market:15644',
scope: 'market:15657',
returnUrl: 'https://commercelayer.io/blog/composable-commerce-with-micro-frontends'
}
}());
@@ -74,10 +75,10 @@
</div>
<div class=prodStock>
<cl-availability code="{{ .Params.code }}">
<cl-availability-status type="available" style="color: green;">
<cl-availability-status type="available">
• in stock
</cl-availability-status>
<cl-availability-status type="unavailable" style="color: red;">
<cl-availability-status type="unavailable">
• out of stock
</cl-availability-status>
</cl-availability>
@@ -91,83 +92,6 @@
{{ end }}
</div>
<style>
.main {
position: relative;
min-height: calc(100vh - var(--header-height) - var(--footer-height));
max-width: calc(1024px + var(--gap) * 2);
margin: auto;
padding var(--gap)
}
.productList {
display: inline-grid;
grid-template-columns: auto auto auto;
grid-auto-rows: 400px;
grid-gap: 30px 10px;
margin-top: 10px;
}
.product {
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: var(--entry);
border: 1px solid var(--border);
border-radius: var(--radius);
text-align: center;
padding: var(--gap);
}
img{
margin-left: auto;
margin-right: auto;
}
.prodImage {
display:block;
width: 100%;
height: auto;
max-height: 100%;
border-radius: var(--radius);
overflow-clip-margin: content-box;
overflow: clip;
padding-bottom: 10px
}
.shop-nav {
list-style-type: none;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
max-width: calc(var(--nav-width) + var(--gap) * 2);
margin-inline-start: auto;
margin-inline-end: auto;
}
.shop-nav li {
padding-right:10px;
font-size: 16px;
}
@media only screen and (min-width: 608px) {
.productList {
grid-template-columns: auto auto auto;
}
}
@media only screen and (min-width: 609px) {
.productList {
grid-template-columns: auto auto auto auto;
}
.shop-nav {
justify-content: flex-end
}
}
@media only screen and (min-width: 992px) {
.productList {
grid-template-columns: auto auto auto auto auto;
}
}
</style>
</main>
{{ partialCached "footer.html" . .Layout .Kind (.Param "hideFooter") (.Param "ShowCodeCopyButtons") -}}
</body>
layouts/products/products.html
+109
View File
@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="{{ site.Language }}" dir="{{ .Language.LanguageDirection | default "auto" }}">
<head>
{{- partial "head.html" . }}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="https://cdn.jsdelivr.net/npm/@commercelayer/drop-in.js@1.0.0/dist/drop-in/drop-in.esm.js"></script>
<link href="/css/minicart.css" rel="stylesheet" />
<link href="/css/drop-in.css" rel="stylesheet" />
<link href="/css/shop.css" rel="stylesheet" />
<link href="/css/product.css" rel="stylesheet"/>
</head>
<body class="
{{- if eq site.Params.defaultTheme `dark` -}}
{{- print " dark" }}
{{- end -}}
" id="top">
{{- partialCached "header.html" . .Page -}}
<main class="main">
<div class=shop-nav-div>
<ul class=shop-nav>
<li>
<cl-identity-status type="guest">
<cl-identity-link type="login" target="_parent">
Login
</cl-identity-link>
</cl-identity-status>
</li>
<li>
<cl-identity-status type="customer">
<cl-identity-link type="login" target="_parent">
Account
</cl-identity-link>
</cl-identity-status>
</li>
<li>
<cl-cart-link>
cart
<cl-cart-count hide-when-empty="true"></cl-cart-count>
<cl-cart></cl-cart>
</cl-cart-link>
</li>
</ul>
</div>
<script>
(function() {
window.commercelayerConfig = {
clientId: 'sU2jXv9bJKNyj8Li6bumfgnrGJTrRKHFmkcdtHlmrss',
slug: 'ahmza',
scope: 'market:15657',
returnUrl: 'https://commercelayer.io/blog/composable-commerce-with-micro-frontends'
}
}());
</script>
<!-- Hero Section -->
<section class="hero">
<img src="{{ .Params.image }}" alt="Product Image">
<h1>{{ .Title }}</h1>
<p>{{ .Params.shortdesc }}</p>
</section>
<!-- Product Details Section -->
<section class="product-details">
{{ .Content }}
<div class=prodPrice>
<cl-price code="{{ .Params.code }}">
<cl-price-amount type="compare-at">.</cl-price-amount>
<cl-price-amount type="price">.</cl-price-amount>
</cl-price>
</div>
<div class=prodStock>
<cl-availability code="{{ .Params.code }}">
<cl-availability-status type="available">
• in stock
</cl-availability-status>
<cl-availability-status type="unavailable">
• out of stock
</cl-availability-status>
</cl-availability>
</div>
<div class=prodAddToCart>
<cl-add-to-cart code="{{ .Params.code }}">
Add to cart
</cl-add-to-cart>
</div>
</section>
<!-- Related Products Section -->
<section class="related-products">
<h2>Related Products</h2>
<!-- Display related products or accessories here -->
</section>
<!-- Footer Section -->
<footer class="shopping-links">
<a href="/contact">contact</a>
<a href="/shipping">shipping policy</a>
<a href="/returns">returns policy</a>
</footer>
</main>
{{ partialCached "footer.html" . .Layout .Kind (.Param "hideFooter") (.Param "ShowCodeCopyButtons") -}}
</body>
</html>
static/css/product.css
+38
View File
@@ -0,0 +1,38 @@
.hero {
text-align: center;
padding: 50px;
}
.hero img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
.product-details {
background-color: #333;
padding: 20px;
margin-top: 20px;
}
.prodStock {
padding: 20px 0 20px 0;
}
.related-products {
background-color: #333;
padding: 20px;
margin-top: 20px;
}
.shopping-links {
text-align: center;
}
.shopping-links a {
color: var(--secondary);
text-decoration: underline;
display: inline-block;
padding: 20px;
font-size: 14px;
}
static/css/shop.css
+76
View File
@@ -0,0 +1,76 @@
.main {
position: relative;
min-height: calc(100vh - var(--header-height) - var(--footer-height));
max-width: calc(1024px + var(--gap) * 2);
margin: auto;
padding var(--gap)
}
.productList {
display: inline-grid;
grid-template-columns: auto auto auto;
grid-auto-rows: 400px;
grid-gap: 30px 10px;
margin-top: 10px;
}
.product {
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: var(--entry);
border: 1px solid var(--border);
border-radius: var(--radius);
text-align: center;
padding: var(--gap);
}
img{
margin-left: auto;
margin-right: auto;
}
.prodImage {
display:block;
width: 100%;
height: auto;
max-height: 100%;
border-radius: var(--radius);
overflow-clip-margin: content-box;
overflow: clip;
padding-bottom: 10px
}
.prodStock {
color: var(--green);
}
.shop-nav {
list-style-type: none;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
max-width: calc(var(--nav-width) + var(--gap) * 2);
margin-inline-start: auto;
margin-inline-end: auto;
}
.shop-nav li {
padding-right:10px;
font-size: 16px;
}
@media only screen and (min-width: 608px) {
.productList {
grid-template-columns: auto auto auto;
}
}
@media only screen and (min-width: 609px) {
.productList {
grid-template-columns: auto auto auto auto;
}
.shop-nav {
justify-content: flex-end
}
}
@media only screen and (min-width: 992px) {
.productList {
grid-template-columns: auto auto auto auto auto;
}
}
tina/__generated__/_schema.json
Generated
+1 -1
View File
@@ -1 +1 @@
{"version":{"fullVersion":"1.4.27","major":"1","minor":"4","patch":"27"},"meta":{"flags":["experimentalData"]},"collections":[{"name":"post","label":"Posts","path":"content/posts","fields":[{"type":"string","name":"title","label":"Title","isTitle":true,"required":true,"namespace":["post","title"],"searchable":true},{"type":"rich-text","name":"body","label":"Body","isBody":true,"namespace":["post","body"],"searchable":true,"parser":{"type":"markdown"}}],"namespace":["post"]},{"name":"products","label":"Products","path":"content/products","fields":[{"type":"string","name":"title","label":"Product Name","isTitle":true,"required":true,"namespace":["products","title"],"searchable":true},{"type":"string","name":"code","label":"Code","required":true,"namespace":["products","code"],"searchable":true},{"type":"string","name":"image","label":"Image","required":false,"namespace":["products","image"],"searchable":true},{"type":"rich-text","name":"description","label":"Description","isBody":true,"namespace":["products","description"],"searchable":true,"parser":{"type":"markdown"}}],"namespace":["products"]}],"config":{"media":{"tina":{"publicFolder":"static","mediaRoot":""}},"search":{"tina":{"indexerToken":"3ad8991708087bb81af5aa2bd79586afd6d847fb","stopwordLanguages":["eng"]},"indexBatchSize":100,"maxSearchIndexFieldLength":100}}}
{"version":{"fullVersion":"1.4.27","major":"1","minor":"4","patch":"27"},"meta":{"flags":["experimentalData"]},"collections":[{"name":"post","label":"Posts","path":"content/posts","fields":[{"type":"string","name":"title","label":"Title","isTitle":true,"required":true,"namespace":["post","title"],"searchable":true},{"type":"rich-text","name":"body","label":"Body","isBody":true,"namespace":["post","body"],"searchable":true,"parser":{"type":"markdown"}}],"namespace":["post"]},{"name":"products","label":"Products","path":"content/products","fields":[{"type":"string","name":"title","label":"Product Name","isTitle":true,"required":true,"namespace":["products","title"],"searchable":true},{"type":"string","name":"code","label":"Code","required":true,"namespace":["products","code"],"searchable":true},{"type":"string","name":"image","label":"Image URL","required":false,"namespace":["products","image"],"searchable":true},{"type":"rich-text","name":"description","label":"Description","isBody":true,"namespace":["products","description"],"searchable":true,"parser":{"type":"markdown"}}],"namespace":["products"]}],"config":{"media":{"tina":{"publicFolder":"static","mediaRoot":""}},"search":{"tina":{"indexerToken":"3ad8991708087bb81af5aa2bd79586afd6d847fb","stopwordLanguages":["eng"]},"indexBatchSize":100,"maxSearchIndexFieldLength":100}}}
tina/__generated__/config.prebuild.jsx
Generated
+1 -1
View File
@@ -60,7 +60,7 @@ var config_default = defineConfig({
{
type: "string",
name: "image",
label: "Image",
label: "Image URL",
required: false
},
{
tina/config.ts
+3 -3
View File
@@ -5,8 +5,8 @@ const branch = process.env.HEAD || process.env.VERCEL_GIT_COMMIT_REF || "main";
export default defineConfig({
branch,
clientId: "f68869c9-46b7-4f70-bf52-46783f537a63", // Get this from tina.io
token: "e1040fd77966916ca7aa0b2480f9c6bbf865fe7d", // Get this from tina.io
clientId: "TINA_CID", // Get this from tina.io
token: "TINA_TOKEN", // Get this from tina.io
build: {
outputFolder: "admin",
@@ -61,7 +61,7 @@ export default defineConfig({
{
type: "string",
name: "image",
label: "Image",
label: "Image URL",
required: false,
},
{
tina/tina-lock.json
+1 -1
View File
File diff suppressed because one or more lines are too long