refactor OpenGraph

This commit is contained in:
Thibault Duplessis 2015-06-29 14:31:33 +02:00
parent ea0187c100
commit e5518c4436
21 changed files with 77 additions and 70 deletions

View file

@ -18,15 +18,11 @@ trait GameHelper { self: I18nHelper with UserHelper with AiHelper with StringHel
def mandatorySecondsToMove = lila.game.Env.current.MandatorySecondsToMove def mandatorySecondsToMove = lila.game.Env.current.MandatorySecondsToMove
def povOpenGraph(pov: Pov) = { def povOpenGraph(pov: Pov) = lila.app.ui.OpenGraph(
Map( image = cdnUrl(routes.Export.png(pov.game.id).url).some,
'type -> "website", title = titlePov(pov),
'image -> cdnUrl(routes.Export.png(pov.game.id).url), url = s"$netBaseUrl${routes.Round.watcher(pov.game.id, pov.color.name).url}",
'title -> titlePov(pov), description = describePov(pov))
'site_name -> "lichess.org",
'url -> s"$netBaseUrl${routes.Round.watcher(pov.game.id, pov.color.name).url}",
'description -> describePov(pov))
}
def titlePov(pov: Pov) = { def titlePov(pov: Pov) = {
val speed = chess.Speed(pov.game.clock).name val speed = chess.Speed(pov.game.clock).name

26
app/ui/OpenGraph.scala Normal file
View file

@ -0,0 +1,26 @@
package lila.app
package ui
import play.twirl.api.Html
case class OpenGraph(
title: String,
description: String,
url: String,
`type`: String = "website",
image: Option[String] = None,
siteName: String = "lichess.org") {
def html = Html(toString)
private def prop(name: String, value: String) =
s"""<meta property="og:$name" content="$value" />"""
override def toString = List(
"title" -> title,
"description" -> description,
"url" -> url,
"type" -> `type`,
"siteName" -> siteName
).map((prop _).tupled) + image.?? { prop("image", _) }
}

View file

@ -1,4 +1,4 @@
@(title: String, side: Option[Html] = None, chat: Option[Html] = None, underchat: Option[Html] = None, moreCss: Html = Html(""), moreJs: Html = Html(""), openGraph: Map[Symbol, String] = Map.empty, chessground: Boolean)(body: Html)(implicit ctx: Context) @(title: String, side: Option[Html] = None, chat: Option[Html] = None, underchat: Option[Html] = None, moreCss: Html = Html(""), moreJs: Html = Html(""), openGraph: Option[lila.app.ui.OpenGraph] = None, chessground: Boolean)(body: Html)(implicit ctx: Context)
@base.layout( @base.layout(
title = title, title = title,

View file

@ -50,7 +50,7 @@ chat = base.chatDom(trans.spectatorRoom.str(), ctx.isAuth).some,
underchat = underchat.some, underchat = underchat.some,
moreCss = moreCss, moreCss = moreCss,
moreJs = moreJs, moreJs = moreJs,
openGraph = povOpenGraph(pov), openGraph = povOpenGraph(pov).some,
chessground = false) { chessground = false) {
<div class="analyse cg-512">@miniBoardContent</div> <div class="analyse cg-512">@miniBoardContent</div>
<div class="advice_summary" style="display:none"> <div class="advice_summary" style="display:none">

View file

@ -42,7 +42,7 @@ chat = base.chatDom(trans.spectatorRoom.str(), ctx.isAuth).some,
underchat = underchat.some, underchat = underchat.some,
moreJs = moreJs, moreJs = moreJs,
moreCss = moreCss, moreCss = moreCss,
openGraph = povOpenGraph(pov), openGraph = povOpenGraph(pov).some,
chessground = true) { chessground = true) {
<div class="analyse cg-512"> <div class="analyse cg-512">
<div class="top"> <div class="top">

View file

@ -11,7 +11,7 @@ moreCss: Html = Html(""),
moreJs: Html = Html(""), moreJs: Html = Html(""),
zen: Boolean = false, zen: Boolean = false,
playing: Boolean = false, playing: Boolean = false,
openGraph: Map[Symbol, String] = Map.empty, openGraph: Option[lila.app.ui.OpenGraph] = None,
chessground: Boolean = true, chessground: Boolean = true,
withLangAnnotations: Boolean = true)(body: Html)(implicit ctx: Context) withLangAnnotations: Boolean = true)(body: Html)(implicit ctx: Context)
<!doctype html> <!doctype html>
@ -27,17 +27,13 @@ withLangAnnotations: Boolean = true)(body: Html)(implicit ctx: Context)
@cssTag("board.css") @cssTag("board.css")
@moreCss @moreCss
<link id="piece-sprite" href="@staticUrl(s"stylesheets/piece/${ctx.currentPieceSet}.css?v=$assetVersion")" type="text/css" rel="stylesheet"/> <link id="piece-sprite" href="@staticUrl(s"stylesheets/piece/${ctx.currentPieceSet}.css?v=$assetVersion")" type="text/css" rel="stylesheet"/>
<meta content="@openGraph.get('description).getOrElse(trans.freeOnlineChessGamePlayChessNowInACleanInterfaceNoRegistrationNoAdsNoPluginRequiredPlayChessWithComputerFriendsOrRandomOpponents())" name="description"> <meta content="@openGraph.fold(trans.freeOnlineChessGamePlayChessNowInACleanInterfaceNoRegistrationNoAdsNoPluginRequiredPlayChessWithComputerFriendsOrRandomOpponents())(o => Html(o.description))" name="description">
<link rel="shortcut icon" href="@staticUrl("images/favicon-32-white.png")" type="image/x-icon" /> <link rel="shortcut icon" href="@staticUrl("images/favicon-32-white.png")" type="image/x-icon" />
@if(!robots) { @if(!robots) {
<meta content="noindex, nofollow" name="robots"> <meta content="noindex, nofollow" name="robots">
} }
<meta name="google" content="notranslate" /> <meta name="google" content="notranslate" />
@openGraph.map { @openGraph.map(_.html)
case (key, value) => {
<meta property="og:@key.name" content="@value" />
}
}
<link href="@routes.Blog.atom()" type="application/atom+xml" rel="alternate" title="Latest blog posts" /> <link href="@routes.Blog.atom()" type="application/atom+xml" rel="alternate" title="Latest blog posts" />
@if(withLangAnnotations){@langAnnotations} @if(withLangAnnotations){@langAnnotations}
</head> </head>

View file

@ -1,4 +1,4 @@
@(title: String, side: Option[Html] = None, openGraph: Map[Symbol, String] = Map.empty)(body: Html)(implicit ctx: Context) @(title: String, side: Option[Html] = None, openGraph: Option[lila.app.ui.OpenGraph] = None)(body: Html)(implicit ctx: Context)
@moreCss = { @moreCss = {
@cssTag("blog.css") @cssTag("blog.css")

View file

@ -11,13 +11,12 @@
@layout( @layout(
title = s"${~doc.getText("blog.title")} | Blog", title = s"${~doc.getText("blog.title")} | Blog",
side = side.some, side = side.some,
openGraph = Map( openGraph = lila.app.ui.OpenGraph(
'type -> "article", `type` = "article",
'image -> doc.getImage("blog.image", "main").??(_.url), image = doc.getImage("blog.image", "main").map(_.url),
'title -> ~doc.getText("blog.title"), title = ~doc.getText("blog.title"),
'site_name -> "lichess.org", url = s"$netBaseUrl${routes.Blog.show(doc.id, doc.slug).url}",
'url -> s"$netBaseUrl${routes.Blog.show(doc.id, doc.slug).url}", description = ~doc.getText("blog.shortlede")).some) {
'description -> ~doc.getText("blog.shortlede"))) {
<h1 class="blog_title">@doc.getText("blog.title")</h1> <h1 class="blog_title">@doc.getText("blog.title")</h1>
@meta(doc) @meta(doc)

View file

@ -57,14 +57,12 @@ moreJs = moreJs,
moreCss = cssTag("home.css"), moreCss = cssTag("home.css"),
underchat = underchat.some, underchat = underchat.some,
chessground = false, chessground = false,
openGraph = Map( openGraph = lila.app.ui.OpenGraph(
'type -> "website", image = staticUrl("images/large_tile.png").some,
'image -> s"${staticUrl("images/large_tile.png")}", title = "The best free, adless Chess server",
'title -> "The best free, adless Chess server", url = netBaseUrl,
'site_name -> "lichess.org", description = trans.freeOnlineChessGamePlayChessNowInACleanInterfaceNoRegistrationNoAdsNoPluginRequiredPlayChessWithComputerFriendsOrRandomOpponents.str()
'url -> netBaseUrl, ).some) {
'description -> trans.freeOnlineChessGamePlayChessNowInACleanInterfaceNoRegistrationNoAdsNoPluginRequiredPlayChessWithComputerFriendsOrRandomOpponents.str()
)) {
<div id="call_boxes"> <div id="call_boxes">
@translationCall.map(i18n.callBox(_)) @translationCall.map(i18n.callBox(_))
</div> </div>

View file

@ -1,4 +1,4 @@
@(title: String, evenMoreCss: Option[Html] = None, evenMoreJs: Option[Html] = None, openGraph: Map[Symbol, String] = Map.empty)(body: Html)(implicit ctx: Context) @(title: String, evenMoreCss: Option[Html] = None, evenMoreJs: Option[Html] = None, openGraph: Option[lila.app.ui.OpenGraph] = None)(body: Html)(implicit ctx: Context)
@moreCss = { @moreCss = {
@cssTag("training.css") @cssTag("training.css")

View file

@ -58,15 +58,13 @@ trans.openings)))
@layout( @layout(
trans.training.str(), trans.training.str(),
evenMoreJs = Some(evenMoreJs), evenMoreJs = Some(evenMoreJs),
openGraph = Map( openGraph = lila.app.ui.OpenGraph(
'type -> "website", image = cdnUrl(routes.Export.puzzlePng(puzzle.id).url).some,
'image -> cdnUrl(routes.Export.puzzlePng(puzzle.id).url), title = s"Chess tactic training • ${puzzle.color.name.capitalize} to play",
'title -> s"Chess tactic training • ${puzzle.color.name.capitalize} to play", url = s"$netBaseUrl${routes.Puzzle.show(puzzle.id).url}",
'site_name -> "lichess.org", description = s"Tactic puzzle #${puzzle.id}: " + puzzle.color.fold(
'url -> s"$netBaseUrl${routes.Puzzle.show(puzzle.id).url}",
'description -> puzzle.color.fold(
trans.findTheBestMoveForWhite, trans.findTheBestMoveForWhite,
trans.findTheBestMoveForBlack trans.findTheBestMoveForBlack
).str())) { ).str()).some) {
<div class="round cg-512">@miniBoardContent</div> <div class="round cg-512">@miniBoardContent</div>
} }

View file

@ -1,4 +1,4 @@
@(title: String, side: Option[Html] = None, openGraph: Map[Symbol, String] = Map.empty, moreJs: Html = Html(""))(body: Html)(implicit ctx: Context) @(title: String, side: Option[Html] = None, openGraph: Option[lila.app.ui.OpenGraph] = None, moreJs: Html = Html(""))(body: Html)(implicit ctx: Context)
@sideSection = { @sideSection = {
<div class="side"> <div class="side">

View file

@ -18,12 +18,10 @@
title = "Watch Chess events", title = "Watch Chess events",
side = side.some, side = side.some,
moreJs = moreJs, moreJs = moreJs,
openGraph = Map( openGraph = lila.app.ui.OpenGraph(
'type -> "website", title = "Watch chess events",
'title -> "Watch chess events", url = s"$netBaseUrl${routes.Relay.index.url}",
'site_name -> "lichess.org", description = "Real-time relay of international chess tournaments").some) {
'url -> s"$netBaseUrl${routes.Relay.index.url}",
'description -> "Real-time relay of international chess tournaments")) {
<div id="relay_list"> <div id="relay_list">
<div class="content_box relay_box no_padding" data-icon="n"> <div class="content_box relay_box no_padding" data-icon="n">
<h1> <h1>

View file

@ -1,4 +1,4 @@
@(title: String, moreJs: Html = Html(""), side: Option[Html] = None, chat: Option[Html] = None, underchat: Option[Html] = None, chessground: Boolean = true, openGraph: Map[Symbol, String] = Map.empty)(body: Html)(implicit ctx: Context) @(title: String, moreJs: Html = Html(""), side: Option[Html] = None, chat: Option[Html] = None, underchat: Option[Html] = None, chessground: Boolean = true, openGraph: Option[lila.app.ui.OpenGraph] = None)(body: Html)(implicit ctx: Context)
@moreCss = { @moreCss = {
@cssTag("relay.css") @cssTag("relay.css")

View file

@ -44,12 +44,10 @@ chat = chat.map(c => base.chat(c, trans.chatRoom.str())),
underchat = underchat.some, underchat = underchat.some,
moreJs = moreJs, moreJs = moreJs,
chessground = false, chessground = false,
openGraph = Map( openGraph = lila.app.ui.OpenGraph(
'type -> "website", title = rel.name,
'title -> rel.name, url = s"$netBaseUrl${routes.Relay.show(rel.id, rel.slug).url}",
'site_name -> "lichess.org", description = ~content.flatMap(_.short)).some) {
'url -> s"$netBaseUrl${routes.Relay.show(rel.id, rel.slug).url}",
'description -> ~content.flatMap(_.short))) {
@content.flatMap(_.long).map { long => @content.flatMap(_.long).map { long =>
<div id="relay_description">@autoLink(long)</div> <div id="relay_description">@autoLink(long)</div>
} }

View file

@ -1,4 +1,4 @@
@(title: String, side: Html, chat: Option[Html] = None, underchat: Option[Html] = None, moreJs: Html = Html(""), openGraph: Map[Symbol, String] = Map.empty, moreCss: Html = Html(""), chessground: Boolean = true, playing: Boolean = false)(body: Html)(implicit ctx: Context) @(title: String, side: Html, chat: Option[Html] = None, underchat: Option[Html] = None, moreJs: Html = Html(""), openGraph: Option[lila.app.ui.OpenGraph] = None, moreCss: Html = Html(""), chessground: Boolean = true, playing: Boolean = false)(body: Html)(implicit ctx: Context)
@base.layout( @base.layout(
title = title, title = title,

View file

@ -24,7 +24,7 @@ side = views.html.game.side(pov, (data\"game"\"initialFen").asOpt[String], tour,
chat = game.tournamentId.isEmpty.option(leftabs(pov, prefs)), chat = game.tournamentId.isEmpty.option(leftabs(pov, prefs)),
underchat = views.html.game.watchers().some, underchat = views.html.game.watchers().some,
moreJs = moreJs, moreJs = moreJs,
openGraph = povOpenGraph(pov), openGraph = povOpenGraph(pov).some,
chessground = false, chessground = false,
playing = true) { playing = true) {
<div class="round cg-512"> <div class="round cg-512">

View file

@ -21,7 +21,7 @@ side = views.html.game.side(pov, (data\"game"\"initialFen").asOpt[String], tour,
chat = base.chatDom(trans.spectatorRoom.str()).some, chat = base.chatDom(trans.spectatorRoom.str()).some,
underchat = views.html.game.watchers().some, underchat = views.html.game.watchers().some,
moreJs = moreJs, moreJs = moreJs,
openGraph = povOpenGraph(pov), openGraph = povOpenGraph(pov).some,
chessground = false) { chessground = false) {
<div class="round cg-512">@miniBoardContent</div> <div class="round cg-512">@miniBoardContent</div>
@cross.map { c => @cross.map { c =>

View file

@ -18,7 +18,7 @@ side = views.html.game.side(pov, initialFen, none, simul = none, relay = none, u
chat = base.chatDom(trans.spectatorRoom.str()).some, chat = base.chatDom(trans.spectatorRoom.str()).some,
underchat = views.html.game.watchers().some, underchat = views.html.game.watchers().some,
moreJs = moreJs, moreJs = moreJs,
openGraph = povOpenGraph(pov)) { openGraph = povOpenGraph(pov).some) {
<div class="round cg-512"> <div class="round cg-512">
<div class="top"> <div class="top">
<div class="lichess_game"> <div class="lichess_game">

View file

@ -1,4 +1,4 @@
@(title: String, side: Option[Html] = None, robots: Boolean = true, evenMoreJs: Html = Html(""), evenMoreCss: Html = Html(""), openGraph: Map[Symbol, String] = Map.empty)(body: Html)(implicit ctx: Context) @(title: String, side: Option[Html] = None, robots: Boolean = true, evenMoreJs: Html = Html(""), evenMoreCss: Html = Html(""), openGraph: Option[lila.app.ui.OpenGraph] = None)(body: Html)(implicit ctx: Context)
@moreCss = { @moreCss = {
@cssTag("user-list.css") @cssTag("user-list.css")

View file

@ -63,13 +63,11 @@ title = title,
side = side.some, side = side.some,
robots = false, robots = false,
evenMoreJs = evenMoreJs, evenMoreJs = evenMoreJs,
openGraph = Map( openGraph = lila.app.ui.OpenGraph(
'type -> "website", image = staticUrl("images/large_tile.png").some,
'image -> staticUrl("images/large_tile.png"), title = u.titleUsernameWithBestRating,
'title -> u.titleUsernameWithBestRating, url = s"$netBaseUrl${routes.User.show(u.username).url}",
'site_name -> "lichess.org", description = describeUser(u)).some) {
'url -> s"$netBaseUrl${routes.User.show(u.username).url}",
'description -> describeUser(u))) {
<div class="content_box no_padding user_show"> <div class="content_box no_padding user_show">
<div class="content_box_top"> <div class="content_box_top">
@info.allTrophies.map { trophy => @info.allTrophies.map { trophy =>