mdn / yari

The platform code behind MDN Web Docs
Mozilla Public License 2.0
1.19k stars 508 forks source link

CSS Filter's Formal Syntax section contains broken links on the filter functions #10021

Open cyanliu opened 11 months ago

cyanliu commented 11 months ago

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

What specific section or headline is this issue about?

Formal Syntax

What information was incorrect, unhelpful, or incomplete?

The filter functions within the code block currently looks a little something like this:

<filter-function> = [<blur()>](https://developer.mozilla.org/en-US/docs/Web/CSS/blur()) | [<brightness()>](https://developer.mozilla.org/en-US/docs/Web/CSS/brightness()) | [<contrast()>](https://developer.mozilla.org/en-US/docs/Web/CSS/contrast()) | [<drop-shadow()>](https://developer.mozilla.org/en-US/docs/Web/CSS/drop-shadow()) | [<grayscale()>](https://developer.mozilla.org/en-US/docs/Web/CSS/grayscale()) | [<hue-rotate()>](https://developer.mozilla.org/en-US/docs/Web/CSS/hue-rotate()) | [<invert()>](https://developer.mozilla.org/en-US/docs/Web/CSS/invert()) | [<opacity()>](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity()) | [<sepia()>](https://developer.mozilla.org/en-US/docs/Web/CSS/sepia()) | [<saturate()>](https://developer.mozilla.org/en-US/docs/Web/CSS/saturate())

all of the links for these functions are broken, because it seems as though the individual filter functions have been moved underneath a filter-function subpage, so clicking on any of these links on the Filter page doesn't quite get you where you need to go.

also the <url-modifier> tags at the bottom of the same code block are broken too but that seems a bit different because I wasn't able to find a specific page that seemed like it would have been the intended target of the link.

What did you expect to see?

I was expecting to be able to click on each of the individual filter functions to go to a live link, but they are currently pointing to dead links and have the spooky red squiggly + disabled cursor style

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

image

I tried following the steps outlined in the writing guidelines syntax sections md file, and subsequently looked at the mdn/data repo's properties.json file and types.json file mentioned in that section, but I couldn't really wrap my head around things so I came back here to this repo's issue tracker :(

I did do some additional exploring over in the data repo and stumbled upon the functions.json file, but from what I could tell, the url paths for the filter functions all have that filter-function subpath in them, which seems ... fine?

I tried looking for phrases like css, filter, broken url, page not found in the issue tracker here and I went through the first page of results to see if someone else has reported this particular issue but I didn't see anything

thanks for taking the time to read all this, I hope I've provided enough information to locate the issue. have a good day! 🌻

MDN metadata

Page report details * Folder: `en-us/web/css/filter` * MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/filter * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/filter/index.md * Last commit: https://github.com/mdn/content/commit/de7d710496266ccf4fce5ade75a67e6605f60ce5 * Document last modified: 2023-09-13T01:48:33.000Z
OnkarRuikar commented 11 months ago

This is a mdn/yari issue. A special case need to be added for the filter functions.

cyanliu commented 11 months ago

ah yeah, it does seem like the generated url in the Formal Syntax section of that page doesn't include the filter-function subpath but also includes the parentheses from the slug

And now that I'm taking a closer look at the url-modifier (and... url-token? I swear that wasn't there yesterday), both of those are a bit weird because they don't have dedicated pages -- url-modifier seems to only exist in the url page, but I'm not sure where url-token should be a link to

If handling the url-* links is a bit too different, I'd understand if a separate issue needs to be made for them, they're just on my mind because they're also broken in the same section