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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue