forked from nin0/website
internal corporate restructuring
This commit is contained in:
parent
22251c3b2b
commit
6015db1f4f
SSH key fingerprint:
SHA256:NOoDnFVvZNFvqfXCIhzr6oCTDImZAbTTuyAysZ8Ufk8
37 changed files with 1207 additions and 348 deletions
|
|
@ -1,9 +0,0 @@
|
|||
---
|
||||
const {position, text, url, id} = Astro.props;
|
||||
---
|
||||
<style>
|
||||
button, a {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
{url ? <a href={url}><button id={id}>{text}</button></a> : <button id={id}>{text}</button>}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<style>
|
||||
|
||||
div {
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
row-gap: 5px;
|
||||
}
|
||||
</style>
|
||||
<div class="button-collection">
|
||||
<slot />
|
||||
</div>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
---
|
||||
import Social from "./Social.astro"
|
||||
|
||||
const contacts: any = Object.values(import.meta.glob("../../info/contacts/*.md", {
|
||||
eager: true
|
||||
}));
|
||||
---
|
||||
<ul>
|
||||
{contacts.map(contact => <Social platform={contact.frontmatter.platform} url={contact.frontmatter.url} name={contact.frontmatter.name} note={contact.frontmatter.note}/>)}
|
||||
</ul>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<style>
|
||||
div {
|
||||
color: black;
|
||||
background-color: lightcoral;
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
a {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<noscript>
|
||||
<div>
|
||||
<p>
|
||||
<h4>ENABLE JAVASCRIPT OR I WILL KILL YOU</h4>
|
||||
I will not. However, you seem to be living in fear of technology, as you have JavaScript disabled. This means that some features (eg. dragging, submitting forms) will not work. Enable JS to fully enjoy this website!
|
||||
<br/>
|
||||
Rest assured, there's no external tracking. You can check this site's source code on the <a href="https://git.nin0.dev/nin0/website">nin0/website</a> repository on my Forgejo.
|
||||
</p>
|
||||
</div>
|
||||
</noscript>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
---
|
||||
const {name} = Astro.props
|
||||
---
|
||||
|
||||
<style>
|
||||
fieldset {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
padding: 0px 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<fieldset>
|
||||
<legend>{name}</legend>
|
||||
<slot />
|
||||
</fieldset>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
---
|
||||
import Contacts from "../components/Contacts.astro";
|
||||
import GroupBox from "../components/GroupBox.astro";
|
||||
import Me from "../components/Me.astro";
|
||||
import Presence from "../components/Presence.astro";
|
||||
import Window from "../components/Window.astro";
|
||||
import Button from "./Button.astro";
|
||||
import ButtonCollection from "./ButtonCollection.astro";
|
||||
import Spacer from "./Spacer.astro";
|
||||
---
|
||||
<Window title="Home" maxWidth="600px" showClose={true}>
|
||||
<Me />
|
||||
<Presence />
|
||||
<GroupBox name="About me">
|
||||
<p>
|
||||
I'm a Canadian self-taught software developer.
|
||||
<br/>
|
||||
I also make things that some people use with varying degrees of usefulness.
|
||||
</p>
|
||||
</GroupBox>
|
||||
<GroupBox name="Reach out">
|
||||
<Contacts />
|
||||
</GroupBox>
|
||||
<ButtonCollection>
|
||||
<Button position="left" text="Projects (soon)" url="/projects"/>
|
||||
<Spacer />
|
||||
<Button position="left" text="Code (soon)" url="/code"/>
|
||||
<Spacer />
|
||||
<Button position="left" text="Blog (ETA: 100 years)" url="/code"/>
|
||||
</ButtonCollection>
|
||||
</Window>
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
---
|
||||
import {fetchUserData, type DiscordStatus} from "lanyard-wrapper";
|
||||
|
||||
const rawUserData = await fetchUserData("886685857560539176");
|
||||
const statusColor = () => {
|
||||
switch (rawUserData.discord_status) {
|
||||
case "online":
|
||||
return "#23a55a";
|
||||
case "idle":
|
||||
return "#f0b232";
|
||||
case "dnd":
|
||||
return "#f23f43";
|
||||
case "offline":
|
||||
return "#80848e";
|
||||
default:
|
||||
return "#80848e";
|
||||
}
|
||||
};
|
||||
---
|
||||
|
||||
<style define:vars={{statusColor: statusColor()}}>
|
||||
div {
|
||||
display: flex;
|
||||
}
|
||||
h3 {
|
||||
font-weight: 400;
|
||||
margin-left: 20px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
img {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 10px black;
|
||||
border-color: var(--statusColor);
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<img src="logo.png" alt="the nin0dev logo">
|
||||
<h3>nin0 <span style="font-size: 0.4em;">(he/him)</span></h3>
|
||||
</div>
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
---
|
||||
import {fetchUserData} from "lanyard-wrapper";
|
||||
|
||||
const rawUserData = await fetchUserData("886685857560539176");
|
||||
const activity = (() => {
|
||||
let finalActivity = {
|
||||
type: undefined,
|
||||
name: undefined,
|
||||
artist: undefined
|
||||
};
|
||||
rawUserData.activities.some((activity => {
|
||||
if(activity.type === 0) {
|
||||
finalActivity = {
|
||||
type: "playing",
|
||||
name: activity.name,
|
||||
artist: undefined
|
||||
};
|
||||
return;
|
||||
}
|
||||
}));
|
||||
if(finalActivity.type !== undefined) return finalActivity;
|
||||
if(rawUserData.listening_to_spotify) {
|
||||
finalActivity = {
|
||||
type: "listening",
|
||||
name: rawUserData.spotify.song,
|
||||
artist: rawUserData.spotify.artist
|
||||
};
|
||||
};
|
||||
return finalActivity;
|
||||
})();
|
||||
---
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
}
|
||||
p {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
margin-left: 10px;
|
||||
}
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
{
|
||||
activity.type !== undefined &&
|
||||
<div>
|
||||
<img src={activity.type === "playing" ? "/game.ico" : "/music.ico"}>
|
||||
<p>{`${activity.type === "playing" ? "Playing" : "Listening to"} ${activity.name}${activity.type === "listening" ? ` - ${activity.artist}` : ""}`}</p>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
---
|
||||
const {platform, name, url, note} = Astro.props;
|
||||
---
|
||||
|
||||
<style>
|
||||
bl {
|
||||
font-weight: 500;
|
||||
}
|
||||
it {
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
|
||||
<li>
|
||||
<bl>{platform}</bl>: {url ? <a href={url}>{name}</a> : name}{note && <it> ({note})</it>}
|
||||
</li>
|
||||
|
|
@ -1 +0,0 @@
|
|||
<span />
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
---
|
||||
const {title, showClose, maxWidth} = Astro.props
|
||||
---
|
||||
|
||||
<style define:vars={{ maxWidth }}>
|
||||
.window {
|
||||
max-width: var(--maxWidth);
|
||||
position: absolute;
|
||||
}
|
||||
.window-body {
|
||||
padding: 20px !important;
|
||||
}
|
||||
@media (pointer:coarse) {
|
||||
.window {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
margin: 5%;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="background" class="window">
|
||||
<div class="window glass active" style="max-width: 100%">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">{title}</div>
|
||||
{
|
||||
showClose &&
|
||||
<div class="title-bar-controls">
|
||||
<button aria-label="Close" onclick="window.close()"></button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="window-body has-space">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
29
src/components/commonComponents/Button.astro
Normal file
29
src/components/commonComponents/Button.astro
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
---
|
||||
const { position, text, url, id, onClick } = Astro.props;
|
||||
---
|
||||
|
||||
<style>
|
||||
button,
|
||||
a {
|
||||
width: 100%;
|
||||
}
|
||||
button {
|
||||
background-color: #45475a;
|
||||
border: 1px var(--text) solid;
|
||||
border-radius: 10px;
|
||||
color: var(--text);
|
||||
padding: 8px 20px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #585b70;
|
||||
}
|
||||
</style>
|
||||
{
|
||||
url ? (
|
||||
<a href={url}>
|
||||
<button id={id}>{text}</button>
|
||||
</a>
|
||||
) : (
|
||||
<button id={id}>{text}</button>
|
||||
)
|
||||
}
|
||||
11
src/components/commonComponents/ButtonCollection.astro
Normal file
11
src/components/commonComponents/ButtonCollection.astro
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<style>
|
||||
div {
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
row-gap: 8px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
</style>
|
||||
<div class="button-collection">
|
||||
<slot />
|
||||
</div>
|
||||
19
src/components/commonComponents/GroupBox.astro
Normal file
19
src/components/commonComponents/GroupBox.astro
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
---
|
||||
const { name } = Astro.props;
|
||||
---
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 0px;
|
||||
padding: 0px 15px;
|
||||
border-radius: 15px;
|
||||
border: 1px solid #313244;
|
||||
background-color: #313244;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<h3>{name}</h3>
|
||||
<slot />
|
||||
</div>
|
||||
1
src/components/commonComponents/Spacer.astro
Normal file
1
src/components/commonComponents/Spacer.astro
Normal file
|
|
@ -0,0 +1 @@
|
|||
<span></span>
|
||||
89
src/components/commonComponents/Window.astro
Normal file
89
src/components/commonComponents/Window.astro
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
---
|
||||
const { title, showClose, maxWidth, hideByDefault, customClass, offset } =
|
||||
Astro.props;
|
||||
|
||||
const randomID = customClass || Math.random().toString().replace(".", "");
|
||||
---
|
||||
|
||||
<style define:vars={{ maxWidth, offset }}>
|
||||
.window {
|
||||
width: var(--maxWidth);
|
||||
top: var(--offset);
|
||||
left: var(--offset);
|
||||
position: absolute;
|
||||
}
|
||||
.title-bar {
|
||||
.title-bar-text {
|
||||
margin-top: 2.5px !important;
|
||||
}
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #313244;
|
||||
border-radius: 15px 15px 0 0;
|
||||
padding: 9px 18px 9px 18px;
|
||||
}
|
||||
svg {
|
||||
fill: var(--text);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 24px !important;
|
||||
}
|
||||
#close {
|
||||
background: none;
|
||||
color: inherit;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 24px !important;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
outline: inherit;
|
||||
}
|
||||
.window-body {
|
||||
padding: 20px !important;
|
||||
background-color: #1e1e2e;
|
||||
border-radius: 0 0 20px 20px;
|
||||
}
|
||||
@media (pointer: coarse) {
|
||||
.window {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
margin: 5%;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div
|
||||
class="background"
|
||||
id={`window-${randomID}`}
|
||||
class="window"
|
||||
style={hideByDefault && "display: none;"}
|
||||
>
|
||||
<div class="window" style="max-width: 100%">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">{title}</div>
|
||||
{
|
||||
showClose && (
|
||||
<button
|
||||
id="close"
|
||||
aria-label="Close"
|
||||
onclick={`document.querySelector("#window-${randomID}").style.display = "none";`}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24px"
|
||||
viewBox="0 -960 960 960"
|
||||
>
|
||||
<path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
|
||||
</svg>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<div class="window-body">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
34
src/components/windows/code/CodeWindow.astro
Normal file
34
src/components/windows/code/CodeWindow.astro
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
---
|
||||
import GroupBox from "@components/GroupBox.astro";
|
||||
import Window from "@components/Window.astro";
|
||||
---
|
||||
|
||||
<Window
|
||||
title="Code"
|
||||
maxWidth="400px"
|
||||
showClose={true}
|
||||
hideByDefault={true}
|
||||
customClass="code-window"
|
||||
offset="55px"
|
||||
>
|
||||
<p>
|
||||
As mentioned in the main page, I write code. Some used by a lot, some
|
||||
not as much. You can find it on:
|
||||
<GroupBox name="GitHub (@nin0-dev)">
|
||||
Here, you'll find most of my external contributions. I rarely start
|
||||
personal projects on GitHub.
|
||||
<br />
|
||||
<a href="https://gh.nin0.dev">Go!</a>
|
||||
<br />
|
||||
<br />
|
||||
</GroupBox>
|
||||
<GroupBox name="Forgejo (@nin0)">
|
||||
Some more personal/niche projects can be found on my own instance
|
||||
(git.nin0.dev), which will probably be down.
|
||||
<br />
|
||||
<a href="https://git.nin0.dev/nin0">Go!</a>
|
||||
<br />
|
||||
<br />
|
||||
</GroupBox>
|
||||
</p>
|
||||
</Window>
|
||||
22
src/components/windows/mainWindow/Contacts.astro
Normal file
22
src/components/windows/mainWindow/Contacts.astro
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
---
|
||||
import Social from "./Social.astro";
|
||||
|
||||
const contacts: any = Object.values(
|
||||
import.meta.glob("../../../../info/contacts/*.md", {
|
||||
eager: true
|
||||
})
|
||||
);
|
||||
---
|
||||
|
||||
<ul>
|
||||
{
|
||||
contacts.map(contact => (
|
||||
<Social
|
||||
platform={contact.frontmatter.platform}
|
||||
url={contact.frontmatter.url}
|
||||
name={contact.frontmatter.name}
|
||||
note={contact.frontmatter.note}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
28
src/components/windows/mainWindow/FearOfTechnology.astro
Normal file
28
src/components/windows/mainWindow/FearOfTechnology.astro
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<style>
|
||||
div {
|
||||
color: black;
|
||||
background-color: lightcoral;
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
a {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<noscript>
|
||||
<div>
|
||||
<p>
|
||||
<h4>ENABLE JAVASCRIPT OR I WILL KILL YOU</h4>
|
||||
I will not. However, you seem to be living in fear of technology, as
|
||||
you have JavaScript disabled. This means that some features (eg. dragging,
|
||||
submitting forms) will not work. Enable JS to fully enjoy this website!
|
||||
<br />
|
||||
Rest assured, there's no external tracking. You can check this site's
|
||||
source code on the <a href="https://git.nin0.dev/nin0/website"
|
||||
>nin0/website</a
|
||||
> repository on my Forgejo.
|
||||
</p>
|
||||
</div>
|
||||
</noscript>
|
||||
36
src/components/windows/mainWindow/MainWindow.astro
Normal file
36
src/components/windows/mainWindow/MainWindow.astro
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
---
|
||||
import Contacts from "./Contacts.astro";
|
||||
import GroupBox from "@components/GroupBox.astro";
|
||||
import Me from "./Me";
|
||||
import Window from "@components/Window.astro";
|
||||
import Button from "@components/Button.astro";
|
||||
import ButtonCollection from "@components/ButtonCollection.astro";
|
||||
import Spacer from "@components/Spacer.astro";
|
||||
---
|
||||
|
||||
<script>
|
||||
document
|
||||
.querySelector("#show-code-window")
|
||||
.addEventListener("click", () => {
|
||||
// @ts-ignore
|
||||
document.querySelector("#window-code-window").style.display =
|
||||
"block";
|
||||
});
|
||||
</script>
|
||||
|
||||
<Window title="Home" maxWidth="600px" showClose={false}>
|
||||
<Me client:only />
|
||||
<ButtonCollection>
|
||||
<Button position="left" text="My code" id="show-code-window" />
|
||||
</ButtonCollection>
|
||||
<GroupBox name="About me">
|
||||
<p>
|
||||
I'm a Canadian self-taught software developer.
|
||||
<br />
|
||||
I also make things that some people use with varying degrees of usefulness.
|
||||
</p>
|
||||
</GroupBox>
|
||||
<GroupBox name="Reach out">
|
||||
<Contacts />
|
||||
</GroupBox>
|
||||
</Window>
|
||||
161
src/components/windows/mainWindow/Me.tsx
Normal file
161
src/components/windows/mainWindow/Me.tsx
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
import "@css/me.css";
|
||||
import { initLanyard } from "@js/lanyard/lanyard";
|
||||
import { type LanyardPresence } from "../../../js/lanyard/types";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function Me() {
|
||||
// me-e-eeeee
|
||||
const [presence, setPresence] = useState<LanyardPresence | undefined>();
|
||||
const [currentlyPlaying, setCurrentlyPlaying] = useState<
|
||||
| {
|
||||
title: string;
|
||||
artist: string;
|
||||
album: string;
|
||||
albumArt: string;
|
||||
loved: boolean;
|
||||
streak: number;
|
||||
}
|
||||
| undefined
|
||||
>();
|
||||
|
||||
useEffect(() => {
|
||||
initLanyard(presence => {
|
||||
console.log(presence);
|
||||
setPresence(presence);
|
||||
});
|
||||
|
||||
async function getLastFmTracks() {
|
||||
const params = new URLSearchParams({
|
||||
method: "user.getrecenttracks",
|
||||
api_key: "3c5623fa1abbd11c49f53ca18e992ead",
|
||||
user: "nin0dev",
|
||||
limit: "50",
|
||||
format: "json",
|
||||
extended: "true"
|
||||
});
|
||||
|
||||
const res = await (
|
||||
await fetch(`https://ws.audioscrobbler.com/2.0/?${params}`)
|
||||
).json();
|
||||
|
||||
if (
|
||||
res.recenttracks.track.some(t => {
|
||||
try {
|
||||
return t["@attr"].nowplaying === "true";
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
) {
|
||||
const currentlyPlayingTrack = res.recenttracks.track[0];
|
||||
setCurrentlyPlaying({
|
||||
title: currentlyPlayingTrack.name,
|
||||
artist: currentlyPlayingTrack.artist.name,
|
||||
album: currentlyPlayingTrack.album["#text"],
|
||||
albumArt: currentlyPlayingTrack.image[1]["#text"],
|
||||
loved: currentlyPlayingTrack.loved === "1",
|
||||
streak: (() => {
|
||||
let current = 0;
|
||||
for (const track of res.recenttracks.track) {
|
||||
if (track.name === currentlyPlayingTrack.name)
|
||||
current++;
|
||||
else return current;
|
||||
}
|
||||
})()
|
||||
});
|
||||
} else {
|
||||
setCurrentlyPlaying(undefined);
|
||||
}
|
||||
}
|
||||
|
||||
getLastFmTracks();
|
||||
setInterval(getLastFmTracks, 10000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="me-container">
|
||||
<img src="logo.png" alt="the nin0 logo" />
|
||||
<h3>
|
||||
nin0 <span style={{ fontSize: "0.9rem" }}>(he/him)</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{currentlyPlaying && (
|
||||
<div className="spotify-card">
|
||||
<h3>Listening to</h3>
|
||||
<div
|
||||
className="spotify-card-background"
|
||||
style={{
|
||||
backgroundImage: `url(${currentlyPlaying.albumArt})`
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
className="spotify-card-content"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginBottom: "10px"
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={currentlyPlaying.albumArt}
|
||||
style={{
|
||||
marginRight: "10px",
|
||||
width: "50px",
|
||||
borderRadius: "5px"
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<p style={{ margin: "0", fontWeight: "600" }}>
|
||||
{currentlyPlaying.title}
|
||||
</p>
|
||||
<p style={{ margin: "0" }}>
|
||||
<span className="prefix">by </span>
|
||||
{currentlyPlaying.artist}
|
||||
</p>
|
||||
<p style={{ margin: "0" }}>
|
||||
<span className="prefix">on </span>
|
||||
{currentlyPlaying.album}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style={{ fontSize: "0.9rem" }} className="emoji">
|
||||
{(() => {
|
||||
const flags: {
|
||||
color: string;
|
||||
data: string;
|
||||
}[] = [];
|
||||
if (currentlyPlaying.loved)
|
||||
flags.push({
|
||||
color: "#f38ba8",
|
||||
data: "💞 Loved track"
|
||||
});
|
||||
if (currentlyPlaying.streak > 1) {
|
||||
flags.push({
|
||||
color: "#f9e2af",
|
||||
data: `⚡ Played ${currentlyPlaying.streak} times in a row`
|
||||
});
|
||||
}
|
||||
return flags.map(flag => (
|
||||
<span
|
||||
style={{ color: flag.color }}
|
||||
className="emoji"
|
||||
key={flag.color}
|
||||
>
|
||||
{flag.data}{" "}
|
||||
{flags.indexOf(flag) !==
|
||||
flags.length - 1 && (
|
||||
<span style={{ color: "white" }}>
|
||||
{" "}•{" "}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
));
|
||||
})()}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
18
src/components/windows/mainWindow/Social.astro
Normal file
18
src/components/windows/mainWindow/Social.astro
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
const { platform, name, url, note } = Astro.props;
|
||||
---
|
||||
|
||||
<style>
|
||||
bl {
|
||||
font-weight: 500;
|
||||
}
|
||||
it {
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
|
||||
<li>
|
||||
<bl>{platform}</bl>: {url ? <a href={url}>{name}</a> : name}{
|
||||
note && <it> ({note})</it>
|
||||
}
|
||||
</li>
|
||||
48
src/css/me.css
Normal file
48
src/css/me.css
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
.me-container {
|
||||
display: flex;
|
||||
h3 {
|
||||
color: #89b4fa;
|
||||
font-weight: 400;
|
||||
font-size: 2rem;
|
||||
margin-left: 20px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 10px black;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
.spotify-card {
|
||||
h3 {
|
||||
margin: 13px 0;
|
||||
}
|
||||
.prefix {
|
||||
color: #a6adc8 !important;
|
||||
}
|
||||
.spotify-card-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
border-radius: 15px;
|
||||
filter: brightness(0.3) blur(8px);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
padding: 5px 15px;
|
||||
margin-top: 15px;
|
||||
border-radius: 15px;
|
||||
border: 2px solid #cdd6f4;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -1,11 +1,26 @@
|
|||
:root {
|
||||
--background: url("/background.png");
|
||||
--text: #cdd6f4;
|
||||
}
|
||||
* {
|
||||
font-family: Inter, sans-serif;
|
||||
}
|
||||
body {
|
||||
background-color: #56a0d1;
|
||||
background: var(--background);
|
||||
font-size: 0.95rem;
|
||||
color: var(--text);
|
||||
padding: 30px;
|
||||
font-family: sans-serif !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
a {
|
||||
color: #89b4fa;
|
||||
}
|
||||
@media (pointer: coarse) {
|
||||
body {
|
||||
overflow: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji {
|
||||
font-family: "Inter", "Noto Emoji Variable";
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
// wow i love being fake programmer
|
||||
// source: https://jams.hackclub.com/batch/webOS/part-3
|
||||
function dragElement(element) {
|
||||
export function dragElement(element) {
|
||||
var initialX = 0;
|
||||
var initialY = 0;
|
||||
var currentX = 0;
|
||||
|
|
@ -26,8 +26,6 @@ function dragElement(element) {
|
|||
currentY = initialY - e.clientY;
|
||||
initialX = e.clientX;
|
||||
initialY = e.clientY;
|
||||
console.log(element.offsetTop);
|
||||
console.log(currentX);
|
||||
element.style.top = element.offsetTop - currentY + "px";
|
||||
element.style.left = element.offsetLeft - currentX + "px";
|
||||
}
|
||||
|
|
@ -35,7 +33,5 @@ function dragElement(element) {
|
|||
function stopDragging() {
|
||||
document.onmouseup = null;
|
||||
document.onmousemove = null;
|
||||
console.log(element.offsetTop - currentY);
|
||||
console.log(element.offsetLeft - currentX);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1
src/js/lanyard/lanyard.d.ts
vendored
Normal file
1
src/js/lanyard/lanyard.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
declare module "@js/lanyard/lanyard";
|
||||
56
src/js/lanyard/lanyard.ts
Normal file
56
src/js/lanyard/lanyard.ts
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import type {
|
||||
AnyLanyardPayload,
|
||||
LanyardInitStatePayload,
|
||||
LanyardPayload,
|
||||
LanyardPresence,
|
||||
LanyardPresenceUpdatePayload
|
||||
} from "./types";
|
||||
|
||||
function sendToSocket(socket: WebSocket, data: AnyLanyardPayload) {
|
||||
socket.send(JSON.stringify(data));
|
||||
}
|
||||
|
||||
export function initLanyard(
|
||||
updateCallback: (presence: LanyardPresence) => void
|
||||
) {
|
||||
const socket = new WebSocket("wss://api.lanyard.rest/socket");
|
||||
socket.onmessage = data => {
|
||||
const payload: LanyardPayload = JSON.parse(data.data);
|
||||
switch (payload.op) {
|
||||
case 1: {
|
||||
// Initialize
|
||||
sendToSocket(socket, {
|
||||
op: 2,
|
||||
d: {
|
||||
subscribe_to_ids: ["886685857560539176"]
|
||||
}
|
||||
});
|
||||
|
||||
sendToSocket(socket, {
|
||||
op: 3
|
||||
});
|
||||
setInterval(
|
||||
() => {
|
||||
sendToSocket(socket, {
|
||||
op: 3
|
||||
});
|
||||
},
|
||||
"heartbeat_interval" in payload.d
|
||||
? payload.d.heartbeat_interval
|
||||
: 30000
|
||||
);
|
||||
break;
|
||||
}
|
||||
case 0: {
|
||||
const typedPayload = payload as
|
||||
| LanyardInitStatePayload
|
||||
| LanyardPresenceUpdatePayload;
|
||||
updateCallback(
|
||||
typedPayload.t === "INIT_STATE"
|
||||
? typedPayload.d["886685857560539176"]
|
||||
: typedPayload.d
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
65
src/js/lanyard/types.ts
Normal file
65
src/js/lanyard/types.ts
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
export interface LanyardPresence {
|
||||
listening_to_spotify: boolean;
|
||||
spotify: {
|
||||
track_id: string;
|
||||
timestamps: {
|
||||
start: number;
|
||||
end: number;
|
||||
};
|
||||
song: string;
|
||||
artist: string;
|
||||
album_art_url: string;
|
||||
album: string;
|
||||
};
|
||||
discord_status: string;
|
||||
activities: {
|
||||
type: number;
|
||||
timestamps: {
|
||||
start: number;
|
||||
end: number;
|
||||
};
|
||||
state: string;
|
||||
name: string;
|
||||
id: string;
|
||||
details: string;
|
||||
assets: {
|
||||
small_text: string;
|
||||
small_image: string;
|
||||
large_text: string;
|
||||
large_image: string;
|
||||
};
|
||||
application_id: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
export interface AnyLanyardPayload {
|
||||
op: 0 | 1 | 2 | 3;
|
||||
d?: object;
|
||||
}
|
||||
|
||||
export interface LanyardHelloPayload {
|
||||
op: 1;
|
||||
d: {
|
||||
heartbeat_interval: number;
|
||||
};
|
||||
}
|
||||
|
||||
export interface LanyardInitStatePayload {
|
||||
op: 0;
|
||||
t: "INIT_STATE";
|
||||
d: {
|
||||
[user_id: string]: LanyardPresence;
|
||||
};
|
||||
}
|
||||
|
||||
export interface LanyardPresenceUpdatePayload {
|
||||
op: 0;
|
||||
t: "PRESENCE_UPDATE";
|
||||
d: LanyardPresence;
|
||||
}
|
||||
|
||||
export type LanyardPayload =
|
||||
| LanyardHelloPayload
|
||||
| LanyardInitStatePayload
|
||||
| LanyardPresenceUpdatePayload
|
||||
| AnyLanyardPayload;
|
||||
|
|
@ -1,76 +1,29 @@
|
|||
---
|
||||
import "7.css/dist/7.css";
|
||||
import "../css/style.css";
|
||||
import "@fontsource/inter";
|
||||
import "@fontsource-variable/noto-emoji";
|
||||
|
||||
const {tabTitle} = Astro.props;
|
||||
const { tabTitle } = Astro.props;
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{tabTitle}</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
<script>
|
||||
function dragElement(element) {
|
||||
// Step 2: Set up variables to keep track of the element's position.
|
||||
var initialX = 0;
|
||||
var initialY = 0;
|
||||
var currentX = 0;
|
||||
var currentY = 0;
|
||||
|
||||
// Step 3: Check if there is a special header element associated with the draggable element.
|
||||
if (document.getElementById("title-bar")) {
|
||||
// Step 4: If present, assign the `dragMouseDown` function to the header's `onmousedown` event.
|
||||
// This allows you to drag the window around by its header.
|
||||
document.getElementById("title-bar").onmousedown = startDragging;
|
||||
} else {
|
||||
// Step 5: If not present, assign the function directly to the draggable element's `onmousedown` event.
|
||||
// This allows you to drag the window by holding down anywhere on the window.
|
||||
element.onmousedown = startDragging;
|
||||
}
|
||||
|
||||
// Step 6: Define the `startDragging` function to capture the initial mouse position and set up event listeners.
|
||||
function startDragging(e) {
|
||||
e = e || window.event;
|
||||
e.preventDefault();
|
||||
// Step 7: Get the mouse cursor position at startup.
|
||||
initialX = e.clientX;
|
||||
initialY = e.clientY;
|
||||
// Step 8: Set up event listeners for mouse movement (`elementDrag`) and mouse button release (`closeDragElement`).
|
||||
document.onmouseup = stopDragging;
|
||||
document.onmousemove = dragElement;
|
||||
}
|
||||
|
||||
// Step 9: Define the `elementDrag` function to calculate the new position of the element based on mouse movement.
|
||||
function dragElement(e) {
|
||||
e = e || window.event;
|
||||
e.preventDefault();
|
||||
// Step 10: Calculate the new cursor position.
|
||||
currentX = initialX - e.clientX;
|
||||
currentY = initialY - e.clientY;
|
||||
initialX = e.clientX;
|
||||
initialY = e.clientY;
|
||||
// Step 11: Update the element's new position by modifying its `top` and `left` CSS properties.
|
||||
element.style.top = (element.offsetTop - currentY) + "px";
|
||||
element.style.left = (element.offsetLeft - currentX) + "px";
|
||||
}
|
||||
|
||||
// Step 12: Define the `stopDragging` function to stop tracking mouse movement by removing the event listeners.
|
||||
function stopDragging() {
|
||||
document.onmouseup = null;
|
||||
document.onmousemove = null;
|
||||
}
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.querySelectorAll(".window").forEach(window => {
|
||||
dragElement(window);
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{tabTitle}</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
<script>
|
||||
import { dragElement } from "@js/drag";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.querySelectorAll(".window").forEach(window => {
|
||||
dragElement(window);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
---
|
||||
import FearOfTechnology from "../components/FearOfTechnology.astro";
|
||||
import MainWindow from "../components/MainWindow.astro";
|
||||
import FearOfTechnology from "@windows/mainWindow/FearOfTechnology.astro";
|
||||
import MainWindow from "@windows/mainWindow/MainWindow.astro";
|
||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
import Window from "@components/Window.astro";
|
||||
import CodeWindow from "@windows/code/CodeWindow.astro";
|
||||
---
|
||||
|
||||
<BaseLayout tabTitle="Home - nin0dev">
|
||||
<BaseLayout tabTitle="nin0.dev">
|
||||
<FearOfTechnology />
|
||||
<MainWindow />
|
||||
<CodeWindow />
|
||||
</BaseLayout>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue