tea/browsertrix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add basic opengraph & twitter card tags & image to browsertrix root (#2547)

Browse Source 
Closes #2480 

Put together a quick opengraph (OG) image for Browsertrix: 

![browsertrix-og](https://github.com/user-attachments/assets/355aa810-3a3a-46b4-b43a-1a894fae8a6e)
This commit is contained in:
Emma Segal-Grossman 2025-04-08 19:23:26 -04:00 committed by GitHub
parent 58749602ff
commit 0a0d2d04d3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 85 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/public/browsertrix-og.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 592 KiB

137
frontend/src/index.ejs
View File

@ -1,73 +1,84 @@
<!doctype html>
<html data-theme="light" class="snap-proximity">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
/>
<title>Browsertrix</title>
<base href="/" />
<script
src="https://browser.sentry-cdn.com/5.5.0/bundle.min.js"
crossorigin="anonymous"
></script>
<meta name="theme-color" content="#ffffff" />
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.webmanifest" />
<script src="/extra.js"></script>
<%if (environment === "development") { %>
<script defer src="/vendor/dll.lit.js"></script>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>Browsertrix</title>
<base href="/" />
<script src="https://browser.sentry-cdn.com/5.5.0/bundle.min.js" crossorigin="anonymous"></script>
<meta name="theme-color" content="#ffffff" />
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.webmanifest" />
<meta name="description" content="Archive, Curate, and Share the Web." />
<!-- OpenGraph Tags -->
<meta property="og:image" content="<%= openGraphBaseUrl %>/browsertrix-og.jpg" />
<meta property="og:image:alt"
content="A simple graphic with the words “Archive, Curate and Share the Web.”, the Browsertrix logo, and “Powered by Webrecorder”" />
<meta property="og:title" content="Browsertrix" />
<meta property="og:description" content="Archive, Curate, and Share the Web." />
<meta property="og:site_name" content="Browsertrix" />
<!-- Twitter Tags -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:site" content="@webrecorder_io" />
<meta property="twitter:description" content="Archive, Curate, and Share the Web." />
<meta property="twitter:title" content="Browsertrix" />
<meta property="twitter:image" content="<%= openGraphBaseUrl %>/browsertrix-og.jpg" />
<meta property="twitter:image:alt"
content="A simple graphic with the words “Archive, Curate and Share the Web.”, the Browsertrix logo, and “Powered by Webrecorder”" />
<script src="/extra.js"></script>
<%if (environment==="development" ) { %>
<script defer src="/vendor/dll.lit.js"></script>
<% } %>
</head>
<body>
<script>
// Fetch API settings in parallel with dynamically loaded components
window
.fetch("/api/settings", {
headers: { "Content-Type": "application/json" },
})
.then((resp) => resp.json())
.then((settings) => {
const app = document.querySelector("browsertrix-app");
</head>
if (app && settings) {
app.settings = settings;
}
})
.catch(console.debug);
</script>
<body>
<script>
// Fetch API settings in parallel with dynamically loaded components
window
.fetch("/api/settings", {
headers: { "Content-Type": "application/json" },
})
.then((resp) => resp.json())
.then((settings) => {
const app = document.querySelector("browsertrix-app");
<browsertrix-app
version="v<%= version %>-<%= commitHash %>"
docsUrl="<%= docsUrl %>"
></browsertrix-app>
if (app && settings) {
app.settings = settings;
}
})
.catch(console.debug);
</script>
<script>
const isDev = "<%= environment %>" === "development";
const dsn = "<%= glitchtip_dsn %>";
<browsertrix-app version="v<%= version %>-<%= commitHash %>" docsUrl="<%= docsUrl %>"></browsertrix-app>
if (isDev && dsn) {
Sentry.init({
dsn: dsn,
release: "<%= gitBranch %> (<%= commitHash %>) v<%= version %>",
environment: "<%= environment %>",
debug: isDev,
autoSessionTracking: false, // Turn off unsupported page/session tracking
});
}
</script>
<script>
customElements.whenDefined("browsertrix-app").then(() => {
// Load replay UI after browsertrix app is defined to prevent issues
// with re-defining shoelace components
const script = document.createElement("script");
script.src = "/replay/ui.js";
document.body.appendChild(script);
<script>
const isDev = "<%= environment %>" === "development";
const dsn = "<%= glitchtip_dsn %>";
if (isDev && dsn) {
Sentry.init({
dsn: dsn,
release: "<%= gitBranch %> (<%= commitHash %>) v<%= version %>",
environment: "<%= environment %>",
debug: isDev,
autoSessionTracking: false, // Turn off unsupported page/session tracking
});
</script>
</body>
}
</script>
<script>
customElements.whenDefined("browsertrix-app").then(() => {
// Load replay UI after browsertrix app is defined to prevent issues
// with re-defining shoelace components
const script = document.createElement("script");
script.src = "/replay/ui.js";
document.body.appendChild(script);
});
</script>
</body>
</html>

11
frontend/webpack.config.js
View File

@ -32,6 +32,10 @@ const DOCS_URL = process.env.DOCS_URL
? "https://docs.browsertrix.com/"
: "/docs/";
const OPENGRAPH_BASE_URL = process.env.OPENGRAPH_BASE_URL
? new URL(process.env.OPENGRAPH_BASE_URL)
: "https://app.browsertrix.com/";
// Get git info for release version info
/**
@ -217,6 +221,7 @@ const main = {
glitchtip_dsn: process.env.GLITCHTIP_DSN || "",
environment: isDevServer ? "development" : "production",
docsUrl: DOCS_URL,
openGraphBaseUrl: OPENGRAPH_BASE_URL,
version,
gitBranch,
commitHash,
@ -251,6 +256,12 @@ const main = {
from: path.resolve(__dirname, "src/manifest.webmanifest"),
to: path.resolve(__dirname, "dist"),
},
// Copy public contents
{
from: path.resolve(__dirname, "public"),
to: path.resolve(__dirname, "dist"),
noErrorOnMissing: true,
},
],
}),
// @ts-ignore