ddbeck/mockup.html

## mockup.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
      body {
        font-family: "Open Sans", Arial;
      }

      div {
        padding: 1em;
        margin-bottom: 1em;
      }

      .mdn {
        max-width: 600px;
        line-height: 1.5;
        font-family: "Open Sans",arial,x-locale-body,sans-serif;
        border: 1px solid black;
      }

      .serp {
        border: 1px solid black;
        max-width: 600px;
      }

      .serp h3 {
        margin-bottom: 0;
      }

      .serp p {
        margin-top: .5em;
        font-size: 80%;
      }

      .serp .date {
        color: gray;
      }

      .tooltip {
        background: black;
        color: white;
        font-size: 16px;
        max-width: 600px;
        border: 1px solid black;
      }

      .tooltip .wrapper {
        width: 600px;
        display: grid;
        grid-gap: 20px;
        grid-template-columns: auto 1fr;
      }

      .tooltip .code {
        font-weight: bold;
      }

      .tooltip .tiptext {
        padding: 5px;
        border: 1px solid white;
        color: lightgray;
        background-color: #6666;
        max-width: 15em;
      }

      .info {
        border: 1px solid black;
        width: 600px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div v-for="item in items">
        <h1>{{ item.name }}</h1>
        <div class="mdn">
            <h2>MDN page for {{ item.name }}</h2>
            <p><span class="seoSummary" v-html="item.html"></p>
          </div>

          <div class="serp">
            <h2>SERP for {{ item.name }}</h2>

            <h3><a href="">{{ item.name }} - CSS: Cascading Style Sheets | MDN</a></h3>
            <p><span class="date">24 Aug 2018 - </span>{{ trim(item.html) | striphtml }}</p>
          </div>

          <div class="tooltip">
            <h2>Tooltip for {{ item.name }}</h2>
            <div class="wrapper">
              <p class="code"><code>{{ item.name }}: someValue</code></p>
              <p class="tiptext">{{ item.html | striphtml }}<br><br>syntax: lorem ipsum</p>
            </div>
          </div>

          <div class="info">
            <h2>Info for {{ item.name }}</h2>
            <ul>
              <li><strong>Display characters:</strong> {{ displayCharacters(item.html) }}</li>
              <li><strong>150 characters:</strong> {{ item.html | striphtml | trim(150) }}</li>
            </ul>
          </div>
      </div>
    </div>

    <script>
      var data = [
        {
          name: "background-position",
          html: `The <strong><code>background-position</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property sets the start position, relative to the area set by <a href="/en-US/docs/Web/CSS/background-origin" title="The background-origin CSS property sets the background positioning area, i.e., the origin position of an image specified using the background-image property."><code>background-origin</code></a>, for each background image.`
        },
        {
          name: "grid-template-rows",
          html: `The <strong><code>grid-template-rows</code></strong> CSS property sets the line names and track sizing functions of the <a href="/en-US/docs/Glossary/grid_rows" class="glossaryLink" title="grid rows: A grid row is a horizontal track in a CSS Grid Layout, that is the space between two horizontal grid lines. It is defined by the grid-template-rows property or in the shorthand grid or grid-template properties.">grid rows</a>.`
        },
        {
          name: "border",
          html: `The <strong><code>border</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> property is a <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> for setting all individual border property values in a single declaration. It can set <a href="/en-US/docs/Web/CSS/border-width" title="The border-width CSS property is a shorthand property for setting the widths on all four sides of an element's border."><code>border-width</code></a>, <a href="/en-US/docs/Web/CSS/border-style" title="The border-style&nbsp;CSS property is a shorthand property that sets the line style for all four sides of an element's border."><code>border-style</code></a>, and <a href="/en-US/docs/Web/CSS/border-color" title="The border-color CSS property is a shorthand property for setting the colors on all four sides of an element's border."><code>border-color</code></a>.`
        },
        {
          name: "float",
          html: `The <strong><code>float</code></strong> CSS property places an element along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to <a href="/en-US/docs/Web/CSS/position#Absolute_positioning">absolute positioning</a>).`
        },
        {
          name: "flex-direction",
          html: `The <strong><code>flex-direction</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).`
        },
        {
          name: "font-weight",
          html: `The <strong><code>font-weight</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> property sets the weight (or boldness) of the font. The font weights available to you will depend on the <a href="/en-US/docs/Web/CSS/font-family" title="The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element."><code>font-family</code></a> you are using. Some fonts are only available in <code>normal</code> and <code>bold</code>.`
        },
        {
          name: "ime-mode",
          html: `The <strong><code>ime-mode</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property controls the state of the input method editor (IME) for text fields. This property is obsolete.`
        },
        {
          name: "border-top-color",
          html: `The <strong><code>border-top-color</code></strong> CSS property sets the color of an element's top <a href="/en-US/docs/Web/CSS/border"><code>border</code></a>. The property can also be set with the shorthand properties <a href="/en-US/docs/Web/CSS/border-color"><code>border-color</code></a> and <a href="/en-US/docs/Web/CSS/border-top"><code>border-top</code></a>.`
        },
        {
          name: "color",
          html: `The <strong><code>margin-block-start</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> property defines the logical block start margin of an element. The logical block start margin maps to a physical margin depending on the element's writing mode, directionality, and text orientation.`
        },
        {
          name: "color",
          html: `The <strong><code>color</code></strong> CSS property sets the foreground <a href="">color value</a> of an element's text content and <a href="/en-US/docs/Web/CSS/text-decoration">text decorations</a>. It also sets the <a href="/en-US/docs/Web/CSS/currentcolor" title="The <color> CSS data type represents a color in the sRGB color space. A color can be described in any of the following ways:"><code>currentcolor</code></a> value, which may be used as an indirect value on <em>other</em> properties, and is the default for other color properties, such as <a><code>border-color</code></a>.</span>`
        }
      ];

      // strip HTML tags from value (i.e., text only)
      const stripFilter = (value) => {
        var div = document.createElement("div");
        div.innerHTML = value;
        var text = div.textContent || div.innerText || "";
        return text;
      };
      Vue.filter('striphtml', stripFilter);

      // trim value to limit characters
      const trim = (value, limit) => {
        if (value.length > limit) {
          return value.slice(0, limit) + '...';
        } else {
          return value;
        }
      };
      Vue.filter('trim', trim);

      const displayCharacters = (value) => {
        return stripFilter(value).length;
      }

      var app = new Vue({
        el: '#app',
        data: {
          items: data
        },
        methods: {
          trim: trim,
          displayCharacters: displayCharacters
        }
      });
    </script>
  </body>
</html>
	<html>
	<head>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style>
	body {
	font-family: "Open Sans", Arial;
	}

	div {
	padding: 1em;
	margin-bottom: 1em;
	}

	.mdn {
	max-width: 600px;
	line-height: 1.5;
	font-family: "Open Sans",arial,x-locale-body,sans-serif;
	border: 1px solid black;
	}

	.serp {
	border: 1px solid black;
	max-width: 600px;
	}

	.serp h3 {
	margin-bottom: 0;
	}

	.serp p {
	margin-top: .5em;
	font-size: 80%;
	}

	.serp .date {
	color: gray;
	}

	.tooltip {
	background: black;
	color: white;
	font-size: 16px;
	max-width: 600px;
	border: 1px solid black;
	}

	.tooltip .wrapper {
	width: 600px;
	display: grid;
	grid-gap: 20px;
	grid-template-columns: auto 1fr;
	}

	.tooltip .code {
	font-weight: bold;
	}

	.tooltip .tiptext {
	padding: 5px;
	border: 1px solid white;
	color: lightgray;
	background-color: #6666;
	max-width: 15em;
	}

	.info {
	border: 1px solid black;
	width: 600px;
	}
	</style>
	</head>
	<body>
	<div id="app">
	<div v-for="item in items">
	<h1>{{ item.name }}</h1>
	<div class="mdn">
	<h2>MDN page for {{ item.name }}</h2>
	<p><span class="seoSummary" v-html="item.html"></p>
	</div>

	<div class="serp">
	<h2>SERP for {{ item.name }}</h2>

	<h3><a href="">{{ item.name }} - CSS: Cascading Style Sheets \| MDN</a></h3>
	<p><span class="date">24 Aug 2018 - </span>{{ trim(item.html) \| striphtml }}</p>
	</div>

	<div class="tooltip">
	<h2>Tooltip for {{ item.name }}</h2>
	<div class="wrapper">
	<p class="code"><code>{{ item.name }}: someValue</code></p>
	<p class="tiptext">{{ item.html \| striphtml }}<br><br>syntax: lorem ipsum</p>
	</div>
	</div>

	<div class="info">
	<h2>Info for {{ item.name }}</h2>
	<ul>
	<li><strong>Display characters:</strong> {{ displayCharacters(item.html) }}</li>
	<li><strong>150 characters:</strong> {{ item.html \| striphtml \| trim(150) }}</li>
	</ul>
	</div>
	</div>
	</div>

	<script>
	var data = [
	{
	name: "background-position",
	html: `The <strong><code>background-position</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property sets the start position, relative to the area set by <a href="/en-US/docs/Web/CSS/background-origin" title="The background-origin CSS property sets the background positioning area, i.e., the origin position of an image specified using the background-image property."><code>background-origin</code></a>, for each background image.`
	},
	{
	name: "grid-template-rows",
	html: `The <strong><code>grid-template-rows</code></strong> CSS property sets the line names and track sizing functions of the <a href="/en-US/docs/Glossary/grid_rows" class="glossaryLink" title="grid rows: A grid row is a horizontal track in a CSS Grid Layout, that is the space between two horizontal grid lines. It is defined by the grid-template-rows property or in the shorthand grid or grid-template properties.">grid rows</a>.`
	},
	{
	name: "border",
	html: `The <strong><code>border</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> property is a <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> for setting all individual border property values in a single declaration. It can set <a href="/en-US/docs/Web/CSS/border-width" title="The border-width CSS property is a shorthand property for setting the widths on all four sides of an element's border."><code>border-width</code></a>, <a href="/en-US/docs/Web/CSS/border-style" title="The border-style CSS property is a shorthand property that sets the line style for all four sides of an element's border."><code>border-style</code></a>, and <a href="/en-US/docs/Web/CSS/border-color" title="The border-color CSS property is a shorthand property for setting the colors on all four sides of an element's border."><code>border-color</code></a>.`
	},
	{
	name: "float",
	html: `The <strong><code>float</code></strong> CSS property places an element along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to <a href="/en-US/docs/Web/CSS/position#Absolute_positioning">absolute positioning</a>).`
	},
	{
	name: "flex-direction",
	html: `The <strong><code>flex-direction</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).`
	},
	{
	name: "font-weight",
	html: `The <strong><code>font-weight</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> property sets the weight (or boldness) of the font. The font weights available to you will depend on the <a href="/en-US/docs/Web/CSS/font-family" title="The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element."><code>font-family</code></a> you are using. Some fonts are only available in <code>normal</code> and <code>bold</code>.`
	},
	{
	name: "ime-mode",
	html: `The <strong><code>ime-mode</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property controls the state of the input method editor (IME) for text fields. This property is obsolete.`
	},
	{
	name: "border-top-color",
	html: `The <strong><code>border-top-color</code></strong> CSS property sets the color of an element's top <a href="/en-US/docs/Web/CSS/border"><code>border</code></a>. The property can also be set with the shorthand properties <a href="/en-US/docs/Web/CSS/border-color"><code>border-color</code></a> and <a href="/en-US/docs/Web/CSS/border-top"><code>border-top</code></a>.`
	},
	{
	name: "color",
	html: `The <strong><code>margin-block-start</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> property defines the logical block start margin of an element. The logical block start margin maps to a physical margin depending on the element's writing mode, directionality, and text orientation.`
	},
	{
	name: "color",
	html: `The <strong><code>color</code></strong> CSS property sets the foreground <a href="">color value</a> of an element's text content and <a href="/en-US/docs/Web/CSS/text-decoration">text decorations</a>. It also sets the <a href="/en-US/docs/Web/CSS/currentcolor" title="The <color> CSS data type represents a color in the sRGB color space. A color can be described in any of the following ways:"><code>currentcolor</code></a> value, which may be used as an indirect value on <em>other</em> properties, and is the default for other color properties, such as <a><code>border-color</code></a>.</span>`
	}
	];

	// strip HTML tags from value (i.e., text only)
	const stripFilter = (value) => {
	var div = document.createElement("div");
	div.innerHTML = value;
	var text = div.textContent \|\| div.innerText \|\| "";
	return text;
	};
	Vue.filter('striphtml', stripFilter);

	// trim value to limit characters
	const trim = (value, limit) => {
	if (value.length > limit) {
	return value.slice(0, limit) + '...';
	} else {
	return value;
	}
	};
	Vue.filter('trim', trim);

	const displayCharacters = (value) => {
	return stripFilter(value).length;
	}

	var app = new Vue({
	el: '#app',
	data: {
	items: data
	},
	methods: {
	trim: trim,
	displayCharacters: displayCharacters
	}
	});
	</script>
	</body>
	</html>