GithubHelp home page GithubHelp logo

Comments (8)

neg4n avatar neg4n commented on May 21, 2024 2

I mean I'd like if it's possible to have something like og-image.vercel.app in development mode as I want to integrate this library into my blog but would love to see how the templates look so I can create multiple dynamic ones.

Sure! The development mode HTML inspect seems reasonable, will create separate issue for it and implement it today

from next-api-og-image.

neg4n avatar neg4n commented on May 21, 2024 1

Hey! Thanks for the feedback 😊

Using Tailwind in next-api-og-image would look like that

import { withOGImage } from 'next-api-og-image'

export default withOGImage({
  html: ({ myQueryParam }) =>
    `
      <html>
        <head>
          <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
        </head>
        <body>
          <h1 class="flex flex-row text-6xl text-blue-300">${myQueryParam}<span>💻</span></h1>
        </body>
      </html>
    `,
})

I've tested it and it seems to work as expected :0 Request to http://localhost:3000/api/basic-tailwind?myQueryParam=im%20using%20Tailwind!! looks like this

image

I guess this should be in README and example/ Next.js project on this repository. I've added hacktoberfest badge if you want to add this 😎

Thanks for the suggestion! 🤟🏻

from next-api-og-image.

neg4n avatar neg4n commented on May 21, 2024 1

Hmm, I doubt the separate html templates along with fs would work. Im thinking about 2 reasons why:

  1. Placement of query params in the template - next-api-og-image is stupid and only passes the query forward to html function in configuration. The closest solution would be creating something like my-template.html.js with 
    export default function myTemplate({ superCoolQueryParam }) {
  return `<h1>${superCoolQueryParam}</h1>`
}
    then passed to the API Route using withOGImage 
    import { withOGImage } from 'next-api-og-image'
import myTemplate from './my-template.html'

export default withOGImage({ html: myTemplate })
  2. Most likely, there will be same issues as loading custom fonts while loading such things by fs module. Although it works on plain vercel serverless functions - I believe it does not in Next.js and i think its caused by invalid paths caused by bundling the source to .next directory.

from next-api-og-image.

neg4n avatar neg4n commented on May 21, 2024 1

I mean I'd like if it's possible to have something like og-image.vercel.app in development mode as I want to integrate this library into my blog but would love to see how the templates look so I can create multiple dynamic ones.

Sure! The development mode HTML inspect seems reasonable, will create separate issue for it and implement it today

Hey @deadcoder0904! This is now implemented (#4) (#5) 🎉
Let me know if there is anything that you would to suggest in this topic or eventually
feel free to close the issue if the subject got exhausted.

Cheers 🤗 Igor

from next-api-og-image.

deadcoder0904 avatar deadcoder0904 commented on May 21, 2024 1

Thanks @neg4n, great work. I'll open a new one if I have any or re-open this one if it's related.

from next-api-og-image.

deadcoder0904 avatar deadcoder0904 commented on May 21, 2024

Knew it could be done with link.

I'd also probably like to add separate html file templates which are not hardcoded, probably using fs module. Would that work too?

from next-api-og-image.

deadcoder0904 avatar deadcoder0904 commented on May 21, 2024

The 1st solution is good. Is there any way to preview the HTML we'll be displaying then so we can get live feedback like React's HMR?

I mean I'd like if it's possible to have something like https://og-image.vercel.app/ in development mode as I want to integrate this library into my blog but would love to see how the templates look so I can create multiple dynamic ones.

Right now, it feels like I'd have to see the screenshot or create another project that I work on HTML & then copy-paste the template into this which is bad DX :(

from next-api-og-image.

deadcoder0904 avatar deadcoder0904 commented on May 21, 2024

@neg4n I had 2 problems. First JIT mode wasn't working so I had to add the following script just below body:

<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>

Then I had an issue where I have to use custom font. The problem is I've given them custom names using tailwind.config.js so I probably have to repeat that too using baseCSS:

const baseCSS = `
		.font-alegreya {
			font-family: Alegreya;
		}
		.font-jetbrains {
			font-family: 'JetBrains Mono';
		}
	`

And then put it in my HTML:

return `
		<html>
			<head>
				<meta charset="utf-8" />
				<link rel="preconnect" href="https://fonts.googleapis.com" />
				<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
				<link
					href="https://fonts.googleapis.com/css2?family=Alegreya:wght@800&display=swap"
					rel="stylesheet"
				/>
				<link
					href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap"
					rel="stylesheet"
				/>
				<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
				<style>${baseCSS}</style>
			</head>
			<body>
				${body}
			</body>
			<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
		</html>
	`

This was necessary to do since my React.js OGImage component uses JIT mode & custom fonts :)

Not sure if there is a way to improve this using tailwind.config.js somehow but yeah this can be useful to someone in future using Tailwind :)

from next-api-og-image.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.