feat: add optional social icons to People widget

BREAKING CHANGES

The `user_groups` field has been moved under the new `[content]` front matter section.

See #1345

exampleSite/content/home/people.md

@@ -1,19 +1,56 @@
 +++
-# People widget.
+# A "Meet the Team" section created with the People widget.
+# This section displays people from `content/authors/` which belong to the `user_groups` below.
+
 widget = "people"  # See https://sourcethemes.com/academic/docs/page-builder/
 headless = true  # This file represents a page section.
 active = false  # Activate this widget? true/false
 weight = 68  # Order that this section will appear.
 
-title = "People"
+title = "Meet the Team"
 subtitle = ""
 
-# List user groups to display.
-#   Edit each user's `user_groups` to add them to one or more of these groups.
-user_groups = ["Principal Investigators",
-               "Researchers",
-               "Grad Students",
-               "Administration",
-               "Visitors",
-               "Alumni"]
+[content]
+  # Choose which groups/teams of users to display.
+  #   Edit `user_groups` in each user's profile to add them to one or more of these groups.
+  user_groups = ["Principal Investigators",
+                 "Researchers",
+                 "Grad Students",
+                 "Administration",
+                 "Visitors",
+                 "Alumni"]
+
+[design]
+  # Show user's social networking links? (true/false)
+  show_social = false
+
+  # Show user's interests? (true/false)
+  show_interests = true
+  
+[design.background]
+  # Apply a background color, gradient, or image.
+  #   Uncomment (by removing `#`) an option to apply it.
+  #   Choose a light or dark text color by setting `text_color_light`.
+  #   Any HTML color name or Hex value is valid.
+  
+  # Background color.
+  # color = "navy"
+  
+  # Background gradient.
+  # gradient_start = "DeepSkyBlue"
+  # gradient_end = "SkyBlue"
+  
+  # Background image.
+  # image = "background.jpg"  # Name of image in `static/img/`.
+  # image_darken = 0.6  # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque.
+
+  # Text color (true=light or false=dark).
+  # text_color_light = true  
+  
+[advanced]
+ # Custom CSS. 
+ css_style = ""
+ 
+ # CSS class.
+ css_class = ""
 +++

layouts/partials/page_author.html

@@ -38,28 +38,7 @@
       <h5 class="card-title"><a href="{{$profile_url}}">{{.Params.name}}</a></h5>
       {{ with .Params.role }}<h6 class="card-subtitle">{{. | markdownify | emojify}}</h6>{{end}}
       {{ with .Params.bio }}<p class="card-text">{{. | markdownify | emojify}}</p>{{end}}
-      <ul class="network-icon" aria-hidden="true">
-        {{ range .Params.social }}
-          {{ $pack := or .icon_pack "fas" }}
-          {{ $pack_prefix := $pack }}
-          {{ if in (slice "fab" "fas" "far" "fal") $pack }}
-            {{ $pack_prefix = "fa" }}
-          {{ end }}
-          {{ $link := .link }}
-          {{ $scheme := (urls.Parse $link).Scheme }}
-          {{ $target := "" }}
-          {{ if not $scheme }}
-            {{ $link = .link | relLangURL }}
-          {{ else if in (slice "http" "https") $scheme }}
-            {{ $target = "target=\"_blank\" rel=\"noopener\"" }}
-          {{ end }}
-          <li>
-            <a href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }}>
-              <i class="{{ $pack }} {{ $pack_prefix }}-{{ .icon }}"></i>
-            </a>
-          </li>
-        {{end}}
-      </ul>
+      {{ partial "social_links" . }}
     </div>
   </div>
 {{end}}{{/* Profile page block */}}

layouts/partials/social_links.html

@@ -0,0 +1,22 @@
+<ul class="network-icon" aria-hidden="true">
+  {{ range .Params.social }}
+    {{ $pack := or .icon_pack "fas" }}
+    {{ $pack_prefix := $pack }}
+    {{ if in (slice "fab" "fas" "far" "fal") $pack }}
+      {{ $pack_prefix = "fa" }}
+    {{ end }}
+    {{ $link := .link }}
+    {{ $scheme := (urls.Parse $link).Scheme }}
+    {{ $target := "" }}
+    {{ if not $scheme }}
+      {{ $link = .link | relLangURL }}
+    {{ else if in (slice "http" "https") $scheme }}
+      {{ $target = "target=\"_blank\" rel=\"noopener\"" }}
+    {{ end }}
+    <li>
+      <a href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }}>
+        <i class="{{ $pack }} {{ $pack_prefix }}-{{ .icon }}"></i>
+      </a>
+    </li>
+  {{end}}
+</ul>

layouts/partials/widgets/people.html

@@ -1,5 +1,10 @@
+{{/* People Widget */}}
+
+{{/* Initialise */}}
 {{ $ := .root }}
 {{ $page := .page }}
+{{ $show_social := $page.Params.design.show_social | default false }}
+{{ $show_interests := $page.Params.design.show_interests | default true }}
 
 <div class="row justify-content-center people-widget">
   {{ with $page.Title }}
@@ -15,12 +20,12 @@
   </div>
   {{ end }}
 
-  {{ range $page.Params.user_groups }}
+  {{ range $page.Params.content.user_groups }}
   <div class="col-md-12">
     <h2 class="mb-4">{{ . | markdownify }}</h2>
   </div>
 
-  {{ $query := where (where site.Pages "Section" "authors") ".Params.user_groups" "intersect" (slice .) }}
+  {{ $query := where (where site.Pages "Section" "authors") ".Params.content.user_groups" "intersect" (slice .) }}
   {{ range $query }}
 
   {{ $avatar := (.Resources.ByType "image").GetMatch "*avatar*" }}
@@ -44,7 +49,9 @@
     <div class="portrait-title">
       <h2>{{with $link}}<a href="{{.}}">{{end}}{{ .Params.name }}{{if $link}}</a>{{end}}</h2>
       {{ with .Params.role }}<h3>{{ . | markdownify | emojify }}</h3>{{ end }}
-      {{ with .Params.interests }}<p class="people-interests">{{ delimit . ", " | markdownify | emojify }}</p>{{ end }}
+      {{ if $show_social }}{{ partial "social_links" . }}{{ end }}
+      {{ if and $show_interests .Params.interests }}<p class="people-interests">{{ delimit . ", " | markdownify | emojify }}</p>{{ end }}
+      {{ end }}
     </div>
   </div>