Merge branch 'main' into clean-urls-for-alpha

docs/guide/getting-started.md

@@ -28,6 +28,39 @@ Add VitePress and Vue as dev dependencies for the project.
 $ yarn add --dev vitepress vue
 ```
 
+::: details Getting missing peer deps warnings?
+`@docsearch/js` has certain issues with its peer dependencies. If you see some commands failing due to them, you can try this workaround for now:
+
+On Yarn v2/v3, add this inside your rc file (`.yarnrc.yml` by default):
+
+```yaml
+packageExtensions:
+  '@docsearch/react@*':
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      'react':
+        optional: true
+      'react-dom':
+        optional: true
+```
+
+On PNPM, add this in your `package.json`:
+
+```json
+"pnpm": {
+  "peerDependencyRules": {
+    "ignoreMissing": [
+      "@types/react",
+      "react",
+      "react-dom"
+    ]
+  }
+}
+```
+
+:::
+
 Create your first document.
 
 ```bash

src/client/theme-default/components/VPDocFooterLastUpdated.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref, watchEffect, onMounted } from 'vue'
+import { ref, computed, watchEffect, onMounted } from 'vue'
 import { useData } from 'vitepress'
 
 const { theme, page } = useData()
 
-const date = new Date(page.value.lastUpdated!)
-const isoDatetime = date.toISOString()
+const date = computed(() => new Date(page.value.lastUpdated!))
+const isoDatetime = computed(() => date.value.toISOString())
 const datetime = ref('')
 
 // set time on mounted hook because the locale string might be different
@@ -13,7 +13,7 @@ const datetime = ref('')
 // calculated at build time
 onMounted(() => {
   watchEffect(() => {
-    datetime.value = date.toLocaleString(window.navigator.language)
+    datetime.value = date.value.toLocaleString(window.navigator.language)
   })
 })
 </script>

src/client/theme-default/components/VPTeamMembersItem.vue

@@ -39,9 +39,9 @@ defineProps<{
         </div>
       </div>
     </div>
-    <div v-if="member.sponsor" class="sponsor">
-      <VPLink class="sponsor-link" :href="member.sponsor" no-icon>
-        <VPIconHeart class="sponsor-icon" /> Sponsor
+    <div v-if="member.sponsor" class="sp">
+      <VPLink class="sp-link" :href="member.sponsor" no-icon>
+        <VPIconHeart class="sp-icon" /> Sponsor
       </VPLink>
     </div>
   </article>
@@ -186,7 +186,7 @@ defineProps<{
   height: 56px;
 }
 
-.sponsor-link {
+.sp-link {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -199,14 +199,14 @@ defineProps<{
   transition: color 0.25s, background-color 0.25s;
 }
 
-.sponsor-link:hover,
-.sponsor-link:focus {
+.sp-link:hover,
+.sp-link:focus {
   outline: none;
   color: var(--vp-c-text-dark-1);
   background-color: var(--vp-c-sponsor);
 }
 
-.sponsor-icon {
+.sp-icon {
   margin-right: 8px;
   width: 16px;
   height: 16px;

src/node/markdownToVue.ts

@@ -98,7 +98,11 @@ export async function createMarkdownToVueRenderFn(
     const recordDeadLink = (url: string) => {
       console.warn(
         c.yellow(
-          `\n(!) Found dead link ${c.cyan(url)} in file ${c.white(c.dim(file))}`
+          `\n(!) Found dead link ${c.cyan(url)} in file ${c.white(
+            c.dim(file)
+          )}\nIf it is intended, you can use:\n    ${c.cyan(
+            `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`
+          )}`
         )
       )
       deadLinks.push(url)