nostalgie icon indicating copy to clipboard operation
nostalgie copied to clipboard

Explore a first-class image component

Open ggoodman opened this issue 3 years ago • 0 comments

Different SSG and hybrid frameworks like Next.js and Gatsby have first-class support for images. This comes as no surprise when you dive into the complexities of serving images well on a modern browser.

Let's explore bringing a first class image concept to Nostalgie. I think that the code: imports sets an interesting precedent for this feature; with a special import syntax you are able to import an ESM whose default export is a React component with special, compile-time work.

We should:

  • [ ] Add typing support for a new import Foo from 'image:./path/to/image.ext' import specifier. We can re-use the same pattern from code imports. That type definition will be copied at build time so that the ambient definition of code:* is understood by TypeScript language services.
  • [ ] Create the Image component in our internal list of components. A good pattern for this component can be found in the CodeSnippet component. Maybe the only prop it needs initially is className. Not sure about this and totally open to ideas.
  • [ ] Create an esbuild plugin to be used by the SSR and client-side builders. A good pattern is again the plugin for the code: imports. I don't think there's much importance in the ordering of plugins in this case. The plugin should be wired up in the linked builders.
  • [ ] Profit!

ggoodman avatar Feb 26 '21 02:02 ggoodman