Statiq
Having an issue with header images #198
Replies: 9 comments 1 reply
-
|
Hey, sorry for the delay! The screen shot above is fascinating - it's not just the image meta tag that's getting different quotes, it looks like several of the other meta tags are doing the same (but curiously not all of them - the type one seems to be double-quotes in both). And it's not even just the So first question: is this using the CleanBlog theme or a bespoke one? And if a bespoke theme, what does the theme look like? So that raises two questions: 1) why doesn't the single quote/unclosed As for 1, that has me stumped. I can't think of any reason why the quote style or closing tag should make a difference. As for the quotes, as long as it matches between open and close there shouldn't be a problem. The HTML specification even allows for different quote styles so that you can nest the other style inside the value as needed. So maybe the failure to load is due to not having a close element, but that's still valid HTML5, though it does get a little murkier without the I have some thoughts on question 2 and why the output is a little different. Some of the modules rely on AngleSharp to load an HTML document, transform it, and then output the result. It's possible one of these modules is processing the document and AngleSharp is outputting slightly different (but still valid) HTML afterwards. The question then becomes which module, and what's the trigger that's causing it to process one document but not another. Is this Statiq Web (in which case I know the modules) or a custom pipeline? |
Beta Was this translation helpful? Give feedback.
-
|
Statiq web and CleanBlog. No custom pipelines, just straight forward. More than happy to share any of it. Few things that might matter:
* using Azure DevOps pipeline to build it, but on a Linux VM
* Using an Ubuntu container, on a windows 11 laptop and VSCode.
I did wonder whether it was line ends, or something. Tbh, I am a bit of a rubbish coder.. having been an EA and a PM for most of the last ten years.
Also found if I add a slug to frontmatter the pages don’t build properly, or an empty ArchiveKey.
…-jb
Get Outlook for iOS<https://aka.ms/o0ukef>
________________________________
From: Dave Glick ***@***.***>
Sent: Wednesday, May 24, 2023 8:52:57 PM
To: statiqdev/Discussions ***@***.***>
Cc: James Brewster ***@***.***>; Author ***@***.***>
Subject: Re: [statiqdev/Discussions] Having an issue with header images (Discussion #198)
Hey, sorry for the delay! The screen shot above is fascinating - it's not just the image meta tag that's getting different quotes, it looks like several of the other meta tags are doing the same (but curiously not all of them - the type one seems to be double-quotes in both). And it's not even just the meta elements - I see other elements with different quote styles too like the link further down.
So first question: is this using the CleanBlog theme or a bespoke one? And if a bespoke theme, what does the theme look like?
So that raises two questions: 1) why doesn't the single quote/unclosed meta tag work in the first place and 2) why are some of the attributes being rendered with different quotes.
As for 1, that has me stumped. I can't think of any reason why the quote style or closing tag should make a difference. As for the quotes, as long as it matches between open and close there shouldn't be a problem. The HTML specification even allows for different quote styles so that you can nest the other style inside the value as needed. So maybe the failure to load is due to not having a close element, but that's still valid HTML5, though it does get a little murkier without the <!DOCTYPE html> declaration at the top - HTML5 is less strict about closing tags than previous HTML iterations. Do these files have the <!DOCTYPE html> declaration at the top?
I have some thoughts on question 2 and why the output is a little different. Some of the modules rely on AngleSharp to load an HTML document, transform it, and then output the result. It's possible one of these modules is processing the document and AngleSharp is outputting slightly different (but still valid) HTML afterwards. The question then becomes which module, and what's the trigger that's causing it to process one document but not another. Is this Statiq Web (in which case I know the modules) or a custom pipeline?
—
Reply to this email directly, view it on GitHub<#198 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AIRMI4I5WNBAPEM5PZRL3T3XHZRJTANCNFSM6AAAAAAXUMP3QE>.
You are receiving this because you authored the thread.Message ID: ***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
Might be worth adding, I'm pulling the theme as a zip from your site, then overwriting elements I want to change.
Get Outlook for iOS<https://aka.ms/o0ukef>
…________________________________
From: James Brewster ***@***.***>
Sent: Wednesday, May 24, 2023 8:57:15 PM
To: statiqdev/Discussions ***@***.***>; statiqdev/Discussions ***@***.***>
Cc: Author ***@***.***>
Subject: Re: [statiqdev/Discussions] Having an issue with header images (Discussion #198)
Statiq web and CleanBlog. No custom pipelines, just straight forward. More than happy to share any of it. Few things that might matter:
* using Azure DevOps pipeline to build it, but on a Linux VM
* Using an Ubuntu container, on a windows 11 laptop and VSCode.
I did wonder whether it was line ends, or something. Tbh, I am a bit of a rubbish coder.. having been an EA and a PM for most of the last ten years.
Also found if I add a slug to frontmatter the pages don’t build properly, or an empty ArchiveKey.
-jb
Get Outlook for iOS<https://aka.ms/o0ukef>
________________________________
From: Dave Glick ***@***.***>
Sent: Wednesday, May 24, 2023 8:52:57 PM
To: statiqdev/Discussions ***@***.***>
Cc: James Brewster ***@***.***>; Author ***@***.***>
Subject: Re: [statiqdev/Discussions] Having an issue with header images (Discussion #198)
Hey, sorry for the delay! The screen shot above is fascinating - it's not just the image meta tag that's getting different quotes, it looks like several of the other meta tags are doing the same (but curiously not all of them - the type one seems to be double-quotes in both). And it's not even just the meta elements - I see other elements with different quote styles too like the link further down.
So first question: is this using the CleanBlog theme or a bespoke one? And if a bespoke theme, what does the theme look like?
So that raises two questions: 1) why doesn't the single quote/unclosed meta tag work in the first place and 2) why are some of the attributes being rendered with different quotes.
As for 1, that has me stumped. I can't think of any reason why the quote style or closing tag should make a difference. As for the quotes, as long as it matches between open and close there shouldn't be a problem. The HTML specification even allows for different quote styles so that you can nest the other style inside the value as needed. So maybe the failure to load is due to not having a close element, but that's still valid HTML5, though it does get a little murkier without the <!DOCTYPE html> declaration at the top - HTML5 is less strict about closing tags than previous HTML iterations. Do these files have the <!DOCTYPE html> declaration at the top?
I have some thoughts on question 2 and why the output is a little different. Some of the modules rely on AngleSharp to load an HTML document, transform it, and then output the result. It's possible one of these modules is processing the document and AngleSharp is outputting slightly different (but still valid) HTML afterwards. The question then becomes which module, and what's the trigger that's causing it to process one document but not another. Is this Statiq Web (in which case I know the modules) or a custom pipeline?
—
Reply to this email directly, view it on GitHub<#198 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AIRMI4I5WNBAPEM5PZRL3T3XHZRJTANCNFSM6AAAAAAXUMP3QE>.
You are receiving this because you authored the thread.Message ID: ***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
That might be contributing to a banner working (or not) depending on the behavior you're seeing (more on that below), but I doubt it. I've been running 12 builds a day for years on GitHub Actions to build https://discoverdot.net/ and haven't seen an issue related to line endings in a long, long time. I think we got that bit of cross-platform fun worked out in Statiq years ago.
Can you elaborate on this? What do you mean by slug (it's a loaded term that I've found can mean different things), and what does "not build properly" mean (error message?). The
That's exactly how it should work. I generally like to put the theme in a I did some digging, and these are the modules in Statiq Web that load a page into AngleSharp and potentially process it, with the result being an equivalent output HTML/DOM-wise, but possibly different file contents like closing tags vs. not as you noticed.
Do any of those situations sound like they apply? I.e. are you setting any of the settings mentioned above to One last thing I want to ask to bring this back full circle - you mentioned that "some of my headers load, and some don't" which was the reason for this whole thread. What does that mean though? Do you mean banner images aren't loading? Or the top of the page is cut off? Can you send a screen shot of what a banner that isn't loading looks like? |
Beta Was this translation helpful? Give feedback.
-
|
The header image doesn’t load on some pages.
I am using xrefs, as my default for internal links.
Think I'm using make links absolute as well. I can check tomorrow (I'm in the UK)
…________________________________
From: Dave Glick ***@***.***>
Sent: Thursday, May 25, 2023 8:53:59 PM
To: statiqdev/Discussions ***@***.***>
Cc: James Brewster ***@***.***>; Author ***@***.***>
Subject: Re: [statiqdev/Discussions] Having an issue with header images (Discussion #198)
I did wonder whether it was line ends, or something
That might be contributing to a banner working (or not) depending on the behavior you're seeing (more on that below), but I doubt it. I've been running 12 builds a day for years on GitHub Actions to build https://discoverdot.net/ and haven't seen an issue related to line endings in a long, long time. I think we got that bit of cross-platform fun worked out in Statiq years ago.
Also found if I add a slug to frontmatter the pages don’t build properly, or an empty ArchiveKey.
Can you elaborate on this? What do you mean by slug (it's a loaded term that I've found can mean different things), and what does "not build properly" mean (error message?).
The ArchiveKey setting is special and turns that page into one that gets processed by the archive<https://www.statiq.dev/guide/web/archives> feature. It's possible that just that front matter value without any of the other archive ones might cause problems - I.e. an ArchiveKey without ArchivePipelines or ArchiveSources might not work. Note that ArchiveKey is about configuring an archive and goes on the archive page, not the page being archived (if that makes sense).
Might be worth adding, I'm pulling the theme as a zip from your site, then overwriting elements I want to change.
That's exactly how it should work. I generally like to put the theme in a theme folder and then copy files to the input folder when I want to override their behavior, along with putting all my non-theme content in input. This keeps a nice separation between the theme "truth" and your own changes. That said, copying a theme right into the input folder should work too - with the caveat that you should copy the stuff in the theme's settings file into your own at the level above the input folder (I.e. https://github.com/statiqdev/CleanBlog/blob/main/settings.yml).
________________________________
I did some digging, and these are the modules in Statiq Web that load a page into AngleSharp and potentially process it, with the result being an equivalent output HTML/DOM-wise, but possibly different file contents like closing tags vs. not as you noticed.
* MakeLinksAbsolute (but only if the MakeLinksAbsolute setting is set to true).
* MakeLinksRootRelative (but only if the MakeLinksRootRelative setting is set to true).
* MirrorResources (but only if the MirrorResources setting is set to true).
* GatherHeadings (but this only results in new document metadata, it does not change document content).
* GenerateExcerpt (another one that doesn't change document content and just parses the DOM to calculate some metadata).
* ResolveXrefs (but only if a given document is using cross reference links<https://www.statiq.dev/guide/web/content-files/links-and-cross-references#cross-references>).
Do any of those situations sound like they apply? I.e. are you setting any of the settings mentioned above to true or making use of xref links? If not, then I'd love to do some more digging with out - it's entirely possible there's another way AngleSharp is getting into the mix that I didn't think of. Or maybe that the rewriting behavior isn't AngleSharp at all but some sort of weird Razor behavior (though AngleSharp seems much more likely).
One last thing I want to ask to bring this back full circle - you mentioned that "some of my headers load, and some don't" which was the reason for this whole thread. What does that mean though? Do you mean banner images aren't loading? Or the top of the page is cut off? Can you send a screen shot of what a banner that isn't loading looks like?
—
Reply to this email directly, view it on GitHub<#198 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AIRMI4NRXW67U6IG3PF4DWTXH62FNANCNFSM6AAAAAAXUMP3QE>.
You are receiving this because you authored the thread.Message ID: ***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
Great, thanks - any chance you could include the HTML for a header image that doesn't load along with one that does? Knowing that you're using xrefs, it makes sense that the HTML is being rewritten on some pages (those with xrefs) and not others (those without), but I'm having a hard time locally replicating the behavior of broken header images. |
Beta Was this translation helpful? Give feedback.
-
|
The site in question is here: https://red-sand-078a6ea03.3.azurestaticapps.net The first post is 'working', the second is not. Neither are using XREFs. |
Beta Was this translation helpful? Give feedback.
-
Really sorry about this. The Identity page IS using XREFs. Quite a few of them. |
Beta Was this translation helpful? Give feedback.
-
|
That was really helpful, thanks - can you also send along the two input documents (or maybe just the front matter where the banner image is defined)? I think I'm zeroing in on what's going on here... |
Beta Was this translation helpful? Give feedback.
-
The image is being set in settings.yml. Had to remove comments as it was being formatted as markdown... Files below. |
Beta Was this translation helpful? Give feedback.
-
Hi there, first post!
I'm using Statiq.web to host some markdown pages and render them as I write them for a customer and I'm having an issue I can't fathom. Some of my headers load, and some don't. As far as I can tell, the pages can be neighbouring, in the same folder or seperate, have identical front matter properties and generally follow the same rules. I can see int he html, some are rendering with " " and some with ' '. The ones with " " don't have a closer.
I have no idea where to look for this in the pipeline though. Any clues or hints as to how I can dig into this a bit more?
The left works, the right doesn't.
Beta Was this translation helpful? Give feedback.
All reactions