|
| 1 | +<script setup lang="ts"> |
| 2 | +import { defu } from 'defu' |
| 3 | +import type { ReactiveHead } from '@unhead/vue' |
| 4 | +import type { NormalizedHeadTag } from '../../src/types' |
| 5 | +import { ogTags } from '../data/open-graph' |
| 6 | +
|
| 7 | +const props = defineProps<{ |
| 8 | + tags: NormalizedHeadTag[] |
| 9 | + matchedRouteFilepath?: string |
| 10 | +}>() |
| 11 | +
|
| 12 | +const missingTags = computed(() => { |
| 13 | + return ogTags.filter(define => !props.tags?.some(tag => tag.name === define.name)) |
| 14 | +}) |
| 15 | +
|
| 16 | +const missingRequiredTags = computed(() => { |
| 17 | + return missingTags.value.filter(i => i.suggestion === 'required') |
| 18 | +}) |
| 19 | +const missingRecommendedTags = computed(() => { |
| 20 | + return missingTags.value.filter(i => i.suggestion === 'recommended') |
| 21 | +}) |
| 22 | +
|
| 23 | +const mergedMissingTags = computed(() => { |
| 24 | + let data: Partial<ReactiveHead> = {} |
| 25 | + missingTags.value |
| 26 | + .forEach((tag) => { |
| 27 | + data = defu(data, tag.default) |
| 28 | + }) |
| 29 | + return data |
| 30 | +}) |
| 31 | +
|
| 32 | +const codeSnippet = computed(() => { |
| 33 | + const body = JSON.stringify(mergedMissingTags.value, null, 2) |
| 34 | + .replace(/"([^"]+)":/g, '$1:') |
| 35 | + .replace(/"/g, '\'') |
| 36 | + return `useHead(${body})` |
| 37 | +}) |
| 38 | +
|
| 39 | +const copy = useCopy() |
| 40 | +const openInEditor = useOpenInEditor() |
| 41 | +
|
| 42 | +const tabs = [ |
| 43 | + 'Missing Tags', |
| 44 | + 'Code Snippet', |
| 45 | +] |
| 46 | +const selectedTab = ref(tabs[0]) |
| 47 | +</script> |
| 48 | + |
| 49 | +<template> |
| 50 | + <template v-if="missingTags.length"> |
| 51 | + <NSectionBlock |
| 52 | + text="Missing Tags" |
| 53 | + :description="`${missingTags.length} missing tags (${missingRequiredTags.length} required, ${missingRecommendedTags.length} recommended)`" |
| 54 | + icon="carbon:warning-other" |
| 55 | + header-class="text-orange op100! [[open]_&]:text-inherit" |
| 56 | + :padding="false" |
| 57 | + > |
| 58 | + <div flex="~ wrap" mt--2 w-full flex-none> |
| 59 | + <template v-for="name, idx of tabs" :key="idx"> |
| 60 | + <button |
| 61 | + px4 py2 border="r t base" |
| 62 | + hover="bg-active" |
| 63 | + :class="name === selectedTab ? '' : 'border-b'" |
| 64 | + @click="selectedTab = name" |
| 65 | + > |
| 66 | + <div :class="name === selectedTab ? '' : 'op30' " capitalize> |
| 67 | + {{ name }} |
| 68 | + </div> |
| 69 | + </button> |
| 70 | + </template> |
| 71 | + <div border="b base" flex-auto /> |
| 72 | + </div> |
| 73 | + |
| 74 | + <NCard v-if="selectedTab === tabs[0]" grid="~ cols-[max-content_1fr]" m4 items-center justify-between of-hidden> |
| 75 | + <template v-for="item, index of missingTags" :key="index"> |
| 76 | + <div v-if="index" x-divider /> |
| 77 | + <div v-if="index" x-divider /> |
| 78 | + <div flex="~ gap-1 items-center" px4 py2> |
| 79 | + <div i-carbon-warning text-orange /> |
| 80 | + <NTextExternalLink |
| 81 | + op50 |
| 82 | + :link="item.docs" |
| 83 | + n="orange" |
| 84 | + > |
| 85 | + {{ item.name }} |
| 86 | + </NTextExternalLink> |
| 87 | + </div> |
| 88 | + <!-- TODO: use icons instead, show link to documentation --> |
| 89 | + <div w-full p2 op75> |
| 90 | + {{ item.description }} |
| 91 | + </div> |
| 92 | + </template> |
| 93 | + </NCard> |
| 94 | + <div v-else m4 flex="~ col gap-2"> |
| 95 | + <p flex="~ gap-1 wrap items-center"> |
| 96 | + <NButton |
| 97 | + icon="carbon-copy" n="xs" px-2 |
| 98 | + @click="copy(codeSnippet)" |
| 99 | + > |
| 100 | + Copy |
| 101 | + </NButton> |
| 102 | + the following code snippet and paste it into your |
| 103 | + <NButton |
| 104 | + v-if="matchedRouteFilepath" |
| 105 | + icon="carbon-launch" n="xs" px-2 |
| 106 | + @click="openInEditor(matchedRouteFilepath)" |
| 107 | + > |
| 108 | + page component |
| 109 | + </NButton> |
| 110 | + <span v-else>page component</span> |
| 111 | + to full fill the missing tags. |
| 112 | + </p> |
| 113 | + <NCard relative n-code-block> |
| 114 | + <NCodeBlock |
| 115 | + :code="codeSnippet" |
| 116 | + lang="ts" |
| 117 | + :lines="false" |
| 118 | + w-full of-auto p3 |
| 119 | + /> |
| 120 | + <div flex="~ gap-2" n="sm primary" absolute right-2 top-2> |
| 121 | + <NButton |
| 122 | + icon="carbon-copy" |
| 123 | + @click="copy(codeSnippet)" |
| 124 | + > |
| 125 | + Copy |
| 126 | + </NButton> |
| 127 | + </div> |
| 128 | + </NCard> |
| 129 | + </div> |
| 130 | + </NSectionBlock> |
| 131 | + </template> |
| 132 | +</template> |
0 commit comments