Skip to content

Commit 9002e2b

Browse files
isaquebockisaquebock
authored
Merge pull request #1786 from lfsigreja/dx-241
[DX-241] Template landing pages component
2 parents fd7cd62 + e19c34d commit 9002e2b

File tree

97 files changed

+2106
-2285
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

97 files changed

+2106
-2285
lines changed

‎src/components/SectionBasicContent/SectionBasicContent.vue‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<template>
2+
<ContentSection
3+
:overline="overline"
4+
:titleTag="titleTag"
5+
:title="title"
6+
:description="description"
7+
:descriptionRawHtml="descriptionRawHtml"
8+
:id="id"
9+
:margin="margin"
10+
:hasContainer="false"
11+
>
12+
<template #actions>
13+
<template
14+
v-for="(button, index) in buttons"
15+
:key="index"
16+
>
17+
<LinkButton
18+
v-if="button.link"
19+
v-bind="button"
20+
/>
21+
</template>
22+
</template>
23+
<template #main>
24+
<div class="2xl:w-1/2"></div>
25+
</template>
26+
</ContentSection>
27+
<div
28+
v-if="$slots.content"
29+
class="min-w-full flex xl:flex-row flex-col gap-4"
30+
>
31+
<slot name="content" />
32+
</div>
33+
</template>
34+
35+
<script setup>
36+
import ContentSection from 'azion-webkit/contentsection'
37+
import LinkButton from 'azion-webkit/linkbutton'
38+
39+
defineProps({
40+
id: {
41+
type: String,
42+
default: () => ''
43+
},
44+
isContentCentralized: {
45+
type: Boolean,
46+
default: () => true
47+
},
48+
overline: {
49+
type: String,
50+
default: () => ''
51+
},
52+
titleTag: {
53+
type: String,
54+
default: () => 'h2',
55+
validator: (value) => ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(value)
56+
},
57+
title: {
58+
type: String,
59+
rquired: true
60+
},
61+
description: {
62+
type: String,
63+
default: () => ''
64+
},
65+
descriptionRawHtml: {
66+
type: String,
67+
default: () => ''
68+
},
69+
buttons: {
70+
type: Array,
71+
default: () => []
72+
},
73+
margin: {
74+
type: String,
75+
options: ['none', 'small', 'default', 'large'],
76+
default: () => 'none'
77+
}
78+
})
79+
</script>
80+
81+
<style scoped>
82+
/* Target prose paragraphs within this component */
83+
:deep(.prose-lg p) {
84+
margin-bottom: 0 !important;
85+
margin-top: 0 !important;
86+
}
87+
88+
/* Alternative approach - target all paragraphs within the component */
89+
:deep(p) {
90+
margin-bottom: 0 !important;
91+
margin-top: 0 !important;
92+
}
93+
94+
@media screen and (max-width: 640px) {
95+
:deep(th), :deep(td) {
96+
width: 100%;
97+
}
98+
}
99+
</style>

‎src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/angular/angular-boilerplate.mdx‎

Lines changed: 22 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: "   Angular Boilerplate"
2+
title: "Angular Boilerplate"
33
description: >-
44
Jumpstart your web development with the Angular Boilerplate—a foundation for deploying Angular applications, a robust framework for building dynamic and responsive user interfaces.
55
permalink: /documentation/products/templates/angular-boilerplate/
@@ -11,31 +11,28 @@ menu_namespace: runtimeMenu
1111
---
1212

1313
import LinkButton from 'azion-webkit/linkbutton';
14-
import SectionBasicContent from 'azion-webkit/sectionbasiccontent';
14+
import SectionBasicContent from '~/components/SectionBasicContent/SectionBasicContent.vue';
1515
import Container from 'azion-webkit/container';
1616

