Skip to content

Commit

Permalink
feat(macros): rewrite SVG sidebar (#8289)
Browse files Browse the repository at this point in the history 
- Adds sections "Tutorials" and "Guides".
- Moves "Elements" under a new section "Reference".
- Adds subsection "Attributes" under "Reference".
  • Loading branch information
@wbamberg
wbamberg authored Mar 4, 2023
1 parent d3767b9 commit dd191fa
Showing 1 changed file with 113 additions and 199 deletions.
312 changes: 113 additions & 199 deletions kumascript/macros/SVGRef.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,206 +1,120 @@
<%
// Generates and inserts the quicklinks box for the SVG Reference.
//
// Parameters: None.
const locale = env.locale;
var s_svg_href = '/'+env.locale+'/docs/Web/SVG';
var s_svg_ref_href = '/'+env.locale+'/docs/Web/SVG/Element';
var s_svg_ref_title = 'SVG Elements';
switch (env.locale) {
case 'fr':
s_svg_href = '/'+env.locale+'/docs/SVG';
s_svg_ref_href = '/'+env.locale+'/docs/Web/SVG/Element';
s_svg_ref_title = 'Éléments SVG';
break;
default: break;
}
// Find the section of SVG this page belongs to (that is the first tag of the form "SVG XYZ")
var tags = env.tags;
var foundTag = '';
if (tags || typeof tags != 'undefined') {
for (const tag of tags) {
if( tag && tag != s_svg_ref_title && tag.substr(0, 4) == 'SVG ') {
foundTag = tag;
break;
}
}
}
const text = mdn.localStringMap({
'en-US': {
'Tutorials': 'Tutorials',
'Reference': 'Reference',
'Elements': 'Elements',
'Attributes': 'Attributes',
'Guides': 'Guides',
'Introducing SVG from scratch': 'Introducing SVG from scratch'
},
'fr': {
'Tutorials': 'Tutoriels',
'Reference': 'Références',
'Elements': 'Éléments',
'Attributes': 'Attributs',
'Guides': 'Guides',
},
'ja': {
'Tutorials': 'チュートリアル',
'Reference': 'リファレンス',
'Elements': '要素',
},
'ko': {
'Tutorials': '자습서:',
'Reference': '참고서:',
'Elements': '요소',
'Attributes': '속성',
'Guides': '안내서:',
},
'pt-BR': {
'Tutorials': 'Tutoriais',
'Reference': 'Referências',
'Elements': 'Elementos',
'Attributes': 'Atributos',
'Guides': 'Guides',
},
'ru': {
'Tutorials': 'Уроки',
'Reference': 'Справочники',
'Elements': 'Элементы',
'Attributes': 'Aтрибуты',
'Guides': 'Путеводитель',
},
'zh-CN': {
'Tutorials': '教程',
'Reference': '参考：',
'Elements': '元素',
'Attributes': '属性',
'Guides': '指南：',
},
});
// Find the SVG Tags belonging to the same subject
const sidebarURL = `/docs/Web/SVG/`;
const baseURL = `/${env.locale}${sidebarURL}`;
var resultSVG = [];
if (foundTag) {
// Find the pages, sub-pages of SVG/Element that are tagged with that specific tag
var pageList = await page.subpagesExpand(s_svg_ref_href); // Get subpages, including tags
for (aPage of pageList) {
if (page.hasTag(aPage, foundTag)) {
resultSVG.push(aPage.slug.split("/").pop(-1).toLowerCase());
}
}
async function getTitle(pageSlug) {
let page = await wiki.getPage(`${baseURL}${pageSlug}`);
if (!page.title) {
page = await wiki.getPage(`/en-US${sidebarURL}${pageSlug}`);
}
return page.title;
}
var resultAPI = [];
function wrapSVGElement(name) {
return template("SVGElement", [name, "SVGRef"]);
}
%>
<section id="Quick_links" data-macro="SVGRef">
<ol>
<li><a href="/<%=locale%>/docs/Web/SVG"><strong>SVG</strong></a></li>
<li><strong><%=text['Tutorials']%></strong></li>
<li class="toggle">
<details>
<summary><%=text['Introducing SVG from scratch']%></summary>
<ol>
<li><a href="/<%=locale%>/docs/Web/SVG/Tutorial/Introduction"><%=await getTitle("Tutorial/Introduction")%></a></li>
<li><a href="/<%=locale%>/docs/Web/SVG/Tutorial/Getting_Started"><%=await getTitle("Tutorial/Getting_Started")%></a></li>
<li><a href="/<%=locale%>/docs/Web/SVG/Tutorial/Positions"><%=await getTitle("Tutorial/Positions")%></a></li>
<li><a href="/<%=locale%>/docs/Web/SVG/Tutorial/Basic_Shapes"><%=await getTitle("Tutorial/Basic_Shapes")%></a></li>
<li><a href="/<%=locale%>/docs/Web/SVG/Tutorial/Paths"><%=await getTitle("Tutorial/Paths")%></a></li>
<li><a href="/<%=locale%>/docs/Web/SVG/Tutorial/Fills_and_Strokes"><%=await getTitle("Tutorial/Fills_and_Strokes")%></a></li>
<li><a href="/<%=locale%>/docs/Web/SVG/Tutorial/Gradients"><%=await getTitle("Tutorial/Gradients")%></a></li>
<li><a href="/<%=locale%>/docs/Web/SVG/Tutorial/Patterns"><%=await getTitle("Tutorial/Patterns")%></a></li>
<li><a href="/<%=locale%>/docs/Web/SVG/Tutorial/Texts"><%=await getTitle("Tutorial/Texts")%></a></li>
<li><a href="/<%=locale%>/docs/Web/SVG/Tutorial/Basic_Transformations"><%=await getTitle("Tutorial/Basic_Transformations")%></a></li>
<li><a href="/<%=locale%>/docs/Web/SVG/Tutorial/Clipping_and_masking"><%=await getTitle("Tutorial/Clipping_and_masking")%></a></li>
<li><a href="/<%=locale%>/docs/Web/SVG/Tutorial/Other_content_in_SVG"><%=await getTitle("Tutorial/Other_content_in_SVG")%></a></li>
<li><a href="/<%=locale%>/docs/Web/SVG/Tutorial/Filter_effects"><%=await getTitle("Tutorial/Filter_effects")%></a></li>
<li><a href="/<%=locale%>/docs/Web/SVG/Tutorial/SVG_fonts"><%=await getTitle("Tutorial/SVG_fonts")%></a></li>
<li><a href="/<%=locale%>/docs/Web/SVG/Tutorial/SVG_Image_Tag"><%=await getTitle("Tutorial/SVG_Image_Tag")%></a></li>
<li><a href="/<%=locale%>/docs/Web/SVG/Tutorial/Tools_for_SVG"><%=await getTitle("Tutorial/Tools_for_SVG")%></a></li>
<li><a href="/<%=locale%>/docs/Web/SVG/Tutorial/SVG_and_CSS"><%=await getTitle("Tutorial/SVG_and_CSS")%></a></li>
</ol>
</details>
</li>
<li><strong><%=text['Reference']%></strong></li>
<li class="toggle">
<details>
<summary><%=text['Elements']%></summary>
<%-await template("ListSubpagesForSidebar", ['/en-US/docs/Web/SVG/Element'])%>
</details>
</li>
<li class="toggle">
<details>
<summary><%=text['Attributes']%></summary>
<%-await template("ListSubpagesForSidebar", ['/en-US/docs/Web/SVG/Attribute'])%>
</details>
</li>
<li><strong><%=text['Guides']%></strong></li>
<li>
<ol>
<li><a href="/<%=locale%>/docs/Web/SVG/Applying_SVG_effects_to_HTML_content"><%=await getTitle("Applying_SVG_effects_to_HTML_content")%></a></li>
<li><a href="/<%=locale%>/docs/Web/SVG/Content_type"><%=await getTitle("Content_type")%></a></li>
<li><a href="/<%=locale%>/docs/Web/SVG/Namespaces_Crash_Course"><%=await getTitle("Namespaces_Crash_Course")%></a></li>
<li><a href="/<%=locale%>/docs/Web/SVG/SVG_animation_with_SMIL"><%=await getTitle("SVG_animation_with_SMIL")%></a></li>
<li><a href="/<%=locale%>/docs/Web/SVG/SVG_as_an_Image"><%=await getTitle("SVG_as_an_Image")%></a></li>
</ol>
</li>
</ol>
</section>

if (s_svg_href) { %>
<section class="Quick_links" id="Quick_links" data-macro="SVGRef">
<ol>
<% if (foundTag) {
for (aTitle of resultSVG) { // SVG entities matching
%>
<li><%- await wrapSVGElement(aTitle) %></li>
<% }
} %>
<li><details><summary><%-s_svg_ref_title%></summary><ol>
<li>A
<ol>
<li><%-await wrapSVGElement("a")%></li>
<li class="deprecatedElement"><%-await wrapSVGElement("altGlyph")%></li>
<li class="deprecatedElement"><%-await wrapSVGElement("altGlyphDef")%></li>
<li class="deprecatedElement"><%-await wrapSVGElement("altGlyphItem")%></li>
<li><%-await wrapSVGElement("animate")%></li>
<li><%-await wrapSVGElement("animateMotion")%></li>
<li><%-await wrapSVGElement("animateTransform")%></li>
</ol>
</li>
<li>B-C
<ol>
<li><%-await wrapSVGElement("circle")%></li>
<li><%-await wrapSVGElement("clipPath")%></li>
<li class="deprecatedElement"><%-await wrapSVGElement("color-profile")%></li>
<li><%-await wrapSVGElement("cursor")%></li>
</ol>
</li>
<li>D
<ol>
<li><%-await wrapSVGElement("defs")%></li>
<li><%-await wrapSVGElement("desc")%></li>
</ol>
</li>
<li>E
<ol>
<li><%-await wrapSVGElement("ellipse")%></li>
</ol>
</li>
<li>F
<ol>
<li><%-await wrapSVGElement("feBlend")%></li>
<li><%-await wrapSVGElement("feColorMatrix")%></li>
<li><%-await wrapSVGElement("feComponentTransfer")%></li>
<li><%-await wrapSVGElement("feComposite")%></li>
<li><%-await wrapSVGElement("feConvolveMatrix")%></li>
<li><%-await wrapSVGElement("feDiffuseLighting")%></li>
<li><%-await wrapSVGElement("feDisplacementMap")%></li>
<li><%-await wrapSVGElement("feDistantLight")%></li>
<li><%-await wrapSVGElement("feFlood")%></li>
<li><%-await wrapSVGElement("feFuncA")%></li>
<li><%-await wrapSVGElement("feFuncB")%></li>
<li><%-await wrapSVGElement("feFuncG")%></li>
<li><%-await wrapSVGElement("feFuncR")%></li>
<li><%-await wrapSVGElement("feGaussianBlur")%></li>
<li><%-await wrapSVGElement("feImage")%></li>
<li><%-await wrapSVGElement("feMerge")%></li>
<li><%-await wrapSVGElement("feMergeNode")%></li>
<li><%-await wrapSVGElement("feMorphology")%></li>
<li><%-await wrapSVGElement("feOffset")%></li>
<li><%-await wrapSVGElement("fePointLight")%></li>
<li><%-await wrapSVGElement("feSpecularLighting")%></li>
<li><%-await wrapSVGElement("feSpotLight")%></li>
<li><%-await wrapSVGElement("feTile")%></li>
<li><%-await wrapSVGElement("feTurbulence")%></li>
<li><%-await wrapSVGElement("filter")%></li>
<li><%-await wrapSVGElement("font")%></li>
<li><%-await wrapSVGElement("font-face")%></li>
<li><%-await wrapSVGElement("font-face-format")%></li>
<li><%-await wrapSVGElement("font-face-name")%></li>
<li><%-await wrapSVGElement("font-face-src")%></li>
<li><%-await wrapSVGElement("font-face-uri")%></li>
<li><%-await wrapSVGElement("foreignObject")%></li>
</ol>
</li>
<li>G
<ol>
<li><%-await wrapSVGElement("g")%></li>
<li><%-await wrapSVGElement("glyph")%></li>
<li class="deprecatedElement"><%-await wrapSVGElement("glyphRef")%></li>
</ol>
</li>
<li>H
<ol>
<li><%-await wrapSVGElement("hkern")%></li>
</ol>
</li>
<li>I
<ol>
<li><%-await wrapSVGElement("image")%></li>
</ol>
</li>
<li>J-L
<ol>
<li><%-await wrapSVGElement("line")%></li>
<li><%-await wrapSVGElement("linearGradient")%></li>
</ol>
</li>
<li>M
<ol>
<li><%-await wrapSVGElement("marker")%></li>
<li><%-await wrapSVGElement("mask")%></li>
<li><%-await wrapSVGElement("metadata")%></li>
<li><%-await wrapSVGElement("missing-glyph")%></li>
<li><%-await wrapSVGElement("mpath")%></li>
</ol>
</li>
<li>N-P
<ol>
<li><%-await wrapSVGElement("path")%></li>
<li><%-await wrapSVGElement("pattern")%></li>
<li><%-await wrapSVGElement("polygon")%></li>
<li><%-await wrapSVGElement("polyline")%></li>
</ol>
</li>
<li>Q-R
<ol>
<li><%-await wrapSVGElement("radialGradient")%></li>
<li><%-await wrapSVGElement("rect")%></li>
</ol>
</li>
<li>S
<ol>
<li><%-await wrapSVGElement("script")%></li>
<li><%-await wrapSVGElement("set")%></li>
<li><%-await wrapSVGElement("stop")%></li>
<li><%-await wrapSVGElement("style")%></li>
<li><%-await wrapSVGElement("svg")%></li>
<li><%-await wrapSVGElement("switch")%></li>
<li><%-await wrapSVGElement("symbol")%></li>
</ol>
</li>
<li>T
<ol>
<li><%-await wrapSVGElement("text")%></li>
<li><%-await wrapSVGElement("textPath")%></li>
<li><%-await wrapSVGElement("title")%></li>
<li class="deprecatedElement"><%-await wrapSVGElement("tref")%></li>
<li><%-await wrapSVGElement("tspan")%></li>
</ol>
</li>
<li>U
<ol>
<li><%-await wrapSVGElement("use")%></li>
</ol>
</li>
<li>V-Z
<ol>
<li><%-await wrapSVGElement("view")%></li>
<li><%-await wrapSVGElement("vkern")%></li>
</ol>
</li>
</ol></li></details>
</ol>
</section>
<%}%>

0 comments on commit dd191fa

Please sign in to comment.