404 Not found on image page

[tnylea]

Hey man 👋

Cool astro integration. I was trying to get this installed and working on a project of mine and was not able to get the images to load correctly. You'll have to excuse me because I'm still fairly new to Astro, anyway, each time I try and hit the route on my local server:

localhost:3000/custom-open-graph/html/introduction.png I get a 404 response back.

I've created a new file located at: pages/custom-open-graph/html/[slug].ts with the following contents:

import {OGDynamicImageRoute} from '@cyberkoalastudios/og-image-generator';
import {getCollection} from "astro:content";


export const {getStaticPaths, get} = OGDynamicImageRoute({
    // Tell us the name of your dynamic route segment.
    // In this case it’s `route`, because the file is named `index.ts`.
    param: 'html',

    // (Optional) CollectionEntries (array of content collection) 
    // If you want generate only filtered posts from collection
    collection: await getCollection('html'),
    
    // A collection of pages to generate images for.
    // This can be any map of paths to data, not necessarily a glob result.
    
    pages: await import.meta.glob('/src/content/html/*.md', {eager: true}),
    // For each page, this callback will be used to customize the OpenGraph
    // image. For example, if `pages` was passed a glob like above, you
    // could read values from frontmatter.
    getImageOptions: (path, page) => ({
        title: page.frontmatter.title,
        description: page.frontmatter.description,
        logo: {
            path: './public/favicon.svg',
        },
        backgroundImage: {
            url: page.frontmatter.image,
            alpha: 0.2,
            blurStrength: 3,
        },
        // There are a bunch more options you can use here!
        bgGradient: [[26, 26, 26], [24, 24, 24]],
        /** Border config. Highlights a single edge of the image. */
        border: {
            /** RGB border color, e.g. `[0, 255, 0]`. */
            color: [76, 0, 153],

            /** Border width. Default: `0`. */
            width: 15,

            /** Side of the image to draw the border on. Inline start/end respects writing direction. */
            side: "block-end",
        },

        font: {
            title: {
                families: ['Open Sans','Ubuntu','Istok Web','Source Sans Pro', 'PT Serif', 'Andika']
            },
            description: {
                families: ['Open Sans','Ubuntu','Istok Web','Source Sans Pro', 'PT Serif', 'Andika']
            }
        },
        

    }),
});

I've already added the image to my BaseHead file and everything loads up correctly, showing the og:url image as http://localhost:3000/custom-open-graph/html/introduction.png; however, that just returns a 404.

I have content stored inside of /src/content/html/*.md but for some reason the images do not display correctly. Let me know if you need any other info on my end.

Let me know if you have any suggestions on how I can get this to work on my end :)

Really apprecaite it! Thanks.

[rhiskey]

👋Hello! Good to see you.
I will try to help you.

1. First of all you have to create pages/custom-open-graph/[...slug].ts file with three dots prefix and place file directly in /custom-open-graph folder (imortant to place it like this).

Then it is neccesary to match the name of *.ts file in custom-open-graph

export const {getStaticPaths, get} = OGDynamicImageRoute({
    // Tell us the name of your dynamic route segment.
    // In this case it’s `slug`, because the file is named `slug.ts`.
    param: 'slug',

// rest of code
...

I would like to see your folder structure for futher improvements. Please show me nested directories of /src and /pages

Its little bit confusing in README, so i will update it, I am grateful for this discussion

[rhiskey]

And make sure that you have at least version 1.2.7 of this package, run npm i @cyberkoalastudios/og-image-generator to update to the latest version. @tnylea