search

tannerdolby / eleventy-plugin-metagen

Eleventy shortcode that generates document metadata
https://www.npmjs.com/package/eleventy-plugin-metagen
MIT License
41 stars 3 forks source link

Liquid Syntax issues with shortcode #15

Closed miklb closed 2 years ago

miklb commented 2 years ago

{% metagen title="New Title" %} throws an invalid syntax error. `{% metagen "title=New Title" %} doesn't throw an error however only the default meta tags are generated with no title.

Currently using 0.12.1 for eleventy and 1.4.8 of this plugin. I think I'm up to date?

tannerdolby commented 2 years ago

Hello! :wave: @miklb

Edit: See the docs for supported Liquid usage - https://metagendocs.netlify.app/docs/basics/plugin-details#liquid-usage

That is interesting, thank you for bringing it to my attention for v1.4.8. It seemed to be recognizing the stuff inside double quotes as the only parameter e.g. "New Title" leaving out title= prefix. When you wrap it all in double quotes its being recognized as one single string without a name=value pair and doesn't match any supported tags causing only the default tags to generate as a title=value name=pair wasn't provided/recognized in the input.

This behavior has been updated in the latest version 1.5.2!

Go ahead and update to the latest version with npm install eleventy-plugin-metagen@latest, then try running the shortcode in your template again:

{% metagen title="New Title" %}

and it will generate the expected metadata (title tag and default meta tags described in docs):

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>New Title</title>
<meta name="title" content="New Title">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">
<meta property="og:title" content="New Title">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="New Title">
miklb commented 2 years ago

I still get the the syntax error with "eleventy-plugin-metagen": "^1.5.2"

Error: invalid syntax at line 1 col 6:

title="New Title"
     ^
tannerdolby commented 2 years ago

Ahhhh yes, I'm sorry! This is for .liquid files like you mentioned in title. The example I posted above was for .njk templates so the shortcode syntax {% shortcode param1, param2 %} might be a bit different for .liquid templates if I remember correctly and that's why it doesn't like the {% shortcode name="value" %} usage. Give me some time to remedy the issue for Liquid and I will get back to you here in this thread :)

tannerdolby commented 2 years ago

I remember writing a note about this, and as I expected the Liquid shortcode usage logic I wrote doesn't like the name=value pairs like Nunjucks templates do, it expects a single shortcode parameter which is an object with key/value pairs representing the other shortcode params. 

---
metadata:
   title: New Title
---

<head>
{% metagen metadata %}
</head>

then it should generate the <title> tag and default tags like I included in the Nunjucks example.

https://metagendocs.netlify.app/docs/basics/plugin-details#liquid-usage

tannerdolby commented 2 years ago

I would like to expand/improve the Liquid support as I've mainly focused on Nunjucks support.

@miklb feel free to try out what I mentioned above and what is found at metagendocs.netlify.app/#liquid_usage, then let me know if that resolves things.

If you would like, let me know what you would like to see added, changed or tweaked to provide a better experience for those using Liquid templates with the metagen plugin (which most 11ty users most likely will since Liquid is the default templating engine).

Some examples of areas for improvement I already see might be:

  1. What if I'm using a Liquid template and don't want to define my data within an object in frontmatter to then pass the object to metagen as the only shortcode parameter? E.g. users want to mimic the same usage as the Nunjucks syntax (which supports the same single object parameter overload) but also supports the comma separated name=value pairs which Liquid doesn't.
  2. Add a bit more documentation on Liquid usage to README.md and/or metagendocs site to better document how the plugin should be utilized in Liquid templates.

I'm happy to discuss anything further, thank you for reminding me that Liquid support for metagen is in need of some work.

miklb commented 2 years ago

Gotcha. I'm coming from Jekyll where everything is .html and uses Liquid. I'm having a difficult time passing front matter in includes with Eleventy. I believe that's why I started exploring the other methods of passing the params.

miklb commented 2 years ago

Re-read the metagen docs and global data files sunk in. What's nice is that there's a data cascade so you can set global metatag values and then use data sources at the bottom of the cascade (per post) overrides.

This format for Liquid worked for me.

_data/metadata.json

{
    "title": "New Title"
}

{% metagen metadata %} in my template.

tannerdolby commented 2 years ago

Although storing your data to pass into metagen within a global data file works for your specific case, if you have your code in a repo on GitHub, I'm happy to have a look as using frontmatter for each "post" or page your trying to generate should work just fine.

miklb commented 2 years ago

The issue I was having was passing front matter in included templates. I don't think there will be an issue for markdown files and post specific metagen data.

tannerdolby commented 2 years ago

The issue I was having was passing front matter in included templates. I don't think there will be an issue for markdown files and post specific metagen data.

Ok cool, that makes more sense. The process of passing frontmatter in included templates might get lost somewhere or isn't available at that point in the cascade so I see why using a global data file which allows the data to be globally accessible might be the best option for you.

Yeah in a Markdown file using template syntax outside of interpolation ({{ foo }}) like shortcodes (templating utilities) etc will require templateEngineOverride: liquid, md in your Markdown file like:

foo.md

---
foo: hi
metadata:
  title: Foo
templateEngineOverride: liquid, md
---
{{ foo }} this is always fine
{% metagen metadata %} this is now ok because of template engine override being set