docs: add feathers-utils successor notice

Point users to feathers-utils as the successor of feathers-hooks-common,
via a callout in the README and a site-wide banner in the VitePress docs.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Author: fratzinger

README.md

@@ -13,6 +13,14 @@
 
 A collection of useful hooks to use with Feathers services.
 
+> [!IMPORTANT]
+> **feathers-hooks-common has a successor: [feathers-utils](https://utils.feathersjs.com/)**
+>
+> `feathers-utils` provides a modern and improved set of hooks and utilities for FeathersJS applications. New projects should use it instead of `feathers-hooks-common`.
+>
+> - Documentation: [utils.feathersjs.com](https://utils.feathersjs.com/)
+> - GitHub: [feathersjs/feathers-utils](https://github.com/feathersjs/feathers-utils)
+
 > NOTE: This is the version for Feathers v5. For Feathers v4 use [feathers-hooks-common v6](https://github.com/feathersjs-ecosystem/feathers-hooks-common/tree/crow)
 
 ```

docs/.vitepress/theme/SuccessorBanner.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="successor-banner">
+    <p>
+      <strong>feathers-hooks-common</strong> has a successor:
+      <a href="https://utils.feathersjs.com/">feathers-utils</a>.
+      <span class="successor-banner-long">Check out the new docs for a modern, improved set of hooks and utilities.</span>
+    </p>
+  </div>
+</template>
+
+<style>
+:root {
+  --vp-layout-top-height: 48px;
+}
+
+@media (min-width: 768px) {
+  :root {
+    --vp-layout-top-height: 40px;
+  }
+}
+</style>
+
+<style scoped>
+.successor-banner {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: var(--vp-z-index-layout-top);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--vp-layout-top-height);
+  padding: 0 16px;
+  background-color: var(--vp-c-brand);
+  color: #fff;
+  font-size: 14px;
+  line-height: 1.3;
+  text-align: center;
+}
+
+.successor-banner p {
+  margin: 0;
+}
+
+.successor-banner a {
+  color: inherit;
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.successor-banner a:hover {
+  opacity: 0.85;
+}
+
+.successor-banner-long {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .successor-banner-long {
+    display: inline;
+  }
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -1,6 +1,13 @@
+import { h } from 'vue'
 import Theme from 'vitepress/theme'
+import SuccessorBanner from './SuccessorBanner.vue'
 import '../style/main.css'
 
 export default {
   ...Theme,
+  Layout() {
+    return h(Theme.Layout, null, {
+      'layout-top': () => h(SuccessorBanner),
+    })
+  },
 }