arsxy-theme 1.0.0.pre.rc

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: c46eb40bf3ecc2df4daea0d790e1a6c94ebc593a5bd4e32e9ec5ef37cfc7f874
+  data.tar.gz: cbce8cb037fafce1e82cc34ecc9b5df233c4ad102de3048f408fb87340e07bf8
+SHA512:
+  metadata.gz: 11c2fa08e5145b3e563ab5138564e7c730ccf4dbbcb71b6ee2ae468b7b77b30e2e6c7aa52fe413a2d531965c3f2ca9b5345a2a02d22d6aee9017a671adebafa4
+  data.tar.gz: ae02444b64c37c97925565cc3286c7b32de12ff5181478b1a4d73cb36648dca43aa14cea7711cd753c51bc0c636442b15845a517acb50cc2fe25432abfdab9c6

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Awcodify
+
+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,166 @@
+# Arsxy Theme for Jekyll
+
+A clean, modern Jekyll theme optimized for technical blogs and documentation sites. This theme prioritizes readability, performance, and responsive design.
+
+> **Current Status**: This theme is currently in beta (v1.0.0-beta). While it's functional and feature-rich, it may receive some refinements before the final stable release.
+
+> **Built with AI**: This theme was developed with the assistance of GitHub Copilot and Claude 3.7 Sonnet.
+
+![Arsxy Theme Screenshot](assets/images/ss-arsxy-theme.png)
+
+## Features
+
+- **Clean & Modern Design** - Minimal, distraction-free reading experience
+- **Responsive Layout** - Optimized for all devices from mobile to desktop
+- **Dark Mode Support** - Built-in dark mode toggle option
+- **Code Highlighting** - Beautiful syntax highlighting for technical content
+- **Table of Contents** - Automatically generated for longer articles
+- **SEO Optimized** - Built-in support for meta tags and structured data
+- **Performance Focused** - Fast loading times with minimal dependencies
+- **Reading Time** - Automatic reading time estimation for each post
+- **Featured Posts** - Highlight your best content on the homepage
+- **Categories & Tags** - Organized content structure
+
+## Installation
+
+### As a remote theme (recommended)
+
+Add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+remote_theme: awcodify/arsxy-theme
+```
+
+And install the necessary plugins:
+
+```ruby
+# In your Gemfile
+group :jekyll_plugins do
+  gem "jekyll-remote-theme"
+  gem "jekyll-feed"
+  gem "jekyll-seo-tag"
+  gem "jekyll-sitemap"
+  gem "jekyll-paginate"
+end
+```
+
+### As a regular theme
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "arsxy-theme"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: arsxy-theme
+```
+
+And then execute:
+
+```bash
+$ bundle install
+```
+
+## Usage
+
+### Configuration
+
+Here's a sample configuration with commonly used options:
+
+```yaml
+# Site settings
+name: Your Site Name
+title: Your Site Title
+description: >-
+  Your site description for SEO and social sharing.
+baseurl: "/"
+url: "https://yourdomain.com"
+
+# Theme settings
+remote_theme: awcodify/arsxy-theme
+# - OR if installing as a gem -
+# theme: arsxy-theme
+
+# Navigation menu
+navigation:
+  - title: Home
+    url: /
+  - title: About
+    url: /about
+  - title: Articles
+    url: /articles
+  - title: Tags
+    url: /tags
+  - title: Contact
+    url: /contact
+
+# Social links
+social:
+  github: yourusername
+  twitter: yourusername
+  linkedin: yourusername
+  email: your.email@example.com
+
+# Plugin settings
+plugins:
+  - jekyll-feed
+  - jekyll-seo-tag
+  - jekyll-sitemap
+  - jekyll-paginate
+```
+
+### Creating Posts
+
+Create a new file in the `_posts` directory with the format `YYYY-MM-DD-title.md`:
+
+```markdown
+---
+layout: post
+title: "Your Post Title"
+description: "A brief description of your post for SEO and previews."
+categories: Category
+tags: tag1 tag2 tag3
+image: path/to/featured-image.jpg
+---
+
+Your content goes here...
+```
+
+### Featured Images
+
+For best results, use featured images in your posts. The recommended image size is 1200×630 pixels for optimal display on both the homepage and social media shares.
+
+### Table of Contents
+
+The table of contents is automatically generated for posts. If you want to disable it for a specific post, add `toc: false` to the front matter.
+
+## Customization
+
+### Colors and Typography
+
+You can override the default colors and typography by creating a `_sass/_custom.scss` file in your site and importing it in your `assets/css/main.scss`.
+
+## Important Notes
+
+- This theme requires Jekyll 3.10 or compatible versions
+- For best performance, optimize your images before adding them to your site
+- The theme includes built-in dark mode that respects user system preferences
+
+## License
+
+This theme is available as open source under the terms of the [MIT License](LICENSE).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/awcodify/arsxy-theme.
+
+We appreciate your contributions to make Arsxy Theme better! Please check out our [Contributing Guidelines](CONTRIBUTING.md) for details on:
+
+- How to submit pull requests
+- Coding standards
+- Development process
+
+When submitting pull requests, please use the appropriate PR template to help maintainers understand and review your changes efficiently.

data/_config.yml

@@ -0,0 +1,131 @@
+# Main configuration for Arsxy Theme
+
+# Site settings
+name: Arsxy Theme
+title: Arsxy Theme
+email: awcodify@gmail.com
+description: >-
+  A clean, fast and SEO-friendly Jekyll theme focused on technical content and code readability.
+baseurl: "" # the subpath of your site, e.g. /blog
+url: "http://localhost:4000" # for local development
+
+# GitHub Pages settings
+repository: awcodify/arsxy-theme
+github: [metadata]
+
+# Theme settings - comment this line when developing locally
+# remote_theme: awcodify/arsxy-theme
+
+# Build settings
+markdown: kramdown
+highlighter: rouge
+permalink: /:title/
+paginate: 5
+paginate_path: "/page/:num/"
+
+# Theme-specific settings
+date_format: "%b %-d, %Y" # e.g. May 5, 2025
+toc_position: right # Options: 'left', 'right' (default)
+
+# Enable search functionality
+search_enabled: true
+
+# Dark mode configuration
+dark_mode:
+  enabled: true   # If set to false, the toggle button will be hidden
+  default: true  # If true, dark mode will be the default theme
+
+# Related posts configuration
+related_posts:
+  enabled: true
+  title: "Related Articles"
+  count: 3
+  min_common_tags: 1
+
+# Social sharing configuration
+social_sharing:
+  enabled: true
+  title: "Share this post"
+
+
+# Homepage configuration
+homepage:
+  # Hero section configuration
+  hero:
+    enabled: true
+    title: "Welcome to Arsxy Theme"
+    subtitle: "A clean, modern Jekyll theme for tech blogs and documentation"
+    image: "welcome-to-arsxy-theme.png"
+    buttons:
+      - label: "Learn More"
+        url: "/docs/"
+        primary: true
+      - label: "GitHub"
+        url: "https://github.com/awcodify/arsxy-theme"
+        primary: false
+  
+  # About section configuration for sidebar
+  about_widget:
+    enabled: true
+    title: "About"
+    content: "A modern Jekyll theme perfect for tech blogs, documentation sites, and personal portfolios."
+    link_text: "More about Arsxy Theme →"
+    link_url: "/about/"
+    
+  # Featured posts settings
+  featured_posts:
+    enabled: true
+    title: "Featured Posts"
+    limit: 3
+    
+  # Latest articles settings
+  latest_articles:
+    enabled: true
+    title: "Latest Articles"
+    excerpt_length: 30
+
+# Navigation menu
+navigation:
+  - title: Home
+    url: /
+  - title: Documentation
+    url: /docs
+  - title: About
+    url: /about
+  - title: Categories
+    url: /categories
+  - title: Tags
+    url: /tags
+  - title: Contact
+    url: /contact
+
+# Social links
+social:
+  github: awcodify
+  twitter: # your Twitter handle
+  linkedin: # your LinkedIn username
+  email: awcodify@gmail.com
+
+# Plugin settings
+plugins:
+  - jekyll-feed
+  - jekyll-seo-tag
+  - jekyll-sitemap
+  - jekyll-paginate
+  - jekyll-remote-theme
+
+# Content settings
+excerpt_separator: <!--more-->
+
+# Exclude from processing
+exclude:
+  - .sass-cache/
+  - .jekyll-cache/
+  - gemfiles/
+  - Gemfile
+  - Gemfile.lock
+  - node_modules/
+  - vendor/
+  - example/
+  - LICENSE
+  - arsxy-theme.gemspec

data/_includes/footer.html

@@ -0,0 +1,45 @@
+<footer class="site-footer">
+  <div class="wrapper">
+    <div class="footer-content">
+      <div class="footer-col">
+        <h2 class="footer-heading">{{ site.title | escape }}</h2>
+        <p>{{ site.description | escape }}</p>
+      </div>
+
+      <div class="footer-col">
+        <h2 class="footer-heading">Links</h2>
+        <ul class="footer-links">
+          {%- for item in site.navigation -%}
+          <li><a href="{{ item.url | relative_url }}">{{ item.title | escape }}</a></li>
+          {%- endfor -%}
+        </ul>
+      </div>
+
+      <div class="footer-col">
+        <h2 class="footer-heading">Connect</h2>
+        <ul class="social-links">
+          {%- if site.social.github -%}
+          <li><a href="https://github.com/{{ site.social.github }}"><span class="icon-github">GitHub</span></a></li>
+          {%- endif -%}
+          
+          {%- if site.social.twitter -%}
+          <li><a href="https://twitter.com/{{ site.social.twitter }}"><span class="icon-twitter">Twitter</span></a></li>
+          {%- endif -%}
+          
+          {%- if site.social.linkedin -%}
+          <li><a href="https://linkedin.com/in/{{ site.social.linkedin }}"><span class="icon-linkedin">LinkedIn</span></a></li>
+          {%- endif -%}
+          
+          {%- if site.social.email -%}
+          <li><a href="mailto:{{ site.social.email }}"><span class="icon-mail">Email</span></a></li>
+          {%- endif -%}
+        </ul>
+      </div>
+    </div>
+
+    <div class="footer-bottom">
+      <p>&copy; {{ site.time | date: '%Y' }} {{ site.name | default: site.title }}. All rights reserved.</p>
+      <p class="powered-by">Using <a href="https://github.com/awcodify/arsxy-theme/">Arsxy Theme</a> by <a href="https://sysctl.id">sysctl.id</a></p>
+    </div>
+  </div>
+</footer>

data/_includes/header.html

@@ -0,0 +1,68 @@
+<header class="site-header">
+  <div class="wrapper">
+    <a class="site-title" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
+    
+    <div class="site-header-right">
+      <div class="site-header-actions">
+        {% if site.search_enabled != false %}
+        <div class="search-toggle">
+          <button class="search-button" aria-label="Open search" id="search-toggle-button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="11" cy="11" r="8"></circle>
+              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+            </svg>
+          </button>
+        </div>
+        {% endif %}
+        
+        {% if site.dark_mode.enabled %}
+        <button class="theme-toggle" aria-label="Toggle Dark Mode">
+          <svg class="theme-toggle-icon sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+          <svg class="theme-toggle-icon moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 A7 7 0 0 0 21 12.79z"></path></svg>
+        </button>
+        {% endif %}
+      </div>
+      
+      <nav class="site-nav">
+        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
+        <label for="nav-trigger">
+          <span class="menu-icon">
+            <svg viewBox="0 0 18 15" width="18px" height="15px">
+              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
+            </svg>
+          </span>
+        </label>
+
+        <div class="trigger">
+          {%- for item in site.navigation -%}
+            <a class="page-link" href="{{ item.url | relative_url }}">{{ item.title | escape }}</a>
+          {%- endfor -%}
+        </div>
+      </nav>
+    </div>
+  </div>
+  
+  {% if site.search_enabled != false %}
+  <div class="search-overlay" id="search-overlay">
+    <div class="search-overlay-content">
+      <div class="search-header">
+        <h2>Search</h2>
+        <button class="close-search" id="close-search" aria-label="Close search">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      </div>
+      <div class="search-form">
+        <input type="text" id="search-input-overlay" placeholder="Search for articles..." aria-label="Search" autocomplete="off">
+        <div id="search-results-overlay" class="search-results-container"></div>
+        
+        <div class="advanced-search-link">
+          <a href="{{ '/search/' | relative_url }}">Advanced Search</a>
+        </div>
+      </div>
+    </div>
+  </div>
+  {% endif %}
+</header>

data/_includes/image.html

@@ -0,0 +1,8 @@
+{% if include.url %}
+<figure class="image">
+  <img src="{{ '/assets/images/' | append: include.url | relative_url }}" alt="{{ include.alt | default: 'Image' }}" {% if include.width %}width="{{ include.width }}"{% endif %} {% if include.class %}class="{{ include.class }}"{% endif %}>
+  {% if include.caption %}
+  <figcaption>{{ include.caption }}</figcaption>
+  {% endif %}
+</figure>
+{% endif %}

