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
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"
)
// #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")$">
Copy link
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 $

Copy link

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

Copy link
Member

@mkurz mkurz Feb 27, 2024 •
edited
Loading

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.

Copy link

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

Copy link
Author

@jchapuis jchapuis Feb 27, 2024 •
edited
Loading

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