Fluffy/website
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/website.git synced 2025-01-15 02:55:19 +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"/> <img src="/leg.webp" alt="Track cover art" id="current-music-image"/>
<ul> <ul>
<li id="current-music-title">Track Name</li> <li id="current-music-title">Track Name</li>
<li id="current-music-artist">by Artist</li> <li id="current-music-artist">by Artist</li>
<li id="current-music-album">on Album</li> <li id="current-music-album">on Album</li>
</ul> </ul>
</div> </a>
<script> <script>
const request = await fetch("https://lastfm-last-played.biancarosa.com.br/Fluffy_Bean_/latest-song"); const request = await fetch("https://lastfm-last-played.biancarosa.com.br/Fluffy_Bean_/latest-song");
@ -26,14 +26,15 @@
@import "../styles/vars.scss"; @import "../styles/vars.scss";
#current-music { #current-music {
padding: 8px; padding: 16px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
text-decoration: none;
border-radius: $radius; border-radius: $radius;
border: 2px solid $gray; background-color: $gray;
background-color: $dark;
color: $light; color: $light;
> img { > img {
@ -54,5 +55,13 @@
list-style: none; list-style: none;
} }
} }
&:hover, &:focus-visible {
background-color: lighten($gray, 1%);
}
}
#current-music-title {
font-weight: bold;
} }
</style> </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 languages = ["Go", "Python", "HTML", "CSS", "Sass", "TypeScript", "JavaScript", "Scratch", "PHP", "SQL", "Bash"];
const frameworks = ["Gin", "Echo", "Flask", "Svelte", "Astro", "raylib"]; const frameworks = ["Gin", "Echo", "Flask", "Svelte", "Astro", "raylib"];
const projects = await getCollection('projects'); const projects = await getCollection('projects');
const posts = await getCollection('posts');
--- ---
<Layout title="Leggy Land" src="/banner.webp" alt="Temporary Banner"> <Layout title="Leggy Land" src="/banner.webp" alt="Temporary Banner">
<h1>Leggy Land</h1> <h1>Leggy Land</h1>
<p>Made with Coffee, lots of it.</p> <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> <section>
<h2>Who am I</h2> <h2>Who am I</h2>
@ -85,16 +85,13 @@ const projects = await getCollection('projects');
<section> <section>
<h2>Recent Posts</h2> <h2>Recent Posts</h2>
<ul role="list" class="project-list"> <ul role="list" class="project-list">
<Card {posts.map(project => (
href="/projects/example" <Card
title="Bruh" href=`/posts/${project.slug}`
body="Lmao" title={project.data.title}
/> body={project.data.description}
<Card />
href="/projects/example" ))}
title="Aurgh"
body="Blowing up Blandfords"
/>
</ul> </ul>
<a href="/posts" id="see-all-posts">See Posts</a> <a href="/posts" id="see-all-posts">See Posts</a>
</section> </section>