Add basic opengraph & twitter card tags & image to browsertrix root (#2547)
Closes #2480 Put together a quick opengraph (OG) image for Browsertrix: 
This commit is contained in:
Emma Segal-Grossman
GitHub
parent
58749602ff
commit
0a0d2d04d3
BIN
frontend/public/browsertrix-og.jpg
Normal file
BIN
frontend/public/browsertrix-og.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 592 KiB |
@ -1,73 +1,84 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html data-theme="light" class="snap-proximity">
|
<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
|
<head>
|
||||||
src="https://browser.sentry-cdn.com/5.5.0/bundle.min.js"
|
<meta charset="utf-8" />
|
||||||
crossorigin="anonymous"
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||||
></script>
|
<title>Browsertrix</title>
|
||||||
<meta name="theme-color" content="#ffffff" />
|
<base href="/" />
|
||||||
<link rel="icon" href="/favicon.ico" sizes="32x32" />
|
|
||||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
<script src="https://browser.sentry-cdn.com/5.5.0/bundle.min.js" crossorigin="anonymous"></script>
|
||||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
<meta name="theme-color" content="#ffffff" />
|
||||||
<link rel="manifest" href="/manifest.webmanifest" />
|
<link rel="icon" href="/favicon.ico" sizes="32x32" />
|
||||||
<script src="/extra.js"></script>
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
||||||
<%if (environment === "development") { %>
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||||
<script defer src="/vendor/dll.lit.js"></script>
|
<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>
|
</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");
|
|
||||||
|
|
||||||
if (app && settings) {
|
<body>
|
||||||
app.settings = settings;
|
<script>
|
||||||
}
|
// Fetch API settings in parallel with dynamically loaded components
|
||||||
})
|
window
|
||||||
.catch(console.debug);
|
.fetch("/api/settings", {
|
||||||
</script>
|
headers: { "Content-Type": "application/json" },
|
||||||
|
})
|
||||||
|
.then((resp) => resp.json())
|
||||||
|
.then((settings) => {
|
||||||
|
const app = document.querySelector("browsertrix-app");
|
||||||
|
|
||||||
<browsertrix-app
|
if (app && settings) {
|
||||||
version="v<%= version %>-<%= commitHash %>"
|
app.settings = settings;
|
||||||
docsUrl="<%= docsUrl %>"
|
}
|
||||||
></browsertrix-app>
|
})
|
||||||
|
.catch(console.debug);
|
||||||
|
</script>
|
||||||
|
|
||||||
<script>
|
<browsertrix-app version="v<%= version %>-<%= commitHash %>" docsUrl="<%= docsUrl %>"></browsertrix-app>
|
||||||
const isDev = "<%= environment %>" === "development";
|
|
||||||
const dsn = "<%= glitchtip_dsn %>";
|
|
||||||
|
|
||||||
if (isDev && dsn) {
|
<script>
|
||||||
Sentry.init({
|
const isDev = "<%= environment %>" === "development";
|
||||||
dsn: dsn,
|
const dsn = "<%= glitchtip_dsn %>";
|
||||||
release: "<%= gitBranch %> (<%= commitHash %>) v<%= version %>",
|
|
||||||
environment: "<%= environment %>",
|
if (isDev && dsn) {
|
||||||
debug: isDev,
|
Sentry.init({
|
||||||
autoSessionTracking: false, // Turn off unsupported page/session tracking
|
dsn: dsn,
|
||||||
});
|
release: "<%= gitBranch %> (<%= commitHash %>) v<%= version %>",
|
||||||
}
|
environment: "<%= environment %>",
|
||||||
</script>
|
debug: isDev,
|
||||||
<script>
|
autoSessionTracking: false, // Turn off unsupported page/session tracking
|
||||||
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>
|
</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>
|
</html>
|
||||||
|
|||||||
@ -32,6 +32,10 @@ const DOCS_URL = process.env.DOCS_URL
|
|||||||
? "https://docs.browsertrix.com/"
|
? "https://docs.browsertrix.com/"
|
||||||
: "/docs/";
|
: "/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
|
// Get git info for release version info
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -217,6 +221,7 @@ const main = {
|
|||||||
glitchtip_dsn: process.env.GLITCHTIP_DSN || "",
|
glitchtip_dsn: process.env.GLITCHTIP_DSN || "",
|
||||||
environment: isDevServer ? "development" : "production",
|
environment: isDevServer ? "development" : "production",
|
||||||
docsUrl: DOCS_URL,
|
docsUrl: DOCS_URL,
|
||||||
|
openGraphBaseUrl: OPENGRAPH_BASE_URL,
|
||||||
version,
|
version,
|
||||||
gitBranch,
|
gitBranch,
|
||||||
commitHash,
|
commitHash,
|
||||||
@ -251,6 +256,12 @@ const main = {
|
|||||||
from: path.resolve(__dirname, "src/manifest.webmanifest"),
|
from: path.resolve(__dirname, "src/manifest.webmanifest"),
|
||||||
to: path.resolve(__dirname, "dist"),
|
to: path.resolve(__dirname, "dist"),
|
||||||
},
|
},
|
||||||
|
// Copy public contents
|
||||||
|
{
|
||||||
|
from: path.resolve(__dirname, "public"),
|
||||||
|
to: path.resolve(__dirname, "dist"),
|
||||||
|
noErrorOnMissing: true,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
}),
|
}),
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user