Skip to content
This repository has been archived by the owner on Apr 17, 2020. It is now read-only.

Server-Side Rendered Page Fails W3C Check #8

Closed
nelsonic opened this issue Nov 7, 2015 · 20 comments
Closed

Server-Side Rendered Page Fails W3C Check #8

nelsonic opened this issue Nov 7, 2015 · 20 comments
Labels
bug help wanted

Comments

@nelsonic
Copy link
Member

nelsonic commented Nov 7, 2015

W3C check is failing on the custom elements:

riot-rendered-page-fails-w3c-check
nelsonic added a commit that referenced this issue Nov 7, 2015
@nelsonic
😢 sadly, the complete page rendered by riot fails W3C validator. see: #8
1902200
@nelsonic
Copy link
Member Author

nelsonic commented Nov 7, 2015

Without the custom tags the page validates fine:
https://validator.w3.org/nu/?doc=http%3A%2F%2Fpurecss.io%2Flayouts%2Fblog%2F

purecss-blog-validates-flawlessly

@iteles
Copy link
Member

iteles commented Nov 7, 2015

I also tried an example using riot-tag attributes in the HTML instead of custom tags but this also failed the validator. 😞

screen shot 2015-11-07 at 20 39 30

nelsonic added a commit that referenced this issue Nov 7, 2015
@nelsonic
sadly we are unable to use riot.js because of #8 so retiring this repo
d07e7ed
@nelsonic nelsonic mentioned this issue Nov 7, 2015
Merged
@iteles
Copy link
Member

iteles commented Nov 9, 2015

I do find it odd however that even though it's not standards compliant, it doesn't fail accessibility checkers like tenon.io or WAVE.

@gregorypratt
Copy link

FYI riot/riot#1342 (comment)

@iteles
Copy link
Member

iteles commented Jan 29, 2016

@gregorypratt 👍 Looking forward to seeing where this goes!

@aMarCruz
Copy link

@nelsonic , @iteles If we could render something as

<div data-riot-tag="page-head">
</div>

...the problem would be solved. Right?
Perhaps this can be done without overgrow the riot core.

@nelsonic
Copy link
Member Author

@aMarCruz yeah, that could solve the issue...

@aMarCruz
Copy link

@nelsonic In ~2-3 weeks I will submit a PR for the upcoming riot v3.0 trying to fix this issue.

@nelsonic
Copy link
Member Author

@aMarCruz that will be amazing! 👍
You should have write access to this repo (I just invited you...)

@aMarCruz
Copy link

@nelsonic thanks! just now I'm involved in a medium-sized private project, would not have the time to collaborate as I wanted, but in the future for sure.
I'll post here when the PR is ready.

@nelsonic
Copy link
Member Author

We are also crazy-busy with projects so totally understand! ⌛
When ever you have time will be amazing to get an update! 🎉
Thanks! 😄

@iteles
Copy link
Member

iteles commented Jan 30, 2016

@aMarCruz 🎉 Thanks for wanting to contribute, that would be super useful!

@gregorypratt
Copy link

This supersedes the initial issue: riot/riot#1636

@iteles
Copy link
Member

iteles commented Mar 1, 2016

@gregorypratt Cheers for keeping us to to date 👍
We'd love to start using riot once it fixes its validation issues!

@aMarCruz aMarCruz mentioned this issue Mar 1, 2016
Merged
@aMarCruz
Copy link

aMarCruz commented Mar 2, 2016

Hi team,
according to our promises the "dev" branch of riot includes support for the new attribute data-is, which will replace the current riot-tag for compliance with w3 validators. It will be included in v2.3.17

Theriot-tag attribute will be removed in v3, for performance reasons.
We will publish all the changes somewhere before releasing v3.

@nelsonic
Copy link
Member Author

nelsonic commented Mar 2, 2016

@aMarCruz that's great news! :-)

aMarCruz pushed a commit to riot/compiler that referenced this issue Mar 8, 2016
v2.3.23
ba1f912 
- Fix [riot#1325](riot/riot#1325) : Gulp + Browserify + Babelify + type="es6" error.
- Fix [riot#1342](riot/riot#1342), [riot#1636](riot/riot#1636) and request from [dwyl/learn-riot#8](dwyl/learn-riot#8) : Server-Side Rendered Page Fails W3C Check. The new `data-is` attribute is used for scoped styles in addition to `riot-tag` (the later will be removed in compiler v3.x)
- The keyword `defer` in `<script src=file>` avoids that the compiler loads the file, preserving the tag - Requested by [riot#1492](riot/riot#1492) : Stop script tags from being evaluated with serverside `riot.render`. It is removed in client-side compilation because browsers will not load scripts through innerHTML.
- It has changed the character used to hide expressions during the compilation, maybe this fix [riot#1588](riot/riot#1588) : Syntax Error: Invalid character `\0129` (riot+compiler.min).
- Removed the unused parameter with the compiled-time brackets from the call to `riot.tag2`.
- Removed support for raw expressions. It is unlikely this feature will be implemented in v2.3.x
- Update devDependencies.
@GianlucaGuarini
Copy link

riot 2.3.17 was released this issue has been fixed by @aMarCruz ✌️

@nelsonic
Copy link
Member Author

nelsonic commented Mar 9, 2016

@GianlucaGuarini amazing! thanks for letting us know! 👍

@aMarCruz aMarCruz mentioned this issue Mar 9, 2016
Merged
aMarCruz pushed a commit to riot/compiler that referenced this issue Mar 10, 2016
v2.3.23
f455dfd 
- The parsers are moved to its own directory in the node version. The load is on first use.
- Fix [riot#1325](riot/riot#1325) : Gulp + Browserify + Babelify + type="es6" error.
- Fix [riot#1342](riot/riot#1342), [riot#1636](riot/riot#1636) and request from [dwyl/learn-riot#8](dwyl/learn-riot#8) : Server-Side Rendered Page Fails W3C Check. The new `data-is` attribute is used for scoped styles in addition to `riot-tag` (the later will be removed in compiler v3.x)
- The keyword `defer` in `<script src=file>` avoids that the compiler loads the file, preserving the tag - Requested by [riot#1492](riot/riot#1492) : Stop script tags from being evaluated with serverside `riot.render`. It is removed in client-side compilation because browsers will not load scripts through innerHTML.
- It has changed the character used to hide expressions during the compilation, maybe this fix [riot#1588](riot/riot#1588) : Syntax Error: Invalid character `\0129` (riot+compiler.min).
- The option `debug` inserts newlines between the `riot.tag2` parameters and the call is prefixed with the source filename - Requested by [riot#1646](riot/riot#1646) : Split portions of generated html with newline instead of space
- Removed the unused parameter with the compiled-time brackets from the call to `riot.tag2`.
- Removed support for raw expressions. It is unlikely this feature will be implemented in v2.3.x
- Updated the regex that is used to match tag names, more closer to the HTML5 specs.
- Update devDependencies.
@aMarCruz
Copy link

The current riot+compiler v2.3.17 was released without support for data-is in scoped styles. It was my error. This support is included in the new compiler v2.3.23 that you can use updating riot-cli or rebuilding riot+compiler:

cd <dir-of-riot>
npm update && make raw

nelsonic added a commit that referenced this issue Aug 14, 2016
@nelsonic
remove ref to #8 from reademe v2.5 has W3C compliance.
5cd054b
@nelsonic
Copy link
Member Author

I can confirm that this is fixed!

image

❤️ ✅ 🎉

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

No branches or pull requests
5 participants
@nelsonic @GianlucaGuarini @gregorypratt @iteles @aMarCruz