Skip to content

Instantly share code, notes, and snippets.

@JanMiksovsky

JanMiksovsky/index.html = this().ori

Last active October 18, 2022 23:20
Show Gist options
  • Save JanMiksovsky/084f7231b58eb38441ba170ec6bd8795 to your computer and use it in GitHub Desktop.
Save JanMiksovsky/084f7231b58eb38441ba170ec6bd8795 to your computer and use it in GitHub Desktop.
Download ZIP
A trivial site using data and templates
Raw
index.html = this().ori
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Reviews</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<h1>Reviews</h1>
<div class="cards">
{{#map reviews.yaml}}
<div class="card">
<h2>{{summary}}</h2>
<p>
<span class="rating">
{{#repeat rating}}★{{/repeat}}
</span>
{{text}}
</p>
<div>{{location}}</div>
<div>Coach: {{coach}}</div>
</div>
{{/map}}
</div>
</body>
</html>
Raw
main.css
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
padding: 3em;
}
.cards {
display: grid;
grid-auto-rows: auto;
grid-gap: 1rem;
grid-template-columns: repeat(3, 1fr);
}
.card {
background-color: #fff;
border: 1px solid #e1e4e8;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
margin-bottom: 1em;
padding: 1em;
}
Raw
reviews.yaml
- summary: Positive reinformement and insight.
rating: 5
location: Southampton, NY
coach: Sue
text: |
Thanks for allowing me to talk things out. It makes it easier to get some
clarity.
- summary: Great conversation with Jessica.
rating: 5
location: Topeka, KS
coach: Jessica
text: |
Her insights were spot on. Time to think about a few questions she asked.
Looking forward to the next session.
- summary: Everything! I appreciate all the insight
rating: 5
location: Los Angeles, CA
coach: Luz
text: |
that I gained and the support. I always leave my sessions feeling better
and supported. Thank you Luz! :)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment