Replies: 1 comment
-
|
Here's what I've done (it should work for injecting anything into the head, not just Bootstrap.) Note this is a wrapper around Fresh's // /components/SharedHead.tsx
/** @jsx h */
/** @jsxFrag Fragment */
import { h } from "preact";
import { Head } from "$fresh/runtime.ts";
export type SharedHeadProps = {
routeTitle?: string;
};
export default function SharedHead(props: SharedHeadProps) {
const title = props.routeTitle
? `${props.routeTitle} | App Name`
: `App Name | Snappy tagline here`;
return (
<Head>
<title>{title}</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossOrigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossOrigin="anonymous"
>
</script>
</Head>
);
}Then in the route... /** @jsx h */
/** @jsxFrag Fragment */
import { Fragment, h } from "preact";
import { Handlers, PageProps } from "$fresh/server.ts";
import SharedHead from "../components/SharedHead.tsx";
export default function Home() {
return (
<>
<SharedHead />
<div class="container">
<p>
Welcome to `fresh`. Try updating this message in the
./routes/index.tsx file, and refresh.
</p>
</div>
</>
);
} |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I tried Fresh today and was having a hard time integrating Bootstrap(CSS and JS).
To be honest the Documentation feels a bit incomplete.
It's not just Bootstrap alone but there is no documentation on how to import JavaScript modules or CSS frameworks.
How can Bootstrap be integrated in Fresh?
Thanks.
Beta Was this translation helpful? Give feedback.
All reactions