feat(badges/back-to-top): finish features

nuxt-themes · May 16, 2023 · bbfaddf · bbfaddf
1 parent 7ac3de9
commit bbfaddf
Show file tree

Hide file tree

Showing 9 changed files with 653 additions and 218 deletions.
diff --git a/.starters/default/content/articles/2.configure.md b/.starters/default/content/articles/2.configure.md
@@ -87,6 +87,12 @@ defineAppConfig({
       navigation: false, // possible value are : true | false
       position: 'center', // possible value are : 'none' | 'left' | 'center' | 'right'
       message: 'Follow me on' // string that will be displayed on the footer (leave empty or delete to disable)
+    }
+    // Disable back to top button: false
+    backToTop: {
+      text: 'Back to top',
+      icon: 'material-symbols:arrow-upward'
+    }
   }
 })
 ```
diff --git a/.starters/default/content/articles/3.write-articles.md b/.starters/default/content/articles/3.write-articles.md
@@ -100,7 +100,7 @@ In the frontmatter block, you can pass additional options for displaying your ar
 cover: path/to/cover
 date: 2022-08-23
 badges: [{
-  text: 'white',
+  color: 'white',
   bg: 'rgba(0, 0, 0, 0.3)',
   content: 'Technology'
 }]

diff --git a/.starters/default/package.json b/.starters/default/package.json
@@ -10,7 +10,7 @@
     "lint": "eslint ."
   },
   "devDependencies": {
-    "nuxt": "^3.4.3",
+    "nuxt": "^3.5.0",
     "@nuxt-themes/alpine": "^1.5.4",
     "@nuxtjs/plausible": "^0.2.1",
     "@nuxt/devtools": "^0.4.6",

diff --git a/app.config.ts b/app.config.ts
@@ -37,8 +37,9 @@ export default defineAppConfig({
     form: {
       successMessage: 'Message sent. Thank you!'
     },
-    article: {
-      backToTop: true
+    backToTop: {
+      text: 'Back to top',
+      icon: 'material-symbols:arrow-upward'
     }
   }
 })
diff --git a/components/content/ArticlesListItem.vue b/components/content/ArticlesListItem.vue
@@ -31,20 +31,40 @@ const id = computed(() => {
 </script>
 
 <template>
-  <article v-if="article._path && article.title" :class="{ 'featured': featured }" :data-content-id="id">
+  <article
+    v-if="article._path && article.title"
+    :class="{ 'featured': featured }"
+    :data-content-id="id"
+  >
     <div class="image">
       <div v-if="article?.badges">
-        <span v-for="({ bg, text, content }, index) in article.badges" :key="index" :style="{ backgroundColor: bg, color: text }">
-          {{ content }}
+        <span
+          v-for="(badge, index) in article.badges"
+          :key="index"
+          :style="{
+            backgroundColor: badge?.bg || 'rgba(0, 0, 0, 0.3)',
+            color: badge?.color || 'white'
+          }"
+        >
+          {{ typeof badge === 'string' ? badge : badge.content }}
         </span>
       </div>
       <NuxtLink :to="article._path">
-        <NuxtImg v-if="article.cover" :src="article.cover" :alt="article.title" width="16" height="9" />
+        <NuxtImg
+          v-if="article.cover"
+          :src="article.cover"
+          :alt="article.title"
+          width="16"
+          height="9"
+        />
       </NuxtLink>
     </div>
 
     <div class="content">
-      <NuxtLink :to="article._path" class="headline">
+      <NuxtLink
+        :to="article._path"
+        class="headline"
+      >
         <h1>
           {{ article.title }}
         </h1>

diff --git a/layouts/article.vue b/layouts/article.vue
@@ -1,28 +1,40 @@
 <template>
   <article ref="article">
     <!-- TODO: could be refactored as a transparent ButtonLink -->
-    <NuxtLink :to="parentPath" class="back">
+    <NuxtLink
+      :to="parentPath"
+      class="back"
+    >
       <Icon name="ph:arrow-left" />
-      <span class="text-primary-900 dark:text-primary-100">
+      <span>
         Back
       </span>
     </NuxtLink>
     <header>
-      <h1 v-if="page?.title" class="title">
+      <h1
+        v-if="page?.title"
+        class="title"
+      >
         {{ page.title }}
       </h1>
-      <time v-if="page?.date" class="text-primary-700 dark:text-primary-400" :datetime="page.date">
+      <time
+        v-if="page?.date"
+        :datetime="page.date"
+      >
         {{ formatDate(page.date) }}
       </time>
     </header>
 
     <div class="prose">
       <slot />
-      <div v-if="alpine?.article?.backToTop" class="back-to-top">
-        <button class="text-primary-900 dark:text-primary-100" @click.prevent.stop="onBackToTop">
-          {{ typeof alpine.article.backToTop === 'boolean' ? 'Back to Top' : page.backToTop }}
-          <Icon name="material-symbols:arrow-upward" />
-        </button>
+      <div
+        v-if="alpine?.backToTop"
+        class="back-to-top"
+      >
+        <ProseA @click.prevent.stop="onBackToTop">
+          {{ alpine?.backToTop?.text || 'Back to top' }}
+          <Icon :name="alpine?.backToTop?.icon || 'material-symbols:arrow-upward'" />
+        </ProseA>
       </div>
     </div>
   </article>
@@ -95,8 +107,9 @@ css({
       '.back-to-top': {
         display: 'flex',
         justifyContent: 'flex-end',
+        alignItems: 'center',
         width: '100%',
-        button: {
+        a: {
           cursor: 'pointer',
           fontSize: '{text.lg.fontSize}'
         }

diff --git a/nuxt.schema.ts b/nuxt.schema.ts
@@ -171,15 +171,13 @@ export default defineNuxtSchema({
         successMessage: 'Message sent. Thank you!'
       },
       /**
-       * Article configuration.
+       * Back to top button configuration.
        *
-       * @studio-icon material-symbols:article
+       * @studioIcon material-symbols:arrow-upward
        */
-      article: {
-        /**
-         * Back to top button
-         */
-        backToTop: true // possible value are : true | false | string
+      backToTop: {
+        icon: 'material-symbols:arrow-upward',
+        text: 'Back to top',
       }
     }
   }

diff --git a/package.json b/package.json
@@ -36,13 +36,13 @@
   "devDependencies": {
     "@nuxt/eslint-config": "^0.1.1",
     "@nuxtjs/plausible": "^0.2.1",
-    "@types/node": "^20.1.2",
+    "@types/node": "^20.1.5",
     "eslint": "^8.40.0",
-    "nuxt": "^3.4.3",
+    "nuxt": "^3.5.0",
     "release-it": "^15.10.3",
     "typescript": "^5.0.4",
     "vite-plugin-inspect": "^0.7.26",
-    "vue": "^3.2.47"
+    "vue": "^3.3.2"
   },
   "pnpm": {
     "peerDependencyRules": {