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.

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

Access page data in shortcodes without arguments #741

Closed
robdodson opened this issue Oct 24, 2019 · 15 comments
Closed

Access page data in shortcodes without arguments #741

robdodson opened this issue Oct 24, 2019 · 15 comments
Assignees

Comments

@robdodson
Copy link

I was thinking of turning all of my meta tags into a Meta shortcode.

Currently my template looks like this:

<!DOCTYPE html>
<title>{{title}}</title>
<meta name="description" content="{{description}}" />
etc...

Is there a way for me to pass a single data object to my shortcode which would contain title and description, similar to how you can do with context on a macro? Or do I have to pass these values individually. Because each child page might set a lot of values in their YAML, it feels like a lot to pass each property to the shortcode.

@Ryuno-Ki
Copy link
Contributor

Personally, I go with a partial + global _data object …

@robdodson
Copy link
Author

yeah in this case I have YAML from my pages that I want to use as well. For example, I may give each page a social YAML object where they can specify their facebook and twitter cards.

But maybe doing an include or macro is a better option because it will have access to all of the current page data. I prefer writing in JavaScript as opposed to Nunjucks for anything requiring logic so that's why I was leaning toward a Shortcode.

@Ryuno-Ki
Copy link
Contributor

Fair enough.
Just want to highlight, that there is more than one way to achieve this.
Perhaps you could go the partial-way until your request was addressed :-)

@nhoizey
Copy link
Contributor

nhoizey commented Nov 17, 2019

I have also a use case in a plugin where I would like Eleventy to pass the page data to a shortcode, without requiring the user to put page in the shortcode parameters.

More precisely, I'm working on improvements for @eeeps 's respimg plugin for responsive images. I like to store images alongside the Markdown file they're used in, and make the build copy them alongside the generated HTML (like I explained in my jekyll-postfiles plugin), so I need the page's URL to compute the image's URL. If I could get it (the page URL) automatically in the shortcode code, it would allow moving the content around in the site without editing the shortcode values.

Other page data could be useful too, so having it all would be great.

I'm using Nunjucks, I hope it one of the languages for which it is possible: https://twitter.com/eleven_ty/status/1196112060809195524

@robdodson
Copy link
Author

I also have the same use case as @nhoizey and created custom tags to help with this:
https://github.com/GoogleChrome/web.dev/blob/master/src/site/_includes/components/tags/Image.js

@nhoizey
Copy link
Contributor

nhoizey commented Nov 20, 2019

@robdodson great, I'll look at your code, thanks for sharing!

@nhoizey
Copy link
Contributor

nhoizey commented Nov 25, 2019

I found a better solution with transforms for my use case, but they don't have any context either… 😅

See #789

@zachleat zachleat added this to the Eleventy v0.11.0 milestone Mar 26, 2020
@zachleat
Copy link
Member

This will ship with 0.11.0. Docs issued at #1044

@zachleat zachleat self-assigned this Mar 26, 2020
zachleat added a commit that referenced this issue Mar 26, 2020
@zachleat
Copy link
Member

zachleat commented Mar 26, 2020

If you saw this last night, I modified the behavior to only expose this.page for now (rather than the entire data cascade 😅) for a few reasons now listed at #1044.

@zachleat zachleat changed the title Pass page context object to shortcode? Access page data in shortcodes without arguments Mar 26, 2020
zachleat added a commit to 11ty/eleventy-plugin-vue that referenced this issue Mar 26, 2020
zachleat added a commit to 11ty/eleventy-plugin-vue that referenced this issue Mar 26, 2020
@zachleat
Copy link
Member

Follow along with work to analyze and normalize this in filters here: #1047

@robdodson
Copy link
Author

@zachleat do you have an example of how this would work? I tried the following with 0.11 beta-2:

module.exports = (content) => {
  console.log(this.page); // undefined
};

@zachleat
Copy link
Member

zachleat commented Mar 27, 2020

Ah sorry @robdodson it’ll be in beta 3. Just coded it yesterday

@BregtDeLange
Copy link

BregtDeLange commented May 23, 2020

@zachleat Question, I'm using Handlebars. I have a shortcode that takes a set of parameters to build a url. I use rest parameter in my function there function(...urlParts) and I noticed that the last item in this array is an object that contains all the data available (urlParts.pop().data.root). Useful but not sure this is documented? Is this deliberate? It has confused me a lot.

@adamduncan
Copy link

If you saw this last night, I modified the behavior to only expose this.page for now (rather than the entire data cascade 😅) for a few reasons now listed at #1044.

Here you mention why we don't include the data cascade, but I couldn't track down the thinking there. Are there plans on the horizon to explore getting a page's frontmatter data via this (from within a shortcode)? Cheers

@gabipetrovay
Copy link

Same question as @adamduncan. Also posted this question on Stack Overflow maybe it gets some more visibility.

Also opened #1591 Q&A for exactly this question.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants