jekyll-theme-profile 0.3.0 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a5af6258d0e45f7a3dcb7f8837553680f25c797d642adf3e6bf9b18ae942029d
-  data.tar.gz: 78d5515f20708044ad0299eeda68e08faba692e916a5d5b3e67935a2cb7e741e
+  metadata.gz: ee08557d9f9c7d0582be919f0b43cb18cf221a4a294ad9263ee38d45a2f3b96a
+  data.tar.gz: 076e867cbfb3169ef2250bb711bdb584ee18d5df12c252a773a86eb979d886fc
 SHA512:
-  metadata.gz: b3d80170c66f3650923f3c9cbd50b180e7b619b879e2a5469f6ca12727c040f61d73a8d3828910e5545991073f739783cbe5445b46a59978765b1f8eb80de8a8
-  data.tar.gz: 748240a5d98f5cc4a974c8cd6230d6938a5013f3b86876c839260dc11fd6c97d03b60df3cf9e321075041b05462b336df48b2c7e9314f539b00ab93243176635
+  metadata.gz: 5532edfd11381a0fd582724624fd863bf3230e77958c6108a800d8708f990598fe0378cfd8218768bd693b6dcee1cace0e2b4c041c66fadc58871a2e94756499
+  data.tar.gz: 110e6fa0a7df2b1e0abe76825ec44980fef6e069addc80c7739c3db59421f703499c6f0ec672e3e2b4997a1a1acb9328c8375449ac0404c36ccf9a2c5dc79f8a

data/README.md

@@ -1,4 +1,5 @@
 ---
+layout: default
 permalink: /
 ---
 ![jekyll-theme-profile](screenshot.png)
@@ -38,31 +39,80 @@ Or install it yourself as:
 Here's a sample config file you can copy and customize:
 
 ```yaml
-repository: athackst/jekyll-theme-profile # Your repository name
-url: https://username.github.io # The host url for your site
-baseurl: "" # or your package name /jekyll-theme-profile (leave blank if it is the username.github.io package)
+repository: athackst/jekyll-theme-profile
+# The style of the website
 style: topbar # One of "stacked", "sidebar", "topbar"
-# background: #(optional)
-#   image: /assets/img/background-img.jpg # The path/url to the image you want on the background
+ # The user/project avatar.  If not set the avatar of the project owner will be used.
+user_image: /media/user-image.jpg
+# Optional custom background image and overlay
+# background:
+#   image: /media/background-img.jpg
+#   single overlay for all or custom for light and dark modes
+#   overlay: rgba(0, 0, 0, 0.5)
 #   light:
-#     overlay: rgba(255, 255, 255, 0.5) # Overlay for light theme
+#     overlay: rgba(255, 255, 255, 0.5)
 #   dark:
-#     overlay: rgba(0, 0, 0, 0.5) # Overlay for dark theme
-
-links:
-#   - name: Example full entry
-#     web_url: https://www.example.com
-#     image_url: /assets/img/icon-topbar.png
-#     description: Example description
-#   - name: Example entry with url and image
-#     web_url: https://www.example.com
-#     image_url: /assets/img/icon-sidebar.png
-#   - name: Example entry with image
-#     image_url: /assets/img/icon-stacked.png
-#   - name: Example entry with description
-#     description: Example Description
-#   - name: Example entry with only a name
+#     overlay: rgba(0, 0, 0, 0.5)
 
+# repo_info: true # Show the information for the source of this project
+# metadata: false # Show the metadata associated with the user
+
+####################
+# Social media
+# social_image: /screenshot.png # The social media thumbnail image to use in post links.
+# icon_color: "#959da5" # The color of the social media icons on the site
+# social_media: # Your social media accounts
+  # behance: your_username
+  # dribbble: your_username
+  # docker: your_username
+  # facebook: your_username
+  # github: your_username
+  # hackerrank: your_username
+  # instagram: your_username
+  # keybase: your_username
+  # linkedin: your_username
+  # mail: email@address
+  # mastodon: your_username
+  # medium: your_username
+  # stackoverflow: your_user_id
+  # telegram: your_username
+  # threads: your_username
+  # tiktok: your_username
+  # twitter: your_username
+  # unsplash: your_username
+  # vk: your_username
+  # vscode: your_username
+  # youtube: your_username
+  # x: your_username
+
+####################
+# Navigation links
+# nav:
+#   - name: Topbar
+#     url: /test/home/topbar.html
+#   - name: Sidebar
+#     url: /test/home/sidebar.html
+#   - name: Stacked
+#     url: /test/home/stacked.html
+
+####################
+# List of links for home page
+# links:
+#   - name: Example page with topbar
+#     url: /test/page/topbar
+#     thumbnail: /media/icon-topbar.png
+#   - name: Example page with sidebar
+#     url: /test/page/sidebar
+#     thumbnail: /media/icon-sidebar.png
+#   - name: Example page with header stacked
+#     url: /test/page/stacked
+#     thumbnail: /media/icon-stacked.png
+#   - name: Example page with a custom background
+#     url: /test/page/background
+#     thumbnail: /media/icon-bg.png
+
+###################
+# Repositories to show on home page
 repositories:
   sort_by: stars
   # sort_by options:
@@ -73,29 +123,14 @@ repositories:
     archived: true
     forks: true
     repositories:
-      # - respositories to exclude
+      # - list of respositories to exclude
 
-social_media:
-#   behance: your_username
-#   dribbble: your_username
-#   docker: your_username
-#   facebook: your_username
-#   hackerrank: your_username
-#   instagram: your_username
-#   keybase: your_username
-#   linkedin: your_username
-#   mastodon: your_username
-#   medium: your_username
-#   stackoverflow: your_user_id
-#   telegram: your_username
-#   threads: your_username
-#   twitter: your_username
-#   unsplash: your_username
-#   vk: your_username
-#   vscode: your_username
-#   youtube: your_username
-#   x: your_username
+####################
+# Blog
+posts_limit: 3 # The number of posts to show in home
 
+paginate: 6 # The number of posts to show per page of pagination of blog posts
+paginate_path: "/assets/blog/page:num"
 ```
 
 You can also use this with github acions. Below is a typical worfklow file
