feat: ✨ enhanceIslands API for Vue Islands only

.github/ISSUE_TEMPLATE/config.yml

@@ -4,8 +4,8 @@ contact_links:
     url: https://iles-docs.netlify.app/faqs/troubleshooting
     about: 'Please check the most common configuration problems before opening an issue.'
   - name: Discord Chat
-    url: https://discord.com/channels/804011606160703521/900707742203920394
-    about: 'Discuss with other users in the #iles channel of the Vite.js Discord server.'
+    url: https://discord.gg/p7rXjFcwXa
+    about: 'Discuss with other users in the #iles channel of the îles Discord server.'
   - name: Questions & Discussions
     url: https://github.com/ElMassimo/iles/discussions
     about: Use GitHub discussions for questions and discussions.

.github/workflows/build.yml

@@ -35,6 +35,9 @@ jobs:
       - name: Build
         run: pnpm build:all
 
+      - name: Build Blog Site
+        run: pnpm blog:build
+
       - name: Tests
         run: pnpm test
 
@@ -54,7 +57,7 @@ jobs:
       CI: true
 
     runs-on: ubuntu-latest
-    container: cypress/included:9.2.0
+    container: cypress/included:13.13.2
     steps:
       - uses: actions/checkout@v2
 

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
+  "prettier.enable": false,
   "files.exclude": {
     "**/dist": true
   },

README.md

@@ -96,5 +96,5 @@ Visit the [documentation website][docs] to check out the [guides][guide] and sea
 [VitePress]: https://vitepress.vuejs.org/
 [vite-ssg]: https://github.com/antfu/vite-ssg
 [vue-router]: https://next.router.vuejs.org/
-[@unhead/vue]: https://github.com/unjs/unhead
+[@unhead/vue]: https://unhead.unjs.io/
 

docs/composables.d.ts

@@ -5,6 +5,7 @@ declare global {
   const definePageComponent: typeof import('iles')['definePageComponent']
   const useDocuments: typeof import('iles')['useDocuments']
   const useHead: typeof import('iles')['useHead']
+  const useSeoMeta: typeof import('iles')['useSeoMeta']
   const usePage: typeof import('iles')['usePage']
   const useRoute: typeof import('iles')['useRoute']
 }

docs/cypress/e2e/sidebar.cypress.cy.js

