chore: Sync with other sites (#73)

* chore: Sync with other sites

* Fix lint error

* Update src/_data/links.json

Co-authored-by: Milos Djermanovic <[email protected]>

* Update src/_includes/layouts/base.html

Co-authored-by: Milos Djermanovic <[email protected]>

* fix conflicts

Co-authored-by: Milos Djermanovic <[email protected]>

.eleventy.js

@@ -1,7 +1,16 @@
 const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+const yaml = require("js-yaml");
 
 module.exports = function(eleventyConfig) {
 
+    // Load site-specific data
+    const siteName = process.env.ESLINT_SITE_NAME || "en";
+    eleventyConfig.addGlobalData("site_name", siteName);
+
+    // Support YAML data files
+    eleventyConfig.addDataExtension("yml", contents => yaml.load(contents));
+
+
     /*****************************************************************************************
      *  Plugins
      * ***************************************************************************************/

package.json

@@ -26,7 +26,7 @@
         "postinstall": "npm run install:playground"
     },
     "devDependencies": {
-        "@11ty/eleventy": "^0.11.1",
+        "@11ty/eleventy": "^1.0.1",
         "@11ty/eleventy-img": "^1.0.0",
         "@11ty/eleventy-navigation": "^0.3.2",
         "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.2",
@@ -47,6 +47,7 @@
         "express": "^4.17.3",
         "imagemin": "^8.0.1",
         "imagemin-cli": "^7.0.0",
+        "js-yaml": "^3.14.1",
         "morgan": "^1.10.0",
         "node-polyfill-webpack-plugin": "^1.1.4",
         "npm-run-all": "^4.1.5",

src/_data/links.json

@@ -0,0 +1,22 @@
+{
+    "github": "https://github.com/eslint/eslint",
+    "twitter": "https://twitter.com/geteslint",
+    "chat": "https://eslint.org/chat",
+    "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"
+}

src/_data/navigation.json

@@ -2,27 +2,23 @@
   "items": [
     {
       "text": "Team",
-      "url": "/team/"
+      "url": "https://eslint.org/team/"
     },
     {
       "text": "Blog",
-      "url": "/blog/"
+      "url": "https://eslint.org/blog/"
     },
     {
       "text": "Docs",
-      "url": "/docs"
+      "url": "https://eslint.org/docs/"
     },
     {
       "text": "Store",
       "url": "https://eslint.threadless.com"
     },
     {
       "text": "Playground",
-      "url": "/play"
+      "url": "https://eslint.org/play"
     }
-  ],
-  "donate": {
-    "text": "Donate",
-    "url": "/donate"
-  }
-}
+  ]
+}

src/_data/site.js

@@ -0,0 +1,28 @@
+/**
+ * @fileoverview Convenience helper for site data.
+ * @author Nicholas C. Zakas
+ */
+
+"use strict";
+
+//-----------------------------------------------------------------------------
+// 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));
+};

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

src/_includes/components/navigation.html

@@ -1,6 +1,6 @@
 <nav class="site-nav" aria-label="Main">
     <div class="flexer">
-        <a href="{{ navigation.donate.url }}" class="c-btn c-btn--primary donate-link">{{navigation.donate.text}}</a>
+        <a href="{{ links.donate }}" class="c-btn c-btn--primary donate-link">{{ site.shared.donate }}</a>
         <button class="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="nav-panel" data-open="false" 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 == 'Playground' %} aria-current="true"{% endif %}>{{ item.text }}</a>
+                {% set itemLink = links[item.link] %}
+                <a href="{{ itemLink }}" {% if "/play" in itemLink %}aria-current="true" {% endif %} {% if item.target
+                    %}target="_blank" {% endif %}>{{ item.text }}</a>
             </li>
             {% endfor %}
         </ul>

src/_includes/layouts/base.njk → src/_includes/layouts/base.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ config.lang }}" class="no-js">
+<html lang="{{ site.language.code }}" class="no-js">
 
 <head>
     <meta charset="UTF-8">
@@ -21,9 +21,9 @@
     <meta property="og:description" content="{{ desc }}">
     <meta property="og:image" content="{{ cover }}" />
     <meta property="og:image:alt" content="{{ coverAlt }}">
-    <meta property="og:locale" content="en_GB">
+    <meta property="og:locale" content="{{ site.locale | replace("-", "_" ) }}">
     <meta property="og:type" content="website">
-    <meta property="og:url" content="https://eslint.org/play">
+    <meta property="og:url" content="https://{{ site.hostname }}/play">
     <!-- Twitter -->
     <meta name="twitter:title" content="{{ title }}">
     <meta name="twitter:card" content="summary_large_image">
@@ -104,7 +104,7 @@
 </head>
 
 <body class="{{ hook }} docs">
-    <a href="#main" class="c-btn c-btn--primary" id="skip-link">Skip to main content</a>
+    <a href="#main" class="c-btn c-btn--primary" id="skip-link">{{ site.shared.skip_to_content }}</a>
 
     {{ content | safe }}
 
@@ -113,6 +113,8 @@
     <script src="{{ '/assets/js/select.js' | url }}"></script>
     <script src="{{ '/assets/js/themes.js' | url }}"></script>
     <script src="{{ '/assets/js/main.js' | url }}"></script>
+    {% include 'partials/analytics.html' %}
+
 </body>
 
 </html>

src/_includes/layouts/main.html

@@ -1,5 +1,5 @@
 ---
-layout: base.njk
+layout: base.html
 ---
 
 {% include "partials/header.html" %}

src/_includes/partials/analytics.html

@@ -0,0 +1,24 @@
+<!--<br>-->
+{% if site.google_analytics.code %}
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-7DGPHY308T"></script>
+<script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+
+    gtag('config', '{{ site.google_analytics.code }}');
+
+    // track clicks to "Donate"
+    document.querySelectorAll("a.donate-link").forEach(
+        el => el.addEventListener("click",
+            () => gtag("event", "donate_click"))
+    );
+
+    // track clicks on sponsor logos
+    document.querySelectorAll("a.sponsor-link").forEach(
+        el => el.addEventListener("click",
+            () => gtag("event", "sponsor_click", el.href || ""))
+    );
+</script>
+{% endif %}

src/_includes/partials/header.html

@@ -1,8 +1,7 @@
 <header class="site-header">
     <div class="wrapper">
-        <a href="https://eslint.org" aria-label="ESLint Homepage" class="logo-link">
+        <a href="/" aria-label="ESLint Homepage" class="logo-link">
             {% include "components/logo.html" %}
-            <span class="logo__text">Playground</span>
         </a>
         {% include "components/navigation.html" %}
     </div>

src/playground/package.json

@@ -5,7 +5,7 @@
     "description": "The codebase for the ESLint PLayground (play.eslint.org)",
     "license": "MIT",
     "dependencies": {
-        "eslint": "latest",
-        "@eslint/eslintrc": "latest"
+        "@eslint/eslintrc": "latest",
+        "eslint": "latest"
     }
 }