Skip to content

Nuxt DSI (Dynamic Social Images) generates dynamic social sharing images based on meta tags and specified options

Notifications You must be signed in to change notification settings

L422Y/nuxt-dynamic-social-images

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

66 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Nuxt DSI (Dynamic Social Images)

npm wakatime

Sets up an endpoint (default: /socialImage) that takes a path GET parameter and will generate a dynamic social share image based on specified meta tags, and other configuration.

The path parameter tells the module what path on the website you are rendering the image for, i.e.: /socialImage?path=/blog/my-first/post

Generated images are cached, and the cache is cleared when your application restarts.

This module works well with nuxt-head-ex :)

Installation

yarn add nuxt-dsi

Add the module to your nuxt.config.ts:

modules: ['nuxt-dsi'],

Configuration

Add the module to your nuxt.config.ts and add optional configuration:

import {DSIHandler} from '~playground/src/dsi-handler.get.ts'

export default defineNuxtConfig({
  modules: [
    'nuxt-dsi'
  ],
  dsi: {
    // where the image endpoint will listen
    path: '/socialImage',
    // static text placed at the top of the image
    fixedText: 'Nuxt: Dynamic Social Images',
    // set your custom render handler/function
    customHandler: DSIHandler,
    // set up your custom fonts
    fonts: [
      { path: 'playground/fonts/ConnectionIi-2wj8.otf', 
        options: { family: 'connectionii' } },
      { path: 'playground/fonts/Barlow/Barlow-thin.ttf', 
        options: { family: 'barlowthin', fontWeight: '100' } }
    ]
  }
})

In your app.vue, set up your default og:image reflectively:

<script setup>
  import {useHead} from "#head"
  import {useRoute, useRuntimeConfig} from "#app";

  const config = useRuntimeConfig().public.dsi
  const route = useRoute()
  
  useHead({
    meta: [
        {
          property: 'og:image',
          content: () => `${config.path}?path=${route.fullPath}`
        }
    ]
  })

</script>

See fabric's registerFont method to learn more about configuring fonts.

Extending / Customization

You can check out the playground/src/dsi-handler.get.ts for an example on how to add your own render function that overrides the default, giving you complete control over what your cards look like!

If you want to use 'clean' versions of strings (i.e. a barebones title like "Homepage" instead of "MySite: Homepage"), you can specify the meta tag as such:

useHead({
  title: 'This is my Test Page',
  meta:[
    {name: 'clean:title', content: "Test Page" },
  ]
})

Examples

Development

  • Run npm run dev:prepare to generate type stubs.
  • Use npm run dev to start playground in development mode.

Credits

Made with 💚 by Larry Williamson / @l422y

About

Nuxt DSI (Dynamic Social Images) generates dynamic social sharing images based on meta tags and specified options

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published