feat: load creation author

Author: solvedDev

.gitignore

@@ -2,4 +2,6 @@ node_modules
 .DS_Store
 docs/.vitepress/dist
 docs/data/creations.json
-docs/public/creations
+docs/public/creations
+docs/data/authors.json
+docs/public/authors

docs/.vitepress/config.ts

@@ -1,11 +1,13 @@
 import { defineConfig } from 'vitepress'
 import { generateSidebar } from './generateSidebar'
 import { getLatestBridgeVersion } from './latestBridgeVersion'
+import { loadAuthors } from './loadAuthors'
 import { loadCreations } from './loadCreations'
 
 // const latestBridgeVersion = await getLatestBridgeVersion()
 
 loadCreations()
+loadAuthors()
 
 const base = '/docs/'
 

docs/.vitepress/loadAuthors.ts

@@ -0,0 +1,57 @@
+import fs from 'fs'
+import { dirname, join } from 'path'
+import matter from 'gray-matter'
+import sharp from 'sharp'
+
+export function loadAuthors() {
+	const authorDirEntries = fs.readdirSync(
+		join(process.cwd(), 'docs', 'authors'),
+		{ withFileTypes: true }
+	)
+	const authors: any = {}
+
+	for (const entry of authorDirEntries) {
+		if (!entry.isDirectory()) continue
+
+		const creationDir = join(process.cwd(), 'docs/authors', entry.name)
+		const creationPath = join(creationDir, 'index.md')
+
+		const str = fs.readFileSync(creationPath, 'utf8')
+		let frontMatter: matter.GrayMatterFile<string>
+		try {
+			frontMatter = matter(str)
+		} catch (err) {
+			throw new Error(
+				`File ${creationPath} has invalid frontmatter! ${err.message}`
+			)
+		}
+
+		authors[frontMatter.data.id] = {
+			...frontMatter.data,
+			image: '/' + join(`authors/${entry.name}`, frontMatter.data.image),
+		}
+
+		// Copy thumbnails to public folder
+		const outputPath = join(
+			process.cwd(),
+			'docs/public/authors',
+			entry.name,
+			frontMatter.data.image
+		)
+		fs.mkdirSync(dirname(outputPath), { recursive: true })
+
+		// Convert image to avif with sharp
+		sharp(join(creationDir, frontMatter.data.image))
+			.resize({ width: 80, height: 80 })
+			.avif()
+			.toFile(outputPath.replace(/\.(jpg|png)$/, '.avif'))
+
+		// Copy normal image over as a fallback
+		fs.copyFileSync(join(creationDir, frontMatter.data.image), outputPath)
+	}
+
+	fs.writeFileSync(
+		join(process.cwd(), 'docs', 'data/authors.json'),
+		JSON.stringify(authors)
+	)
+}

docs/.vitepress/theme/components/CreationCard.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { withBase } from 'vitepress'
 import VPButton from 'vitepress/client/theme-default/components/VPButton.vue'
+import authors from '../../../data/authors.json'
+
 export interface ICreation {
 	title: string
 	excerpt: string
@@ -9,14 +12,16 @@ export interface ICreation {
 	download: string
 }
 
+console.log(authors, props.creation.author, authors[props.creation.author])
 const props = defineProps<{
 	creation: ICreation
 }>()
+const author = computed(() => authors[props.creation.author])
 </script>
 
 <template>
 	<div class="card">
-		<picture :alt="`Thumbnail of ${creation.title}`">
+		<picture>
 			<source
 				:srcset="
 					withBase(creation.image).replace(/\.(jpg|png)$/, '.avif')
@@ -32,6 +37,38 @@ const props = defineProps<{
 
 		<div class="content">
 			<h1>{{ creation.title }}</h1>
+
+			<div class="author">
+				<picture>
+					<source
+						:srcset="
+							withBase(author.image).replace(
+								/\.(jpg|png)$/,
+								'.avif'
+							)
+						"
+						type="image/avif"
+					/>
+					<source :srcset="withBase(author.image)" />
+					<img
+						class="author-logo"
+						:src="withBase(author.image)"
+						:alt="`Logo of ${author.title}`"
+					/>
+				</picture>
+
+				<div class="author-name">
+					<span>{{ author.title }}</span>
+					<span class="author-position">{{ author.position }}</span>
+				</div>
+			</div>
+
+			<div class="tag-list">
+				<span class="tag" v-for="tag in creation.tags">
+					#{{ tag }}
+				</span>
+			</div>
+
 			<p>{{ creation.excerpt }}</p>
 		</div>
 
@@ -49,6 +86,7 @@ const props = defineProps<{
 
 <style scoped>
 .card {
+	text-align: left;
 	display: flex;
 	flex-flow: column;
 	background: var(--vp-c-bg-soft);
@@ -72,4 +110,45 @@ h1 {
 	justify-content: flex-end;
 	padding: 12px;
 }
+
+.author {
+	display: flex;
+	align-items: center;
+	background: var(--vp-c-bg);
+	border-radius: 12px;
+	padding: 4px 8px;
+	margin: 8px 0;
+}
+.author-logo {
+	height: 32px;
+	border-radius: 100%;
+	margin-right: 12px;
+}
+.author-name {
+	display: flex;
+	flex-direction: column;
+	justify-items: center;
+}
+.author-position {
+	font-size: 12px;
+	color: var(--vp-c-text-soft);
+	margin-top: -4px;
+}
+
+.tag-list {
+	display: flex;
+	gap: 4px;
+	flex-wrap: wrap;
+	justify-content: flex-start;
+	align-items: center;
+	margin-bottom: 16px;
+}
+.tag {
+	background: var(--vp-c-bg);
+	padding: 4px 8px;
+	border-radius: 12px;
+	flex: 1;
+	text-align: center;
+	white-space: nowrap;
+}
 </style>

docs/creations/seaside-story/index.md

@@ -3,7 +3,7 @@ title: 'Seaside Story'
 image: './main.jpg'
 author: 'gamemode-one'
 excerpt: 'Live out your own peaceful ocean adventure!'
-tags: [ocean, fishing, relaxing, bridge-v2]
+tags: [ocean, fishing, relaxing]
 download: 'https://www.minecraft.net/en-us/marketplace/pdp?id=5c7cd39e-9903-477b-b013-1b6b6d2bd9ab'
 ---