17-
<div class="[&_.flex.flex-col]:!gap-4 [&_.flex.flex-col]:md:!gap-8 [&_.flex.flex-col]:2xl:!gap-16">
18-
<SectionBasicContent
19-
titleTag="h2"
20-
description="Jumpstart your web development with the Angular Boilerplate—a foundation for deploying Angular applications, a robust framework for building dynamic and responsive user interfaces."
21-
buttons={[
22-
{ label: "Deploy template", link: "https://console.azion.com/create/angular/angular-boilerplate", outlined: false, icon: "ai ai-azion", iconPos: "left" },
23-
{ label: "View demo", link: "https://dh3vpyts1n.map.azionedge.net", severity: "secondary", target:"_blank" }
24-
]}
25-
/>
26-
</div>
27-
28-
<div style="display: flex; gap: 1rem; align-items: center; flex-direction: row; flex-wrap: wrap;">
29-
<div style="flex: 1; min-width: 300px;">
30-
| Item | Details |
31-
|:----------|:------|
32-
| Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/angular/angular-boilerplate) |
33-
| Framework | [Angular](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/angular/) |
34-
| Use Case | General |
35-
</div>
36-
<div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
37-
<img src="/assets/docs/images/uploads/template-showcase/angular/angular-boilerplate.png" width="400" alt="Angular Boilerplate" style="max-width: 100%; height: auto;" />
38-
</div>
39-
</div>
17+
<SectionBasicContent
18+
description="Jumpstart your web development with the Angular Boilerplate—a foundation for deploying Angular applications, a robust framework for building dynamic and responsive user interfaces."
19+
buttons={[
20+
{ label: "Deploy template", link: "https://console.azion.com/create/angular/angular-boilerplate", outlined: false, icon: "ai ai-azion", iconPos: "left" },
21+
{ label: "View demo", link: "https://dh3vpyts1n.map.azionedge.net", severity: "secondary" }
22+
]}
23+
>
24+
<Fragment slot="content">
25+
<div style="flex: 1; min-width: 300px;">
26+
| Item | Details |
27+
|:----------|:------|
28+
| Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/angular/angular-boilerplate) |
29+
| Framework | [Angular](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/angular/) |
30+
| Use Case | General |
31+
</div>
32+
<div style="display: flex; justify-content: center; align-items: center; flex: 1;">
33+
<img src="/assets/docs/images/uploads/template-showcase/angular/angular-boilerplate.png" width="400" alt="Angular Boilerplate" style="min-width: 100%; max-width: 100%; height: auto;" />
34+
</div>
35+
</Fragment>
36+
</SectionBasicContent>
4037

4138
For more information about deploying this template visit the [template guide](/en/documentation/products/guides/angular-boilerplate/).

‎src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/angular/angular-butter.mdx‎

Lines changed: 22 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: " ButterCMS + Angular Starter Project"
2+
title: "ButterCMS + Angular Starter Project"
33
description: >-
44
The ButterCMS + Angular Starter Project template creates a fully-functional Angular starter project, completely integrated with ButterCMS, a leading headless CMS that makes collaborative content management of your application easier.
55
permalink: /documentation/products/templates/angular-buttercms/
@@ -11,31 +11,28 @@ menu_namespace: runtimeMenu
1111
---
1212

1313
import LinkButton from 'azion-webkit/linkbutton';
14-
import SectionBasicContent from 'azion-webkit/sectionbasiccontent';
14+
import SectionBasicContent from '~/components/SectionBasicContent/SectionBasicContent.vue';
1515
import Container from 'azion-webkit/container';
1616

