1226611 - Redirect static CSS examples to wiki pages

Status: RESOLVED WONTFIX

(developer.mozilla.org Graveyard :: General, enhancement)

Description

[Florian Scholz (Open Web Docs)]

We would like to continue removing/redirecting static files from the MDN server (see bug 1076893 for reasoning and tracking). This bug is about the static files that belong to the CSS area.

Tasks:

* Visit the pages from the list below and make sure that the equivalent wiki pages have a good or better example than the one in these static files. Update wiki examples if necessary.

* Create a pull request similar to e.g. https://github.com/mozilla/kuma/pull/3663 to redirect the static examples to wiki pages. (e.g. samples/cssref/background.html -> en-US/docs/Web/CSS/background)

* Remove these macros and their usage on pages:
https://developer.mozilla.org/en-US/docs/Template:CSSLiveSample (94 pages)
https://developer.mozilla.org/en-US/docs/Template:CSSRefExampleLink (169 pages)
Also remove normal links to /samples/ if you encounter them.


Here is the list (see also attachment in bug 1076893):

samples/cssref
samples/cssref/images
samples/cssref/images/cartooncat.png
samples/cssref/images/starsolid.gif
samples/cssref/images/startransparent.gif
samples/cssref/images/topquote.png
samples/cssref/background-attachment.html
samples/cssref/TEMPLATE.html
samples/cssref/moz-element.html
samples/cssref/background-color.html
samples/cssref/background-image.html
samples/cssref/background.html
samples/cssref/border-collapse.html
samples/cssref/border-spacing.html
samples/cssref/border.html
samples/cssref/clear.html
samples/cssref/cssref.css
samples/cssref/cursor.html
samples/cssref/display.html
samples/cssref/float.html
samples/cssref/font-family.html
samples/cssref/font-size-adjust.html
samples/cssref/font-size.html
samples/cssref/font-weight.html
samples/cssref/font.html
samples/cssref/text-align.html
samples/cssref/moz-background-inline-policy-example-old.html
samples/cssref/moz-background-inline-policy-example.html
samples/cssref/text-decoration.html
samples/cssref/width.html
samples/cssref/transitions
samples/cssref/transitions/sample1
samples/cssref/transitions/sample1/index.html
samples/cssref/transitions/sample1/transitions.css
samples/cssref/transitions/sample1/transitions.js
samples/cssref/transitions/sample1/transitiondemo1.ogv
samples/cssref/transitions/sample2
samples/cssref/transitions/sample2/index.html
samples/cssref/transitions/sample2/transitions.css
samples/cssref/transitions/sample3
samples/cssref/transitions/sample3/index.html
samples/cssref/transitions/sample3/transitions.css
samples/cssref/altstyles
samples/cssref/altstyles/default.css
samples/cssref/altstyles/index.html
samples/cssref/altstyles/insane.css
samples/cssref/altstyles/simple.css
samples/cssref/moz-window-inactive.html
samples/cssref/input-validation.html
samples/cssref/moz-placeholder.html
samples/cssref/moz-list-number.html
samples/cssref/-moz-calc1.html
samples/cssref/-moz-calc2.html
samples/cssref/moz-image-rect
samples/cssref/moz-image-rect/firefox.jpg
samples/cssref/moz-image-rect/index.html
samples/cssref/css-positioning.html
samples/cssref/background-repeat
samples/cssref/background-repeat/starsolid.gif
samples/cssref/background-repeat/index.html
samples/cssref/background-position
samples/cssref/background-position/index.html
samples/cssref/background-position/starsolid.gif
samples/cssref/list-style
samples/cssref/list-style/index.html
samples/cssref/list-style/starsolid.gif
samples/cssref/resize.html
samples/cssref/hyphens.html
samples/cssref/animations
samples/cssref/animations/cssanim1.html
samples/cssref/animations/cssanim2.html
samples/cssref/animations/cssanim3.html
samples/cssref/animations/cssanim4.html
samples/cssref/animations/animevents.html
samples/cssref/orient.html
samples/cssref/height.html
samples/cssref/cssHeight.png

Comment 1

[Kaartic Sivaraam]

Has this bug been fixed, because I see some URLs redirecting to their corresponding pages.

Comment 2

[Florian Scholz (Open Web Docs)]

