mirror of
https://github.com/Extroonie/extroonie.com.git
synced 2026-07-07 07:06:42 -07:00
feat: various site enhancements
This commit is contained in:
parent
1b8f4e4c85
commit
ce3af7cacf
7 changed files with 196 additions and 3 deletions
8
.prettierignore
Normal file
8
.prettierignore
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
# Hugo template files
|
||||
layouts/**/*.json
|
||||
layouts/**/*.xml
|
||||
layouts/**/*.rss
|
||||
|
||||
# Hugo output
|
||||
public/
|
||||
resources/
|
||||
|
|
@ -921,6 +921,38 @@ footer {
|
|||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* Discord tooltip */
|
||||
.discord-tooltip {
|
||||
position: absolute;
|
||||
background: #333;
|
||||
color: white;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
white-space: nowrap;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-4px);
|
||||
transition:
|
||||
opacity 0.15s ease,
|
||||
transform 0.15s ease;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.discord-tooltip.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.discord-tooltip.copied {
|
||||
background: #333;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
|
|
|
|||
100
assets/js/discord-tooltip.js
Normal file
100
assets/js/discord-tooltip.js
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const discordElement = document.querySelector('a[title*="Discord"]');
|
||||
|
||||
if (discordElement) {
|
||||
discordElement.removeAttribute('title');
|
||||
|
||||
const tooltip = document.createElement('div');
|
||||
tooltip.className = 'discord-tooltip';
|
||||
tooltip.textContent = 'Discord: Extroonie';
|
||||
document.body.appendChild(tooltip);
|
||||
|
||||
let isTooltipVisible = false;
|
||||
|
||||
function showTooltip(e) {
|
||||
const rect = discordElement.getBoundingClientRect();
|
||||
tooltip.style.left = rect.left + rect.width / 2 - tooltip.offsetWidth / 2 + 'px';
|
||||
tooltip.style.top = rect.top - tooltip.offsetHeight - 8 + 'px';
|
||||
|
||||
tooltip.classList.add('show');
|
||||
isTooltipVisible = true;
|
||||
}
|
||||
|
||||
function hideTooltip() {
|
||||
tooltip.classList.remove('show');
|
||||
isTooltipVisible = false;
|
||||
}
|
||||
|
||||
function showCopiedMessage() {
|
||||
tooltip.textContent = 'Copied Discord username: Extroonie';
|
||||
tooltip.classList.add('copied');
|
||||
|
||||
setTimeout(() => {
|
||||
tooltip.textContent = 'Discord: Extroonie';
|
||||
tooltip.classList.remove('copied');
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
function copyUsername() {
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = 'Extroonie';
|
||||
textArea.style.position = 'fixed';
|
||||
textArea.style.left = '-999999px';
|
||||
textArea.style.top = '-999999px';
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
|
||||
try {
|
||||
const successful = document.execCommand('copy');
|
||||
document.body.removeChild(textArea);
|
||||
return successful;
|
||||
} catch (err) {
|
||||
document.body.removeChild(textArea);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
const isMobile = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
|
||||
|
||||
if (isMobile) {
|
||||
discordElement.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
showTooltip(e);
|
||||
|
||||
if (copyUsername()) {
|
||||
tooltip.textContent = 'Discord username: Extroonie (copied)';
|
||||
} else {
|
||||
tooltip.textContent = 'Copy failed - try manually';
|
||||
}
|
||||
});
|
||||
} else {
|
||||
discordElement.addEventListener('mouseenter', showTooltip);
|
||||
discordElement.addEventListener('mouseleave', hideTooltip);
|
||||
|
||||
discordElement.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (isTooltipVisible) {
|
||||
if (copyUsername()) {
|
||||
showCopiedMessage();
|
||||
} else {
|
||||
tooltip.textContent = 'Copy failed - try manually';
|
||||
setTimeout(() => {
|
||||
tooltip.textContent = 'Discord: Extroonie';
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('click', function (e) {
|
||||
if (!discordElement.contains(e.target) && !tooltip.contains(e.target)) {
|
||||
hideTooltip();
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('scroll', hideTooltip);
|
||||
window.addEventListener('resize', hideTooltip);
|
||||
}
|
||||
});
|
||||
|
|
@ -38,10 +38,13 @@
|
|||
<link rel="stylesheet" href="https://github.githubassets.com/assets/github-b64b0b078eab.css" />
|
||||
|
||||
{{ $style := resources.Get "css/style.css" | resources.Minify | resources.Fingerprint }}
|
||||
<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}" />
|
||||
<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}" />
|
||||
|
||||
<link rel="icon" href="/images/Pale_Blue_Dot.png" />
|
||||
<link rel="apple-touch-icon" href="/images/Pale_Blue_Dot.png" />
|
||||
{{ $js := resources.Get "js/discord-tooltip.js" | resources.Minify | resources.Fingerprint }}
|
||||
<script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" defer></script>
|
||||
|
||||
<link rel="icon" href="images/Pale_Blue_Dot.png" />
|
||||
<link rel="apple-touch-icon" href="images/Pale_Blue_Dot.png" />
|
||||
|
||||
{{ with .OutputFormats.Get "rss" -}} {{ printf `
|
||||
<link rel="%s" type="%s" href="%s" title="%s" />
|
||||
|
|
|
|||
19
layouts/_default/taxonomy.html
Normal file
19
layouts/_default/taxonomy.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{{ define "main" }}
|
||||
<div class="layout">
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ if .Content }}
|
||||
<div class="content">{{ .Content }}</div>
|
||||
{{ end }}
|
||||
|
||||
<ul>
|
||||
{{ range .Pages }}
|
||||
<li>
|
||||
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
|
||||
{{ if .Date }}
|
||||
<span class="date">{{ .Date.Format "2006-01-02" }}</span>
|
||||
{{ end }}
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
16
layouts/_default/taxonomy.json
Normal file
16
layouts/_default/taxonomy.json
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"title": "{{ .Title }}",
|
||||
"type": "taxonomy",
|
||||
"url": "{{ .Permalink }}",
|
||||
"pages": [
|
||||
{{ range $index, $page := .Pages }}
|
||||
{{ if $index }},{{ end }}
|
||||
{
|
||||
"title": "{{ $page.Title }}",
|
||||
"url": "{{ $page.RelPermalink }}",
|
||||
"date": "{{ $page.Date.Format "2006-01-02" }}",
|
||||
"description": "{{ $page.Description }}"
|
||||
}
|
||||
{{ end }}
|
||||
]
|
||||
}
|
||||
15
layouts/index.json
Normal file
15
layouts/index.json
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"title": "{{ .Site.Title }}",
|
||||
"description": "{{ .Site.Params.description }}",
|
||||
"author": "{{ .Site.Params.author }}",
|
||||
"url": "{{ .Permalink }}",
|
||||
"type": "home",
|
||||
"social": {
|
||||
"twitter": "{{ .Site.Params.social.twitter }}",
|
||||
"github": "{{ .Site.Params.social.github }}",
|
||||
"email": "{{ .Site.Params.social.email }}"
|
||||
},
|
||||
"keywords": {{ .Site.Params.keywords | jsonify }},
|
||||
"images": {{ .Site.Params.images | jsonify }},
|
||||
"lastmod": "{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}"
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue