feat: tour info when no articles

Author: bdrtsky

components/content/ArticlesList.vue

@@ -21,6 +21,14 @@ const articles = computed(() => _articles.value || [])
       <ArticlesListItem v-for="(article, index) in articles.slice(1)" :key="index" :article="article" />
     </div>
   </div>
+  <div v-else class="tour">
+    <p>Seems like there are no articles yet.</p>
+    <p>
+      You can start by
+      <!-- eslint-disable-next-line -->
+      <ProseA href="https://alpine.nuxt.space/articles/write-articles">creating</ProseA> one in the <ProseCodeInline>articles</ProseCodeInline> folder.
+    </p>
+  </div>
 </template>
 
 <style scoped lang="ts">
@@ -50,6 +58,13 @@ css({
         gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
       },
     }
+  },
+  '.tour': {
+    minHeight: '30vh',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
   }
 })
 </style>