working on front-page
This commit is contained in:
kbe
@@ -31,10 +31,6 @@
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
|
||||
<!-- Custom Styles -->
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-white text-gray-800 antialiased">
|
||||
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
@@ -6,44 +6,18 @@
|
||||
<section class="gradient-bg py-12 md:py-16 lg:py-20">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">
|
||||
{{ .Site.Title }}
|
||||
</h1>
|
||||
<p class="text-xl text-gray-700 mb-8">
|
||||
{{ .Site.Params.description | default "Exploring technology's impact on work and life" }}
|
||||
</p>
|
||||
|
||||
<!-- Tags -->
|
||||
<div class="flex flex-wrap justify-center gap-3 mb-10">
|
||||
{{ $categories := .Site.Taxonomies.categories }}
|
||||
{{ if $categories }}
|
||||
{{ $categoryList := slice }}
|
||||
{{ range $name, $taxonomy := $categories }}
|
||||
{{ range $taxonomy }}
|
||||
{{ $categoryList = $categoryList | append . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ range first 5 $categoryList }}
|
||||
<span class="tag bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">
|
||||
{{ .Page.Title }}
|
||||
</span>
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
<span class="tag bg-gray-100 text-gray-600 text-sm font-medium px-3 py-1 rounded-full">
|
||||
General
|
||||
</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<!-- Newsletter Signup -->
|
||||
<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="btn-primary px-6 py-3 rounded-lg font-medium">
|
||||
Get Updates
|
||||
</button>
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">Exploring Technology's Impact on Work & Life</h1>
|
||||
<p class="text-xl text-gray-700 mb-8">Insights, analysis and trends about how technology is shaping our future</p>
|
||||
<div class="flex flex-wrap justify-center gap-3 mb-10">
|
||||
<span class="tag bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">AI</span>
|
||||
<span class="tag bg-green-100 text-green-800 text-sm font-medium px-3 py-1 rounded-full">Remote Work</span>
|
||||
<span class="tag bg-purple-100 text-purple-800 text-sm font-medium px-3 py-1 rounded-full">Productivity</span>
|
||||
<span class="tag bg-yellow-100 text-yellow-800 text-sm font-medium px-3 py-1 rounded-full">Innovation</span>
|
||||
<span class="tag bg-red-100 text-red-800 text-sm font-medium px-3 py-1 rounded-full">Web3</span>
|
||||
</div>
|
||||
<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">Get Updates</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -55,36 +29,53 @@
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Featured Articles</h2>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
|
||||
{{ range first 2 (where .Site.RegularPages "Params.featured" true) }}
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-lg article-card">
|
||||
<div class="featured-article">
|
||||
{{ if .Params.featured_image }}
|
||||
<img src="{{ .Params.featured_image }}" alt="{{ .Title }}" class="w-full h-64 object-cover">
|
||||
{{ else }}
|
||||
<img src="https://images.unsplash.com/photo-1677442135135-416f8aa26a5b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="{{ .Title }}" class="w-full h-64 object-cover">
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
{{ range first 2 (default (slice) .Params.categories) }}
|
||||
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">{{ . }}</span>
|
||||
{{ end }}
|
||||
<!-- Featured Article 1 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-lg article-card">
|
||||
<div class="featured-article">
|
||||
<img src="https://images.unsplash.com/photo-1677442135135-416f8aa26a5b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="AI Technology" class="w-full h-64 object-cover">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">
|
||||
<a href="{{ .Permalink }}" class="hover:text-blue-600">{{ .Title }}</a>
|
||||
</h3>
|
||||
<p class="text-gray-600 mb-4">{{ .Summary | truncate 150 }}</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center text-sm text-gray-500">
|
||||
<span>{{ .Params.author | default "Tech Team" }}</span>
|
||||
<span class="mx-2">•</span>
|
||||
<span>{{ .Date.Format "Jan 2, 2006" }}</span>
|
||||
<div class="p-6">
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">AI</span>
|
||||
<span class="bg-green-100 text-green-800 text-xs font-medium px-2 py-1 rounded">Future of Work</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">How Tech Shapes the Future of Work in 2024</h3>
|
||||
<p class="text-gray-600 mb-4">Exploring the latest technological advancements and their impact on the modern workplace, from AI to remote collaboration tools.</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center text-sm text-gray-500">
|
||||
<img src="https://i.pravatar.cc/24?img=5" alt="Author" class="rounded-full mr-2">
|
||||
<span>Sarah Johnson</span>
|
||||
<span class="mx-2">•</span>
|
||||
<span>Oct 16, 2024</span>
|
||||
</div>
|
||||
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Read more →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Featured Article 2 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-lg article-card">
|
||||
<div class="featured-article">
|
||||
<img src="https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="AI Ethics" class="w-full h-64 object-cover">
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
<span class="bg-purple-100 text-purple-800 text-xs font-medium px-2 py-1 rounded">AI</span>
|
||||
<span class="bg-red-100 text-red-800 text-xs font-medium px-2 py-1 rounded">Ethics</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">The Ethics of Artificial Intelligence in Hiring</h3>
|
||||
<p class="text-gray-600 mb-4">Exploring the benefits and potential pitfalls of using AI to recruit and evaluate candidates in the modern workplace.</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center text-sm text-gray-500">
|
||||
<img src="https://i.pravatar.cc/24?img=8" alt="Author" class="rounded-full mr-2">
|
||||
<span>Michael Chen</span>
|
||||
<span class="mx-2">•</span>
|
||||
<span>Sep 3, 2024</span>
|
||||
</div>
|
||||
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Read more →</a>
|
||||
</div>
|
||||
<a href="{{ .Permalink }}" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Read more →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
@@ -102,58 +93,55 @@
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Latest Articles</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
|
||||
{{ range first 6 .Paginator.Pages }}
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-md article-card">
|
||||
{{ if .Params.featured_image }}
|
||||
<img src="{{ .Params.featured_image }}" alt="{{ .Title }}" class="w-full h-48 object-cover">
|
||||
{{ else }}
|
||||
<img src="https://images.unsplash.com/photo-1581091226033-d5c48150dbaa?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="{{ .Title }}" class="w-full h-48 object-cover">
|
||||
{{ end }}
|
||||
<div class="p-6">
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
{{ range first 1 (default (slice) .Params.categories) }}
|
||||
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">{{ . }}</span>
|
||||
{{ end }}
|
||||
<!-- Article 1 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-md article-card">
|
||||
<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="Productivity" class="w-full h-48 object-cover">
|
||||
<div class="p-6">
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">Productivity</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-3">10 Tools to Boost Your Productivity in 2024</h3>
|
||||
<p class="text-gray-600 text-sm mb-4">Discover the latest apps and software that can help you work smarter, not harder.</p>
|
||||
<div class="flex items-center justify-between text-sm text-gray-500">
|
||||
<span>May 12, 2024</span>
|
||||
<span>5 min read</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-3">
|
||||
<a href="{{ .Permalink }}" class="hover:text-blue-600">{{ .Title }}</a>
|
||||
</h3>
|
||||
<p class="text-gray-600 text-sm mb-4">{{ .Summary | truncate 100 }}</p>
|
||||
<div class="flex items-center justify-between text-sm text-gray-500">
|
||||
<span>{{ .Date.Format "Jan 2, 2006" }}</span>
|
||||
<span>{{ .ReadingTime }} min read</span>
|
||||
</div>
|
||||
|
||||
<!-- Article 2 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-md article-card">
|
||||
<img src="https://images.unsplash.com/photo-1533750349088-cd871a92f312?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Remote Work" class="w-full h-48 object-cover">
|
||||
<div class="p-6">
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<span class="bg-green-100 text-green-800 text-xs font-medium px-2 py-1 rounded">Remote Work</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-3">Building Company Culture in a Remote World</h3>
|
||||
<p class="text-gray-600 text-sm mb-4">How forward-thinking companies are maintaining strong cultures with distributed teams.</p>
|
||||
<div class="flex items-center justify-between text-sm text-gray-500">
|
||||
<span>July 24, 2024</span>
|
||||
<span>7 min read</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Article 3 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-md article-card">
|
||||
<img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Web3" class="w-full h-48 object-cover">
|
||||
<div class="p-6">
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<span class="bg-purple-100 text-purple-800 text-xs font-medium px-2 py-1 rounded">Web3</span>
|
||||
<span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2 py-1 rounded">Blockchain</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-3">Understanding Web3: The Next Evolution of the Internet</h3>
|
||||
<p class="text-gray-600 text-sm mb-4">What businesses need to know about the decentralized web and its potential impact.</p>
|
||||
<div class="flex items-center justify-between text-sm text-gray-500">
|
||||
<span>Aug 5, 2024</span>
|
||||
<span>9 min read</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
{{ if gt .Paginator.TotalPages 1 }}
|
||||
<div class="text-center">
|
||||
<nav class="flex justify-center items-center space-x-2">
|
||||
{{ if .Paginator.HasPrev }}
|
||||
<a href="{{ .Paginator.Prev.URL }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
|
||||
Previous
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
{{ range .Paginator.Pagers }}
|
||||
{{ if eq . $.Paginator }}
|
||||
<span class="px-4 py-2 bg-blue-600 text-white rounded-lg">{{ .PageNumber }}</span>
|
||||
{{ else }}
|
||||
<a href="{{ .URL }}" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300">{{ .PageNumber }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ if .Paginator.HasNext }}
|
||||
<a href="{{ .Paginator.Next.URL }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
|
||||
Next
|
||||
</a>
|
||||
{{ end }}
|
||||
</nav>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -163,34 +151,54 @@
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Explore Topics</h2>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-12">
|
||||
{{ $categories := .Site.Taxonomies.categories }}
|
||||
{{ if $categories }}
|
||||
{{ $categoryList := slice }}
|
||||
{{ range $name, $taxonomy := $categories }}
|
||||
{{ range $taxonomy }}
|
||||
{{ $categoryList = $categoryList | append . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ range $categoryList }}
|
||||
<a href="/{{ .Page.Slug }}" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
|
||||
<a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-3">
|
||||
<i class="fas fa-tag text-blue-600 text-xl"></i>
|
||||
<i class="fas fa-robot text-blue-600 text-xl"></i>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-900">{{ .Page.Title }}</span>
|
||||
<span class="text-sm font-medium text-gray-900">AI</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
|
||||
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-3">
|
||||
<i class="fas fa-laptop-house text-green-600 text-xl"></i>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-900">Remote Work</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
|
||||
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-3">
|
||||
<i class="fas fa-tachometer-alt text-purple-600 text-xl"></i>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-900">Productivity</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
|
||||
<div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-3">
|
||||
<i class="fas fa-lightbulb text-yellow-600 text-xl"></i>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-900">Innovation</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
|
||||
<div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-3">
|
||||
<i class="fas fa-code text-red-600 text-xl"></i>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-900">Development</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
|
||||
<div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-3">
|
||||
<i class="fas fa-link text-indigo-600 text-xl"></i>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-900">Web3</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
|
||||
Browse all topics
|
||||
<i class="fas fa-arrow-right ml-2"></i>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
<div class="col-span-full text-center py-8">
|
||||
<p class="text-gray-500">No categories available yet.</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<a href="/topics" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
|
||||
Browse all topics
|
||||
<i class="fas fa-arrow-right ml-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -206,7 +214,7 @@
|
||||
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="btn-primary px-6 py-3 rounded-lg font-medium">
|
||||
class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium">
|
||||
Subscribe
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@@ -1,77 +1,65 @@
|
||||
<!-- Modern Breadcrumb Navigation -->
|
||||
<nav class="breadcrumb-nav" aria-label="breadcrumb">
|
||||
<div class="breadcrumb-container">
|
||||
<ol class="breadcrumb-list" itemscope itemtype="https://schema.org/BreadcrumbList">
|
||||
<!-- Breadcrumb Navigation -->
|
||||
<nav class="breadcrumb border-b border-slate-200 py-2 px-3 md:py-4 md:px-6 lg:px-8" aria-label="Breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
|
||||
<ol class="flex flex-wrap items-center space-x-1 md:space-x-2 text-xs sm:text-sm md:text-base leading-relaxed">
|
||||
|
||||
<!-- Home -->
|
||||
<li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
|
||||
<a href="{{ "/" | relLangURL }}" itemprop="item" title="Home" class="text-slate-600 hover:text-blue-600 transition-colors flex items-center">
|
||||
<i class="fas fa-home text-[10px] sm:text-xs md:text-sm mr-1"></i>
|
||||
<span itemprop="name" class="hidden sm:inline">Home</span>
|
||||
</a>
|
||||
<meta itemprop="position" content="1" />
|
||||
</li>
|
||||
|
||||
<!-- Category -->
|
||||
{{ if or .Params.categories .Section }}
|
||||
{{ $category := "" }}
|
||||
{{ $categorySlug := "" }}
|
||||
{{ $categoryUrl := "" }}
|
||||
|
||||
<!-- Home -->
|
||||
<li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
|
||||
<a href="{{ "/" | relLangURL }}" itemprop="item" title="{{ i18n "home" | default "Home" }}">
|
||||
<i class="fas fa-home" aria-hidden="true"></i>
|
||||
<span itemprop="name">{{ i18n "home" | default "Accueil" }}</span>
|
||||
</a>
|
||||
<meta itemprop="position" content="1" />
|
||||
</li>
|
||||
|
||||
<!-- Category -->
|
||||
{{ if or .Params.categories .Section }}
|
||||
{{ $category := "" }}
|
||||
{{ $categorySlug := "" }}
|
||||
{{ $categoryUrl := "" }}
|
||||
|
||||
{{ if .Params.categories }}
|
||||
{{ $category = index .Params.categories 0 }}
|
||||
{{ $categorySlug = anchorize $category }}
|
||||
{{ $categoryUrl = printf "/categories/%s" $categorySlug }}
|
||||
{{ else if .Section }}
|
||||
{{ $category = humanize .Section }}
|
||||
{{ $categorySlug = .Section }}
|
||||
{{ $categoryUrl = printf "/%s" .Section }}
|
||||
{{ end }}
|
||||
|
||||
{{ if $category }}
|
||||
<li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
|
||||
<a href="{{ $categoryUrl | relLangURL }}" itemprop="item" title="{{ $category }}">
|
||||
<span itemprop="name">{{ $category }}</span>
|
||||
</a>
|
||||
<meta itemprop="position" content="2" />
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ if .Params.categories }}
|
||||
{{ $category = index .Params.categories 0 }}
|
||||
{{ $categorySlug = anchorize $category }}
|
||||
{{ $categoryUrl = printf "/categories/%s" $categorySlug }}
|
||||
{{ else if .Section }}
|
||||
{{ $category = humanize .Section }}
|
||||
{{ $categorySlug = .Section }}
|
||||
{{ $categoryUrl = printf "/%s" .Section }}
|
||||
{{ end }}
|
||||
|
||||
<!-- Current Page -->
|
||||
<li class="breadcrumb-item active" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" aria-current="page">
|
||||
<span itemprop="name">{{ .Title }}</span>
|
||||
{{ if $category }}
|
||||
<li class="breadcrumb-divider text-slate-400 px-0.5">/</li>
|
||||
<li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
|
||||
<a href="{{ $categoryUrl | relLangURL }}" itemprop="item" title="{{ $category }}" class="text-slate-600 hover:text-blue-600 transition-colors line-clamp-1 max-w-[120px] sm:max-w-none">
|
||||
<span itemprop="name">{{ $category }}</span>
|
||||
</a>
|
||||
<meta itemprop="position" content="2" />
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- Current Page -->
|
||||
{{ if .Title }}
|
||||
<li class="breadcrumb-divider text-slate-400 px-0.5">/</li>
|
||||
<li class="breadcrumb-item active" aria-current="page" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
|
||||
<span itemprop="name" class="text-blue-600 font-medium line-clamp-1 max-w-[100px] sm:max-w-[200px] md:max-w-none">{{ .Title }}</span>
|
||||
<meta itemprop="position" content="{{ if or .Params.categories .Section }}3{{ else }}2{{ end }}" />
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<!-- JSON-LD Structured Data -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [
|
||||
{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"name": "{{ i18n "home" | default "Home" }}",
|
||||
"item": "{{ "/" | absLangURL }}"
|
||||
}{{ if or .Params.categories .Section }},
|
||||
{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"name": "{{ if .Params.categories }}{{ index .Params.categories 0 }}{{ else }}{{ humanize .Section }}{{ end }}",
|
||||
"item": "{{ if .Params.categories }}{{ printf "%s/categories/%s" (absLangURL "") (anchorize (index .Params.categories 0)) }}{{ else }}{{ printf "%s/%s" (absLangURL "") .Section }}{{ end }}"
|
||||
}{{ end }},
|
||||
{
|
||||
"@type": "ListItem",
|
||||
"position": {{ if or .Params.categories .Section }}3{{ else }}2{{ end }},
|
||||
"name": "{{ .Title }}",
|
||||
"item": "{{ .Permalink }}"
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<!-- Fallback for pages without title -->
|
||||
{{ if not .Title }}
|
||||
<nav class="breadcrumb border-t border-b border-slate-200 py-2 px-3 md:py-4 md:px-6 lg:px-8 my-2 md:my-4" aria-label="Breadcrumb">
|
||||
<ol class="flex flex-wrap items-center space-x-1 md:space-x-2 text-xs sm:text-sm md:text-base leading-relaxed">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="{{ "/" | relLangURL }}" class="text-slate-600 hover:text-blue-600 transition-colors flex items-center">
|
||||
<i class="fas fa-home text-[10px] sm:text-xs md:text-sm mr-1"></i>
|
||||
<span>Home</span>
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
{{ end }}
|
||||
|
||||
@@ -1,69 +1,40 @@
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">{{ .Site.Title }}</h3>
|
||||
<footer class="bg-gray-900 text-white py-12">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-4">TechInsights</h3>
|
||||
<p class="text-gray-400">Exploring the future of work and technology through thoughtful analysis and commentary.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-4">Explore</h4>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
|
||||
<li><a href="#" class="text-gray-400 hover:text-white">Articles</a></li>
|
||||
<li><a href="#" class="text-gray-400 hover:text-white">Topics</a></li>
|
||||
<li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-4">Topics</h4>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="#" class="text-gray-400 hover:text-white">AI</a></li>
|
||||
<li><a href="#" class="text-gray-400 hover:text-white">Remote Work</a></li>
|
||||
<li><a href="#" class="text-gray-400 hover:text-white">Productivity</a></li>
|
||||
<li><a href="#" class="text-gray-400 hover:text-white">Web3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-4">Connect</h4>
|
||||
<div class="flex space-x-4">
|
||||
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter text-xl"></i></a>
|
||||
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin text-xl"></i></a>
|
||||
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram text-xl"></i></a>
|
||||
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github text-xl"></i></a>
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Pages</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="/">Accueil</a></li>
|
||||
{{ if .Site.Data.wordpress }}
|
||||
{{ range $index, $element := .Site.Data.wordpress.navigation }}
|
||||
<li>
|
||||
<a href="/pages/{{ $element.slug }}">{{ $element.title }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Toutes les catégories</h6>
|
||||
<ul class="list-unstyled">
|
||||
{{ if .Site.Data.wordpress }}
|
||||
{{ range $index, $element := .Site.Data.wordpress.categories }}
|
||||
{{ if and (ne $element.name "Featured") (gt $element.count 0) }}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/{{ $element.slug }}">{{ $element.name }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{{/*
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
*/}}
|
||||
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© {{ now.Format "2006" }} {{ .Site.Title }}, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="https://www.facebook.com/mistergeekfrance"><i class="bi bi-facebook"></i></a></li>
|
||||
<!-- <li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li> -->
|
||||
<!-- <li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li> -->
|
||||
<!-- <li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
|
||||
<p>© {{ now.Format "2006" }} TechInsights. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -4,40 +4,36 @@
|
||||
<div class="flex justify-between items-center h-16">
|
||||
<!-- Logo -->
|
||||
<div class="flex items-center">
|
||||
<a href="/" class="text-2xl font-bold text-gray-900">
|
||||
{{ .Site.Title }}
|
||||
</a>
|
||||
<a href="/" class="text-xl uppercase font-bold text-gray-900 transition hover:text-gray-400">{{ .Site.Title }}</a>
|
||||
</div>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<nav class="hidden md:flex items-center space-x-8">
|
||||
<a href="/" class="text-gray-600 hover:text-blue-600 font-medium transition-colors">Accueil</a>
|
||||
<a href="/articles" class="text-gray-600 hover:text-blue-600 font-medium transition-colors">Articles</a>
|
||||
{{ if .Site.Data.wordpress }}
|
||||
{{ $count := 0 }}
|
||||
{{ range $index, $element := .Site.Data.wordpress.categories }}
|
||||
{{ if or (eq $element.name "Featured") (eq $element.name "Non classé") }}
|
||||
{{ continue }}
|
||||
{{ else if lt $count 5 }}
|
||||
<a href="/{{ $element.slug }}" class="text-gray-600 hover:text-blue-600 font-medium transition-colors">{{ $element.name }}</a>
|
||||
{{ $count = add $count 1 }}
|
||||
{{ else }}
|
||||
{{ break }}
|
||||
<nav class="hidden md:flex">
|
||||
<ul class="flex items-center h-full gap-8 m-0 p-0 list-none">
|
||||
{{ if .Site.Data.wordpress }}
|
||||
{{ $count := 0 }}
|
||||
{{ range $index, $element := .Site.Data.wordpress.categories }}
|
||||
{{ if or (eq $element.name "Featured") (eq $element.name "Non classé") }}
|
||||
{{ continue }}
|
||||
{{ else if lt $count 5 }}
|
||||
<li>
|
||||
<a href="/{{ $element.slug }}" class="px-4 py-2 rounded transition ease-in-out hover:bg-gray-100 text-gray-600 hover:text-blue-600 font-medium">{{ $element.name }}</a>
|
||||
</li>
|
||||
{{ $count = add $count 1 }}
|
||||
{{ else }}
|
||||
{{ break }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</nav>
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<button @click="mobileMenuOpen = !mobileMenuOpen"
|
||||
class="md:hidden text-gray-600 focus:outline-none">
|
||||
<svg x-show="!mobileMenuOpen" class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
<svg x-show="mobileMenuOpen" class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="flex items-center space-x-4">
|
||||
<button class="md:hidden text-gray-600" id="mobile-menu-toggle" aria-label="Toggle mobile menu" @click="mobileMenuOpen = !mobileMenuOpen">
|
||||
<i class="fas text-xl transition-transform duration-300 ease-in-out"
|
||||
:class="mobileMenuOpen ? 'fa-times' : 'fa-bars'"></i>
|
||||
</button>
|
||||
<button class="hidden md:block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium">
|
||||
Subscribe
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -53,23 +49,23 @@
|
||||
x-transition:leave-end="opacity-0 transform -translate-y-2"
|
||||
class="md:hidden absolute top-full left-0 right-0 bg-white border-b border-gray-200 shadow-lg">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div class="flex flex-col space-y-4">
|
||||
<a href="/" class="text-gray-600 hover:text-blue-600 font-medium py-2">Accueil</a>
|
||||
<a href="/articles" class="text-gray-600 hover:text-blue-600 font-medium py-2">Articles</a>
|
||||
<ul class="flex flex-col space-y-4 m-0 p-0 list-none">
|
||||
{{ if .Site.Data.wordpress }}
|
||||
{{ $count := 0 }}
|
||||
{{ range $index, $element := .Site.Data.wordpress.categories }}
|
||||
{{ if or (eq $element.name "Featured") (eq $element.name "Non classé") }}
|
||||
{{ continue }}
|
||||
{{ else if lt $count 5 }}
|
||||
<a href="/{{ $element.slug }}" class="text-gray-600 hover:text-blue-600 font-medium py-2">{{ $element.name }}</a>
|
||||
<li>
|
||||
<a href="/{{ $element.slug }}" class="px-4 py-2 rounded transition ease-in-out hover:bg-gray-100 text-gray-600 hover:text-blue-600 font-medium">{{ $element.name }}</a>
|
||||
</li>
|
||||
{{ $count = add $count 1 }}
|
||||
{{ else }}
|
||||
{{ break }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
Reference in New Issue
Block a user