eslint/docs/src/_includes/layouts/base.html

   1 <!DOCTYPE html>
   2 <html lang="{{ config.lang }}" class="no-js">
   3 <head>
   4     <meta charset="UTF-8">
   5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
   6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   7     {% if NOINDEX %}
   8     <meta name="robots" content="noindex">
   9     {% endif %}
  10     {% if title %}
  11         {% set page_title = title %}
  12     {% else %}
  13         {% set page_title = site[hook].title %}
  14     {% endif %}
  15
  16     {% set page_title = site.shared.title_format | replace("PAGE_TITLE", page_title) %}
  17     {% set cover_image = ["https://", site.hostname, "/icon-512.png" ] | join %}
  18     {% set cover_image_alt = site.shared.eslint_logo_alt %}
  19     {% set page_desc = site.shared.description %}
  20     {% set relative_page_url = page.url | url | prettyURL %}
  21     {% set page_url = ["https://", site.hostname, relative_page_url ] | join %}
  22
  23     <!-- SEO -->
  24     <title>{{ page_title }}</title>
  25     <meta name="description" content="{{ page_desc }}">
  26     <link rel="canonical" href="{{ page_url }}">
  27
  28     <!-- https://github.com/eslint/eslint/issues/15844 -->
  29     <base href="{{ relative_page_url }}">
  30
  31     <!-- favicon -->
  32     <link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
  33     <link rel="icon" href="/icon.svg" type="image/svg+xml">
  34     <link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
  35     <link rel="manifest" href="/manifest.webmanifest">
  36
  37     <!-- social sharing previews. Make sure every page template has title, desc, and cover url -->
  38     <!-- Open graph -->
  39     <meta property="og:title" content="{{ page_title }}">
  40     <meta property="og:description" content="{{ page_desc }}">
  41     <meta property="og:image" content="{{ cover_image }}" />
  42     <meta property="og:image:alt" content="{{ cover_image_alt }}">
  43     <meta property="og:locale" content="{{ site.locale | replace("-", "_" ) }}">
  44     <meta property="og:type" content="website">
  45     <meta property="og:url" content="{{ page_url }}">
  46     <!-- Twitter -->
  47     <meta name="twitter:title" content="{{ page_title }}">
  48     <meta name="twitter:card" content="summary_large_image">
  49     <meta name="twitter:site" content="@geteslint">
  50     <meta name="twitter:description" content="{{ page_desc }}">
  51     <meta name="twitter:image" content="{{ cover_image }}">
  52     <meta name="twitter:creator" content="@geteslint">
  53
  54
  55     <script type="module">
  56         // This is a capable browser, let's improve the UI further!
  57         document.documentElement.classList.add("enhanced");
  58         document.documentElement.classList.remove('no-js');
  59     </script>
  60
  61     <link rel="preload" href="{{ '/assets/fonts/SpaceGrotesk-Medium-subset.woff2' | url }}" as="font" type="font/woff2" crossorigin>
  62     <link rel="preload" href="{{ '/assets/fonts/Inter-Regular-subset.woff2' | url }}" as="font" type="font/woff2" crossorigin>
  63     <link rel="preload" href="{{ '/assets/fonts/SpaceMono-Regular-subset.woff2' | url }}" as="font" type="font/woff2" crossorigin>
  64     <link rel="preload" href="{{ '/assets/fonts/Consolas.woff' | url }}" as="font" type="font/woff" crossorigin>
  65     <link rel="preconnect" href="https://www.googletagmanager.com/">
  66
  67     <script>
  68          (function () {
  69                 var theme = window.localStorage.getItem("theme");
  70                 if (theme) document.documentElement.setAttribute('data-theme', theme)
  71                 else if (window.matchMedia('(prefers-color-scheme: dark)').matches)
  72                     document.documentElement.setAttribute('data-theme', 'dark');
  73                 else document.documentElement.setAttribute('data-theme', 'light');
  74             })();
  75     </script>
  76
  77
  78     <style>
  79
  80         /* Overrides for funky punctuators */
  81         @font-face {
  82             font-family: "Mono Punctuators";
  83             src: url("{{ '/assets/fonts/Consolas.woff' | url }}") format("woff");
  84             font-weight: 400;
  85             unicode-range: U+40, U+7B, U+7D, U+28, U+29;
  86             font-display: swap;
  87         }
  88
  89         /* Space Grotesk for headings */
  90         @font-face {
  91             font-family: "Space Grotesk";
  92             src: url("{{ '/assets/fonts/SpaceGrotesk-Medium-subset.woff2' | url }}") format("woff2"),
  93             url("{{ '/assets/fonts/SpaceGrotesk-Medium-subset.zopfli.woff' | url }}") format("woff");
  94             font-weight: 500;
  95             font-display: swap;
  96         }
  97
  98         /* Inter for body text */
  99
 100         @font-face {
 101             font-family: "Inter";
 102             src: url("{{ '/assets/fonts/Inter-Regular-subset.woff2' | url }}") format("woff2"),
 103             url("{{ '/assets/fonts/Inter-Regular-subset.zopfli.woff' | url }}") format("woff");
 104             font-weight: 400;
 105             font-display: swap;
 106         }
 107
 108         /* Space Mono for code snippets */
 109
 110         @font-face {
 111             font-family: "Space Mono";
 112             src: url("{{ '/assets/fonts/SpaceMono-Regular-subset.woff2' | url }}") format("woff2"),
 113             url("{{ '/assets/fonts/SpaceMono-Regular-subset.zopfli.woff' | url }}") format("woff");
 114             font-weight: 400;
 115             font-display: swap;
 116         }
 117     </style>
 118     <script>
 119         if ("fonts" in document) {
 120             var InterSemiBold = new FontFace("Inter", "url({{ '/assets/fonts/Inter-SemiBold-subset.woff2' | url }}) format('woff2'), url({{ '/assets/fonts/Inter-SemiBold-subset.zopfli.woff' | url }}) format('woff')", {
 121                 weight: "500",
 122                 style: "normal"
 123             });
 124
 125             Promise.all([InterSemiBold.load()]).then(function(fonts) {
 126                 fonts.forEach(function(font) {
 127                     document.fonts.add(font);
 128                 });
 129             });
 130         }
 131     </script>
 132     <script src="{{ '/assets/js/themes.js' | url }}"></script>
 133     <script type="module" src="{{ '/assets/js/search.js' | url }}"></script>
 134     <link rel="stylesheet" type="text/css" href="{{ '/assets/css/styles.css' | url }}">
 135     <link rel="stylesheet" href="{{ '/assets/css/print.css' | url }}" media="print">
 136     <script src="https://unpkg.com/anchor-js@4.3.1/anchor.min.js"></script>
 137 </head>
 138
 139 <body class="{{ hook }} docs">
 140     <a href="#main" class="c-btn c-btn--primary" id="skip-link">Skip to main content</a>
 141
 142     {{ content | safe }}
 143
 144     <script src="{{ '/assets/js/css-vars-ponyfill@2.js' | url }}"></script>
 145     <script src="{{ '/assets/js/focus-visible.js' | url }}"></script>
 146     <script src="{{ '/assets/js/main.js' | url }}"></script>
 147     <script src="{{ '/assets/js/tabs.js' | url }}"></script>
 148     {% include 'partials/analytics.html' %}
 149
 150     {%- if hook == "component-library" -%}
 151     <script src="{{ '/assets/js/components-index.js' | url }}"></script>
 152     {%- endif -%}
 153
 154
 155 </body>
 156
 157 </html>