data/_includes/related-posts.html

@@ -0,0 +1,83 @@
+{% if site.related_posts.enabled %}
+<div class="related-posts">
+  <h3>{{ site.related_posts.title | default: "Related Posts" }}</h3>
+  <div class="related-posts-grid">
+    {% assign maxRelated = site.related_posts.count | default: 3 %}
+    {% assign minCommonTags = site.related_posts.min_common_tags | default: 1 %}
+    {% assign maxRelatedCounter = 0 %}
+    
+    {% for post in site.posts %}
+      {% if post.url != page.url %}
+        {% assign sameTagCount = 0 %}
+        {% for tag in post.tags %}
+          {% if page.tags contains tag %}
+            {% assign sameTagCount = sameTagCount | plus: 1 %}
+          {% endif %}
+        {% endfor %}
+
+        {% if sameTagCount >= minCommonTags %}
+          <a href="{{ post.url | relative_url }}" class="related-post-card">
+            {% if post.image %}
+              <div class="related-post-image">
+                <img src="{{ '/assets/images/' | append: post.image | relative_url }}" alt="{{ post.title }}">
+              </div>
+            {% endif %}
+            <div class="related-post-content">
+              <h4>{{ post.title }}</h4>
+              <span class="related-post-date">{{ post.date | date: site.date_format }}</span>
+            </div>
+          </a>
+          {% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}
+          {% if maxRelatedCounter >= maxRelated %}
+            {% break %}
+          {% endif %}
+        {% endif %}
+      {% endif %}
+    {% endfor %}
+
+    {% if maxRelatedCounter == 0 %}
+      {% for post in site.posts limit: maxRelated %}
+        {% if post.url != page.url %}
+          <a href="{{ post.url | relative_url }}" class="related-post-card">
+            {% if post.image %}
+              <div class="related-post-image">
+                <img src="{{ '/assets/images/' | append: post.image | relative_url }}" alt="{{ post.title }}">
+              </div>
+            {% endif %}
+            <div class="related-post-content">
+              <h4>{{ post.title }}</h4>
+              <span class="related-post-date">{{ post.date | date: site.date_format }}</span>
+            </div>
+          </a>
+          {% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}
+        {% endif %}
+      {% endfor %}
+    {% endif %}
+  </div>
+</div>
+{% else %}
+<div class="related-posts">
+  <h3>Related Posts</h3>
+  <div class="related-posts-grid">
+    {% assign maxRelated = 3 %}
+    {% assign maxRelatedCounter = 0 %}
+    
+    {% for post in site.posts limit: maxRelated %}
+      {% if post.url != page.url %}
+        <a href="{{ post.url | relative_url }}" class="related-post-card">
+          {% if post.image %}
+            <div class="related-post-image">
+              <img src="{{ '/assets/images/' | append: post.image | relative_url }}" alt="{{ post.title }}">
+            </div>
+          {% endif %}
+          <div class="related-post-content">
+            <h4>{{ post.title }}</h4>
+            <span class="related-post-date">{{ post.date | date: site.date_format }}</span>
+          </div>
+        </a>
+        {% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}
+      {% endif %}
+    {% endfor %}
+  </div>
+</div>
+{% endif %}

data/_includes/search.html

@@ -0,0 +1,32 @@
+{% if site.search_enabled != false %}
+<div class="search-toggle">
+  <button class="search-button" aria-label="Open search" id="search-toggle-button">
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="11" cy="11" r="8"></circle>
+      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+    </svg>
+  </button>
+</div>
+
+<div class="search-overlay" id="search-overlay">
+  <div class="search-overlay-content">
+    <div class="search-header">
+      <h2>Search</h2>
+      <button class="close-search" id="close-search" aria-label="Close search">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+    </div>
+    <div class="search-form">
+      <input type="text" id="search-input-overlay" placeholder="Search for articles..." aria-label="Search" autocomplete="off">
+      <div id="search-results-overlay" class="search-results-container"></div>
+      
+      <div class="advanced-search-link">
+        <a href="{{ '/search/' | relative_url }}">Advanced Search</a>
+      </div>
+    </div>
+  </div>
+</div>
+{% endif %}

data/_includes/social-sharing.html

