Merge branch 'master' of github.com:guardian/frontend into de-ts

# Conflicts: # grunt-configs/shell.js # npm-shrinkwrap.json # package.json
guardian · Jul 13, 2016 · 0258a3b · 0258a3b
2 parents 348f68c + 3db143a
commit 0258a3b
Show file tree

Hide file tree

Showing 48 changed files with 761 additions and 89 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -106,7 +106,7 @@ module.exports = function (grunt) {
             grunt.task.run(['shell:updateCanIUse']);
         }
 
-        grunt.task.run(['px_to_rem', 'autoprefixer']);
+        grunt.task.run(['shell:atomiseCSS', 'px_to_rem', 'postcss']);
     });
     grunt.registerTask('compile:js', function () {
         grunt.task.run(['clean:js', 'compile:inlineSvgs']);

diff --git a/applications/test/ShareLinksTest.scala b/applications/test/ShareLinksTest.scala
@@ -23,13 +23,13 @@ import org.scalatest.concurrent.{Futures, ScalaFutures}
 
         pageShares.map(_.text) should be (List("Facebook", "Twitter", "Email", "LinkedIn", "Google plus", "WhatsApp", "Messenger"))
         pageShares.map(_.href) should be (List(
-          "https://www.facebook.com/dialog/share?app_id=202314643182694&href=http%3A%2F%2Fgu.com%2Fp%2F4gc8j%2Fsfb&redirect_uri=http%3A%2F%2Fgu.com%2Fp%2F4gc8j%2Fsfb",
-          "https://twitter.com/intent/tweet?text=Cameron%20statement%20to%20the%20Commons%20on%20the%20EU%20referendum%20-%20Politics%20live&url=http%3A%2F%2Fgu.com%2Fp%2F4gc8j%2Fstw",
-          "mailto:?subject=Cameron%20statement%20to%20the%20Commons%20on%20the%20EU%20referendum%20-%20Politics%20live&body=http%3A%2F%2Fgu.com%2Fp%2F4gc8j%2Fsbl",
-          "http://www.linkedin.com/shareArticle?mini=true&title=Cameron+statement+to+the+Commons+on+the+EU+referendum+-+Politics+live&url=http%3A%2F%2Fgu.com%2Fp%2F4gc8j",
-          "https://plus.google.com/share?url=http%3A%2F%2Fgu.com%2Fp%2F4gc8j%2Fsgp&amp;hl=en-GB&amp;wwc=1",
-          "whatsapp://send?text=%22Cameron%20statement%20to%20the%20Commons%20on%20the%20EU%20referendum%20-%20Politics%20live%22%20http%3A%2F%2Fgu.com%2Fp%2F4gc8j%2Fswa",
-          "fb-messenger://share?link=http%3A%2F%2Fgu.com%2Fp%2F4gc8j%2Fsme&app_id=180444840287"))
+          "https://www.facebook.com/dialog/share?app_id=202314643182694&href=https%3A%2F%2Fwww.theguardian.com%2Fpolitics%2Fblog%2Flive%2F2016%2Ffeb%2F03%2Feu-renegotiation-pmqs-cameron-corbyn-he-prepares-to-make-statement-to-mps-politics-live%3FCMP%3Dshare_btn_fb&redirect_uri=https%3A%2F%2Fwww.theguardian.com%2Fpolitics%2Fblog%2Flive%2F2016%2Ffeb%2F03%2Feu-renegotiation-pmqs-cameron-corbyn-he-prepares-to-make-statement-to-mps-politics-live%3FCMP%3Dshare_btn_fb",
+          "https://twitter.com/intent/tweet?text=Cameron%20statement%20to%20the%20Commons%20on%20the%20EU%20referendum%20-%20Politics%20live&url=https%3A%2F%2Fwww.theguardian.com%2Fpolitics%2Fblog%2Flive%2F2016%2Ffeb%2F03%2Feu-renegotiation-pmqs-cameron-corbyn-he-prepares-to-make-statement-to-mps-politics-live%3FCMP%3Dshare_btn_tw",
+          "mailto:?subject=Cameron%20statement%20to%20the%20Commons%20on%20the%20EU%20referendum%20-%20Politics%20live&body=https%3A%2F%2Fwww.theguardian.com%2Fpolitics%2Fblog%2Flive%2F2016%2Ffeb%2F03%2Feu-renegotiation-pmqs-cameron-corbyn-he-prepares-to-make-statement-to-mps-politics-live%3FCMP%3Dshare_btn_link",
+          "http://www.linkedin.com/shareArticle?mini=true&title=Cameron+statement+to+the+Commons+on+the+EU+referendum+-+Politics+live&url=https%3A%2F%2Fwww.theguardian.com%2Fpolitics%2Fblog%2Flive%2F2016%2Ffeb%2F03%2Feu-renegotiation-pmqs-cameron-corbyn-he-prepares-to-make-statement-to-mps-politics-live",
+          "https://plus.google.com/share?url=https%3A%2F%2Fwww.theguardian.com%2Fpolitics%2Fblog%2Flive%2F2016%2Ffeb%2F03%2Feu-renegotiation-pmqs-cameron-corbyn-he-prepares-to-make-statement-to-mps-politics-live%3FCMP%3Dshare_btn_gp&amp;hl=en-GB&amp;wwc=1",
+          "whatsapp://send?text=%22Cameron%20statement%20to%20the%20Commons%20on%20the%20EU%20referendum%20-%20Politics%20live%22%20https%3A%2F%2Fwww.theguardian.com%2Fpolitics%2Fblog%2Flive%2F2016%2Ffeb%2F03%2Feu-renegotiation-pmqs-cameron-corbyn-he-prepares-to-make-statement-to-mps-politics-live%3FCMP%3Dshare_btn_wa",
+          "fb-messenger://share?link=https%3A%2F%2Fwww.theguardian.com%2Fpolitics%2Fblog%2Flive%2F2016%2Ffeb%2F03%2Feu-renegotiation-pmqs-cameron-corbyn-he-prepares-to-make-statement-to-mps-politics-live%3FCMP%3Dshare_btn_me&app_id=180444840287"))
       }
     }
   }
