Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/l422y/nuxt-dynamic-social-images
Nuxt DSI (Dynamic Social Images) generates dynamic social sharing images based on meta tags and specified options
https://github.com/l422y/nuxt-dynamic-social-images
dynamic-image-generator module nuxt nuxt3 nuxtjs open-graph-generator seo social social-media social-sharing vue
Last synced: about 1 month ago
JSON representation
Nuxt DSI (Dynamic Social Images) generates dynamic social sharing images based on meta tags and specified options
- Host: GitHub
- URL: https://github.com/l422y/nuxt-dynamic-social-images
- Owner: L422Y
- Created: 2022-11-21T05:44:39.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-29T06:47:05.000Z (11 months ago)
- Last Synced: 2024-10-04T01:10:27.950Z (3 months ago)
- Topics: dynamic-image-generator, module, nuxt, nuxt3, nuxtjs, open-graph-generator, seo, social, social-media, social-sharing, vue
- Language: TypeScript
- Homepage:
- Size: 1.09 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nuxt DSI (Dynamic Social Images)
 
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](https://www.npmjs.com/package/nuxt-head-ex) :)
# Installation
```shell
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:
```js
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:
```js
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}`
}
]
})
```
See fabric's [registerFont](http://fabricjs.com/fabric-intro-part-4#custom-fonts) method to learn more about configuring fonts.
## Extending / Customization
You can check out the [playground/src/dsi-handler.get.ts](./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:
```js
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](./playground) in development mode.
## Credits
Made with 💚 by [Larry Williamson](https://l422y.com) / @l422y