Add cards widget

README.md

@@ -85,7 +85,7 @@ hugo server
 Your website is running :smile:, you can start editing content files.
 
 ### Multilingual
-Pico currently ships with support for 5 languages (fr, en, it, es, de). Contributions for other language translations are welcome.
+Pico currently ships with support for 6 languages (fr, en, it, es, de, nl). Contributions for other language translations are welcome.
 To create a new language translation, add the .toml file to the i18n/ folder. See the existing files for the necessary fields.
 See the [hugo documentation](https://gohugo.io/content-management/multilingual/) for more details.
 

exampleSite/config.toml

@@ -106,8 +106,9 @@ category = "categories"
 tag = "tags"
 
 # Translation
-# English, French and Italian are supported but you can contribute
-# by adding translation to i18n/ folder.
+# The following langauges are supported: English, French, Italian,
+# Spanish, German and Dutch. You can contribute by adding translation to
+# the i18n/ folder.
 [languages.en]
 contentDir = 'content/en'
 languageCode = 'en'
@@ -140,3 +141,10 @@ weight = 2
 # languageCode = 'de'
 # languageName = 'Deutsch'
 # weight = 5
+
+# Uncomment the following lines to add a Dutch translation.
+#[languages.nl]
+#contentDir = 'content/nl'
+#languageCode = 'nl'
+#languageName = 'Nederlands'
+#weight = 6

exampleSite/content/en/home/cards.md

@@ -0,0 +1,22 @@
++++
+widget = "cards"
+weight = 15  # Order that this section will appear.
+
+# Uncomment the following line and widget will NOT be displayed
+# hidden = true
+
+# Widget title
+title = "Recommendations"
+# Widget subtitle
+#subtitle = "What lead me to acquire experience."
+
+date_format = "Jan 2006" # Date format https://gohugo.io/functions/dateformat/#readout
+
+[[card]]
+  title = "*Some quote*"
+  subtitle = "John Doe"
+
+[[card]]
+  title = "*Another recommendational quote*"
+  subtitle = "Jane Doe"
++++

i18n/nl.toml

@@ -0,0 +1,56 @@
+[tagged_in]
+other = "Getagged in"
+
+[other_tags]
+other = "Andere tags"
+
+[read_more]
+other = "Verder lezen"
+
+[name]
+other = "Naam"
+
+[your_message]
+other = "Je bericht"
+
+[cancel]
+other = "Annuleren"
+
+[submit]
+other = "Versturen"
+
+[previous]
+other = "Vorige"
+
+[next]
+other = "Volgende"
+
+[back]
+other = "Terug"
+
+[contact]
+other = "Contact"
+
+[contact_email]
+other = "Contact via email"
+
+[latest_post]
+other = "Recentste post"
+
+[reading_time]
+other = "{{ .ReadingTime }} minuten leestijd"
+
+[home]
+other = "Hoofdpagina"
+
+[about]
+other = "Over"
+
+[blog]
+other = "Blog"
+
+[present]
+other = "Huidig"
+
+[required_fields]
+other = "Verplichte velden"

layouts/partials/widgets/cards.html

@@ -0,0 +1,49 @@
+{{ $dateFormat := .Params.date_format | default "02.01.2006" }}
+
+<section id="timeline">
+	<div class="text-center w-full mb-8">
+		<h1 class="my-0 text-4xl sm:text-5xl md:text-6xl">
+			{{ .Title }}
+		</h1>
+		{{ with .Params.subtitle}}
+		<h2 class="font-light mt-0">{{ . }}</h2>
+		{{ end }}
+	</div>
+
+	<div class="relative">
+		{{/* Timeline bar */}}
+		<div>
+			{{ range $index, $card := .Params.card }}
+			{{ $even := modBool $index 2 }}
+
+			{{ $containerClass := "md:mr-auto pl-4 md:pl-0 md:pr-4"}}
+			{{ $dateClass := "md:text-right font-light text-primary text-xl" }}
+
+			{{ if $even }}
+			{{ $containerClass = "md:ml-auto pl-4"}}
+			{{ $dateClass = "font-light text-primary text-xl" }}
+			{{ end }}
+
+			<div class="md:w-1/2 mb-6 {{ $containerClass }}">
+				<div
+					class="p-4 border-2 border-primary-light dark:border-secondary-light rounded-md transition ease-in-out duration-300 shadow-2 hover:shadow-8 ">
+					<h2 class="inline-block my-0 text-primary">{{ .title | markdownify }}</h2>
+
+					{{ with .location }}
+					<span class="mx-2">&middot; {{ . }}</span>
+					{{ end }}
+
+					<h3 class="mt-1 mb-0 text-primary-dark">{{ .subtitle | markdownify }}</h3>
+
+					{{ with .description }}
+					<div class="mb-2 text-primary">
+						<p>{{ . | markdownify }}</p>
+					</div>
+					{{ end }}
+				</div>
+			</div>
+
+			{{ end }}
+		</div>
+	</div>
+</section>