Closed Bug 811001 Opened 12 years ago Closed 6 years ago

Code sample generated pages should have a title

Categories

(developer.mozilla.org Graveyard :: Editing, defect, P5)

Product:
developer.mozilla.org Graveyard
Component:
Editing
Type:
defect

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: Jeremie, Unassigned, Mentored)

Details

(Whiteboard: [lod:2][points:2]) 

Each time a page is generated to display a code sample, this page should have a title tag (and an a charset)

For example: https://mdn.mozillademos.org/en-US/docs/User:lmorchard/TestCodeSample$samples/Playing_with_code_samples does not have a title tag.

It would be helpful for users (if no title, the URL is display it the browser tab) and for search engine that will index those examples.

IMO, the title should reuse the title of the article it comes from with a mention to specified it's an example.

So the generated HTML should start with (the brackets express variable parts):

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>{{Article's title}} - {{Anchors where the sample comes from}} - code sample</title>

So in the case of: https://mdn.mozillademos.org/en-US/docs/User:lmorchard/TestCodeSample$samples/Playing_with_code_samples

We should have:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>TestCodeSample - Playing with code samples - code sample</title>
Will the pages generated by code samples ever be visited directly? My understanding was that these pages would only be used within <iframe>s to show inline examples.

We could support full page examples as well, but with more features come more edge cases to account for, like this. But like anything, it's a tradeoff.
(In reply to John Karahalis [:openjck] from comment #1)
> Will the pages generated by code samples ever be visited directly? 

Yes, be sure of that.

If you go to https://developer.mozilla.org/en-US/docs/User:lmorchard/TestCodeSample#Including_the_sample_in_an_iframe You'll see there is a Kuma Template to get a direct link to the code sample.

> My understanding was that these pages would only be used within <iframe>s to
> show inline examples.

Anyway, I'm the first (and not the last) to do 
Right click > This Frame > Open Frame in New Tab 
Then I explore the code using Firebug... I don't think I'm unique in that case.

And to conclude, there is no robots.txt file at the root of https://mdn.mozillademos.org/ which means that those code samples will be indexed and access directly by users (actually it's already the case in Google: https://www.google.com/search?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FUser%3Almorchard%2FTestCodeSample%23Including_the_sample_in_an_iframe).

> We could support full page examples as well, but with more features come
> more edge cases to account for, like this.

Did you take a look at the proposal I sent to dev-mdn to discuss how to deal with more complex examples.

> But like anything, it's a tradeoff.

I agree, but there is always room for improvement. This feature request is just a nice improvement. We can live without that, it's just a small detail. I have very personnal opinion about that kind of detail, but as long as I won't be able to propose a patch, I'll follow the decision made.
Thanks for sharing your thoughts. I want to be sure we provide the features you need, so I will be sure we take a look at this.
Priority: -- → P5
The template [1] will need to be updated to add the <title>, and maybe the view [2] to add to the template context. I don't think there is a page with a code sample in the sample database, so a developer will need to copy one locally for manual testing.

[1] https://github.com/mozilla/kuma/blob/master/kuma/wiki/jinja2/wiki/code_sample.html
[2] https://github.com/mozilla/kuma/blob/master/kuma/wiki/views/code.py#L23-L48
Mentor: jwhitlock
Whiteboard: [lod:2][points:2]
Hi I wanted to take a look at this. It's my first time contributing. Would someone be able to tell me what should be put between the Title tags?
Flags: needinfo?(jwhitlock)
I think Jeremie's specification still makes sense:

<title>{{Article's title}} - {{Anchors where the sample comes from}} - code sample</title>
Flags: needinfo?(jwhitlock)
Hello John,

Is this bug still open? I want to work on it.
Flags: needinfo?(jwhitlock)
Yes, this bug is still open.
I want to work on it.
I look forward to your PR
Flags: needinfo?(jwhitlock)
I need an explanation, I user scrapy command to download one page from MDN to my local db, but I dont know how I can download a code example page, to test my code. Ex: I download this page (https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started) But I it dont have another pages like (https://mdn.mozillademos.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started$samples/Block_versus_inline_elements?revision=1367145)
Flags: needinfo?(jwhitlock)
Live Samples are created from HTML, CSS, and JS included on the page. When you downloaded Introduction_to_HTML/Getting_started, you also downloaded the live sample code.  See this for more info on Live Samples: 

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

mdn.mozillademos.org is a domain used in production so that code running in a sample iframe won't be able to affect developer.mozilla.org.  The development URL for the live sample is:

http://localhost:8000/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started$samples/Block_versus_inline_elements?revision=1367145
Flags: needinfo?(jwhitlock)
Hello John,

I already insert the html and title, but I do not know what this information would be {{Anchors where the sample comes from}}.
Maybe parent or parent topic fields of Document Model?
Flags: needinfo?(jwhitlock)
In the URL:

http://localhost:8000/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started$samples/Block_versus_inline_elements?revision=1367145

The anchor where the sample comes from is:

Block_versus_inline_elements

That should already be a parameter to the view function, so it should be easy to pass that in the rendering context.
Flags: needinfo?(jwhitlock)
I travel for my job, but I send my PR today https://github.com/mozilla/kuma/pull/4767
Flags: needinfo?(jwhitlock)
We can continue discussion on the PR.
Flags: needinfo?(jwhitlock)
Commit pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/25ddd313d7b0c1b3dd58947fe02cd312da94c110
bug 811001: Add title to code samples

Add a title and meta charset to the <head> that includes the section ID of the live sample
This was deployed about three months ago.
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
Product: developer.mozilla.org → developer.mozilla.org Graveyard
You need to log in before you can comment on or make changes to this bug.