chore: update showcase page in docs

henryhale · Aug 21, 2024 · 7b0b20c · 7b0b20c
1 parent 0023f4f
commit 7b0b20c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 12 deletions.
diff --git a/docs/.vitepress/theme/components/ProjectCards.vue b/docs/.vitepress/theme/components/ProjectCards.vue
@@ -1,21 +1,32 @@
 <script setup>
-const props = defineProps(['projects']);
+const props = defineProps(["projects"]);
 </script>
 
 <template>
-    <div class='grid'>
-        <div v-for='(p, i) in projects' :key='i' class="row">
+    <div class="grid">
+        <div class="intro">
+            <h1><b>Showcase</b></h1>
+            <p>Below is a list of projects that are using XTerminal.</p>
+            <p>
+                To add yours, edit this
+                <a
+                    href="https://github.com/henryhale/xterminal/blob/master/docs/showcase/index.md"
+                    >file</a
+                >.
+            </p>
+        </div>
+        <div v-for="(p, i) in projects" :key="i" class="row">
             <div class="grow">
                 <div class="row">
-                    <img :src='p.logo' :alt='p.name' width="45" />
+                    <img :src="p.logo" :alt="p.name" width="45" />
                     <span>
-                        {{ p.name }}<br>{{ p.desc }}<br>
-                        <a :href='p?.author.link'>@{{ p?.author.username }}</a>
+                        {{ p.name }}<br />{{ p.desc }}<br />
+                        <a :href="p?.author.link">@{{ p?.author.username }}</a>
                     </span>
                 </div>
             </div>
             <div>
-                <a :href='p.link'>Visit &RightArrow;</a>
+                <a :href="p.link">Visit &RightArrow;</a>
             </div>
         </div>
     </div>
@@ -28,7 +39,7 @@ const props = defineProps(['projects']);
     padding: 4rem 1rem;
 }
 
-.grid>* {
+.grid > * {
     margin-bottom: 2rem;
     width: 100%;
     max-width: 720px;
@@ -41,7 +52,7 @@ const props = defineProps(['projects']);
     padding: 1rem 0;
 }
 
-.row>*:not(:last-child) {
+.row > *:not(:last-child) {
     margin-right: 1rem;
 }
 
@@ -52,4 +63,11 @@ const props = defineProps(['projects']);
 a {
     color: var(--vp-c-brand);
 }
-</style>
+
+.intro h1 {
+    font-size: 32px;
+    letter-spacing: -0.02em;
+    line-height: 40px;
+    margin: 1rem 0;
+}
+</style>
diff --git a/docs/showcase/index.md b/docs/showcase/index.md
@@ -48,5 +48,3 @@ const showcase = [
 </script>
 
 <project-cards :projects='showcase'></project-cards>
-
-
Original file line number	Diff line number	Diff line change
Expand Up		@@ -48,5 +48,3 @@ const showcase = [
		</script>

		<project-cards :projects='showcase'></project-cards>