87 lines
3.8 KiB
JavaScript
87 lines
3.8 KiB
JavaScript
function getButtons() {
|
|
const buttons = document.createElement('template');
|
|
buttons.id = 'button-collection-template';
|
|
buttons.innerHTML = `
|
|
<my-marquee speed="50" direction="left">
|
|
<!-- Socials -->
|
|
<button-8831 href="mailto:tibo@depeuter.dev"
|
|
src="https://cyber.dabamos.de/88x31/email.gif"
|
|
hint="Mail Me"></button-8831>
|
|
<button-8831 href="./key.asc"
|
|
src="https://www.88x31.nl/gifs/pgp-now.gif"
|
|
hint="My GPG key"></button-8831>
|
|
<!-- Operating Systems -->
|
|
<button-8831 href="https://www.gnu.org/gnu/linux.html"
|
|
src="https://www.88x31.nl/gifs/gnu-linux.gif"
|
|
hint="Made on GNU/Linux"></button-8831>
|
|
<!-- Editors -->
|
|
<!-- Services -->
|
|
<button-8831 href="https://www.proxmox.com/"
|
|
src="https://www.88x31.nl/gifs/proxmox.gif"
|
|
hint="Proxmox VE"></button-8831>
|
|
<button-8831 href="https://cloud.depeuter.dev/"
|
|
src="https://www.88x31.nl/gifs/nextcloud.gif"
|
|
hint="Nextcloud"></button-8831>
|
|
<button-8831 href="https://ublockorigin.com/"
|
|
src="https://www.88x31.nl/gifs/ublock-now.png"
|
|
hint="uBlock Origin Now!"></button-8831>
|
|
<!-- Movements -->
|
|
<button-8831 href="https://home.cern/news/opinion/computing/open-internet-and-free-web"
|
|
src="https://www.88x31.nl/gifs/fftake.gif"
|
|
hint="Take back the web (Firefox)"></button-8831>
|
|
<button-8831 href="https://www.ifixit.com/"
|
|
src="https://www.88x31.nl/gifs/right-to-repair.png"
|
|
hint="I Support Right To Repair"></button-8831>
|
|
<!-- Compatibility -->
|
|
<button-8831 href="https://www.mozilla.org/firefox/"
|
|
src="https://www.88x31.nl/gifs/firefox4.gif"
|
|
hint="Tested on Firefox"></button-8831>
|
|
<!-- Web -->
|
|
<button-8831 href="https://www.depeuter.dev"
|
|
src="https://www.88x31.nl/gifs/graphicdesign.gif"
|
|
hint="Graphic Design Is My Passion"></button-8831>
|
|
<button-8831 href="https://developer.mozilla.org/en-US/docs/Web/CSS"
|
|
src="https://www.88x31.nl/gifs/css.gif"
|
|
hint="CSS is awesome"></button-8831>
|
|
<!-- Media -->
|
|
<button-8831 href="https://last.fm/user/fortemfiducia"
|
|
src="https://www.88x31.nl/gifs/3dot5mmfc-button.gif"
|
|
hint="My Last.fm account"></button-8831>
|
|
<button-8831 href="https://open.spotify.com/user/deyoloboy?si=3bca31169a434d4a"
|
|
src="https://www.88x31.nl/gifs/spotify.gif"
|
|
hint="My Spotify account"></button-8831>
|
|
<button-8831 href="https://www.blankbanshee.com/"
|
|
src="https://www.88x31.nl/gifs/banshee.gif"
|
|
hint="Blank Banshee"></button-8831>
|
|
<button-8831 href="https://fmskyline.bandcamp.com/"
|
|
src="https://www.88x31.nl/gifs/fm.gif"
|
|
hint="FMSkyline"></button-8831>
|
|
<button-8831 href="https://luxuryelite.bandcamp.com/"
|
|
src="https://capstasher.neocities.org/88x31Buttons/lu.png"
|
|
hint="Luxury Elite"></button-8831>
|
|
<button-8831 href="https://nmesh.bandcamp.com/"
|
|
src="https://www.88x31.nl/gifs/nm.png"
|
|
hint="nmesh"></button-8831>
|
|
<!-- Fun -->
|
|
<button-8831 href="https://www.depeuter.dev"
|
|
src="https://www.88x31.nl/gifs/thedigitalme.gif"
|
|
hint="The Digital Me"></button-8831>
|
|
</my-marquee>
|
|
`;
|
|
|
|
return buttons;
|
|
}
|
|
|
|
class ButtonCollection extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
|
|
const templateContent = getButtons().content;
|
|
const wrapper = templateContent.cloneNode(true);
|
|
|
|
const shadowRoot = this.attachShadow({ mode: 'open' });
|
|
shadowRoot.appendChild(wrapper);
|
|
}
|
|
}
|
|
|
|
customElements.define('button-collection', ButtonCollection);
|