summaryrefslogtreecommitdiff
path: root/docs/src
diff options
context:
space:
mode:
Diffstat (limited to 'docs/src')
-rw-r--r--docs/src/components/Card.astro (renamed from docs/src/components/Examples/Card.astro)36
-rw-r--r--docs/src/components/ContainerQuery.astro5
-rw-r--r--docs/src/components/Examples/CardButtons.astro37
-rw-r--r--docs/src/components/Examples/CardLink.tsx66
-rw-r--r--docs/src/components/Examples/Codebar.tsx38
-rw-r--r--docs/src/components/Examples/CollapsibleReadme.astro95
-rw-r--r--docs/src/components/Examples/Thumbnail.astro124
-rw-r--r--docs/src/components/Examples/card.scss167
-rw-r--r--docs/src/data/components.json2
-rw-r--r--docs/src/pages/demo.astro14
-rw-r--r--docs/src/pages/quick-start.md1
-rw-r--r--docs/src/pages/themes.astro3
12 files changed, 14 insertions, 574 deletions
diff --git a/docs/src/components/Examples/Card.astro b/docs/src/components/Card.astro
index 81d3b97f4..c024981ff 100644
--- a/docs/src/components/Examples/Card.astro
+++ b/docs/src/components/Card.astro
@@ -1,25 +1,11 @@
---
-import CodeBar from './Codebar.tsx'
-import CardButtons from './CardButtons.astro'
-
const {data, index} = Astro.props;
-
-// NOTE: Needed until we get hosted demos of official templates.
-const PLACEHOLDER_THUMBNAILS = [
- // `#ba5370, #F4E2D8`,
- // `#22c1c3, #fdbb2d`,
- // `#7a5e99, #9f5dcf, #e864ca, #fdeff9`,
- // `#e1eec3, #f05053`,
- // `#7f00ff, #e100ff`,
- `var(--theme-bg-accent), var(--theme-accent)`,
-]
-
const hasScreenshot = !!data.demo;
const backgroundStyle = hasScreenshot ? `url('https://v1.screenshot.11ty.dev/${encodeURIComponent(data.demo)}/medium/9:16/')` : `linear-gradient(60deg, var(--theme-bg-accent), var(--theme-accent))`
---
<style>
.card {
- position: relative;
+ position: relative;
display: flex;
flex-direction: column;
grid-column: span 1;
@@ -36,13 +22,13 @@ const backgroundStyle = hasScreenshot ? `url('https://v1.screenshot.11ty.dev/${e
font-size: 1.8rem;
}
.background-dimmer {
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- background: linear-gradient(45deg, #0004, #000B);
- z-index: 2;
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ background: linear-gradient(45deg, #0004, #000B);
+ z-index: 2;
}
.card-body, .card-header {
color: var(--text-color);
@@ -58,7 +44,9 @@ const backgroundStyle = hasScreenshot ? `url('https://v1.screenshot.11ty.dev/${e
<article class={`card ${hasScreenshot ? 'has-screenshot' : ''}`} style={`background: ${backgroundStyle}; background-size: cover;`}>
{hasScreenshot && <div class="background-dimmer"></div>}
<div class="card-body">
- <a href={data.github} class="card-header" target="_blank">{data.name}
- <span>{` →`}</span></a>
+ <a href={data.github} class="card-header" target="_blank">
+ {data.name}
+ <span>{` →`}</span>
+ </a>
</div>
</article> \ No newline at end of file
diff --git a/docs/src/components/ContainerQuery.astro b/docs/src/components/ContainerQuery.astro
deleted file mode 100644
index 253cf43ec..000000000
--- a/docs/src/components/ContainerQuery.astro
+++ /dev/null
@@ -1,5 +0,0 @@
- <script type="module">
- import { cqfill } from 'https://unpkg.com/cqfill@0.6.0/export/cqfill.mjs'
-
- cqfill()
- </script> \ No newline at end of file
diff --git a/docs/src/components/Examples/CardButtons.astro b/docs/src/components/Examples/CardButtons.astro
deleted file mode 100644
index f7393df42..000000000
--- a/docs/src/components/Examples/CardButtons.astro
+++ /dev/null
@@ -1,37 +0,0 @@
----
- export interface Props{
- dir:string
- }
-const {dir} = Astro.props
-const icons = [
- <svg id="terminal" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
- </svg>,
- <svg id="codeBrowser"xmlns="http://www.w3.org/2000/svg" viewBox="0 -25 424 424">
- <defs/>
- <path fill="currentColor" d="M167.3 272.1a7 7 0 01-4.5-1.6l-45.3-38.6a7 7 0 010-10.7l45.3-38.5a7 7 0 119 10.6l-39 33.3 39 33.2a7 7 0 01-4.5 12.3zm0 0"/>
- <path fill="currentColor" d="M256.7 272.1c-2 0-4-.8-5.3-2.4a7 7 0 01.8-9.9l39-33.2-39-33.3a7 7 0 019-10.6l45.3 38.5a7 7 0 010 10.7l-45.3 38.6a7 7 0 01-4.5 1.6zm0 0M196 301h-1.5a7 7 0 01-5.4-8.4l28.2-134a7 7 0 0113.7 2.9l-28.2 134a7 7 0 01-6.8 5.6zm0 0"/>
- <path fill="currentColor" d="M377 374H47c-26 0-47-21-47-47V47C0 21 21 0 47 0h330c26 0 47 21 47 47v280c0 26-21 47-47 47zM47 14a33 33 0 00-33 33v280a33 33 0 0033 33h330a33 33 0 0033-33V47a33 33 0 00-33-33zm0 0"/>
- <path fill="currentColor" d="M417 112H7a7 7 0 110-14h410a7 7 0 010 14zm0 0M119.6 78.6a22.2 22.2 0 110-44.4 22.2 22.2 0 010 44.4zm0-30.3a8.2 8.2 0 100 16.3 8.2 8.2 0 000-16.3zm0 0M51.5 78.4a22.2 22.2 0 110-44.4 22.2 22.2 0 010 44.4zm0-30.3a8.2 8.2 0 100 16.3 8.2 8.2 0 000-16.3zm0 0M187.7 78.8a22.2 22.2 0 110-44.3 22.2 22.2 0 010 44.3zm0-30.3a8.2 8.2 0 100 16.3 8.2 8.2 0 000-16.3zm0 0"/>
- </svg>,
- <svg id="github" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
- <defs/>
- <path fill="currentColor" d="M12 .5C5.4.5 0 5.8 0 12.3c0 5.2 3.4 9.6 8.2 11.2.6 0 .8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.3-1.4-1.7-1.4-1.7-1-.7.1-.7.1-.7C5 16.9 5.6 18 5.6 18c1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-5.8 0-1.3.5-2.4 1.3-3.2-.2-.3-.6-1.5 0-3.1 0 0 1-.3 3.4 1.2a11.7 11.7 0 016 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.6.2 2.8 0 3.1.9.8 1.3 1.9 1.3 3.2 0 4.5-2.8 5.5-5.5 5.8.5.3.9 1 .9 2.2v3.2c0 .3.1.7.8.6 4.8-1.6 8.2-6 8.2-11.2C24 5.8 18.6.5 12 .5z"/>
- </svg>
- ]
----
-
-<div class="hotlinks">
- <button class="hot-btn">
- <a class="hot-link" href={`https://githubbox.com/snowpackjs/astro/tree/main${dir}`} title="Explore the Code" target="_blank" rel="noopener noreferrer"><i class="hot-icon">{icons[0]}</i></a>
- </button>
- <button class="hot-btn">
- <a class="hot-link" href={`https://github.dev/snowpackjs/astro/tree/main${dir}`} title="View Online Demo" target="_blank" rel="noopener noreferrer"><i class="hot-icon">{icons[1]}</i></a>
- </button>
- <button class="hot-btn">
- <a class="hot-link" href={`https://github.com/snowpackjs/astro/tree/main${dir}`} title={`Visit the Repo`} target="_blank" rel="noopener noreferrer"><i class="hot-icon">{icons[2]}</i></a>
- </button>
-</div>
-<style lang="scss">
- @import './card.scss';
-</style> \ No newline at end of file
diff --git a/docs/src/components/Examples/CardLink.tsx b/docs/src/components/Examples/CardLink.tsx
deleted file mode 100644
index 4c04be8a6..000000000
--- a/docs/src/components/Examples/CardLink.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { JSX } from '@babel/types';
-import type { Component } from 'preact';
-import { h, Fragment } from 'preact';
-import { useRef } from 'preact/hooks';
-
-export type CardLinkProps = {
- href: string;
- name: string;
- children: JSX | JSX[];
-};
-
-const CardLink: Component<CardLinkProps> = ({
- href,
- name,
- children,
-}: CardLinkProps): JSX.Element => {
- const Card = useRef(null);
- /**
- * Set Title Attribute when Hovering over Card
- * @param e - Mouse Enter Event
- */
- function handleOnMouseEnter(e) {
- const cardBody = Card.current.querySelector('.card-body');
- const cardThumb = Card.current.querySelector('.icon-image');
- const cardImg = Card.current.querySelector('.heroImg');
-
- if (
- e.target === cardBody ||
- e.target === cardThumb ||
- e.target === cardImg
- ) {
- e.target.setAttribute(
- 'title',
- `Click to find out more about our ${name} template`
- );
- }
- }
- /**
- * Click Link Card to Page
- * @param e - Click Event
- * @returns new window location
- */
- function handleOnClick(e) {
- const card = e.target;
- const mainLink = card.querySelector('.main-link');
- const clickableArea = ['.card-body', '.icon-image', '.heroImg'];
- for (let area of clickableArea) {
- if (e.currentTarget.classList.contains(area)) {
- return mainLink.click();
- }
- }
- }
- return (
- <div
- ref={Card}
- onClick={handleOnClick}
- onMouseOver={handleOnMouseEnter}
- aria-label={`Clickable Card taking you directly to the ${name} template`}
- tabIndex="0"
- >
- {children}
- </div>
- );
-};
-
-export default CardLink;
diff --git a/docs/src/components/Examples/Codebar.tsx b/docs/src/components/Examples/Codebar.tsx
deleted file mode 100644
index a1f1117b0..000000000
--- a/docs/src/components/Examples/Codebar.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import type { FunctionalComponent } from 'preact';
-import { h, Fragment } from 'preact';
-import { useState, useRef, useEffect } from 'preact/hooks';
-
-export type CodeBar = {
- content: string;
- command: string;
-};
-
-const CodeBar: FunctionalComponent = ({ content, command }) => {
- const [clicked, setClicked] = useState(false);
- const [titleTxt, setTitleTxt] = useState('Copy Command to Clipboard');
- useEffect(() => {
- const timeout = setTimeout(() => {
- setClicked(false);
- setTitleTxt('Copy Command to Clipboard');
- }, 1500);
- return () => clearTimeout(timeout);
- }, [clicked]);
- /**
- *
- */
- function onClick(e) {
- setClicked(true);
- setTitleTxt('Copied to Clipboard!');
- const titleAttr = e.target;
- const clipboard = navigator.clipboard;
- return clipboard.writeText(`${command}`);
- }
-
- return (
- <div style="cursor:pointer;" onClick={onClick} title={titleTxt}>
- <code>{content}</code>
- </div>
- );
-};
-
-export default CodeBar;
diff --git a/docs/src/components/Examples/CollapsibleReadme.astro b/docs/src/components/Examples/CollapsibleReadme.astro
deleted file mode 100644
index 679b467d3..000000000
--- a/docs/src/components/Examples/CollapsibleReadme.astro
+++ /dev/null
@@ -1,95 +0,0 @@
----
-import {Markdown} from 'astro/components'
-export interface Props{
- label:string;
- readme:string;
-}
-const {label,readme} = Astro.props
----
- <div class="wrap-collapsible">
- <input type="checkbox" id="collapsible" class="toggle">
- <label for="collapsible" class="lbl-toggle">{label}</label>
- <div class="collapsible-content">
- <div class="content-inner">
- <Markdown content = {readme} />
- </div>
- </div>
- </div>
-
-
-
-<style lang="css">
-.wrap-collabsible {
- margin-bottom: 1.2rem 0;
- will-change: auto;
- scroll-behavior: smooth;
-}
-
-input[type='checkbox'] {
- display: none;
-}
-
-.lbl-toggle {
- display: block;
-
- font-weight: bold;
- font-family: monospace;
- font-size: xx-large;
- text-transform: uppercase;
- text-align: left;
-
- padding: 1rem;
-
- color: var(--theme-color);
- background: var(--theme-background);
-
- cursor: pointer;
-
- border-radius: 7px;
- transition: all 0.25s ease-out;
-}
-
-.lbl-toggle:hover {
- color: #7C5A0B;
-}
-
-.lbl-toggle::before {
- content: ' ';
- display: inline-block;
-
- border-top: 5px solid transparent;
- border-bottom: 5px solid transparent;
- border-left: 5px solid currentColor;
- vertical-align: middle;
- margin-right: .7rem;
- transform: translateY(-2px);
-
- transition: transform .2s ease-out;
-}
-
-.toggle:checked + .lbl-toggle::before {
- transform: rotate(90deg) translateX(-3px);
-}
-
-.collapsible-content {
- max-height: 0px;
- overflow: hidden;
- transition: max-height 1.5s ease-in;
- will-change: transform;
-}
-
-.toggle:checked + .lbl-toggle + .collapsible-content {
- max-height: 100%;
-
-}
-
-.toggle:checked + .lbl-toggle {
- border-bottom-right-radius: 0;
- border-bottom-left-radius: 0;
-}
-
-.collapsible-content .content-inner {
- padding: .5rem 1rem;
-}
-
-</style> \ No newline at end of file
diff --git a/docs/src/components/Examples/Thumbnail.astro b/docs/src/components/Examples/Thumbnail.astro
deleted file mode 100644
index c4364396d..000000000
--- a/docs/src/components/Examples/Thumbnail.astro
+++ /dev/null
@@ -1,124 +0,0 @@
----
-import {Markdown} from 'astro/components'
-import formatName from './function/format-name.js'
-const {data:{name,pkgJSON:{description}}} = Astro.props
----
- <!-- Example 1 -->
-<!-- <div class="thumbnail">
-
- <a href={`/example/${name}`}>
- <h3>{formatName(name)}
- </h3>
- <img src="/default-og-image.png" alt="">
- </a>
-
- <pre data-lang='bash'>--template {name}</pre>
-</div> -->
-
-<!-- Example 2 -->
-<!-- <div class="thumbnail">
-
- <a href={`/example/${name}`}>
- <img src="/default-og-image.png" alt="">
- <h3>{formatName(name)}
- </h3>
- </a>
- <pre data-lang='bash'>--template {name}</pre>
-</div> -->
-
-<!-- Example 3 -->
-<div class="wrapper">
- <div class="thumbnail">
- <div class="title">
- <a href={`/example/${name}`}>
- <h3 >{formatName(name)}
- </h3>
- </a>
- <code class="code-inline">{name}</code>
- </div>
- <p class="description">{description}</p>
- <pre data-lang='bash' class="code-block">--template {name}</pre>
- </div>
-</div>
-
-<style lang="scss">
- .wrapper{
- box-sizing: border-box;
- width: 45%;
- display:flex;
- flex-direction:column;
-
- border-radius: 5rem;
- box-shadow: 2px 2px 2px #cacaca;
- }
- .thumbnail{
- flex-basis:1;
- flex-grow: 1;
- transition: all 0.25s ease-out ;
- transform: perspective(1000rem); //hack but needed,
- &:hover{
- transform: scale(1.015);
- }
- > a h3{
- margin:0.5rem;
- }
- > a img{
- margin-top:0.5rem;
- border-radius: 1rem;
- }
- > a{
- color:var(--theme-accent)
- }
- >p{
- word-break: keep-all;
- white-space: wrap;
- overflow: hidden;
- text-overflow: ellipsis
- }
- > pre{
- width:99%;
- margin-top: 0.85rem;
- margin-left:0;
- overflow: auto;
-
- &::-webkit-scrollbar{
- height:10px;
- background-color: #383740;
- color:white;
-
- }
- &::-webkit-scrollbar-track{
- box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
- }
- &::-webkit-scrollbar-thumb {
- width: 25%;
- background-color: darkgrey;
- outline: 1px solid slategrey;
- border-radius: 5rem;
- }
- }
-
- .title{
- display: flex;
- flex-wrap: wrap;
- flex-direction: row;
- align-items: baseline;
- > * + * {
- margin-inline-start: 0.5rem;
- }
-
- }
- }
- @media(max-width:603px){
- .thumbnail{
- width: 100%;
- height: fit-content;
- >pre{
- border-radius:0.5rem;
- overflow: auto;
- }
- }
- }
-
-
-</style>
diff --git a/docs/src/components/Examples/card.scss b/docs/src/components/Examples/card.scss
deleted file mode 100644
index 0211ea099..000000000
--- a/docs/src/components/Examples/card.scss
+++ /dev/null
@@ -1,167 +0,0 @@
-.card-wrapper {
- width: clamp(215px, 48%, 45%);
- border-radius: 60px 60px 100px 100px/60px 60px 20px 20px;
- flex-grow: 1;
- padding-bottom: 0.5rem;
- background: var(--theme-card-bg);
- box-shadow: var(--theme-card-box-shadow);
- transition: all 0.25s cubic-bezier(0, 0, 0.75, 0.24);
- &:hover {
- transform: translateY(-0.25rem);
- }
-}
-.card {
- position: relative;
- width: 100%;
- flex-basis: 1;
-}
-.card-body {
- display: flex;
- flex-wrap: wrap;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- position: relative;
- min-width: fit-content;
- padding: 1rem;
-}
-.hotlinks {
- display: flex;
- flex-wrap: nowrap;
- flex-direction: row;
- align-content: center;
- align-items: normal;
- justify-content: space-between;
- transform: translateY(-1rem);
-
- & .hot-btn {
- border-left: 1px solid var(--theme-card-divider);
- border-right: 1px solid var(--theme-card-divider);
- border-radius: 0;
- flex-basis: 1;
- transition: all 0.25s ease-in-out;
- cursor: pointer;
- background-color: transparent;
- & :active {
- transform: scale(0.9);
- }
- & .hot-link {
- }
- & .hot-icon {
- display: block;
- color: var(--theme-accent);
- width: 2rem;
- height: 2rem;
- }
- }
-}
-
-// .frosted-glass {
-// display: block;
-// height: 13rem;
-// border-bottom: 5px solid linear-gradient(var(--theme-divider));
-// background: linear-gradient(
-// 133deg,
-// rgb(59 56 73 / 78%),
-// transparent 70%,
-// #000000d4 100%
-// );
-// box-shadow: inset 5px -2px 7px 0px rgb(185 188 231 / 37%),
-// 0px 8px 0px 0px var(--theme-divider);
-// border-radius: 60px 60px 100px 100px / 60px 60px 20px 20px;
-// width: 100%;
-
-// }
-// .space-image {
-// width: 100%;
-// height: 13rem;
-// filter: blur( 10px );
-// //width:100%;
-// border-radius: 60px 60px 100px 100px / 60px 60px 20px 20px;
-// //margin-bottom:1rem;
-// position: relative;
-// -webkit-filter: blur( 10px );
-// }
-
-.card-content {
- display: flex;
- flex-direction: column;
- justify-content: space-around;
- flex-wrap: nowrap;
- align-content: space-around;
- align-items: center;
- transform: translateY(-3rem);
- line-height: 1.5rem;
- > * {
- margin: 0.5rem;
- border-radius: 60px 60px 20px 20px, 60px 60px 20px 20px;
- }
- .title {
- display: block;
- margin: 0;
- width: fit-content;
- margin: auto;
- font-size: xx-large;
- text-decoration: none;
- }
- .main-link {
- text-decoration: none;
- }
-}
-.card-avatar {
- position: relative;
- transform: translateY(-4rem);
- left: 0;
- border: 0.25rem solid var(--theme-divider);
- display: block;
- width: clamp(5rem, 8rem, 7rem);
- height: clamp(5rem, 8rem, 7rem);
- margin: 0;
- border-radius: 50%;
-}
-.heroImg {
- display: block;
- --hero-radius: 50px 50px 100px 100px / 60px 60px 20px 20px;
- border-radius: var(--hero-radius);
- width: 100%;
- height: 15rem;
- box-shadow: inset 5px -2px 7px 0px rgb(185 188 231 / 37%),
- 0px 8px 0px 0px var(--theme-divider);
- border-radius: var(--hero-radius);
- object-fit: cover;
-}
-.tooltip {
- position: relative;
- display: inline-block;
- border-bottom: 1px dotted black;
-}
-
-.tooltip .tooltip-text {
- visibility: hidden;
- width: 120px;
- background-color: black;
- color: #fff;
- text-align: center;
- border-radius: 6px;
- padding: 5px 0;
- position: absolute;
- z-index: 1;
- bottom: 150%;
- left: 50%;
- margin-left: -60px;
-}
-
-.tooltip .tooltip-text::after {
- content: '';
- position: absolute;
- top: 100%;
- left: 50%;
- margin-left: -5px;
- border-width: 5px;
- border-style: solid;
- border-color: black transparent transparent transparent;
-}
-
-.tooltip:hover .tooltip-text {
- visibility: visible;
-}
diff --git a/docs/src/data/components.json b/docs/src/data/components.json
index b5fde67a5..50b4ff61b 100644
--- a/docs/src/data/components.json
+++ b/docs/src/data/components.json
@@ -20,4 +20,4 @@
"demo": null
}
]
-}
+} \ No newline at end of file
diff --git a/docs/src/pages/demo.astro b/docs/src/pages/demo.astro
deleted file mode 100644
index c60a9e05d..000000000
--- a/docs/src/pages/demo.astro
+++ /dev/null
@@ -1,14 +0,0 @@
----
-import Layout from '../layouts/ExamplesLayout.astro'
-import templateData from '../components/Examples/function-generate-examples-data.js'
-import Card from '../components/Examples/Card.astro'
-
-let data = await templateData()
-
----
-
- <Layout content={data}>
- {data.filter(item=> (item.pkgJSON?.keywords?.includes('create-astro')))
- .sort((a,b)=> ((a.name === 'starter')? -1 : 1))
- .map((item)=>(<Card data={item}/>))}
- </Layout>
diff --git a/docs/src/pages/quick-start.md b/docs/src/pages/quick-start.md
index 71b0625ad..6998826fe 100644
--- a/docs/src/pages/quick-start.md
+++ b/docs/src/pages/quick-start.md
@@ -27,6 +27,7 @@ To learn more about installing and using Astro for the first time, please [read
If you prefer to learn by example, check out our [complete library of examples](https://github.com/snowpackjs/astro/tree/main/examples) on GitHub. You can check out any of these examples locally by running `npm init astro -- --template "EXAMPLE_NAME"`.
+
## Start your project
From inside your project directory, enter the following command into your terminal:
diff --git a/docs/src/pages/themes.astro b/docs/src/pages/themes.astro
index c4eea3067..86486514d 100644
--- a/docs/src/pages/themes.astro
+++ b/docs/src/pages/themes.astro
@@ -21,7 +21,6 @@ import components from '../data/components.json';
Astro is supported by a growing ecosystem of third-pary themes and components.
</Markdown>
<div class="card-grid">
-
{themes.community.map((item)=>(<Card data={item} />))}
</div>
<Markdown>
@@ -30,7 +29,6 @@ import components from '../data/components.json';
Astro maintains several official themes for common use-cases like documentation, portfolios, and more.
</Markdown>
<div class="card-grid">
-
{themes.official.map((item)=>(<Card data={item} />))}
</div>
<Markdown>
@@ -39,7 +37,6 @@ import components from '../data/components.json';
Our package ecosystem is growing! Check out these featured community packages.
</Markdown>
<div class="card-grid">
-
{components.community.map((item)=>(<Card data={item} />))}
</div>
</Layout> \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-08 07:27:43 +0000