Poncho•4mo ago

Add static font files as a fresh plugin

Hello! I'm creating a component library for Fresh. I'm in the part of setting up the plugin part of the library and I've successfully configured all static css and islands. I am looking for a way (if possible) of also adding static font files (.woff2 and such) so that the users of my library won't have to manually add them to the /static directory, and importing them in the /routes/_app.tsx function. Thank you 😄

3 Replies

Deno AI Helper•4mo ago

Hello! It's great to hear that you're working on a component library for Fresh. 🦕 Based on the documentation, Fresh has a feature that allows you to give priority to static files residing in a special directory when serving them. Specifically, Fresh will give static files in the <project>/_fresh/static directory higher priority over the default <project>/static directory. This means you can include your static font files in the _fresh/static directory of your plugin, and Fresh will serve these files with priority. Here's a general idea of how you might structure your plugin to include static font files: 1. Place your .woff2 font files in a directory within your plugin, for example, plugin-static/fonts/. 2. In your plugin code, you can specify the base location for these static files. Although the documentation does not provide a direct example for static assets like fonts, it does show how to add islands from plugins, which includes specifying a base location and paths for the islands. Here's a pseudo-code example inspired by the documentation for adding islands, which you might be able to adapt for serving static font files:

import { Plugin } from "$fresh/server.ts";

export default function myFontPlugin(): Plugin {
  return {
    name: "my-font-plugin",
    // You might need to adapt this part to serve static font files
    // This is not directly supported by the documentation, so you'll need to experiment
    staticAssets: {
      baseLocation: import.meta.url,
      paths: [
        "./plugin-static/fonts/my-font.woff2",
        // ... other font files
      ],
    },
  };
}

import { Plugin } from "$fresh/server.ts";

export default function myFontPlugin(): Plugin {
  return {
    name: "my-font-plugin",
    // You might need to adapt this part to serve static font files
    // This is not directly supported by the documentation, so you'll need to experiment
    staticAssets: {
      baseLocation: import.meta.url,
      paths: [
        "./plugin-static/fonts/my-font.woff2",
        // ... other font files
      ],
    },
  };
}

Please note that the above code is not directly supported by the documentation and is a hypothetical example. The documentation does not provide a specific

Deno AI Helper•4mo ago

example for serving static assets like fonts through plugins. You may need to experiment with Fresh's plugin system to achieve this functionality. If you encounter any issues or need further assistance, feel free to ask questions in the community, and someone might be able to provide more specific guidance based on their experience. Good luck with your component library! 🦕

Helpful Links: Static files | Fresh docs Fresh 1.1 - automatic JSX, plugins, DevTools, and more Plugins | Fresh docs Fresh 1.6: Tailwind CSS plugin, simplified typings and more Fresh 1.4 – Faster Page Loads, Layouts and More Modifying the <head> | Fresh docs Server configuration | Fresh docs Fresh 1.2 – welcoming a full-time maintainer, sharing state between islands, limited npm support, and more

Poncho•4mo ago

Thank you bot. I looked around the code and found nothing like the proposed staticAssets attribute. Anyone know if the is something of the such?