Hauke Feed v2

by BHolm

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Load Handlebars.js from Unpkg. -->
<script src="https://unpkg.com/[email protected]/dist/handlebars.min.js"></script>

<!-- Load jQuery and Sheetrock from Unpkg -->
<script src="https://unpkg.com/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/sheetrock.min.js"></script>
<body>
  <div id="hf">
    <script id="hf-template" type="text/x-handlebars-template">

<!-- Post Date Section -->
      <div class="row feed-row feed-mt">
      	<div class="post-submitted-info">
        	<div class="submitted-date">
          	<div class="month">{{cells.Month}}</div>
          	<div class="day">{{cells.Day}}</div>
          	<div class="year">{{cells.Year}}</div>         
        	</div>
        </div>
        
<!-- Post Content Section -->
      	<div class="feed-main-content">
        	<div class="header">
          	<h2>{{cells.Header}}</h2>
          </div>
	        <div class="field-item">
          	<p>{{cells.Content}}</p>
        	</div>
        </div>
      </div>
    </script>
  </div>
</body>

CSS

/*Feed*/
 
.feed-row {
  padding-bottom: 40px;
  padding-right: 20px;
}

.feed-mt .post-submitted-info {  
  font-weight: 700; 
  text-align: center; 
  line-height: 1; 
  position: relative; 
   
}

.post-submitted-info { 
  column-width: 55px; 
  margin-left: 10px;
}

.submitted-date { 
  border-right: 1px solid #c2c2c2; 
}

.submitted-date { 
  margin-top: 12px; 
}

.post-submitted-info .year { 
  padding-bottom: 8px 
}

.post-submitted-info .month, .post-submitted-info .year {  
  font-size: 14px; 
  text-transform: uppercase; 
}

.feed-mt .post-submitted-info .day { 
  font-size: 29px; 
  font-weight: 900; 
  padding-bottom: 2px; 
}

.feed-main-content {
  padding-left: 75px;
  margin-top: -75px;
}

.field-item{  
  font-weight: normal;
  border-bottom: 1px solid #acacac;
  
}

.feed-main-content .header {
    
}

JavaScript

// Define spreadsheet URL.
var mySpreadsheet =
  "https://docs.google.com/spreadsheets/d/1-zaL0cSg4uaZuHhdk0JKdgZwfW2H-Ta5BIkHTwqs2M4/edit?gid=0#gid=0"

// Compile the Handlebars template for Hauke Feed.
var HFTemplate = Handlebars.compile($("#hf-template").html())

// Load the five most recent posts.
$("#hf").sheetrock({
  url: mySpreadsheet,
  query: "select A,B,C,D,E,F order by A desc",
  fetchSize: 6,
  rowTemplate: HFTemplate,
})