Merge pull request #40 from directus/extensions

Change from using style to content component

Author: connorwinston

app/components/articles/Card.vue

@@ -14,7 +14,10 @@ defineProps<{
 		</p>
 
 		<div class="card-footer-row">
-			<div v-if="article.tags" class="card-tag-row">
+			<div
+				v-if="article.tags"
+				class="card-tag-row"
+			>
 				<span
 					v-for="tag in article.tags"
 					:key="tag.id"
@@ -24,10 +27,16 @@ defineProps<{
 					<Icon :name="tag.icon || 'material-symbols:question-mark'" />
 				</span>
 			</div>
-			<p v-if="article.category" class="card-category">
+			<p
+				v-if="article.category"
+				class="card-category"
+			>
 				{{ article.category }}
 			</p>
-			<p v-if="article.description" class="card-description">
+			<p
+				v-if="article.description"
+				class="card-description"
+			>
 				{{ article.description }}
 			</p>
 		</div>
@@ -52,6 +61,11 @@ defineProps<{
 		font-weight: 500;
 	}
 
+	.card-description {
+		font-size: 0.875rem;
+		font-weight: 400;
+	}
+
 	.card-footer-row {
 		margin-top: 0.5rem;
 		display: flex;

app/components/content/ArticleCards.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const props = defineProps<{
+	paths: string[];
+}>();
+
+const pages = await queryContent().where({ _path: { $in: props.paths } }).only(['_path', 'title', 'description']).find();
+
+const items = props.paths.map((item) => {
+	const page = pages.find(page => page._path === item);
+	return {
+		title: page?.title,
+		description: page?.description,
+		_path: page?._path,
+	};
+});
+</script>
+
+<template>
+	<ArticlesGrid :articles="items" />
+</template>

app/components/pages/ExtensionListing.global.vue

@@ -1,19 +1,14 @@
 ---
-style: ExtensionListing
 title: API Extensions
 description:
-sections:
-  - title: Extension Types
-    items:
-      - path: /extensions/api-extensions/hooks
-      - path: /extensions/api-extensions/endpoints
-      - path: /extensions/api-extensions/operations
-  - title: Resources
-    items:
-      - path: /extensions/api-extensions/services
-      - path: /extensions/api-extensions/sandbox
 ---
 
 # API Extensions Overview
 
-API Extensions extend the functionality of the API.
+API Extensions extend the functionality of the API.
+
+## Extension Types
+:article-cards{:paths='["/extensions/api-extensions/hooks","/extensions/api-extensions/endpoints","/extensions/api-extensions/operations"]'}
+
+## Resources
+:article-cards{:paths='["/extensions/api-extensions/services","/extensions/api-extensions/sandbox"]'}

content/10.extensions/2.api-extensions/0.index.md

@@ -1,22 +1,14 @@
 ---
-style: ExtensionListing
 title: App Extensions
 description:
-sections:
-  - title: Extension Types
-    items:
-      - path: /extensions/app-extensions/interfaces
-      - path: /extensions/app-extensions/displays
-      - path: /extensions/app-extensions/layouts
-      - path: /extensions/app-extensions/panels
-      - path: /extensions/app-extensions/modules
-      - path: /extensions/app-extensions/themes
-  - title: Resources
-    items:
-      - path: /extensions/app-extensions/ui-library
-      - path: /extensions/app-extensions/composables
 ---
 
 # App Extensions Overview
 
-App Extensions extend the functionality of the Data Studio.
+App Extensions extend the functionality of the Data Studio.
+
+## Extension Types
+:article-cards{:paths='["/extensions/app-extensions/interfaces","/extensions/app-extensions/displays","/extensions/app-extensions/layouts","/extensions/app-extensions/panels","/extensions/app-extensions/modules","/extensions/app-extensions/themes"]'}
+
+## Resources
+:article-cards{:paths='["/extensions/app-extensions/ui-library","/extensions/app-extensions/composables"]'}