From 059505d5f5060f753ef5a3d01f380355b85dc457 Mon Sep 17 00:00:00 2001
From: Justin Reese <justin@justinreese.com>
Date: Tue, 15 Nov 2022 10:49:50 -0600
Subject: [PATCH] Stub out schema tables for Insights data
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit adds the foundational styling and example markup — along
with sample data — for the schema tables on the Insights Guide page.

TBD: Fill in the rest of the data!

Issue #311
---
 app/assets/stylesheets/tables.scss           |  34 +++++++
 app/views/fact_check_insights/guide.html.erb | 101 ++++++++++++++++++-
 2 files changed, 131 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/tables.scss b/app/assets/stylesheets/tables.scss
index 3e45f0e8..d297e5a3 100644
--- a/app/assets/stylesheets/tables.scss
+++ b/app/assets/stylesheets/tables.scss
@@ -56,3 +56,37 @@
 		--table--cell-padding-x: 0.5em;
 	}
 }
+
+.schema-table {
+	.code {
+		font-family: monospace;
+
+		$font-size-multiplier: 0.75;
+		font-size: calc($font-size-multiplier * shared.$font-size--base);
+		line-height: calc(shared.$line-height--base / $font-size-multiplier);
+	}
+
+	.na {
+		color: gray;
+
+		$font-size-multiplier: 0.9;
+		font-size: calc($font-size-multiplier * shared.$font-size--base);
+		line-height: calc(shared.$line-height--base / $font-size-multiplier);
+	}
+
+	$levels: 1, 2, 3, 4, 5, 6;
+	@for $level from 1 through 6 {
+		.indent--#{$level} > td:first-child {
+			padding-left: #{$level * 4}ch;
+		}
+	}
+
+	.code {
+		.key {
+			color: shared.$color--blue-2;
+		}
+		.value {
+			color: shared.$color--red-1;
+		}
+	}
+}
diff --git a/app/views/fact_check_insights/guide.html.erb b/app/views/fact_check_insights/guide.html.erb
index 0d20c590..37730c35 100644
--- a/app/views/fact_check_insights/guide.html.erb
+++ b/app/views/fact_check_insights/guide.html.erb
@@ -46,12 +46,105 @@
 <div id="section--schema" class="py-10 lg:py-20">
 	<div class="max-w-2xl mx-auto b2">
 		<h2>What you can expect when you download the data</h2>
-		<p>The Fact-Check Insights dataset is available for download as JSON (one file) and CSV (multiple files).</p>
-		<p>Not every fact-check will contain data for every field, but the main components are:</p>
+		<p>The Fact-Check Insights dataset is available for download as JSON (one file) and CSV (multiple files). The tables below show the JSON data structure; see the "CSV Field" column for the name of the corresponding CSV column. Note that not every item will contain every field.</p>
+	</div>
+
+	<div class="my-10">
+		<h3 class="h4">ClaimReview Schema</h3>
+		<table class="table schema-table">
+			<thead>
+				<tr>
+					<th>Field</th>
+					<th>Value</th>
+					<th>Description</th>
+					<th>Data Type</th>
+					<th>CSV Field</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr class="boilerplate indent--0">
+					<td class="code" colspan="5">
+						{
+					</td>
+				</tr>
+				<tr class="indent--1">
+					<td class="code">
+						<span class="key">"@type"</span>:
+					</td>
+					<td class="code">
+						<span class="value">"ClaimReview"</span>,
+					</td>
+					<td>Type of object.</td>
+					<td>String</td>
+					<td class="code">
+						<span class="key">"@type"</span>
+					</td>
+				</tr>
+				<tr class="indent--1">
+					<td class="code" colspan="2">
+						<span class="key">"author"</span>: {
+					</td>
+					<td></td>
+					<td>Object</td>
+					<td class="na">n/a</td>
+				</tr>
+				<tr class="indent--2">
+					<td class="code">
+						<span class="key">"@type"</span>:
+					</td>
+					<td class="code">
+						<span class="value">"Organization"</span>,
+					</td>
+					<td>The type of author.</td>
+					<td>String</td>
+					<td class="code">
+						<span class="key">"author_@type"
+					</td>
+				</tr>
+				<tr class="indent--2">
+					<td class="code">
+						<span class="key">"name"</span>:
+					</td>
+					<td class="code">
+						<span class="value">"realfact"</span>,
+					</td>
+					<td>The name of the fact-checking organization that submitted the fact-check.</td>
+					<td>String</td>
+					<td class="code">
+						<span class="key">"author_name"
+					</td>
+				</tr>
+				<tr class="boilerplate indent--1">
+					<td class="code" colspan="5">
+						},
+					</td>
+				</tr>
+				<tr class="boilerplate indent--0">
+					<td class="code" colspan="5">
+						}
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+
+	<div class="my-10">
+		<h3 class="h4">MediaReview Schema</h3>
+			<table class="table schema-table">
+			<thead>
+				<tr>
+					<th>Field</th>
+					<th>Value</th>
+					<th>Description</th>
+					<th>Data Type</th>
+					<th>CSV Field</th>
+				</tr>
+			</thead>
+			<tbody>
+			</tbody>
+		</table>
 	</div>
 
-	<div class="alert">Detail coming soon…</div>
-	<!-- Table here -->
 </div>
 
 <div id="section--tips" class="full-bleed py-10 lg:py-20">