Skip to content

Commit

Permalink
fix(devtools): more consistent Nuxt SEO UI
Browse files Browse the repository at this point in the history
  • Loading branch information
harlan-zw committed Dec 21, 2023
1 parent 8248453 commit 11873b3
Show file tree
Hide file tree
Showing 11 changed files with 849 additions and 583 deletions.
371 changes: 282 additions & 89 deletions client/app.vue

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions client/components/OCodeBlock.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import type { Lang } from 'shiki-es'
import { computed } from 'vue'
import { useClipboard } from '@vueuse/core'
import { renderCodeHighlight } from '../composables/shiki'
import { highlight } from '../composables/shiki'
const props = withDefaults(
defineProps<{
Expand All @@ -27,8 +27,8 @@ function copy() {
}
const rendered = computed(() => {
const code = renderCodeHighlight(props.code, props.lang)
return props.transformRendered ? props.transformRendered(code.value || '') : code.value
const code = highlight(props.code, props.lang)
return props.transformRendered ? props.transformRendered(code || '') : code
})
</script>

Expand Down
12 changes: 12 additions & 0 deletions client/composables/fetch.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { globalRefreshTime } from '../util/logic'

export function fetchGlobalDebug() {
return useAsyncData<{
nitroOrigin: string
runtimeConfig: any
}>(() => {
return appFetch.value('/__schema-org__/debug.json')
}, {
watch: [globalRefreshTime],
})
}
10 changes: 5 additions & 5 deletions client/composables/rpc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,11 @@ import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
import { ref } from 'vue'
import type { NuxtDevtoolsClient } from '@nuxt/devtools-kit/dist/types'
import type { $Fetch } from 'nitropack'
import type { Unhead } from '@unhead/schema'
import { refreshSources, schemaOrgGraph } from './state'
import { schemaOrgGraph } from '../util/logic'

export const devtools = ref<NuxtDevtoolsClient>()

export const appFetch = ref<$Fetch>()
export const unheadInstance = ref<Unhead>()

onDevtoolsClientConnected(async (client) => {
appFetch.value = client.host.app.$fetch
Expand All @@ -20,6 +18,8 @@ onDevtoolsClientConnected(async (client) => {
.filter(t => t.key === 'schema-org-graph')[0]?.innerHTML
}, 100)
})
unheadInstance.value = head
refreshSources()
schemaOrgGraph.value = (await head.resolveTags())
.filter(t => t.key === 'schema-org-graph')[0]?.innerHTML
// unheadInstance.value = head
// refreshSources()
})
51 changes: 20 additions & 31 deletions client/composables/shiki.ts
Original file line number Diff line number Diff line change
@@ -1,39 +1,28 @@
import type { Highlighter, Lang } from 'shiki-es'
import { getHighlighter } from 'shiki-es'
import { computed, ref, unref } from 'vue'
import type { MaybeRef } from '@vueuse/core'
import { devtools } from './rpc'
import { ref } from 'vue'
import { useColorMode } from '#imports'

export const shiki = ref<Highlighter>()

export function loadShiki() {
// Only loading when needed
return getHighlighter({
themes: [
'vitesse-dark',
'vitesse-light',
],
langs: [
'css',
'javascript',
'typescript',
'html',
'vue',
'vue-html',
'bash',
'diff',
],
}).then((i) => {
shiki.value = i
})
}
// TODO: Only loading when needed
getHighlighter({
themes: [
'vitesse-dark',
'vitesse-light',
],
langs: [
'html',
'json',
],
}).then((i) => { shiki.value = i })

