Skip to content

Commit 61d2eca

Browse files
davidmoltindavidmoltin
authored
Update gtag (#278)
* Update google tag manager, add pwa * Enable * Add new card display grid * Add video support * Add video support * Add video support * Update rollover * Update rollover * Update rollover
1 parent 682db06 commit 61d2eca

File tree

13 files changed

+117
-88
lines changed

13 files changed

+117
-88
lines changed

‎docs/learn.mdx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
title: Elastic Path Learning Center
3+
nav_label: Welcome
4+
sidebar_position: 100
5+
hide_table_of_contents: true
6+
---
7+
8+
import CardDisplay from "../src/components/CardDisplay";
9+
10+
<grid class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
11+
<CardDisplay
12+
mediaSrc="https://play.vidyard.com/4fYiP1QhLqAao3QQRyDeyN"
13+
mediaType="embed"
14+
title="Create a product"
15+
description="This is a description for the card."
16+
link="https://example.com"
17+
/>
18+
<CardDisplay
19+
mediaSrc="https://www.youtube.com/watch?v=wxG3b6EB1f4"
20+
mediaType="embed"
21+
title="Assign product to a hierarcy & node"
22+
description="This is a description for the card."
23+
link="https://example.com"
24+
/>
25+
<CardDisplay
26+
mediaSrc="https://www.youtube.com/watch?v=r-DTbBqTaLA"
27+
mediaType="embed"
28+
title="Create a catalog"
29+
description="This is a description for the card."
30+
link="https://example.com"
31+
/>
32+
<CardDisplay
33+
mediaSrc="/assets/demo/samsung-memory-AITXm0Tp_Po-unsplash.jpg"
34+
mediaType="image"
35+
title="Create a catalog"
36+
description="This is a description for the card."
37+
link="https://example.com"
38+
/>
39+
<CardDisplay
40+
mediaSrc="/assets/demo/agence-olloweb-qfp4-Ud6Fyg-unsplash.jpg"
41+
mediaType="image"
42+
title="Create a product"
43+
description="This is a description for the card."
44+
link="https://example.com"
45+
/>
46+
<CardDisplay
47+
mediaSrc="/assets/demo/ilya-pavlov-OqtafYT5kTw-unsplash.jpg"
48+
mediaType="image"
49+
title="Assign product to a hierarcy & node"
50+
description="This is a description for the card."
51+
link="https://example.com"
52+
/>
53+
</grid>

‎docusaurus.config.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,10 @@ const config = {
176176
},
177177
gtag: {
178178
trackingID: 'G-NZ3NL8DLLD',
179-
anonymizeIP: true,
179+
anonymizeIP: false,
180+
},
181+
googleTagManager: {
182+
containerId: 'G-NZ3NL8DLLD',
180183
},
181184
googleTagManager: {
182185
containerId: 'G-NZ3NL8DLLD',

‎src/components/CardDisplay/index.jsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import EmbedVideo from '../EmbedVideo'; // Import the new EmbedVideo component
3+
4+
const CardDisplay = ({ mediaSrc, mediaType, title, description, link }) => {
5+
return (
6+
<a
7+
href={link}
8+
className="block rounded-3xl overflow-hidden hover:bg-gray-100 hover:shadow-md shadow-lg transition-shadow duration-200 no-underline hover:no-underline dark:bg-gray-900"
9+
>
10+
<div className="aspect-video">
11+
{mediaType === 'video' ? (
12+
<video className="w-full h-full object-cover" controls>
13+
<source src={mediaSrc} type="video/mp4" />
14+
Your browser does not support the video tag.
15+
</video>
16+
) : mediaType === 'embed' ? (
17+
<EmbedVideo videoUrl={mediaSrc} /> // Use EmbedVideo for YouTube/Vidyard URLs
18+
) : (
19+
<img className="w-full h-full object-cover" src={mediaSrc} alt={title} />
20+
)}
21+
</div>
22+
<div className="px-6 py-4">
23+
<div className="font-bold text-xl mb-2">{title}</div>
24+
<p className="text-gray-700 text-base">{description}</p>
25+
</div>
26+
</a>
27+
);
28+
};
29+
30+
export default CardDisplay;

‎src/components/EmbedVideo/index.jsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
3+
const EmbedVideo = ({ videoUrl }) => {
4+
let embedUrl = '';
5+
6+
// Check if it's a YouTube or Vidyard URL and convert it to an embeddable format
7+
if (videoUrl.includes('youtube.com') || videoUrl.includes('youtu.be')) {
8+
const videoId = videoUrl.split('v=')[1]?.split('&')[0] || videoUrl.split('/').pop();
9+
embedUrl = `https://www.youtube.com/embed/${videoId}`;
10+
} else if (videoUrl.includes('vidyard.com')) {
11+
const videoId = videoUrl.split('/')[videoUrl.split('/').length - 1];
12+
embedUrl = `https://play.vidyard.com/${videoId}.html`;
13+
}
14+
15+
return (
16+
<iframe
17+
className="w-full h-full object-cover"
18+
src={embedUrl}
19+
title="Embedded video"
20+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
21+
allowFullScreen
22+
/>
23+
);
24+
};
25+
26+
export default EmbedVideo;

‎src/components/homepage/CommerceApps/CommerceAppsMobile.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,12 +110,12 @@ export default function CommerceAppsMobile() {
110110
<section className="px-6 py-6 mx-auto w-full text-center leading-tight tracking-tight">
111111
<div className="flex flex-col items-center justify-between dark:text-white">
112112
<h2 className="mb-8 text-5xl md:text-[4rem] font-semibold tracking-tight dark:drop-shadow-md">
113-
Apps for commerce
113+
Elastic Path Composable Commerce
114114
</h2>
115115
<div className="flex flex-col my-6 w-full">
116116
<Tab
117117
img="/assets/homepage/products-screenshot.jpg"
118-
value="Products"
118+
value="Merchandise"
119119
icon={<ProductsIcon className="size-12" />}
120120
tagline="Efficiently manage product catalogs and info across channels with our Product Information Management (PIM) app."
121121
listItems={[

‎src/components/homepage/ui/AbstractBG.tsx‎

Lines changed: 1 addition & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,9 @@
11
import React from "react";
22

3-
const SVGs = () => (
4-
<div className="z-0 fixed w-[100vw] h-[100vh] blur-[10rem] opacity-95">
5-
{/*left orange blob*/}
6-
<svg
7-
xmlns="http://www.w3.org/2000/svg"
8-
width="922"
9-
height="1108"
10-
fill="none"
11-
viewBox="0 0 922 1108"
12-
className="absolute z-10 animate-[pulse_20s_ease_infinite] opacity-60 w-full -left-1/2 scale-85"
13-
>
14-
<path
15-
fill="#E7B1C8"
16-
d="m701.902 1088.46 216.121-439.568c3.703-7.532 4.469-16.034 2.141-23.754L738.104 21.491C733.722 6.961 719.445-1.736 704.146.804L179.315 87.936c-12.706 2.109-23.387 11.567-27.149 24.04L2.129 609.394a32.735 32.735 0 0 0-1.312 12.083l20.322 251.437c2.184 27.029 35.038 37.246 54.313 16.89l253.822-268.06c15.04-15.884 40.193-13.78 50.44 4.218l265.784 466.858c12.382 21.75 44.8 19.24 56.404-4.36Z"
17-
/>
18-
</svg>
19-
{/*Blue blob*/}
20-
<svg
21-
xmlns="http://www.w3.org/2000/svg"
22-
width="1191"
23-
height="2709"
24-
fill="none"
25-
viewBox="0 0 1191 2709"
26-
className="absolute z-10 animate-[spin_50s_reverse_linear_infinite] opacity-60 w-full left-1/3"
27-
>
28-
<g fill="#0085FF" opacity=".8">
29-
<path d="M-145.955 205.654C-80.129 1.122 553.258-80.515 650.966 103.278c3.841 7.226 3.433 16.044.067 23.929L331.264 876.324c-10.355 24.259-42.913 28.464-56.409 7.286l-417.438-655.067c-4.266-6.694-5.916-14.984-3.372-22.889ZM1146.26 789.52l44.41 1071.24c.88 21.26-18.87 38.64-39.52 34.78l-424.097-79.28c-14.801-2.77-24.962-15.8-24.26-31.12l42.1-918.194c.698-15.224 11.939-28.495 26.904-31.765l337.583-73.751c18.85-4.119 36.09 9.01 36.88 28.09ZM555.441 1978.13 282.42 2686.76c-11.587 30.08-54.094 29.2-60.861-1.25l-119.461-537.57c-1.971-8.87.007-18.39 5.428-26.14l373.522-533.66c17.742-25.35 56.06-16.17 57.628 13.8l18.959 362.6c.239 4.58-.509 9.21-2.194 13.59Z" />
30-
</g>
31-
</svg>
32-
{/*Purple geometrics*/}
33-
<svg
34-
xmlns="http://www.w3.org/2000/svg"
35-
width="1561"
36-
height="1620"
37-
fill="none"
38-
viewBox="0 0 1561 1620"
39-
className="absolute z-10 animate-[spin_60s_linear_infinite] opacity-60 w-full"
40-
>
41-
<path
42-
fill="#9800A7"
43-
d="M.22 1359.34 42.692 33.953C43.765.467 88.771-11.828 103.321 17.39l379.317 761.704c5.33 10.702 3.924 23.89-3.62 33.972L57.228 1376.75c-19.05 25.46-58 13.56-57.008-17.41ZM1445.32 824.587l235.62-364.146c16.98-26.249 56.19-18.044 58.3 12.203l43.05 615.426c.36 5.04-.49 10.16-2.48 14.94l-205.3 495.19c-6.38 15.39-22.98 24.17-38.55 20.41l-173-41.77c-11.5-2.77-20.09-11.91-22.23-23.63l-131.8-722.664c-4.37-23.972 19.03-45.274 42.15-38.373l157.05 46.873c13.73 4.098 29.03-1.853 37.19-14.459ZM449.764 1065.12l342.077 6.87c16.936.34 31.959-12.75 34.18-29.77l90.434-693.265c4.435-33.998-39.711-47.833-58.333-18.281l-432.51 686.386c-13.32 21.14-.036 47.57 24.152 48.06Z"
44-
/>
45-
</svg>
46-
{/*Orange blob*/}
47-
<svg
48-
xmlns="http://www.w3.org/2000/svg"
49-
width="572"
50-
height="605"
51-
fill="none"
52-
viewBox="0 0 572 605"
53-
className="absolute z-10 animate-[bounce_10s_ease_infinite] opacity-60 w-full top-1/4"
54-
>
55-
<path
56-
fill="#E7ADAD"
57-
d="M381.157 32.332c19.849-6.124 128.173 220.01 187.527 350.513 5.32 11.698 2.684 25.828-6.541 35.722L425.561 565.054c-5.913 6.342-13.933 10.23-22.334 10.823L-.809 604.374c-14.716 1.038-96.98-146.043-143.684-233.454-5.435-10.173-4.595-22.869 2.126-32.992L71.567 15.751C78.93 4.664 91.914-1.264 104.545.689c95.448 14.76 257.237 37.62 276.612 31.643Z"
58-
opacity=".8"
59-
/>
60-
</svg>
61-
</div>
62-
);
63-
643
export default function () {
654
return (
665
<div className="z-0 absolute w-[100vw] h-full">
67-
<div className="w-full h-1/2 dark:bg-[url('/assets/homepage/abstract-bg.webp')] bg-center bg-no-repeat bg-cover blur-lg opacity-95"></div>
68-
<div className="w-full h-1/2 dark:bg-[url('/assets/homepage/abstract-bg-2.webp')] bg-center bg-no-repeat bg-cover blur-lg opacity-95"></div>
69-
70-
{/*<SVGs />*/}
6+
<div className="w-full h-full dark:bg-[url('/assets/homepage/blenddark2.webp')] bg-center bg-no-repeat bg-cover"></div>
717
</div>
728
);
739
}

‎src/css/custom.css‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1386,26 +1386,7 @@ html[data-theme="dark"] .header-github-link:before {
13861386

13871387
@layer utilities {
13881388
.bg-homepage-gradient {
1389-
position: relative;
1390-
background: linear-gradient(
1391-
to right,
1392-
hsl(0, 0%, 0%) 0%,
1393-
hsla(240, 100%, 0.2%, 0.999) 10.4%,
1394-
hsla(240, 100%, 0.39%, 0.998) 20.3%,
1395-
hsla(240, 66.67%, 1.18%, 0.994) 29.8%,
1396-
hsla(240, 66.67%, 2.35%, 0.989) 38.8%,
1397-
hsla(240, 70%, 3.92%, 0.982) 47.3%,
1398-
hsla(240, 66.67%, 5.88%, 0.972) 55.2%,
1399-
hsla(240, 67.44%, 8.43%, 0.961) 62.6%,
1400-
hsla(240, 66.1%, 11.57%, 0.946) 69.5%,
1401-
hsla(240, 66.67%, 15.29%, 0.929) 75.7%,
1402-
hsla(240, 66.34%, 19.8%, 0.908) 81.4%,
1403-
hsla(240, 65.63%, 25.1%, 0.884) 86.4%,
1404-
hsla(240, 65.82%, 30.98%, 0.857) 90.8%,
1405-
hsla(240, 65.8%, 37.84%, 0.825) 94.6%,
1406-
hsla(240, 66.23%, 45.29%, 0.79) 97.6%,
1407-
hsla(240, 65.96%, 53.92%, 0.75) 100%
1408-
);
1389+
@apply dark:bg-[url('/assets/homepage/blenddark2.webp')] bg-top
14091390
}
14101391

14111392
.fill-box {

‎static/assets/demo/agence-olloweb-qfp4-Ud6Fyg-unsplash.jpg‎

1.02 MB
Loading

‎static/assets/demo/ilya-pavlov-OqtafYT5kTw-unsplash.jpg‎

1.83 MB
Loading

‎static/assets/demo/samsung-memory-AITXm0Tp_Po-unsplash.jpg‎

3.96 MB
Loading

0 commit comments

Comments
 (0)