feat(widget): replace Projects and Custom with Portfolio and Blank

Essentially, the Projects and Custom widgets have been renamed and their
front matter upgraded to be consistent with the new Pages and Featured
widgets.

Also, refactor the demo, changing the section order and converting the
Teaching section to a Demos section which can be used to walk the user
thought the available demos.

See #918

exampleSite/config/_default/menus.toml

@@ -6,36 +6,36 @@
 [[main]]
   name = "Home"
   url = "#about"
-  weight = 1
-
-[[main]]
-  name = "Publications"
-  url = "#publications_featured"
-  weight = 2
+  weight = 10
 
 [[main]]
   name = "Posts"
   url = "#posts"
-  weight = 3
+  weight = 20
 
 [[main]]
   name = "Projects"
   url = "#projects"
-  weight = 4
+  weight = 30
+
+[[main]]
+  name = "Publications"
+  url = "#featured"
+  weight = 40
 
 [[main]]
   name = "Tutorials"
   url = "/tutorial/"
-  weight = 5
+  weight = 50
 
 [[main]]
   name = "Contact"
   url = "#contact"
-  weight = 6
+  weight = 60
 
 # Link to a PDF of your resume/CV from the menu.
 # To enable, copy your resume/CV to `static/files/cv.pdf` and uncomment the lines below.
 # [[main]]
 #    name = "CV"
 #    url = "files/cv.pdf"
-#    weight = 7
+#    weight = 70

exampleSite/config/_default/params.toml

@@ -56,11 +56,10 @@ address = "Building 1 Room 1, Stanford University, California, 90210, USA"
 
 # Office hours: use `<br>` to insert a line break, or set to "" to remove office hours
 office_hours = """Monday 10:00 to 13:00<br>
-                  Wednesday 09:00 to 10:00<br>
-                  Otherwise email to book an appointment"""
+                  Wednesday 09:00 to 10:00"""
 
 # Enter an optional link for booking appointments (e.g. calendly.com).
-appointment_url = ""
+appointment_url = "https://calendly.com"
 
 # Contact links
 #   Set to `[]` to disable, or comment out unwanted lines with a hash `#`.

exampleSite/content/home/about.md

@@ -2,7 +2,7 @@
 # About/Biography widget.
 widget = "about"  # Do not modify this line!
 active = true  # Activate this widget? true/false
-weight = 5  # Order that this section will appear in.
+weight = 20  # Order that this section will appear in.
 
 title = "Biography"
 

exampleSite/content/home/accomplishments.md

@@ -7,7 +7,7 @@ title = "Accomplish­ments"
 subtitle = ""
 
 # Order that this section will appear in.
-weight = 9
+weight = 50
 
 # Date format
 #   Refer to https://sourcethemes.com/academic/docs/customization/#date-format

exampleSite/content/home/contact.md

@@ -7,7 +7,7 @@ title = "Contact"
 subtitle = ""
 
 # Order that this section will appear in.
-weight = 70
+weight = 130
 
 # Automatically link email and phone?
 autolink = true

exampleSite/content/home/demo.md

@@ -1,16 +1,20 @@
 +++
-# A Demo section created with the Custom widget.
+# A Demo section created with the Blank widget.
 # Any elements can be added in the body: https://sourcethemes.com/academic/docs/writing-markdown-latex/
 # Add more sections by duplicating this file and customizing to your requirements.
 
-widget = "custom"  # Do not modify this line!
+widget = "blank"  # Do not modify this line!
 active = true  # Activate this widget? true/false
-weight = 60  # Order that this section will appear.
+weight = 15  # Order that this section will appear.
 
 # Note: a full width section format can be enabled by commenting out the `title` and `subtitle` with a `#`.
-title = "Teaching"
+title = "Demos"
 subtitle = ""
 
+[design]
+  # Choose how many columns the section has. Valid values: 1 or 2.
+  columns = "1"
+
 [design.background]
   # Apply a background color, gradient, or image.
   #   Uncomment (by removing `#`) an option to apply it.
@@ -30,22 +34,25 @@ subtitle = ""
 
   # Text color (true=light or false=dark).
   text_color_light = true
+
+[advanced]
+ # Custom CSS. 
+ css_style = "padding-top: 20px; padding-bottom: 20px;"
+ 
+ # CSS class.
+ css_class = ""
 +++
 
+Welcome to the **personal demo** of Academic. Other demos available include:
+
+- [**Project Demo** (Academic's actual site)](https://sourcethemes.com/academic/)
+
+**Over 100,000 [Amazing Websites](https://sourcethemes.com/academic/#expo) have Already Been Built with Academic**
+
+**[Join](https://sourcethemes.com/academic/docs/install/) the Most Empowered Hugo Community**
+
 {{% alert note %}}
-This is an example of using the *custom* widget to create your own homepage section.
+This homepage section is an example of adding [elements](https://sourcethemes.com/academic/docs/writing-markdown-latex/) to the [*Blank* widget](https://sourcethemes.com/academic/docs/widgets/).
 
-This section also demonstrates how to apply the *background* option to create an *image parallax* effect. Backgrounds can be applied to any section.
+Backgrounds can be applied to any section. Here, the *background* option is set give an *image parallax* effect.
 {{% /alert %}}
-
-## Example content
-
-I am a teaching instructor for the following courses at University X:
-
-- CS101: An intro to computer science
-- CS102: An intro to computer science
-- CS103: An intro to computer science
-- CS104: An intro to computer science
-- CS105: An intro to computer science
-- CS106: An intro to computer science
-- CS107: An intro to computer science

exampleSite/content/home/experience.md

@@ -7,7 +7,7 @@ title = "Experience"
 subtitle = ""
 
 # Order that this section will appear in.
-weight = 8
+weight = 40
 
 # Date format for experience
 #   Refer to https://sourcethemes.com/academic/docs/customization/#date-format

exampleSite/content/home/featured.md

@@ -5,7 +5,7 @@
 
 widget = "featured"  # Do not modify this line!
 active = true  # Activate this widget? true/false
-weight = 10  # Order that this section will appear.
+weight = 80  # Order that this section will appear.
 
 title = "Featured Publications"
 subtitle = ""

exampleSite/content/home/gallery/index.md

@@ -8,7 +8,7 @@ title = "Gallery"
 subtitle = ""
 
 # Order that this section will appear in.
-weight = 65
+weight = 66
 +++
 
 {{< gallery >}}

exampleSite/content/home/hero.md

@@ -2,7 +2,7 @@
 # Hero widget.
 widget = "hero"  # Do not modify this line!
 active = true  # Activate this widget? true/false
-weight = 3  # Order that this section will appear.
+weight = 10  # Order that this section will appear.
 
 title = "Academic"
 

exampleSite/content/home/posts.md

@@ -4,7 +4,7 @@
 
 widget = "pages"  # Do not modify this line!
 active = true  # Activate this widget? true/false
-weight = 40  # Order that this section will appear.
+weight = 60  # Order that this section will appear.
 
 title = "Recent Posts"
 subtitle = ""

exampleSite/content/home/projects.md

@@ -1,52 +1,75 @@
 +++
-# Projects widget.
-widget = "projects"  # Do not modify this line!
+# Portfolio widget.
+widget = "portfolio"  # Do not modify this line!
 active = true  # Activate this widget? true/false
+weight = 65  # Order that this section will appear.
 
 title = "Projects"
 subtitle = ""
 
-# Order that this section will appear in.
-weight = 50
+[content]
+  # Page type to display. E.g. project.
+  page_type = "project"
+  
+  # Filter toolbar (optional).
+  # Add or remove as many filters (`[[content.filter_button]]` instances) as you like.
+  # To show all items, set `tag` to "*".
+  # To filter by a specific tag, set `tag` to an existing tag name.
+  # To remove toolbar, delete/comment all instances of `[[content.filter_button]]` below.
+  
+  # Default filter index (e.g. 0 corresponds to the first `[[filter_button]]` instance below).
+  filter_default = 0
+  
+  [[content.filter_button]]
+    name = "All"
+    tag = "*"
+  
+  [[content.filter_button]]
+    name = "Deep Learning"
+    tag = "Deep Learning"
+  
+  [[content.filter_button]]
+    name = "Other"
+    tag = "Demo"
 
-# Content.
-# Display content from the following folder.
-# For example, `folder = "project"` displays content from `content/project/`.
-folder = "project"
+[design]
+  # Choose how many columns the section has. Valid values: 1 or 2.
+  columns = "2"
 
-# View.
-#   1 = List
-#   3 = Card
-#   5 = Showcase
-view = 3
+  # Toggle between the various page layout types.
+  #   1 = List
+  #   3 = Card
+  #   5 = Showcase
+  view = 3
 
-# Widget layout
-# Legend: 0 = two columns (default), 1 = single column
-widget_layout = 0
+  # For Showcase view, flip alternate rows?
+  flip_alt_rows = false
 
-# For Showcase view, flip alternate rows?
-flip_alt_rows = false
-
-# Filter toolbar.
-
-# Default filter index (e.g. 0 corresponds to the first `[[filter]]` instance below).
-filter_default = 0
-
-# Add or remove as many filters (`[[filter]]` instances) as you like.
-# To show all items, set `tag` to "*".
-# To filter by a specific tag, set `tag` to an existing tag name.
-# To remove toolbar, delete/comment all instances of `[[filter]]` below.
-[[filter]]
-  name = "All"
-  tag = "*"
-
-[[filter]]
-  name = "Deep Learning"
-  tag = "Deep Learning"
-
-[[filter]]
-  name = "Other"
-  tag = "Demo"
+[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 = ""
 +++
 

exampleSite/content/home/publications.md

@@ -4,7 +4,7 @@
 
 widget = "pages"  # Do not modify this line!
 active = true  # Activate this widget? true/false
-weight = 20  # Order that this section will appear.
+weight = 90  # Order that this section will appear.
 
 title = "Recent Publications"
 subtitle = ""

exampleSite/content/home/skills.md

@@ -7,7 +7,7 @@ title = "Skills"
 subtitle = ""
 
 # Order that this section will appear in.
-weight = 7
+weight = 30
 
 # Showcase personal skills or business features.
 # 

exampleSite/content/home/tags.md

@@ -7,6 +7,5 @@ title = "Popular Topics"
 subtitle = ""
 
 # Order that this section will appear in.
-weight = 65
-
+weight = 120
 +++

exampleSite/content/home/talks.md

@@ -4,7 +4,7 @@
 
 widget = "pages"  # Do not modify this line!
 active = true  # Activate this widget? true/false
-weight = 30  # Order that this section will appear.
+weight = 70  # Order that this section will appear.
 
 title = "Recent & Upcoming Talks"
 subtitle = ""

layouts/partials/project_li_card.html

@@ -16,9 +16,9 @@
     </a>
     {{ end }}
     <div class="card-text">
-      <h4><a href="{{ $link }}" {{ $target | safeHTMLAttr }}>{{ $item.Title }}</a></h4>
+      <h4><a href="{{ $link }}" {{ $target | safeHTMLAttr }}>{{ $item.Title | markdownify | emojify }}</a></h4>
       <div class="card-desription">
-        {{ with $item.Params.summary }}<p>{{ . | markdownify }}</p>{{ end }}
+        {{ with $item.Params.summary }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
       </div>
     </div>
   </div>

layouts/partials/project_li_list.html

@@ -8,8 +8,8 @@
   <i class="far fa-copy pub-icon" aria-hidden="true"></i>
 
   <span class="project-title">
-    <a href="{{ $link }}" {{ $target | safeHTMLAttr }} itemprop="url">{{ $item.Title }}</a>
+    <a href="{{ $link }}" {{ $target | safeHTMLAttr }} itemprop="url">{{ $item.Title | markdownify | emojify }}</a>
   </span>
 
-  {{ with $item.Params.summary }}<p class="project-summary">{{ . | markdownify }}</p>{{ end }}
+  {{ with $item.Params.summary }}<p class="project-summary">{{ . | markdownify | emojify }}</p>{{ end }}
 </div>

layouts/partials/project_li_showcase.html

@@ -12,7 +12,7 @@
 {{ $target := .target }}
 
 {{ $order := "" }}
-{{ if and ($widget.Params.flip_alt_rows | default true) (not (modBool .index 2)) }}
+{{ if and ($widget.Params.design.flip_alt_rows | default true) (not (modBool .index 2)) }}
   {{ $order = "order-md-2" }}
 {{ end }}
 
@@ -23,19 +23,19 @@
     <div class="col-12 col-md-6">
       <h3 class="article-title mb-0 mt-0" itemprop="name">
         {{- if $do_link}}<a href="{{ $link }}" {{ $target | safeHTMLAttr }} itemprop="url">{{end -}}
-        {{ $item.Title }}
+        {{ $item.Title | markdownify | emojify }}
         {{- if $do_link}}</a>{{end -}}
       </h3>
 
       {{ $summary := "" }}
       {{ if $item.Params.summary }}
-        {{ $summary = $item.Params.summary | markdownify }}
+        {{ $summary = $item.Params.summary }}
       {{ else if $item.Truncated }}
         {{ $summary = $item.Summary }}
       {{ end }}
       {{ with $summary }}
       <div class="article-style" itemprop="articleBody">
-        {{ . }}
+        {{ . | markdownify | emojify }}
       </div>
       {{ end }}
 

layouts/partials/widget_page.html

@@ -39,7 +39,9 @@
   {{ end }}
 
   {{ $params := dict "root" $ "page" $st }}
-  {{ $widget := or $st.Params.widget "custom" }}
+  {{ $widget := or $st.Params.widget "blank" }}
+  {{ if eq $widget "custom" }}{{ $widget = "blank" }}{{ end }}{{/* Support legacy Custom widget */}}
+  {{ if eq $widget "projects" }}{{ $widget = "portfolio" }}{{ end }}{{/* Support legacy Projects widget */}}
   {{ $widget_path := printf "widgets/%s.html" $widget }}
   {{ if in (slice "slider") $widget }}
     {{ partial $widget_path $params }}

layouts/partials/widgets/blank.html

@@ -0,0 +1,20 @@
+{{ $st := .page }}
+{{ $columns := $st.Params.design.columns | default "2" }}
+
+<div class="row">
+  {{ if ne $columns "1" }}
+    <div class="col-12 col-lg-4 section-heading">
+      {{ with $st.Title }}<h1>{{ . | markdownify | emojify }}</h1>{{ end }}
+      {{ with $st.Params.subtitle }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
+    </div>
+    <div class="col-12 col-lg-8">
+      {{ $st.Content }}
+    </div>
+  {{ else }}
+    <div class="col-lg-12">
+      {{ with $st.Title }}<h1>{{ . | markdownify | emojify }}</h1>{{ end }}
+      {{ with $st.Params.subtitle }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
+      {{ $st.Content }}
+    </div>
+  {{ end }}
+</div>

layouts/partials/widgets/custom.html

@@ -1,18 +0,0 @@
-{{ $page := .page }}
-
-<!-- Custom widget -->
-<div class="row">
-  {{ if $page.Title }}
-  <div class="col-12 col-lg-4 section-heading">
-    <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
-    {{ with $page.Params.subtitle }}<p>{{ . | markdownify }}</p>{{ end }}
-  </div>
-  <div class="col-12 col-lg-8">
-    {{ $page.Content }}
-  </div>
-  {{ else }}
-  <div class="col-lg-12">
-    {{ $page.Content }}
-  </div>
-  {{ end }}
-</div>

layouts/partials/widgets/portfolio.html

@@ -1,16 +1,19 @@
-{{ $ := .root }}
-{{ $page := .page }}
+{{/* Portfolio Widget */}}
 
-<!-- Projects widget -->
-{{ $widget_layout := $page.Params.widget_layout | default 0 }}
-{{ if eq $widget_layout 0 }}
+{{/* Initialise */}}
+{{ $ := .root }}
+{{ $st := .page }}
+{{ $items_type := $st.Params.content.page_type | default "project" }}
+{{ $columns := $st.Params.design.columns | default "2" }}
+
+{{ if ne $columns "1" }}
 {{/* Standard dual-column layout. */}}
 
 <div class="row">
   <div class="col-xs-12 col-md-4 section-heading">
 
-    <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
-    {{ with $page.Params.subtitle }}<p>{{ . | markdownify }}</p>{{ end }}
+    {{ with $st.Title }}<h1>{{ . | markdownify | emojify }}</h1>{{ end }}
+    {{ with $st.Params.subtitle }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
 
   </div>
   <div class="col-xs-12 col-md-8">
@@ -21,20 +24,20 @@
 <div class="margin-auto">
 
   <div class="center-text">
-    {{ with $page.Title }}<h1 class="mt-0">{{ . | markdownify }}</h1>{{ end }}
-    {{ with $page.Params.subtitle }}<p>{{ . | markdownify }}</p>{{ end }}
+    {{ with $st.Title }}<h1 class="mt-0">{{ . | markdownify | emojify }}</h1>{{ end }}
+    {{ with $st.Params.subtitle }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
   </div>
   <div>
 {{ end }}
 
-    {{ with $page.Content }}<p>{{ . | markdownify }}</p>{{ end }}
+    {{ with $st.Content }}<p>{{ . }}</p>{{ end }}
 
-    {{ if $page.Params.filter }}
+    {{ if $st.Params.content.filter_button }}
 
-      {{ $filter_default := default (int $page.Params.filter_default) 0 }}
+      {{ $filter_default := default (int $st.Params.content.filter_default) 0 }}
 
       {{/* Parse default filter tag from front matter in the form of either tag name or CSS class name. */}}
-      {{ $default_filter_tag_raw := (index $page.Params.filter ($filter_default)).tag }}
+      {{ $default_filter_tag_raw := (index $st.Params.content.filter_button ($filter_default)).tag }}
       {{ $default_filter_tag := printf ".js-id-%s" (replace $default_filter_tag_raw " " "-") }}
       {{ if or (eq (substr $default_filter_tag_raw 0 1) "*") (eq (substr $default_filter_tag_raw 0 1) ".") }}
         {{ $default_filter_tag = $default_filter_tag_raw }}
@@ -43,12 +46,12 @@
       <span class="d-none default-project-filter">{{ $default_filter_tag }}</span>
 
       {{/* Only show filter buttons if there are multiple filters. */}}
-      {{ if gt (len $page.Params.filter) 1 }}
+      {{ if gt (len $st.Params.content.filter_button) 1 }}
       <div class="project-toolbar">
         <div class="project-filters">
           <div class="btn-toolbar">
             <div class="btn-group flex-wrap">
-              {{ range $idx, $item := $page.Params.filter }}
+              {{ range $idx, $item := $st.Params.content.filter_button }}
                 {{/* Parse filter tag from front matter in the form of either tag name or CSS class name. */}}
                 {{ $data_filter := printf ".js-id-%s" (replace .tag " " "-") }}
                 {{ if or (eq (substr .tag 0 1) "*") (eq (substr .tag 0 1) ".") }}
@@ -63,20 +66,20 @@
       {{ end }}
     {{ end }}
 
-    <div class="{{ if or $page.Params.filter (eq $page.Params.view 3) }}isotope projects-container{{end}} {{if eq $page.Params.view 3}}js-layout-masonry{{else}}row js-layout-row{{end}} {{ if eq $page.Params.view 5 }}project-showcase mt-5{{end}}">
-      {{ range $idx, $item := where $.Site.RegularPages "Type" ($page.Params.folder | default "project") }}
+    <div class="{{ if or $st.Params.content.filter_button (eq $st.Params.design.view 3) }}isotope projects-container{{end}} {{if eq $st.Params.design.view 3}}js-layout-masonry{{else}}row js-layout-row{{end}} {{ if eq $st.Params.design.view 5 }}project-showcase mt-5{{end}}">
+      {{ range $idx, $item := where $.Site.RegularPages "Type" $items_type }}
         {{ $link := $item.RelPermalink }}
         {{ $target := "" }}
         {{ if $item.Params.external_link }}
           {{ $link = $item.Params.external_link }}
           {{ $target = "target=\"_blank\" rel=\"noopener\"" }}
         {{ end }}
-        {{ if eq $page.Params.view 1 }}
-          {{ partial "project_li_list" (dict "widget" $page "index" $idx "item" $item "link" $link "target" $target) }}
-        {{ else if eq $page.Params.view 3 }}
-          {{ partial "project_li_card" (dict "widget" $page "index" $idx "item" $item "link" $link "target" $target) }}
+        {{ if eq $st.Params.design.view 1 }}
+          {{ partial "project_li_list" (dict "widget" $st "index" $idx "item" $item "link" $link "target" $target) }}
+        {{ else if eq $st.Params.design.view 3 }}
+          {{ partial "project_li_card" (dict "widget" $st "index" $idx "item" $item "link" $link "target" $target) }}
         {{ else }}
-          {{ partial "project_li_showcase" (dict "widget" $page "index" $idx "item" $item "link" $link "target" $target) }}
+          {{ partial "project_li_showcase" (dict "widget" $st "index" $idx "item" $item "link" $link "target" $target) }}
         {{ end }}
       {{ end }}
     </div>