17-
<div class="[&_.flex.flex-col]:!gap-4 [&_.flex.flex-col]:md:!gap-8 [&_.flex.flex-col]:2xl:!gap-16">
18-
<SectionBasicContent
19-
titleTag="h2"
20-
description="The ButterCMS + Angular Starter Project template creates a fully-functional Angular starter project, completely integrated with ButterCMS, a leading headless CMS that makes collaborative content management of your application easier."
21-
buttons={[
22-
{ label: "Deploy template", link: "https://console.azion.com/create/buttercms/buttercms-angular-starter", outlined: false, icon: "ai ai-azion", iconPos: "left" },
23-
{ label: "View demo", link: "https://ehvvreuhul.map.azionedge.net", severity: "secondary", target:"_blank" }
24-
]}
25-
/>
26-
</div>
27-
28-
<div style="display: flex; gap: 1rem; align-items: center; flex-direction: row; flex-wrap: wrap;">
29-
<div style="flex: 1; min-width: 300px;">
30-
| Item | Details |
31-
|:----------|:------|
32-
| Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/angular/angular-starter-buttercms) |
33-
| Framework | [Angular](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/angular/) |
34-
| Use Case | General |
35-
</div>
36-
<div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
37-
<img src="/assets/docs/images/uploads/template-showcase/angular/angular-buttercms.png" width="400" alt="Angular + ButterCMS" style="max-width: 100%; height: auto;" />
38-
</div>
39-
</div>
17+
<SectionBasicContent
18+
description="The ButterCMS + Angular Starter Project template creates a fully-functional Angular starter project, completely integrated with ButterCMS, a leading headless CMS that makes collaborative content management of your application easier."
19+
buttons={[
20+
{ label: "Deploy template", link: "https://console.azion.com/create/buttercms/buttercms-angular-starter", outlined: false, icon: "ai ai-azion", iconPos: "left" },
21+
{ label: "View demo", link: "https://ehvvreuhul.map.azionedge.net", severity: "secondary" }
22+
]}
23+
>
24+
<Fragment slot="content">
25+
<div style="flex: 1; min-width: 300px;">
26+
| Item | Details |
27+
|:----------|:------|
28+
| Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/angular/angular-starter-buttercms) |
29+
| Framework | [Angular](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/angular/) |
30+
| Use Case | General |
31+
</div>
32+
<div style="display: flex; justify-content: center; align-items: center; flex: 1;">
33+
<img src="/assets/docs/images/uploads/template-showcase/angular/angular-buttercms.png" width="400" alt="Angular + ButterCMS" style="min-width: 100%; max-width: 100%; height: auto;" />
34+
</div>
35+
</Fragment>
36+
</SectionBasicContent>
4037

4138
For more information about deploying this template visit the [template guide](/en/documentation/products/guides/butter-templates-collection/).

‎src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/angular/angular-sanity.mdx‎

Lines changed: 22 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: " Clean Angular + Sanity app"
2+
title: "Clean Angular + Sanity app"
33
description: >-
44
The Clean Angular + Sanity application template creates an Angular application with a Sanity Studio, which is an open-source React application that connects to your Sanity project's hosted dataset. The Studio is configured locally and can then be deployed for content collaboration.
55
permalink: /documentation/products/templates/angular-sanity/
@@ -11,31 +11,28 @@ menu_namespace: runtimeMenu
1111
---
1212

1313
import LinkButton from 'azion-webkit/linkbutton';
14-
import SectionBasicContent from 'azion-webkit/sectionbasiccontent';
14+
import SectionBasicContent from '~/components/SectionBasicContent/SectionBasicContent.vue';
1515
import Container from 'azion-webkit/container';
1616

