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.

Sign up for GitHub

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

Jump to bottom

Can i use slots in layouts? #63

Open
niklasgrewe opened this issue Mar 27, 2023 · 4 comments
Open

Can i use slots in layouts? #63

niklasgrewe opened this issue Mar 27, 2023 · 4 comments

Comments

@niklasgrewe
Copy link

niklasgrewe commented Mar 27, 2023 •
edited

Can i use slots in layouts like in this way?

<!-- layouts/base.webc -->
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <slot name="meta"></slot>
</head>
<!-- layouts/home.webc -->
---
layout: layouts/base.webc
---

<link slot="meta" rel="stylesheet" href="assets/css/home.css">
@MatthewNichols
Copy link

Oh I would like that, I used the similar feature in Nunjucks. I will try it later to see if it works.

@niklasgrewe
Copy link
Author

@zachleat any recommendations or workarounds about this?

@zachleat
Copy link
Member

zachleat commented Apr 14, 2023 •
edited

The clearest workaround for now is to bypass Eleventy layouts altogether and use a WebC component instead.

<my-base-layout>
  <link slot="meta" rel="stylesheet" href="assets/css/home.css">
</my-base-layout>

Another less documented method is to use the html helper from eleventy-plugin-bundle:

<script webc:type="js">
webc.helpers.html(`<link rel="stylesheet" href="assets/css/home.css">`, "meta")
</script>

where the second argument meta is an arbitrary bucket name—and then template usage might be:

<!-- layouts/base.webc -->
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta webc:nokeep @raw="getBundle('html', 'meta')"/>
</head>

@d3v1an7
Copy link

d3v1an7 commented May 24, 2023 •
edited

I've landed on the following. Have included some extra flavour re: how I'm handling titles, as it might be helpful if you're working on <head> :)

<!-- _components/site-head.webc -->
<script webc:setup>
  const metadata = {
    title: 'Default title',
    description: 'Default description',
  };
  function setTitle(title) {
    return title ? `${title} — ${metadata.title}` : metadata.title;
  }
</script>
<meta charset="utf-8" />
<title @text="setTitle($data.title)"></title>
<meta name="description" :content="$data.description || metadata.description" />
[etc...]
<!-- _layouts/base.webc -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta webc:nokeep webc:is="site-head" />
  </head>
  <body>
  [etc...]
<!-- index.webc -->
---
layout: base.webc
title: This will be prefixed to metadata.title
---

Hello world.

Let me know if that helps :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@zachleat @MatthewNichols @d3v1an7 @niklasgrewe