fresh
fresh copied to clipboard
Published
20 hours ago •
denoland
denoland
How to add a CSS file to all pages as the default header ?
Hi.
New to Fresh and new to Preact so maybe the question is trivial but, I can't figure out how to customized the main html file in order to include a css valid for all site.
Thanks
make components as layout to wrap the route with children in fresh some thing like this
// componets/layout/container.tsx
/** @jsx h */
/** @jsxFrag Fragment */
import { ComponentChildren, Fragment, h } from "preact";
import { tw } from "@twind";
import { Head } from "https://deno.land/x/[email protected]/runtime.ts";
import Footer from "../../components/Footer.tsx";
export type Props = {
children: ComponentChildren;
title?: string;
name?: string;
description?: string;
};
export const Container = ({ children, ...customMeta }: Props) => {
return (
<>
<div style={{ minHeight: "100vh" }}>
<Seo {...customMeta} />
<div className="container">{children}</div>
<Footer />
</div>
</>
);
};
const Seo = ({ ...customMeta }) => {
const meta = {
title: " بحوث عروض برمجة",
description: "بحوث عروض برمجة تصميم تصوير مونتاج",
type: "website",
...customMeta,
};
return (
<Head>
<title>{meta.title}</title>
<meta content={meta.description} name="description" />
<link rel="icon" href="/favicon.ico" />
{/*
add javascript css what ever you want
*/}
</Head>
);
};
and in routes you can use container components to warp as layout
// routes/index.tsx
import { Container } from "../components/layouts/container.tsx";
export default function Home(props: PageProps<H>) {
const meta = {
title: "Some Meta Title",
description: "I am a description, and I can create multiple tags",
canonical: "http://example.com/path/to/page",
meta: {
charset: "utf-8",
name: {
keywords: "react,meta,document,html,tags",
},
},
};
return (
<>
<Container {...meta}>
<h1>fresh is really fresh</h1>
</Container>
</>
);
}
I hope this help you
When I try the example, <Head> is being ignored. 🤷🏻
It does work if I import it this way
import { Head } from "$fresh/runtime.ts";
@HaQadosch Yes, you should import it like that.
Closing this as the example works.
