andwati/pwnforfunandprofit.xyz
1
0
Fork 0
mirror of https://github.com/andwati/pwnforfunandprofit.xyz.git synced 2026-10-18 02:12:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add social sharing buttons to article pages with new styling and update the README.

Browse Source
This commit is contained in:
andwati
2026-03-08 23:45:32 +03:00
parent d331fff276
commit f4397fb02f
4 changed files with 88 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1 -5
View File
@@ -18,12 +18,8 @@
- [ ] Pagination supported
- [ ] Easy-to-use and self-expanding table of contents
- [ ] Beautiful CSS animation
- [ ] Brand new Page Layout optimized for wide screens
- [ ] Social and Comment Systems
- [ ] Local Avatar supported
- [ ] social links supported
- [ ] share sites supported
- [x] share sites supported
- [ ] Utterances comment system supported by Utterances
sass/_article.scss
+54 -1
View File
@@ -63,10 +63,23 @@
}
}
.post-tags-share {
display: flex;
flex-direction: column;
gap: 2rem;
margin-top: 4rem;
@media (min-width: 640px) {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
.post-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 4rem;
.tag {
background: var(--surface-color);
@@ -78,6 +91,46 @@
}
}
.social-share {
display: flex;
align-items: center;
gap: 0.75rem;
.share-label {
font-weight: 500;
color: var(--text-color);
margin-right: 0.25rem;
}
.share-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--surface-color);
border: 1px solid var(--border-color);
color: var(--text-muted);
transition: var(--transition-smooth);
cursor: pointer;
&:hover {
color: var(--bg-color);
transform: translateY(-2px);
border-color: transparent;
&.x { background: #000000; color: #ffffff; }
&.bluesky { background: #0285FF; }
&.linkedin { background: #0077b5; }
&.reddit { background: #ff4500; }
&.hackernews { background: #ff6600; }
&.email { background: #6b7280; }
&.copy-link { background: var(--accent-color); }
}
}
}
.post-nav {
display: flex;
flex-direction: column;
templates/page.html
+9 -6
View File
@@ -52,12 +52,15 @@
{% include "partials/post-nav.html" %}
<footer class="post-footer">
<div class="post-tags">
{% if page.taxonomies.tags %}
{% for tag in page.taxonomies.tags %}
<span class="tag">#{{ tag }}</span>
{% endfor %}
{% endif %}
<div class="post-tags-share">
<div class="post-tags">
{% if page.taxonomies.tags %}
{% for tag in page.taxonomies.tags %}
<span class="tag">#{{ tag }}</span>
{% endfor %}
{% endif %}
</div>
{% include "partials/social-share.html" %}
</div>
<!-- Utterances comments (posts only) -->
templates/partials/social-share.html
+24
View File
@@ -0,0 +1,24 @@
<div class="social-share">
<span class="share-label">Share:</span>
<a href="https://twitter.com/intent/tweet?text={{ page.title | urlencode }}&url={{ page.permalink | urlencode }}" target="_blank" rel="noopener noreferrer" class="share-btn x" aria-label="Share on X">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"/></svg>
</a>
<a href="https://bsky.app/intent/compose?text={{ page.title | urlencode }}%20{{ page.permalink | urlencode }}" target="_blank" rel="noopener noreferrer" class="share-btn bluesky" aria-label="Share on Bluesky">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026"/></svg>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url={{ page.permalink | urlencode }}&title={{ page.title | urlencode }}" target="_blank" rel="noopener noreferrer" class="share-btn linkedin" aria-label="Share on LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
</a>
<a href="https://reddit.com/submit?url={{ page.permalink | urlencode }}&title={{ page.title | urlencode }}" target="_blank" rel="noopener noreferrer" class="share-btn reddit" aria-label="Share on Reddit">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z"/></svg>
</a>
<a href="https://news.ycombinator.com/submitlink?u={{ page.permalink | urlencode }}&t={{ page.title | urlencode }}" target="_blank" rel="noopener noreferrer" class="share-btn hackernews" aria-label="Share on Hacker News">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M0 24V0h24v24H0zM6.95 5.55L11 13v5h2v-5l4.05-7.45h-2.25L12 10.65 9.2 5.55H6.95z"/></svg>
</a>
<a href="mailto:?subject={{ page.title | urlencode }}&body={{ page.permalink | urlencode }}" target="_blank" rel="noopener noreferrer" class="share-btn email" aria-label="Share via Email">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
</a>
<button class="share-btn copy-link" onclick="navigator.clipboard.writeText('{{ page.permalink }}'); alert('Link copied to clipboard!');" aria-label="Copy Link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
</button>
</div>