@@ -0,0 +1,86 @@
+{% if site.social_sharing.enabled != false %}
+<div class="social-sharing">
+  <h3>{{ site.social_sharing.title | default: "Share this post" }}</h3>
+  <ul class="share-buttons">
+    <!-- Twitter/X -->
+    <li>
+      <a href="https://twitter.com/intent/tweet?text={{ page.title | url_encode }}&url={{ page.url | absolute_url | url_encode }}" 
+         target="_blank" rel="noopener" aria-label="Share on Twitter" class="share-button twitter">
+         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
+         <span>Twitter</span>
+      </a>
+    </li>
+    <!-- Facebook -->
+    <li>
+      <a href="https://www.facebook.com/sharer/sharer.php?u={{ page.url | absolute_url | url_encode }}"
+         target="_blank" rel="noopener" aria-label="Share on Facebook" class="share-button facebook">
+         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
+         <span>Facebook</span>
+      </a>
+    </li>
+    <!-- LinkedIn -->
+    <li>
+      <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ page.url | absolute_url | url_encode }}&title={{ page.title | url_encode }}&summary={{ page.description | default: site.description | url_encode }}"
+         target="_blank" rel="noopener" aria-label="Share on LinkedIn" class="share-button linkedin">
+         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
+         <span>LinkedIn</span>
+      </a>
+    </li>
+    <!-- Reddit -->
+    <li>
+      <a href="https://www.reddit.com/submit?url={{ page.url | absolute_url | url_encode }}&title={{ page.title | url_encode }}"
+         target="_blank" rel="noopener" aria-label="Share on Reddit" class="share-button reddit">
+         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/></svg>
+         <span>Reddit</span>
+      </a>
+    </li>
+    <!-- Email -->
+    <li>
+      <a href="mailto:?subject={{ page.title | url_encode }}&body={{ page.description | default: site.description | url_encode }}%0A{{ page.url | absolute_url | url_encode }}"
+         target="_blank" rel="noopener" aria-label="Share via Email" class="share-button email">
+         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M0 3v18h24v-18h-24zm6.623 7.929l-4.623 5.712v-9.458l4.623 3.746zm-4.141-5.929h19.035l-9.517 7.713-9.518-7.713zm5.694 7.188l3.824 3.099 3.83-3.104 5.612 6.817h-18.779l5.513-6.812zm9.208-1.264l4.616-3.741v9.348l-4.616-5.607z"/></svg>
+         <span>Email</span>
+      </a>
+    </li>
+    <!-- Clipboard copy -->
+    <li>
+      <a href="#" class="share-button copy-link" id="copy-link" data-url="{{ page.url | absolute_url }}" onclick="copyToClipboard(event)">
+         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M7.024 3.75c0-.966.784-1.75 1.75-1.75H20.25c.966 0 1.75.784 1.75 1.75v11.498a1.75 1.75 0 0 1-1.75 1.75H8.774a1.75 1.75 0 0 1-1.75-1.75V3.75zm1.75-.25a.25.25 0 0 0-.25.25v11.498c0 .139.112.25.25.25H20.25a.25.25 0 0 0 .25-.25V3.75a.25.25 0 0 0-.25-.25H8.774z"/><path d="M1.995 10.749a1.75 1.75 0 0 1 1.75-1.751H5.25a.75.75 0 1 1 0 1.5H3.745a.25.25 0 0 0-.25.25L3.5 20.25c0 .138.111.25.25.25h9.5a.25.25 0 0 0 .25-.25v-1.51a.75.75 0 1 1 1.5 0v1.51A1.75 1.75 0 0 1 13.25 22h-9.5A1.75 1.75 0 0 1 2 20.25l-.005-9.501z"/></svg>
+         <span>Copy Link</span>
+      </a>
+    </li>
+  </ul>
+</div>
+
+<script>
+function copyToClipboard(e) {
+  e.preventDefault();
+  const element = e.currentTarget;
+  const url = element.getAttribute('data-url');
+  
+  // Create a temporary input element
+  const tempInput = document.createElement('input');
+  tempInput.value = url;
+  document.body.appendChild(tempInput);
+  
+  // Select the text
+  tempInput.select();
+  tempInput.setSelectionRange(0, 99999); // For mobile devices
+  
+  // Copy the text
+  document.execCommand('copy');
+  
+  // Remove the temporary element
+  document.body.removeChild(tempInput);
+  
+  // Update the button text temporarily
+  const originalText = element.querySelector('span').textContent;
+  element.querySelector('span').textContent = 'Copied!';
+  
+  // Reset the button text after a delay
+  setTimeout(() => {
+    element.querySelector('span').textContent = originalText;
+  }, 2000);
+}
+</script>
+{% endif %}