@@ -205,15 +240,15 @@ style: sidebar # One of "stacked", "sidebar", "topbar"
 
 #### [Sidebar](/test/home/sidebar.md)
 
-![Sidebar image](/assets/img/sidebar-preview.png)
+![Sidebar image](/media/sidebar-preview.png)
 
 #### [Stacked](/test/home/stacked.md)
 
-![Stacked image](/assets/img/stacked-preview.png)
+![Stacked image](/media/stacked-preview.png)
 
 #### [Topbar](/test/home/topbar.md)
 
-![Topbar image](/assets/img/topbar-preview.png)
+![Topbar image](/media/topbar-preview.png)
 
 #### Background
 
@@ -221,7 +256,7 @@ You can even change the background by adding the following to your `_config.yml`
 
 ```yaml
 # background:
-#   image: /assets/img/background-img.jpg
+#   image: /media/background-img.jpg
 #   light:
 #     overlay: rgba(255, 255, 255, 0.5)
 #   dark:
@@ -230,23 +265,39 @@ You can even change the background by adding the following to your `_config.yml`
 
 [Example page](/test/page/background.md)
 
+### Nav
+
+In the `nav` section, you can add navigation links that will show up on every page of your website.
+
+![Nav](/media/nav.png){: .border}
+
+```yaml
+nav:
+  - name: Topbar
+    url: /test/home/topbar.html
+  - name: Sidebar
+    url: /test/home/sidebar.html
+  - name: Stacked
+    url: /test/home/stacked.html
+```
+
 ### Links
 
 In the `links` section, you can add links to showcase various pages on the web or your website.
 
-![Links](/assets/img/links.png){: .border}
+![Links](/media/links.png){: .border}
 
 ```yaml
 links:
   - name: Example full entry
-    web_url: https://www.example.com
-    image_url: /assets/img/icon-topbar.png
+    url: https://www.example.com
+    thumbnail: /media/icon-topbar.png
     description: Example description
   - name: Example entry with url and image
-    web_url: https://www.example.com
-    image_url: /assets/img/icon-sidebar.png
+    url: https://www.example.com
+    thumbnail: /media/icon-sidebar.png
   - name: Example entry with image
