0
fork

Configure Feed

Select the types of activity you want to include in your feed.

base - almost done ?

eti 4161d3de 5d656091

+306 -13
+6
bun.lock
··· 4 4 "": { 5 5 "name": "iwanttobeforeveryoung", 6 6 "dependencies": { 7 + "@fontsource/special-gothic": "^5.2.2", 7 8 "astro": "^5.7.13", 9 + "minireset.css": "^0.0.7", 8 10 }, 9 11 }, 10 12 }, ··· 80 82 "@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.25.4", "", { "os": "win32", "cpu": "ia32" }, "sha512-i1sW+1i+oWvQzSgfRcxxG2k4I9n3O9NRqy8U+uugaT2Dy7kLO9Y7wI72haOahxceMX8hZAzgGou1FhndRldxRg=="], 81 83 82 84 "@esbuild/win32-x64": ["@esbuild/win32-x64@0.25.4", "", { "os": "win32", "cpu": "x64" }, "sha512-nOT2vZNw6hJ+z43oP1SPea/G/6AbN6X+bGNhNuq8NtRHy4wsMhw765IKLNmnjek7GvjWBYQ8Q5VBoYTFg9y1UQ=="], 85 + 86 + "@fontsource/special-gothic": ["@fontsource/special-gothic@5.2.2", "", {}, "sha512-dvN6o7q54TZi2RQA88GRVKUF3QbRxm53WvtWcHuWUMb5OzdPVpyNeqKnRo9QhM2lqdhwi1QJlkwsSNbJiitl6w=="], 83 87 84 88 "@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.33.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.0.4" }, "os": "darwin", "cpu": "arm64" }, "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ=="], 85 89 ··· 478 482 "micromark-util-symbol": ["micromark-util-symbol@2.0.1", "", {}, "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q=="], 479 483 480 484 "micromark-util-types": ["micromark-util-types@2.0.2", "", {}, "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA=="], 485 + 486 + "minireset.css": ["minireset.css@0.0.7", "", {}, "sha512-raWKK2aHP/MI4Yu72dU6hade1YFuoyDQtSUi/FiIZfeRHjgL81uN/nFvG2aoAr+mseRc3jpg47jQqx1/+6w+kQ=="], 481 487 482 488 "mrmime": ["mrmime@2.0.1", "", {}, "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="], 483 489
+3 -1
package.json
··· 9 9 "astro": "astro" 10 10 }, 11 11 "dependencies": { 12 - "astro": "^5.7.13" 12 + "@fontsource/special-gothic": "^5.2.2", 13 + "astro": "^5.7.13", 14 + "minireset.css": "^0.0.7" 13 15 } 14 16 }
+11
src/components/head.astro
··· 1 + --- 2 + const title = "everything"; 3 + --- 4 + 5 + <head> 6 + <meta charset="utf-8" /> 7 + <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> 8 + <meta name="viewport" content="width=device-width" /> 9 + <meta name="generator" content={Astro.generator} /> 10 + <title>{title}</title> 11 + </head>
+121
src/components/list.astro
··· 1 + --- 2 + import externalItems from "@/resources/items.json"; 3 + const items = externalItems || Astro.props.items || []; 4 + --- 5 + 6 + <div class="list"> 7 + <div id="hover-image" class="hover-image"></div> 8 + { 9 + [...new Set(items.map((item) => item.year))] 10 + .sort((a, b) => b - a) 11 + .map((year) => ( 12 + <div class="list-group"> 13 + <h3 class="list-group-title">{year}</h3> 14 + <div class="list-group-items"> 15 + {items 16 + .filter((item) => item.year === year) 17 + .map((item, index) => ( 18 + <span class="list-group-item"> 19 + <a 20 + class="list-group-item-link" 21 + href={item.url || "#"} 22 + key={index} 23 + data-image={item.img} 24 + > 25 + {item.name} 26 + </a> 27 + <span class="list-group-item-type"> 28 + {item.type} 29 + </span> 30 + </span> 31 + ))} 32 + </div> 33 + </div> 34 + )) 35 + } 36 + </div> 37 + 38 + <style> 39 + .list { 40 + display: flex; 41 + flex-direction: column; 42 + gap: 12px; 43 + padding: 8px 6px; 44 + border: 1px solid #ccc; 45 + position: relative; 46 + 47 + .hover-image { 48 + opacity: 0; 49 + position: absolute; 50 + width: 200px; 51 + height: 200px; 52 + z-index: 10; 53 + pointer-events: none; 54 + background-size: cover; 55 + background-position: center; 56 + } 57 + 58 + .list-group { 59 + display: flex; 60 + flex-direction: column; 61 + gap: 4px; 62 + 63 + &:not(:last-child) { 64 + padding-bottom: 12px; 65 + border-bottom: 1px solid #ccc; 66 + } 67 + 68 + .list-group-items { 69 + display: flex; 70 + flex-direction: column; 71 + gap: 4px; 72 + 73 + .list-group-item { 74 + display: flex; 75 + flex-direction: row; 76 + align-items: center; 77 + gap: 8px; 78 + 79 + .list-group-item-type { 80 + font-size: 0.8rem; 81 + color: #444; 82 + border-radius: 4px; 83 + background-color: #f0f0f0; 84 + padding: 2px 4px 3px 4px; 85 + } 86 + } 87 + } 88 + } 89 + } 90 + </style> 91 + 92 + <script> 93 + const hoverImage = document.getElementById("hover-image"); 94 + const links = document.querySelectorAll(".list-group-item-link"); 95 + 96 + links.forEach((link) => { 97 + const imageUrl = link.getAttribute("data-image"); 98 + if (!imageUrl) return; 99 + 100 + link.addEventListener("mouseenter", () => { 101 + if (hoverImage) { 102 + hoverImage.style.backgroundImage = `url(${imageUrl})`; 103 + hoverImage.style.opacity = "1"; 104 + } 105 + }); 106 + 107 + link.addEventListener("mouseleave", () => { 108 + if (hoverImage) { 109 + hoverImage.style.opacity = "0"; 110 + } 111 + }); 112 + 113 + link.addEventListener("mousemove", (e) => { 114 + if (hoverImage) { 115 + const x = e.clientX; 116 + const y = e.clientY; 117 + hoverImage.style.transform = `translate(${x + 0}px, ${y - 48}px)`; 118 + } 119 + }); 120 + }); 121 + </script>
+25
src/components/socials.astro
··· 1 + --- 2 + import socials from "@/resources/socials.json"; 3 + --- 4 + 5 + <div class="socials"> 6 + { 7 + socials.map((item, index) => ( 8 + <a class="socials-item-link" href={item.url || "#"} key={index}> 9 + {item.name} 10 + </a> 11 + )) 12 + } 13 + </div> 14 + 15 + <style> 16 + .socials { 17 + display: flex; 18 + flex-direction: row; 19 + justify-content: end; 20 + gap: 8px; 21 + 22 + .socials-item-link { 23 + } 24 + } 25 + </style>
+79 -11
src/pages/index.astro
··· 1 1 --- 2 - 2 + import Head from "@/components/head.astro"; 3 + import List from "@/components/list.astro"; 4 + import Socials from "@/components/socials.astro"; 5 + import "minireset.css"; 6 + import "@fontsource/special-gothic"; 3 7 --- 4 8 5 9 <html lang="en"> 6 - <head> 7 - <meta charset="utf-8" /> 8 - <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> 9 - <meta name="viewport" content="width=device-width" /> 10 - <meta name="generator" content={Astro.generator} /> 11 - <title>Astro</title> 12 - </head> 13 - <body> 14 - <h1>Astro</h1> 15 - </body> 10 + <Head /> 11 + <body> 12 + <h1 class="title">everything (so far)</h1> 13 + <List /> 14 + <div class="bottom"> 15 + <Socials /> 16 + <span class="footer"> 17 + <span class="footer-author">eti / sds</span> 18 + <span class="footer-timestamp" 19 + >generated on {new Date().toLocaleDateString("en-FR")} at 20 + {new Date().toLocaleTimeString("en-FR")} 21 + </span> 22 + </span> 23 + </div> 24 + </body> 16 25 </html> 26 + 27 + <style is:global> 28 + html { 29 + font-family: "Special Gothic", sans-serif; 30 + display: flex; 31 + padding: 12px; 32 + min-height: 100vh; 33 + } 34 + 35 + body { 36 + display: flex; 37 + flex-direction: column; 38 + width: 500px; 39 + gap: 12px; 40 + } 41 + 42 + a { 43 + color: blue; 44 + 45 + &:visited { 46 + color: darkblue; 47 + } 48 + 49 + &:hover { 50 + font-style: italic; 51 + } 52 + } 53 + 54 + .bottom { 55 + display: flex; 56 + flex-direction: column; 57 + align-items: end; 58 + justify-content: end; 59 + height: 100%; 60 + } 61 + 62 + .footer { 63 + display: flex; 64 + flex-direction: row; 65 + justify-content: space-between; 66 + width: 100%; 67 + } 68 + 69 + @media screen and (min-width: 700px) { 70 + .bottom { 71 + height: inherit; 72 + } 73 + 74 + body { 75 + width: 600px; 76 + } 77 + } 78 + 79 + @media screen and (min-width: 1000px) { 80 + body { 81 + width: 700px; 82 + } 83 + } 84 + </style>
+44
src/resources/items.json
··· 1 + [ 2 + { 3 + "name": "23/24 🪁", 4 + "year": 2024, 5 + "type": "snippets", 6 + "url": "https://soundcloud.com/95ac0/23-24e", 7 + "img": "https://i1.sndcdn.com/artworks-5kRdDzYVctzAbomY-IcE2Tw-t500x500.jpg" 8 + }, 9 + { 10 + "name": "le rêve de morphée", 11 + "year": 2023, 12 + "type": "ep", 13 + "url": "https://imumcoeli.bandcamp.com/album/le-r-ve-de-morph-e", 14 + "img": "https://f4.bcbits.com/img/a0691794289_10.jpg" 15 + }, 16 + { 17 + "name": "lost ambient works (2)", 18 + "year": 2023, 19 + "type": "archive", 20 + "url": "https://sdsssss.bandcamp.com/album/lost-ambient-works-2", 21 + "img": "https://f4.bcbits.com/img/a1928912776_10.jpg" 22 + }, 23 + { 24 + "name": "live @spin_offf '23", 25 + "year": 2023, 26 + "type": "live", 27 + "url": "https://soundcloud.com/sdssssssssssssssss/live-spin_offf-23", 28 + "img": "https://i1.sndcdn.com/artworks-jwEgln8d169fqa6Z-6sbMnA-t500x500.jpg" 29 + }, 30 + { 31 + "name": "la maison du soleil", 32 + "year": 2022, 33 + "type": "ep", 34 + "url": "https://olgaproductions.bandcamp.com/album/la-maison-du-soleil", 35 + "img": "https://f4.bcbits.com/img/a2529116335_10.jpg" 36 + }, 37 + { 38 + "name": "lost ambient works (1)", 39 + "year": 2022, 40 + "type": "archive", 41 + "url": "https://sdsssss.bandcamp.com/album/lost-ambient-works-1", 42 + "img": "https://f4.bcbits.com/img/a3848085035_10.jpg" 43 + } 44 + ]
+10
src/resources/socials.json
··· 1 + [ 2 + { 3 + "name": "mastodon", 4 + "url": "https://foreveryou.ng/@eti" 5 + }, 6 + { 7 + "name": "instagram", 8 + "url": "https://www.instagram.com/sdssssssssssssssssss/" 9 + } 10 + ]
+7 -1
tsconfig.json
··· 1 1 { 2 2 "extends": "astro/tsconfigs/strict", 3 3 "include": [".astro/types.d.ts", "**/*"], 4 - "exclude": ["dist"] 4 + "exclude": ["dist"], 5 + "compilerOptions": { 6 + "baseUrl": ".", 7 + "paths": { 8 + "@/*": ["src/*"] 9 + } 10 + } 5 11 }