docs: Update analytics, canonical URL, ads (#15996)

* docs: Update analytics, canonical URL, ads * Update docs/src/_includes/layouts/base.html Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com> * Update docs/src/_data/links.json Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com> * Update docs/src/_includes/partials/docs-footer.html Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com> Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>
eslint · Jun 15, 2022 · 4871047 · 4871047
1 parent d94dc84
commit 4871047
Show file tree

Hide file tree

Showing 17 changed files with 291 additions and 59 deletions.
diff --git a/docs/.eleventy.js b/docs/.eleventy.js
@@ -9,6 +9,7 @@ const markdownItAnchor = require("markdown-it-anchor");
 const markdownItContainer = require("markdown-it-container");
 const Image = require("@11ty/eleventy-img");
 const path = require("path");
+const yaml = require("js-yaml");
 
 const {
     DateTime
@@ -39,7 +40,16 @@ module.exports = function(eleventyConfig) {
         pathPrefix = "/docs/latest/";
     }
 
+    //------------------------------------------------------------------------------
+    // Data
+    //------------------------------------------------------------------------------
+
+    // Load site-specific data
+    const siteName = process.env.ESLINT_SITE_NAME || "en";
+
+    eleventyConfig.addGlobalData("site_name", siteName);
     eleventyConfig.addGlobalData("GIT_BRANCH", process.env.BRANCH);
+    eleventyConfig.addDataExtension("yml", contents => yaml.load(contents));
 
     //------------------------------------------------------------------------------
     // Filters

diff --git a/docs/package.json b/docs/package.json
@@ -30,6 +30,7 @@
         "eleventy-plugin-reading-time": "^0.0.1",
         "imagemin": "^8.0.1",
         "imagemin-cli": "^7.0.0",
+        "js-yaml": "^3.14.1",
         "luxon": "^2.4.0",
         "markdown-it": "^12.2.0",
         "markdown-it-anchor": "^8.1.2",

diff --git a/docs/src/_data/links.json b/docs/src/_data/links.json
@@ -2,5 +2,21 @@
     "github": "https://github.com/eslint/eslint",
     "twitter": "https://twitter.com/geteslint",
     "chat": "https://eslint.org/chat",
-    "group": "https://groups.google.com/group/eslint"
-}
+    "group": "https://groups.google.com/group/eslint",
+
+    "blog": "/blog",
+    "docs": "/docs/latest/",
+    "playground": "/play",
+    "getStarted": "/docs/latest/user-guide/getting-started",
+    "sponsors": "/sponsors",
+    "branding": "/branding",
+    "store": "https://eslint.threadless.com",
+    "team": "/team",
+
+    "configuring": "https://eslint.org/docs/user-guide/configuring/",
+    "fixProblems": "https://eslint.org/docs/user-guide/command-line-interface#fixing-problems",
+
+    "donate": "/donate",
+    "openCollective": "https://opencollective.com/eslint",
+    "githubSponsors": "https://github.com/sponsors/eslint"
+}
diff --git a/docs/src/_data/site.js b/docs/src/_data/site.js
@@ -0,0 +1,26 @@
+/**
+ * @fileoverview Convenience helper for site data.
+ * @author Nicholas C. Zakas
+ */
+
+//-----------------------------------------------------------------------------
+// Requirements
+//-----------------------------------------------------------------------------
+
+const path = require("path");
+const fs = require("fs");
+const yaml = require("js-yaml");
+
+//-----------------------------------------------------------------------------
+// Exports
+//-----------------------------------------------------------------------------
+
+module.exports = function(eleventy) {
+
+    const siteName = eleventy.site_name;
+    const siteDataFile = path.resolve(__dirname, `sites/${siteName}.yml`);
+
+    fs.statSync(siteDataFile);
+
+    return yaml.load(fs.readFileSync(siteDataFile));
+}
diff --git a/docs/src/_data/sites/en.yml b/docs/src/_data/sites/en.yml
@@ -0,0 +1,109 @@
+#------------------------------------------------------------------------------
+# English Site Details
+# The documentation site that is hosted at eslint.org/docs
+# Author: Nicholas C. Zakas
+#------------------------------------------------------------------------------
+
+#------------------------------------------------------------------------------
+# Global Settings
+#------------------------------------------------------------------------------
+
+language:
+  code: en
+  flag: 🇺🇸
+  name: English (US)
+locale: en-US
+hostname: eslint.org
+
+#------------------------------------------------------------------------------
+# Analytics
+#------------------------------------------------------------------------------
+
+google_analytics:
+  code: "G-7DGPHY308T"
+
+#------------------------------------------------------------------------------
+# Ads
+#------------------------------------------------------------------------------
+
+carbon_ads:
+  serve: CESDV2QM
+  placement: eslintorg
+
+#------------------------------------------------------------------------------
+# Shared
+#------------------------------------------------------------------------------
+
+shared:
+  get_started: Get Started
+  become_a_sponsor: Become a Sponsor
+  eslint_logo_alt: ESLint logo
+  description: >
+    A pluggable and configurable linter tool for identifying and reporting on
+    patterns in JavaScript. Maintain your code quality with ease.
+  title_format: PAGE_TITLE - ESLint - Pluggable JavaScript Linter
+  skip_to_content: Skip to main content
+  donate: Donate
+
+#------------------------------------------------------------------------------
+# Navigation
+#------------------------------------------------------------------------------
+
+navigation:
+- text: Team
+  link: team
+- text: Blog
+  link: blog
+- text: Docs
+  link: docs
+- text: Store
+  link: store
+  target: _blank
+- text: Playground
+  link: playground
+
+#------------------------------------------------------------------------------
+# Footer
+#------------------------------------------------------------------------------
+
+footer:
+  title: Ready to fix your JavaScript code?
+  description: Install from npm or start donating today.
+  secondary: Secondary
+  social_icons:
+    title: Social Media
+    twitter: Twitter
+    chat: Discord
+    mailing_list: Google Group
+    github: GitHub
+  theme_switcher:
+    title: Theme Switcher
+    light: Light
+    dark: Dark
+  language_switcher:
+    title: Language Switcher
+    description: Selecting a language will take you to the ESLint website in that language.
+    change_language: Change Language
+    language: Language
+  copyright: >
+    &copy; OpenJS Foundation and ESLint contributors, <a href="https://www.openjsf.org">www.openjsf.org</a>
+  links:
+    open_jsf: The OpenJS Foundation
+    terms: Terms of Use
+    privacy: Privacy Policy
+    bylaws: OpenJS Foundation Bylaws
+    trademark: Trademark Policy
+    trademark_list: Trademark List
+    cookies: Cookie Policy
+
+#------------------------------------------------------------------------------
+# 404 Page
+#------------------------------------------------------------------------------
+
+404_page:
+  title: 404 error
+  subtitle: Page not found
+  description: Sorry, the page you are looking for doesn't exist or has been moved.
+  actions:
+    back_to_home: Back to homepage
+    browse_docs: Browse the docs
diff --git a/docs/src/_includes/components/language-switcher.html b/docs/src/_includes/components/language-switcher.html
@@ -1,22 +1,22 @@
 <div class="language-switcher">
