♻️ refactor article links, cards, and recent articles partials

This commit is contained in:
Nuno Coração 2022-12-31 15:58:20 +00:00
parent 963310a713
commit 6bccf5c7d9
25 changed files with 119 additions and 119 deletions

View file

@ -1224,6 +1224,10 @@ select {
top: calc(100vh - 5.5rem);
}
.top-20 {
top: 5rem;
}
.top-0 {
top: 0px;
}
@ -1232,10 +1236,6 @@ select {
right: 0px;
}
.top-20 {
top: 5rem;
}
.z-10 {
z-index: 10;
}
@ -1252,14 +1252,14 @@ select {
margin: auto;
}
.m-2 {
margin: 0.5rem;
}
.m-1 {
margin: 0.25rem;
}
.m-2 {
margin: 0.5rem;
}
.m-0 {
margin: 0px;
}
@ -1346,14 +1346,6 @@ select {
margin-bottom: 1.25rem;
}
.mt-3 {
margin-top: 0.75rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.mr-3 {
margin-right: 0.75rem;
}
@ -1382,10 +1374,6 @@ select {
margin-bottom: 0.25rem;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.-mb-1 {
margin-bottom: -0.25rem;
}
@ -1394,10 +1382,18 @@ select {
margin-left: 0.5rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.\!mb-9 {
margin-bottom: 2.25rem !important;
}
@ -1406,6 +1402,10 @@ select {
margin-top: 5rem;
}
.mt-3 {
margin-top: 0.75rem;
}
.-mr-2 {
margin-right: -0.5rem;
}
@ -1462,10 +1462,6 @@ select {
height: 3rem;
}
.h-full {
height: 100%;
}
.h-24 {
height: 6rem;
}
@ -1474,6 +1470,10 @@ select {
height: 2rem;
}
.h-full {
height: 100%;
}
.h-\[120px\] {
height: 120px;
}
@ -1550,10 +1550,6 @@ select {
min-width: 0px;
}
.min-w-full {
min-width: 100%;
}
.min-w-\[1\.8rem\] {
min-width: 1.8rem;
}
@ -1562,6 +1558,10 @@ select {
min-width: 220px;
}
.min-w-full {
min-width: 100%;
}
.max-w-7xl {
max-width: 80rem;
}
@ -1707,14 +1707,14 @@ select {
border-radius: 9999px;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-lg {
border-radius: 0.5rem;
}
@ -1757,16 +1757,16 @@ select {
border-color: rgba(var(--color-neutral-300), var(--tw-border-opacity));
}
.border-neutral-200 {
--tw-border-opacity: 1;
border-color: rgba(var(--color-neutral-200), var(--tw-border-opacity));
}
.border-primary-400 {
--tw-border-opacity: 1;
border-color: rgba(var(--color-primary-400), var(--tw-border-opacity));
}
.border-neutral-200 {
--tw-border-opacity: 1;
border-color: rgba(var(--color-neutral-200), var(--tw-border-opacity));
}
.border-primary-500 {
--tw-border-opacity: 1;
border-color: rgba(var(--color-primary-500), var(--tw-border-opacity));
@ -1786,14 +1786,14 @@ select {
background-color: rgba(var(--color-neutral), 0.5);
}
.bg-transparent {
background-color: transparent;
}
.bg-neutral-500\/50 {
background-color: rgba(var(--color-neutral-500), 0.5);
}
.bg-transparent {
background-color: transparent;
}
.bg-neutral-100 {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-neutral-100), var(--tw-bg-opacity));
@ -1915,16 +1915,6 @@ select {
padding-bottom: 2rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
@ -1940,6 +1930,11 @@ select {
padding-bottom: 2.5rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
@ -1960,6 +1955,11 @@ select {
padding-bottom: 1.5rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
@ -1973,6 +1973,10 @@ select {
padding-top: 0.75rem;
}
.pb-4 {
padding-bottom: 1rem;
}
.pt-4 {
padding-top: 1rem;
}
@ -1985,10 +1989,6 @@ select {
padding-left: 0.5rem;
}
.pb-4 {
padding-bottom: 1rem;
}
.pl-\[24px\] {
padding-left: 24px;
}
@ -2134,16 +2134,16 @@ select {
color: rgba(var(--color-neutral-800), var(--tw-text-opacity));
}
.text-primary-500 {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-500), var(--tw-text-opacity));
}
.text-primary-700 {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-700), var(--tw-text-opacity));
}
.text-primary-500 {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-500), var(--tw-text-opacity));
}
.text-primary-400 {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-400), var(--tw-text-opacity));
@ -2178,14 +2178,14 @@ select {
text-decoration-line: none !important;
}
.decoration-primary-500 {
text-decoration-color: rgba(var(--color-primary-500), 1);
}
.decoration-neutral-300 {
text-decoration-color: rgba(var(--color-neutral-300), 1);
}
.decoration-primary-500 {
text-decoration-color: rgba(var(--color-primary-500), 1);
}
.opacity-0 {
opacity: 0;
}
@ -2206,18 +2206,18 @@ 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);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.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-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@ -3122,10 +3122,6 @@ body:has(#menu-controller:checked) {
left: -1.5rem;
}
[dir="ltr"] .ltr\:ml-2 {
margin-left: 0.5rem;
}
[dir="ltr"] .ltr\:mr-4 {
margin-right: 1rem;
}
@ -3134,6 +3130,10 @@ body:has(#menu-controller:checked) {
margin-left: -1.25rem;
}
[dir="ltr"] .ltr\:ml-2 {
margin-left: 0.5rem;
}
[dir="ltr"] .ltr\:mr-14 {
margin-right: 3.5rem;
}
@ -3178,10 +3178,6 @@ body:has(#menu-controller:checked) {
right: -1.5rem;
}
[dir="rtl"] .rtl\:mr-2 {
margin-right: 0.5rem;
}
[dir="rtl"] .rtl\:ml-4 {
margin-left: 1rem;
}
@ -3190,6 +3186,10 @@ body:has(#menu-controller:checked) {
margin-right: -1.25rem;
}
[dir="rtl"] .rtl\:mr-2 {
margin-right: 0.5rem;
}
[dir="rtl"] .rtl\:ml-14 {
margin-left: 3.5rem;
}
@ -3239,16 +3239,16 @@ body:has(#menu-controller:checked) {
border-color: rgba(var(--color-neutral-600), var(--tw-border-opacity));
}
.dark .dark\:border-neutral-700 {
--tw-border-opacity: 1;
border-color: rgba(var(--color-neutral-700), var(--tw-border-opacity));
}
.dark .dark\:border-primary-600 {
--tw-border-opacity: 1;
border-color: rgba(var(--color-primary-600), var(--tw-border-opacity));
}
.dark .dark\:border-neutral-700 {
--tw-border-opacity: 1;
border-color: rgba(var(--color-neutral-700), var(--tw-border-opacity));
}
.dark .dark\:bg-neutral-800 {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-neutral-800), var(--tw-bg-opacity));

