jekyll-theme-profile 0.2.5 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '09860fc508343380e572ecc20d95ebc3e859aebdd475bcfc831f0c02e4d9908d'
-  data.tar.gz: efb7061682176adc3c3612999cbd256a0ec85ccd0bd3614334fa444277c2db1b
+  metadata.gz: b42b9157514de4e533c7776814ec75f36b2c8a472f6f40936f225961b1a86a3a
+  data.tar.gz: fe78c3f01dc66327dc78d44a77921ae2ab391e92a00f73ecc8d8f6fc53c3ec32
 SHA512:
-  metadata.gz: 81f5232bb3b2c523a609cf293f3d17419fc80db59bbc7b7aac9123a65467e06acac31be05667e8cc303825f5d5163dc5779b2308af88db65df43067543e2426f
-  data.tar.gz: afb52edf1dda74ae93d0b28e1910abd4e3f2ca2c9cba34b81dce4909fab9f44e1118902414f67159581fd7025b9e0515189d22c5ce68a7a71fa1e6b2529cb348
+  metadata.gz: eb8c1610a321564f3706fa2769757a290b3e89b37feb288a65f7c943e157637ae07dba6023ee210ab338e5ade3b5858bce6a2cdb6e46f6c92cc559d162d8f8b3
+  data.tar.gz: ddec5868d5b907aaa10991d20a8fc7c8cf7cd6d49df8393fe0cd85c841c0a827310485a250dc6e0bd2fd9c6e19a90effed486d1b332bc7d3c877e6546706705d

data/README.md

@@ -1,4 +1,5 @@
 ---
+layout: default
 permalink: /
 ---
 ![jekyll-theme-profile](screenshot.png)
@@ -38,39 +39,27 @@ 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"
-# image: /assets/img/user-image.jpg # If you don't want to use your github image, set a custom one here
-
-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
-
-repositories:
-  sort_by: stars
-  # sort_by options:
-  #   - pushed
-  #   - stars
-  limit: 24
-  exclude:
-    archived: true
-    forks: true
-    repositories:
-      # - respositories to exclude
-
-social_media:
+ # 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
+#   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
@@ -83,12 +72,61 @@ social_media:
   # 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"
 ```
 
 You can also use this with github acions. Below is a typical worfklow file
@@ -198,33 +236,64 @@ 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
+
+You can even change the background by adding the following to your `_config.yml` file.
+
+```yaml
+# background:
+#   image: /media/background-img.jpg
+#   light:
+#     overlay: rgba(255, 255, 255, 0.5)
+#   dark:
+#     overlay: rgba(0, 0, 0, 0.5)
+```
+
+[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
@@ -234,7 +303,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:
@@ -252,9 +321,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:
@@ -270,18 +351,27 @@ social_media:
   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
+```
+
+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,8 +1,93 @@
 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: /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
+  # 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
+  # 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
@@ -33,32 +118,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
-
-repositories:
-  sort_by: stars
-  # sort_by options:
-  #   - pushed
-  #   - stars
-  limit: 24
-  exclude:
-    archived: true
-    forks: true
-    repositories:
-      # - respositories to exclude

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,37 +25,46 @@
   {%- 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 %}
+  {%- assign bg_image = page.background_image %}
+{%- elsif site.background.image %}
+  {%- assign bg_image = site.background.image %}
 {%- endif %}
 
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!-- HTML Meta Tags -->
- <title>{{ page_title }}</title>
- <meta name="description" content="{{ meta_description }}">
-
- <!-- Opengraph Meta Tags -->
- <meta property="og:url" content="{{ page_url | absolute_url }}">
- <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 }}">
-
- <!-- Twitter Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- <meta property="twitter:domain" content="{{ site.url | replace: 'http://', '' | replace: 'https://', '' | replace: 'www.', '' }}">
- <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 }}">
- {% if site.social_media.twitter %}<meta name="twitter:site" content="@{{ site.social_media.twitter }}">{% endif %}
+  <!-- HTML Meta Tags -->
+  <title>{{ page_title }}</title>
+  <meta name="description" content="{{ meta_description }}">
+
+  <!-- Opengraph Meta Tags -->
+  <meta property="og:url" content="{{ page_url | absolute_url }}">
+  <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="{{ social_image | absolute_url }}">
+
+  <!-- Twitter Meta Tags -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta property="twitter:domain"
+    content="{{ site.url | replace: 'http://', '' | replace: 'https://', '' | replace: 'www.', '' }}">
+  <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="{{ social_image | absolute_url }}">
+  {%- if site.social_media.twitter %}
+  <meta name="twitter:site" content="@{{ site.social_media.twitter }}">
+  {%- endif %}
 
   <link href="{{ '/assets/css/style.css' | relative_url }}" rel="stylesheet" type="text/css">
   <link rel="icon" type="image/x-icon" href="{{ '/assets/img/favicon.ico' | relative_url}}">
@@ -157,4 +166,46 @@
     });
   </script>
 
+{%- if bg_image %}
+{%- 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 {
+      position: relative;
+      background-image: url('{{ bg_image | relative_url }}');
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-attachment: fixed;
+      z-index: -10;
+  }
+  /* Dark mode styles */
+  [data-color-mode='dark'] {
+      --overlay-color: {{ dark_overlay }};
+  }
+  @media(prefers-color-scheme: dark) {
+    [data-color-mode='auto'][data-dark-theme='dark_dimmed'] {
+      --overlay-color: {{ dark_overlay }};
+    }
+  }
+
+  /* Light mode styles */
+  [data-color-mode='light'] {
+      --overlay-color: {{ light_overlay }};
+  }
+
+  @media(prefers-color-scheme: light) {
+    [data-color-mode='auto'][data-light-theme='light'] {
+      --overlay-color: {{ light_overlay }};
+    }
+  }
+</style>
+{%- endif %}
 </head>

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

@@ -16,43 +16,39 @@
 
 {%- 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>
+  <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 %}
-
-    {%- 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>
-    {%- 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>
-    {%- endif %}
-    {%- if user.location %}
-      <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 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>
+  {%- 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>
+  {%- endif %}
+  {%- if user.location %}
+  <div class="{{ metadata_styles }}">
+    {% octicon location height:20 class:"mr-2 v-align-middle" aria-label:Location %}
+    {{ user.location }}
+  </div>
+  {%- endif %}
 </div>
+{%- endif %}