jekyll-theme-profile 1.10.1 → 1.10.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: de52aaf8b68879950d8fe9a1d43268edf0c8fbb5faaf282984a8ad4ba8d232bc
-  data.tar.gz: b5b2e8e74bc7a132356bf77dd2b95e129068d2601cf21655ef085de58061bf75
+  metadata.gz: 7a1d2f9e2a913ba7deee4135f8a164a850828e6614ff37a775e5f4938ad3330f
+  data.tar.gz: ec9bb4bc55e8ffd6038d3baaba11a66ea8c86a21ae24a3e50374a9df229d8820
 SHA512:
-  metadata.gz: 01cc131a4838cacb9d33d47e608275c1578795a2e1c4569975aac68cce236d512946887cb26e6bf98389ffba38af3318b69d9560667354929fe38d0bf86dc81f
-  data.tar.gz: c66094b9eec8689493cb05239ce7cc3e375d27e67af7154068fc4816c8b9a0fd46e7b0214184cd0d1752ef2627f7d673f60652a9e805d98ad08f854e730d427a
+  metadata.gz: 3054ab265121c2c8132d7dee6c483d5092c8bfd07a54397ccc76a961f558291200037699f3f8ae52ec36be38ebeda03e43a3157b2f099d78916ac0265dc66528
+  data.tar.gz: 7fcb2884718ae5ce88847198d116b5175519c0989f6961df1b155810861b42f9a9b4fd4d2016daa37faa102dea137832b5ddb27e6d9f12ea5266fbb626a79dff

data/README.md

@@ -5,7 +5,7 @@
 
 This theme is based on GitHub's primer style. It supports both light and dark modes, and four style options: appbar, sidebar, topbar, and stacked. Setting up is a breeze, as it automatically populates your profile using your GitHub user info. Add custom links like Linktree and share engaging blog posts effortlessly.
 
-## Installation
+## Quickstart
 
 Add this line to your Jekyll site's `Gemfile`:
 
