jekyll-theme-profile 1.2.0 → 1.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b2f22b92e41c06a56c536e5d99441caf1cf9cb125a6fdff6aacc3bcf245a087e
-  data.tar.gz: 68fcc586bc613771d69843c787fbea7c2243fd91a1200c26ee5907b18de63fcc
+  metadata.gz: ef3c28397bfe7d16a383f40725903daf4c80d615c796d92912b913ed072cf80d
+  data.tar.gz: 9540fd8e91c9d5c8650f66ce02fd8d52e72c691d50778662c33d89cf1e2b2931
 SHA512:
-  metadata.gz: 2be63f78cf84156ef8553aa300119e0dcc73be0f084717bf9886bd866f4b6f10d18c12741e53e1ec2bc2a8d7e1d02c33bdb2f27522f1b106f38ff7907fc4be4b
-  data.tar.gz: 42c51de2313fc240a3904baa32f7e22e012f536cc4cd220c162fec2bb0533fedd4a2d6d5a995f5066922ff8162a8bb7b61e93aaea429399945fe8a9553add580
+  metadata.gz: 691f10895f2fa78022374e06d1f025ac53bf2518c16227ae4b40d67fb8e8167239a05a31791fd685766f112e11252635cea32354a3af9ae084a4e236ef084197
+  data.tar.gz: 2eec4d50cb3740b3b6ee4c08f4c987c8ca165dce646d658d7ee8a8df42589f45dae15bd3cd26a7e0a91d1a927a14c9c7d0dda97dfdafce2c5a95916128bba7e3

data/README.md

@@ -255,16 +255,43 @@ style: sidebar # One of "stacked", "sidebar", "topbar"
 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)