export function renderCodeHighlight(code: MaybeRef<string>, lang?: Lang) {
return computed(() => {
const colorMode = devtools.value?.colorMode || 'light'
return shiki.value!.codeToHtml(unref(code), {
lang,
theme: colorMode === 'dark' ? 'vitesse-dark' : 'vitesse-light',
}) || ''
export function highlight(code: string, lang: Lang) {
const mode = useColorMode()
if (!shiki.value)
return code
return shiki.value.codeToHtml(code, {
lang,
theme: mode.value === 'dark' ? 'vitesse-dark' : 'vitesse-light',
})
}
25 changes: 8 additions & 17 deletions client/composables/state.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,8 @@
import { ref } from 'vue'
import type { ModuleRuntimeConfig } from 'nuxt-site-config'
import { appFetch, unheadInstance } from './rpc'

export const schemaOrgGraph = ref<any>(null)

export const data = ref<{
nitroOrigin: string
runtimeConfig: ModuleRuntimeConfig
} | null>(null)

export async function refreshSources() {
schemaOrgGraph.value = (await unheadInstance.value!.resolveTags())
.filter(t => t.key === 'schema-org-graph')[0]?.innerHTML
if (appFetch.value)
data.value = await appFetch.value('/__schema-org__/debug.json')
}
// import {globalRefreshTime} from "~/client/util/logic";
//
//
// export async function refreshSources() {
// schemaOrgGraph.value = (await unheadInstance.value!.resolveTags())
// .filter(t => t.key === 'schema-org-graph')[0]?.innerHTML
// globalRefreshTime.value = Date.now()
// }
1 change: 1 addition & 0 deletions client/nuxt.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export default defineNuxtConfig({
ssr: false,
modules: [
DevtoolsUIKit,
'nuxt-icon',
],
devtools: {
enabled: false,
Expand Down
6 changes: 6 additions & 0 deletions client/plugins/floating-vue.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import FloatingVue from 'floating-vue'
import { defineNuxtPlugin } from '#imports'

export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(FloatingVue)
})
21 changes: 21 additions & 0 deletions client/util/logic.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { computed, ref } from 'vue'
import { useDebounceFn } from '@vueuse/core'
import { withBase } from 'ufo'

export const schemaOrgGraph = ref<any>(null)
export const refreshTime = ref(Date.now())
export const globalRefreshTime = ref(Date.now())
export const hostname = window.location.host
export const path = ref('/')
export const query = ref()
export const base = ref('/')

export const refreshSources = useDebounceFn(() => {
refreshTime.value = Date.now()
}, 200)

export const slowRefreshSources = useDebounceFn(() => {
refreshTime.value = Date.now()
}, 1000)

export const host = computed(() => withBase(base.value, `${window.location.protocol}//${hostname}`))
23 changes: 12 additions & 11 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "nuxt-schema-org",
"type": "module",
"version": "3.2.3",
"packageManager": "pnpm@8.12.0",
"packageManager": "pnpm@8.12.1",
"description": "Schema.org for Nuxt",
"author": "Harlan Wilton <harlan@harlanzw.com>",
"license": "MIT",
Expand Down Expand Up @@ -47,31 +47,32 @@
"test": "vitest"
},
"dependencies": {
"@nuxt/devtools-kit": "^1.0.5",
"@nuxt/devtools-ui-kit": "^1.0.5",
"@nuxt/devtools-kit": "^1.0.6",
"@nuxt/devtools-ui-kit": "^1.0.6",
"@nuxt/kit": "^3.8.2",
"@unhead/schema-org": "^1.8.9",
"nuxt-site-config": "^1.6.7",
"nuxt-site-config-kit": "^1.6.7",
"floating-vue": "2.0.0-beta.24",
"nuxt-site-config": "^2.1.2",
"nuxt-site-config-kit": "^2.1.2",
"pathe": "^1.1.1",
"shiki-es": "^0.14.0",
"sirv": "^2.0.3"
"sirv": "^2.0.4"
},
"devDependencies": {
"@antfu/eslint-config": "^2.4.5",
"@antfu/eslint-config": "^2.4.6",
"@nuxt/module-builder": "^0.5.4",
"@nuxt/schema": "^3.8.2",
"@nuxt/test-utils": "^3.8.1",
"@nuxt/test-utils": "^3.9.0",
"@nuxt/ui": "^2.11.1",
"@nuxtjs/eslint-config-typescript": "^12.1.0",
"@nuxtjs/i18n": "^8.0.0-rc.9",
"@nuxtjs/i18n": "^8.0.0-rc.11",
"bumpp": "^9.2.1",
"cheerio": "1.0.0-rc.12",
"eslint": "8.55.0",
"eslint": "8.56.0",
"nuxt": "^3.8.2",
"nuxt-icon": "^0.6.7",
"typescript": "^5.3.3",
"vitest": "1.0.4"
"vitest": "1.1.0"
},
"build": {
"externals": [
Expand Down
Loading

0 comments on commit 11873b3

Please sign in to comment.