Add Open Graph meta tags and production environment setup

stared · claude · stared · commit 0cb58f7e9bb9 · 2025-08-13T16:19:17.000+02:00
- Add comprehensive Open Graph and Twitter Card meta tags - Move screenshot to public directory for proper serving - Use Vite's native environment variable replacement - Include .env.production for GitHub Actions deployment - Add .env.development to .gitignore (local only) - Update README screenshot path - Bump version to 0.2.6 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/.env.production b/.env.production
@@ -0,0 +1,2 @@
+VITE_SITE_URL=https://quesmaorg.github.io/demo-webr-ggplot/
+VITE_OG_IMAGE=https://quesmaorg.github.io/demo-webr-ggplot/webr-ggplot2-screenshot.png
diff --git a/.gitignore b/.gitignore
@@ -8,6 +8,7 @@ dist-ssr
 # Environment variables
 .env
 .env.local
+.env.development
 
 # Logs
 *.log
diff --git a/README.md b/README.md
@@ -2,6 +2,8 @@
 
 Interactive R data visualization in the browser using [WebR](https://webr.r-wasm.org/) (R in WebAssembly) and [ggplot2](https://ggplot2.tidyverse.org/) (the best charting library ever).
 
+![WebR ggplot2 Demo Screenshot](./public/webr-ggplot2-screenshot.png)
+
 ## What is it?
 
 A web application that runs R code directly in your browser - no server required. Features live code editing, CSV upload, and interactive plots. Try it online at [quesmaorg.github.io/demo-webr-ggplot](https://quesmaorg.github.io/demo-webr-ggplot/).
diff --git a/index.html b/index.html
@@ -5,6 +5,24 @@
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>WebR ggplot2 & dplyr Demo</title>
+    
+    <!-- Primary Meta Tags -->
+    <meta name="title" content="WebR ggplot2 & dplyr Demo">
+    <meta name="description" content="Interactive R data visualization in your browser with ggplot2 and dplyr. No server required - powered by WebAssembly.">
+    
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="%VITE_SITE_URL%">
+    <meta property="og:title" content="WebR ggplot2 & dplyr Demo">
+    <meta property="og:description" content="Interactive R data visualization in your browser with ggplot2 and dplyr. No server required - powered by WebAssembly.">
+    <meta property="og:image" content="%VITE_OG_IMAGE%">
+    
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="%VITE_SITE_URL%">
+    <meta property="twitter:title" content="WebR ggplot2 & dplyr Demo">
+    <meta property="twitter:description" content="Interactive R data visualization in your browser with ggplot2 and dplyr. No server required - powered by WebAssembly.">
+    <meta property="twitter:image" content="%VITE_OG_IMAGE%">
   </head>
   <body>
     <div id="app"></div>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "webr-ggplot2-demo",
   "private": true,
-  "version": "0.2.4",
+  "version": "0.2.6",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/public/webr-ggplot2-screenshot.png b/public/webr-ggplot2-screenshot.png

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+VITE_SITE_URL=https://quesmaorg.github.io/demo-webr-ggplot/`
	`2`	`+VITE_OG_IMAGE=https://quesmaorg.github.io/demo-webr-ggplot/webr-ggplot2-screenshot.png`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "webr-ggplot2-demo",`
`3`	`3`	`"private": true,`
`4`		`- "version": "0.2.4",`
	`4`	`+ "version": "0.2.6",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"scripts": {`
`7`	`7`	`"dev": "vite",`