+background:
+  image: /media/background-img.jpg
+  overlay: rgba(0, 0, 0, 0.5) # Overlay for both light and dark styles
+  light:
+    overlay: rgba(255, 255, 255, 0.5)
+  dark:
+    overlay: rgba(0, 0, 0, 0.5)
+```
+
+or
+
+```yaml
+background:
+  image: /media/background-img.jpg
+  light: # custom overlay for light and dark styles
+    overlay: rgba(255, 255, 255, 0.5)
+  dark:
+    overlay: rgba(0, 0, 0, 0.5)
 ```
 
 [Example page](/test/page/background.md)
 
+#### Header
+
+You can change the header color by adding the following to your `_config.yml` file
+
+```yaml
+header:
+  color: "#4051b5"
+  text: "rgba(255,255,255,0.7)"
+  accent: "#ffffff"
+```
+
+#### Custom styles
+
+You can override any style with styles defined in `/assets/css/style.css` or `/assets/css/style.scss` files.  This is to support config based styling which needs jekyll variables.
+
 ### Nav
 
 In the `nav` section, you can add navigation links that will show up on every page of your website.

data/_config.yml

@@ -6,11 +6,17 @@ user_image: /media/user-image.jpg
 # Optional custom background image and overlay
 # background:
 #   image: /media/background-img.jpg
+#   overlay: rgba(0, 0, 0, 0.7)
 #   light:
 #     overlay: rgba(255, 255, 255, 0.5)
 #   dark:
 #     overlay: rgba(0, 0, 0, 0.5)
-# color: white # The color for the profile card
+
+# Optional custom header colors
+# header:
+#   color: "#4051b5"
+#   text: "rgba(255,255,255,0.7)"
+#   accent: "#ffffff"
 
 repo_info: true # Show the information for the source of this project
 metadata: false # Show the metadata associated with the user
@@ -19,29 +25,29 @@ 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
+# 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
@@ -90,6 +96,20 @@ 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"
 
+markdown: kramdown
+highlighter: rouge
+# kramdown:
+#   input: GFM
+#   syntax_highlighter: rouge
+#   syntax_highlighter_opts: # Rouge Options › https://github.com/jneen/rouge#full-options
+#     css_class: highlight
+#     # default_lang: console
+#     span:
+#       line_numbers: false
+#     block:
+#       line_numbers: true
+#       start_line: 1
+
 # ============= general settings for the theme ===============
 plugins:
   - jekyll-github-metadata
@@ -120,5 +140,3 @@ exclude:
   - .deprecated
   - .github
   - "*.gem"
-
-markdown: kramdown

data/_includes/header.html

@@ -7,37 +7,14 @@
   {%- assign page_url = page.url %}
 {%- endif %}
 
-{%- if page.title %}
-  {%- assign page_title = page.title %}
-{%- elsif site.title %}
-  {%- assign page_title = site.title %}
-{%- else %}
-  {%- assign page_title = user.name %}
-{%- endif %}
-
-{%- if page.description %}
-  {%- assign meta_description = page.description %}
-{%- elsif page.path contains '_posts' %}
-  {%- assign meta_description = page.content | strip_html | strip_newlines | xml_escape | truncate: 300 %}
-{%- elsif site.description %}
-  {%- assign meta_description = site.description %}
-{%- else %}
-  {%- assign meta_description = user.bio | strip_html | strip_newlines | xml_escape | truncate: 300 %}
-{%- endif %}
-
-{%- if page.social_image %}
-  {%- assign social_image = page.social_image %}
-{%- elsif site.social_image %}
-  {%- assign social_image = site.social_image %}
-{%- else %}
-  {% 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 %}
+{%- assign page_title = page.title | default: site.title | default: user.name | default: user.login %}
+{%- if page.path contains '_posts' %}
+  {%- assign post_description = page.content | strip_html | strip_newlines | xml_escape | truncate: 300 %}
 {%- endif %}
+{%- assign user_bio = user.bio | strip_html | strip_newlines | xml_escape | truncate: 300 %}
+{%- assign meta_description = page.description | default: post_description | default: site_description | default: user_bio %}
+{%- assign social_image = page.social_image | default: site.social_image | default: user.avatar_url %}
+{%- assign bg_image = page.background_image | default: site.background.image | default: null %}
 
 <head>
   <meta charset="utf-8">
@@ -50,7 +27,7 @@
   <!-- 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:title" content="{{ page_title }}">
   <meta property="og:description" content="{{ meta_description }}">
   <meta property="og:image" content="{{ social_image | absolute_url }}">
 
@@ -66,9 +43,10 @@
   <meta name="twitter:site" content="@{{ site.social_media.twitter }}">
   {%- endif %}
 
+  <link href="{{ '/assets/css/theme.css' | relative_url }}" rel="stylesheet" type="text/css">
   <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}}">
-  <link rel="canonical" href="{{ page.url | absoulte_url }}">
+  <link rel="canonical" href="{{ page.url | absolute_url }}">
 
 
   {%- if site.analytics.provider == 'google' %}
@@ -168,16 +146,6 @@
   </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 %}
-{%- endif %}
-{%- if site.background.light.overlay %}
-  {%- assign light_overlay = site.background.light.overlay %}
-{%- endif %}
 <style>
   body {
       position: relative;
@@ -187,26 +155,6 @@
       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/masthead.html

@@ -1,18 +1,7 @@
 {%- assign user = site.github.owner %}
 
-{%- if site.title %}
-{%- assign name = site.title %}
-{%- elsif user.name %}
-{%- assign name = user.name %}
-{%- else %}
-{%- assign name = user.login %}
-{%- endif %}
-
-{%- if site.user_image %}
-{%- assign user_img = site.user_image %}
-{%- else %}
-{%- assign user_img = user.avatar_url %}
-{%- endif %}
+{%- assign name = site.title | default: user.name | default: user.login %}
+{%- assign user_img = site.user_image | default: user.avatar_url %}
 
 {%- assign metadata_styles = 'd-flex flex-items-center flex-justify-center mb-3' %}
 <div class="Masthead">

data/_includes/posts.html

@@ -1,7 +1,4 @@
-{%- assign post_limit = 3 %}
-{%- if include.limit %}
-  {%- assign post_limit = include.limit %}
-{%- endif %}
+{%- assign post_limit = include.limit | default: 3 %}
 
 <div class="gutter-condensed mb-4">
   {%- for post in site.posts limit: {{post_limit}} %}

data/_includes/toggle.html

@@ -1,4 +1,4 @@
 <div class="d-flex flex-items-center">
-    <button id="theme-toggle" class="btn btn-sm mr-2 tooltipped tooltipped-se" aria-label="Color mode" type="button"><span id="theme-icon"
+    <button id="theme-toggle" class="btn btn-octicon mr-2 tooltipped tooltipped-se" aria-label="Color mode" type="button"><span id="theme-icon"
             class="octicon octicon-moon-24"></span></button>
 </div>

data/_layouts/default.html

@@ -1,36 +1,11 @@
 {%- assign user = site.github.owner %}
 
-{%- if page.style %}
-{%- assign style = page.style %}
-{%- else %}
-{%- assign style = site.style %}
-{%- endif %}
+{%- assign style = page.style | default: site.style %}
+{%- assign breadcrumbs = page.breadcrumbs | default: false %}
+{%- assign name = site.title | default: user.name | default: user.login %}
+{%- assign user_img = site.user_image | default: user.avatar_url %}
+{%- assign metadata = site.metadata | default: true %}
 
-{%- if page.breadcrumbs %}
-{%- assign breadcrumbs = page.breadcrumbs %}
-{%- else %}
-{%- assign breadcrumbs = false %}
-{%- endif %}
-
-{%- if site.title %}
-{%- assign name = site.title %}
-{%- elsif user.name %}
-{%- assign name = user.name %}
-{%- else %}
-{%- assign name = user.login %}
-{%- endif %}
-
-{%- if site.user_image %}
-{%- assign user_img = site.user_image %}
-{%- else %}
-{%- assign user_img = user.avatar_url %}
-{%- endif %}
-
-{%- if site.metadata == true or site.metadata == false %}
-{%- assign metadata = site.metadata %}
-{%- else %}
-{%- assign metadata = true %}
-{%- endif %}
 
 <!doctype html>
 <html lang="en" class="min-height-full min-width" data-color-mode="auto" data-light-theme="light"
@@ -40,50 +15,50 @@
 
 <body class="min-height-full">
     {%- if style == 'stacked' %}
-    <div class="container-lg p-responsive min-height-full">
-        <div class="d-flex flex-justify-end pt-2">
-            {%- include toggle.html %}
-        </div>
-        <div class="Profile text-center py-3 border-bottom">
+    <div class="container-lg min-height-full">
+        <div class="Profile text-center">
             {%- include masthead.html metadata=metadata %}
             {%- if site.repo_info %}
-            <div class="my-2">
+            <div class="py-2">
                 {% include mini-repo-info-card.html class="Box-row-link" %}
             </div>
             {%- endif %}
             {%- if site.social_media %}
-            <div class="my-2">
+            <div class="py-2 px-2">
                 {%- include social.html %}
             </div>
             {%- endif %}
+            {%- if site.nav %}
+            <nav class="Header d-flex flex-column flex-md-row flex-justify-center">
+                {%- include nav.html %}
+            </nav>
+            {%- endif %}
         </div>
-        {%- if site.nav %}
-        <nav class="Header d-flex flex-column flex-md-row flex-justify-center">
-            {%- include nav.html %}
-        </nav>
-        {%- endif %}
         <div class="color-bg-default">
-            {%- if breadcrumbs %}
-            <div class="p-3">
+            <div class="d-flex p-2">
+                {%- if breadcrumbs %}
                 {%- include breadcrumbs.html %}
+                {%- endif %}
+                <div class="flex-1">
+                </div>
+                {% include toggle.html %}
             </div>
-            {%- endif %}
             <div class="p-responsive markdown-body ">
-            {{ content }}
+                {{ content }}
             </div>
         </div>
     </div>
     {%- elsif style == 'sidebar' %}
     <div class="container-xl d-lg-flex min-height-full">
-        <div class="Profile col-lg-4 border-gray-light px-4 py-6 text-center">
+        <div class="Profile col-lg-4 border-gray-light pt-6 text-center">
             {%- include masthead.html metadata=metadata %}
             {%- if site.repo_info %}
-            <div class="my-2">
+            <div class="py-2">
                 {% include mini-repo-info-card.html class="Box-row-link" %}
             </div>
             {%- endif %}
             {%- if site.social_media %}
-            <div class="my-2">
+            <div class="py-2 px-2">
                 {%- include social.html %}
             </div>
             {%- endif %}
@@ -118,7 +93,7 @@
                         {% octicon mark-github height:32 %}
                     </a>
                 </div>
-                <div class="Header-item Header-item--full">{{ name }}</div>
+                <div class="Header-item Header-link Header-item--full">{{ name }}</div>
                 {%- if site.social_media %}
                 <div class="Header-item hide-md hide-sm">
                     {%- include social.html %}
@@ -129,9 +104,6 @@
                     {% include mini-repo-info-card.html class="Header-link" %}
                 </div>
                 {% endif %}
-                <div class="Header-item mr-3">
-                {% include toggle.html %}
-                </div>
                 <div class="Header-item mr-0">
                     <a href="https://github.com/{{ user.login }}" class="Header-link d-flex flex-items-center">
                         <img class="avatar img-cover" height="32" width="32" alt="{{ name }}"
@@ -148,10 +120,15 @@
             {%- endif %}
         </div>
     </div>
-    <div class="container-lg p-3 color-bg-default flex-1">
-        {%- if breadcrumbs %}
-        {%- include breadcrumbs.html %}
-        {%- endif %}
+    <div class="container-xl p-3 color-bg-default flex-1">
+        <div class="d-flex pb-2">
+            {%- if breadcrumbs %}
+            {%- include breadcrumbs.html %}
+            {%- endif %}
+            <div class="flex-1">
+            </div>
+            {% include toggle.html %}
+        </div>
         <div class="p-responsive markdown-body">
             {{ content }}
         </div>

data/_layouts/home.html

@@ -3,11 +3,7 @@ layout: default
 ---
 <div class="py-3">
   {%- assign posts_total = site.posts | size %}
-  {%- if site.posts_limit %}
-  {%- assign posts_limit = site.posts_limit %}
-  {%- else %}
-  {%- assign posts_limit = posts_total %}
-  {%- endif %}
+  {%- assign posts_limit = site.posts_limit | default: posts_total %}
 
   {%- unless content == "" %}
   {{ content }}

data/_sass/_highlight-syntax.scss

@@ -1,4 +1,4 @@
-.highlight  { width: 100%; overflow: auto; background-color: var(--color-canvas-inset) !important; padding: 8px; }
+.highlight  { overflow: auto; background-color: var(--color-canvas-inset) !important; padding: 8px; }
 .highlight .c { color: #999988; font-style: italic } /* Comment */
 .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
 .highlight .k { font-weight: bold } /* Keyword */
@@ -64,3 +64,33 @@
 .highlight .lineno {-webkit-user-select: none;-moz-user-select: none; -o-user-select: none;}
 .lineno::-moz-selection {background-color: transparent;} /* Mozilla specific */
 .lineno::selection {background-color: transparent;} /* Other major browsers */
+.lineno { opacity: 0.5;}
+
+.highlight table {
+    margin: inherit;
+}
+
+.highlight table tr {
+    background-color: inherit;
+    border-top: inherit;
+}
+
+.highlight table td {
+    padding: inherit;
+    border: inherit;
+}
+
+.highlight pre {
+    background-color: inherit !important;
+    border-radius: 0px !important;
+}
+
+.highlight code pre {
+    padding: 0px !important;
+    background-color: inherit;
+}
+
+.highlight code .gutter,
+.highlight code .rouge-gutter {
+    padding-right: 16px !important;
+}

data/assets/css/style.scss

@@ -1,14 +1,2 @@
 ---
 ---
-@import "jekyll-theme-profile";
-
-{%- if site.color %}
-{%- assign profile_color=site.color %}
-.Profile {
-    color: {{ profile_color }};
-}
-
-.Profile a {
-    color: {{ profile_color }};
-}
-{%- endif %}

data/assets/css/theme.scss

@@ -0,0 +1,89 @@
+---
+---
+{%- if site.background.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 %}
+{%- endif %}
+{%- if site.background.light.overlay %}
+  {%- assign light_overlay = site.background.light.overlay %}
+{%- endif %}
+
+{%- if dark_overlay %}
+/* 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 }};
+}
+}
+{%- endif %}
+
+{%- if light_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 }};
+}
+}
+{%- endif %}
+
+{%- if site.header.color %}
+
+{%- assign header_color=site.header.color %}
+.Header {
+    --color-header-bg: {{ header_color }};
+}
+/* Light mode styles */
+[data-color-mode='light'] {
+    --color-header-bg: {{ header_color }};
+}
+
+@media(prefers-color-scheme: light) {
+[data-color-mode='auto'][data-light-theme='light'] {
+    --color-header-bg: {{ header_color }};
+}
+}
+/* Dark mode styles */
+[data-color-mode='dark'] {
+    --color-header-bg: {{ header_color }};
+}
+@media(prefers-color-scheme: dark) {
+[data-color-mode='auto'][data-dark-theme='dark_dimmed'] {
+    --color-header-bg: {{ header_color }};
+}
+}
+{%- endif %}
+
+{%- if site.header.text %}
+.Header {
+    --color-header-logo: {{ site.header.text }};
+}
+{%- endif %}
+
+{%- if site.header.accent %}
+.Header {
+    --color-header-text: {{ site.header.accent }};
+}
+{%- endif %}
+
+:root{
+    --color-profile-text: var(--color-fg-default);
+    --color-profile-accent: var(--color-accent-fg);
+    --color-profile-bg: var(--color-canvas-default);
+}
+
+@import "jekyll-theme-profile";
+
+.Profile {
+    background-color: var(--color-profile-bg);
+    color: var(--color-profile-text);
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-profile
 version: !ruby/object:Gem::Version
-  version: 1.2.0
+  version: 1.3.1
 platform: ruby
 authors:
 - Allison Thackston
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-08-14 00:00:00.000000000 Z
+date: 2023-09-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -135,6 +135,7 @@ files:
 - _sass/jekyll-theme-profile.scss
 - assets/blog/index.html
 - assets/css/style.scss
+- assets/css/theme.scss
 - assets/img/favicon.ico
 homepage: https://www.althack.dev/jekyll-theme-profile
 licenses:
@@ -148,7 +149,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 2.7.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="