Skip to content

Add open-graph tags support #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jchapuis wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Add open-graph tags support #31

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fc5fb68
Add open-graph tags support
Nov 25, 2021
0052e7b
Reformatting
Feb 15, 2024
1737c44
Update project.image url
Feb 15, 2024
3e77463
Use title property instead of project name for `og:title`
Feb 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions build.sbt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,13 @@ lazy val root = project("paradox-material-theme-parent", file("."))
}
// #social
,
// #open-graph
Compile / paradoxProperties ++= Map(
"project.description" -> "Paradox Material Theme is a theme for Paradox, a static site generator geared towards project documentation",
"project.image" -> "https://jonas.github.io/paradox-material-theme/images/material.png"
Comment thread
mdedetrich marked this conversation as resolved.
Outdated
)
// #open-graph
,
// #language
Compile / paradoxMaterialTheme ~= {
_.withLanguage(java.util.Locale.ENGLISH)
Expand Down
6 changes: 6 additions & 0 deletions src/main/paradox/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,12 @@ on the URL:

[17]: http://fontawesome.io/icons/

## Open graph metadata
To enable a nice preview of the site in social media, define the
following properties in the build:

@@ snip [build.sbt]($root$/build.sbt) { #open-graph }

## Copyright Notice

To display a copyright notice in the footer configure the
Expand Down
9 changes: 9 additions & 0 deletions theme/src/main/assets/page.st
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,15 @@ $!
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="$page.properties.("project.description")$">
$ if (page.properties.("project.name")) $
<meta property="og:title" content="$page.properties.("project.name")$">

@mkurz mkurz Feb 21, 2024

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if we should use project name as og:title.
Shouldn't we use something like here instead?

sbt-paradox-material-theme/theme/src/main/assets/page.st

Lines 48 to 54 in 4b214d8

$ if (page.properties.("title")) $
<title>$page.properties.("title")$</title>
$ elseif (page.title) $
<title>$page.title$$ if (!page.home.active) $ · $page.home.title$$ endif $</title>
$ else $
<title>$page.home.title$</title>
$ endif $

@Roiocam Roiocam Feb 27, 2024

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think those were metadata of open graph

@mkurz mkurz Feb 27, 2024 •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Roiocam I understand that, however my point is if it makes sense to use the "project name" as og:title. Maybe it would be better to use the same value like we use for the html <title> tag.

@Roiocam Roiocam Feb 27, 2024

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got it, makes sense. Thanks

@jchapuis jchapuis Feb 27, 2024 •
edited
Loading

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good point, changed, but i kept the condition logic simple, where you have to define the page title property for it to be exposed in opengraph. Or would we want to have the same logic? trying to avoid unnecessary duplication

$ endif $
$ if (page.properties.("project.description")) $
<meta property="og:description" content="$page.properties.("project.description")$">
$ endif $
$ if (page.properties.("project.image")) $
<meta property="og:image" content="$page.properties.("project.image")$">
$ endif $
<meta name="generator" content="Paradox, paradox-material-theme=$page.properties.("material.theme.version")$, mkdocs-material=3.0.3">

$partials/language()$
Expand Down