@@ -19,342 +19,7 @@ And add this line to your Jekyll site's `_config.yml`:
 theme: jekyll-theme-profile
 ```
 
-And then execute:
-
-    $ bundle
-
-Or install it yourself as:
-
-    $ gem install jekyll-theme-profile
-
-## Usage
-
-Start with a [sample config](https://github.com/athackst/jekyll-theme-profile/blob/main/demo/_config.yml) that you can copy and customize.
-
-
-You can also use this with github acions. Below is a typical worfklow file
-
-```yaml
-# Sample workflow for building and deploying a Jekyll site to GitHub Pages
-name: Docs
-
-on:
-  # Runs on pushes targeting the default branch
-  push:
-    branches: ["main"]
-
-  # Run on every pull request
-  pull_request:
-    types: [opened, reopened, synchronize ]
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-  schedule:
-    # This will refresh your repositories and other user information every day
-    # * is a special character in YAML so you have to quote this string
-    # Generate from https://crontab.guru/
-    #        ┌───────────── minute (0 - 59)
-    #        │ ┌───────────── hour (0 - 23)
-    #        │ │ ┌───────────── day of the month (1 - 31)
-    #        │ │ │ ┌───────────── month (1 - 12 or JAN-DEC)
-    #        │ │ │ │ ┌───────────── day of the week (0 - 6 or SUN-SAT)
-    #        │ │ │ │ │
-    #        │ │ │ │ │
-    #        │ │ │ │ │
-    #        * * * * *
-    - cron: "0 0 * * *"
-
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
-permissions:
-  contents: read # needed to read your repository
-  pages: write # needed to enable and deploy github pages
-  id-token: write
-
-# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
-# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
-concurrency:
-  group: "pages"
-  cancel-in-progress: false
-
-jobs:
-  # Build job
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Setup Ruby
-        uses: ruby/setup-ruby@v1.152.0
-        with:
-          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
-      - name: Setup Pages
-        id: pages
-        uses: actions/configure-pages@v3
-        with:
-          enablement: true # Enable github pages if it's not
-      - name: Build
-        run: bundle exec jekyll build
-        env:
-          JEKYLL_ENV: production
-          JEKYLL_GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-
-  # Deployment job
-  deploy:
-    if: github.ref == 'refs/heads/main' # Only deploy from the main branch
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    needs: build
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4
-
-```
-
-### Choose your style
-
-Select the default style for your theme by adding `style` to your config file:
-
-```yaml
-style: sidebar # One of "stacked", "sidebar", "topbar", "appbar"
-```
-
-You can also set the style of a particular page by adding `style` to your frontmatter.
-
-```yaml
----
-style: sidebar # One of "stacked", "sidebar", "topbar", "appbar
----
-```
-
-#### [Sidebar](https://www.althack.dev/jekyll-theme-profile/sidebar.html)
-
-![Sidebar image](https://raw.githubusercontent.com/athackst/jekyll-theme-profile/main/demo/media/sidebar-preview.png)
-
-#### [Stacked](https://www.althack.dev/jekyll-theme-profile/stacked.html)
-
-![Stacked image](https://raw.githubusercontent.com/athackst/jekyll-theme-profile/main/demo/media/stacked-preview.png)
-
-#### [Topbar](https://www.althack.dev/jekyll-theme-profile/topbar.html)
-
-![Topbar image](https://raw.githubusercontent.com/athackst/jekyll-theme-profile/main/demo/media/topbar-preview.png)
-
-#### [Appbar](https://www.althack.dev/jekyll-theme-profile/appbar.html)
-
-![Appbar image](https://raw.githubusercontent.com/athackst/jekyll-theme-profile/main/demo/media/appbar-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
-  overlay: rgba(0, 0, 0, 0.5) # Overlay for both light and dark styles
-```
-
-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](https://www.althack.dev/jekyll-theme-profile/page/background)
-
-#### 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"
-```
-
-### Nav
-
-In the `nav` section, you can add navigation links that will show up on every page of your website.
-
-![Nav](https://raw.githubusercontent.com/athackst/jekyll-theme-profile/main/demo/media/nav.png){: .border}
-
-```yaml
-nav:
-  - name: Topbar
-    url: /demo/topbar.html
-  - name: Sidebar
-    url: /demo/sidebar.html
-  - name: Stacked
-    url: /demo/stacked.html
-```
-
-### Links
-
-In the `links` section, you can add links to showcase various pages on the web or your website.
-
-![Links](https://raw.githubusercontent.com/athackst/jekyll-theme-profile/main/demo/media/links.png){: .border}
-
-```yaml
-links:
-  - name: Example full entry
-    url: https://www.example.com
-    thumbnail: /media/icon-topbar.png
-    description: Example description
-  - name: Example entry with url and image
-    url: https://www.example.com
-    thumbnail: /media/icon-sidebar.png
-  - name: Example entry with image
-    thumbnail: /media/icon-stacked.png
-  - name: Example entry with description
-    description: Example Description
-  - name: Example entry with only a name
-```
-
-### Repositories
-
-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](https://raw.githubusercontent.com/athackst/jekyll-theme-profile/main/demo/media/repositories.png){: .border}
-
-```yaml
-repositories:
-  sort_by: stars
-  # sort_by options:
-  #   - pushed
-  #   - stars
-  limit: 24
-  exclude:
-    archived: true
-    forks: true
-    repositories:
-      # - respositories to exclude
-```
-
-### Social media and SEO
-
-#### Setting the social media card
-
-You can set the social media image for your site with the setting
-
-```yaml
-image: /screenshot.jpg
-```
-
-This works on both yaml frontmatter for a page and in the `_config.yml` file.  Page settings will override site settings.
-
-Set the default for posts through the default settings in the `_config.yml` file.
-
-```yaml
-defaults:
-  - scope:
-      path: "" # an empty string here means all files in the project
-      type: "posts"
-    values:
-      layout: "post"
-      permalink: /blog/:year/:month/:day/:title.html
-      image: /assets/img/default.png # The default image used for social and posts.
-      toc: true
-```
-
-#### 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](https://raw.githubusercontent.com/athackst/jekyll-theme-profile/main/demo/media/social-media.png){: .border}
-
-```yaml
-social_media:
-  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
-```
-
-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 timeline
-
-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 paginate installed and more posts than the limit, a `Read more` button will link to the paginated blog post page /blog/index.html.
-
-![Blog](https://raw.githubusercontent.com/athackst/jekyll-theme-profile/main/demo/media/blog.png){: .border}
-
-```yaml
-posts_limit: 3
-```
-
-Additionally, the theme provides a paginate layout you can use.
-
-To use, add `gem jekyll-paginate` to your gemfile and the following lines to your `_config.yml`
-
-```yaml
-paginate: 6
-paginate_path: "/blog/page:num"
-```
-
-And adding a `index.html` page at the `pagenate_path`
-
-```yaml
----
-layout: paginate
-title: My Blog
----
-```
-
-## Custom styles
-
-### Site style
-
-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.
-
-### Page style
-
-You can add css to any page through the `css_style` variable in front matter.
-
-```yaml
----
-css_style: |
-    .Link-btn {
-        background: rgba(0.1, 0.1, 0.1, 0.4);
-        color: #FFFF;
-    }
-    h1 {
-        color: #FFFF;
-    }
----
-
-```
+See the [documentation](https://www.althack.dev/jekyll-theme-profile/docs) for additional details.
 
 ## Contributing
 

data/_config.yml

@@ -4,12 +4,6 @@ title: Jekyll Theme Profile
 description: Theme built with jekyll-theme-profile
 # image: /assets/img/social-preview.png
 # repository: athackst/jekyll-theme-profile
-# base_url: "jekyll-theme-profile"
-
-collections:
-  docs:
-    output: true
-    sort_by: order
 
 defaults:
   - scope:
@@ -22,13 +16,10 @@ defaults:
       toc: true
   - scope:
       path: "" # an empty string here means all files in the project
-      type: "docs"
+      type: "pages"
     values:
-      layout: "docs"
+      layout: "page"
       image: /assets/img/default.png # The default image used for social and posts.
-      index: /docs/index.html
-      permalink: /docs/:path:output_ext
-      toc: true
 
 # ########### Theme settings ###############
 # The style of the website
@@ -36,8 +27,8 @@ style: appbar # One of "stacked", "sidebar", "topbar", "appbar"
 # The user/project avatar.  If not set the avatar of the project owner will be used.
 # user_image: /assets/img/user-image.jpg
 # The themes to use for dark and light
-dark_theme: dark_dimmed
-light_theme: light
+dark_theme: dark # One of dark, dark_dimmed, dark_colorblind, dark_high_contrast, dark_tritanopia
+light_theme: light # One of light, light_colorblind, light_high_contrast, light_tritanopia
 
 repo_info: true # Show the information for the source of this project
 user_metadata: true # Show the metadata associated with the user
@@ -91,36 +82,29 @@ profile_link: true # Show a link to the github profile for the user
 ###################
 # Repositories to show on home page
 repositories:
-  sort_by: stars
-  # sort_by options:
-  #   - pushed
-  #   - stars
+  sort_by: stars #pushed or stars
   limit: 24
   exclude:
     archived: true
     forks: true
     repositories:
-      # - list of respositories to exclude
-
-########################
-# Post timeline
-# posts_limit: 3 # The number of posts to show in home (also can be defined in page)
+      # - list of repositories to exclude
 
 ########################
-# Post pages
+# Post settings
 related_by: "tags or categories"
 
 # ########### Plugin settings ###############
 plugins:
   - jekyll-github-metadata
   - jekyll-octicons
-  - jekyll-relative-links
   - jekyll-seo-tag
   - jekyll-toc
   - jemoji
 
 ####################
 # jekyll-paginate settings
+# Include `gem jekyll-paginate` in your gemfile
 # paginate: 6 # The number of posts to show per page of pagination of blog posts
 # paginate_path: "/blog/page:num"
 # ###################
@@ -130,19 +114,12 @@ plugins:
 # tag_page_dir: tags
 # ####################
 # jekyll-category-pages settings
+# Include `gem jekyll-category-pages` in your gemfile
 # category_path: category
 # category_layout: category_layout.html
 ######################
-# jekyll-relative-links settings
-relative_links:
-  enabled:     true
-  collections: true
 
 # ########### Build settings ###############
 exclude:
   - spec
-  - vendor
-  - .jekyll-cache
-  - _site
-  - node_modules
   - demo

data/_includes/collection-menu.html

@@ -1,53 +1,77 @@
+{%- comment -%}
+  collection-menu.html
+
+  Generates a dropdown menu for a Jekyll collection, grouping items by their "category" front matter.
+  Useful for documentation, guides, or any collection-based navigation.
+
+  Parameters:
+    - collection (defaults to site.docs): The Jekyll collection to display.
+    - name: Display name for the collection header.
+    - index: Optional index page object for the collection (e.g., site.docs_index).
+    - id (default: "collection-menu"): HTML ID for the menu container (useful when multiple menus are present).
+
+  Example Usage:
+    {% include collection-menu.html collection=site.docs name="Documentation" index=site.docs_index id="docs-menu" %}
+{%- endcomment -%}
+
 {%- assign collection = include.collection | default: site.docs %}
 {%- assign collection_name = include.name %}
 {%- assign collection_index = include.index %}
+{%- assign collection_id = include.id | default: "collection-menu" %}
+{% comment %}computed variables{% endcomment %}
 {%- assign index_url = collection_index.url %}
 {%- assign collection_without_index = collection | where_exp: "item", "item.url != index_url" %}
 
-<div class="Overlay-backdrop--side Overlay-backdrop--placement-left" data-modal-dialog-overlay>
-    <modal-dialog class="Overlay Overlay--width-medium Overlay--motion-slideDown height-fit height-full">
-        <div class="Overlay-headerContentWrap d-flex flex-row py-3 px-2 border-bottom">
-            <div class="Overlay-titleWrap d-flex flex-1">
-                <div tabindex="-1" class="d-flex flex-1 ml-3" id="github-logo">
-                    {% if collection_index %}
+<script>
+    $(document).ready(function () {
+        const $menu = $("#{{ collection_id }}");
+        const $closeButton = $(".close-menu");
+
+        if ($menu.length && $closeButton.length) {
+            $closeButton.click(() => $menu.removeAttr("open")); // Properly closes the dropdown
+        }
+    });
+</script>
+
+<details class="details-reset details-overlay" id="{{ collection_id }}">
+    <summary class="btn btn-invisible" aria-haspopup="true">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+        </svg>
+    </summary>
+    <details-menu class="SelectMenu" role="menu">
+        <div class="SelectMenu-modal">
+
+            <div class="SelectMenu-header">
+                <div tabindex="-1" class="SelectMenu-title" id="github-logo">
+                    {%- if collection_index %}
                     <a href="{{ collection_index.url | relative_url }}"
                         class="AppHeader-link d-flex flex-items-center no-underline mr-3">
                         <span class="h3 color-fg-default text-bold">{{ collection_name }}</span>
                     </a>
-                    {% else %}
+                    {%- else %}
                     <div class="AppHeader-link d-flex flex-items-center no-underline mr-3">
                         <span class="h3 color-fg-default text-bold">{{ collection_name }}</span>
                     </div>
-                    {% endif %}
+                    {%- endif %}
+                </div>
+                <div class="d-flex flex-justify-end">
+                    <button class="SelectMenu-closeButton close-menu" type="button">
+                        {% octicon x height: 16 %}
+                    </button>
                 </div>
             </div>
-            <div class="Overlay-actionWrap d-flex flex-justify-end">
-                <button id="close-contents-btn" class="close-button Overlay-closeButton">
-                    {% octicon x height: 16 %}
-                </button>
-            </div>
-        </div>
-        <div class="Overlay-body d-flex flex-column p-2">
-            <ul data-overflow-nav class="ActionList border-0">
+            <div class="SideNav border overflow-y-auto">
                 {%- assign collection_categories = collection_without_index | group_by: "category" %}
                 {%- for category in collection_categories %}
                 {%- assign category_name = category.name | default: collection_name %}
-                <li class="ActionListItem no-underline h4">{{ category_name | capitalize }}
-                    <ul>
-                        {%- for nav_item in category.items %}
-                        {%- if nav_item.url != collection_index %}
-                        <a href="{{ nav_item.url | relative_url }}" class="ActionListItem-label no-underline">
-                            <li class="menu-item ActionList-item border-0" {% if page.url==nav_item.url %}
-                                aria-current="page" {% endif %}>
-                                {{ nav_item.title }}
-                            </li>
-                        </a>
-                        {%- endif %}
-                        {%- endfor %}
-                    </ul>
-                </li>
+                <div class="SideNav-item no-underline h4">{{ category_name | capitalize }}</div>
+                {%- for nav_item in category.items %}
+                <a href="{{ nav_item.url }}" class="SideNav-item" role="menuitem" {% if page.url contains nav_item.url
+                    %} aria-current="page" {% endif %}>{{ nav_item.title }}</a>
+                {%- endfor %}
                 {%- endfor %}
-            </ul>
+            </div>
         </div>
-    </modal-dialog>
-</div>
+    </details-menu>
+</details>

data/_includes/custom-colors.html

@@ -0,0 +1,99 @@
+{%- assign bg_image = page.background.image | default: site.background.image %}
+{%- assign dark_overlay = page.background.dark.overlay | default: page.background.overlay | default: site.background.dark.overlay | default: site.background.overlay %}
+{%- assign light_overlay = page.background.light.overlay | default: page.background.overlay | default: site.background.light.overlay | default: site.background.overlay %}
+{%- assign header_color = page.header.color | default: site.header.color %}
+{%- assign header_text = page.header.text | default: site.header.text %}
+{%- assign header_accent = page.header.accent | default: site.header.accent %}
+{%- assign header_image = page.header.image | default: site.header.image %}
+{%- assign header_overlay = page.header.overlay | default: site.header.overlay %}
+<style>
+{%- if bg_image %}
+body {
+    position: relative;
+    background-image: url('{{ bg_image | relative_url }}');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    z-index: -10;
+}
+{%- 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 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 header_text %}
+.Header {
+    --color-header-logo: {{ header_text }};
+    --color-fg-muted: {{ header_text }};
+}
+{%- endif %}
+{%- if header_accent %}
+.Header {
+    --color-header-text: {{ header_accent }};
+    --color-accent-fg: {{ header_accent }};
+}
+{%- endif %}
+{%- if header_image %}
+.Header {
+    position: relative;
+    background-image: url('{{ header_image | relative_url }}');
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+{%- endif %}
+{%- if header_overlay %}
+.Header::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  background-color: {{ header_overlay }}; 
+}
+{%- endif %}
+</style>