-    image_url: /assets/img/icon-stacked.png
+    thumbnail: /media/icon-stacked.png
   - name: Example entry with description
     description: Example Description
   - name: Example entry with only a name
@@ -256,7 +307,7 @@ links:
 
 The `repositories` section allows you to display your GitHub repositories on your page.  You can sort them by stars or latest pushes, set a limit to the number of repositories displayed, and exclude archived, forked, or specific repositories from the list
 
-![Repositories](/assets/img/repositories.png){: .border}
+![Repositories](/media/repositories.png){: .border}
 
 ```yaml
 repositories:
@@ -274,9 +325,21 @@ repositories:
 
 ### Social media
 
+#### Setting the social media card
+
+You can set the social media image for your site with the setting
+
+```yaml
+social_image: /screenshot.jpg
+```
+
+This works on both yaml frontmatter for a page and in the `_config.yml` file.  Page settings will override site settings.
+
+#### Adding your socials
+
 Utilize the `social_media` section to add links to your various social media profiles.  For each platform simply provide your username or user ID to have the corresponding icon and link appear on your profile.
 
-![Social Media](/assets/img/social-media.png){: .border}
+![Social Media](/media/social-media.png){: .border}
 
 ```yaml
 social_media:
@@ -284,15 +347,18 @@ social_media:
   dribbble: your_username
   docker: your_username
   facebook: your_username
+  github: your_username
   hackerrank: your_username
   instagram: your_username
   keybase: your_username
   linkedin: your_username
+  mail: email@address
   mastodon: your_username
   medium: your_username
   stackoverflow: your_user_id
   telegram: your_username
   threads: your_username
+  tiktok: your_username
   twitter: your_username
   unsplash: your_username
   vk: your_username
@@ -301,11 +367,17 @@ social_media:
   x: your_username
 ```
 
+You can also set the icon color.  If you don't set an icon color, the original icon colors will be used.
+
+```yaml
+icon_color: "#959da5"
+```
+
 ### Blog
 
 Make entries for the blog the same way you normally would by placing entries in the `_posts` folder.  You can adjust the number of entries that show up in the main page by adjusting `posts_limit` in the `_config.yml` file.  If you have more posts than the limit, a `Read more` button will link to the paginated blog post page /blog/index.html.
 
-![Blog](/assets/img/blog.png){: .border}
+![Blog](/media/blog.png){: .border}
 
 ```yaml
 posts_limit: 3

data/_config.yml

@@ -1,14 +1,95 @@
 repository: athackst/jekyll-theme-profile
+# The style of the website
 style: topbar # One of "stacked", "sidebar", "topbar"
-user_image: /assets/img/user-image.jpg
-image: /screenshot.png
+ # The user/project avatar.  If not set the avatar of the project owner will be used.
+user_image: /media/user-image.jpg
+# Optional custom background image and overlay
 # background:
-#   image: /assets/img/background-img.jpg
+#   image: /media/background-img.jpg
 #   light:
 #     overlay: rgba(255, 255, 255, 0.5)
 #   dark:
 #     overlay: rgba(0, 0, 0, 0.5)
 
