working on front-page
This commit is contained in:
kbe
@@ -1,131 +1,131 @@
|
||||
{{ define "main" }}
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1">
|
||||
<h1 class="fw-normal">{{ .Title }}</h1>
|
||||
<ul class="list-inline-dash">
|
||||
{{ if .Params.author }}
|
||||
<li>Par <a href="/author/{{ .Params.author | anchorize }}">{{ .Params.author }}</a></li>
|
||||
<div class="gradient-bg py-12 md:py-16 lg:py-24">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<div class="flex justify-center space-x-2 mb-6">
|
||||
{{ with .Params.categories }}
|
||||
{{ range first 2 . }}
|
||||
<span class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">{{ . }}</span>
|
||||
{{ end }}
|
||||
{{ with .Params.categories }}
|
||||
{{ range . }}
|
||||
<li>dans <a href="/{{ . | anchorize }}">{{ . }}</a></li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<li> le {{ .Date.Format "02/01/2006" }}</li>
|
||||
</ul>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">{{ .Title }}</h1>
|
||||
<p class="text-xl text-gray-700 mb-8">{{ .Summary }}</p>
|
||||
<div class="flex items-center justify-center space-x-4 text-gray-600">
|
||||
<div class="flex items-center">
|
||||
{{ if .Params.author_image }}
|
||||
<img src="{{ .Params.author_image }}" alt="Author" class="rounded-full mr-2 w-10 h-10">
|
||||
{{ else }}
|
||||
<img src="https://i.pravatar.cc/40?img=5" alt="Author" class="rounded-full mr-2 w-10 h-10">
|
||||
{{ end }}
|
||||
<span>{{ .Params.author | default "Author Name" }}</span>
|
||||
</div>
|
||||
<span>•</span>
|
||||
<span>{{ .Date.Format "October 16, 2024" }}</span>
|
||||
<span>•</span>
|
||||
<span>{{ .ReadingTime }} min read</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Featured Image -->
|
||||
{{ if .Params.featured_image }}
|
||||
<div class="container">
|
||||
<div class="p-2 text-center">
|
||||
<img src="{{ .Params.featured_image }}" alt="{{ .Title }}" class="mx-auto d-block">
|
||||
<!-- Article Content -->
|
||||
<article class="py-12 md:py-16">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-3xl mx-auto prose">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end container -->
|
||||
{{ end }}
|
||||
<!-- end Featured Image -->
|
||||
</article>
|
||||
|
||||
<!-- Post Content -->
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1">
|
||||
<div class="post-content">
|
||||
{{ .Content }}
|
||||
<!-- Tags Section -->
|
||||
<div class="py-8 border-t border-gray-200">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">Topics:</h3>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
{{ with .Params.tags }}
|
||||
{{ range . }}
|
||||
<a href="#" class="tag bg-blue-100 text-blue-800 hover:bg-blue-200 px-4 py-2 rounded-full font-medium">{{ . }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Author Bio -->
|
||||
<div class="py-12 bg-gray-50">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="flex items-start space-x-6">
|
||||
{{ if .Params.author_image }}
|
||||
<img src="{{ .Params.author_image }}" alt="Author" class="rounded-full w-20 h-20">
|
||||
{{ else }}
|
||||
<img src="https://i.pravatar.cc/100?img=5" alt="Author" class="rounded-full w-20 h-20">
|
||||
{{ end }}
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold text-gray-900">{{ .Params.author | default "Author Name" }}</h3>
|
||||
<p class="text-blue-600 font-medium mb-4">Technology Writer & Future of Work Researcher</p>
|
||||
<p class="text-gray-700">{{ .Params.author_bio | default "Author bio goes here." }}</p>
|
||||
<div class="flex space-x-4 mt-4">
|
||||
<a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-twitter"></i></a>
|
||||
<a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-linkedin"></i></a>
|
||||
<a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-medium"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Post Content -->
|
||||
|
||||
{{/*
|
||||
<!-- Tags and Share -->
|
||||
<div class="section-xs border-top">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
{{ if .Params.tags }}
|
||||
<div class="col-6">
|
||||
<h6 class="font-small fw-medium uppercase">Tags</h6>
|
||||
<ul class="list-inline-sm">
|
||||
{{ range .Params.tags }}
|
||||
<li><a href="/tags/{{ . | anchorize }}">{{ . }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
<!-- Related Articles -->
|
||||
<div class="py-12">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-8 text-center">Related Articles</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{{ range first 3 (where .Site.RegularPages "Type" "post") }}
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow">
|
||||
{{ if .Params.featured_image }}
|
||||
<img src="{{ .Params.featured_image }}" alt="Article" class="w-full h-48 object-cover">
|
||||
{{ else }}
|
||||
<img src="https://images.unsplash.com/photo-1581091226033-d5c48150dbaa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Article" class="w-full h-48 object-cover">
|
||||
{{ end }}
|
||||
<div class="p-6">
|
||||
<span class="text-sm font-medium text-blue-600">
|
||||
{{ with .Params.categories }}
|
||||
{{ range first 1 . }}
|
||||
{{ . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</span>
|
||||
<h3 class="text-xl font-semibold mt-2 mb-3">
|
||||
<a href="{{ .Permalink }}">{{ .Title }}</a>
|
||||
</h3>
|
||||
<p class="text-gray-600">{{ .Summary | truncate 100 }}</p>
|
||||
<div class="flex items-center mt-4 text-sm text-gray-500">
|
||||
<span>{{ .Date.Format "Jan 2, 2006" }}</span>
|
||||
<span class="mx-2">•</span>
|
||||
<span>{{ .ReadingTime }} min read</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="col-6 text-end">
|
||||
<h6 class="font-small fw-medium uppercase">Share On</h6>
|
||||
<ul class="list-inline">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-google"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
*/}}
|
||||
|
||||
<!-- Comments section -->
|
||||
{{ if .Site.Params.comments.enable }}
|
||||
<div class="section bg-gray-lighter">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1">
|
||||
<h4 class="fw-normal mb-5">Comments</h4>
|
||||
|
||||
{{ if .Site.Params.comments.disqus }}
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
var disqus_config = function () {
|
||||
this.page.url = "{{ .Permalink }}";
|
||||
this.page.identifier = "{{ .RelPermalink }}";
|
||||
};
|
||||
(function() {
|
||||
var d = document, s = d.createElement('script');
|
||||
s.src = 'https://{{ .Site.Params.comments.disqus }}.disqus.com/embed.js';
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
{{ else }}
|
||||
<p>Comments are disabled.</p>
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
<!-- Newsletter -->
|
||||
<div class="py-12 bg-blue-50">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-4">Join the Newsletter</h2>
|
||||
<p class="text-gray-700 mb-6">Stay updated with the latest insights on technology and the future of work.</p>
|
||||
<form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
|
||||
<input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium">Subscribe</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<!-- Write Comment section -->
|
||||
{{ if .Site.Params.comments.enable }}
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1">
|
||||
<h4 class="fw-normal mb-5">Write a Comment</h4>
|
||||
<form id="comment-form">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-sm-6">
|
||||
<input type="text" name="name" placeholder="Name" required>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<input type="email" name="email" placeholder="E-Mail" required>
|
||||
</div>
|
||||
</div>
|
||||
<textarea name="message" placeholder="Message"></textarea>
|
||||
<button class="button button-lg button-outline-gray" type="submit">Post Comment</button>
|
||||
</form>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
Reference in New Issue
Block a user