feat: update showcase ui

Author: antfu

docs/.vitepress/config.ts

@@ -191,6 +191,10 @@ const slidebars: DefaultTheme.SidebarItem[] = [
     text: 'Built-in',
     items: BuiltIn,
   },
+  {
+    text: 'Resources',
+    items: Resources,
+  },
 ]
 
 export default defineConfig({

docs/.vitepress/showcases.ts

@@ -20,8 +20,8 @@ export const showcases: ShowCaseInfo[] = [
       name: 'Anthony Fu',
       link: 'https://github.com/antfu',
     },
-    slidesLink: 'https://sli.dev/demo/composable-vue',
-    sourceLink: 'https://github.com/antfu/talks/tree/master/2021-04-29',
+    slidesLink: 'https://talks.antfu.me/2021/composable-vue/',
+    sourceLink: 'https://github.com/antfu/talks/tree/main/2021-04-29',
     at: 'VueDay 2021',
     datetime: '2021-04-29',
   },
@@ -49,29 +49,29 @@ export const showcases: ShowCaseInfo[] = [
     at: 'Enter.js Vue Day',
     datetime: '2021-06-15',
   },
-  {
-    title: 'Simply Publish Your Package to npm',
-    author: {
-      name: 'Lucky Dewa Satria',
-      link: 'https://github.com/lucky401',
-    },
-    at: 'Weekly sharing',
-    slidesLink: 'https://masukin.link/talks/simply-publish-your-package-to-npm',
-    cover: 'https://masukin.link/talks-cover-npm.png',
-    datetime: '2021-06-12',
-  },
-  {
-    title: 'Create Icon Package With Vue and Rollup',
-    author: {
-      name: 'Lucky Dewa Satria',
-      link: 'https://github.com/lucky401',
-    },
-    at: 'Weekly Sharing',
-    slidesLink: 'https://masukin.link/talks/create-icon-package-with-vue-and-rollup',
-    sourceLink: 'https://github.com/lucky401/Create-Icon-Package-With-Vue-and-Rollup',
-    cover: 'https://masukin.link/talks-cover-create-icon-package-with-vue-and-rollup.png',
-    datetime: '2021-06-19',
-  },
+  // {
+  //   title: 'Simply Publish Your Package to npm',
+  //   author: {
+  //     name: 'Lucky Dewa Satria',
+  //     link: 'https://github.com/lucky401',
+  //   },
+  //   at: 'Weekly sharing',
+  //   slidesLink: 'https://masukin.link/talks/simply-publish-your-package-to-npm',
+  //   cover: 'https://masukin.link/talks-cover-npm.png',
+  //   datetime: '2021-06-12',
+  // },
+  // {
+  //   title: 'Create Icon Package With Vue and Rollup',
+  //   author: {
+  //     name: 'Lucky Dewa Satria',
+  //     link: 'https://github.com/lucky401',
+  //   },
+  //   at: 'Weekly Sharing',
+  //   slidesLink: 'https://masukin.link/talks/create-icon-package-with-vue-and-rollup',
+  //   sourceLink: 'https://github.com/lucky401/Create-Icon-Package-With-Vue-and-Rollup',
+  //   cover: 'https://masukin.link/talks-cover-create-icon-package-with-vue-and-rollup.png',
+  //   datetime: '2021-06-19',
+  // },
   {
     title: 'BeAPT',
     author: {
@@ -199,6 +199,6 @@ export const showcases: ShowCaseInfo[] = [
     at: 'Submit your talk/presentation to be list here!',
     slidesLink: 'https://github.com/slidevjs/docs/edit/main/.vitepress/showcases.ts',
     cover: `${import.meta.env.BASE_URL}theme-placeholder.png`,
-    datetime: '2021-04-29',
+    datetime: '2020-1-1',
   },
-]
+].sort((a, b) => new Date(b.datetime).getTime() - new Date(a.datetime).getTime())

docs/.vitepress/theme/components/ShowCaseInfo.vue

@@ -7,8 +7,8 @@ defineProps<{
 </script>
 
 <template>
-  <div>
-    <div class="block mb-1.5 w-full relative aspect-16/9">
+  <div class="flex flex-col gap-2">
+    <div class="block w-full relative aspect-16/9">
       <a
         class="absolute top-0 bottom-0 left-0 right-0 overflow-hidden"
         border="~ rounded gray-400 opacity-20"
@@ -18,45 +18,44 @@ defineProps<{
         <img :src="info.cover">
       </a>
     </div>
-    <div class="font-bold">
+    <div class="font-bold line-clamp-2">
       {{ info.title }}
     </div>
-    <div
-      class="text-current text-xs opacity-75 whitespace-nowrap overflow-hidden overflow-ellipsis"
-    >
+    <div class="text-current text-xs opacity-75 whitespace-nowrap overflow-hidden overflow-ellipsis">
       {{ info.at }}
     </div>
-    <div class="mt-2 flex">
+    <div class="flex-auto" />
+    <div class="flex">
       <a
         v-if="info.author.link"
         :href="info.author.link"
-        class="text-current text-sm opacity-50"
+        class="text-current! text-sm opacity-50 whitespace-nowrap overflow-hidden overflow-ellipsis"
         target="_blank"
       >{{ info.author.name }}</a>
-      <div v-else class="text-current text-sm opacity-50">
+      <div v-else class="text-current! text-sm opacity-50 whitespace-nowrap overflow-hidden overflow-ellipsis">
         {{ info.author.name }}
       </div>
       <div class="flex-auto" />
       <a
         v-if="info.videoLink"
         :href="info.videoLink"
-        class="ml-2 text-current opacity-20 hover:opacity-100 hover:text-[#cb3837]"
+        class="ml-2 text-current! opacity-20 hover:opacity-100 hover:text-[#cb3837]"
         target="_blank"
       >
         <carbon:video />
       </a>
       <a
         v-if="info.slidesLink"
         :href="info.slidesLink"
-        class="ml-2 text-current opacity-20 hover:opacity-100 hover:text-[#cb3837]"
+        class="ml-2 text-current! opacity-20 hover:opacity-100 hover:text-[#cb3837]"
         target="_blank"
       >
         <carbon:presentation-file />
       </a>
       <a
         v-if="info.sourceLink"
         :href="info.sourceLink"
-        class="ml-2 text-current opacity-20 hover:opacity-100"
+        class="ml-2 text-current! opacity-20 hover:opacity-100"
         target="_blank"
       >
         <carbon:logo-github />

docs/resources/learning.md

@@ -4,7 +4,7 @@
 
 ### Videos
 
-<iframe class="aspect-16/9 rounded-xl w-full shadow-md border-none" src="https://www.youtube-nocookie.com/embed/oSgM6GoSwyY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+- [Slidev - one of the best presentation software and it is free!](https://www.youtube.com/watch?v=oSgM6GoSwyY) - by [Federico Tartarini](https://www.youtube.com/@FedericoTartarini)
 
 ### Articles
 

docs/showcases.md

@@ -1,7 +1,3 @@
----
-sidebar: false
----
-
 # Showcases
 
 Talks / Presentations using Slidev.