11ty / 11ty/webc

XML rendering in WebC

Open
#102 4 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

contributions-welcome enhancement needs-votes
Dominant language
JavaScript
Stars
1.4k
Forks
46
Avg merge
10m
Merged PRs (30d)
2

Description

I’ve been using Eleventy to generate different files, from iCal to RSS. I talk about permalinks in another issue, but I’d like to address XML here. It seems like the parser behind WebC is HTML-only by design, which is not a problem for the main use case. But still :)

Steps to reproduce

1. Set up a sample project:

mkdir webc-xml
cd webc-xml
npm init -y
npm i --save-dev @11ty/eleventy@v2.0.0-canary.31 @11ty/eleventy-plugin-webc

2. Create eleventy.config.js with the following content:

const webc = require('@11ty/eleventy-plugin-webc');

module.exports = (config) => {
    config.addPlugin(webc);
};

3. Create svg.webc with the following content

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100">
    <style>
        path {
            fill: tomato;
        }
    </style>
    <path d="M0 0h50v100L25 80 0 100"/>
</svg>

4. Create xml.webc with the following content

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:base="https://example.com">
    <title>Title</title>
    <entry>
        <title>Entry</title>
        <link href="https://example.com"/>
        <content type="html" xml:lang="en">
            <![CDATA[
                11
            ]]>
        </content>
    </entry>
</feed>

5. Run npx @11ty/eleventy

Expected behavior

More or less intact, or functionally similar output in both cases:

  • _site/svg/index.html
  • _site/xml/index.html

I know, these files are HTML, but I was hoping to generate XML documents with WebC, too.

Actual behavior

In XML case:

  • Commented XML prolog
  • Commented CDATA
  • Removed self-closing slashes
<!--?xml version="1.0" encoding="utf-8"?-->
<feed xmlns="http://www.w3.org/2005/Atom" xml:base="https://example.com">
    <title>Title</title>
    <entry>
        <title>Entry</title>
        <link href="https://example.com">
        <content type="html" xml:lang="en">
            <!--[CDATA[
                11
            ]]-->
        </content>
    </entry>
</feed>

In SVG case:

  • Commented XML prolog
  • Removed <style> in SVG case
<!--?xml version="1.0" encoding="utf-8"?-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100">
    <path fill="#c00" d="M0 0h50v100L25 80 0 100"></path>

</svg>

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue with the WebC plugin and npx @11ty/eleventy using the svg.webc and xml.webc examples. Inspect the WebC parser/rendering path; done means XML output preserves the prolog, CDATA, self-closing elements, and SVG style content rather than applying HTML-only transformations.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.