(In reply to Kaartic Sivaraam from comment #1)
> Has this bug been fixed, because I see some URLs redirecting to their
> corresponding pages.

No, this is not fixed yet.

Comment 3

[Florian Scholz (Open Web Docs)]

Jed emailed me saying that he wants to work on this. 

Jed, please let me know here if you have any questions.

Comment 4

[jed.piezas]

Hi Florian,

I just wanted to clarify some of the instructions given before I get started. Let's take the first asset I managed to load as an example: https://developer.mozilla.org/samples/cssref/images/cartooncat.png.

1. What would be the equivalent wiki path for this asset file and how would one go about looking for these?
2. Is this how you would go about writing a rule in the all-servers.conf file? Just took a look at your pull request 3663 and pulled it from there.

+RewriteRule ^/samples/cssref/images/cartooncat.png               http://mdn.github.io/[what goes here?]/images/cartooncat.png [R=301,L,NC]

3. Do I simply have to remove {{ CSSRefExampleLink() }} from any pages to remove the usage of this macro?

Comment 5

[John Whitlock [:jwhitlock]]

Florian is out until 2017, but maybe I can get you unstuck.

One of the redirects in PR 3663 is from this URL:

https://developer.mozilla.org/samples/webgl/sample1

to

http://mdn.github.io/webgl-examples/tutorial/sample1

The git repository containing the sample is at:

https://github.com/mdn/webgl-examples
https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample1

In general, you can convert back and forth from github.io hosting to github.com repositories:

https://ORG.github.io/REPO/PATH -> https://github.com/ORG/REPO/tree/gh-pages/PATH

I think the conversion strategy is:

1) Determine if the sample can be a Live Sample, or if it has to be a hosted project
2) If it can be a Live Sample, then convert from {{ CSSRefExampleLink() }} to the equivalent {{ EmbedLiveSample }} or {{ LiveSampleLink }}
3) If it can not be a Live Sample, then create a new repository until https://github.com/mdn and publish it as GitHub pages
4) Add a rule to redirect the old samples to the new locations.

In the case of WebGL demos, I believe you can't demonstrate functionality in an iframe, so the separate repository and web hosting is needed.  Things like device orientation are similar.

In the case of CSS demos, I think many could be converted to Live Samples, and do not need to be hosted in GitHub.  This also allows users to open the examples in CodePen or JSFiddle, and change the demo to learn more about the concept.

Docs for Live Samples:

https://developer.mozilla.org/en-US/docs/MDN/Contribute/Structures/Live_samples

For your example, cartooncat.png is used in the example for background attachment:

https://developer.mozilla.org/samples/cssref/background-attachment.html

I'm guessing this was once linked from the CSS reference page for background attachment:

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

Someone has already converted the examples to live samples. I think the remaining work is to add a redirect rule back to the reference page, maybe something like:

RewriteRule ^/samples/cssref/background-attachment.html$                 https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment#examples [R=301,L,NC]

It may be useful to browse pages using CSSRefExampleLink(), to see where legacy samples are still in use:

https://developer.mozilla.org/en-US/search?locale=%2A&kumascript_macros=CSSRefExampleLink&topic=none

Comment 6

[ajojohn555]

Can I take up this issue ? I'm a beginner and really wanted to resolve this.

Comment 7

[jed.piezas]

(In reply to ajojohn555 from comment #6)
> Can I take up this issue ? I'm a beginner and really wanted to resolve this.

Yeah go ahead! I wasn't able to finish this up so feel free.

Comment 8

[todd.t.turner]

Hi, I am new so I thought I would take a look at this one. 

I have gone through all of the legacy css example paths and have found that they have all been implemented as live-code examples on the newer wiki. Can this be closed out now, or is there another step I am missing?  Thanks for your help!

Comment 9

[John Whitlock [:jwhitlock]]

I scanned the documents for "CSSLiveSample" and "CSSRefExampleLink".

todd.t.turner, ajojohn555, or another external contributor could remove the CSSRefExampleLink call on:

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

Once that's done, I think we can remove this from mentored bugs, because the rest of the actions will require MDN staff:

- Remove calls from User: pages, either by deleting the page or updating it
- Delete out-of-date translations that include it. This is harder until bug 1287529 is fixed.
- Look for hard-coded links to /samples and replace (new bug?)
- Open PRs to delete CSSLiveSample and CSSRefExampleLink macros

There's follow-on work for the other deprecated sample templates, listed at:

https://developer.mozilla.org/en-US/docs/MDN/Contribute/Structures/Macros/Other#Code_samples

But that would cover the work for the legacy CSS samples.

Comment 10

[Antonio Ladeia]

Hello John, I dont understand if this is a mentored bug.

Comment 11

[Florian Scholz (Open Web Docs)]

Sorry, I can't mentor this at the moment. Thanks for your interest.

Comment 12

[BMO Automation]

MDN Web Docs' bug reporting has now moved to GitHub. From now on, please file content bugs at https://github.com/mdn/sprints/issues/ and platform bugs at https://github.com/mdn/kuma/issues/.