wvuwebgist

## wufoo-remove-iframe-attributes.js
// --- Add a `title` Attribute to Wufoo's <iframe> and remove ---
// --- superflous presentational attributes ---
// We have to wait until the <iframe> is built to add stuff to it;
// hence, the reason for using the MutationObserver API. It listens
// for when the node is finished building, then we can add & remove stuff.
var wufooOptions = {
  wufooId: 'wufoo-xilwg7v0n5ncc2', // The id of the <div> Wufoo gives you for their JS form embed
  titleContent: 'Cast your vote by selecting a hat.' // The content for your title attribute
};

## _blog-feed.html
<r:blog id="1234"> <!-- Change this ID to your blog_index page's ID -->
  <r:articles limit="5">
    <r:if_articles>
      <ul>
        <r:each>
          <li><a href="<r:article:path />"><r:article:name /></a>
            <r:select_html css_selector="p" limit="2">
              <r:article:content name="article-body" />
            </r:select_html></li>
        </r:each>

## _featured-blog-post.html
<r:blog id="197"> <r:comment><!-- Change to your blog's page ID --></r:comment>
  <r:articles:each tags="featured" limit="1"> <r:comment><!-- Change the tag(s) to what you want to feature. Comma separate multiple tags. --></r:comment>
    <article class="wvu-article">
      <h2 class="wvu-article__title"><a href="<r:article:path />"><r:article:name /></a></h2>
      <p class="wvu-article__meta">
        <r:article:author_full_name /> |
        <time class="wvu-article__date" datetime="<r:date_format format="iso8601" value="{article:published_at}" />"><r:date_format format="%A, %B %d, %Y" value="{article:published_at}" /></time>
      </p> <!-- /.wvu-article__meta -->
      <div class="wvu-article__body">
        <r:select_html css_selector="p" limit="1">

## _featured-blog-post--simple.html
<r:blog id="1234"> <r:comment><!-- Change to your blog's page id. --></r:comment>
  <r:articles tags="featured" limit="1">
    <r:each>
      <h1><r:article:name /></h1>
    </r:each>
  </r:articles>
</r:blog>

## _exclude-labelled-blog-posts.html
<r:blog id="1234"> <!-- Change this to your blog's ID. -->
  <r:articles limit="5" tags_op="none" tags="dont-show-stuff-with-this-label" >
    <r:if_articles>
      <ul>
        <r:each>
          <li><a href="<r:article:path />"><r:article:name /></a></li>
        </r:each>
      </ul>
    </r:if_articles>
    <r:if_no_articles>

## _random-image-loop--different-sizes.html
<r:comment><!-- Randomize the hero image and generate variables for different sizes based on a label: --></r:comment>
<r:files:each labels="random-image-collection" limit="1" types="image" random="true">
  <r:set_var name="image_small"><r:file:image_url size="500x400" /></r:set_var>
  <r:set_var name="image_large"><r:file:image_url size="1000x800" /></r:set_var>
</r:files:each>

<style>
  .wvu-hero {
    background-image: url(<r:var name="image_small" />);
  } /* /.wvu-hero */

## nav.html
<!-- Output of: -->
<!-- <r:site_menu max_depth="2" ul_class="wvu-nav__items" has_children_class="dropdown" sub_ul_class="sub-menu" /> -->
<!-- https://bitbucket.org/wvudigital/brand-patterns/src/7bb0f85a11bfcce06191d13902d5653f9dc9aa91/views/patterns/_wvu-nav-dropdowns.html#lines-18 -->

<ul class="wvu-nav__items">
  <li><a href="#">Home</a></li>
  <li class="dropdown">
    <a href="#">General Guidelines</a>
    <ul class="sub-menu sub-menu--level-1">
      <li><a class="cs-external-link " title="" target="_self" href="#">Brand Guidelines</a></li>

## w3c-valid.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>A W3C Valid HTML Document</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

## cleanslate-custom-page-data-example.yml
---
layout: default
# These are the custom data attributes that can be applied to the page.
custom_data_attributes:
  - fancy_description:
    type: text
    title: "Fancy Description"
    rows: 6
    maxlength: 200
    wrap: "soft"

## dynamic-tags.html
---
layout: default
custom_data_attributes:
  - tags_to_pull
---
<!--
  Step 1: ☝️ Add the `tags_to_pull` custom data attribute to the
  page template you want to output the feed on.
-->
	<r:blog id="1234"> <!-- Change this ID to your blog_index page's ID -->
	<r:articles limit="5">
	<r:if_articles>
	<ul>
	<r:each>
	<li><a href="<r:article:path />"><r:article:name /></a>
	<r:select_html css_selector="p" limit="2">
	<r:article:content name="article-body" />
	</r:select_html></li>
	</r:each>
	<r:blog id="197"> <r:comment><!-- Change to your blog's page ID --></r:comment>
	<r:articles:each tags="featured" limit="1"> <r:comment><!-- Change the tag(s) to what you want to feature. Comma separate multiple tags. --></r:comment>
	<article class="wvu-article">
	<h2 class="wvu-article__title"><a href="<r:article:path />"><r:article:name /></a></h2>
	<p class="wvu-article__meta">
	<r:article:author_full_name /> \|
	<time class="wvu-article__date" datetime="<r:date_format format="iso8601" value="{article:published_at}" />"><r:date_format format="%A, %B %d, %Y" value="{article:published_at}" /></time>
	</p> <!-- /.wvu-article__meta -->
	<div class="wvu-article__body">
	<r:select_html css_selector="p" limit="1">
	<r:blog id="1234"> <r:comment><!-- Change to your blog's page id. --></r:comment>
	<r:articles tags="featured" limit="1">
	<r:each>
	<h1><r:article:name /></h1>
	</r:each>
	</r:articles>
	</r:blog>
	<r:blog id="1234"> <!-- Change this to your blog's ID. -->
	<r:articles limit="5" tags_op="none" tags="dont-show-stuff-with-this-label" >
	<r:if_articles>
	<ul>
	<r:each>
	<li><a href="<r:article:path />"><r:article:name /></a></li>
	</r:each>
	</ul>
	</r:if_articles>
	<r:if_no_articles>
	<r:comment><!-- Randomize the hero image and generate variables for different sizes based on a label: --></r:comment>
	<r:files:each labels="random-image-collection" limit="1" types="image" random="true">
	<r:set_var name="image_small"><r:file:image_url size="500x400" /></r:set_var>
	<r:set_var name="image_large"><r:file:image_url size="1000x800" /></r:set_var>
	</r:files:each>

	<style>
	.wvu-hero {
	background-image: url(<r:var name="image_small" />);
	} /* /.wvu-hero */
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>A W3C Valid HTML Document</title>
	</head>
	<body>
	<h1>Hello World</h1>
	</body>
	</html>
	---
	layout: default
	# These are the custom data attributes that can be applied to the page.
	custom_data_attributes:
	- fancy_description:
	type: text
	title: "Fancy Description"
	rows: 6
	maxlength: 200
	wrap: "soft"
	---
	layout: default
	custom_data_attributes:
	- tags_to_pull
	---
	<!--
	Step 1: ☝️ Add the `tags_to_pull` custom data attribute to the
	page template you want to output the feed on.
	-->