@@ -1,4 +1,4 @@
-import { visit, navigateTo, goBackHome, assertPage, waitForHydration } from './helpers'
+import { visit, visitHome, navigateTo, goBackHome, assertPage, waitForHydration } from './helpers'
 
 describe('Sidebar Toggle', () => {
   const sidebar = () =>
@@ -24,23 +24,26 @@ describe('Sidebar Toggle', () => {
     sidebarToggle().should('not.be.visible')
   })
 
-  test.skipIf(process.env.CI)('can open in mobile', () => {
-    visitHome()
-    cy.viewport(500, 720)
-    visit('/guide/frameworks')
-    openSidebar()
-    closeSidebar()
-
-    // Ensure Turbo reactivates the islands.
-    openSidebar()
-    sidebar().contains('Config').click()
-
-    // Give Turbo time to replace the body.
-    waitForHydration()
-    assertPage({ title: 'Config' })
-    sidebar().should('not.be.visible')
-
-    openSidebar()
-    closeSidebar()
+  it('can open in mobile', () => {
+    cy.skipIf(process.env.CI)
+    it('can open in mobile', () => {
+      visitHome()
+      cy.viewport(500, 720)
+      visit('/guide/frameworks')
+      openSidebar()
+      closeSidebar()
+
+      // Ensure Turbo reactivates the islands.
+      openSidebar()
+      sidebar().contains('Config').click()
+
+      // Give Turbo time to replace the body.
+      waitForHydration()
+      assertPage({ title: 'Config' })
+      sidebar().should('not.be.visible')
+
+      openSidebar()
+      closeSidebar()
+    })
   })
 })

docs/cypress/support/commands.js

@@ -23,3 +23,10 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+Cypress.Commands.add(
+  'skipIf',
+  (expression) => {
+    if (expression) context.skip.bind(context)();
+  }
+);

docs/iles.config.ts

@@ -5,6 +5,7 @@ import headings from '@islands/headings'
 import icons from '@islands/icons'
 import prism from '@islands/prism'
 import pwa from '@islands/pwa'
+import excerpt from '@islands/excerpt'
 import reactivityTransform from '@vue-macros/reactivity-transform/vite'
 
 import UnoCSS from 'unocss/vite'
@@ -16,13 +17,21 @@ const { title, description } = site
 
 export default defineConfig({
   siteUrl: 'https://iles-docs.netlify.app',
+
+  extendFrontmatter(frontmatter, filename) {
+    if (filename.includes('/recipes/') && !filename.includes('/recipes/index.vue')) {
+      frontmatter.layout = 'recipe'
+    }
+  },
+
   turbo: true,
   jsx: 'preact',
   debug: false,
   modules: [
     headings(),
     icons(),
     prism(),
+    excerpt({ maxLength: 140 }),
     lastUpdated(),
     pwa({
       manifestFilename: 'pwa-manifest.json',
@@ -59,7 +68,14 @@ export default defineConfig({
   ],
   markdown: {
     rehypePlugins: [
-      'rehype-external-links',
+      [
+        'rehype-external-links',
+        {
+          target: '_blank',
+          rel: ['noopener'],
+          test: (node: any) => /^https?:\/\//.test(node.properties.href),
+        },
+      ],
     ],
   },
   ssg: {

docs/package.json

@@ -19,6 +19,7 @@
   "devDependencies": {
     "@iconify-json/bx": "^1.1.10",
     "@iconify-json/heroicons-outline": "^1.1.10",
+    "@islands/excerpt": "workspace:*",
     "@islands/headings": "workspace:*",
     "@islands/icons": "workspace:*",
     "@islands/prism": "workspace:*",

docs/scripts/test-cypress

@@ -8,8 +8,8 @@ echo '== Starting server =='
 pnpm run preview &
 
 echo '== Waiting for server to respond... =='
-pnpx wait-on http-get://localhost:3050 --delay 1000 --timeout 15000
+pnpx wait-on http-get://[::1]:3050 --delay 1000 --timeout 15000
 
 echo '== Server ready! =='
 
-pnpx cypress@10.6.0 run && echo '== Finished! =='
+pnpx cypress@13.13.2 run && echo '== Finished! =='

docs/src/components/AutoImported.vue

@@ -1,5 +1,5 @@
 <template>
   <Tip title="Composables are auto-imported">
-    You don't need to import <kbd>usePage</kbd>, <kbd>useRoute</kbd>, <kbd>useHead</kbd>, or <kbd>definePageComponent</kbd>.
+    You don't need to import <kbd>usePage</kbd>, <kbd>definePageComponent</kbd>, <kbd>useRoute</kbd>, <kbd>useHead</kbd> or <kbd>useSeoMeta</kbd>.
   </Tip>
 </template>

docs/src/components/MetaTags.vue

@@ -8,24 +8,36 @@ const { frontmatter, site } = usePage()
 let imageUrl = $computed(() => `${site.url}${frontmatter.image || bannerSrc}`)
 
 const isProd = import.meta.env.PROD
+
+const author = frontmatter.author || site.author
+const keywords = (frontmatter.tags || site.tags)?.join(', ')
+
+// Manage head meta with useSeoMeta
+useSeoMeta({
+  author,
+  keywords,
+
+  // Open Graph / Facebook / LinkedIn / Discord
+  ogType: 'website',
+  ogImage: imageUrl,
+  ogImageAlt: 'Îles',
+  ogLocale: 'en_US',
+
+  // Twitter (X)
+  twitterCard: 'summary_large_image',
+  twitterImage: imageUrl,
+  twitterImageAlt: 'Îles',
+  twitterSite: site.twitterHandle,
+  twitterCreator: site.authorHandle,
+})
 </script>
 
 <template>
   <Head>
-    <meta property="author" :content="site.author">
-    <meta property="keywords" :content="site.tags.join(', ')">
     <meta property="HandheldFriendly" content="True">
     <meta property="MobileOptimized" content="320">
     <meta http-equiv="cleartype" content="on">
     <meta name="theme-color" content="#5C7E8F">
-    <meta property="og:type" content="website">
-    <meta property="og:locale" content="en_US">
-    <meta property="og:image" :content="imageUrl">
-    <meta property="twitter:image" :content="imageUrl">
-    <meta property="twitter:image:alt" content="îles">
-    <meta property="twitter:site" :content="`@${site.twitterHandle}`">
-    <meta property="twitter:creator" :content="`@${site.authorHandle}`">
-    <meta property="twitter:card" content="summary_large_image">
     <link rel="icon" type="image/svg+xml" :href="logoSrc">
     <link rel="shortcut icon" :href="faviconSrc">
     <link rel="mask-icon" :href="logoSrc" color="#5C7E8F">

docs/src/components/MetaTagsRecipe.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getPosts } from '~/logic/recipes'
+import { getImage } from '~/logic/utils';
+
+const posts = getPosts()
+const { page, site } = usePage()
+
+const currentIndex = computed(() =>
+  posts.value.findIndex((p) => p.href === page.value.href),
+)
+const post = computed(() => currentIndex.value > -1 ? posts.value[currentIndex.value] : posts.value[0])
+
+const title = computed(() => {
+  return post.value?.title
+})
+
+const ogImage = computed(() => {
+  const image = getImage(post.value?.image)
+  return `${site.url}${image}`
+})
+
+const author = computed(() => {
+  return post.value?.author
+})
+
+const twitterCreator = computed(() => {
+  return post.value?.twitter
+})
+
+useSeoMeta({
+  author,
+
+  // Open Graph / Facebook / LinkedIn / Discord
+  ogImage,
+  ogImageAlt: title,
+
+  // Twitter (X)
+  twitterImage: ogImage,
+  twitterImageAlt: title,
+  twitterCreator,
+})
+</script>
+
+<template>
+  <div></div>
+</template>

docs/src/components/PostDate.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps<{ date: string | Date }>()
+
+function toDate(date: string | Date) {
+  return date instanceof Date ? date : new Date(date)
+}
+
+function getDateTime(date: string | Date) {
+  return toDate(date).toISOString()
+}
+
+function formatDate(dateStr: string | Date) {
+  const date = toDate(dateStr)
+  date.setUTCHours(12)
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+}
+</script>
+
+<template>
+  <dl>
+    <dt class="sr-only">Published on</dt>
+    <dd>
+      <time :datetime="getDateTime(date)">{{ formatDate(date) }}</time>
+    </dd>
+  </dl>
+</template>

docs/src/components/ReloadPrompt.vue

@@ -1,5 +1,5 @@
 <script client:load lang="ts">
-import { OnLoadFn } from 'iles'
+import type { OnLoadFn } from 'iles'
 import { registerSW } from 'virtual:pwa-register'
 
 let refreshSW: ((reloadPage?: boolean) => Promise<void>) | undefined

docs/src/layouts/recipe.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getPosts } from '~/logic/recipes'
+
+const posts = getPosts()
+const { page } = usePage()
+
+const currentIndex = computed(() =>
+  posts.value.findIndex((p) => p.href === page.value.href),
+)
+const post = computed(() => posts.value[currentIndex.value])
+</script>
+
+<template layout="default">
+  <h1 v-if="post">
+    {{ post.title }}
+  </h1>
+  <slot/>
+</template>
+
+<style scoped>
+.prose h1#introduction {
+    font-size: 1.5em;
+    font-weight: 700;
+    line-height: 1.3333333;
+    margin-bottom: 1em;
+    margin-top: 1.8em;
+}
+</style>

docs/src/logic/recipes.ts

@@ -0,0 +1,19 @@
+import type { Document, PageComponent } from 'iles'
+import { computed } from 'vue'
+
+export interface Post extends PageComponent {
+  date: Date
+  author: string
+  title: string
+  twitter: string
+  image: string
+}
+
+function byDate(a: Document<Post>, b: Document<Post>) {
+  return Number(new Date(b.date)) - Number(new Date(a.date))
+}
+
+export function getPosts() {
+  const posts = useDocuments<Post>('~/pages/recipes/*.{md,mdx}')
+  return computed(() => posts.value.sort(byDate))
+}

docs/src/logic/utils.ts

@@ -18,3 +18,10 @@ export function joinUrl (base: string, path: string): string {
   if (path.startsWith('#')) return path
   return `${base}${path.startsWith('/') ? path.slice(1) : path}`
 }
+
+export function getImage(fileName: string) {
+  const modules = import.meta.glob('@/assets/recipes/**/*.{jpg,png,svg}', { eager: true, import: 'default' })
+  const moduleKeys = Object.keys(modules)
+  const fileSrc = moduleKeys.find(key => key.endsWith(fileName))
+  return fileSrc ? modules[fileSrc] : ''
+}