repo sync

Author: Octomerger

layouts/product-landing.html

@@ -35,8 +35,8 @@ <h3 class="f4 text-normal text-mono text-uppercase color-gray-5">{% data ui.toc.
             <ul class="list-style-none">
               {% for link in featuredLinks.guides %}
                 <li class="border-top">
-                  <a class="link-with-intro Bump-link--hover no-underline d-block py-4" href="{{ link.href }}">
-                    <h4 class="link-with-intro-title link-gray-dark mb-1">{{ link.title }}<span class="Bump-link-symbol">→</span></h4>
+                  <a class="link-with-intro Bump-link--hover no-underline d-block py-3" href="{{ link.href }}">
+                    <h4 class="link-with-intro-title mb-1">{{ link.title }}<span class="Bump-link-symbol">→</span></h4>
                     <p class="link-with-intro-intro color-gray-5 mb-0">{{ link.intro | truncatewords: 12 }}</p>
                   </a>
                 </li>
@@ -52,7 +52,7 @@ <h3 class="f4 text-normal text-mono text-uppercase color-gray-5">{% data ui.toc.
               {% for link in featuredLinks.popular %}
                 <li class="border-top">
                   <a class="link-with-intro Bump-link--hover no-underline d-block py-3" href="{{ link.href }}">
-                    <h4 class="link-with-intro-title link-gray-dark">{{ link.title }}<span class="Bump-link-symbol">→</span></h4>
+                    <h4 class="link-with-intro-title">{{ link.title }}<span class="Bump-link-symbol">→</span></h4>
                   </a>
                 </li>
               {% endfor %}
@@ -68,11 +68,11 @@ <h3 class="f4 text-normal text-mono text-uppercase color-gray-5">{% data ui.toc.
               {% for link in page.changelog %}
                 <li class="border-top">
                   <a href="{{ link.href }}" class="d-block text-gray-dark Bump-link--hover py-3 no-underline">
+                    <h4>{{ link.title }} <span class="Bump-link-symbol">→</span></h4>
                     <time
-                      class="tooltipped tooltipped-n text-gray-light text-mono mb-1"
+                      class="tooltipped tooltipped-n text-gray-light text-mono mt-1"
                       aria-label="{{ link.date | date: '%B %d, %Y' }}"
                     >{{ link.date | date: "%B %d" }}</time>
-                    <h4>{{ link.title }} <span class="Bump-link-symbol">→</span></h4>
                   </a>
                 </li>
               {% endfor %}

lib/page.js

@@ -19,6 +19,7 @@ const renderContent = require('./render-content')
 const frontmatter = require('./frontmatter')
 const products = require('./all-products')
 const slash = require('slash')
+const statsd = require('./statsd')
 
 class Page {
   constructor (opts) {
@@ -84,6 +85,10 @@ class Page {
         : true
     }
 
+    // Instrument the `_render` method, so externally we call #render
+    // but it's wrapped in a timer that reports to Datadog
+    this.render = statsd.asyncTimer(this._render.bind(this), 'page.render')
+
     return this
   }
 
@@ -116,7 +121,7 @@ class Page {
       : this.renderProp('title', context, opts)
   }
 
-  async render (context) {
+  async _render (context) {
     this.intro = await renderContent(this.rawIntro, context)
     this.introPlainText = await renderContent(this.rawIntro, context, { textOnly: true })
     this.title = await renderContent(this.rawTitle, context, { textOnly: true, encodeEntities: true })

lib/statsd.js

@@ -0,0 +1,14 @@
+const StatsD = require('hot-shots')
+
+const mock = Boolean(process.env.NODE_ENV === 'test' || !process.env.DATADOG_API_KEY)
+
+/**
+ * @type {import('hot-shots').StatsD}
+ */
+module.exports = new StatsD({
+  prefix: 'docs.',
+  mock,
+  globalTags: {
+    app: 'docs'
+  }
+})

middleware/render-page.js

@@ -5,6 +5,7 @@ const patterns = require('../lib/patterns')
 const layouts = require('../lib/layouts')
 const getMiniTocItems = require('../lib/get-mini-toc-items')
 const Page = require('../lib/page')
+const statsd = require('../lib/statsd')
 
 // We've got lots of memory, let's use it
 // We can eventually throw this into redis
@@ -18,6 +19,7 @@ module.exports = async function renderPage (req, res, next) {
   if (!process.env.CI && process.env.NODE_ENV !== 'test') {
     if (req.method === 'GET' && pageCache[originalUrl]) {
       console.log(`Serving from cached version of ${originalUrl}`)
+      statsd.increment('page.sent_from_cache')
       return res.send(pageCache[originalUrl])
     }
   }

package-lock.json

@@ -42,6 +42,7 @@
     "got": "^9.6.0",
     "gray-matter": "^4.0.1",
     "helmet": "^3.21.2",
+    "hot-shots": "^8.2.0",
     "html-entities": "^1.2.1",
     "html-truncate": "^1.2.2",
     "imurmurhash": "^0.1.4",