@@ -47,9 +47,9 @@ import org.scalatest.concurrent.{Futures, ScalaFutures}
 
         elementShares.map(_.text) should be(List("Facebook", "Twitter", "Pinterest"))
         elementShares.map(_.href) should be(List(
-          "https://www.facebook.com/dialog/share?app_id=202314643182694&href=http%3A%2F%2Fgu.com%2Fp%2F42jcb%2Fsfb%232&redirect_uri=http%3A%2F%2Fgu.com%2Fp%2F42jcb%2Fsfb%232",
-          "https://twitter.com/intent/tweet?text=2014%20Wildlife%20photographer%20of%20the%20Year&url=http%3A%2F%2Fgu.com%2Fp%2F42jcb%2Fstw%232",
-          "http://www.pinterest.com/pin/create/button/?description=2014+Wildlife+photographer+of+the+Year&url=http%3A%2F%2Fgu.com%2Fp%2F42jcb%232&media="
+          "https://www.facebook.com/dialog/share?app_id=202314643182694&href=https%3A%2F%2Fwww.theguardian.com%2Fenvironment%2Fgallery%2F2014%2Foct%2F22%2F2014-wildlife-photographer-of-the-year%3FCMP%3Dshare_btn_fb%26page%3Dwith%3A2%232&redirect_uri=https%3A%2F%2Fwww.theguardian.com%2Fenvironment%2Fgallery%2F2014%2Foct%2F22%2F2014-wildlife-photographer-of-the-year%3FCMP%3Dshare_btn_fb%26page%3Dwith%3A2%232",
+          "https://twitter.com/intent/tweet?text=2014%20Wildlife%20photographer%20of%20the%20Year&url=https%3A%2F%2Fwww.theguardian.com%2Fenvironment%2Fgallery%2F2014%2Foct%2F22%2F2014-wildlife-photographer-of-the-year%3FCMP%3Dshare_btn_tw%26page%3Dwith%3A2%232",
+          "http://www.pinterest.com/pin/create/button/?description=2014+Wildlife+photographer+of+the+Year&url=https%3A%2F%2Fwww.theguardian.com%2Fenvironment%2Fgallery%2F2014%2Foct%2F22%2F2014-wildlife-photographer-of-the-year%3Fpage%3Dwith%3A2%232&media="
         ))
       }
     }
