working on front-page
This commit is contained in:
kbe
@@ -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