+repo_info: true # Show the information for the source of this project
+metadata: false # Show the metadata associated with the user
+
+####################
+# Social media
+social_image: /screenshot.png # The social media thumbnail image to use in post links.
+# icon_color: "#959da5" # The color of the social media icons on the site
+social_media: # Your social media accounts
+  # behance: your_username
+  # dribbble: your_username
+  # docker: your_username
+  # facebook: your_username
+  # github: your_username
+  # hackerrank: your_username
+  # instagram: your_username
+  # keybase: your_username
+  # linkedin: your_username
+  # mail: email@address
+  # mastodon: your_username
+  # medium: your_username
+  # stackoverflow: your_user_id
+  # telegram: your_username
+  # threads: your_username
+  # tiktok: your_username
+  # twitter: your_username
+  # unsplash: your_username
+  # vk: your_username
+  # vscode: your_username
+  # youtube: your_username
+  # x: your_username
+
+####################
+# Navigation links
+nav:
+  - name: Topbar
+    url: /test/home/topbar.html
+  - name: Sidebar
+    url: /test/home/sidebar.html
+  - name: Stacked
+    url: /test/home/stacked.html
+
+####################
+# List of links for home page
+links:
+  - name: Example page with topbar
+    url: /test/page/topbar
+    thumbnail: /media/icon-topbar.png
+  - name: Example page with sidebar
+    url: /test/page/sidebar
+    thumbnail: /media/icon-sidebar.png
+  - name: Example page with header stacked
+    url: /test/page/stacked
+    thumbnail: /media/icon-stacked.png
+  - name: Example page with a custom background
+    url: /test/page/background
+    thumbnail: /media/icon-bg.png
+
+###################
+# Repositories to show on home page
+repositories:
+  sort_by: stars
+  # sort_by options:
+  #   - pushed
+  #   - stars
+  limit: 24
+  exclude:
+    archived: true
+    forks: true
+    repositories:
+      # - list of respositories to exclude
+
+####################
+# Blog
+posts_limit: 3 # The number of posts to show in home
+
+paginate: 6 # The number of posts to show per page of pagination of blog posts
+paginate_path: "/assets/blog/page:num"
+
+# ============= general settings for the theme ===============
 plugins:
   - jekyll-github-metadata
   - jekyll-octicons
@@ -39,56 +120,4 @@ exclude:
   - .github
   - "*.gem"
 
-paginate: 6
-paginate_path: "/assets/blog/page:num"
-
 markdown: kramdown
-
-posts_limit: 3
-
-links:
-  - name: Example page with topbar
-    web_url: /test/page/topbar
-    image_url: /assets/img/icon-topbar.png
-  - name: Example page with sidebar
-    web_url: /test/page/sidebar
-    image_url: /assets/img/icon-sidebar.png
-  - name: Example page with header stacked
-    web_url: /test/page/stacked
-    image_url: /assets/img/icon-stacked.png
-  - name: Example page with a custom background
-    web_url: /test/page/background
-    image_url: /assets/img/icon-bg.png
-
-repositories:
-  sort_by: stars
-  # sort_by options:
-  #   - pushed
-  #   - stars
-  limit: 24
-  exclude:
-    archived: true
-    forks: true
-    repositories:
-      # - respositories to exclude
-
-social_media:
-  # behance: your_username
-  # dribbble: your_username
-  # docker: your_username
-  # facebook: your_username
-  # hackerrank: your_username
-  # instagram: your_username
-  # keybase: your_username
-  # linkedin: your_username
-  # mastodon: your_username
-  # medium: your_username
-  # stackoverflow: your_user_id
-  # telegram: your_username
-  # threads: your_username
-  # twitter: your_username
-  # unsplash: your_username
-  # vk: your_username
-  # vscode: your_username
-  # youtube: your_username
-  # x: your_username

data/_includes/breadcrumbs.html

@@ -0,0 +1,59 @@
+<div class="d-flex flex-items-center">
+    <nav aria-label="Breadcrumb" class="f5">
+        <ol class="breadcrumb">
+            {%- assign crumbs = page.url | split: '/' %}
+            {%- assign url = "/" %}
+            {%- for crumb in crumbs %}
+            {%- if crumb == "" %}
+            <li class="breadcrumb-item">
+                <a href="{{ site.baseurl}}/">home</a>
+            </li>
+            {%- continue %}
+            {%- endif %}
+            {%- assign asset_url = url | append: "assets/" | append: crumb | append: "/" %}
+            {%- assign isa_asset = site.pages | where: "url", asset_url | first %}
+            {%- assign index_url = url | append: crumb | append: "/index.html" %}
+            {%- assign isa_index = site.pages | where: "url", index_url | first %}
+            {%- assign folder_url = url | append: crumb | append: "/" %}
+            {%- assign isa_folder = site.pages | where: "url", folder_url | first %}
+            {%- assign url = url | append: crumb %}
+            {%- assign isa_page = site.pages | where: "url", url | first %}
+            {%- assign isa_post = site.posts | where: "url", url | first %}
+
+            {%- assign nice_crumb = crumb | url_decode | replace: ".html", "" | replace: "-", " " | replace: "_", " " |
+            downcase %}
+
+            {%- comment %}
+            Checking the crumb: {{ crumb }}
+            [asset url: {{ asset_url }}]
+            [index url: {{ index_url }}]
+            [folder_url: {{ folder_url }}]
+            [url: {{ url }}]
+            {% for p in site.pages %}
+            {{ p.url }}
+            {% endfor %}
+            {%- endcomment %}
+
+            {%- if page.url == url or page.url == index_url or page.url == folder_url %}
+            <li class="breadcrumb-item breadcrumb-item-selected" aria-current="page">
+                <a href="{{ page.url | relative_url }}">{{ nice_crumb }}</a>
+            </li>
+            {%- break %}
+            {%- elsif isa_page or isa_post or isa_index or isa_folder %}
+            <li class="breadcrumb-item">
+                <a href="{{ url | relative_url }}">{{ nice_crumb }}</a>
+            </li>
+            {%- elsif isa_asset %}
+            <li class="breadcrumb-item">
+                <a href="{{ asset_url | relative_url }}">{{ nice_crumb }}</a>
+            </li>
+            {%- else %}
+            <li class="breadcrumb-item">
+                {{ nice_crumb }}
+            </li>
+            {%- endif %}
+            {%- unless crumb == crumbs.last %}{%- assign url = url | append: "/" %}{%- endunless %}
+            {%- endfor %}
+        </ol>
+    </nav>
+</div>