@@ -68,9 +68,9 @@ import org.scalatest.concurrent.{Futures, ScalaFutures}
 
         elementShares.map(_.text) should be (List("Facebook", "Twitter", "Google plus"))
         elementShares.map(_.href) should be (List(
-          "https://www.facebook.com/dialog/share?app_id=202314643182694&href=https%3A%2F%2Fwww.theguardian.com%2Fpolitics%2Fblog%2Flive%2F2016%2Ffeb%2F03%2Feu-renegotiation-pmqs-cameron-corbyn-he-prepares-to-make-statement-to-mps-politics-live%3Fpage%3Dwith%3A2%26CMP%3Dshare_btn_fb%232&redirect_uri=https%3A%2F%2Fwww.theguardian.com%2Fpolitics%2Fblog%2Flive%2F2016%2Ffeb%2F03%2Feu-renegotiation-pmqs-cameron-corbyn-he-prepares-to-make-statement-to-mps-politics-live%3Fpage%3Dwith%3A2%26CMP%3Dshare_btn_fb%232",
-          "https://twitter.com/intent/tweet?text=Cameron%20statement%20to%20the%20Commons%20on%20the%20EU%20referendum%20-%20Politics%20live&url=https%3A%2F%2Fwww.theguardian.com%2Fpolitics%2Fblog%2Flive%2F2016%2Ffeb%2F03%2Feu-renegotiation-pmqs-cameron-corbyn-he-prepares-to-make-statement-to-mps-politics-live%3Fpage%3Dwith%3A2%26CMP%3Dshare_btn_tw%232",
-          "https://plus.google.com/share?url=https%3A%2F%2Fwww.theguardian.com%2Fpolitics%2Fblog%2Flive%2F2016%2Ffeb%2F03%2Feu-renegotiation-pmqs-cameron-corbyn-he-prepares-to-make-statement-to-mps-politics-live%3Fpage%3Dwith%3A2%26CMP%3Dshare_btn_gp%232&amp;hl=en-GB&amp;wwc=1"
+          "https://www.facebook.com/dialog/share?app_id=202314643182694&href=https%3A%2F%2Fwww.theguardian.com%2Fpolitics%2Fblog%2Flive%2F2016%2Ffeb%2F03%2Feu-renegotiation-pmqs-cameron-corbyn-he-prepares-to-make-statement-to-mps-politics-live%3FCMP%3Dshare_btn_fb%26page%3Dwith%3A2%232&redirect_uri=https%3A%2F%2Fwww.theguardian.com%2Fpolitics%2Fblog%2Flive%2F2016%2Ffeb%2F03%2Feu-renegotiation-pmqs-cameron-corbyn-he-prepares-to-make-statement-to-mps-politics-live%3FCMP%3Dshare_btn_fb%26page%3Dwith%3A2%232",
+          "https://twitter.com/intent/tweet?text=Cameron%20statement%20to%20the%20Commons%20on%20the%20EU%20referendum%20-%20Politics%20live&url=https%3A%2F%2Fwww.theguardian.com%2Fpolitics%2Fblog%2Flive%2F2016%2Ffeb%2F03%2Feu-renegotiation-pmqs-cameron-corbyn-he-prepares-to-make-statement-to-mps-politics-live%3FCMP%3Dshare_btn_tw%26page%3Dwith%3A2%232",
+          "https://plus.google.com/share?url=https%3A%2F%2Fwww.theguardian.com%2Fpolitics%2Fblog%2Flive%2F2016%2Ffeb%2F03%2Feu-renegotiation-pmqs-cameron-corbyn-he-prepares-to-make-statement-to-mps-politics-live%3FCMP%3Dshare_btn_gp%26page%3Dwith%3A2%232&amp;hl=en-GB&amp;wwc=1"
         ))
       }
     }

