dcos: update

Author: antfu

.vitepress/showcases.ts

@@ -15,7 +15,7 @@ export interface ShowCaseInfo {
 export const showcases: ShowCaseInfo[] = [
   {
     title: 'Composable Vue',
-    cover: '',
+    cover: `${import.meta.env.BASE_URL}assets/composable-vue.png`,
     author: {
       name: 'Anthony Fu',
       link: 'https://github.com/antfu',
@@ -25,4 +25,14 @@ export const showcases: ShowCaseInfo[] = [
     at: 'VueDay 2021',
     datetime: '2021-04-29',
   },
+  // Add yours here!
+  {
+    title: 'Yours?',
+    author: {
+      name: '',
+    },
+    at: 'Sumbit your talk/presentation to be list here!',
+    cover: `${import.meta.env.BASE_URL}themes/placeholder.png`,
+    datetime: '2021-04-29',
+  },
 ]

.vitepress/theme/components/ShowCaseInfo.vue

@@ -10,8 +10,8 @@ defineProps<{
 <template>
   <div>
     <div
-      class="block mb-1.5 w-full rounded overflow-hidden relative"
-      style="padding-top: 56.25%"
+      class="block mb-1.5 w-full overflow-hidden relative aspect-9/16"
+      border="~ rounded gray-400 opacity-20"
     >
       <img :src="info.cover" class="absolute top-0 bottom-0 left-0 right-0" />
     </div>

.vitepress/theme/components/ThemeInfo.vue

@@ -12,8 +12,8 @@ defineProps<{
     <a
       :href="theme.id ? theme.previews[0] : '/themes/write-a-theme#submit'"
       target="_blank"
-      class="block mb-1.5 w-full rounded overflow-hidden relative"
-      style="padding-top: 56.25%"
+      class="block mb-1.5 w-full overflow-hidden relative aspect-9/16"
+      border="~ rounded gray-400 opacity-20"
     >
       <img :src="theme.previews[0]" class="absolute top-0 bottom-0 left-0 right-0" />
     </a>
@@ -33,7 +33,8 @@ defineProps<{
       <a
         v-if="theme.id"
         :href="`https://npmjs.com/package/${theme.id}`"
-        class="ml-2 text-current opacity-20 text-sm hover:opacity-100 hover:text-[#cb3837]"
+        class="ml-2 text-current opacity-20 text-sm"
+        hover="opacity-100 text-[#cb3837]"
         target="_blank"
       >
         <simple-icons-npm />

.vitepress/theme/index.ts

@@ -8,7 +8,6 @@ import './styles/layout.css'
 import './styles/code.css'
 import './styles/custom-blocks.css'
 import './styles/sidebar-links.css'
-import './styles/utils.css'
 import 'windi-utilities.css'
 
 const theme = {

.vitepress/theme/styles/layout.css

@@ -2,6 +2,9 @@
 ::before,
 ::after {
   box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: #e5e7eb;
 }
 
 * {

.vitepress/theme/styles/utils.css

@@ -6,4 +6,5 @@ sidebar: false
 
 Talks / Presentations using Slidev.
 
+<!-- Edit in ./docs/.vitepress/showcases.ts -->
 <ShowCases />

showcases.md

@@ -1,7 +1,3 @@
----
-sidebar: false
----
-
 # Themes Gallery
 
 Browser awesome themes available for Slidev here.