Skip to content

Commit

Permalink
feat: improved Nuxt DevTools integration and layout (#113)
Browse files Browse the repository at this point in the history
harlan-zw authored Nov 22, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent f3458e3 commit 477beb4
Showing 12 changed files with 378 additions and 344 deletions.
57 changes: 38 additions & 19 deletions .playground/nuxt.config.ts
Original file line number Diff line number Diff line change
@@ -1,29 +1,56 @@
import { resolve } from 'node:path'
import { defineNuxtConfig } from 'nuxt/config'
import { extendUnocssOptions } from '@nuxt/devtools-ui-kit/unocss'
import { defineNuxtModule } from '@nuxt/kit'
import { startSubprocess } from '@nuxt/devtools-kit'
import NuxtOgImage from '../src/module'

export default defineNuxtConfig({
modules: [
'@vueuse/nuxt',
'@unocss/nuxt',
'@nuxt/ui',
'nuxt-icon',
NuxtOgImage,
// '@nuxt/devtools-edge',
function (options, nuxt) {
nuxt.hook('components:extend', (components) => {
const index = components.findIndex(c => c.name === 'NuxtWelcome')
components[index].mode = 'client'
})
},
/**
* Start a sub Nuxt Server for developing the client
*
* The terminal output can be found in the Terminals tab of the devtools.
*/
defineNuxtModule({
setup(_, nuxt) {
if (!nuxt.options.dev)
return

const subprocess = startSubprocess(
{
command: 'npx',
args: ['nuxi', 'dev', '--port', '3030'],
cwd: resolve(__dirname, '../client'),
},
{
id: 'nuxt-og-image:client',
name: 'Nuxt OG Image Client Dev',
},
)
subprocess.getProcess().stdout?.on('data', (data) => {
// eslint-disable-next-line no-console
console.log(` sub: ${data.toString()}`)
})

process.on('exit', () => {
subprocess.terminate()
})

// process.getProcess().stdout?.pipe(process.stdout)
// process.getProcess().stderr?.pipe(process.stderr)
},
}),
],
components: [
{
path: '~/components',
pathPrefix: false, // <-- this
pathPrefix: false,
},
],
unocss: extendUnocssOptions({}),
nitro: {
prerender: {
routes: [
@@ -41,14 +68,6 @@ export default defineNuxtConfig({

debug: false,

// hooks: {
// 'og-image:prerenderScreenshots'(queue) {
// queue.push({
// route: '/not-prerendered',
// })
// }
// },

devtools: true,

ogImage: {
96 changes: 1 addition & 95 deletions .playground/pages/index.vue
Original file line number Diff line number Diff line change
@@ -59,100 +59,6 @@ watch([color, title], () => {
<template>
<div class="px-7 my-5">
<OgImage description="My description of the home page." theme-color="#b5ffd6" />
<div class="mb-10 xl:grid grid-cols-3 gap-10 justify-center max-w-7xl mx-auto">
<div>
<h2 class="text-2xl mb-10 ">
Prerendered at build time.
</h2>
<h3 class="text-lg font-bold mb-3">
Browser Screenshot
</h3>
<div class="lg:grid grid-cols-1 gap-5">
<div>
<NuxtLink external no-prefetch to="/browser/delayed/__og_image__/og.png" target="_blank">
<div class="mb-2">
Delayed Screenshot
</div>
<img :src="`${host}browser/delayed/__og_image__/og.png`" width="400" height="210" class="rounded">
</NuxtLink>
</div>
<div>
<NuxtLink external no-prefetch to="/browser/component/__og_image__/og.png" target="_blank">
<div class="mb-2">
Vue Component
</div>
<img :src="`${host}browser/component/__og_image__/og.png`" width="400" height="210" class="rounded">
</NuxtLink>
</div>
</div>
<hr class="my-10">
<h2 class="text-lg font-bold mb-3">
Satori
</h2>
<div class="lg:grid grid-cols-1 gap-5">
<NuxtLink external no-prefetch to="/satori/static/__og_image__/og.png" target="_blank">
<div class="mb-2">
Default template
</div>
<img :src="`${host}satori/static/__og_image__/og.png`" width="400" height="210" class="rounded">
</NuxtLink>
<NuxtLink external no-prefetch to="/satori/with-options/__og_image__/og.png" target="_blank">
<div class="mb-2">
Default with options
</div>
<img :src="`${host}satori/with-options/__og_image__/og.png`" width="400" height="210" class="rounded">
</NuxtLink>
<NuxtLink external no-prefetch to="/satori/image/__og_image__/og.png" target="_blank">
<div class="mb-2">
Image
</div>
<img :src="`${host}satori/image/__og_image__/og.png`" width="400" height="210" class="rounded">
</NuxtLink>
<NuxtLink external no-prefetch to="/satori/custom-font/__og_image__/og.png" target="_blank">
<div class="mb-2">
Custom Font
</div>
<img :src="`${host}satori/custom-font/__og_image__/og.png`" width="400" height="210" class="rounded">
</NuxtLink>
</div>
</div>
<div class="col-span-2">
<h2 class="text-2xl mb-5 ">
Generated at runtime.
</h2>
<p class="italic opacity-70 text-xs mb-10">
Note: These may break as I'm on the free Vercel tier
</p>
<h3 class="text-lg font-bold mb-3">
Satori
</h3>
<div class="lg:grid grid-cols-1 gap-5">
<NuxtLink external no-prefetch to="/satori/time/__og_image__/og.png" target="_blank">
<div class="mb-2">
Current time <span class="text-xs opacity-70">updates every 15 seconds</span>
</div>
<img :src="`${host}satori/time/__og_image__/og.png?description=Generated+at+runtime&title=The+time+is+${time}`" width="800" height="420" class="rounded">
</NuxtLink>
<div>
<div class="mb-2">
Tailwind - Custom Props Example
</div>
<div>
<label>Background Colour
<input v-model="color" type="text" class="border-1 border-gray-200 px-2 py-1 mb-1">
</label>
</div>
<div>
<label>Title
<input v-model="title" type="text" class="border-1 border-gray-200 px-2 py-1 mb-1">
</label>
</div>
<NuxtLink external no-prefetch to="/satori/tailwind/__og_image__/og.png" target="_blank">
<img :src="tailwindUrl" width="800" height="420" class="rounded">
</NuxtLink>
</div>
</div>
</div>
</div>
<img :src="`${host}satori/static/__og_image__/og.png`" width="400" height="210" class="rounded">
</div>
</template>
Loading

0 comments on commit 477beb4

Please sign in to comment.