data/_includes/header.html

@@ -25,12 +25,12 @@
   {%- assign meta_description = user.bio | strip_html | strip_newlines | xml_escape | truncate: 300 %}
 {%- endif %}
 
-{%- if page.image %}
-  {%- assign page_image = page.image %}
-{%- elsif site.image %}
-  {%- assign page_image = site.image %}
+{%- if page.social_image %}
+  {%- assign social_image = page.social_image %}
+{%- elsif site.social_image %}
+  {%- assign social_image = site.social_image %}
 {%- else %}
-  {% assign page_image = user.avatar_url %}
+  {% assign social_image = user.avatar_url %}
 {%- endif %}
 
 {%- if page.background_image %}
@@ -52,7 +52,7 @@
   <meta property="og:type" content="website">
   <meta property="og:title" content="{{ page_title | absolute_url }}">
   <meta property="og:description" content="{{ meta_description }}">
-  <meta property="og:image" content="{{ page_image | absolute_url }}">
+  <meta property="og:image" content="{{ social_image | absolute_url }}">
 
   <!-- Twitter Meta Tags -->
   <meta name="twitter:card" content="summary_large_image">
@@ -61,7 +61,7 @@
   <meta property="twitter:url" content="{{ page_url | absolute_url }}">
   <meta name="twitter:title" content="{{ page_title }}">
   <meta name="twitter:description" content="{{ meta_description }}">
-  <meta name="twitter:image" content="{{ page_image | absolute_url }}">
+  <meta name="twitter:image" content="{{ social_image | absolute_url }}">
   {%- if site.social_media.twitter %}
   <meta name="twitter:site" content="@{{ site.social_media.twitter }}">
   {%- endif %}
@@ -153,6 +153,7 @@
         }
         // Set the span to the themeIcon class
         themeIcon.classList = "octicon octicon-" + nextIcon + "-24";
