How to add a CSS file to all pages as the default header ? #371
Comments
|
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 |
|
Thank you very helpful. |
Closed
|
When I try the example, import { Head } from "$fresh/runtime.ts"; |
|
@HaQadosch Yes, you should import it like that. Closing this as the example works. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
The text was updated successfully, but these errors were encountered: