Fluffy/website
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/website.git synced 2025-01-14 10:35:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Generate Posts based on collection

Browse source 
Turn music component into a link
This commit is contained in:
Michał 2024-05-23 13:36:28 +01:00
parent d3dafddf74
commit 920f737fbe
2 changed files with 25 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/components/Music.astro
View file

@ -1,14 +1,14 @@
---
---
<div id="current-music">
<a id="current-music" href="https://www.last.fm/user/Fluffy_Bean_">
<img src="/leg.webp" alt="Track cover art" id="current-music-image"/>
<ul>
<li id="current-music-title">Track Name</li>
<li id="current-music-artist">by Artist</li>
<li id="current-music-album">on Album</li>
</ul>
</div>
</a>
<script>
const request = await fetch("https://lastfm-last-played.biancarosa.com.br/Fluffy_Bean_/latest-song");
@ -26,14 +26,15 @@
@import "../styles/vars.scss";
#current-music {
padding: 8px;
padding: 16px;
display: flex;
flex-direction: row;
text-decoration: none;
border-radius: $radius;
border: 2px solid $gray;
background-color: $dark;
background-color: $gray;
color: $light;
> img {
@ -54,5 +55,13 @@
list-style: none;
}
}
&:hover, &:focus-visible {
background-color: lighten($gray, 1%);
}
}
#current-music-title {
font-weight: bold;
}
</style>

25
src/pages/index.astro
View file

@ -9,16 +9,16 @@ const tools = ["Proxmox", "JetBrain IDEs", "Docker", "Linux", "SQLite", "Postgre
const languages = ["Go", "Python", "HTML", "CSS", "Sass", "TypeScript", "JavaScript", "Scratch", "PHP", "SQL", "Bash"];
const frameworks = ["Gin", "Echo", "Flask", "Svelte", "Astro", "raylib"];
const projects = await getCollection('projects');
const posts = await getCollection('posts');
---
<Layout title="Leggy Land" src="/banner.webp" alt="Temporary Banner">
<h1>Leggy Land</h1>
<p>Made with Coffee, lots of it.</p>
<div style="margin-top: 16px" />
<Music />
<div style="margin-top: 16px" />
<!--<hr>-->
<div style="margin: 16px 0">
<Music />
</div>
<section>
<h2>Who am I</h2>
@ -85,16 +85,13 @@ const projects = await getCollection('projects');
<section>
<h2>Recent Posts</h2>
<ul role="list" class="project-list">
<Card
href="/projects/example"
title="Bruh"
body="Lmao"
/>
<Card
href="/projects/example"
title="Aurgh"
body="Blowing up Blandfords"
/>
{posts.map(project => (
<Card
href=`/posts/${project.slug}`
title={project.data.title}
body={project.data.description}
/>
))}
</ul>
<a href="/posts" id="see-all-posts">See Posts</a>
</section>