diff --git a/article/app/controllers/ArticleController.scala b/article/app/controllers/ArticleController.scala
@@ -106,6 +106,7 @@ class ArticleController extends Controller with RendersItemResponse with Logging
     case article: ArticlePage =>
       val htmlResponse = () => {
         if (request.isEmail) views.html.articleEmail(article)
+        else if (article.article.isHeroic) views.html.articleHeroic(article)
         else if (article.article.isImmersive) views.html.articleImmersive(article)
         else if (request.isAmp) views.html.articleAMP(article)
         else views.html.article(article)

diff --git a/article/app/views/articleHeroic.scala.html b/article/app/views/articleHeroic.scala.html
@@ -0,0 +1,6 @@
+@(model: ArticlePage)(implicit request: RequestHeader)
+
+@main(model){
+}{
+    @fragments.articleBodyHeroic(model)
+}
diff --git a/article/app/views/fragments/articleBodyHeroic.scala.html b/article/app/views/fragments/articleBodyHeroic.scala.html
@@ -0,0 +1,42 @@
+@(model: ArticlePage, amp: Boolean = false)(implicit request: RequestHeader)
+
+@import common.LinkTo
+@import views.BodyCleaner
+@import views.support.TrailCssClasses.toneClass
+
+@defining(model.article) { article =>
+    <div class="l-side-margins">
+        <article id="article" data-test-id="article-root"
+            class="content content--article"
+            itemscope itemtype="@article.metadata.schemaType" role="main">
+            <meta itemprop="mainEntityOfPage" content="@LinkTo(article.metadata.url)">
+            <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
+                <meta itemprop="name" content="The Guardian">
+                <link itemprop="sameAs" href="http://www.theguardian.com">
+            </div>
+
+            @fragments.headerImmersive(article)
+
+            <div class="content__main">
+                <div class="gs-container">
+                    <div class="content__main-column content__main-column--article js-content-main-column">
+                        <div class="content__article-body from-content-api js-article__body" itemprop="articleBody">
+                            @BodyCleaner(article, article.fields.body, amp = amp)
+                        </div>
+                        <div class="after-article js-after-article"></div>
+                    </div>
+                    <div class="content__secondary-column js-secondary-column" aria-hidden="true">
+                        <div class="ad-slot-container js-ad-slot-container"></div>
+                    </div>
+                </div>
+            </div>
+        </article>
+
+        @if(article.content.tags.isLabourLiverpoolSeries) {
+            @fragments.labourLiverpoolContact()
+        }
+
+        @fragments.contentFooter(article, model.related)
+
+    </div>
+}
diff --git a/article/test/ArticleFeatureTest.scala b/article/test/ArticleFeatureTest.scala
@@ -445,10 +445,10 @@ import collection.JavaConversions._
       goTo("/film/2012/nov/11/margin-call-cosmopolis-friends-with-kids-dvd-review") { browser =>
         import browser._
 
-        val mailShareUrl = "mailto:?subject=Mark%20Kermode's%20DVD%20round-up&body=http%3A%2F%2Fgu.com%2Fp%2F3bk2f%2Fsbl"
-        val fbShareUrl = "https://www.facebook.com/dialog/share?app_id=202314643182694&href=http%3A%2F%2Fgu.com%2Fp%2F3bk2f%2Fsfb&redirect_uri=http%3A%2F%2Fgu.com%2Fp%2F3bk2f%2Fsfb"
-        val twitterShareUrl = "https://twitter.com/intent/tweet?text=Mark%20Kermode's%20DVD%20round-up&url=http%3A%2F%2Fgu.com%2Fp%2F3bk2f%2Fstw"
-        val gplusShareUrl = "https://plus.google.com/share?url=http%3A%2F%2Fgu.com%2Fp%2F3bk2f%2Fsgp&amp;hl=en-GB&amp;wwc=1"
+        val mailShareUrl = "mailto:?subject=Mark%20Kermode's%20DVD%20round-up&body=https%3A%2F%2Fwww.theguardian.com%2Ffilm%2F2012%2Fnov%2F11%2Fmargin-call-cosmopolis-friends-with-kids-dvd-review%3FCMP%3Dshare_btn_link"
+        val fbShareUrl = "https://www.facebook.com/dialog/share?app_id=202314643182694&href=https%3A%2F%2Fwww.theguardian.com%2Ffilm%2F2012%2Fnov%2F11%2Fmargin-call-cosmopolis-friends-with-kids-dvd-review%3FCMP%3Dshare_btn_fb&redirect_uri=https%3A%2F%2Fwww.theguardian.com%2Ffilm%2F2012%2Fnov%2F11%2Fmargin-call-cosmopolis-friends-with-kids-dvd-review%3FCMP%3Dshare_btn_fb"
+        val twitterShareUrl = "https://twitter.com/intent/tweet?text=Mark%20Kermode's%20DVD%20round-up&url=https%3A%2F%2Fwww.theguardian.com%2Ffilm%2F2012%2Fnov%2F11%2Fmargin-call-cosmopolis-friends-with-kids-dvd-review%3FCMP%3Dshare_btn_tw"
+        val gplusShareUrl = "https://plus.google.com/share?url=https%3A%2F%2Fwww.theguardian.com%2Ffilm%2F2012%2Fnov%2F11%2Fmargin-call-cosmopolis-friends-with-kids-dvd-review%3FCMP%3Dshare_btn_gp&amp;hl=en-GB&amp;wwc=1"
 
         Then("I should see buttons for my favourite social network")
 

diff --git a/commercial/app/model/commercial/Lookup.scala b/commercial/app/model/commercial/Lookup.scala
@@ -28,7 +28,7 @@ object Lookup extends ExecutionContexts with Logging {
 
   def contentByShortUrls(shortUrls: Seq[String]): Future[Seq[ContentType]] = {
     if (shortUrls.nonEmpty) {
-      val shortIds = shortUrls map (_.stripPrefix("http://").stripPrefix("gu.com").stripPrefix("/")) mkString ","
+      val shortIds = shortUrls map (_.replaceFirst("^[a-zA-Z]+://gu.com/","")) mkString ","
       getResponse(ContentApiClient.search(defaultEdition).ids(shortIds)) map {
         _.results map (Content(_))
       }

diff --git a/commercial/test/model/commercial/LookupTest.scala b/commercial/test/model/commercial/LookupTest.scala
@@ -20,7 +20,7 @@ import scala.concurrent.duration._
   }
 
   "contentByShortUrls" should "find content for genuine URLs" in {
-    val contents = contentsOf("http://gu.com/p/3qeqm", "http://gu.com/p/4v86p", "http://gu.com/p/4vf6t")
+    val contents = contentsOf("http://gu.com/p/3qeqm", "http://gu.com/p/4v86p", "https://gu.com/p/4vf6t")
     contents.map(_.metadata.webTitle) should be(Seq(
       "Wikipedia: meet the man who has edited 3m articles",
       "A book for the beach: In the Woods by Tana French",
@@ -29,7 +29,7 @@ import scala.concurrent.duration._
   }
 
   "contentByShortUrls" should "not find content for fake URLs" in {
-    contentsOf("http://gu.com/p/3qeqmjlkk", "http://gu.com/p/4gfshstv86p") should be(Nil)
+    contentsOf("http://gu.com/p/3qeqmjlkk", "https://gu.com/p/4gfshstv86p") should be(Nil)
   }
 
   "contentByShortUrls" should "not find content for badly-formed URLs" in {

diff --git a/common/app/assets/assets.scala b/common/app/assets/assets.scala
@@ -39,6 +39,30 @@ class Assets(base: String, mapResource: String, useHashedBundles: Boolean = Conf
 
 }
 
+// turns a readable CSS class into a list of rules in short form from the atomic css file
+class CssMap(mapResource: String) extends Logging {
+
+  lazy val lookup: Map[String, List[String]] = Get(cssMap(mapResource))
+
+  def apply(className: String): String = {
+      className + ' ' + lookup.getOrElse(className, throw new CssClassNotFoundException(className)).mkString(" ")
+  }
+
+  def jsonToAssetMap(json: String): Try[Map[String, List[String]]] =
+    Json.parse(json).validate[Map[String, List[String]]] match {
+      case JsSuccess(m, _) => Success(m)
+      case JsError(errors) => Failure(new Exception(s"$errors"))
+    }
+
+  def cssMap(resourceName: String): Try[Map[String, List[String]]] = {
+    for {
+      rawResource <- LoadFromClasspath(resourceName)
+      mappings <- jsonToAssetMap(rawResource)
+    } yield mappings
+  }
+
+}
+
 object inlineSvg {
 
   private val memoizedSvg: ConcurrentMap[String, Try[String]] = TrieMap()
@@ -54,11 +78,14 @@ object css {
 
   def head(projectOverride: Option[String]) = inline(cssHead(projectOverride.getOrElse(Configuration.environment.projectName)))
   def inlineStoryPackage = inline("story-package")
+  def atomic = inline("atomic")
+  def inlineLabourLiverpool = inline("article-labour-liverpool")
 
   def projectCss(projectOverride: Option[String]) = project(projectOverride.getOrElse(Configuration.environment.projectName))
   def headOldIE(projectOverride: Option[String]) = cssOldIE(projectOverride.getOrElse(Configuration.environment.projectName))
   def headIE9(projectOverride: Option[String]) = cssIE9(projectOverride.getOrElse(Configuration.environment.projectName))
 
+
   private def inline(module: String): String = {
     val resourceName = s"assets/inline-stylesheets/$module.css"
     Get(if (Play.current.mode == Mode.Dev) {
@@ -135,3 +162,5 @@ object LoadFromClasspath {
 }
 
 case class AssetNotFoundException(assetPath: String) extends Exception(s"Cannot find asset $assetPath. You should run `make compile`.")
+
+case class CssClassNotFoundException(cssClass: String) extends Exception(s"Cannot find css class $cssClass in the atomic class mappings")
diff --git a/common/app/conf/application.scala b/common/app/conf/application.scala
@@ -2,3 +2,4 @@ package conf
 
 object Configuration extends common.GuardianConfiguration
 object Static extends common.Assets.Assets(Configuration.assets.path, "assets/assets.map")
+object Atomise extends common.Assets.CssMap("assets/atomic-class-map.json")
diff --git a/common/app/conf/switches/ABTestSwitches.scala b/common/app/conf/switches/ABTestSwitches.scala
@@ -50,7 +50,7 @@ trait ABTestSwitches {
     "Does 'join discussion' message after poll participation increase comments",
     owners = Seq(Owner.withGithub("GHaberis")),
     safeState = Off,
-    sellByDate = new LocalDate(2016, 7, 13),
+    sellByDate = new LocalDate(2016, 7, 27),
     exposeClientSide = true
   )
 

diff --git a/common/app/conf/switches/FeatureSwitches.scala b/common/app/conf/switches/FeatureSwitches.scala
@@ -14,6 +14,17 @@ trait FeatureSwitches {
     exposeClientSide = false
   )
 
+  // see https://github.com/guardian/frontend/pull/13446
+  val HeroicTemplateSwitch = Switch(
+    SwitchGroup.Feature,
+    "heroic-main-media",
+    "If this switch is on, Heroic template will be applied to heroic articles. This template is part of a Membership Explore test",
+    owners = Seq(Owner.withGithub("siadcock")),
+    safeState = Off,
+    sellByDate = new LocalDate(2016, 9, 29),
+    exposeClientSide = false
+  )
+
   val FixturesAndResultsContainerSwitch = Switch(
     SwitchGroup.Feature,
     "fixtures-and-results-container",

diff --git a/common/app/model/ShareLinks.scala b/common/app/model/ShareLinks.scala
@@ -144,37 +144,25 @@ final case class ShareLinks(
     List(Facebook, Twitter, PinterestBlock)
   }
 
-  private def createShortUrlWithCampaign(platform: SharePlatform): String = platform.campaign match {
-    case Some(campaign) => s"${fields.shortUrl}/$campaign"
-    case _ => fields.shortUrl
+  private def campaignParams(platform: SharePlatform): Map[String, String] = {
+    platform.campaign.flatMap(ShortCampaignCodes.getFullCampaign).map(campaign => Map("CMP" -> campaign)).getOrElse(Map.empty)
   }
 
   def elementShares(elementId: String, mediaPath: Option[String]): Seq[ShareLink] = elementShareOrder.map( sharePlatform => {
-
-    // Currently, only element shares on live blogs will use fully expanded urls. These urls take a CMP parameter.
-    // Everything else uses short urls with campaign codes.
-    val href = if (tags.isLiveBlog) {
-      val webUrlParams = List(
-        Some("page" -> s"with:$elementId"),
-        sharePlatform.campaign.flatMap(ShortCampaignCodes.getFullCampaign).map(campaign => "CMP" -> campaign)
-      ).flatten.toMap
-
-      metadata.webUrl.addFragment(elementId).appendQueryParams(webUrlParams)
-    } else {
-      createShortUrlWithCampaign(sharePlatform).addFragment(elementId)
-    }
-
+    val webUrlParams = campaignParams(sharePlatform)
+    val href = metadata.webUrl.addFragment(elementId).appendQueryParams(webUrlParams + ("page" -> s"with:$elementId"))
     ShareLinks.create(sharePlatform, href = href, title = metadata.webTitle, mediaPath = mediaPath)
   })
 
   val pageShares: Seq[ShareLink] = pageShareOrder.map( sharePlatform => {
+    val webUrlParams = campaignParams(sharePlatform)
+    val href = metadata.webUrl.appendQueryParams(webUrlParams)
+
     val contentTitle = sharePlatform match {
       case Twitter if tags.isClimateChangeSeries => s"${metadata.webTitle} #keepitintheground"
       case _ => metadata.webTitle
     }
 
-    val href = createShortUrlWithCampaign(sharePlatform)
-
     ShareLinks.create(sharePlatform, href = href, title = contentTitle, mediaPath = None)
   })
 }