+        themeToggle.setAttribute("aria-label", "Color mode: " + nextMode);
       }
 
       themeToggle.addEventListener('click', function () {
@@ -167,15 +168,15 @@
   </script>
 
 {%- if bg_image %}
+{%- if site.backgrournd.overlay %}
+  {%- assign dark_overlay = site.background.overlay %}
+  {%- assign light_overlay = site.background.overlay %}
+{%- endif %}
 {%- if site.background.dark.overlay %}
   {%- assign dark_overlay = site.background.dark.overlay %}
-{%- else %}
-  {%- assign dark_overlay = 'rgba(34, 39, 46, 0.5)' %}
 {%- endif %}
 {%- if site.background.light.overlay %}
   {%- assign light_overlay = site.background.light.overlay %}
-{%- else %}
-  {%- assign light_overlay = 'rgba(255, 255, 255, 0.5)' %}
 {%- endif %}
 <style>
   body {

data/_includes/link-card.html

@@ -1,10 +1,10 @@
-{%- if link.web_url %}
-<a href="{{ link.web_url | relative_url }}"
+{%- if link.url %}
+<a href="{{ link.url | relative_url }}"
   class="github-component position-relative hover-grow no-underline d-flex flex-column text-center border border-gray-light rounded-1 p-1">
   <div class="d-inline-flex flex-items-center">
     <div class="avatar-7">
-      {%- if link.image_url %}
-      <img src="{{ link.image_url | relative_url }}" width="48" height="48"
+      {%- if link.thumbnail %}
+      <img src="{{ link.thumbnail | relative_url }}" width="48" height="48"
         class="rounded-1 box-shadow-none img-contain float-left" alt="{{ link.name }}">
       {%- endif %}
     </div>
@@ -21,8 +21,8 @@
 <div class="github-component position-relative height-full d-flex flex-column text-center p-1">
   <div class="d-inline-flex flex-items-center">
     <div class="avatar-7">
-      {%- if link.image_url %}
-      <img src="{{ link.image_url | relative_url }}" width="48" height="48"
+      {%- if link.thumbnail %}
+      <img src="{{ link.thumbnail | relative_url }}" width="48" height="48"
         class="rounded-1 box-shadow-none img-contain float-left" alt="{{ link.name }}">
       {%- endif %}
     </div>

data/_includes/masthead.html

@@ -15,44 +15,42 @@
 {%- endif %}
 
 {%- assign metadata_styles = 'd-flex flex-items-center flex-justify-center mb-3' %}
-<a href="{{ site.baseurl }}/">
-<div class="img-masthead">
-  <img src="{{ user_img | relative_url }}" alt="{{ name }}" class="avatar avatar-user rounded-circle border color-border-default">
-</div>
-</a>
-<h1 class="mb-2 lh-condensed overflow-wrap-word">{{ name }}</h1>
-<p class="mb-3 f4">
-  {{ user.bio }}
-</p>
-
-<div class="f4 mb-6">
-{%- if include.metadata %}
+<div class="Masthead">
+  <a href="{{ site.baseurl }}/">
+    <div class="img-masthead">
+      <img src="{{ user_img | relative_url }}" alt="{{ name }}"
+        class="avatar avatar-user rounded-circle border color-border-default">
+    </div>
+  </a>
+  <h1 class="mb-2 lh-condensed overflow-wrap-word">{{ name }}</h1>
+  <p class="mb-3 f4">
+    {{ user.bio }}
+  </p>
 
+  {%- if include.metadata %}
+  <div class="f4">
     {%- if user.name %}
-      <div class="{{ metadata_styles }}">
-        {% octicon mark-github height:20 class:"mr-2 v-align-middle" aria-label:GitHub %}
-        <a href="https://github.com/{{ user.login }}">
-          @{{ user.login }}
-        </a>
-      </div>
+    <div class="{{ metadata_styles }}">
+      {% octicon mark-github height:20 class:"mr-2 v-align-middle" aria-label:GitHub %}
+      <a href="https://github.com/{{ user.login }}">
+        @{{ user.login }}
+      </a>
+    </div>
     {%- endif %}
     {%- if user.email %}
-      <div class="{{ metadata_styles }}">
-        {% octicon mail height:20 class:"mr-2 v-align-middle" aria-label:email %}
-        <a href="mailto:{{ user.email }}">
-          {{ user.email }}
-        </a>
-      </div>
+    <div class="{{ metadata_styles }}">
+      {% octicon mail height:20 class:"mr-2 v-align-middle" aria-label:email %}
+      <a href="mailto:{{ user.email }}">
+        {{ user.email }}
+      </a>
+    </div>
     {%- endif %}
     {%- if user.location %}
-      <div class="{{ metadata_styles }}">
-        {% octicon location height:20 class:"mr-2 v-align-middle" aria-label:Location %}
-        {{ user.location }}
-      </div>
+    <div class="{{ metadata_styles }}">
+      {% octicon location height:20 class:"mr-2 v-align-middle" aria-label:Location %}
+      {{ user.location }}
+    </div>
     {%- endif %}
-
-{%- endif %}
-{%- if site.social_media %}
-{%- include social.html %}
-{%- endif %}
+  </div>
+  {%- endif %}
 </div>