294 lines
11 KiB
Plaintext
294 lines
11 KiB
Plaintext
@model QRRapidoApp.Models.ViewModels.ArticleViewModel
|
|
@{
|
|
Layout = "~/Views/Shared/_Layout.cshtml";
|
|
ViewData["Title"] = Model.Metadata.Title;
|
|
var isEn = (ViewBag.Culture as string) == "en";
|
|
var isEs = (ViewBag.Culture as string) == "es-PY" || (ViewBag.Culture as string) == "es";
|
|
string T(string pt, string es, string en) => isEn ? en : isEs ? es : pt;
|
|
var baseUrl = "https://qrrapido.site";
|
|
var articleUrl = $"{baseUrl}/{ViewBag.Culture}/tutoriais/{ViewBag.Slug}";
|
|
}
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="@ViewBag.Culture">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>@Model.Metadata.Title - QR Rapido</title>
|
|
|
|
<!-- SEO Meta Tags -->
|
|
<meta name="description" content="@Model.Metadata.Description">
|
|
<meta name="keywords" content="@Model.Metadata.Keywords">
|
|
<meta name="author" content="@Model.Metadata.Author">
|
|
<meta name="robots" content="index, follow">
|
|
|
|
<!-- Canonical URL -->
|
|
<link rel="canonical" href="@articleUrl">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="article">
|
|
<meta property="og:url" content="@articleUrl">
|
|
<meta property="og:title" content="@Model.Metadata.Title">
|
|
<meta property="og:description" content="@Model.Metadata.Description">
|
|
<meta property="og:image" content="@baseUrl@Model.Metadata.Image">
|
|
<meta property="og:site_name" content="QR Rapido">
|
|
<meta property="article:published_time" content="@Model.Metadata.Date.ToString("yyyy-MM-ddTHH:mm:ssZ")">
|
|
<meta property="article:modified_time" content="@Model.Metadata.LastMod.ToString("yyyy-MM-ddTHH:mm:ssZ")">
|
|
<meta property="article:author" content="@Model.Metadata.Author">
|
|
|
|
<!-- Twitter -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:url" content="@articleUrl">
|
|
<meta name="twitter:title" content="@Model.Metadata.Title">
|
|
<meta name="twitter:description" content="@Model.Metadata.Description">
|
|
<meta name="twitter:image" content="@baseUrl@Model.Metadata.Image">
|
|
|
|
<!-- Schema.org Article Structured Data -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@@context": "https://schema.org",
|
|
"@@type": "Article",
|
|
"headline": "@Model.Metadata.Title",
|
|
"description": "@Model.Metadata.Description",
|
|
"image": "@baseUrl@Model.Metadata.Image",
|
|
"author": {
|
|
"@@type": "Person",
|
|
"name": "@Model.Metadata.Author"
|
|
},
|
|
"publisher": {
|
|
"@@type": "Organization",
|
|
"name": "QR Rapido",
|
|
"logo": {
|
|
"@@type": "ImageObject",
|
|
"url": "@baseUrl/images/logo.png"
|
|
}
|
|
},
|
|
"datePublished": "@Model.Metadata.Date.ToString("yyyy-MM-dd")",
|
|
"dateModified": "@Model.Metadata.LastMod.ToString("yyyy-MM-dd")",
|
|
"mainEntityOfPage": {
|
|
"@@type": "WebPage",
|
|
"@@id": "@articleUrl"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Breadcrumb Schema -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@@context": "https://schema.org",
|
|
"@@type": "BreadcrumbList",
|
|
"itemListElement": [
|
|
{
|
|
"@@type": "ListItem",
|
|
"position": 1,
|
|
"name": "Home",
|
|
"item": "@baseUrl"
|
|
},
|
|
{
|
|
"@@type": "ListItem",
|
|
"position": 2,
|
|
"name": "@T("Tutoriais", "Tutoriales", "Tutorials")",
|
|
"item": "@baseUrl/@ViewBag.Culture/tutoriais"
|
|
},
|
|
{
|
|
"@@type": "ListItem",
|
|
"position": 3,
|
|
"name": "@Model.Metadata.Title",
|
|
"item": "@articleUrl"
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="container mt-4 mb-5">
|
|
<!-- Breadcrumbs -->
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="/@ViewBag.Culture">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="/@ViewBag.Culture/tutoriais">@T("Tutoriais", "Tutoriales", "Tutorials")</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">@Model.Metadata.Title</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<div class="row">
|
|
<!-- Main Article Content -->
|
|
<article class="col-lg-8">
|
|
<!-- Article Header -->
|
|
<header class="mb-4">
|
|
<h1 class="display-4 mb-3">@Model.Metadata.Title</h1>
|
|
|
|
<div class="text-muted mb-3">
|
|
<span><i class="fas fa-user"></i> @Model.Metadata.Author</span> |
|
|
<span><i class="fas fa-calendar"></i> @Model.Metadata.Date.ToString("dd MMM yyyy")</span> |
|
|
<span><i class="fas fa-clock"></i> @Model.Metadata.ReadingTimeMinutes min @T("de leitura", "de lectura", "read")</span>
|
|
</div>
|
|
|
|
@if (!string.IsNullOrEmpty(Model.Metadata.Image))
|
|
{
|
|
<img src="@Model.Metadata.Image" alt="@Model.Metadata.Title" class="img-fluid rounded mb-4" />
|
|
}
|
|
|
|
<p class="lead">@Model.Metadata.Description</p>
|
|
</header>
|
|
|
|
<!-- Article Body -->
|
|
<div class="article-content">
|
|
@Html.Raw(Model.HtmlContent)
|
|
</div>
|
|
|
|
<!-- Article Footer -->
|
|
<footer class="mt-5 pt-4 border-top">
|
|
<p class="text-muted">
|
|
<small>
|
|
@T("Última atualização:", "Última actualización:", "Last updated:")
|
|
@Model.Metadata.LastMod.ToString("dd MMM yyyy HH:mm")
|
|
</small>
|
|
</p>
|
|
</footer>
|
|
|
|
<!-- Ad Slot (if ads enabled) -->
|
|
@if (ViewBag.ShowAds == true)
|
|
{
|
|
<div class="my-4">
|
|
<div class="alert alert-light text-center" role="alert">
|
|
<!-- Ad placement -->
|
|
<ins class="adsbygoogle"
|
|
style="display:block"
|
|
data-ad-client="@ViewBag.AdSenseClientId"
|
|
data-ad-slot="@ViewBag.ArticleAdSlot"
|
|
data-ad-format="auto"
|
|
data-full-width-responsive="true"></ins>
|
|
</div>
|
|
</div>
|
|
}
|
|
</article>
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="col-lg-4">
|
|
<!-- Related Articles -->
|
|
@if (Model.RelatedArticles.Any())
|
|
{
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-book"></i>
|
|
@T("Artigos Relacionados", "Artículos Relacionados", "Related Articles")
|
|
</h5>
|
|
</div>
|
|
<div class="list-group list-group-flush">
|
|
@foreach (var related in Model.RelatedArticles)
|
|
{
|
|
<a href="/@ViewBag.Culture/tutoriais/@related.Slug"
|
|
class="list-group-item list-group-item-action">
|
|
<h6 class="mb-1">@related.Title</h6>
|
|
<p class="mb-1 text-muted small">@related.Description</p>
|
|
</a>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!-- CTA Premium (if not premium) -->
|
|
@if (ViewBag.IsPremium != true)
|
|
{
|
|
<div class="card bg-primary text-white mb-4">
|
|
<div class="card-body">
|
|
<h5 class="card-title">
|
|
<i class="fas fa-crown"></i>
|
|
@T("Seja Premium!", "¡Hazte Premium!", "Go Premium!")
|
|
</h5>
|
|
<p class="card-text">
|
|
@T("QR codes ilimitados, sem anúncios e recursos avançados.",
|
|
"Códigos QR ilimitados, sin anuncios y características avanzadas.",
|
|
"Unlimited QR codes, no ads and advanced features.")
|
|
</p>
|
|
<a href="/@ViewBag.Culture/Pagamento/SelecaoPlano" class="btn btn-light btn-block">
|
|
@T("Conhecer Planos", "Conocer Planes", "View Plans")
|
|
</a>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!-- Quick Links -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-link"></i>
|
|
@T("Links Úteis", "Enlaces Útiles", "Useful Links")
|
|
</h5>
|
|
</div>
|
|
<div class="list-group list-group-flush">
|
|
<a href="/@ViewBag.Culture" class="list-group-item list-group-item-action">
|
|
<i class="fas fa-qrcode"></i>
|
|
@T("Gerar QR Code", "Generar Código QR", "Generate QR Code")
|
|
</a>
|
|
<a href="/@ViewBag.Culture/FAQ" class="list-group-item list-group-item-action">
|
|
<i class="fas fa-question-circle"></i>
|
|
@T("Perguntas Frequentes", "Preguntas Frecuentes", "FAQ")
|
|
</a>
|
|
<a href="/@ViewBag.Culture/Contact" class="list-group-item list-group-item-action">
|
|
<i class="fas fa-envelope"></i>
|
|
@T("Contato", "Contacto", "Contact")
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.article-content {
|
|
font-size: 1.1rem;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.article-content h2 {
|
|
margin-top: 2rem;
|
|
margin-bottom: 1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.article-content h3 {
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 0.75rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.article-content img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
margin: 1.5rem 0;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.article-content pre {
|
|
background: #f4f4f4;
|
|
padding: 1rem;
|
|
border-radius: 4px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.article-content code {
|
|
background: #f4f4f4;
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: 3px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.article-content blockquote {
|
|
border-left: 4px solid #007bff;
|
|
padding-left: 1rem;
|
|
margin-left: 0;
|
|
font-style: italic;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.breadcrumb {
|
|
background-color: transparent;
|
|
padding: 0.5rem 0;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|