17-
<div class="[&_.flex.flex-col]:!gap-4 [&_.flex.flex-col]:md:!gap-8 [&_.flex.flex-col]:2xl:!gap-16">
18-
<SectionBasicContent
19-
titleTag="h2"
20-
description="The Clean Angular + Sanity application template creates an Angular application with a Sanity Studio, which is an open-source React application that connects to your Sanity project's hosted dataset. The Studio is configured locally and can then be deployed for content collaboration."
21-
buttons={[
22-
{ label: "Deploy template", link: "https://console.azion.com/create/sanity/clean-angular-sanity-app", outlined: false, icon: "ai ai-azion", iconPos: "left" },
23-
{ label: "View demo", link: "https://juh58ft4eg.map.azionedge.net/", severity: "secondary", target:"_blank" }
24-
]}
25-
/>
26-
</div>
27-
28-
<div style="display: flex; gap: 1rem; align-items: center; flex-direction: row; flex-wrap: wrap;">
29-
<div style="flex: 1; min-width: 300px;">
30-
| Item | Details |
31-
|:----------|:------|
32-
| Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/angular/sanity-angular-clean) |
33-
| Framework | [Angular](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/angular/) |
34-
| Use Case | General |
35-
</div>
36-
<div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
37-
<img src="/assets/docs/images/uploads/template-showcase/angular/angular-sanity.png" width="400" alt="Angular + Sanity" style="max-width: 100%; height: auto;" />
38-
</div>
39-
</div>
17+
<SectionBasicContent
18+
description="The Clean Angular + Sanity application template creates an Angular application with a Sanity Studio, which is an open-source React application that connects to your Sanity project's hosted dataset. The Studio is configured locally and can then be deployed for content collaboration."
19+
buttons={[
20+
{ label: "Deploy template", link: "https://console.azion.com/create/sanity/clean-angular-sanity-app", outlined: false, icon: "ai ai-azion", iconPos: "left" },
21+
{ label: "View demo", link: "https://juh58ft4eg.map.azionedge.net/", severity: "secondary" }
22+
]}
23+
>
24+
<Fragment slot="content">
25+
<div style="flex: 1; min-width: 300px;">
26+
| Item | Details |
27+
|:----------|:------|
28+
| Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/angular/sanity-angular-clean) |
29+
| Framework | [Angular](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/angular/) |
30+
| Use Case | General |
31+
</div>
32+
<div style="display: flex; justify-content: center; align-items: center; flex: 1;">
33+
<img src="/assets/docs/images/uploads/template-showcase/angular/angular-sanity.png" width="400" alt="Angular + Sanity" style="min-width: 100%; max-width: 100%; height: auto;" />
34+
</div>
35+
</Fragment>
36+
</SectionBasicContent>
4037

4138
For more information about deploying this template visit the [template guide](/en/documentation/products/guides/clean-angular-sanity/).

‎src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-alpine.mdx‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: "   Astro with Alpine Framework"
2+
title: "Astro with Alpine Framework"
33
description: >-
44
The Astro with Alpine Framework template deploys a new edge application based on Astro working with Alpine.js.
55
permalink: /documentation/products/templates/astro-alpine/
@@ -12,28 +12,27 @@ menu_namespace: runtimeMenu
1212

1313
import LinkButton from 'azion-webkit/linkbutton';
1414
import Container from 'azion-webkit/container';
15-
import SectionBasicContent from 'azion-webkit/sectionbasiccontent';
15+
import SectionBasicContent from '~/components/SectionBasicContent/SectionBasicContent.vue';
1616

1717
<SectionBasicContent
18-
titleTag="h2"
1918
description="The Astro with Alpine.js Framework template deploys a new edge application based on Astro working with Alpine.js, a tool for composing behavior directly in your markup."
2019
buttons={[
2120
{ label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-alpine", outlined: false, icon: "ai ai-azion", iconPos: "left" },
2221
{ label: "View demo", link: "https://ig34efhis5.map.azionedge.net/", severity: "secondary", target:"_blank" }
2322
]}
24-
/>
25-
26-
<div style="display: flex; gap: 1rem; align-items: center; flex-direction: row; flex-wrap: wrap;">
27-
<div style="flex: 1; min-width: 300px;">
28-
| Item | Details |
29-
|:----------|:------|
30-
| Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-framework-alpine) |
31-
| Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
32-
| Use Case | General |
33-
</div>
34-
<div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
35-
<img src="/assets/docs/images/uploads/template-showcase/astro/astro-alpine.png" width="400" alt="Astro With Alpine" style="max-width: 100%; height: auto;" />
36-
</div>
37-
</div>
23+
>
24+
<Fragment slot="content">
25+
<div style="flex: 1; min-width: 300px;">
26+
| Item | Details |
27+
|:----------|:------|
28+
| Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-framework-alpine) |
29+
| Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
30+
| Use Case | General |
31+
</div>
32+
<div style="display: flex; justify-content: center; align-items: center; flex: 1;">
33+
<img src="/assets/docs/images/uploads/template-showcase/astro/astro-alpine.png" width="400" alt="Astro With Alpine" style="min-width: 100%; max-width: 100%; height: auto;" />
34+
</div>
35+
</Fragment>
36+
</SectionBasicContent>
3837

