Use data/master for CSS_Ref and CSSRef #132

Elchi3 · 2017-03-03T14:30:47Z

This PR intends to prepare MDN for the changes made in mdn/data#52.

The first commit changes the syntax parsing

&&amp to &&
< > to < >

There might be more that is necessary. I'm still working through the changes in mdn/data#52.

SebastianZ · 2017-03-03T20:12:04Z

I currently don't have the possibility to test this, but I assume the syntaxes now need to be HTML encoded before adding them to the output.

Sebastian

jwhitlock

Tested locally after mdn/data#52 on three pages:

Web/CSS/border-bottom-right-radius - same output
Web/CSS/@font-face - same output
Web/CSS/@counter-style/additive-symbols - Uses &&, inlines <rgb-component>, <named-color>.
Web/CSS/:nth-child - different output, expected.

The previous output was:

:nth-child( <an-plus-b> [ of <selector># ]? ) { style properties }where 
<an-plus-b> = An+B | even | odd

The new output drops { style properties }, and changes the handling of An+B:

:nth-child( <nth> [ of <selector># ]? )where 
<nth> = <an-plus-b> | even | odd

I think this works, and we can adjust in a future PR.

jwhitlock · 2017-04-04T15:29:50Z

The <pre> output worked better than expected, so here's the current syntax box on @counter-style/additive-symbols:

[ <integer> && <symbol> ]#where 
<symbol> = <string> | <image> | <ident>
where 
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
where 
<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
where 
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
where 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
<color-stop> = <color> <length-percentage>?
<length-percentage> = <length> | <percentage>

and here's the new one:

[ <integer> && <symbol> ]#where 
<symbol> = <string> | <image> | <ident>
where 
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
where 
<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
where 
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<named-color> = transparent | aliceblue | antiquewhite | aqua | aquamarine | azure | beige | bisque | black | blanchedalmond | blue | blueviolet | brown | burlywood | cadetblue | chartreuse | chocolate | coral | cornflowerblue | cornsilk | crimson | cyan | darkblue | darkcyan | darkgoldenrod | darkgray | darkgreen | darkgrey | darkkhaki | darkmagenta | darkolivegreen | darkorange | darkorchid | darkred | darksalmon | darkseagreen | darkslateblue | darkslategray | darkslategrey | darkturquoise | darkviolet | deeppink | deepskyblue | dimgray | dimgrey | dodgerblue | firebrick | floralwhite | forestgreen | fuchsia | gainsboro | ghostwhite | gold | goldenrod | gray | green | greenyellow | grey | honeydew | hotpink | indianred | indigo | ivory | khaki | lavender | lavenderblush | lawngreen | lemonchiffon | lightblue | lightcoral | lightcyan | lightgoldenrodyellow | lightgray | lightgreen | lightgrey | lightpink | lightsalmon | lightseagreen | lightskyblue | lightslategray | lightslategrey | lightsteelblue | lightyellow | lime | limegreen | linen | magenta | maroon | mediumaquamarine | mediumblue | mediumorchid | mediumpurple | mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise | mediumvioletred | midnightblue | mintcream | mistyrose | moccasin | navajowhite | navy | oldlace | olive | olivedrab | orange | orangered | orchid | palegoldenrod | palegreen | paleturquoise | palevioletred | papayawhip | peachpuff | peru | pink | plum | powderblue | purple | rebeccapurple | red | rosybrown | royalblue | saddlebrown | salmon | sandybrown | seagreen | seashell | sienna | silver | skyblue | slateblue | slategray | slategrey | snow | springgreen | steelblue | tan | teal | thistle | tomato | turquoise | violet | wheat | white | whitesmoke | yellow | yellowgreen
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<color-stop> = <color> <length-percentage>?
<length-percentage> = <length> | <percentage>

Elchi3 · 2017-04-04T15:57:27Z

Thanks for your review. To make this PR more complete, I would say we'll need a new commit here to use "master" of mdn/data again. That way there is also a single PR that needs reverting, in case things go wrong.

jwhitlock · 2017-04-04T15:58:30Z

This PR does use the "master" branch:

https://github.com/Elchi3/kumascript/blob/6482bb71c74d9e2116aa3d598e9d152986fc62f5/macros/csssyntax.ejs#L9

You may need to rebase on master to pick up the current "mdn" branch setting, so your change back to "master" will be part of the PR.

Elchi3 · 2017-04-04T16:28:31Z

Rebased and added a commit that changes back to "master" of mdn/data.

jwhitlock · 2017-04-04T17:02:35Z

I'd be more comfortable restricting the mdn/data/master change to csssyntax.ejs, but I can take a 15-min look at the other macros to see if they need updating as well.

jwhitlock

After looking at the output, I think two of the macros are ready to go:

CSSAnimatedProperties
csssyntax

The others will require some adjustments, and maybe fix some missing data, before they can be switched from the mdn/data/mdn branch to the mdn/data/master branch.

My suggestion is to keep these macros on mdn/data/mdn, removing them from the PR, which can then be merged. Then create new PRs for each of the remaining macros.

jwhitlock · 2017-04-05T17:32:39Z

macros/CSSAnimatedProperties.ejs

+var selectorsUrl = "https://raw.githubusercontent.com/mdn/data/master/css/selectors.json";
+var typesUrl = "https://raw.githubusercontent.com/mdn/data/master/css/types.json";
+var syntaxesUrl = "https://raw.githubusercontent.com/mdn/data/master/css/syntaxes.json";
+var unitsUrl = "https://raw.githubusercontent.com/mdn/data/master/css/units.json";


👍 tested on Web/CSS/CSS_animated_properties, same output

jwhitlock · 2017-04-05T17:47:18Z

macros/CSSRef.ejs

+    var selectorsUrl = "https://raw.githubusercontent.com/mdn/data/master/css/selectors.json";
+    var typesUrl = "https://raw.githubusercontent.com/mdn/data/master/css/types.json";
+    var syntaxesUrl = "https://raw.githubusercontent.com/mdn/data/master/css/syntaxes.json";
+    var unitsUrl = "https://raw.githubusercontent.com/mdn/data/master/css/units.json";


The sidebar renders, but just has the sections (CSS, CSS Reference, CSS Box Model) on Web/CSS/box-shadow. Further testing is needed with a bigger database (staging, anon DB dump)

I loaded the anonymized production database, and the sidebar lacks links with that as well, so the macro needs updating.

There is code like var pageList = page.subpagesExpand('/en-US/docs/Web/CSS');. A method that calls the $children?expand endpoint of Kuma. The pageList variable is empty for me, so something is wrong locally with this. I do have a few subpages and http://localhost:8000/en-US/docs/Web/CSS$children?expand works as expected. Maybe caching in KS, I don't know how to fix that. It might just work fine on staging.

There's a bug in pages.subpagesExpand() and similar page macros. Will opened bug 1368134, and that should cover the work. If I alter DekiScript-Page.ejs to use api:8000 vs p.host, the child call works and the sidebar is populated.

jwhitlock · 2017-04-05T18:05:24Z

macros/CSS_Ref.ejs

+var selectorsUrl = "https://raw.githubusercontent.com/mdn/data/master/css/selectors.json";
+var typesUrl = "https://raw.githubusercontent.com/mdn/data/master/css/types.json";
+var syntaxesUrl = "https://raw.githubusercontent.com/mdn/data/master/css/syntaxes.json";
+var unitsUrl = "https://raw.githubusercontent.com/mdn/data/master/css/units.json";


Tested on Web/CSS/Reference. Renders, with changes:

Removed links:

annotation()

cubic-bezier()

format() and format() (@font-face)

local()

ornaments()

rect()

repeat()

steps()

styleset()

@stylistic

stylistic()

swash()

:unresolved

Added Links:

<an-plus-b>

I changed the regex in getItemsFromSyntax. Not sure this is a good way to get these items, but I think it fixes the current code.

I've confirmed that the removed links are back. There are now two added links in dev:

<an-plus-b>

text-justify

jwhitlock · 2017-04-05T18:12:38Z

macros/cssinfo.ejs

+var typesUrl = "https://raw.githubusercontent.com/mdn/data/master/css/types.json";
+var syntaxesUrl = "https://raw.githubusercontent.com/mdn/data/master/css/syntaxes.json";
+var unitsUrl = "https://raw.githubusercontent.com/mdn/data/master/css/units.json";
+var localStringsUrl = "https://raw.githubusercontent.com/mdn/data/master/l10n/css.json";


Tested on Web/CSS/outline-offset. Renders the same, except that the initial value is no longer wrapped in a <code> element.

jwhitlock · 2017-04-13T14:17:55Z

Merged the changes for CSSAnimatedProperties and csssyntax as #155.

Elchi3 · 2017-05-08T14:43:41Z

If I'm correct, the last two macros to change back to data/master are CSS_Ref.ejs and CSSRef.ejs. This could be done in this PR.

…caped

Elchi3 · 2017-05-15T12:05:46Z

@jwhitlock I would appreciate another look to get us all back to master.

jwhitlock · 2017-05-26T23:36:42Z

@Elchi3 sorry I haven't tested this yet. I will take a look Tuesday.

jwhitlock

👍 It looks like these macros work, except for the page bug, which we should cover in a different PR.

jwhitlock · 2017-05-30T15:53:06Z

macros/CSSRef.ejs

+    var selectorsUrl = "https://raw.githubusercontent.com/mdn/data/master/css/selectors.json";
+    var typesUrl = "https://raw.githubusercontent.com/mdn/data/master/css/types.json";
+    var syntaxesUrl = "https://raw.githubusercontent.com/mdn/data/master/css/syntaxes.json";
+    var unitsUrl = "https://raw.githubusercontent.com/mdn/data/master/css/units.json";


There's a bug in pages.subpagesExpand() and similar page macros. Will opened bug 1368134, and that should cover the work. If I alter DekiScript-Page.ejs to use api:8000 vs p.host, the child call works and the sidebar is populated.

- mdn/kumascript#132 - CSS_Ref, CSSRef: mdn/data master branch - mdn/kumascript#186 - GroupData: Update WebVR sidebar - mdn/kumascript#187 - LegacyAddonsNotice: Improve notice

Elchi3 requested a review from SebastianZ March 3, 2017 14:30

Elchi3 mentioned this pull request Mar 3, 2017

Remove HTML entities from syntaxes and related changes (#40) mdn/data#52

Merged

Elchi3 mentioned this pull request Mar 27, 2017

Use 'mdn' branch when loading data from mdn/data #143

Merged

jwhitlock approved these changes Apr 4, 2017

View reviewed changes

jwhitlock suggested changes Apr 5, 2017

View reviewed changes

jwhitlock self-assigned this Apr 10, 2017

jwhitlock mentioned this pull request Apr 13, 2017

Change CSSAnimatedProperties and csssyntax to work with mdn/data#52 #155

Merged

jwhitlock mentioned this pull request Apr 25, 2017

cssinfo: Back to data/master, wrap initial values in <code> #162

Merged

Elchi3 changed the title ~~Change macros to work with mdn/data#52~~ Use data/master for CSS_Ref and CSSRef May 8, 2017

Use 'master' branch for mdn/data again

0993332

Elchi3 removed the request for review from SebastianZ May 15, 2017 11:20

Fix getItemsFromSyntax regex now that css data syntax is no longer es…

e2c558b

…caped

jwhitlock approved these changes May 30, 2017

View reviewed changes

jwhitlock merged commit f71b001 into mdn:master May 30, 2017

Elchi3 deleted the css-data-entities branch May 30, 2017 16:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use data/master for CSS_Ref and CSSRef #132

Use data/master for CSS_Ref and CSSRef #132

Elchi3 commented Mar 3, 2017

SebastianZ commented Mar 3, 2017

jwhitlock left a comment •

edited

Loading

jwhitlock commented Apr 4, 2017

Elchi3 commented Apr 4, 2017

jwhitlock commented Apr 4, 2017 •

edited

Loading

Elchi3 commented Apr 4, 2017

jwhitlock commented Apr 4, 2017

jwhitlock left a comment

jwhitlock Apr 5, 2017

jwhitlock Apr 5, 2017

jwhitlock Apr 5, 2017

Elchi3 May 15, 2017 •

edited

Loading

jwhitlock May 30, 2017

jwhitlock Apr 5, 2017

Elchi3 May 15, 2017

jwhitlock May 30, 2017

jwhitlock Apr 5, 2017

jwhitlock commented Apr 13, 2017

Elchi3 commented May 8, 2017

Elchi3 commented May 15, 2017

jwhitlock commented May 26, 2017

jwhitlock left a comment

jwhitlock May 30, 2017

Use data/master for CSS_Ref and CSSRef #132

Use data/master for CSS_Ref and CSSRef #132

Conversation

Elchi3 commented Mar 3, 2017

SebastianZ commented Mar 3, 2017

jwhitlock left a comment • edited Loading

Choose a reason for hiding this comment

jwhitlock commented Apr 4, 2017

Elchi3 commented Apr 4, 2017

jwhitlock commented Apr 4, 2017 • edited Loading

Elchi3 commented Apr 4, 2017

jwhitlock commented Apr 4, 2017

jwhitlock left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Elchi3 May 15, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jwhitlock commented Apr 13, 2017

Elchi3 commented May 8, 2017

Elchi3 commented May 15, 2017

jwhitlock commented May 26, 2017

jwhitlock left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jwhitlock left a comment •

edited

Loading

jwhitlock commented Apr 4, 2017 •

edited

Loading

Elchi3 May 15, 2017 •

edited

Loading