jekyll-theme-profile 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 0e9004b5e45f10d03b0219c115b7eacab47a1e909a946823d474f8aaad1f081c
+  data.tar.gz: a142e0d5f800dfdd3a29bbe4f3dd50c992ee9a7a11bf00897e6b7f2a1ef1f251
+SHA512:
+  metadata.gz: 866b3a812f55767b4201d1bb394148dfc10df3d984d46596d20dc99e8810fa9017273a62511e70ef4783efaed7d23ce07941c3417361dbebdf2cf8eeb92a9ab1
+  data.tar.gz: 4ebf9e33034cc64a66c8a505568a8f55a9297f4b3b9857f7fb1f16b7d5f14f56f9515ea40f59204152bc130f3910a8690dc04290f32bbd6f00e766aa8a182783

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Allison Thackston
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,228 @@
+---
+layout: page
+permalink: index.html
+---
+![jekyll-theme-profile](screenshot.png)
+
+# jekyll-theme-profile
+{:.no_toc}
+
+Meet "jekyll-theme-profile" – your ultimate Jekyll theme, based on GitHub's primer style. With both light and dark modes, and three stylish options: sidebar, topbar, and stacked, it's all about personalization. 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. Get ready to rock your online presence with this user-friendly and charming theme, making Jekyll and GitHub Pages a joy to use!
+
+1. TOC
+{:toc}
+
+## Installation
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "jekyll-theme-profile"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: jekyll-theme-profile
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install jekyll-theme-profile
+
+## Usage
+
+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)
+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:
+  # 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
+  # twitter: your_username
+  # unsplash: your_username
+  # vk: your_username
+  # vscode: your_username
+  # youtube: your_username
+
+```
+
+### 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"
+```
+
+You can also set the style of a particular page by adding `style` to your frontmatter.
+
+```yaml
+---
+style: sidebar # One of "stacked", "sidebar", "topbar"
+---
+```
+
+#### [Sidebar](/home-sidebar.md)
+
+![Sidebar image](/assets/img/sidebar-preview.png)
+
+#### [Stacked](/home-stacked.md)
+
+![Stacked image](/assets/img/stacked-preview.png)
+
+#### [Topbar](/home-topbar.md)
+
+![Topbar image](/assets/img/topbar-preview.png)
+
+### 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}
+
+```yaml
+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
+
+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}
+
+```yaml
+repositories:
+  sort_by: stars
+  # sort_by options:
+  #   - pushed
+  #   - stars
+  limit: 24
+  exclude:
+    archived: true
+    forks: true
+    repositories:
+      # - respositories to exclude
+```
+
+### Social media
+
+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}
+
+```yaml
+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
+  twitter: your_username
+  unsplash: your_username
+  vk: your_username
+  vscode: your_username
+  youtube: your_username
+```
+
+### 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}
+
+```yaml
+posts_limit: 3
+```
+
+Additionally, the theme provides a paginate layout you can use.  By default, the theme serves pagination from `/assets/blog/index.html`.
+
+But you can adjust the source by updating the config
+
+```yaml
+paginate: 6
+paginate_path: "/assets/blog/page:num"
+```
+
+And adding a `index.html` page at the `pagenate_path`
+
+```yaml
+---
+layout: paginate
+title: My Blog
+---
+```
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/athackst/jekyll-theme-profile. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](https://www.contributor-covenant.org/) code of conduct.
+
+See [Contributing](/CONTRIBUTING.md) for more information on contributing to this theme.
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/_config.yml

@@ -0,0 +1,65 @@
+repository: athackst/jekyll-theme-profile
+url: https://www.althack.dev
+baseurl: /jekyll-theme-profile
+style: topbar # One of "stacked", "sidebar", "topbar"
+image: /assets/img/user-image.jpg
+
+plugins:
+  - jekyll-github-metadata
+  - jekyll-octicons
+  - jekyll-paginate
+  - jekyll-seo-tag
+  - jemoji
+
+defaults:
+  - scope:
+      path: "" # an empty string here means all files in the project
+      type: "posts"
+    values:
+      layout: "post"
+      breadcrumbs: true
+      permalink: /blog/:year/:month/:day/:title.html
+
+exclude:
+  - "Gemfile"
+  - "Gemfile.lock"
+  - "node_modules"
+  - "vendor/bundle/"
+  - "vendor/cache/"
+  - "vendor/gems/"
+  - "vendor/ruby/"
+  - .vscode
+  - .devcontainer
+  - .deprecated
+  - .github
+  - "*.gem"
+
+paginate: 6
+paginate_path: "/assets/blog/page:num"
+
+markdown: kramdown
+
+posts_limit: 3
+
+links:
+  - name: Example page with topbar
+    web_url: /page-topbar
+    image_url: /assets/img/icon-topbar.png
+  - name: Example page with sidebar
+    web_url: /page-sidebar
+    image_url: /assets/img/icon-sidebar.png
+  - name: Example page with header stacked
+    web_url: /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/footer.html

@@ -0,0 +1,3 @@
+<footer>
+  
+</footer>

data/_includes/header.html

@@ -0,0 +1,121 @@
+{%- assign user = site.github.owner %}
+{%- if page.path contains '_posts' %}
+{%- assign page_title = page.title %}
+{%- assign meta_description = page.content | strip_html | strip_newlines | xml_escape | truncate: 300 %}
+{%- elsif site.title %}
+{%- assign page_title = site.title %}
+{%- assign meta_description = site.description %}
+{%- else %}
+{%- assign page_title = user.name %}
+{%- assign meta_description = user.bio | strip_html | strip_newlines | xml_escape | truncate: 300 %}
+{%- endif %}
+<head>
+  <meta charset="utf-8">
+  <title>{{ page_title }}</title>
+  <meta name="description" content="{{ meta_description }}" />
+  <meta property="og:title" content="{{ user.name }}" />
+  <meta property="og:image" content="{%- if page.image %}{{ page.image }}{%- else %}{{ user.avatar_url }}{%- endif %}" />
+  <meta property="og:description" content="{{ meta_description }}" />
+  <meta property="og:type" content="profile" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <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">
+  <link rel="canonical" href="{{ site.url }}{{ site.baseurl }}{{ page.url }}">
+
+
+  {%- if site.analytics.provider == 'google' %}
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.analytics.property }}"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+
+    gtag('config', '{{ site.analytics.property }}');
+  </script>
+  {%- endif %}
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      var themeToggle = document.getElementById('theme-toggle');
+      var themeIcon = document.getElementById('theme-icon');
+      var htmlElement = document.getElementsByTagName('html')[0];
+
+      function getCurrentMode() {
+        return htmlElement.getAttribute('data-color-mode');
+      }
+
+      function getModeFromCookie() {
+        var cookieValue = getCookie('colorMode');
+        if (cookieValue !== null && (cookieValue === 'auto' || cookieValue === 'dark' || cookieValue === 'light')) {
+          return cookieValue;
+        } else {
+          // Default to 'auto' mode if the cookie is not set or has an invalid value
+          return 'auto';
+        }
+      }
+
+      function setCookie(name, value, days) {
+        var expires = "";
+        if (days) {
+          var date = new Date();
+          date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+          expires = "; expires=" + date.toUTCString();
+        }
+        document.cookie = name + "=" + (value || "") + expires + "; path=/";
+      }
+
+      function getCookie(name) {
+        var nameEQ = name + "=";
+        var ca = document.cookie.split(';');
+        for (var i = 0; i < ca.length; i++) {
+          var c = ca[i];
+          while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+          if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
+        }
+        return null;
+      }
+
+      function getNextMode() {
+        var currentMode = getCurrentMode();
+        var nextMode;
+        if (currentMode === 'auto') {
+          nextMode = 'dark';
+        } else if (currentMode === 'dark') {
+          nextMode = 'light'
+        } else {
+          nextMode = 'auto'
+        }
+        return nextMode;
+      }
+
+      function updateTheme(nextMode) {
+        htmlElement.setAttribute('data-color-mode', nextMode);
+        updateThemeIcon(nextMode);
+        setCookie('colorMode', nextMode, 365); // Save the preference for 365 days
+      }
+
+      function updateThemeIcon(nextMode) {
+        if (nextMode === 'dark') {
+          nextIcon = 'moon';
+        } else if (nextMode === 'light') {
+          nextIcon = 'sun'
+        } else {
+          nextIcon = 'zap';
+        }
+        // Set the span to the themeIcon class
+        themeIcon.classList = "octicon octicon-" + nextIcon + "-24";
+      }
+
+      themeToggle.addEventListener('click', function () {
+        updateTheme(getNextMode());
+        // updateThemeIcon(getNextMode());
+      });
+
+      // Initialize the theme icon based on the initial state
+      // updateThemeIcon(getModeFromCookie());
+      updateTheme(getModeFromCookie());
+    });
+  </script>
+
+</head>

data/_includes/link-card.html

@@ -0,0 +1,38 @@
+{%- if link.web_url %}
+<a href="{{ link.web_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"
+        class="rounded-1 box-shadow-none img-contain float-left" alt="{{ link.name }}">
+      {%- endif %}
+    </div>
+    <div class="flex-auto p-2">
+      <p class="f3 lh-condensed text-center link-gray-dark mb-0">{{ link.name }}</p>
+      {%- if link.description %}
+      <p class="f5 text-gray text-center mb-0 mt-1">{{ link.description }}</p>
+      {%- endif %}
+    </div>
+    <div class="avatar-7"></div>
+  </div>
+</a>
+{%- else %}
+<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"
+        class="rounded-1 box-shadow-none img-contain float-left" alt="{{ link.name }}">
+      {%- endif %}
+    </div>
+    <div class="flex-auto">
+    <p class="f3 lh-condensed text-center mt-1">{{ link.name }}</p>
+    {%- if link.description %}
+    <p class="f5 text-gray text-center mt-1">{{ link.description }}</p>
+    {%- endif %}
+    </div>
+    <div class="avatar-7"></div>
+  </div>
+</div>
+{%- endif %}

data/_includes/links.html

@@ -0,0 +1,7 @@
+<div class="d-flex flex-wrap gutter-condensed mb-4">
+  {%- for link in site.links %}
+    <div class="col-12 mb-3">
+      {%- include link-card.html %}
+    </div>
+  {%- endfor %}
+</div>

data/_includes/masthead.html

@@ -0,0 +1,58 @@
+{%- 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.image %}
+{%- assign user_img = site.image %}
+{%- else %}
+{%- assign user_img = user.avatar_url %}
+{%- 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">{{ 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>

data/_includes/nav.html

@@ -0,0 +1,53 @@
+<div class="f5 d-flex">
+    {%- if include.breadcrumbs %}
+    <div class="d-flex flex-items-center">
+        <nav aria-label="Breadcrumb">
+            <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_crumb = crumb | prepend: "assets/" | append: "/" %}
+                    {%- assign asset_url = url | append: asset_crumb %}
+                    {%- assign isa_asset = site.pages | where: "url", asset_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 %}
+
+                    {%- if page.url == url %}
+                    <li class="breadcrumb-item breadcrumb-item-selected" aria-current="page">
+                        <a href="{{ page.url | relative_url }}">{{ nice_crumb }}</a>
+                    </li>
+                    {%- elsif isa_page or isa_post %}
+                    <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>
+    {%- endif %}
+    <div class="flex-1">
+    </div>
+    <div>
+        <button id="theme-toggle" class="btn btn-sm mr-2" type="button"><span id="theme-icon"
+                class="octicon octicon-moon-24"></span></button>
+    </div>
+</div>

data/_includes/post-card.html

@@ -0,0 +1,15 @@
+<!-- <div class="height-full text-left border border-gray-light rounded-1 p-3"> -->
+  <!-- <div class="d-flex flex-justify-between flex-items-start mb-1"> -->
+<div class="TimelineItem">
+  <div class="TimelineItem-badge">{% octicon comment height:16 %}</div>
+  <div class="TimelinItem-body">
+    <span class="f3 lh-condensed mb-1">
+      <a href="{{ post.url | relative_url }}">
+        {{ post.title }}
+      </a>
+    </span>
+    <!-- </div> -->
+    <div class="text-gray mb-2 ws-normal">{{ post.date | date: "%b %d, %Y"}}</div>
+    <div class="summary"> {{ post.excerpt }}</div>
+  </div>
+</div>

data/_includes/posts.html

@@ -0,0 +1,10 @@
+{%- assign post_limit = 3 %}
+{%- if include.limit %}
+  {%- assign post_limit = include.limit %}
+{%- endif %}
+
+<div class="gutter-condensed mb-4">
+  {%- for post in site.posts limit: {{post_limit}} %}
+      {%- include post-card.html %}
+  {%- endfor %}
+</div>

data/_includes/repo-card.html

@@ -0,0 +1,39 @@
+<div class="github-component d-flex flex-column flex-justify-between height-full text-left border border-gray-light rounded-1 p-3">
+  <div>
+    <div class="d-flex flex-justify-between flex-items-start mb-1">
+      <h1 class="f4 lh-condensed mb-1">
+        {% octicon repo height:20 class:"mr-1 v-align-middle" fill:"#586069" aria-label:repo %}
+        <a href="{{repository.html_url}}">{{ repository.name }}</a>
+      </h1>
+    </div>
+    <div class="text-gray mb-2 ws-normal">{{ repository.description }}</div>
+    {%- if repository.homepage != blank %}
+    <div class="mb-2 d-flex flex-items-center Link--secondary">
+      {% octicon link height:16 class:"mr-2" %}
+      <span class="flex-auto min-width-0 css-truncate css-truncate-target width-fit">
+        <a title="{{ repository.homepage }}" role="link" target="_blank" class="text-bold" href="{{ repository.homepage }}">{{repository.homepage}}</a>
+      </span>
+    </div>
+    {%- endif %}
+  </div>
+  <div class="d-flex f6">
+    <p class="mb-0 mt-2 f6 color-fg-muted">
+    {%- if repository.language %}
+      <span class="d-inline-block mr-1">
+        <span class="repo-language-color" data-language="{{ repository.language }}"></span>
+        <span itemprop="programmingLanguage">{{ repository.language }}</span>
+      </span>
+    {%- endif %}
+    {%- if repository.stargazers_count %}
+      <a href="{{ repository.html_url }}/stargazers" class="mr-1 Link--muted">
+        {% octicon star height:16 fill:"#ffffff" %} {{ repository.stargazers_count }}
+      </a>
+    {%- endif %}
+    {%- if repository.forks_count %}
+      <a href="{{ repository.html_url }}/network/members" class="mr-1 Link--muted">
+        {% octicon repo-forked height:16 fill:"#ffffff" %} {{ repository.forks_count }}
+      </a>
+    {%- endif %}
+    </p>
+  </div>
+</div>