View file

@ -35,7 +35,7 @@ As long as you follow this simple practice, you will always be able to update th
Hugo has various builtin methods to resize, crop and optimize images.
As an example - in `layouts/partials/article-link-card.html`, you have the following code:
As an example - in `layouts/partials/article-link/card.html`, you have the following code:
```go
{{ with .Fill "600x600" }}
@ -170,7 +170,7 @@ In order to take advantage of the default configuration, your project should loo
│ └── _index.md
├── layouts # custom layouts for your site
│ ├── partials
│ │ └── extend-article-link.html
│ │ └── extend-article-link/simple.html
│ ├── projects
│ │ └── list.html
│ └── shortcodes

View file

@ -66,7 +66,7 @@ To enable the Custom layout, set `homepage.layout = "custom"` in the `params.tom
With the configuration value set, create a new `custom.html` file and place it in `layouts/partials/home/custom.html`. Now whatever is in the `custom.html` file will be placed in the content area of the site homepage. You may use whatever HTML, Tailwind, or Hugo templating functions you wish to define your layout.
To include [recent articles](#recent-articles) on the custom layout, use the `recent-articles.html` partial.
To include [recent articles](#recent-articles) on the custom layout, use the `recent-articles/main.html` partial.
As an example, the [homepage]({{< ref "/" >}}) on this site uses the custom layout to allow toggling between the profile and page layouts. Visit the [GitHub repo](https://github.com/nunocoracao/blowfish/blob/main/exampleSite/layouts/partials/home/custom.html) to see how it works.

View file

@ -18,15 +18,15 @@
</div>
<div id="CardViewScreenWidth" class="">
{{ partial "recent-articles-cardview-fullwidth.html" . }}
{{ partial "recent-articles/cardview-fullwidth.html" . }}
</div>
<div id="CardViewProse" class="hidden h-full">
{{ partial "recent-articles-cardview.html" . }}
{{ partial "recent-articles/cardview.html" . }}
</div>
<div id="NormalView" class="hidden h-full">
{{ partial "recent-articles-list.html" . }}
{{ partial "recent-articles/list.html" . }}
</div>
{{ if .Site.Params.homepage.showMoreLink | default false }}

View file

@ -17,7 +17,7 @@
{{ end }}
<h1 class="mt-5 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
<div class="mt-1 mb-2 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
{{ partial "article-meta-list.html" (dict "context" . "scope" "single") }}
{{ partial "article-meta/list.html" (dict "context" . "scope" "single") }}
</div>
</header>
<section class="{{ if $toc -}}
@ -59,7 +59,7 @@
</h2>
{{ end }}
{{ range .Pages }}
{{ partial "article-link.html" . }}
{{ partial "article-link/simple.html" . }}
{{ end }}
{{ end }}
</section>
@ -74,7 +74,7 @@
</h2>
<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
{{ range .Pages }}
{{ partial "article-link-card.html" . }}
{{ partial "article-link/card.html" . }}
{{ end }}
</section>
{{ end }}
@ -84,7 +84,7 @@
<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
{{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
{{ range .Pages }}
{{ partial "article-link-card.html" . }}
{{ partial "article-link/card.html" . }}
{{ end }}
{{ end }}
</section>
@ -102,7 +102,7 @@
</h2>
<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
{{ range .Pages }}
{{ partial "article-link-card.html" . }}
{{ partial "article-link/card.html" . }}
{{ end }}
</section>
</div>
@ -114,7 +114,7 @@
<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
{{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
{{ range .Pages }}
{{ partial "article-link-card.html" . }}
{{ partial "article-link/card.html" . }}
{{ end }}
{{ end }}
</section>

View file

@ -19,7 +19,7 @@
{{ .Title | emojify }}
</h1>
<div class="mt-1 mb-6 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
{{ partial "article-meta.html" (dict "context" . "scope" "single") }}
{{ partial "article-meta/basic.html" (dict "context" . "scope" "single") }}
</div>
</header>
<section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">

View file

@ -19,7 +19,7 @@
{{ end }}
<h1 class="mt-5 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
<div class="mt-1 mb-2 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
{{ partial "article-meta-taxonomy.html" (dict "context" . "scope" "single") }}
{{ partial "article-meta/taxonomy.html" (dict "context" . "scope" "single") }}
</div>
</header>
{{ if .Content }}

View file

@ -17,7 +17,7 @@
{{ end }}
<h1 class="mt-5 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
<div class="mt-1 mb-2 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
{{ partial "article-meta-term.html" (dict "context" . "scope" "single") }}
{{ partial "article-meta/term.html" (dict "context" . "scope" "single") }}
</div>
</header>
@ -53,7 +53,7 @@
</h2>
{{ end }}
{{ range .Pages }}
{{ partial "article-link.html" . }}
{{ partial "article-link/simple.html" . }}
{{ end }}
{{ end }}
</section>
@ -68,7 +68,7 @@
</h2>
<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
{{ range .Pages }}
{{ partial "article-link-card.html" . }}
{{ partial "article-link/card.html" . }}
{{ end }}
</section>
{{ end }}
@ -78,7 +78,7 @@
<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
{{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
{{ range .Pages }}
{{ partial "article-link-card.html" . }}
{{ partial "article-link/card.html" . }}
{{ end }}
{{ end }}
</section>
@ -96,7 +96,7 @@
</h2>
<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
{{ range .Pages }}
{{ partial "article-link-card.html" . }}
{{ partial "article-link/card.html" . }}
{{ end }}
</section>
</div>
@ -108,7 +108,7 @@
<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
{{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
{{ range .Pages }}
{{ partial "article-link-card.html" . }}
{{ partial "article-link/card.html" . }}
{{ end }}
{{ end }}
</section>

View file

@ -48,7 +48,7 @@
{{ end }}
<div class="text-sm text-neutral-500 dark:text-neutral-400">
{{ partial "article-meta.html" . }}
{{ partial "article-meta/basic.html" . }}
</div>
{{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}

View file

@ -69,7 +69,7 @@
{{ end }}
</div>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
{{ partial "article-meta.html" . }}
{{ partial "article-meta/basic.html" . }}
</div>
{{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
<div class="py-1 prose dark:prose-invert">

View file

@ -54,7 +54,7 @@
</div>
</article>
<section>
{{ partial "recent-articles.html" . }}
{{ partial "recent-articles/main.html" . }}
</section>
{{ if .Site.Params.homepage.layoutBackgroundBlur | default false }}
<div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div>

View file

@ -27,5 +27,5 @@
</div>
</div>
<section>
{{ partial "recent-articles.html" . }}
{{ partial "recent-articles/main.html" . }}
</section>

View file

@ -51,5 +51,5 @@
</div>
</article>
<section>
{{ partial "recent-articles.html" . }}
{{ partial "recent-articles/main.html" . }}
</section>

View file

@ -7,5 +7,5 @@
<section>{{ .Content | emojify }}</section>
</article>
<section>
{{ partial "recent-articles.html" . }}
{{ partial "recent-articles/main.html" . }}
</section>

View file

@ -32,5 +32,5 @@
<section class="prose dark:prose-invert">{{ .Content | emojify }}</section>
</article>
<section>
{{ partial "recent-articles.html" . }}
{{ partial "recent-articles/main.html" . }}
</section>

View file

@ -6,7 +6,7 @@
class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
{{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
.Site.Params.mainSections)).Pages }}
{{ partial "article-link-card.html" . }}
{{ partial "article-link/card.html" . }}
{{ end }}
</section>
</div>

View file

@ -4,6 +4,6 @@
<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
{{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
.Site.Params.mainSections)).Pages }}
{{ partial "article-link-card.html" . }}
{{ partial "article-link/card.html" . }}
{{ end }}
</section>

View file

@ -4,6 +4,6 @@
<section class="space-y-10 w-full">
{{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)).Pages
}}
{{ partial "article-link.html" . }}
{{ partial "article-link/simple.html" . }}
{{ end }}
</section>

View file

@ -7,11 +7,11 @@
<h2 class="mt-8 text-2xl font-extrabold mb-10">{{ i18n "shortcode.recent_articles" | emojify }}</h2>
{{ if and .Site.Params.homepage.cardView (not .Site.Params.homepage.cardViewScreenWidth) | default false }}
{{ partial "recent-articles-cardview.html" . }}
{{ partial "recent-articles/cardview.html" . }}
{{ else if and .Site.Params.homepage.cardView .Site.Params.homepage.cardViewScreenWidth | default false }}
{{ partial "recent-articles-cardview-fullwidth.html" . }}
{{ partial "recent-articles/cardview-fullwidth.html" . }}
{{ else }}
{{ partial "recent-articles-list.html" . }}
{{ partial "recent-articles/list.html" . }}
{{ end }}
{{ if .Site.Params.homepage.showMoreLink | default false }}

View file

@ -3,7 +3,7 @@
{{ $RelPermalink := .Get "link" }}
{{ range ( where .Site.RegularPages "RelPermalink" $RelPermalink | first 1 ) }}
{{ if not (eq .RelPermalink $parent) }}
{{ partial "article-link.html" . }}
{{ partial "article-link/simple.html" . }}
{{ end }}
{{end}}
</section>

View file

@ -8,13 +8,13 @@
{{ if $where }}
{{ range ( where .Site.RegularPages $where $value | first 1 ) }}
{{ if not (eq .RelPermalink $parent) }}
{{ partial "article-link.html" . }}
{{ partial "article-link/simple.html" . }}
{{ end }}
{{end}}
{{ else }}
{{ range .Site.RegularPages | first $limit }}
{{ if not (eq .RelPermalink $parent) }}
{{ partial "article-link.html" . }}
{{ partial "article-link/simple.html" . }}
{{ end }}
{{end}}
{{ end }}