Code Monkey home page Code Monkey logo

Comments (6)

hutchgrant avatar hutchgrant commented on June 15, 2024 1

Can certainly accomplish 1-2, 5-6, but I'm not sure how we can do 3-4.

Maybe we can add those var in meta tags during serialization, in the jsdom, right after it renders?

from greenwood.

hutchgrant avatar hutchgrant commented on June 15, 2024 1

The problem is we need it to be dynamic per page, and when our SPA is generated, there is only a single html file. Meaning, if we have many pages, each with different, dynamic, meta data, with only a single html being compiled, that won't suffice. However, when we're serializing, there is an opportunity to manage each page's index.html file with JSDOM before they're written to file.

Unless, we could build a component of some kind that can be rendered within each page-template(custom templates will have to add it as well), which could force updating the document head with route based meta tags. That's one way to get it to render the meta tags dynamically pre-serialization(something like helmet but a web component).

from greenwood.

hutchgrant avatar hutchgrant commented on June 15, 2024 1

I have built a simple helmet-like component that we can use within the wc-markdown-loader and page/app-template.

However there will be some issues to figure out. For example, some meta we will want to be site-wide and should be set from a site config file which will be used in app-template. Others, we may prefer to be set from specific page-templates. As well I want dynamic titles/descriptions so those have to be set within wc-markdown-loader via front-matter var(or extracted by parsing md titles/text). Plus, we want some of these(from any of these 3 methods) to be default.

from greenwood.

thescientist13 avatar thescientist13 commented on June 15, 2024

@hutchgrant
Yeah, I was thinking that we would just provide template "hooks" in the project's index.html, like

<title>{{title}}</title>

If a user wants to create their own index.html, they can, and we can provide a more robust solution to that via #17 where we can document / define what compilation information is available at build time, and at what point it can be accessed / injected.

from greenwood.

thescientist13 avatar thescientist13 commented on June 15, 2024

Good point and yeah, figured there are a couple ways we might accomplish this given a particular use case.

For my primary inspiration on this, checkout helmet / gatsby-helmet. 🏈

from greenwood.

hutchgrant avatar hutchgrant commented on June 15, 2024

Much of the meta data should be consolidated in config file and that file needs to be imported across multiple libs as per #11 IMO.

from greenwood.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.