JanMiksovsky · August 30, 2023 15:53
diff --git a/reviewSite.yaml b/reviewSite.yaml
 # This is a trivial self-contained demo site built with Graph Origami.

 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: 3
    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: 4
    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! :)

 index.html: !ori index.ori()

 index.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="styles.css" />
    </head>
    <body>
      <h1>Reviews</h1>
      <div class="cards">
        {{ @map/values reviews.yaml, =`
          <div class="card">
            <h2>{{summary}}</h2>
            <p>
              <span class="rating">
                {{ @repeat rating, "★" }}
              </span>
              {{text}}
            </p>
            <div>{{location}}</div>
            <div>Coach: {{coach}}</div>
          </div>
        ` }}
      </div>
    </body>
  </html>

 styles.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;
  }
	# This is a trivial self-contained demo site built with Graph Origami.

	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: 3
	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: 4
	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! :)

	index.html: !ori index.ori()

	index.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="styles.css" />
	</head>
	<body>
	<h1>Reviews</h1>
	<div class="cards">
	{{ @map/values reviews.yaml, =`
	<div class="card">
	<h2>{{summary}}</h2>
	<p>
	<span class="rating">
	{{ @repeat rating, "★" }}
	</span>
	{{text}}
	</p>
	<div>{{location}}</div>
	<div>Coach: {{coach}}</div>
	</div>
	` }}
	</div>
	</body>
	</html>

	styles.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;
	}