225 lines
11 KiB
HTML
225 lines
11 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
{% load contact_tags %}
|
|
|
|
{% block title %}{{ article.title }}{% endblock %}
|
|
{% block meta_description %}{{ article.excerpt }}{% endblock %}
|
|
{% block meta_keywords %}{{ article.meta_keywords }}{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
<!-- RSS Feed -->
|
|
<link rel="alternate" type="application/rss+xml" title="Servala Articles RSS Feed" href="{% url 'services:article_rss' %}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<section class="section bg-primary-subtle">
|
|
<div class="container mx-auto px-20 px-lg-0 pt-40 pb-60">
|
|
<header class="section-primary__header text-center">
|
|
<h1 class="section-h1 fs-40 fs-lg-64 mb-24">{{ article.title }}</h1>
|
|
<div class="text-gray-300 w-lg-50 mx-auto">
|
|
<p class="mb-3">{{ article.excerpt }}</p>
|
|
<div class="d-flex justify-content-center align-items-center gap-3 text-sm">
|
|
<span>By {{ article.author.get_full_name|default:article.author.username }}</span>
|
|
<span>•</span>
|
|
<span>{{ article.article_date|date:"M d, Y" }}</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container-xl mx-auto px-3 px-lg-0 pt-60 pt-lg-80 pb-40">
|
|
<div class="row">
|
|
<div class="col-12 col-lg-8 mx-auto">
|
|
<article class="article-content">
|
|
{{ article.content|safe }}
|
|
</article>
|
|
|
|
<!-- Related Links -->
|
|
{% if article.related_service or article.related_consulting_partner or article.related_cloud_provider %}
|
|
<div class="mt-5 pt-4 border-top">
|
|
<h3>Related Links</h3>
|
|
<div class="row">
|
|
{% if article.related_service %}
|
|
<div class="col-12 col-md-4 mb-3">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Service</h5>
|
|
{% if article.related_service.get_logo %}
|
|
<div class="mb-3 d-flex" style="height: 60px;">
|
|
<img src="{{ article.related_service.get_logo.url }}" alt="{{ article.related_service.name }} logo"
|
|
class="img-fluid" style="max-height: 50px; object-fit: contain;">
|
|
</div>
|
|
{% endif %}
|
|
<p class="card-text">{{ article.related_service.name }}</p>
|
|
<a href="{{ article.related_service.get_absolute_url }}" class="btn btn-primary btn-sm">View Service</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if article.related_consulting_partner %}
|
|
<div class="col-12 col-md-4 mb-3">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Partner</h5>
|
|
{% if article.related_consulting_partner.get_logo %}
|
|
<div class="mb-3 d-flex" style="height: 60px;">
|
|
<img src="{{ article.related_consulting_partner.get_logo.url }}" alt="{{ article.related_consulting_partner.name }} logo"
|
|
class="img-fluid" style="max-height: 50px; object-fit: contain;">
|
|
</div>
|
|
{% endif %}
|
|
<p class="card-text">{{ article.related_consulting_partner.name }}</p>
|
|
<div class="mb-2">
|
|
<span class="badge bg-primary">{{ article.related_consulting_partner.get_category_display_badge }}</span>
|
|
</div>
|
|
<a href="{{ article.related_consulting_partner.get_absolute_url }}" class="btn btn-primary btn-sm">View Partner</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if article.related_cloud_provider %}
|
|
<div class="col-12 col-md-4 mb-3">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Provider</h5>
|
|
{% if article.related_cloud_provider.get_logo %}
|
|
<div class="mb-3 d-flex" style="height: 60px;">
|
|
<img src="{{ article.related_cloud_provider.get_logo.url }}" alt="{{ article.related_cloud_provider.name }} logo"
|
|
class="img-fluid" style="max-height: 50px; object-fit: contain;">
|
|
</div>
|
|
{% endif %}
|
|
<p class="card-text">{{ article.related_cloud_provider.name }}</p>
|
|
<a href="{{ article.related_cloud_provider.get_absolute_url }}" class="btn btn-primary btn-sm">View Provider</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Related Articles -->
|
|
{% if related_articles %}
|
|
<div class="mt-5 pt-4 border-top">
|
|
<h3>Related Articles</h3>
|
|
<div class="row">
|
|
{% for related_article in related_articles %}
|
|
<div class="col-12 col-md-4 mb-30">
|
|
<div class="card h-100 d-flex flex-column clickable-card" onclick="cardClicked(event, '{{ related_article.get_absolute_url }}')">
|
|
{% if related_article.get_image %}
|
|
<div class="d-flex justify-content-between mb-3">
|
|
<div class="card__image flex-shrink-0">
|
|
<img src="{{ related_article.get_image.url }}" alt="{{ related_article.title }}" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="card__content d-flex flex-column flex-grow-1">
|
|
<div class="card__header">
|
|
<h3 class="card__title">
|
|
{{ related_article.title }}
|
|
</h3>
|
|
<p class="card__subtitle">
|
|
<span class="text-muted">
|
|
By {{ related_article.author.get_full_name|default:related_article.author.username }}
|
|
</span>
|
|
<span class="text-muted ms-2">
|
|
{{ related_article.article_date|date:"M d, Y" }}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="card__desc flex-grow-1">
|
|
<p class="mb-0">{{ related_article.excerpt|truncatewords:15 }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Navigation -->
|
|
<div class="mt-5 pt-4 border-top">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<a href="{% url 'services:article_list' %}" class="btn btn-outline-primary">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Back to Articles
|
|
</a>
|
|
<div class="d-flex gap-2">
|
|
<button class="btn btn-outline btn-sm" onclick="shareArticle()" id="shareBtn">
|
|
<i class="bi bi-share"></i> Share
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section bg-primary-subtle">
|
|
<div class="section-wrapper container mx-auto px-20 px-lg-0 pt-80 pb-120">
|
|
<div class="row">
|
|
<div class="col-12 col-lg-4 mb-30 mb-lg-0">
|
|
<div class="section-logo mx-auto">
|
|
<img class="img-fluid" src="{% static "img/section-logo.png" %}" alt="Sir Vala mascot">
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-lg-8">
|
|
<header class="section-primary__header">
|
|
<h2 class="section-h1 fs-40 fs-lg-60">Questions about this article?</h2>
|
|
<div class="section-primary__desc">
|
|
<p>Have questions or need more information about the topics covered in this article? Get in touch with us!</p>
|
|
</div>
|
|
<div>
|
|
{% embedded_contact_form source="Article Inquiry" %}
|
|
</div>
|
|
</header>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
async function shareArticle() {
|
|
const shareBtn = document.getElementById('shareBtn');
|
|
const originalText = shareBtn.innerHTML;
|
|
|
|
try {
|
|
if (navigator.share) {
|
|
// Use native share API if available
|
|
await navigator.share({
|
|
title: '{{ article.title|escapejs }}',
|
|
text: '{{ article.excerpt|escapejs }}',
|
|
url: window.location.href
|
|
});
|
|
} else {
|
|
// Fallback: copy to clipboard
|
|
await navigator.clipboard.writeText(window.location.href);
|
|
|
|
// Show feedback
|
|
shareBtn.innerHTML = '<i class="bi bi-check"></i> Copied!';
|
|
shareBtn.classList.add('btn-success');
|
|
shareBtn.classList.remove('btn-outline');
|
|
|
|
// Reset after 2 seconds
|
|
setTimeout(() => {
|
|
shareBtn.innerHTML = originalText;
|
|
shareBtn.classList.remove('btn-success');
|
|
shareBtn.classList.add('btn-outline');
|
|
}, 2000);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error sharing:', error);
|
|
shareBtn.innerHTML = '<i class="bi bi-x"></i> Error';
|
|
setTimeout(() => {
|
|
shareBtn.innerHTML = originalText;
|
|
}, 2000);
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|