Skip to content

Instantly share code, notes, and snippets.

@ertugrulozcan

ertugrulozcan/AmpDetail.cshtml

Created August 20, 2020 12:08
Show Gist options
  • Save ertugrulozcan/f722463058f85814918fddbb0544533b to your computer and use it in GitHub Desktop.
Save ertugrulozcan/f722463058f85814918fddbb0544533b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
AmpDetail.cshtml
@using System.Linq
@using Raven.Component.Extensions.DateTimeExtensions
@using Raven.Core.CommonWeb
@using Raven.Core.CommonWeb.Helpers
@using Raven.Core.CommonWeb.ActionFilters.MetaTagsModels
@model Raven.UI.FanatikWeb.Models.ViewModels.TextNews.TextNewsDetailViewModel
@using Raven.Core.CommonWeb.Extensions
@using Raven.Data.Core.Model.Shared
@using Raven.UI.FanatikWeb.Helpers
@{
Layout = null;
string cdnUrl = Html.GetStaticFileCdnUrl();
string embedUrl = Html.GetEmbedBaseUrl();
string taboolaQuery = cdnUrl + "/Taboola.html?q=" + ViewBag.AmpCanonicalUrl;
string adUnitSlug = (string)ViewBag.MetaTags?.AdUnitSlug;
if (!string.IsNullOrEmpty(adUnitSlug))
{
adUnitSlug = adUnitSlug.Trim();
}
else
{
adUnitSlug = "genel";
}
}
<!doctype html>
<html ⚡ lang="tr">
<head>
<meta charset="UTF-8">
@if (!string.IsNullOrEmpty(ViewBag.Title))
{
<title>@Html.Raw(ViewBag.Title)</title>
}
else
{
<title>Spor Haberlerinde Son Dakika Gelişmeler</title>
}
@if (!string.IsNullOrEmpty(ViewBag.Description))
{
<meta name="description" content="@Html.Raw(ViewBag.Description)" />
}
else
{
<meta content="Son dakika spor haberleri ve en yeni transfer dedikoduları için Fanatik'i takip edin ve sporla ilgili gelişmelerden haberdar olun!" name="description" />
}
<meta content="width=device-width,minimum-scale=1,initial-scale=1" name="viewport">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<link as="script" href="https://cdn.ampproject.org/v0.js" rel="preload">
<link as="script" href="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" rel="preload">
<link as="script" href="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" rel="preload">
<link as="script" href="https://cdn.ampproject.org/v0/amp-ad-0.1.js" rel="preload">
<link as="script" href="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" rel="preload">
<link as="script" href="https://cdn.ampproject.org/v0/amp-twitter-0.1.js" rel="preload">
<link as="script" href="https://cdn.ampproject.org/v0/amp-instagram-0.1.js" rel="preload">
<link as="script" href="https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js" rel="preload">
<link as="script" href="https://cdn.ampproject.org/v0/amp-social-share-0.1.js" rel="preload">
<link as="script" href="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js" rel="preload">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
<script async custom-element="amp-fx-flying-carpet" src="https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js"></script>
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
<script async custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>
<link rel="canonical" href="@ViewBag.AmpCanonicalUrl" />
@{
NewsArticleJsonModel item = (NewsArticleJsonModel)ViewBag.MetaTags?.NewsArticleJson;
if (item != null)
{
item.Url = ViewBag.AmpCanonicalUrl;
}
await Html.RenderPartialAsync("Partials/_NewsArticleJson");
}
<style amp-custom>
* {
box-sizing: border-box;
}
h1 {
color: red;
}
body {
background: #F2F3F4;
font: 400 14px system-ui;
}
.sep {
display: inline-block;
width: 100%;
}
body > header {
position: fixed;
top: 0;
left: 0;
right: 0;
/*height: 20px;*/
background: #FFF;
z-index: 10;
padding: 10px 0;
border-bottom: 1px solid #F2F3F4;
}
header .brand-logo {
width: 140px;
height: 32px;
margin: 0 auto;
}
header .menu-trigger {
float: right;
margin-right: 10px;
border: none;
background: none;
outline: none;
color: #000;
font-size: 14px;
cursor: pointer;
margin-top: 7px;
}
header .back {
float: left;
width: 18px;
height: 18px;
margin-left: 10px;
cursor: pointer;
display: block;
color: #000;
margin-top: 7px;
}
.menu-close {
background: none;
border: none;
color: #fff;
cursor: pointer;
font-size: 14px;
height: 100%;
outline: none;
padding-left: 18px;
text-align: left;
width: 100%;
}
.menu-close .amp-mobile-menu-close {
position: absolute;
right: 14px;
top: 14px;
}
#sidebar-right {
background: #fff;
}
#sidebar-right .sidebar-top-line {
width: 100%;
background: #E42729;
height: 42px;
font: 400 14px system-ui;
color: #fff;
}
#sidebar-right ul {
list-style: none;
padding: 20px;
margin: 0;
}
#sidebar-right ul li {
margin-bottom: 10px;
}
#sidebar-right ul li a {
text-decoration: none;
font: 400 18px system-ui;
font-weight: bold;
color: #000;
}
.page-wrap {
padding: 50px 10px 0 10px;
width: 100%;
}
.breadcrumb {
background-color: #fff;
list-style: none;
margin: 0;
padding: 13px 10px;
border-bottom: 1px solid #f2f3f4;
}
.breadcrumb li {
font-size: 12px;
line-height: 1.2;
}
.breadcrumb li:not(:last-child) {
float: left;
}
.breadcrumb li:last-child {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.breadcrumb li:last-child a {
color: #000;
}
.breadcrumb li a {
color: #7F7F7F;
text-decoration: none;
}
.breadcrumb li a:after {
content: ">";
display: inline-block;
margin: 0 14px;
}
.news-detail {
background: #fff;
padding-bottom: 30px;
}
.news-detail h1 {
color: #000;
font-size: 32px;
font-weight: bold;
padding: 0 10px 0 20px;
display: block;
width: 100%;
box-sizing: border-box;
}
.news-detail h2 {
color: #000;
font-size: 20px;
font-weight: bold;
padding: 0 10px 0 20px;
display: block;
width: 100%;
box-sizing: border-box;
}
.news-detail .date {
color: #B2B2B2;
font-size: 12px;
font-weight: 400;
padding: 0 10px 0 20px;
display: block;
width: 100%;
margin-bottom: 20px;
box-sizing: border-box;
}
.news-detail .news-text {
color: #000;
font-size: 18px;
display: block;
width: 100%;
padding: 20px 10px 20px 20px;
box-sizing: border-box;
font-weight: 400;
line-height: 28px;
}
.news-detail .news-text blockquote {
word-break: break-all;
}
.news-detail .post-news-button {
background: #E42729;
color: #fff;
font-size: 16px;
display: block;
width: 95%;
box-sizing: border-box;
text-align: center;
font-weight: 400;
margin: 0 auto;
}
.square-banner {
text-align: center;
width: 100%;
float: left;
background: #fff;
padding: 15px 0;
}
.news-detail .contain img{
object-fit: contain;
background: #f2f2f2;
}
.news-detail .more-text {
font-size: 18px;
color: #000;
font-weight: bold;
display: block;
width: 100%;
padding-left: 20px;
box-sizing: border-box;
border-top: 1px solid #F2F3F4;
margin: 20px 0;
}
.news-detail .similar-box {
width: 100%;
padding: 0 20px;
box-sizing: border-box;
display: inline-block;
margin: 20px 0;
}
.news-detail .similar-box .similar-content {
border: 1px solid #F2F3F4;
width: 100%;
display: inline-block;
text-decoration: none;
}
.news-detail .similar-box .similar-content .similar-photo {
float: left;
margin-right: 10px;
}
.news-detail .similar-box .similar-content .similar-title {
font-size: 16px;
color: #000;
line-height: 22px;
font-weight: bold;
}
.other-news {
background: #fff;
margin-top: 10px;
}
.other-news h3 {
border-bottom: 1px solid #F2F3F4;
color: #000;
display: block;
font-size: 18px;
font-weight: 700;
margin: 0;
padding: 12px 0 12px 20px;
width: 100%;
}
.other-news ul {
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
width: 100%;
}
.other-news ul li {
align-items: center;
display: flex;
justify-content: center;
width: 100%;
margin-bottom: 5px;
}
.other-news ul li a {
width: 50%;
color: #333;
text-decoration: none;
}
.other-news ul li .other-news-photo {
max-width: 100%;
}
.other-news ul li .other-news-title {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
font-size: 14px;
font-weight: 700;
line-height: 1.5;
max-height: calc(14px * 1.5 * 4);
overflow: hidden;
padding: 0 20px;
text-align: left;
width: 100%;
}
.news-detail .suggested-news {
background: #ff0000;
clear: both;
color: #fff;
display: block;
margin-bottom: 30px;
position: relative;
text-decoration: none;
}
.news-detail .suggested-news__heading {
background-color: #fff;
color: #000;
display: block;
font-size: 18px;
font-weight: 700;
margin-bottom: 0;
padding: 10px 0 3px;
}
.news-detail .suggested-news__content {
align-items: center;
display: flex;
min-height: 76px;
}
.news-detail .suggested-news__image {
float: left;
height: 84px;
width: 153px;
}
.news-detail .suggested-news__image img {
height: 100%;
max-width: 100%;
object-fit: cover;
width: 100%;
}
.news-detail .suggested-news__title {
box-orient: vertical;
display: -webkit-box;
font-size: 18px;
font-weight: 700;
overflow: hidden;
padding: 0 30px 0 17px;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-height: 1.3;
}
footer {
background: #fff;
font-size: 12px;
height: 70px;
line-height: 14px;
text-align: center;
width: 100%;
box-sizing: border-box;
display: block;
padding-top: 20px;
}
.amp-social-share-area {
margin-bottom: 20px;
}
amp-social-share.rounded {
border-radius: 50%;
background-size: 75%;
}
.amp-social-share-email {
background-color: #B72D21;
}
.show-more {
background-color: white;
display: block;
text-align: center;
padding: 10px;
}
</style>
@Html.Raw("<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>")
</head>
<body>
@{
await Html.RenderPartialAsync("Partials/_DataLayer");
}
<amp-sticky-ad layout="nodisplay">
<amp-ad data-enable-refresh="30"
data-multi-size-validation="false"
data-slot="/9927946/fanatik_mobilsite/amp/sticky_320x100"
height=100
type="doubleclick"
width=320>
</amp-ad>
</amp-sticky-ad>
<header>
<a href="@ViewBag.BaseUrl" class="back">
<amp-img src="@cdnUrl/assets/amp/left-arrow.svg" width="18" height="18"></amp-img>
</a>
<button class="menu-trigger" on="tap:sidebar-right.toggle" title="Toggle Sidebar">
MENÜ ☰
</button>
<div class="brand-logo">
<a href="@ViewBag.BaseUrl">
<amp-img src="@cdnUrl/assets/amp/logo.svg" width="140" height="32"></amp-img>
</a>
</div>
</header>
<amp-sidebar id="sidebar-right" layout="nodisplay" side="right">
<div class="sidebar-top-line">
<button class="menu-close" on="tap:sidebar-right.toggle" title="Toggle Sidebar">
MENÜ
<amp-img src="@cdnUrl/assets/amp/close.svg" width="11" height="11" class="amp-mobile-menu-close"></amp-img>
</button>
</div>
@await Component.InvokeAsync("Menu")
</amp-sidebar>
<div class="page-wrap">
<div class="sep"></div>
<center class="adv-content">
<amp-ad width="300"
height="250"
data-enable-refresh="30"
layout="fixed"
type="doubleclick"
data-slot="/9927946/fanatik_mobilsite/@adUnitSlug/320x50"
json='{"targeting":{"keyword":[&quot;amp&quot;, &quot;@Model.News.MainCategory?.Slug&quot;]}}'
rtc-config='{"vendors":{"criteo":{"ZONE_ID":"1320258","LINE_ITEM_RANGES":"0..10:0.01;10..25:0.05;25..50:0.10;50..100:0.25"}},"timeoutMillis":1000}'>
</amp-ad>
</center>
<div class="sep"></div>
<div class="news-detail">
@(await Component.InvokeAsync("Breadcrumb", Model.Breadcrumb))
<h1>@Model.News.Title</h1>
<span class="date">
@if (Model.News.CreatedDateView == null)
{
@(Model.News.PrintedNews ? Model.News.PublishDate.GetTrDate() : Model.News.StartDate.GetTrDate())
}
else if (Model.News.CreatedDateView.Equals("Evet"))
{
@(Model.News.PrintedNews ? Model.News.PublishDate.GetTrDate() : Model.News.StartDate.GetTrDate())
}
<br>
@if (Model.News.UpdateDate.HasValue && Model.News.UpdateDate != null)
{
<span class="news-detail__info__date__item">
<span>Son Güncelleme: </span>
<time datetime="@Html.Raw(Model.News.UpdateDate.Value.AddHours(LocalizationHelpers.TR_GMT_HOURS).ToAmpFormat())">
@Html.Raw(Model.News.UpdateDate.Value.AddHours(LocalizationHelpers.TR_GMT_HOURS).ToString("dd.MM.yyyy HH:mm"))
</time>
</span>
}
</span>
<center class="amp-social-share-area">
<amp-social-share width="38"
height="38"
type="facebook"
data-param-text="@Model.News.Title"
data-param-app_id="131274230225367">
</amp-social-share>
<amp-social-share data-param-app_id=""
height="38"
type="twitter"
width="38">
</amp-social-share>
<amp-social-share height="38"
type="email"
width="38">
</amp-social-share>
<amp-social-share height="38"
type="whatsapp"
width="38">
</amp-social-share>
</center>
@if (Model.News.Images != null && Model.News.Images.Any())
{
ImageModel mainImage = Model.News.Images.FirstOrDefault();
if (!string.IsNullOrEmpty(mainImage?.EmbedVideoUrl))
{
<amp-iframe id="main-image"
width=500
height=281
sandbox="allow-scripts allow-same-origin allow-popups"
allowfullscreen=""
layout="responsive"
frameborder="0"
src="@mainImage?.EmbedVideoUrl">
<amp-img placeholder
layout="fill"
src="@Model.News.Images.FirstOrDefault()?.GetImageUrl(ImageRatio.Aspect16X9, 394, 221)">
</amp-img>
</amp-iframe>
}
else if (!string.IsNullOrEmpty(mainImage?.ExternalMetaData?.AttachedVideoId))
{
<amp-iframe id="main-image"
width=500
height=281
sandbox="allow-scripts allow-same-origin allow-popups"
allowfullscreen=""
layout="responsive"
frameborder="0"
src="@(embedUrl + Url.RouteUrl("EmbedPlayer", new {videoObjectId = mainImage.ExternalMetaData.AttachedVideoId, contentId = Model.News.Id, autoplay = true}))">
<amp-img placeholder
layout="fill"
src="@Model.News.Images.FirstOrDefault()?.GetImageUrl(ImageRatio.Aspect16X9, 394, 221)">
</amp-img>
</amp-iframe>
}
else
{
<amp-img src="@Model.News.Images.FirstOrDefault()?.GetImageUrl(ImageRatio.Aspect16X9, 394, 221)"
width="394"
height="221"
layout="responsive"
alt="@Html.Raw(Model.News?.Title?.Replace("\"", "'"))">
</amp-img>
}
}
<amp-iframe width="1px"
height="1px"
sandbox="allow-scripts allow-same-origin"
layout="fixed"
frameborder="0"
src="@taboolaQuery">
</amp-iframe>
<h2>@Html.Raw(Model.News.Description)</h2>
<div class="sep"></div>
<center class="adv-content">
<amp-fx-flying-carpet height="300px">
<amp-ad width="300"
height="600"
layout="fixed"
type="doubleclick"
data-slot="/9927946/fanatik_mobilsite/@adUnitSlug/haberici_300x250_1"
json='{"targeting":{"keyword":[&quot;amp&quot;, &quot;@Model.News.MainCategory?.Slug&quot;]}}'
rtc-config='{"vendors":{"criteo":{"ZONE_ID":"1320258","LINE_ITEM_RANGES":"0..10:0.01;10..25:0.05;25..50:0.10;50..100:0.25"}},"timeoutMillis":1000}'>
</amp-ad>
</amp-fx-flying-carpet>
</center>
@if (!string.IsNullOrWhiteSpace(Model.News.Body))
{
string newsIframe = $"<amp-iframe id=\"most-readed-news\" src=\"{embedUrl}/bicomponent/mostreadednews?iframe=true\" width=400 height=200 sandbox=\"allow-scripts {(!string.IsNullOrEmpty(embedUrl) ? "allow-same-origin" : "")} allow-popups\" resizable allowfullscreen=\"\" layout=\"responsive\" frameborder=\"0\"> <div overflow class=\"show-more\" tabindex=\"0\" role=\"button\" aria-label=\"Göster\">Daha fazla göster</div></amp-iframe>";
string body = Html.AddItemToParagraph(Model.News.Body, newsIframe, 100);
body = MatchWidgetHelper.EmbedMatchWidgetAmpScript(body);
<span class="news-text">@Html.Raw(body)</span>
}
<div class="amp-taboola-ads">
<amp-embed width=100
height=100
type=taboola
layout=responsive
heights="(min-width:1839px) 278%, (min-width:1239px) 283%, (min-width:832px) 291%, (min-width:558px) 303%, (min-width:417px) 321%, 345%"
data-publisher="milliyet-network"
data-mode="alternating-thumbnails-a-amp"
data-placement="Mobile Below Article Thumbnails AMP"
data-target_type="mix"
data-article="auto"
data-url="@Model?.News?.Url">
</amp-embed>
</div>
</div>
<div class="other-news">
<h3>GÜNCEL HABERLER</h3>
@(await Component.InvokeAsync("HeadlineSlider"))
</div>
<div class="sep"></div>
</div>
<footer>
copyright © @(DateTime.Now.Year) www.fanatik.com.tr Demirören Gazetecilik AŞ <br> Tüm Hakları Saklıdır
</footer>
<amp-analytics id="analytics2" type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-3093095-19"
},
"triggers": {
"click on #post-news-button trigger": {
"on": "click",
"selector": "#post-news-button",
"request": "event",
"vars": {
"eventCategory": "amp",
"eventAction": "devam-button",
"eventLabel": "click"
}
}
}
}
</script>
</amp-analytics>
<amp-pixel src="https://dcctr1.segmentify.com/add/event/pixel.gif?apiKey=9efbd908-0933-481f-99b1-0fff81999a73&name=PAGE_VIEW&source=amp"></amp-pixel>
<amp-pixel src="https://dcctr1.segmentify.com/add/event/pixel.gif?apiKey=9efbd908-0933-481f-99b1-0fff81999a73&name=PRODUCT_VIEW&[email protected]&source=amp"></amp-pixel>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment