diff --git a/content/index/index.html b/content/index/index.html index bda61e74ce..983d2a2aa3 100644 --- a/content/index/index.html +++ b/content/index/index.html @@ -21,6 +21,7 @@

About the Index

Examples by Role

@@ -903,6 +904,7 @@

Examples By Properties and States

+ diff --git a/content/shared/js/app.js b/content/shared/js/app.js index c995c59d42..89a0c302ec 100644 --- a/content/shared/js/app.js +++ b/content/shared/js/app.js @@ -20,14 +20,20 @@ // Determine we are on an example page if (!document.location.href.match(/examples\/[^/]+\.html/)) return; + const isExperimental = + document.querySelector('main')?.getAttribute('data-content-phase') === + 'experimental'; + + const usageWarningLink = isExperimental + ? '/templates/experimental-example-usage-warning.html' + : '/templates/example-usage-warning.html'; + // Generate the usage warning link using app.js link as a starting point const scriptSource = document .querySelector('[src$="app.js"]') .getAttribute('src'); - const fetchSource = scriptSource.replace( - '/js/app.js', - '/templates/example-usage-warning.html' - ); + + const fetchSource = scriptSource.replace('/js/app.js', usageWarningLink); // Load and parse the usage warning and insert it before the h1 const html = await (await fetch(fetchSource)).text(); diff --git a/content/shared/templates/experimental-example-usage-warning.html b/content/shared/templates/experimental-example-usage-warning.html new file mode 100644 index 0000000000..3a60e69164 --- /dev/null +++ b/content/shared/templates/experimental-example-usage-warning.html @@ -0,0 +1,24 @@ + + + + Experimental Support Notice (Template) + +

Read This First

+
+ + Experimental content! Do not use except for new standards development purposes. + Please read below to understand why. + +

This is an experimental implementation of potential future techniques that may not yet be supported by web standards.

+ +
+ + diff --git a/scripts/reference-tables.js b/scripts/reference-tables.js index 109773938f..56d33e9f66 100644 --- a/scripts/reference-tables.js +++ b/scripts/reference-tables.js @@ -161,6 +161,7 @@ const ariaPropertiesAndStates = [ let indexOfRoles = {}; let indexOfPropertiesAndStates = {}; +const indexOfExperimentalContent = []; console.log('Generating index...'); @@ -209,6 +210,10 @@ function getPropertiesAndStates(html) { return propertiesAndStates; } +function addExampleToExperimentalContent(example) { + indexOfExperimentalContent.push(example); +} + function addExampleToRoles(roles, example) { for (let i = 0; i < roles.length; i++) { let role = roles[i]; @@ -268,6 +273,10 @@ glob let html = HTMLParser.parse(data); + const isExperimental = + html.querySelector('main')?.getAttribute('data-content-phase') === + 'experimental'; + let ref = file.replace('content', '..'); let title = html .querySelector('title') @@ -283,8 +292,12 @@ glob highContrast: data.toLowerCase().indexOf('high contrast') > 0, }; - addExampleToRoles(getRoles(html), example); - addExampleToPropertiesAndStates(getPropertiesAndStates(html), example); + if (isExperimental) { + addExampleToExperimentalContent(example); + } else { + addExampleToRoles(getRoles(html), example); + addExampleToPropertiesAndStates(getPropertiesAndStates(html), example); + } }); // Add landmark examples, since they are a different format @@ -390,6 +403,19 @@ let examplesByProps = sortedPropertiesAndStates.reduce(function (set, prop) { `; }, ''); +const examplesExperimental = indexOfExperimentalContent + .map(exampleListItem) + .join(''); + +if (examplesExperimental.length === 0) { + // Do no display the experimental section if there are no experimental examples + $('#examples_experimental').remove(); + // Remove the
  • element containing the link to Experimental Examples + $('a[href="#examples_experimental_label"]').parent().remove(); +} else { + $('#examples_experimental_ul').html(examplesExperimental); +} + $('#examples_by_props_tbody').html(examplesByProps); // cheerio seems to fold the doctype lines despite the template diff --git a/scripts/reference-tables.template b/scripts/reference-tables.template index 6e60f2b680..8f6945ca75 100644 --- a/scripts/reference-tables.template +++ b/scripts/reference-tables.template @@ -22,6 +22,7 @@

    Examples by Role

    @@ -52,6 +53,13 @@
    +
    +

    Experimental Examples

    +
    NOTE: The HC abbreviation means example has High Contrast support.
    + +