Revamp tutorial listing with images (#335)

* Show two articles per row

* Extract card layout

* Start laying out for images

* Fix layout

* Start implementing image generation

* Add sharp

* Serve the background for now

* Add background for post images

* Show background image for now

* Make images larger

* Start compositing images

* Dynamically query for logos

* Add logos

* Grab the first logo

* Add logos to articles

* Dynamically show articles' first logo

* Show "More" conditionally

* Fix indentation problems, add image

* Rename attribute

* Start adding logos

* Add all images for getting started

* Add logos for projects tutorials

* Add logos for tips and trips as well as migration tutorials

* Add logos for migration, extensions and self hosting

* Add logos for the rest of the tutorials

* Resize image, move api endpoint

* Move api folder back

* Fix path error

* Update paths

* Fix paths

* Move images

* Revert "Move images"

This reverts commit d264e79.

* Revert "Revert "Move images""

This reverts commit 2afa132.

* Fix path access

* Revert "Revert "Revert "Move images"""

This reverts commit 1028c39.

* Use HTTP requests

* Fix bug

* Fix path

* Fix import

* Fix bugs

* Fix logo alignment

* Fix alignment issues

* Update server/api/tutorialimg.ts

Author: hola-soy-milk

app/components/TutorialsArticles.vue

@@ -2,19 +2,29 @@
 const props = defineProps<{
 	path: string;
 	limit?: number;
+	categoryTitle: string;
+	showMore?: boolean;
 }>();
 
 const { data: articles } = await useAsyncData(props.path + '-preview', () => {
 	const query = queryContent(props.path)
 		.where({ _path: { $ne: props.path } })
-		.only(['title', 'description', 'icon', '_path']);
+		.only(['title', 'description', 'icon', '_path', 'technologies']);
 
 	if (props.limit) {
 		query.limit(props.limit);
 	}
 
 	return query.find();
 });
+
+const moreImageSrc = '/docs/img/tutorials/more.png';
+
+const imageSrc = (article: { technologies: string[] }) => {
+	const technologies = article?.technologies || ['directus'];
+	const techString = technologies.join(', ');
+	return `/docs/api/tutorialimg?logos=${techString}`;
+};
 </script>
 
 <template>
@@ -25,20 +35,50 @@ const { data: articles } = await useAsyncData(props.path + '-preview', () => {
 		>
 			<ShinyCard
 				v-if="article.title"
-				:title="article.title"
-				:description="article.description"
 				:to="article._path"
 				:icon="article.icon"
-				class="col-span-4"
+				class="col-span-6"
 				:ui="{
 					body: {
 						base: 'gap-0',
 					},
 					title: 'font-bold text-pretty',
 					description: 'line-clamp-2',
 				}"
-				:color="cardColor(article.title)"
-			/>
+				:color="cardColor(article.title)">
+				<div class="md:grid grid-cols-4 gap-4">
+					<img class="col-span-2 mb-4 md:mb-0" :src="imageSrc(article)" alt="Generated Image"/>
+					<div class="col-span-2">
+						<ProseP class="text-gray-900 dark:text-white text-base truncate font-bold text-pretty">
+							{{ article.title }}
+						</ProseP>
+						<ProseP class="text-[15px] text-gray-500 dark:text-gray-400 mt-1 line-clamp-2">
+							{{ article.description }}
+						</ProseP>
+					</div>
+				</div>
+			</ShinyCard>
 		</template>
+		<ShinyCard
+			v-if="showMore"
+			:to="path"
+			class="col-span-6"
+			:ui="{
+				body: {
+					base: 'gap-0',
+				},
+				title: 'font-bold text-pretty',
+				description: 'line-clamp-2',
+			}"
+			:color="cardColor(categoryTitle)">
+			<div class="grid grid-cols-4 gap-4">
+				<img class="col-span-2" :src="moreImageSrc" alt="More {{ categoryTitle }} tutorials"/>
+				<div class="col-span-2 flex flex-col justify-center">
+					<ProseP class="text-gray-900 dark:text-white text-base truncate font-bold text-pretty">
+						See all {{ categoryTitle }} tutorials
+					</ProseP>
+				</div>
+			</div>
+		</ShinyCard>
 	</ShinyGrid>
 </template>

app/components/TutorialsCategory.vue

@@ -19,14 +19,8 @@ defineProps<{
 		<TutorialsArticles
 			:limit="limit"
 			:path="path"
+			:category-title="title"
+			:show-more="true"
 		/>
-
-		<Callout
-			class="w-6/12 my-10 font-bold"
-			:to="path"
-			icon="material-symbols:arrow-outward"
-		>
-			See all {{ title }} tutorials
-		</Callout>
 	</div>
 </template>

content/tutorials/1.getting-started/create-reusable-blocks-with-many-to-any-relationships.md

@@ -2,6 +2,8 @@
 id: 9176d1b6-c530-44f3-92b3-71f35ae80902
 slug: create-reusable-blocks-with-many-to-any-relationships
 title: Create Reusable Blocks with Many-to-Any Relationships
+technologies:
+  - db
 authors:
   - name: Bryant Gillespie
     title: Growth Engineer

content/tutorials/1.getting-started/fetch-data-from-directus-in-android-with-kotlin.md

@@ -2,6 +2,8 @@
 id: 3444d6c8-f336-4d0b-aa02-bc665f4ad3b5
 slug: fetch-data-from-directus-in-android-with-kotlin
 title: Fetch Data from Directus in Android with Kotlin
+technologies:
+  - kotlin
 authors:
   - name: Ekekenta Clinton
     title: Guest Author

content/tutorials/1.getting-started/fetch-data-from-directus-in-ios-with-swift.md

@@ -2,6 +2,8 @@
 id: fbb96512-b46a-4a0c-bb39-b7d11ec0dc7f
 slug: fetch-data-from-directus-in-ios-with-swift
 title: Fetch Data from Directus in iOS with Swift
+technologies:
+  - swift
 authors:
   - name: Harshpal Bhirth
     title: Guest Author

content/tutorials/1.getting-started/fetch-data-from-directus-with-angular.md

@@ -2,6 +2,8 @@
 id: 01d87344-02d8-45fc-a6e3-f13777cdab83
 slug: fetch-data-from-directus-with-angular
 title: Fetch Data from Directus with Angular
+technologies:
+  - angular
 authors:
   - name: David Mbochi
     title: Guest Author

content/tutorials/1.getting-started/fetch-data-from-directus-with-astro.md

@@ -2,6 +2,8 @@
 id: 970eaaf3-d033-43d6-800e-c168e28c6d8f
 slug: fetch-data-from-directus-with-astro
 title: Fetch Data from Directus with Astro
+technologies:
+  - astro
 authors:
   - name: Trust Jamin
     title: Guest Author

content/tutorials/1.getting-started/fetch-data-from-directus-with-django.md

@@ -2,6 +2,8 @@
 id: ab19694b-b7e5-44d1-994c-f7a5e5025829
 slug: fetch-data-from-directus-with-django
 title: Fetch Data from Directus with Django
+technologies:
+  - django
 authors:
   - name: Omu Inetimi
     title: Guest Author

content/tutorials/1.getting-started/fetch-data-from-directus-with-eleventy-3.md

@@ -1,6 +1,8 @@
 ---
 id: b847e493-5a35-49e1-80b1-3dc2657a0f7d
 slug: fetch-data-from-directus-with-eleventy-3
+technologies:
+  - 11ty
 title: Fetch Data from Directus with Eleventy 3
 authors:
   - name: Kevin Lewis

content/tutorials/1.getting-started/fetch-data-from-directus-with-flask.md

@@ -2,6 +2,8 @@
 id: c8562b3b-fbe0-4fd5-ade1-2d9a9e986f6d
 slug: fetch-data-from-directus-with-flask
 title: Fetch Data from Directus with Flask
+technologies:
+  - flask
 authors:
   - name: Guilherme Souza
     title: Guest Author