Add description meta to HEAD Mars Theme

pingram3541 · 20 June 2019 19:13

Baby steps…I modified /packages/mars-theme/src/components/theme.js and just before line 34 with:
<title>{state.frontity.title}</title>

I added a new line:
<meta name="Description" content={state.frontity.description}>

and tried with and w/out wrapping in double quotes but after running npm run build and restarting the app, there is no change.

I then removed this and simply changed the original title tag to <title>{state.frontity.description}</title> just to see if the output text changes from the title to my description (set in frontity.settings.js) but same thing, there is no change to the rendered output after running the build and restarting the node app.

In the docs on theme.js the comments mention React-Helmet. Looking at the react-helmet github it is not clear why this is not working. Thx

update: I also verified if I check frontity.state in the console, I can see title, description etc. is all there.

orballo · 22 June 2019 13:28

Hi @pingram3541!

We have added the meta description tag in the last version of mars-theme and it’s working. Check how we did it and see if there is anything different to your implementation

Here is where we are using react-helmet to render the meta element:

github.com

frontity/frontity/blob/f9e650dfc59e65349014da7c8dddb62d801e8f2e/packages/mars-theme/src/components/index.js#L29


  }
`;


const Theme = ({ state }) => {
  const data = state.source.get(state.router.link);


  return (
    <>
      <Head>
        <title>{state.frontity.title}</title>
        <meta name="description" content={state.frontity.description} />
        <html lang="en" />
      </Head>
      <Global styles={globalStyles} />
      <HeadContainer>
        <Header />
      </HeadContainer>
      <Body>
        {data.isFetching && <Loading />}
        {data.isArchive && <List />}
        {data.isPostType && <Post />}

And here is where we define the description field on the settings file:

github.com

frontity/frontity/blob/dev/examples/mars-theme-example/frontity.settings.js#L7


export default {
  name: "mars-theme-example",
  state: {
    frontity: {
      url: "https://test.frontity.io",
      title: "Test Frontity Blog",
      description: "Useful content for Frontity development"
    }
  },
  packages: [
    "@frontity/tiny-router",
    "@frontity/html2react",
    {
      name: "@frontity/mars-theme",
      state: {
        theme: {
          menu: [

Let us know if this implementation works for you!

pingram3541 · 23 June 2019 17:51

Does this mean I need the latest version for my code above to work? i.e. Mine looks identical to your example except for self-closing slash at end of the meta tag.

Yes, this matches what I have too, default from installation o/c.

I checked my version is 1.0.3 and the structure is slightly different, for example I do not have an index.js in the /components directory but rather a theme.js of which I add the exact same code on the same line matching your example then executed npm run build and still the meta tag does not render.

pingram3541 · 23 June 2019 21:28

I found this:

npx frontity create will install the mars-theme in packages/ so the theme can be edited by the developer. However, this theme doesn’t need to reside in packages/ if you don’t want to edit it. It can be installed directly with npm inside node_modules/ and it will work exactly the same.

I think the issue is my theme is not being used at all from the /packages directory even though my package.json file points @frontity/mars-theme to ‘./packages/mars-theme’ but instead the theme from /node_modules/. I have installed Frontity in a cpanel environment for production and I think I still have the structure misconfigured.

First, npx does run in my cpanel environment (but I think I need to know the proper npm method w/ package.json), if I install after executing the virtual environment, node_modules installs inside a /nodevenv/myproject/10/lib/node_modules/ path while another /nodevenv/myproject/10/bin/ provides the node environment scripts while /myproject/ has a node_modules symlink and a /build folder of which I execute via an app.js file.

var frontity = require("./build/server").default;
var http = require(“http”);
var server = http.createServer(frontity);
server.listen();

This works but is loading the core theme. I’m going to play around with install methods in cpanel until I get this nailed.

pingram3541 · 24 June 2019 00:09

Ok, it’s working now that I’ve re-installed and I can now see meta description tag just below the title.

orballo · 25 June 2019 09:27

I’m glad it’s working now!

I’ll check what the default behaviour of Frontity is when you have the same theme installed in node-modules and packages, as it feels like the natural behaviour should be to use the one in packages over the one in node_modules.