3938
For more information about deploying this template visit the [template guide](/en/documentation/products/guides/astro-ecommerce-collection/).

‎src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-audiophile.mdx‎

Lines changed: 22 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: "   Astro Audiophile"
2+
title: "Astro Audiophile"
33
description: >-
44
Explore our Astro Audiophile template, a quick option for deploying an e-commerce website.
55
permalink: /documentation/products/templates/astro-audiophile/
@@ -11,31 +11,28 @@ menu_namespace: runtimeMenu
1111
---
1212

1313
import LinkButton from 'azion-webkit/linkbutton';
14-
import SectionBasicContent from 'azion-webkit/sectionbasiccontent';
14+
import SectionBasicContent from '~/components/SectionBasicContent/SectionBasicContent.vue';
1515
import Container from 'azion-webkit/container';
1616

17-
<div class="[&_.flex.flex-col]:!gap-4 [&_.flex.flex-col]:md:!gap-8 [&_.flex.flex-col]:2xl:!gap-16">
18-
<SectionBasicContent
19-
titleTag="h2"
20-
description="The Astro Audiophile template provides a quick option to create an e-commerce website based on the Astro framework. Even when the default visual is designed as a store or catalog for audio devices, it can be customized to showcase any type of product."
21-
buttons={[
22-
{ label: "Deploy template", link: "https://console.azion.com/create/azion-community/astro-audiophile", outlined: false, icon: "ai ai-azion", iconPos: "left" },
23-
{ label: "View demo", link: "https://ceje7vy122.map.azionedge.net/", severity: "secondary", target:"_blank" }
24-
]}
25-
/>
26-
</div>
27-
28-
<div style="display: flex; gap: 1rem; align-items: center; flex-direction: row; flex-wrap: wrap;">
29-
<div style="flex: 1; min-width: 300px;">
30-
| Item | Details |
31-
|:----------|:------|
32-
| Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-audiophile) |
33-
| Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
34-
| Use Case | E-commerce |
35-
</div>
36-
<div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
37-
<img src="/assets/docs/images/uploads/template-showcase/astro/astro-audiophile.png" width="400" alt="Astro Audiophile" style="max-width: 100%; height: auto;" />
38-
</div>
39-
</div>
17+
<SectionBasicContent
18+
description="The Astro Audiophile template provides a quick option to create an e-commerce website based on the Astro framework. Even when the default visual is designed as a store or catalog for audio devices, it can be customized to showcase any type of product."
19+
buttons={[
20+
{ label: "Deploy template", link: "https://console.azion.com/create/azion-community/astro-audiophile", outlined: false, icon: "ai ai-azion", iconPos: "left" },
21+
{ label: "View demo", link: "https://ceje7vy122.map.azionedge.net/", severity: "secondary" }
22+
]}
23+
>
24+
<Fragment slot="content">
25+
<div style="flex: 1; min-width: 300px;">
26+
| Item | Details |
27+
|:----------|:------|
28+
| Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-audiophile) |
29+
| Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
30+
| Use Case | E-commerce |
31+
</div>
32+
<div style="display: flex; justify-content: center; align-items: center; flex: 1;">
33+
<img src="/assets/docs/images/uploads/template-showcase/astro/astro-audiophile.png" width="400" alt="Astro Audiophile" style="min-width: 100%; max-width: 100%; height: auto;" />
34+
</div>
35+
</Fragment>
36+
</SectionBasicContent>
4037

4138
For more information about deploying this template visit the [template guide](/en/documentation/products/guides/astro-ecommerce-collection/).

0 commit comments

Comments
 (0)