Question: Adding additional <link> resources

[bencodezen]

Issue: Trying to add Google Font resources to the page but not sure how to do so.

I was trying to find out how to access the portion of the layout and managed to deduce that a fair bit is generated through the manifest.json. However, I'm not able to find much documentation on how to add additional link resources.

I'm cheating a bit right now by throwing it in the div#app, but I'm sure there must be a better way to do it.

<div id="app">
    <link
        href="https://fonts.googleapis.com/css?family=Montserrat:400,600|Playfair+Display"
        rel="stylesheet"
    />
    <Header />
    <Router onChange={this.handleRoute}>
        <Home path="/" />
        <Profile path="/profile/" user="me" />
        <Profile path="/profile/:user" />
    </Router>
</div>

Any help would be greatly appreciated! Thanks!

P.S. I'd also be happy to help contribute a page on the docs for it if that would help other people. Thanks!

[bencodezen]

Figured it out. It turns out preact-cli has a section in the README regarding the template. It's abstracted and is something you have to manually call like preact --watch src/template.html.

[bestwestern]

could you please write the code that solved your problem?

[bencodezen]

@bestwestern The issue is that the template.html which determines the HTML outline for the preact-app is being generated underneath the hood with preact-cli.

If you want your own, you have to create one yourself with something like this example and then add your assets in there.

And per my last comment, you have to tell preact to build / watch that specific template you want to use. You can find the documentation here.

It's rather convoluted unfortunately as far as I can tell. Would love someone else to show a better way if possible!

[bestwestern]

thx @bencodezen !