Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Introducing <Meta /> Component to help users manage meta Infos #20

Closed
wants to merge 2 commits into from
Closed

Introducing <Meta /> Component to help users manage meta Infos #20

wants to merge 2 commits into from

Conversation

sinyo-matu
Copy link
Collaborator

Background

#10

What changed

  1. Introducing Component
  2. Adding generation of fresh-seo.config.ts which includes meta config.

Usage

1. run init.ts script

This generates fresh-seo.config.ts from user's routes/

//fresh-seo.config.ts
import { Config } from "fresh-seo";
export default {
  routes: {
    "/": {
      title: "index",
      description: "index page",
    },
    "/about": {
      title: "about",
      description: "about page",
    },
  },
} as Config;

2. Add <Meta /> and related imports to page route components

//index.ts
import { Handlers, PageProps } from "$fresh/server.ts";
import { Head } from "$fresh/runtime.ts";
import seoConfig from "../fresh-seo.config.ts";
import { MetaProps, getMetaProps } from "fresh-seo";
import Meta from "fresh-seo/components";

interface Props {
  metaProps: MetaProps;
}

export const handler: Handlers = {
  GET(req, ctx) {
    const metaProps = getMetaProps(seoConfig, req);
    return ctx.render({ metaProps });
  },
};

 export default function Home({ data }: PageProps<Props>) {
  return (
    <>
      <Head>
        <Meta metaProps={data.metaProps} />
      </Head>
      <div>
     {/* body */}
      </div>
    </>
  );
}

sample project with demo

Maybe this inflicts too much user effort 🤔
What do you think?

@notangelmario
Copy link
Collaborator

This really brings some hassle to the user. Seems easy enough, but we gotta do something about the boilerplate code.

@sinyo-matu
Copy link
Collaborator Author

@notangelmario Yeah, adding 10+ line codes to every route should be a pain!
How can we avoid this?
I can't figure out how to inject stuff into the user's DOM without forcing the user to add it explicitly during the SSR

@xstevenyung
Copy link
Owner

xstevenyung commented Oct 16, 2022 •
edited
Loading

here are a few points I think we can improve on to simplify the API a little bit (this is not exhaustive, and we will require some work to find the right API here).

  1. For the route, it's actually pass down to the page automatically via PageProps so we could use this instead of relying on the request in the handler
  2. In your example, getMetaProps is called in the handler but can theoretically be called in the page directly or in the Meta component as we are still server-side, removing the need for the handler.
  3. Config file could be loaded automatically as we know what is the path (I would argue against the config file personally, but we can talk about it when we have the right implementation first)

If we manage to do all of this, we would boiled down the example to:

import { PageProps } from "$fresh/server";

 export default function Home({ route }: PageProps) {
  return (
    <>
      <Head>
        <Meta route={route} />
      </Head>
      <div>
     {/* body */}
      </div>
    </>
  );
}

Even with all those optimizations, I think we still need to:

  1. implement the <Meta /> component in every routes
  2. pass down the current route to the component

With all of this to consider, I'm not sure if this would be useful as is. I don't think it would actually be easier than just creating the <meta /> yourself.

Maybe provide a nice <Meta /> component is already a good enough feature without the centralized config file?

From what I see, there is only 1 way to make this better and both rely on making a PR to Fresh to implement additional required API.
Either Fresh provide a useRoute hooks à la Next (even better a preact/signals as it's natively supported now but not sure it support SSR) to allow our <Meta /> component to access the current route without passing it down, so we can just implement it in the _app.tsx, or we have to wait until Fresh improve on the plugin system as initially stated.

@sinyo-matu
Copy link
Collaborator Author

@xstevenyung
Relying on the plugin system should fit more with Fresh's concise API.
So I prefer waiting for the improvement of the plugin system's utility of the render process.
Closing as the above.

@sinyo-matu sinyo-matu closed this Oct 17, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@xstevenyung xstevenyung Awaiting requested review from xstevenyung

@notangelmario notangelmario Awaiting requested review from notangelmario

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@sinyo-matu @notangelmario @xstevenyung