og preview

uclab-potsdam · Feb 21, 2025 · d6fff66 · d6fff66
1 parent f531e96
commit d6fff66
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -3,10 +3,10 @@
 
 !nflect is a web-based framework implementing inflections as a method to bridge the gap between data exploration and storytelling. By linking to specific views and annotations in visualizations, authors can embed insights from their data analysis within the narrative flow. 
 
-- See the 📜<a href="https://uclab-potsdam.github.io/inflect/">scrollytelling</a> in action, if you read this as a regular readme file
-- Check out the sample stories featuring 
-📊<a href="https://uclab-potsdam.github.io/inflect/#visualizations">visualizations</a>, 🖼️<a href="https://uclab-potsdam.github.io/inflect/#images">images</a> and 🌎<a href="https://uclab-potsdam.github.io/inflect/#webpages">webpages</a>
-- Fork this ⚙️<a href="https://github.com/uclab-potsdam/inflect">repository</a> to create your data story with inflected visualizations
+- See <a href="https://uclab-potsdam.github.io/inflect/">scrollytelling</a> if you read this as a regular readme file
+- Check out sample stories: 
+<a href="https://uclab-potsdam.github.io/inflect/#visualizations">visualizations</a>, <a href="https://uclab-potsdam.github.io/inflect/#images">images</a>, <a href="https://uclab-potsdam.github.io/inflect/#webpages">webpages</a>
+- Fork this <a href="https://github.com/uclab-potsdam/inflect">repository</a> to create your own data story
 
 ![img](img/#-68,-35,1325,1741&ff0000&&&chart_overview.png)
 
@@ -44,7 +44,7 @@ If you take a closer look, you see three folders:
 - `/src`: Libraries and fonts — you can ignore this one
 - `/vis`: Vega-Lite specs and datasets for each chart
 
-`/img` and `/vis` contain the files to include in your data stories as well as the interfaces with which to inflect images and visualizations.
+`/img` and `/vis` house the images and visualizations for your data story as well as the interfaces with which to inflect them.
 
 
 ### Story files
@@ -53,7 +53,7 @@ If you take a closer look, you see three folders:
 
 The Markdown files contain the source texts for the stories. They are stored at the root level of the framework's file structure. You are currently reading the content of `README.md`, which is the default file loaded when no other story file is specified.
 
-You can open a specific story file by adding its filename without the extension `.md` into the URL's hash. For example, the story file `visualizations.md` is opened when this URL is opened:
+You can open a specific story file by adding its filename without the extension `.md` into the URL's hash. For example, the story file `visualizations.md` is opened with this URL:
 
 <a href="#visualizations">https://uclab-potsdam.github.io/inflect/#visualizations</a>
 
@@ -64,10 +64,10 @@ You can open a specific story file by adding its filename without the extension
 
 It takes three steps to create a data story with !nflect.
 
-Make sure that you have made a copy of this repository and can access it via webserver.
+To follow along, make sure that you have made a copy of this repository and can access it via webserver.
 
 
-### 1. Create a visualization 📊 
+### 1. Create visualization 📊 
 
 ![img](img/#6,-54,2067,1336&ff0000&&&vega_editor.png)
 

diff --git a/img/cover.png b/img/cover.png
diff --git a/index.html b/index.html
@@ -3,7 +3,15 @@
 <head>    
     <meta charset="UTF-8">
     <link rel="icon" type="image/svg+xml" sizes="any" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ctext%20y%3D%221em%22%20font-size%3D%2290%22%3E%F0%9F%93%84%3C%2Ftext%3E%3C%2Fsvg%3E">
+
     <title>!nflect</title>
+    <meta property="og:url" content="https://uclab-potsdam.github.io/inflect/">
+    <meta property="og:title" content="!nflect">
+    <meta property="og:description" content="Modulating Visualizations to Tell Stories with Data">
+    <meta property="og:image" content="https://uclab-potsdam.github.io/inflect/img/cover.png">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
+
     <script src="src/marked.min.js"></script>
 
     <style>
@@ -112,7 +120,6 @@
 
         li {
             padding-bottom: 0.5em;
-            line-height: 1.25em;
         }
 
         li li {