Comments (6)
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.
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.
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.
@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.
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.
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)
- `static` property initializations break during bundling HOT 1
- "no custom element class found for this file" warning when prerendering with WCC HOT 1
- `develop` command fails on creating import map with `Failed to parse URL` error (Node >= 18.19.0)
- Lit v3 upgrade and SSR Pages support and compatibility for renderer plugin
- support bundling of `url` properties (like for `@font-face` + `src`) during CSS file optimization
- Upgrade to Node `20.x` (latest LTS)
- Resumability HOT 1
- Import Attributes support in Acorn
- align assets and build output directory naming conventions
- migrate to register function for NodeJS custom imports (no more flag!)
- HTML Modules plugin (experimental)
- leverage `Sec-Fetch-Dest` header for better filtering within Greenwood resource plugins
- nested SSR pages (and API routes) are throwing a module not found error (needs additional patch for adapters) HOT 1
- improve naming for (nested) bundled SSR page and API route entry points to better reflect original file based routing name HOT 1
- apply CSS optimizations and bundling to CSS (in) modules
- `<script>` tags of type `application/json` are breaking production builds
- Sitemap Generation HOT 5
- CSS Modules ™️ plugin
- prerendering breaks optimization configuration with multi-line formatted `<script>` / `<style>` / `<link>` tags
- functions in CSS declarations (like CSS `var`) are being incorrectly optimized
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from greenwood.