Repository: mdn/kuma

Issue:
Escalated number of errors from Google Search Console: Breadcrumbs
[Google Search Console](https://search.google.com/search-console/breadcrumbs/drilldown?resource_id=https%3A%2F%2Fdeveloper.mozilla.org%2F&item_key=CgwICRoIcG9zaXRpb24QAxgP&hl=en) emailed us about a big increase in indexing "errors" about breadcrumbs.
<img width="1174" alt="Screen Shot 2019-09-20 at 1 47 54 PM" src="https://user-images.githubusercontent.com/26739/65347578-4a118c80-dbad-11e9-8bda-8df0bd7871de.png">

The code that produces our breadcrumbs (on the Wiki) [hasn't changed in years](https://github.com/mozilla/kuma/blame/master/kuma/wiki/jinja2/wiki/includes/document_macros.html).


Discussion:
However, look at https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay for example:
```html
    <nav class="crumbs" role="navigation">
      <ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs">
        
          <li property="itemListElement" typeof="ListItem" class="crumb">
            <a href="/en-US/docs/Web" property="item" typeof="WebPage">
              <span property="name">Web technology for developers</span>
            </a>
            <meta property="position" content="1">
          </li>
        
          <li property="itemListElement" typeof="ListItem" class="crumb">
            <a href="/en-US/docs/Web/CSS" property="item" typeof="WebPage">
              <span property="name">CSS: Cascading Style Sheets</span>
            </a>
            <meta property="position" content="2">
          </li>
        
        <li property="itemListElement" typeof="ListItem" class="crumb">
          <span property="name" aria-current="page">animation-delay</span>
        </li>
      </ol>
    </nav>
```

Note how the last `<li>` doesn't have a `<meta property="position" content="X">`. Looking at the Jinja code, it never has. Basically, only the parents have these `<meta>` tags. 

Perhaps the rules have changed recently. 
I still don't know why this is a new problem suddenly but it's rather easy to do validation. I copied the `<ol>` code from view-source:https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay and pasted it in and tested:
<img width="1500" alt="Screen Shot 2019-09-20 at 2 20 44 PM" src="https://user-images.githubusercontent.com/26739/65349646-f5bcdb80-dbb1-11e9-96ac-5fb60dbcc6a5.png">

That's actually the same error that Google Search Console reported. 
I can easily get rid of that error about `position` simply by putting in a `<meta property="position" content="3">` inside the *last* `<li>` block element. 

However, where do I put that `item` property? The last `<span>` already has `property="name"`.. Hm...
What the heck is an `id`? 
<img width="1496" alt="Screen Shot 2019-09-20 at 2 32 32 PM" src="https://user-images.githubusercontent.com/26739/65350353-86e08200-dbb3-11e9-90d3-ec905042cd29.png">
There is *no* mention of it [in the spec](https://schema.org/BreadcrumbList).


Resolving patch:
diff --git a/kuma/wiki/templatetags/jinja_helpers.py b/kuma/wiki/templatetags/jinja_helpers.py
--- a/kuma/wiki/templatetags/jinja_helpers.py
+++ b/kuma/wiki/templatetags/jinja_helpers.py
@@ -262,3 +262,12 @@ def include_svg(path, title=None, title_id=None):
     else:
         svg_out = svg
     return jinja2.Markup(svg_out)
+
+
+@library.filter
+def length_plus_one(lengthy):
+    """Useful when you want to do something like
+    `{{ somelist|length_plus_one }}` and you want it to output the
+    Python equivalent of `len(somelist) + 1`.
+    """
+    return len(lengthy) + 1


Test patch: