Merge branch 'main' of github.com:nuxt-themes/alpine

Author: Tahul

.docs/content/1.index.md

@@ -21,7 +21,6 @@ Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulu
 ::gallery
 ---
 images:
-  - /alpine-1.webp
   - /alpine-1.webp
   - /alpine-2.webp
   - /alpine-0.webp

README.md

@@ -5,6 +5,8 @@
 [![npm version][npm-version-src]][npm-version-href]
 [![License][license-src]][license-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+[![Nuxt Studio][nuxt-studio-src]][nuxt-studio-href]
 [![Volta][volta-src]][volta-href]
 
 The minimalist blog theme, powered by [Nuxt](https://nuxt.com).
@@ -47,5 +49,12 @@ npx nuxi@latest init -t themes/alpine
 [license-src]: https://img.shields.io/github/license/nuxt-themes/alpine.svg?style=flat&colorA=18181B&colorB=28CF8D
 [license-href]: https://github.com/nuxt-themes/alpine/blob/main/LICENSE
 
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?&logo=nuxt.js
+[nuxt-href]: https://nuxt.com
+
+[nuxt-studio-src]: https://img.shields.io/badge/Open%20in%20Nuxt%20Studio-18181B?&logo=nuxt.js&logoColor=3BB5EC
+[nuxt-studio-href]: https://nuxt.studio/templates/alpine
+
 [volta-src]: https://user-images.githubusercontent.com/904724/209143798-32345f6c-3cf8-4e06-9659-f4ace4a6acde.svg
 [volta-href]: https://volta.net/nuxt-themes/alpine?utm_source=readme_alpine

components/ColorModeSwitch.vue

@@ -12,9 +12,18 @@ const onClick = () => {
 <template>
   <button aria-label="Color Mode" @click="onClick">
     <ColorScheme>
-      <Icon v-if="colorMode.preference === 'dark'" name="uil:moon" />
-      <Icon v-else-if="colorMode.preference === 'light'" name="uil:sun" />
-      <Icon v-else name="uil:desktop" />
+      <template v-if="colorMode.preference === 'dark'">
+        <Icon name="uil:moon" />
+        <span class="sr-only">Dark mode</span>
+      </template>
+      <template v-else-if="colorMode.preference === 'light'">
+        <Icon name="uil:sun" />
+        <span class="sr-only">Light mode</span>
+      </template>
+      <template v-else>
+        <Icon name="uil:desktop" />
+        <span class="sr-only">System mode</span>
+      </template>
     </ColorScheme>
   </button>
 </template>

layouts/article.vue

@@ -26,6 +26,14 @@
 const { page } = useContent()
 const route = useRoute()
 
+if (page.value && page.value.cover) {
+  useHead({
+    meta: [
+      { property: 'og:image', content: page.value.cover }
+    ]
+  })
+}
+
 const parentPath = computed(
   () => {
     const pathTabl = route.path.split('/')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt-themes/alpine",
-  "version": "1.3.1",
+  "version": "1.4.1",
   "type": "module",
   "exports": "./nuxt.config.ts",
   "files": [
@@ -30,7 +30,7 @@
     "@nuxt-themes/tokens": "^1.7.3",
     "@nuxt-themes/typography": "^0.8.0",
     "@nuxt/content": "^2.4.3",
-    "@nuxthq/studio": "^0.7.1",
+    "@nuxthq/studio": "^0.7.2",
     "@vueuse/core": "^9.12.0",
     "ufo": "^1.0.1"
   },