-    <a href="/languages/" class="switcher-fallback">Change language</a>
-    <div hidden role="region" class="switcher switcher--language" aria-labelledby="language-switcher-label" id="language-switcher">
-        <span id="language-switcher-label" hidden>Language Selector</span>
+    <a href="/languages/" class="switcher-fallback">{{ site.footer.language_switcher.change_language }}</a>
+    <div hidden role="region" class="switcher switcher--language" aria-labelledby="language-switcher-label"
+        id="language-switcher">
+        <span id="language-switcher-label" hidden>{{ site.footer.language_switcher.title }}</span>
         <div class="infobox visually-hidden" id="language-infobox">
-            Selecting a language will take you to the ESLint Web site in that language.
+            {{ site.footer.language_switcher.description }}
         </div>
-
         <label class="switcher__label" for="language-select">
             <span class="label__text">
-                Language
+                {{ site.footer.language_switcher.language }}
             </span>
         </label>
-        <select name="language selector" id="language-select" aria-describedby="language-infobox" class="c-custom-select switcher__select">
-            {% for language in languages.items %}
-            <option value="{{ language.code }}"
-                    data-url="{{ language.url }}"
-                    {% if config.lang == language.code %} selected {% endif %}>
-                {{ language.flag }} {{ language.name }}
+        <select name="language selector" id="language-select" aria-describedby="language-infobox"
+            class="c-custom-select switcher__select">
+            {% for key, other_site in sites %}
+            <option value="{{ other_site.language.code }}" data-url="https://{{ other_site.hostname }}" {% if
+                site.language.code==other_site.language.code %} selected {% endif %}>
+                {{ other_site.language.flag }} {{ other_site.language.name }}
             </option>
             {% endfor %}
         </select>

diff --git a/docs/src/_includes/components/navigation.html b/docs/src/_includes/components/navigation.html
@@ -1,6 +1,6 @@
 <nav class="docs-site-nav" aria-label="Main">
     <div class="flexer">
-        <a href="/donate/" class="c-btn c-btn--primary donate-link">Donate</a>
+        <a href="{{ links.donate }}" class="c-btn c-btn--primary donate-link">{{ site.shared.donate}}</a>
         <button class="docs-site-nav-toggle" aria-label="Menu" id="nav-toggle" hidden>
             <svg width="20" height="20" viewBox="20 20 60 60">
                 <path id="ham-top"    d="M30,37 L70,37 Z" stroke="currentColor"></path>
@@ -11,9 +11,11 @@
     </div>
     <div class="docs-nav-panel" id="nav-panel">
         <ul id="nav-list">
-            {% for item in navigation.items %}
+            {% for item in site.navigation %}
             <li>
-                <a href="{{ item.url }}" {% if item.text == 'Docs' %} aria-current="true"{% endif %}>{{ item.text }}</a>
+                {% set itemLink = links[item.link] %}
+                <a href="{{ itemLink }}" {% if "/docs" in itemLink %}aria-current="true"{% endif %} {% if item.target
+                    %}target="_blank" {% endif %}>{{ item.text }}</a>
             </li>
             {% endfor %}
         </ul>