mirror of
https://github.com/nunocoracao/blowfish.git
synced 2025-02-02 03:22:33 -06:00
implemented card gallery for lists
This commit is contained in:
Nuno Coração
parent
d2dcbf8830
commit
f2d3ff1572
16 changed files with 430 additions and 107 deletions
|
|
@ -1413,14 +1413,18 @@ select {
|
|||
top: calc(100vh - 5.5rem);
|
||||
}
|
||||
|
||||
.top-20 {
|
||||
top: 5rem;
|
||||
}
|
||||
|
||||
.top-0 {
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.right-0 {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.top-20 {
|
||||
top: 5rem;
|
||||
}
|
||||
|
||||
.z-50 {
|
||||
z-index: 50;
|
||||
}
|
||||
|
|
@ -1441,6 +1445,10 @@ select {
|
|||
margin: auto;
|
||||
}
|
||||
|
||||
.m-2 {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.m-1 {
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
|
@ -1499,6 +1507,10 @@ select {
|
|||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.mb-5 {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.mt-10 {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
|
@ -1575,10 +1587,6 @@ select {
|
|||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.mb-5 {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.\!mb-9 {
|
||||
margin-bottom: 2.25rem !important;
|
||||
}
|
||||
|
|
@ -1671,6 +1679,10 @@ select {
|
|||
width: 3rem;
|
||||
}
|
||||
|
||||
.w-screen {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -1683,10 +1695,6 @@ select {
|
|||
width: 6rem;
|
||||
}
|
||||
|
||||
.w-screen {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.w-8 {
|
||||
width: 2rem;
|
||||
}
|
||||
|
|
@ -1699,6 +1707,10 @@ select {
|
|||
min-width: 0px;
|
||||
}
|
||||
|
||||
.min-w-full {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.min-w-\[1\.8rem\] {
|
||||
min-width: 1.8rem;
|
||||
}
|
||||
|
|
@ -1844,14 +1856,14 @@ select {
|
|||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.rounded-md {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.rounded-md {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
|
@ -1889,16 +1901,16 @@ select {
|
|||
border-style: dotted;
|
||||
}
|
||||
|
||||
.border-neutral-400 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(var(--color-neutral-400), var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-neutral-300 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(var(--color-neutral-300), var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-neutral-400 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(var(--color-neutral-400), var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-neutral-200 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(var(--color-neutral-200), var(--tw-border-opacity));
|
||||
|
|
@ -2055,6 +2067,11 @@ select {
|
|||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.py-4 {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.px-1 {
|
||||
padding-left: 0.25rem;
|
||||
padding-right: 0.25rem;
|
||||
|
|
@ -2095,6 +2112,14 @@ select {
|
|||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.pl-8 {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.pr-8 {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.pt-8 {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
|
@ -2103,6 +2128,14 @@ select {
|
|||
padding-top: 0.75rem;
|
||||
}
|
||||
|
||||
.pt-4 {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.pb-2 {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.pl-2 {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
|
@ -2111,10 +2144,6 @@ select {
|
|||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.pt-4 {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.pt-16 {
|
||||
padding-top: 4rem;
|
||||
}
|
||||
|
|
@ -2311,6 +2340,12 @@ select {
|
|||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
||||
.shadow-2xl {
|
||||
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
||||
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.shadow-lg {
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
|
|
@ -3015,6 +3050,13 @@ body:has(#menu-controller:checked) {
|
|||
background-position:center;
|
||||
}
|
||||
|
||||
.thumbnail_card {
|
||||
height: 300px;
|
||||
background-repeat:no-repeat;
|
||||
background-size:cover;
|
||||
background-position:center;
|
||||
}
|
||||
|
||||
.single_hero_basic {
|
||||
background-repeat:no-repeat;
|
||||
background-size:cover;
|
||||
|
|
@ -3771,4 +3813,10 @@ body:has(#menu-controller:checked) {
|
|||
.xl\:w-1\/4 {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
.\32xl\:w-1\/5 {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
|
@ -347,6 +347,13 @@ body:has(#menu-controller:checked) {
|
|||
background-position:center;
|
||||
}
|
||||
|
||||
.thumbnail_card {
|
||||
height: 300px;
|
||||
background-repeat:no-repeat;
|
||||
background-size:cover;
|
||||
background-position:center;
|
||||
}
|
||||
|
||||
.single_hero_basic {
|
||||
background-repeat:no-repeat;
|
||||
background-size:cover;
|
||||
|
|
|
|||
|
|
@ -29,6 +29,8 @@ enableCodeCopy = true
|
|||
showRecentItems = 5
|
||||
showMoreLink = false
|
||||
showMoreLinkDest = "/posts"
|
||||
cardView = false
|
||||
cardViewScreenWidth = false
|
||||
|
||||
[article]
|
||||
showDate = true
|
||||
|
|
@ -61,6 +63,8 @@ enableCodeCopy = true
|
|||
showTableOfContents = false
|
||||
showCards = false
|
||||
groupByYear = true
|
||||
cardView = false
|
||||
cardViewScreenWidth = false
|
||||
|
||||
[sitemap]
|
||||
excludedKinds = []
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
var layouts = [
|
||||
"profile",
|
||||
"background",
|
||||
"hero",
|
||||
"profile",
|
||||
"card",
|
||||
"page"
|
||||
"page",
|
||||
"card"
|
||||
]
|
||||
|
||||
var currentLayout = 0
|
||||
|
|
@ -33,3 +33,48 @@ window.addEventListener("DOMContentLoaded", (event) => {
|
|||
})
|
||||
);
|
||||
});
|
||||
|
||||
var list_config = [
|
||||
"CardViewProse",
|
||||
"CardViewScreenWidth",
|
||||
"NormalView"
|
||||
]
|
||||
|
||||
var titles = {
|
||||
"CardViewProse" : "card view with constrained width",
|
||||
"CardViewScreenWidth" : "card view with full width",
|
||||
"NormalView" : "standard list view"
|
||||
}
|
||||
|
||||
var currentConfig = 0
|
||||
|
||||
function switchList() {
|
||||
|
||||
var old = currentConfig
|
||||
currentConfig = currentConfig == list_config.length - 1 ? 0 : currentConfig + 1
|
||||
|
||||
var oldDiv = document.getElementById(list_config[old])
|
||||
var currentDiv = document.getElementById(list_config[currentConfig])
|
||||
const configCode = document.querySelectorAll("code[id=config]");
|
||||
|
||||
console.log(currentConfig)
|
||||
console.log(oldDiv)
|
||||
console.log(currentDiv)
|
||||
|
||||
currentDiv.style.display = "block";
|
||||
oldDiv.style.display = "none";
|
||||
|
||||
configCode.forEach(function (el) {
|
||||
el.innerText = titles[list_config[currentConfig]];
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", (event) => {
|
||||
document.querySelectorAll("#switch-config-button").forEach((button) =>
|
||||
button.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
switchList();
|
||||
})
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -25,10 +25,13 @@ mainSections = ["docs"]
|
|||
[homepage]
|
||||
layout = "custom" # valid options: page, profile, hero, card, background, custom
|
||||
homepageImage = "/img/iceland.jpg" # used in: hero, and card
|
||||
showRecent = true
|
||||
showRecentItems = 5
|
||||
showRecent = false
|
||||
showRecentItems = 10
|
||||
showMoreLink = true
|
||||
showMoreLinkDest = "docs"
|
||||
cardView = true
|
||||
cardViewScreenWidth = false
|
||||
|
||||
|
||||
[article]
|
||||
showDate = false
|
||||
|
|
@ -57,10 +60,12 @@ mainSections = ["docs"]
|
|||
|
||||
[list]
|
||||
showBreadcrumbs = false
|
||||
showSummary = true
|
||||
showSummary = false
|
||||
showTableOfContents = true
|
||||
showCards = true
|
||||
groupByYear = false
|
||||
cardView = true
|
||||
cardViewScreenWidth = false
|
||||
|
||||
[sitemap]
|
||||
excludedKinds = ["taxonomy","term"]
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||
<plist version="1.0">
|
||||
<dict>
|
||||
<key>defaultPathExtensions</key>
|
||||
<string>md</string>
|
||||
<key>enforceFencedCodeBlocks</key>
|
||||
<false/>
|
||||
<key>sheetFormat</key>
|
||||
<string>foreign</string>
|
||||
<key>useInlineLinks</key>
|
||||
<false/>
|
||||
</dict>
|
||||
</plist>
|
||||
|
|
@ -10,7 +10,7 @@ This is a demo site built entirely using Blowfish. It also contains a complete s
|
|||
{{< icon "triangle-exclamation" >}}
|
||||
</span>
|
||||
<span class="flex items-center justify-between grow dark:text-neutral-300">
|
||||
<span class="prose dark:prose-invert">This is a demo of the <code id="layout">background</code> layout.</span>
|
||||
<span class="prose dark:prose-invert">This is a demo of the <code id="layout">profile</code> layout.</span>
|
||||
<button
|
||||
id="switch-layout-button"
|
||||
class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
|
||||
|
|
|
|||
|
|
@ -145,6 +145,8 @@ Many of the article defaults here can be overridden on a per article basis by sp
|
|||
|`homepage.showRecentItems`|5|How many articles to display if showRecent is true. If variable is set to 0 or if it isn't defined the system will default to 5 articles.|
|
||||
|`homepage.showMoreLink`|'false'|Wether or not to display a show more link at the end of your posts that takes the user to a predefined place.|
|
||||
|`homepage.showMoreLinkDest`|'/posts'|The destination of the show more button.|
|
||||
|`homepage.cardView`|`false`|Display recent articles as a gallery of cards.|
|
||||
|`homepage.cardViewScreenWidth`|`false`|Enhance the width of the recent articles card gallery to take the full width available.|
|
||||
|`article.showDate`|`true`|Whether or not article dates are displayed.|
|
||||
|`article.showViews`|`false`|Whether or not article views are displayed. This requires firebase integrations to be enabled, look below.|
|
||||
|`article.showLikes`|`false`|Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below.|
|
||||
|
|
@ -173,6 +175,8 @@ Many of the article defaults here can be overridden on a per article basis by sp
|
|||
|`list.showSummary`|`false`|Whether or not article summaries are displayed on list pages. If a summary is not provided in the [front matter]({{< ref "front-matter" >}}), one will be auto generated using the `summaryLength` parameter in the [site configuration](#site-configuration).|
|
||||
|`list.showCards`|`false`|Whether or not each article is displayed as a card or as simple inline text.|
|
||||
|`list.groupByYear`|`true`|Whether or not articles are grouped by year on list pages.|
|
||||
|`list.cardView`|`false`|Display lists as a gallery of cards.|
|
||||
|`list.cardViewScreenWidth`|`false`|Enhance the width of card galleries in lists to take the full width available.|
|
||||
|`sitemap.excludedKinds`|`["taxonomy", "term"]`|Kinds of content that should be excluded from the generated `/sitemap.xml` file. Refer to the [Hugo docs](https://gohugo.io/templates/section-templates/#page-kinds) for acceptable values.|
|
||||
|`taxonomy.showTermCount`|`true`|Whether or not the number of articles within a taxonomy term is displayed on the taxonomy listing.|
|
||||
|`firebase.apiKey`|_Not set_|Firebase apiKey, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish|
|
||||
|
|
|
|||
|
|
@ -82,4 +82,8 @@ The articles listed in this section are derived from the `mainSections` setting
|
|||
|
||||
Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article strucutre, you just need to place an image file (almost all formats are supported bue we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then able to both use the image as a thumbnail within your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms.
|
||||
|
||||
[Here]({{< ref "thumbnails" >}}) is a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see an example.
|
||||
[Here]({{< ref "thumbnails" >}}) is a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see an example.
|
||||
|
||||
## Card Gallery
|
||||
|
||||
Blowfish also supports displaying the standard lists of articles as card galleries. You can config this both for the recent section in the homepage and for lists of articles across your website. For homepage you can use `homepage.cardView` and `homepage.cardViewScreenWidth`; and for lists use `list.cardView` and `list.cardViewScreenWidth`. Check the [Configuration docs]({{< ref "configuration" >}}) for more details, and the homepage for a live demo.
|
||||
|
|
@ -4,7 +4,7 @@ description: "See what's possible with Blowfish."
|
|||
|
||||
cascade:
|
||||
showEdit: false
|
||||
showSummary: true
|
||||
showSummary: false
|
||||
---
|
||||
|
||||
{{< lead >}}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,20 @@
|
|||
{{ $jsHome := resources.Get "js/home.js" | resources.Minify | resources.Fingerprint "sha512" }}
|
||||
<div id="background" class="">
|
||||
<div id="background" style="display:none">
|
||||
{{ partial "partials/home/background.html" . }}
|
||||
</div>
|
||||
<div id="hero" class="hidden h-full">
|
||||
<div id="hero" style="display:none">
|
||||
{{ partial "partials/home/hero.html" . }}
|
||||
</div>
|
||||
<div id="profile" class="hidden h-full">
|
||||
<div id="profile" class="">
|
||||
{{ partial "partials/home/profile.html" . }}
|
||||
</div>
|
||||
<div id="card" class="hidden h-full">
|
||||
<div id="card" style="display:none">
|
||||
{{ partial "partials/home/card.html" . }}
|
||||
</div>
|
||||
<div id="page" class="hidden h-full">
|
||||
<div id="page" style="display:none">
|
||||
{{ partial "partials/home/page.html" . }}
|
||||
</div>
|
||||
<section>
|
||||
{{ partial "recent-articles-demo.html" . }}
|
||||
</section>
|
||||
<script defer type="text/javascript" src="{{ $jsHome.RelPermalink }}" integrity="{{ $jsHome.Data.Integrity }}"></script>
|
||||
|
|
|
|||
64
exampleSite/layouts/partials/recent-articles-demo.html
Normal file
64
exampleSite/layouts/partials/recent-articles-demo.html
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
{{ $recentArticles := 5 }}
|
||||
{{ $showMoreLinkDest := "/posts" }}
|
||||
{{ if index .Site.Params.homepage "showRecentItems" }}
|
||||
{{ $recentArticles = .Site.Params.homepage.showRecentItems }}
|
||||
{{ end }}
|
||||
|
||||
<h2 class="mt-8 text-2xl font-extrabold mb-10">{{ i18n "shortcode.recent_articles" | emojify }}</h2>
|
||||
|
||||
<div class="flex mb-6 px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
|
||||
<span class="flex items-center justify-between grow dark:text-neutral-300">
|
||||
<span class="prose dark:prose-invert">This is a demo of theme's list configurations: <code id="config">card view with constrained width</code></span>
|
||||
<button id="switch-config-button"
|
||||
class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700">
|
||||
Switch config ↻
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="CardViewProse" class="">
|
||||
<section class="w-full">
|
||||
<div class="flex flex-wrap">
|
||||
{{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
|
||||
.Site.Params.mainSections)).Pages }}
|
||||
<div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3">
|
||||
{{ partial "article-link-card.html" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div id="CardViewScreenWidth" class="hidden h-full">
|
||||
<section class="relative w-screen" style="left: calc(-50vw + 50%);">
|
||||
<div class="flex flex-wrap pl-8 pr-8">
|
||||
{{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
|
||||
.Site.Params.mainSections)).Pages }}
|
||||
<div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3 xl:w-1/4 2xl:w-1/5">
|
||||
{{ partial "article-link-card.html" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div id="NormalView" class="hidden h-full">
|
||||
<section class="space-y-10 w-full">
|
||||
{{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
|
||||
.Site.Params.mainSections)).Pages
|
||||
}}
|
||||
{{ partial "article-link.html" . }}
|
||||
{{ end }}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{{ if .Site.Params.homepage.showMoreLink | default false }}
|
||||
{{ if index .Site.Params.homepage "showRecentItems" }}
|
||||
{{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }}
|
||||
{{ end }}
|
||||
<div class="mt-10 flex justify-center">
|
||||
<a href="{{ $showMoreLinkDest }}">
|
||||
<button
|
||||
class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold hover:text-white py-2 px-4 border border-primary-500 hover:border-transparent rounded">Show
|
||||
More</button>
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -1,49 +1,111 @@
|
|||
{{ define "main" }}
|
||||
{{ $toc := and (.Params.showTableOfContents | default (.Site.Params.list.showTableOfContents | default false)) (in .TableOfContents "<ul") }}
|
||||
<header>
|
||||
{{ if .Params.showBreadcrumbs | default (.Site.Params.list.showBreadcrumbs | default false) }}
|
||||
{{ partial "breadcrumbs.html" . }}
|
||||
{{ end }}
|
||||
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
|
||||
{{ $toc := and (.Params.showTableOfContents | default (.Site.Params.list.showTableOfContents | default false)) (in
|
||||
.TableOfContents "<ul") }} <header>
|
||||
{{ if .Params.showBreadcrumbs | default (.Site.Params.list.showBreadcrumbs | default false) }}
|
||||
{{ partial "breadcrumbs.html" . }}
|
||||
{{ end }}
|
||||
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
|
||||
</header>
|
||||
<section
|
||||
class="{{ if $toc -}}
|
||||
<section class="{{ if $toc -}}
|
||||
mt-12
|
||||
{{- else -}}
|
||||
mt-0
|
||||
{{- end }} prose flex max-w-full flex-col dark:prose-invert lg:flex-row"
|
||||
>
|
||||
{{- end }} prose flex max-w-full flex-col dark:prose-invert lg:flex-row">
|
||||
{{ if $toc }}
|
||||
<div class="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8">
|
||||
<div class="toc ltr:pl-5 rtl:pr-5 lg:sticky lg:top-10">
|
||||
{{ partial "toc.html" . }}
|
||||
</div>
|
||||
<div class="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8">
|
||||
<div class="toc ltr:pl-5 rtl:pr-5 lg:sticky lg:top-10">
|
||||
{{ partial "toc.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="min-w-0 min-h-0 max-w-prose">
|
||||
{{ .Content | emojify }}
|
||||
</div>
|
||||
</section>
|
||||
{{ if gt .Pages 0 }}
|
||||
<section class="space-y-10 w-full">
|
||||
{{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
|
||||
{{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
|
||||
<h2 class="mt-12 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
|
||||
|
||||
{{ if .Site.Params.list.cardView | default false }}
|
||||
|
||||
{{ $cardViewScreenWidth := .Site.Params.list.cardViewScreenWidth}}
|
||||
|
||||
{{ if not $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
|
||||
|
||||
{{ if $cardViewScreenWidth }}
|
||||
<section class="relative w-screen" style="left: calc(-50vw + 50%);">
|
||||
<div class="flex flex-wrap pl-8 pr-8">
|
||||
{{ else }}
|
||||
<section class="w-full">
|
||||
<div class="flex flex-wrap">
|
||||
{{ end }}
|
||||
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
||||
{{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
|
||||
{{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
|
||||
<h2 class="mt-12 mb-5 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
|
||||
{{ .Key }}
|
||||
</h2>
|
||||
<hr class="border-dotted w-36 border-neutral-400" />
|
||||
{{ end }}
|
||||
{{ range .Pages }}
|
||||
{{ partial "article-link.html" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ partial "pagination.html" . }}
|
||||
{{ else }}
|
||||
<section class="mt-10 prose dark:prose-invert">
|
||||
<p class="py-8 border-t">
|
||||
<em>{{ i18n "list.no_articles" | emojify }}</em>
|
||||
</p>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
{{ end }}
|
||||
|
||||
{{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
|
||||
|
||||
{{ if $cardViewScreenWidth}}
|
||||
<section class="relative w-screen" style="left: calc(-50vw + 50%);">
|
||||
<div class="flex flex-wrap pl-8 pr-8">
|
||||
{{ else }}
|
||||
<section class="w-full">
|
||||
<div class="flex flex-wrap">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ range .Pages }}
|
||||
|
||||
{{ if $cardViewScreenWidth }}
|
||||
<div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3 xl:w-1/4 2xl:w-1/5">
|
||||
{{ else }}
|
||||
<div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3">
|
||||
{{ end }}
|
||||
|
||||
{{ partial "article-link-card.html" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
|
||||
{{ end }}
|
||||
|
||||
{{ if not $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
{{ else }}
|
||||
<section class="space-y-10 w-full">
|
||||
{{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
|
||||
{{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
|
||||
<h2 class="mt-12 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
|
||||
{{ .Key }}
|
||||
</h2>
|
||||
{{ end }}
|
||||
{{ range .Pages }}
|
||||
{{ partial "article-link.html" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ partial "pagination.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ else }}
|
||||
<section class="mt-10 prose dark:prose-invert">
|
||||
<p class="py-8 border-t">
|
||||
<em>{{ i18n "list.no_articles" | emojify }}</em>
|
||||
</p>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
64
layouts/partials/article-link-card.html
Normal file
64
layouts/partials/article-link-card.html
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
{{ with .Params.externalUrl }}
|
||||
<a href="{{ . }}" target="_blank" rel="external" class="min-w-full">
|
||||
{{ else }}
|
||||
<a href="{{ .RelPermalink }}" class="min-w-full">
|
||||
{{ end }}
|
||||
<div class="border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative">
|
||||
|
||||
{{- with $.Params.images -}}
|
||||
{{- range first 6 . }}
|
||||
<meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
|
||||
{{- else -}}
|
||||
{{- $images := $.Resources.ByType "image" -}}
|
||||
{{- $featured := $images.GetMatch "*feature*" -}}
|
||||
{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
|
||||
{{- with $featured -}}
|
||||
{{ with .Resize "600x" }}
|
||||
<div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
|
||||
{{ end }}
|
||||
{{- else -}}
|
||||
{{- with $.Site.Params.images }}
|
||||
<meta property="og:image" content="{{ index . 0 | absURL }}" />{{ end -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
|
||||
{{ if and .Draft .Site.Params.article.showDraftLabel }}
|
||||
<span class="absolute top-0 right-0 m-2">
|
||||
{{ partial "badge.html" (i18n "article.draft" | emojify) }}
|
||||
</span>
|
||||
{{ end }}
|
||||
|
||||
<div class="px-6 py-4">
|
||||
|
||||
{{ with .Params.externalUrl }}
|
||||
<div>
|
||||
<div
|
||||
class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
|
||||
{{ $.Title | emojify }}
|
||||
<span class="text-xs align-top cursor-default text-neutral-400 dark:text-neutral-500">
|
||||
<span class="rtl:hidden">↗</span>
|
||||
<span class="ltr:hidden">↖</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{{ else }}
|
||||
<div class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
|
||||
href="{{ .RelPermalink }}">{{ .Title | emojify }}</div>
|
||||
{{ end }}
|
||||
|
||||
<div class="text-sm text-neutral-500 dark:text-neutral-400">
|
||||
{{ partial "article-meta.html" . }}
|
||||
</div>
|
||||
|
||||
{{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
|
||||
<div class="py-1 prose dark:prose-invert">
|
||||
{{ .Summary | emojify }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="px-6 pt-4 pb-2">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
{{ with .Params.externalUrl }}
|
||||
<div>
|
||||
<div
|
||||
class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
|
||||
class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
|
||||
{{ $.Title | emojify }}
|
||||
<span class="text-xs align-top cursor-default text-neutral-400 dark:text-neutral-500">
|
||||
<span class="rtl:hidden">↗</span>
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
</div>
|
||||
</div>
|
||||
{{ else }}
|
||||
<div class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
|
||||
<div class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
|
||||
href="{{ .RelPermalink }}">{{ .Title | emojify }}</div>
|
||||
{{ end }}
|
||||
{{ if and .Draft .Site.Params.article.showDraftLabel }}
|
||||
|
|
|
|||
|
|
@ -5,21 +5,48 @@
|
|||
{{ $recentArticles = .Site.Params.homepage.showRecentItems }}
|
||||
{{ end }}
|
||||
<h2 class="mt-8 text-2xl font-extrabold mb-10">{{ i18n "shortcode.recent_articles" | emojify }}</h2>
|
||||
<section class="space-y-10 w-full">
|
||||
{{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)).Pages }}
|
||||
{{ partial "article-link.html" . }}
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ if .Site.Params.homepage.showMoreLink | default false }}
|
||||
{{ if index .Site.Params.homepage "showRecentItems" }}
|
||||
{{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }}
|
||||
{{ end }}
|
||||
<div class="mt-10 flex justify-center">
|
||||
<a href="{{ $showMoreLinkDest }}">
|
||||
<button
|
||||
class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold hover:text-white py-2 px-4 border border-primary-500 hover:border-transparent rounded">Show
|
||||
More</button>
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.homepage.cardView | default false }}
|
||||
{{ if .Site.Params.homepage.cardViewScreenWidth | default false }}
|
||||
<section class="relative w-screen" style="left: calc(-50vw + 50%);">
|
||||
<div class="flex flex-wrap pl-8 pr-8">
|
||||
{{ else }}
|
||||
<section class="w-full">
|
||||
<div class="flex flex-wrap">
|
||||
{{ end }}
|
||||
|
||||
{{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
|
||||
.Site.Params.mainSections)).Pages }}
|
||||
|
||||
{{ if .Site.Params.homepage.cardViewScreenWidth | default false }}
|
||||
<div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3 xl:w-1/4 2xl:w-1/5">
|
||||
{{ else }}
|
||||
<div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3">
|
||||
{{ end }}
|
||||
|
||||
{{ partial "article-link-card.html" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{ else }}
|
||||
<section class="space-y-10 w-full">
|
||||
{{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)).Pages
|
||||
}}
|
||||
{{ partial "article-link.html" . }}
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ if .Site.Params.homepage.showMoreLink | default false }}
|
||||
{{ if index .Site.Params.homepage "showRecentItems" }}
|
||||
{{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }}
|
||||
{{ end }}
|
||||
<div class="mt-10 flex justify-center">
|
||||
<a href="{{ $showMoreLinkDest }}">
|
||||
<button
|
||||
class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold hover:text-white py-2 px-4 border border-primary-500 hover:border-transparent rounded">Show
|
||||
More</button>
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
Loading…
Reference in a new issue