generated from nhcarrigan/template
feat: add full social list to footer (#4)
### Explanation _No response_ ### Issue _No response_ ### Attestations - [x] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/) - [x] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/). - [x] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/). ### Dependencies - [x] I have pinned the dependencies to a specific patch version. ### Style - [x] I have run the linter and resolved any errors. - [x] My pull request uses an appropriate title, matching the conventional commit standards. - [x] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request. ### Tests - [ ] My contribution adds new code, and I have added tests to cover it. - [ ] My contribution modifies existing code, and I have updated the tests to reflect these changes. - [ ] All new and existing tests pass locally with my changes. - [ ] Code coverage remains at or above the configured threshold. ### Documentation _No response_ ### Versioning _No response_ Reviewed-on: #4 Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
This commit is contained in:
144
src/index.ts
144
src/index.ts
@ -177,11 +177,16 @@ footer {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
#audio-theme-button, #theme-select-button {
|
#show-socials-button, #theme-select-button {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
|
cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
|
font-size: 1rem;
|
||||||
|
font-family: 'OpenDyslexic', monospace;
|
||||||
|
}
|
||||||
|
#show-socials-button > i, #theme-select-button > i {
|
||||||
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
color: unset;
|
color: unset;
|
||||||
@ -191,6 +196,37 @@ a {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
#social-list {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 75px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100vw;
|
||||||
|
max-width: 400px;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: var(--background);
|
||||||
|
color: var(--foreground);
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--foreground);
|
||||||
|
display: none;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.social-list-item {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.social-list-item > a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.social-list-divider {
|
||||||
|
border: 0.5px solid var(--foreground);
|
||||||
|
}
|
||||||
|
.social-list-item:hover {
|
||||||
|
background-color: var(--foreground);
|
||||||
|
color: var(--background);
|
||||||
|
}
|
||||||
.is-dark {
|
.is-dark {
|
||||||
--foreground: #ffb6c1;
|
--foreground: #ffb6c1;
|
||||||
--background: #2a0a18bb;
|
--background: #2a0a18bb;
|
||||||
@ -217,21 +253,73 @@ const footer = document.createElement("footer");
|
|||||||
footer.innerHTML = `
|
footer.innerHTML = `
|
||||||
<div id="footer-inner-container">
|
<div id="footer-inner-container">
|
||||||
<p>© <a href="https://nhcarrigan.com" target="_blank">Naomi Carrigan</a></p>
|
<p>© <a href="https://nhcarrigan.com" target="_blank">Naomi Carrigan</a></p>
|
||||||
<a href="https://chat.nhcarrigan.com" target="_blank" rel="noreferrer">
|
<button id="show-socials-button" type="button">
|
||||||
<i class="fa-solid fa-comments"></i>
|
<i class="fa-solid fa-share-nodes"></i> Connect with Us
|
||||||
</a>
|
</button>
|
||||||
<button id="theme-select-button" type="button">
|
<button id="theme-select-button" type="button">
|
||||||
<i id="theme-select-icon" class="fa-solid fa-moon"></i>
|
<i id="theme-select-icon" class="fa-solid fa-moon"></i> Toggle Theme
|
||||||
</button>
|
</button>
|
||||||
<a href="https://buy.stripe.com/cN24iTfqu1j6b3afZ2" target="_blank" rel="noreferrer">
|
<a href="https://buy.stripe.com/cN24iTfqu1j6b3afZ2" target="_blank" rel="noreferrer">
|
||||||
<img src="https://cdn.nhcarrigan.com/donate.png" alt="Donate" style="width: 70px; height: 70px;">
|
<img src="https://cdn.nhcarrigan.com/donate.png" alt="Donate" style="width: 70px; height: 70px;">
|
||||||
</a>
|
</a>
|
||||||
<div id="tree-nation-offset-website"></div>
|
<div id="tree-nation-offset-website"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="social-list">
|
||||||
|
<div class="social-list-item">
|
||||||
|
<a href="https://chat.nhcarrigan.com" target="_blank" rel="noreferrer">
|
||||||
|
<i class="fa-brands fa-discord"></i><span>Join our Discord~!</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<hr class="social-list-divider" />
|
||||||
|
<div class="social-list-item">
|
||||||
|
<a href="https://forum.nhcarrigan.com" target="_blank" rel="noreferrer">
|
||||||
|
<i class="fa-brands fa-discourse"></i><span>Sign up for our forum~!</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<hr class="social-list-divider" />
|
||||||
|
<div class="social-list-item">
|
||||||
|
<a href="https://git.nhcarrigan.com" target="_blank" rel="noreferrer">
|
||||||
|
<i class="fa-brands fa-git-alt"></i><span>Check out our source code~!</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<hr class="social-list-divider" />
|
||||||
|
<div class="social-list-item">
|
||||||
|
<a href="https://bsky.app/profile/nhcarrigan.com" target="_blank" rel="noreferrer">
|
||||||
|
<i class="fa-brands fa-bluesky"></i><span>Follow us on Bluesky~!</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<hr class="social-list-divider" />
|
||||||
|
<div class="social-list-item">
|
||||||
|
<a href="https://www.linkedin.com/company/nhcarrigan" target="_blank" rel="noreferrer">
|
||||||
|
<i class="fa-brands fa-linkedin"></i><span>Connect with us on LinkedIn~!</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<hr class="social-list-divider" />
|
||||||
|
<div class="social-list-item">
|
||||||
|
<a href="https://www.reddit.com/r/nhcarrigan/" target="_blank" rel="noreferrer">
|
||||||
|
<i class="fa-brands fa-reddit"></i><span>Join our subreddit~!</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<hr class="social-list-divider" />
|
||||||
|
<div class="social-list-item">
|
||||||
|
<a href="https://www.youtube.com/@naomilgbt" target="_blank" rel="noreferrer">
|
||||||
|
<i class="fa-brands fa-youtube"></i><span>Subscribe to our YouTube~!</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<hr class="social-list-divider" />
|
||||||
|
<div class="social-list-item">
|
||||||
|
<a href="https://twitch.tv/naomilgbt" target="_blank" rel="noreferrer">
|
||||||
|
<i class="fa-brands fa-twitch"></i><span>Subscribe to our Twitch~!</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<hr class="social-list-divider" />
|
||||||
|
<div class="social-list-item">
|
||||||
|
<a href="https://x.com/nhcarrigan1" target="_blank" rel="noreferrer">
|
||||||
|
<i class="fa-brands fa-twitter"></i><span>We are even on Twitter~!</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// #endregion
|
|
||||||
|
|
||||||
// #region Scripts
|
// #region Scripts
|
||||||
|
|
||||||
const treeNation = document.createElement("script");
|
const treeNation = document.createElement("script");
|
||||||
@ -314,25 +402,6 @@ body?.appendChild(footer);
|
|||||||
body?.appendChild(treeNationBottom);
|
body?.appendChild(treeNationBottom);
|
||||||
// #endregion
|
// #endregion
|
||||||
|
|
||||||
// #region Audio
|
|
||||||
|
|
||||||
const playButton = document.querySelector("#audio-theme-button");
|
|
||||||
const audio = new Audio("https://cdn.nhcarrigan.com/theme.mp3");
|
|
||||||
let playing = false;
|
|
||||||
playButton?.addEventListener("click", () => {
|
|
||||||
if (playing) {
|
|
||||||
audio.pause();
|
|
||||||
playing = false;
|
|
||||||
playButton.innerHTML = "<i class=\"fa-solid fa-play\"></i>";
|
|
||||||
} else {
|
|
||||||
void audio.play();
|
|
||||||
playing = true;
|
|
||||||
playButton.innerHTML = "<i class=\"fa-solid fa-pause\"></i>";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// #endregion
|
|
||||||
|
|
||||||
// #region Theme
|
// #region Theme
|
||||||
|
|
||||||
const themeButton = document.querySelector("#theme-select-button");
|
const themeButton = document.querySelector("#theme-select-button");
|
||||||
@ -367,6 +436,27 @@ if (prefersDark.matches && localStorage.getItem("theme") !== null) {
|
|||||||
|
|
||||||
// #endregion
|
// #endregion
|
||||||
|
|
||||||
|
// #region Social Toggle
|
||||||
|
const showSocialsButton = document.querySelector<HTMLButtonElement>(
|
||||||
|
"#show-socials-button",
|
||||||
|
);
|
||||||
|
const socialList = document.querySelector<HTMLDivElement>("#social-list");
|
||||||
|
const toggleSocials = (): void => {
|
||||||
|
if (!socialList) {
|
||||||
|
throw new Error("Social list element not found.");
|
||||||
|
}
|
||||||
|
if (socialList.style.display === "block") {
|
||||||
|
socialList.style.display = "none";
|
||||||
|
showSocialsButton?.setAttribute("aria-expanded", "false");
|
||||||
|
showSocialsButton?.setAttribute("aria-label", "Show Socials");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
socialList.style.display = "block";
|
||||||
|
showSocialsButton?.setAttribute("aria-expanded", "true");
|
||||||
|
showSocialsButton?.setAttribute("aria-label", "Hide Socials");
|
||||||
|
};
|
||||||
|
showSocialsButton?.addEventListener("click", toggleSocials);
|
||||||
|
|
||||||
// #region CTA
|
// #region CTA
|
||||||
|
|
||||||
const cta = document.createElement("dialog");
|
const cta = document.createElement("dialog");
|
||||||
|
Reference in New Issue
Block a user