comparing 1fa601d47ee26fb095f309bebbb3ff10de5b9352 and main on indexx.dev/static

+37

lexicons/dev/indexx/www/project.json

···

       1
       +
       {

     

       2
       +
         "lexicon": 1,

     

       3
       +
         "id": "dev.indexx.www.project",

     

       4
       +
         "defs": {

     

       5
       +
           "main": {

     

       6
       +
             "type": "record",

     

       7
       +
             "description": "Record containing details about one of my projects.",

     

       8
       +
             "key": "tid",

     

       9
       +
             "record": {

     

       10
       +
               "type": "object",

     

       11
       +
               "required": ["name", "description", "url", "dateLabel"],

     

       12
       +
               "properties": {

     

       13
       +
                 "name": {

     

       14
       +
                   "type": "string",

     

       15
       +
                   "description": "The name of the project."

     

       16
       +
                 },

     

       17
       +
                 "description": {

     

       18
       +
                   "type": "string",

     

       19
       +
                   "description": "The description of the project."

     

       20
       +
                 },

     

       21
       +
                 "url": {

     

       22
       +
                   "type": "string",

     

       23
       +
                   "description": "The URL of the project."

     

       24
       +
                 },

     

       25
       +
                 "note": {

     

       26
       +
                   "type": "string",

     

       27
       +
                   "description": "OPTIONAL: A note about the project."

     

       28
       +
                 },

     

       29
       +
                 "dateLabel": {

     

       30
       +
                   "type": "string",

     

       31
       +
                   "description": "The creation date of the project, not in any specific format."

     

       32
       +
                 }

     

       33
       +
               }

     

       34
       +
             }

     

       35
       +
           }

     

       36
       +
         }

     

       37
       +
       }

+34 -50

public/style.css

···

       1
        
       /* ---------------------------------------------------

     

       2
        
         VARIABLES & PROPERTIES

     

       3
        
       --------------------------------------------------- */

     

       4
       -
       @import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");

     

       5
        
       

     

       6
        
       :root {

     

       7
        
         --line: transparent;

     

       8
        
         --line-active: #ffffff;

     

       9
        
         --bg-gradient: linear-gradient(

     

       10
        
           45deg,

     

       11
       -
           rgb(0, 59, 74),

     

       12
        
           rgb(0, 35, 44),

     

       13
        
           rgb(0, 29, 36)

     

       14
        
         );

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       15
        
       }

     

       16
        
       

     

       17
        
       @property --animatedBorder {

     
···

       28
        
         font-family: "Nunito Sans", sans-serif;

     

       29
        
         width: 100%;

     

       30
        
         height: 100%;

     

       31
       -
         background: var(--bg-gradient);

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       32
        
       }

     

       33
        
       

     

       34
        
       a {

     
···

       70
        
       h1 {

     

       71
        
         color: #fff;

     

       72
        
         margin-bottom: 0;

     

       73
       -
         font-weight: 1000;

     

       0
        
       
     

       0
        
       
     

       74
        
         font-size: 4rem;

     

       75
        
       }

     

       76
        
       

     
···

       85
        
       }

     

       86
        
       

     

       87
        
       /* ---------------------------------------------------

     

       88
       -
         CIRCLE HOVER LINK

     

       89
       -
       --------------------------------------------------- */

     

       90
       -
       .circle-hover {

     

       91
       -
         display: inline-block;

     

       92
       -
         position: relative;

     

       93
       -
         margin: 0 var(--spacing, 0px);

     

       94
       -
         flex: 1;

     

       95
       -
         min-width: 0;

     

       96
       -
         transition: margin 0.25s;

     

       97
       -
       }

     

       98
       -
       

     

       99
       -
       .circle-hover:hover {

     

       100
       -
         --spacing: 4px;

     

       101
       -
         --stroke: var(--line-active);

     

       102
       -
         --stroke-delay: 0.1s;

     

       103
       -
         --offset: 180px;

     

       104
       -
         color: #fff !important;

     

       105
       -
       }

     

       106
       -
       

     

       107
       -
       .circle-hover svg {

     

       108
       -
         width: 76px;

     

       109
       -
         height: 40px;

     

       110
       -
         position: absolute;

     

       111
       -
         left: 50%;

     

       112
       -
         bottom: 0;

     

       113
       -
         transform: translate(-50%, 7px) translateZ(0);

     

       114
       -
         fill: none;

     

       115
       -
         stroke: var(--stroke, var(--line));

     

       116
       -
         stroke-linecap: round;

     

       117
       -
         stroke-width: 2px;

     

       118
       -
         stroke-dasharray: var(--offset, 69px) 278px;

     

       119
       -
         stroke-dashoffset: 361px;

     

       120
       -
         transition: stroke 0.25s ease var(--stroke-delay, 0s), stroke-dasharray 0.35s;

     

       121
       -
       }

     

       122
       -
       

     

       123
       -
       /* ---------------------------------------------------

     

       124
        
         PROJECTS SIDE PANE

     

       125
        
       --------------------------------------------------- */

     

       126
        
       #projects-pane {

     
···

       143
        
         padding-bottom: 20px;

     

       144
        
         overflow-y: scroll;

     

       145
        
         overflow-x: hidden;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       146
        
       }

     

       147
        
       

     

       148
        
       .project-card {

     
···

       160
        
       #now-playing {

     

       161
        
         position: fixed;

     

       162
        
         bottom: 20px;

     

       163
       -
         left: 50%;

     

       164
       -
         transform: translateX(-50%);

     

       165
        
         display: flex;

     

       166
        
         align-items: center;

     

       167
        
         gap: 12px;

     

       168
        
         padding: 8px;

     

       169
       -
         background-color: rgba(8, 61, 74, 0.42);

     

       170
        
         border-radius: 8px;

     

       171
        
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

     

       172
       -
         color: #000;

     

       173
       -
         text-align: right;

     

       174
        
         text-decoration: none;

     

       175
       -
         max-width: 400px;

     

       176
       -
         min-width: 300px;

     

       177
       -
         outline: 2px solid #0000001a;

     

       178
       -
         outline-offset: 5px;

     

       179
       -
         transition: opacity 0.2s;

     

       180
        
       }

     

       181
        
       

     

       182
        
       #now-playing img {

···

       1
        
       /* ---------------------------------------------------

     

       2
        
         VARIABLES & PROPERTIES

     

       3
        
       --------------------------------------------------- */

     

       4
       +
       @import url("https://fonts.googleapis.com/css2?family=Jua&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");

     

       5
        
       

     

       6
        
       :root {

     

       7
        
         --line: transparent;

     

       8
        
         --line-active: #ffffff;

     

       9
        
         --bg-gradient: linear-gradient(

     

       10
        
           45deg,

     

       11
       +
           rgb(0, 29, 36),

     

       12
        
           rgb(0, 35, 44),

     

       13
        
           rgb(0, 29, 36)

     

       14
        
         );

     

       15
       +
         --ring-center-x: 50%;

     

       16
       +
         --ring-pattern: repeating-radial-gradient(

     

       17
       +
           circle at var(--ring-center-x) center,

     

       18
       +
           transparent 0px,

     

       19
       +
           transparent 113px,

     

       20
       +
           rgba(0, 27, 34, 0.3) 203px,

     

       21
       +
           rgba(0, 74, 92, 0.136) 206px

     

       22
       +
         );

     

       23
       +
       

     

       24
       +
         transition: --ring-center-x 0.5s ease;

     

       25
        
       }

     

       26
        
       

     

       27
        
       @property --animatedBorder {

     
···

       38
        
         font-family: "Nunito Sans", sans-serif;

     

       39
        
         width: 100%;

     

       40
        
         height: 100%;

     

       41
       +
         background: var(--ring-pattern), var(--bg-gradient);

     

       42
       +
         background-blend-mode: normal;

     

       43
       +
       }

     

       44
       +
       

     

       45
       +
       :root:has(main#page.side) {

     

       46
       +
         --ring-center-x: 35%;

     

       47
        
       }

     

       48
        
       

     

       49
        
       a {

     
···

       85
        
       h1 {

     

       86
        
         color: #fff;

     

       87
        
         margin-bottom: 0;

     

       88
       +
         font-family: "Jua", sans-serif;

     

       89
       +
         font-weight: 400;

     

       90
       +
         font-style: normal;

     

       91
        
         font-size: 4rem;

     

       92
        
       }

     

       93
        
       

     
···

       102
        
       }

     

       103
        
       

     

       104
        
       /* ---------------------------------------------------

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       105
        
         PROJECTS SIDE PANE

     

       106
        
       --------------------------------------------------- */

     

       107
        
       #projects-pane {

     
···

       124
        
         padding-bottom: 20px;

     

       125
        
         overflow-y: scroll;

     

       126
        
         overflow-x: hidden;

     

       127
       +
       

     

       128
       +
         scrollbar-width: none;

     

       129
       +
         -ms-overflow-style: none;

     

       130
       +
       }

     

       131
       +
       

     

       132
       +
       #projects-pane ul::-webkit-scrollbar {

     

       133
       +
         display: none;

     

       134
        
       }

     

       135
        
       

     

       136
        
       .project-card {

     
···

       148
        
       #now-playing {

     

       149
        
         position: fixed;

     

       150
        
         bottom: 20px;

     

       151
       +
         left: 20px;

     

       0
        
       
     

       152
        
         display: flex;

     

       153
        
         align-items: center;

     

       154
        
         gap: 12px;

     

       155
        
         padding: 8px;

     

       156
       +
         background-color: rgba(0, 0, 0, 0.271);

     

       157
        
         border-radius: 8px;

     

       158
        
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

     

       159
       +
         color: #fff;

     

       160
       +
         text-align: left;

     

       161
        
         text-decoration: none;

     

       162
       +
         width: 300px;

     

       163
       +
         transition: opacity 0.2s, left 0.5s ease;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       164
        
       }

     

       165
        
       

     

       166
        
       #now-playing img {

+1 -14

src/assets/crown.svg

···

       1
       -
       <svg

     

       2
       -
         width="24"

     

       3
       -
         height="24"

     

       4
       -
         viewBox="0 0 24 24"

     

       5
       -
         fill="none"

     

       6
       -
         xmlns="http://www.w3.org/2000/svg"

     

       7
       -
       >

     

       8
       -
         <path

     

       9
       -
           fill-rule="evenodd"

     

       10
       -
           clip-rule="evenodd"

     

       11
       -
           d="M2.5 6.09143L7.21997 10.8114L12.0005 6.03088L16.7811 10.8114L21.5 6.09245V14.9691C21.5 16.626 20.1569 17.9691 18.5 17.9691H5.5C3.84314 17.9691 2.5 16.626 2.5 14.9691V6.09143ZM19.5 10.9087V14.9691C19.5 15.5214 19.0523 15.9691 18.5 15.9691H5.5C4.94771 15.9691 4.5 15.5214 4.5 14.9691V10.9077L7.21997 13.6277L12.0005 8.84717L16.7811 13.6277L19.5 10.9087Z"

     

       12
       -
           fill="currentColor"

     

       13
       -
         />

     

       14
       -
       </svg>

···

       1
       +
       <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 24 24"><path fill="#ffd700" d="M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11zm14 3c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1v-1h14z"/></svg>
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0

-27

src/components/Header.astro

···

       1
       -
       <section id="header">

     

       2
       -
         <h1 class="animated-border unselectable spin">

     

       3
       -
           <svg

     

       4
       -
             width="24"

     

       5
       -
             height="24"

     

       6
       -
             viewBox="0 0 24 24"

     

       7
       -
             fill="none"

     

       8
       -
             xmlns="http://www.w3.org/2000/svg"

     

       9
       -
             style="position: absolute; top: -5px; margin-left: -2px; transform: rotate(-10deg); color: gold;"

     

       10
       -
           >

     

       11
       -
             <path

     

       12
       -
               fill-rule="evenodd"

     

       13
       -
               clip-rule="evenodd"

     

       14
       -
               d="M2.5 6.09143L7.21997 10.8114L12.0005 6.03088L16.7811 10.8114L21.5 6.09245V14.9691C21.5 16.626 20.1569 17.9691 18.5 17.9691H5.5C3.84314 17.9691 2.5 16.626 2.5 14.9691V6.09143ZM19.5 10.9087V14.9691C19.5 15.5214 19.0523 15.9691 18.5 15.9691H5.5C4.94771 15.9691 4.5 15.5214 4.5 14.9691V10.9077L7.21997 13.6277L12.0005 8.84717L16.7811 13.6277L19.5 10.9087Z"

     

       15
       -
               fill="currentColor"></path>

     

       16
       -
           </svg>

     

       17
       -
           <span style="position: relative; z-index: 2;">index</span>

     

       18
       -
         </h1>

     

       19
       -
         <span style="display: block; margin-top: -5px;"

     

       20
       -
           >hey, i'm index. have a great day 👋</span

     

       21
       -
         >

     

       22
       -
         <small

     

       23
       -
           style="display: block; margin-top: -5px;margin-bottom:10px;color: rgb(0, 84, 106);font-size: 0.9rem;"

     

       24
       -
         >

     

       25
       -
           he/him

     

       26
       -
         </small>

     

       27
       -
       </section>

-27

src/components/ProjectCard.astro

···

       1
       -
       ---

     

       2
       -
       interface Props {

     

       3
       -
         title: string;

     

       4
       -
         description: string;

     

       5
       -
         date: string;

     

       6
       -
         href: string;

     

       7
       -
         note?: string;

     

       8
       -
       }

     

       9
       -
       

     

       10
       -
       const { title, description, date, href, note } = Astro.props;

     

       11
       -
       ---

     

       12
       -
       

     

       13
       -
       <a href={href} target="_blank" class="text-reset">

     

       14
       -
         <div class="project-card" style="color: #fff;">

     

       15
       -
           <small class="text-muted">{date}</small>

     

       16
       -
           <h4>{title}</h4>

     

       17
       -
           {description}

     

       18
       -
           {

     

       19
       -
             note && (

     

       20
       -
               <>

     

       21
       -
                 <br />

     

       22
       -
                 <small class="text-muted">{note}</small>

     

       23
       -
               </>

     

       24
       -
             )

     

       25
       -
           }

     

       26
       -
         </div>

     

       27
       -
       </a>

-19

src/components/ProjectsPane.astro

···

       1
       -
       ---

     

       2
       -
       import { projects } from "../data/projects";

     

       3
       -
       import ProjectCard from "./ProjectCard.astro";

     

       4
       -
       ---

     

       5
       -
       

     

       6
       -
       <section id="projects-pane" data-bs-theme="dark">

     

       7
       -
         <h6

     

       8
       -
           class="text-muted text-center"

     

       9
       -
           style="text-transform: uppercase; letter-spacing: 5px;"

     

       10
       -
         >

     

       11
       -
           (SOME OF) MY PROJECTS

     

       12
       -
         </h6>

     

       13
       -
       

     

       14
       -
         <ul class="list-unstyled">

     

       15
       -
           <li>

     

       16
       -
             {projects.map((project) => <ProjectCard {...project} />)}

     

       17
       -
           </li>

     

       18
       -
         </ul>

     

       19
       -
       </section>

-43

src/components/SocialLink.astro

···

       1
       -
       ---

     

       2
       -
       import type { JSX } from "astro/jsx-runtime";

     

       3
       -
       

     

       4
       -
       interface Props {

     

       5
       -
         icon?: any;

     

       6
       -
         name: string;

     

       7
       -
         href: string;

     

       8
       -
         tooltip?: {

     

       9
       -
           title: string;

     

       10
       -
           placement?: string;

     

       11
       -
         };

     

       12
       -
         rel?: string;

     

       13
       -
       }

     

       14
       -
       

     

       15
       -
       const { icon, name, href, tooltip, rel } = Astro.props;

     

       16
       -
       

     

       17
       -
       const Icon = icon;

     

       18
       -
       ---

     

       19
       -
       

     

       20
       -
       <a

     

       21
       -
         rel={rel}

     

       22
       -
         href={href}

     

       23
       -
         target="_blank"

     

       24
       -
         {...tooltip && {

     

       25
       -
           "data-bs-toggle": "tooltip",

     

       26
       -
           "data-bs-title": tooltip.title,

     

       27
       -
           "data-bs-placement": tooltip.placement || "bottom",

     

       28
       -
         }}

     

       29
       -
       >

     

       30
       -
         <span class="icon-hover">

     

       31
       -
           {Icon ? <Icon style="width: 35px; height: 35px;" /> : name}

     

       32
       -
         </span>

     

       33
       -
       </a>

     

       34
       -
       

     

       35
       -
       <style>

     

       36
       -
         .icon-hover {

     

       37
       -
           display: inline-block;

     

       38
       -
           transition: transform 0.2s ease;

     

       39
       -
         }

     

       40
       -
         a:hover .icon-hover {

     

       41
       -
           transform: scale(1.12);

     

       42
       -
         }

     

       43
       -
       </style>

-35

src/components/SocialLinks.astro

···

       1
       -
       ---

     

       2
       -
       import Bluesky from "./icons/Bluesky.astro";

     

       3
       -
       import Discord from "./icons/Discord.astro";

     

       4
       -
       import SocialLink from "./SocialLink.astro";

     

       5
       -
       import Tangled from "./icons/Tangled.astro";

     

       6
       -
       

     

       7
       -
       const links = [

     

       8
       -
         {

     

       9
       -
           icon: Bluesky,

     

       10
       -
           name: "Bluesky",

     

       11
       -
           href: "https://bsky.app/profile/did:plc:sfjxpxxyvewb2zlxwoz2vduw",

     

       12
       -
         },

     

       13
       -
         {

     

       14
       -
           icon: Discord,

     

       15
       -
           name: "Discord",

     

       16
       -
           href: "https://discord.com/users/589386198011871233",

     

       17
       -
           tooltip: {

     

       18
       -
             title: "index.lua",

     

       19
       -
             placement: "top",

     

       20
       -
           },

     

       21
       -
         },

     

       22
       -
         {

     

       23
       -
           icon: Tangled,

     

       24
       -
           name: "Tangled",

     

       25
       -
           href: "https://tangled.org/@indexx.dev",

     

       26
       -
         },

     

       27
       -
       ];

     

       28
       -
       ---

     

       29
       -
       

     

       30
       -
       <ul

     

       31
       -
         class="d-flex mt-4 mb-3"

     

       32
       -
         style="padding: 0px; width: 50%; margin: auto; justify-content: space-evenly; flex-basis: 33%;"

     

       33
       -
       >

     

       34
       -
         {links.map((link) => <SocialLink {...link} />)}

     

       35
       -
       </ul>

+27

src/components/astro/Header.astro

···

       1
       +
       <section id="header">

     

       2
       +
         <h1 class="animated-border unselectable spin">

     

       3
       +
           <svg

     

       4
       +
             xmlns="http://www.w3.org/2000/svg"

     

       5
       +
             width="24"

     

       6
       +
             height="24"

     

       7
       +
             viewBox="0 0 24 24"

     

       8
       +
             style="position: absolute; top: -5px; margin-left: -7px; transform: rotate(-10deg); z-index: 2000;"

     

       9
       +
             ><path

     

       10
       +
               fill="gold"

     

       11
       +
               d="M5 16 3 5l5.5 5L12 4l3.5 6L21 5l-2 11zm14 3c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1v-1h14z"

     

       12
       +
             ></path></svg

     

       13
       +
           >

     

       14
       +
           <span style="position: relative; z-index: 2;">index</span>

     

       15
       +
         </h1>

     

       16
       +
         <span style="display: block; margin-top: -5px;"

     

       17
       +
           >hey, i'm index. have a great day 👋</span

     

       18
       +
         >

     

       19
       +
         <span style="display: block; margin-top: -5px;"

     

       20
       +
           >i do stuff in typescript sometimes</span

     

       21
       +
         >

     

       22
       +
         <small

     

       23
       +
           style="display: block; margin-top: -5px;margin-bottom:10px;color: rgb(0, 84, 106);font-size: 0.9rem;"

     

       24
       +
         >

     

       25
       +
           he/him

     

       26
       +
         </small>

     

       27
       +
       </section>

+27

src/components/astro/ProjectCard.astro

···

       1
       +
       ---

     

       2
       +
       interface Props {

     

       3
       +
         title: string;

     

       4
       +
         description: string;

     

       5
       +
         date: string;

     

       6
       +
         href: string;

     

       7
       +
         note?: string;

     

       8
       +
       }

     

       9
       +
       

     

       10
       +
       const { title, description, date, href, note } = Astro.props;

     

       11
       +
       ---

     

       12
       +
       

     

       13
       +
       <a href={href} target="_blank" class="text-reset">

     

       14
       +
         <div class="project-card" style="color: #fff;">

     

       15
       +
           <small class="text-muted">{date}</small>

     

       16
       +
           <h4>{title}</h4>

     

       17
       +
           {description}

     

       18
       +
           {

     

       19
       +
             note && (

     

       20
       +
               <>

     

       21
       +
                 <br />

     

       22
       +
                 <small class="text-muted">{note}</small>

     

       23
       +
               </>

     

       24
       +
             )

     

       25
       +
           }

     

       26
       +
         </div>

     

       27
       +
       </a>

+43

src/components/astro/SocialLink.astro

···

       1
       +
       ---

     

       2
       +
       import type { JSX } from "astro/jsx-runtime";

     

       3
       +
       

     

       4
       +
       interface Props {

     

       5
       +
         icon?: any;

     

       6
       +
         name: string;

     

       7
       +
         href: string;

     

       8
       +
         tooltip?: {

     

       9
       +
           title: string;

     

       10
       +
           placement?: string;

     

       11
       +
         };

     

       12
       +
         rel?: string;

     

       13
       +
       }

     

       14
       +
       

     

       15
       +
       const { icon, name, href, tooltip, rel } = Astro.props;

     

       16
       +
       

     

       17
       +
       const Icon = icon;

     

       18
       +
       ---

     

       19
       +
       

     

       20
       +
       <a

     

       21
       +
         rel={rel}

     

       22
       +
         href={href}

     

       23
       +
         target="_blank"

     

       24
       +
         {...tooltip && {

     

       25
       +
           "data-bs-toggle": "tooltip",

     

       26
       +
           "data-bs-title": tooltip.title,

     

       27
       +
           "data-bs-placement": tooltip.placement || "bottom",

     

       28
       +
         }}

     

       29
       +
       >

     

       30
       +
         <span class="icon-hover">

     

       31
       +
           {Icon ? <Icon style="width: 35px; height: 35px;" /> : name}

     

       32
       +
         </span>

     

       33
       +
       </a>

     

       34
       +
       

     

       35
       +
       <style>

     

       36
       +
         .icon-hover {

     

       37
       +
           display: inline-block;

     

       38
       +
           transition: transform 0.2s ease;

     

       39
       +
         }

     

       40
       +
         a:hover .icon-hover {

     

       41
       +
           transform: scale(1.12);

     

       42
       +
         }

     

       43
       +
       </style>

+35

src/components/astro/SocialLinks.astro

···

       1
       +
       ---

     

       2
       +
       import Bluesky from "../icons/Bluesky.astro";

     

       3
       +
       import Discord from "../icons/Discord.astro";

     

       4
       +
       import SocialLink from "./SocialLink.astro";

     

       5
       +
       import Tangled from "../icons/Tangled.astro";

     

       6
       +
       

     

       7
       +
       const links = [

     

       8
       +
         {

     

       9
       +
           icon: Bluesky,

     

       10
       +
           name: "Bluesky",

     

       11
       +
           href: "https://bsky.app/profile/did:plc:sfjxpxxyvewb2zlxwoz2vduw",

     

       12
       +
         },

     

       13
       +
         {

     

       14
       +
           icon: Discord,

     

       15
       +
           name: "Discord",

     

       16
       +
           href: "https://discord.com/users/589386198011871233",

     

       17
       +
           tooltip: {

     

       18
       +
             title: "index.lua",

     

       19
       +
             placement: "top",

     

       20
       +
           },

     

       21
       +
         },

     

       22
       +
         {

     

       23
       +
           icon: Tangled,

     

       24
       +
           name: "Tangled",

     

       25
       +
           href: "https://tangled.org/@indexx.dev",

     

       26
       +
         },

     

       27
       +
       ];

     

       28
       +
       ---

     

       29
       +
       

     

       30
       +
       <ul

     

       31
       +
         class="d-flex mt-3 mb-3"

     

       32
       +
         style="padding: 0px; width: 50%; margin: auto; justify-content: center; gap: 20px;"

     

       33
       +
       >

     

       34
       +
         {links.map((link) => <SocialLink {...link} />)}

     

       35
       +
       </ul>

-100

src/components/islands/NowPlaying.jsx

···

       1
       -
       import { useEffect, useState } from "react";

     

       2
       -
       

     

       3
       -
       export default function NowPlaying() {

     

       4
       -
           const [data, setData] = useState(null);

     

       5
       -
           const [error, setError] = useState(null);

     

       6
       -
       

     

       7
       -
           useEffect(() => {

     

       8
       -
               const fetchNowPlaying = async () => {

     

       9
       -
                   try {

     

       10
       -
                       const res = await fetch(

     

       11
       -
                           "https://workers.indexx.dev/misc/lastfm",

     

       12
       -
                       );

     

       13
       -
                       if (!res.ok) throw new Error(`HTTP ${res.status}`);

     

       14
       -
       

     

       15
       -
                       const json = await res.json();

     

       16
       -
                       const status = {

     

       17
       -
                           song: json.track,

     

       18
       -
                           artist: json.artist,

     

       19
       -
                           albumArt: json.cover,

     

       20
       -
                           createdAt: json.createdAt,

     

       21
       -
                           link: json.url,

     

       22
       -
                           nowPlaying: !json.createdAt,

     

       23
       -
                       };

     

       24
       -
                       setData(status);

     

       25
       -
                   } catch (err) {

     

       26
       -
                       console.error("Fetch failed:", err);

     

       27
       -
                       setError(err.message);

     

       28
       -
                   }

     

       29
       -
               };

     

       30
       -
       

     

       31
       -
               fetchNowPlaying();

     

       32
       -
           }, []);

     

       33
       -
       

     

       34
       -
           if (error) return <span>Error: {error}</span>;

     

       35
       -
           if (!data) return null;

     

       36
       -
       

     

       37
       -
           let timeAgo = "";

     

       38
       -
           let oldStatusClasses = "";

     

       39
       -
       

     

       40
       -
           if (!data.nowPlaying && data.createdAt) {

     

       41
       -
               const date = new Date(data.createdAt);

     

       42
       -
               const now = new Date();

     

       43
       -
               const diff = now.getTime() - date.getTime();

     

       44
       -
       

     

       45
       -
               const minutes = Math.floor(diff / 60000);

     

       46
       -
               const hours = Math.floor(minutes / 60);

     

       47
       -
               const days = Math.floor(hours / 24);

     

       48
       -
       

     

       49
       -
               if (days > 0) timeAgo = `${days} days ago`;

     

       50
       -
               else if (hours > 0) timeAgo = `${hours} hours ago`;

     

       51
       -
               else if (minutes > 0) timeAgo = `${minutes} minutes ago`;

     

       52
       -
               else timeAgo = "just now";

     

       53
       -
       

     

       54
       -
               oldStatusClasses = days > 3

     

       55
       -
                   ? "opacity-75 text-decoration-line-through"

     

       56
       -
                   : "";

     

       57
       -
           }

     

       58
       -
       

     

       59
       -
           return (

     

       60
       -
               <a

     

       61
       -
                   id="now-playing"

     

       62
       -
                   href={data.link}

     

       63
       -
                   target="_blank"

     

       64
       -
                   className={oldStatusClasses}

     

       65
       -
               >

     

       66
       -
                   <img

     

       67
       -
                       src={data.albumArt}

     

       68
       -
                       alt={`${data.album} cover`}

     

       69
       -
                   />

     

       70
       -
                   <div

     

       71
       -
                       style={{

     

       72
       -
                           display: "flex",

     

       73
       -
                           flexDirection: "column",

     

       74
       -
                           gap: "2px",

     

       75
       -
                           width: "100%",

     

       76
       -
                       }}

     

       77
       -
                   >

     

       78
       -
                       <div style={{ fontWeight: "bold" }}>{data.song}</div>

     

       79
       -
                       <div style={{ fontSize: "0.9em", marginTop: "-5px" }}>

     

       80
       -
                           {data.artist}

     

       81
       -
                       </div>

     

       82
       -
                       <div

     

       83
       -
                           style={{

     

       84
       -
                               fontSize: "0.8em",

     

       85
       -
                               opacity: 0.7,

     

       86
       -
                               marginTop: "-5px",

     

       87
       -
                           }}

     

       88
       -
                       >

     

       89
       -
                           {data.nowPlaying

     

       90
       -
                               ? (

     

       91
       -
                                   <span style={{ color: "#22c55e" }}>

     

       92
       -
                                       ▶ Now Playing

     

       93
       -
                                   </span>

     

       94
       -
                               )

     

       95
       -
                               : timeAgo}

     

       96
       -
                       </div>

     

       97
       -
                   </div>

     

       98
       -
               </a>

     

       99
       -
           );

     

       100
       -
       }

-98

src/components/islands/Status.jsx

···

       1
       -
       import { useEffect, useState } from "react";

     

       2
       -
       const actorDid = import.meta.env.PUBLIC_ACTOR_DID;

     

       3
       -
       

     

       4
       -
       if (!actorDid) {

     

       5
       -
           console.error(

     

       6
       -
               "PUBLIC_ACTOR_DID is not defined. Please check your .env file.",

     

       7
       -
           );

     

       8
       -
       }

     

       9
       -
       

     

       10
       -
       export default function Status() {

     

       11
       -
           const [data, setData] = useState(null);

     

       12
       -
           const [error, setError] = useState(null);

     

       13
       -
       

     

       14
       -
           useEffect(() => {

     

       15
       -
               const fetchStatus = async () => {

     

       16
       -
                   if (!actorDid) {

     

       17
       -
                       setError("Configuration error: Actor DID is missing.");

     

       18
       -
                       return;

     

       19
       -
                   }

     

       20
       -
                   try {

     

       21
       -
                       const res = await fetch(

     

       22
       -
                           `https://public.api.bsky.app/xrpc/app.bsky.feed.getAuthorFeed?actor=${actorDid}&limit=1&filter=posts_no_replies`,

     

       23
       -
                       );

     

       24
       -
                       if (!res.ok) throw new Error(`HTTP ${res.status}`);

     

       25
       -
       

     

       26
       -
                       const json = await res.json();

     

       27
       -
                       const latestPost = json.feed[0].post;

     

       28
       -
       

     

       29
       -
                       const status = {

     

       30
       -
                           text: latestPost.record.text,

     

       31
       -
                           createdAt: latestPost.record.createdAt,

     

       32
       -
                           link: `https://bsky.app/profile/${actorDid}/post/${

     

       33
       -
                               latestPost.uri.split("/")[4]

     

       34
       -
                           }`,

     

       35
       -
                       };

     

       36
       -
                       setData(status);

     

       37
       -
                   } catch (err) {

     

       38
       -
                       console.error("Fetch failed:", err);

     

       39
       -
                       setError(err.message);

     

       40
       -
                   }

     

       41
       -
               };

     

       42
       -
       

     

       43
       -
               fetchStatus();

     

       44
       -
           }, [actorDid]);

     

       45
       -
       

     

       46
       -
           if (error) {

     

       47
       -
               return (

     

       48
       -
                   <span

     

       49
       -
                       className="badge bg-dark"

     

       50
       -
                       style={{ color: "#595959 !important" }}

     

       51
       -
                   >

     

       52
       -
                       Error: {error}

     

       53
       -
                   </span>

     

       54
       -
               );

     

       55
       -
           }

     

       56
       -
           if (!data) {

     

       57
       -
               return (

     

       58
       -
                   <span

     

       59
       -
                       className="badge bg-dark"

     

       60
       -
                       style={{ color: "#595959 !important" }}

     

       61
       -
                   >

     

       62
       -
                       Loading status...

     

       63
       -
                   </span>

     

       64
       -
               );

     

       65
       -
           }

     

       66
       -
       

     

       67
       -
           const date = new Date(data.createdAt);

     

       68
       -
           const now = new Date();

     

       69
       -
           const diff = now.getTime() - date.getTime();

     

       70
       -
       

     

       71
       -
           const days = Math.floor(diff / (1000 * 60 * 60 * 24)); // Calculate days

     

       72
       -
       

     

       73
       -
           if (days >= 2) {

     

       74
       -
               return null; // Don't render the component if it's been 2 or more days

     

       75
       -
           }

     

       76
       -
       

     

       77
       -
           const minutes = Math.floor(diff / 60000);

     

       78
       -
           const hours = Math.floor(minutes / 60);

     

       79
       -
       

     

       80
       -
           let timeAgo = "just now";

     

       81
       -
           if (days > 0) timeAgo = `${days} days ago`;

     

       82
       -
           else if (hours > 0) timeAgo = `${hours} hours ago`;

     

       83
       -
           else if (minutes > 0) timeAgo = `${minutes} minutes ago`;

     

       84
       -
       

     

       85
       -
           const oldStatusClasses = days >= 1

     

       86
       -
               ? "opacity-75 text-decoration-line-through"

     

       87
       -
               : "";

     

       88
       -
       

     

       89
       -
           return (

     

       90
       -
               <a

     

       91
       -
                   href={data.link}

     

       92
       -
                   target="_blank"

     

       93
       -
                   className={`badge bg-white ${oldStatusClasses}`}

     

       94
       -
               >

     

       95
       -
                   Index is.. "{data.text}", {timeAgo}

     

       96
       -
               </a>

     

       97
       -
           );

     

       98
       -
       }

+80

src/components/jsx/AudioVisualizer.jsx

···

       1
       +
       import React from "react";

     

       2
       +
       

     

       3
       +
       const BAR_COUNT = 15;

     

       4
       +
       const BAR_ANIMATION_DELAYS = [

     

       5
       +
         "0.3s",

     

       6
       +
         "0.7s",

     

       7
       +
         "0.1s",

     

       8
       +
         "0.9s",

     

       9
       +
         "0.4s",

     

       10
       +
         "0.2s",

     

       11
       +
         "0.8s",

     

       12
       +
         "0.5s",

     

       13
       +
         "0s",

     

       14
       +
         "0.6s",

     

       15
       +
         "0.3s",

     

       16
       +
         "0.9s",

     

       17
       +
         "0.1s",

     

       18
       +
         "0.7s",

     

       19
       +
         "0.4s",

     

       20
       +
       ];

     

       21
       +
       

     

       22
       +
       export default function AudioVisualizer({ isSilent = false }) {

     

       23
       +
         // Define the base animation style

     

       24
       +
         const activeAnimation = "wave 2.5s ease-in-out infinite";

     

       25
       +
       

     

       26
       +
         // Define the style for the silent state (dots)

     

       27
       +
         const silentStyle = {

     

       28
       +
           animation: "none",

     

       29
       +
           height: "5px",

     

       30
       +
         };

     

       31
       +
       

     

       32
       +
         return (

     

       33
       +
           <div className="visualizer">

     

       34
       +
             {Array(BAR_COUNT).fill(0).map((_, index) => {

     

       35
       +
               // Determine the specific style for each bar

     

       36
       +
               const barStyle = isSilent

     

       37
       +
                 ? silentStyle // If silent, use the fixed dot style

     

       38
       +
                 : { // If not silent, use the full animation with its unique delay

     

       39
       +
                   animation: activeAnimation,

     

       40
       +
                   animationDelay: BAR_ANIMATION_DELAYS[index],

     

       41
       +
                 };

     

       42
       +
       

     

       43
       +
               return (

     

       44
       +
                 <div

     

       45
       +
                   key={index}

     

       46
       +
                   className="bar"

     

       47
       +
                   style={barStyle} // Apply the determined style object

     

       48
       +
                 >

     

       49
       +
                 </div>

     

       50
       +
               );

     

       51
       +
             })}

     

       52
       +
       

     

       53
       +
             <style jsx>

     

       54
       +
               {`

     

       55
       +
               .visualizer {

     

       56
       +
                 display: flex;

     

       57
       +
                 align-items: center;

     

       58
       +
                 gap: 1px;

     

       59
       +
                 height: 50px;

     

       60
       +
               }

     

       61
       +
       

     

       62
       +
               .bar {

     

       63
       +
                 width: 2px;

     

       64
       +
                 background: rgb(0, 151, 188);

     

       65
       +
                 border-radius: 1px;

     

       66
       +
               }

     

       67
       +
               

     

       68
       +
               @keyframes wave {

     

       69
       +
                 0%, 100% {

     

       70
       +
                   height: 5px; 

     

       71
       +
                 }

     

       72
       +
                 50% {

     

       73
       +
                   height: 30px; 

     

       74
       +
                 }

     

       75
       +
               }

     

       76
       +
             `}

     

       77
       +
             </style>

     

       78
       +
           </div>

     

       79
       +
         );

     

       80
       +
       }

+95

src/components/jsx/Lastfm.jsx

···

       1
       +
       import { useEffect, useState } from "react";

     

       2
       +
       import AudioVisualizer from "./AudioVisualizer";

     

       3
       +
       

     

       4
       +
       export default function Lastfm() {

     

       5
       +
           const [data, setData] = useState(null);

     

       6
       +
           const [error, setError] = useState(null);

     

       7
       +
       

     

       8
       +
           useEffect(() => {

     

       9
       +
               const fetchLastfmData = async () => {

     

       10
       +
                   try {

     

       11
       +
                       const res = await fetch(

     

       12
       +
                           "https://workers.indexx.dev/misc/lastfm",

     

       13
       +
                       );

     

       14
       +
                       if (!res.ok) throw new Error(`HTTP ${res.status}`);

     

       15
       +
       

     

       16
       +
                       const json = await res.json();

     

       17
       +
                       const status = {

     

       18
       +
                           song: json.track,

     

       19
       +
                           artist: json.artist,

     

       20
       +
                           albumArt: json.cover,

     

       21
       +
                           createdAt: json.createdAt,

     

       22
       +
                           link: json.url,

     

       23
       +
                           nowPlaying: !json.createdAt,

     

       24
       +
                       };

     

       25
       +
                       setData(status);

     

       26
       +
                   } catch (err) {

     

       27
       +
                       console.error("Fetch failed:", err);

     

       28
       +
                       setError(err.message);

     

       29
       +
                   }

     

       30
       +
               };

     

       31
       +
       

     

       32
       +
               fetchLastfmData();

     

       33
       +
           }, []);

     

       34
       +
       

     

       35
       +
           if (error || !data) return null;

     

       36
       +
       

     

       37
       +
           let timeAgo = "";

     

       38
       +
           let oldStatusClasses = "";

     

       39
       +
       

     

       40
       +
           if (!data.nowPlaying && data.createdAt) {

     

       41
       +
               const date = new Date(data.createdAt);

     

       42
       +
               const now = new Date();

     

       43
       +
               const diff = now.getTime() - date.getTime();

     

       44
       +
       

     

       45
       +
               const minutes = Math.floor(diff / 60000);

     

       46
       +
               const hours = Math.floor(minutes / 60);

     

       47
       +
               const days = Math.floor(hours / 24);

     

       48
       +
       

     

       49
       +
               if (days > 0) timeAgo = `${days} days ago`;

     

       50
       +
               else if (hours > 0) timeAgo = `${hours} hours ago`;

     

       51
       +
               else if (minutes > 0) timeAgo = `${minutes} minutes ago`;

     

       52
       +
               else timeAgo = "just now";

     

       53
       +
       

     

       54
       +
               if (days == 1) timeAgo = "1 day ago";

     

       55
       +
       

     

       56
       +
               oldStatusClasses = days > 3

     

       57
       +
                   ? "opacity-75 text-decoration-line-through"

     

       58
       +
                   : "";

     

       59
       +
           }

     

       60
       +
       

     

       61
       +
           return (

     

       62
       +
               <a

     

       63
       +
                   id="now-playing"

     

       64
       +
                   href={data.link}

     

       65
       +
                   target="_blank"

     

       66
       +
                   className={oldStatusClasses}

     

       67
       +
               >

     

       68
       +
                   <AudioVisualizer isSilent={!data.nowPlaying} />

     

       69
       +
                   <div

     

       70
       +
                       style={{

     

       71
       +
                           display: "flex",

     

       72
       +
                           flexDirection: "column",

     

       73
       +
                           gap: "2px",

     

       74
       +
                           width: "100%",

     

       75
       +
                       }}

     

       76
       +
                   >

     

       77
       +
                       <div style={{ fontWeight: "bold" }}>{data.song}</div>

     

       78
       +
                       <div style={{ fontSize: "0.9em", marginTop: "-5px" }}>

     

       79
       +
                           {data.artist}

     

       80
       +
                       </div>

     

       81
       +
                       <div

     

       82
       +
                           style={{

     

       83
       +
                               fontSize: "0.8em",

     

       84
       +
                               opacity: 0.7,

     

       85
       +
                               marginTop: "-5px",

     

       86
       +
                           }}

     

       87
       +
                       >

     

       88
       +
                           <small style={{ fontSize: "0.7rem" }}>

     

       89
       +
                               ^ what I'm listening (or last listened) to

     

       90
       +
                           </small>

     

       91
       +
                       </div>

     

       92
       +
                   </div>

     

       93
       +
               </a>

     

       94
       +
           );

     

       95
       +
       }

+78

src/components/jsx/ProjectsPane.jsx

···

       1
       +
       import { useEffect, useState } from "react";

     

       2
       +
       

     

       3
       +
       export default function NowPlaying() {

     

       4
       +
           const [data, setData] = useState(null);

     

       5
       +
           const [error, setError] = useState(null);

     

       6
       +
       

     

       7
       +
           useEffect(() => {

     

       8
       +
               const fetchProjectData = async () => {

     

       9
       +
                   try {

     

       10
       +
                       const res = await fetch(

     

       11
       +
                           "https://pds.indexx.dev/xrpc/com.atproto.repo.listRecords?repo=did%3Aplc%3Asfjxpxxyvewb2zlxwoz2vduw&collection=dev.indexx.www.project&limit=100&reverse=false",

     

       12
       +
                       );

     

       13
       +
                       if (!res.ok) throw new Error(`HTTP ${res.status}`);

     

       14
       +
       

     

       15
       +
                       const data = await res.json();

     

       16
       +
                       const projects = data.records.map((record) => record.value);

     

       17
       +
       

     

       18
       +
                       setData(projects.map((project) => ({

     

       19
       +
                           title: project.name,

     

       20
       +
                           description: project.description,

     

       21
       +
                           date: project.dateLabel,

     

       22
       +
                           href: project.url,

     

       23
       +
                           note: project.note ?? "",

     

       24
       +
                       })));

     

       25
       +
                   } catch (err) {

     

       26
       +
                       console.error("Fetch failed:", err);

     

       27
       +
                       setError(err.message);

     

       28
       +
                   }

     

       29
       +
               };

     

       30
       +
       

     

       31
       +
               fetchProjectData();

     

       32
       +
           }, []);

     

       33
       +
       

     

       34
       +
           if (error) return <span>Error: {error}</span>;

     

       35
       +
           if (!data) return null;

     

       36
       +
       

     

       37
       +
           return (

     

       38
       +
               <section id="projects-pane" data-bs-theme="dark">

     

       39
       +
                   <h6

     

       40
       +
                       className="text-muted text-center"

     

       41
       +
                       style={{ textTransform: "uppercase", letterSpacing: "5px" }}

     

       42
       +
                   >

     

       43
       +
                       My Recent Projects

     

       44
       +
                   </h6>

     

       45
       +
       

     

       46
       +
                   <ul className="list-unstyled">

     

       47
       +
                       {data.map((project) => (

     

       48
       +
                           <li>

     

       49
       +
                               <a

     

       50
       +
                                   href={project.href}

     

       51
       +
                                   target="_blank"

     

       52
       +
                                   className="text-reset"

     

       53
       +
                               >

     

       54
       +
                                   <div

     

       55
       +
                                       className="project-card"

     

       56
       +
                                       style={{ color: "#fff" }}

     

       57
       +
                                   >

     

       58
       +
                                       <small className="text-muted">

     

       59
       +
                                           {project.date}

     

       60
       +
                                       </small>

     

       61
       +
                                       <h4>{project.title}</h4>

     

       62
       +
                                       {project.description}

     

       63
       +
                                       {project.note && (

     

       64
       +
                                           <>

     

       65
       +
                                               <br />

     

       66
       +
                                               <small className="text-muted">

     

       67
       +
                                                   {project.note}

     

       68
       +
                                               </small>

     

       69
       +
                                           </>

     

       70
       +
                                       )}

     

       71
       +
                                   </div>

     

       72
       +
                               </a>

     

       73
       +
                           </li>

     

       74
       +
                       ))}

     

       75
       +
                   </ul>

     

       76
       +
               </section>

     

       77
       +
           );

     

       78
       +
       }

+109

src/components/jsx/Status.jsx

···

       1
       +
       import { useEffect, useState } from "react";

     

       2
       +
       const actorDid = import.meta.env.PUBLIC_ACTOR_DID;

     

       3
       +
       

     

       4
       +
       if (!actorDid) {

     

       5
       +
           console.error(

     

       6
       +
               "PUBLIC_ACTOR_DID is not defined. Please check your .env file.",

     

       7
       +
           );

     

       8
       +
       }

     

       9
       +
       

     

       10
       +
       export default function Status() {

     

       11
       +
           const [data, setData] = useState(null);

     

       12
       +
           const [error, setError] = useState(null);

     

       13
       +
       

     

       14
       +
           useEffect(() => {

     

       15
       +
               const fetchStatus = async () => {

     

       16
       +
                   if (!actorDid) {

     

       17
       +
                       setError("Configuration error: Actor DID is missing.");

     

       18
       +
                       return;

     

       19
       +
                   }

     

       20
       +
                   try {

     

       21
       +
                       const res = await fetch(

     

       22
       +
                           `https://public.api.bsky.app/xrpc/app.bsky.feed.getAuthorFeed?actor=${actorDid}&limit=1&filter=posts_no_replies`,

     

       23
       +
                       );

     

       24
       +
                       if (!res.ok) throw new Error(`HTTP ${res.status}`);

     

       25
       +
       

     

       26
       +
                       const json = await res.json();

     

       27
       +
                       const latestPost = json.feed[0].post;

     

       28
       +
       

     

       29
       +
                       const status = {

     

       30
       +
                           text: latestPost.record.text,

     

       31
       +
                           createdAt: latestPost.record.createdAt,

     

       32
       +
                           link: `https://bsky.app/profile/${actorDid}/post/${

     

       33
       +
                               latestPost.uri.split("/")[4]

     

       34
       +
                           }`,

     

       35
       +
                       };

     

       36
       +
                       setData(status);

     

       37
       +
                   } catch (err) {

     

       38
       +
                       console.error("Fetch failed:", err);

     

       39
       +
                       setError(err.message);

     

       40
       +
                   }

     

       41
       +
               };

     

       42
       +
       

     

       43
       +
               fetchStatus();

     

       44
       +
           }, [actorDid]);

     

       45
       +
       

     

       46
       +
           if (error) {

     

       47
       +
               return (

     

       48
       +
                   <span

     

       49
       +
                       className="badge bg-dark"

     

       50
       +
                       style={{

     

       51
       +
                           color: "#595959 !important",

     

       52
       +
                           //outline: "1px solid white",

     

       53
       +
                           //outlineOffset: "1px",

     

       54
       +
                       }}

     

       55
       +
                   >

     

       56
       +
                       Error: {error}

     

       57
       +
                   </span>

     

       58
       +
               );

     

       59
       +
           }

     

       60
       +
           if (!data) {

     

       61
       +
               return (

     

       62
       +
                   <span

     

       63
       +
                       className="badge bg-dark"

     

       64
       +
                       style={{

     

       65
       +
                           color: "#595959 !important",

     

       66
       +
                           //outline: "1px solid white",

     

       67
       +
                           //outlineOffset: "1px",

     

       68
       +
                       }}

     

       69
       +
                   >

     

       70
       +
                       Loading status...

     

       71
       +
                   </span>

     

       72
       +
               );

     

       73
       +
           }

     

       74
       +
       

     

       75
       +
           const date = new Date(data.createdAt);

     

       76
       +
           const now = new Date();

     

       77
       +
           const diff = now.getTime() - date.getTime();

     

       78
       +
       

     

       79
       +
           const days = Math.floor(diff / (1000 * 60 * 60 * 24));

     

       80
       +
       

     

       81
       +
           if (days >= 2) {

     

       82
       +
               return null;

     

       83
       +
           }

     

       84
       +
       

     

       85
       +
           const minutes = Math.floor(diff / 60000);

     

       86
       +
           const hours = Math.floor(minutes / 60);

     

       87
       +
       

     

       88
       +
           let timeAgo = "just now";

     

       89
       +
           if (days > 0) timeAgo = `${days} days ago`;

     

       90
       +
           else if (hours > 0) timeAgo = `${hours} hours ago`;

     

       91
       +
           else if (minutes > 0) timeAgo = `${minutes} minutes ago`;

     

       92
       +
       

     

       93
       +
           if (days == 1) timeAgo = "1 day ago";

     

       94
       +
       

     

       95
       +
           const oldStatusClasses = days >= 1

     

       96
       +
               ? "opacity-75 text-decoration-line-through"

     

       97
       +
               : "";

     

       98
       +
       

     

       99
       +
           return (

     

       100
       +
               <a

     

       101
       +
                   href={data.link}

     

       102
       +
                   target="_blank"

     

       103
       +
                   className={`badge bg-white ${oldStatusClasses}`}

     

       104
       +
                   //style={{ outline: "1px solid white", outlineOffset: "1px" }}

     

       105
       +
               >

     

       106
       +
                   I'm.. "{data.text}", {timeAgo}

     

       107
       +
               </a>

     

       108
       +
           );

     

       109
       +
       }

+154

src/components/jsx/Tealfm.jsx

···

       1
       +
       import { useEffect, useState } from "react";

     

       2
       +
       import AudioVisualizer from "./AudioVisualizer";

     

       3
       +
       

     

       4
       +
       export default function Tealfm() {

     

       5
       +
           const [data, setData] = useState(null);

     

       6
       +
           const [error, setError] = useState(null);

     

       7
       +
           const [isCurrentlyPlaying, setIsCurrentlyPlaying] = useState(false);

     

       8
       +
       

     

       9
       +
           useEffect(() => {

     

       10
       +
               const fetchStatus = async () => {

     

       11
       +
                   const repo = "did:plc:sfjxpxxyvewb2zlxwoz2vduw";

     

       12
       +
                   const statusCollection = "fm.teal.alpha.actor.status";

     

       13
       +
                   const lastPlayedCollection = "fm.teal.alpha.feed.play";

     

       14
       +
       

     

       15
       +
                   try {

     

       16
       +
                       const statusUrl =

     

       17
       +
                           `https://pds.indexx.dev/xrpc/com.atproto.repo.getRecord?repo=${repo}&collection=${statusCollection}&rkey=self`;

     

       18
       +
                       const statusRes = await fetch(statusUrl);

     

       19
       +
       

     

       20
       +
                       if (!statusRes.ok) {

     

       21
       +
                           throw new Error(`HTTP ${statusRes.status} on status fetch`);

     

       22
       +
                       }

     

       23
       +
       

     

       24
       +
                       const statusData = await statusRes.json();

     

       25
       +
                       const statusValue = statusData?.value;

     

       26
       +
                       const nowTimestamp = Math.floor(Date.now() / 1000);

     

       27
       +
       

     

       28
       +
                       const isExpired = statusValue?.expiry &&

     

       29
       +
                           nowTimestamp > parseInt(statusValue.expiry, 10);

     

       30
       +
                       const isItemEmpty = !statusValue?.item?.trackName;

     

       31
       +
       

     

       32
       +
                       let status;

     

       33
       +
       

     

       34
       +
                       if (statusValue && !isExpired && !isItemEmpty) {

     

       35
       +
                           const latest = statusValue.item;

     

       36
       +
       

     

       37
       +
                           status = {

     

       38
       +
                               song: latest.trackName,

     

       39
       +
                               artist: latest.artists.map((artist) =>

     

       40
       +
                                   artist.artistName

     

       41
       +
                               ).join(", "),

     

       42
       +
                               createdAt: parseInt(statusValue.time, 10) * 1000,

     

       43
       +
                               link: latest.originUrl ?? "",

     

       44
       +
                           };

     

       45
       +
                           setData(status);

     

       46
       +
                           setIsCurrentlyPlaying(true);

     

       47
       +
                           return;

     

       48
       +
                       }

     

       49
       +
       

     

       50
       +
                       console.log(

     

       51
       +
                           "Status expired or empty. Falling back to last played record.",

     

       52
       +
                       );

     

       53
       +
       

     

       54
       +
                       const lastPlayedUrl =

     

       55
       +
                           `https://pds.indexx.dev/xrpc/com.atproto.repo.listRecords?repo=${repo}&collection=${lastPlayedCollection}&limit=1&reverse=false`;

     

       56
       +
                       const lastPlayedRes = await fetch(lastPlayedUrl);

     

       57
       +
       

     

       58
       +
                       if (!lastPlayedRes.ok) {

     

       59
       +
                           throw new Error(

     

       60
       +
                               `HTTP ${lastPlayedRes.status} on listRecords fetch`,

     

       61
       +
                           );

     

       62
       +
                       }

     

       63
       +
       

     

       64
       +
                       const lastPlayedData = await lastPlayedRes.json();

     

       65
       +
       

     

       66
       +
                       if (

     

       67
       +
                           lastPlayedData.records && lastPlayedData.records.length > 0

     

       68
       +
                       ) {

     

       69
       +
                           const latest = lastPlayedData.records[0].value;

     

       70
       +
       

     

       71
       +
                           status = {

     

       72
       +
                               song: latest.trackName,

     

       73
       +
                               artist: latest.artists.map((artist) =>

     

       74
       +
                                   artist.artistName

     

       75
       +
                               ).join(", "),

     

       76
       +
                               albumArt:

     

       77
       +
                                   `https://coverartarchive.org/release/${latest.releaseMbId}/front-500`,

     

       78
       +
                               createdAt: latest.playedTime,

     

       79
       +
                               link: latest.originUrl ?? "",

     

       80
       +
                           };

     

       81
       +
                           setData(status);

     

       82
       +
                           setIsCurrentlyPlaying(false);

     

       83
       +
                       } else {

     

       84
       +
                           console.log("No records found in last played collection.");

     

       85
       +
                           setIsCurrentlyPlaying(false);

     

       86
       +
                       }

     

       87
       +
                   } catch (err) {

     

       88
       +
                       console.error("Fetch failed:", err);

     

       89
       +
                       setError(err.message);

     

       90
       +
                       setIsCurrentlyPlaying(false);

     

       91
       +
                   }

     

       92
       +
               };

     

       93
       +
       

     

       94
       +
               fetchStatus();

     

       95
       +
           }, []);

     

       96
       +
       

     

       97
       +
           if (error) return <span>Error: {error}</span>;

     

       98
       +
           if (!data) return null;

     

       99
       +
       

     

       100
       +
           let timeAgo = "";

     

       101
       +
           let oldStatusClasses = "";

     

       102
       +
       

     

       103
       +
           const date = new Date(data.createdAt);

     

       104
       +
           const now = new Date();

     

       105
       +
           const diff = now.getTime() - date.getTime();

     

       106
       +
       

     

       107
       +
           const minutes = Math.floor(diff / 60000);

     

       108
       +
           const hours = Math.floor(minutes / 60);

     

       109
       +
           const days = Math.floor(hours / 24);

     

       110
       +
       

     

       111
       +
           if (days > 0) timeAgo = `${days} days ago`;

     

       112
       +
           else if (hours > 0) timeAgo = `${hours} hours ago`;

     

       113
       +
           else if (minutes > 0) timeAgo = `${minutes} minutes ago`;

     

       114
       +
           else timeAgo = "just now";

     

       115
       +
       

     

       116
       +
           oldStatusClasses = days > 3

     

       117
       +
               ? "opacity-75 text-decoration-line-through"

     

       118
       +
               : "";

     

       119
       +
       

     

       120
       +
           return (

     

       121
       +
               <a

     

       122
       +
                   id="now-playing"

     

       123
       +
                   href={data.link}

     

       124
       +
                   target="_blank"

     

       125
       +
                   className={oldStatusClasses}

     

       126
       +
               >

     

       127
       +
                   <AudioVisualizer isSilent={!isCurrentlyPlaying} />

     

       128
       +
                   <div

     

       129
       +
                       style={{

     

       130
       +
                           display: "flex",

     

       131
       +
                           flexDirection: "column",

     

       132
       +
                           gap: "2px",

     

       133
       +
                           width: "100%",

     

       134
       +
                       }}

     

       135
       +
                   >

     

       136
       +
                       <div style={{ fontWeight: "bold" }}>{data.song}</div>

     

       137
       +
                       <div style={{ fontSize: "0.9em", marginTop: "-5px" }}>

     

       138
       +
                           {data.artist}

     

       139
       +
                       </div>

     

       140
       +
                       <div

     

       141
       +
                           style={{

     

       142
       +
                               fontSize: "0.8em",

     

       143
       +
                               opacity: 0.7,

     

       144
       +
                               marginTop: "-5px",

     

       145
       +
                           }}

     

       146
       +
                       >

     

       147
       +
                           <small style={{ fontSize: "0.7rem" }}>

     

       148
       +
                               ^ what I'm listening (or last listened) to

     

       149
       +
                           </small>

     

       150
       +
                       </div>

     

       151
       +
                   </div>

     

       152
       +
               </a>

     

       153
       +
           );

     

       154
       +
       }

-56

src/data/projects.ts

···

       1
       -
       export interface Project {

     

       2
       -
         title: string;

     

       3
       -
         description: string;

     

       4
       -
         date: string;

     

       5
       -
         href: string;

     

       6
       -
         note?: string;

     

       7
       -
       }

     

       8
       -
       

     

       9
       -
       /*

     

       10
       -
         This array will go unused for now, it used to be shown but I removed the sidebar since it was ugly

     

       11
       -
       */

     

       12
       -
       export const projects: Project[] = [

     

       13
       -
         {

     

       14
       -
           title: "Aero",

     

       15
       -
           description:

     

       16
       -
             "A Bluesky bot to make sense of the noise, with responses powered by Gemini, similar to Grok.",

     

       17
       -
           date: "October 2025",

     

       18
       -
           href: "https://tangled.org/@indexx.dev/aero",

     

       19
       -
         },

     

       20
       -
         {

     

       21
       -
           title: "Echo",

     

       22
       -
           description: "A Bluesky reply bot with responses powered by Gemini.",

     

       23
       -
           date: "July 2025",

     

       24
       -
           href: "https://tangled.org/@indexx.dev/echo",

     

       25
       -
         },

     

       26
       -
         {

     

       27
       -
           title: "Localbox",

     

       28
       -
           description:

     

       29
       -
             "A Typescript server emulator for Box Critters, a defunct virtual world.",

     

       30
       -
           date: "November 2024",

     

       31
       -
           href: "https://tangled.org/@indexx.dev/localbox",

     

       32
       -
         },

     

       33
       -
         {

     

       34
       -
           title: "Toonkins Retooned",

     

       35
       -
           description:

     

       36
       -
             "Looking to relive Toonkins, a defunct virtual world made by Shenanigames, well you're in luck! In this Github organization, you can find: a Typescript, unofficial server remake of the game server, and a decompiled Unity project reassembly of the game (Unity project source coming soon).",

     

       37
       -
           date: "October 2024",

     

       38
       -
           href: "https://github.com/ToonkinsRetooned/",

     

       39
       -
           note:

     

       40
       -
             'Note: "Retooned" is purposely spelled wrong, I know how to spell I swear 😭',

     

       41
       -
         },

     

       42
       -
         {

     

       43
       -
           title: "Poly+ Rewrite",

     

       44
       -
           description:

     

       45
       -
             "A rewrite of Poly+, my quality-of-life browser extension for Polytoria. Built entirely fresh using the WXT extension framework, Typescript, and with added better overall code quality.",

     

       46
       -
           date: "since October 2024, never finished",

     

       47
       -
           href: "https://github.com/indexxing/PolyPlus-Rewrite",

     

       48
       -
         },

     

       49
       -
         {

     

       50
       -
           title: "Poly+",

     

       51
       -
           description:

     

       52
       -
             "Poly+ is a quality-of-life Chromium-based extension for Polytoria!",

     

       53
       -
           date: "since February 2023, archived",

     

       54
       -
           href: "https://github.com/indexxing/PolyPlus/",

     

       55
       -
         },

     

       56
       -
       ];

+1 -1

src/layouts/Layout.astro

···

       30
        
           <!-- RESOURCES -->

     

       31
        
           <link href="/bootstrap.min.css" rel="stylesheet" />

     

       32
        
           <script src="/bootstrap.bundle.min.js" is:inline></script>

     

       33
       -
           <link rel="stylesheet" href="/style.css?v=2" type="text/css" />

     

       34
        
         </head>

     

       35
        
         <body>

     

       36
        
           <slot />

···

       30
        
           <!-- RESOURCES -->

     

       31
        
           <link href="/bootstrap.min.css" rel="stylesheet" />

     

       32
        
           <script src="/bootstrap.bundle.min.js" is:inline></script>

     

       33
       +
           <link rel="stylesheet" href="/style.css?v=3" type="text/css" />

     

       34
        
         </head>

     

       35
        
         <body>

     

       36
        
           <slot />

+13 -12

src/pages/index.astro

···

       1
        
       ---

     

       2
        
       import Layout from "../layouts/Layout.astro";

     

       3
        
       

     

       4
       -
       import Header from "../components/Header.astro";

     

       5
       -
       import SocialLinks from "../components/SocialLinks.astro";

     

       6
       -
       //import ProjectsPane from "../components/ProjectsPane.astro";

     

       7
        
       

     

       8
       -
       import Status from "../components/islands/Status.jsx";

     

       9
       -
       import NowPlaying from "../components/islands/NowPlaying.jsx";

     

       0
        
       
     

       10
        
       ---

     

       11
        
       

     

       12
        
       <Layout title="hello" description="insert wave emoji">

     

       13
        
         <main id="page" class="text-center">

     

       14
        
           <Header />

     

       15
        
           <Status client:load />

     

       0
        
       
     

       0
        
       
     

       16
        
           <!--

     

       17
       -
           <NowPlaying client:load />

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       18
        
           -->

     

       19
       -
           <SocialLinks />

     

       20
       -
           <!--

     

       21
        
           <a

     

       22
        
             id="projects-button"

     

       23
        
             href="#"

     
···

       27
        
           >

     

       28
        
             . . .

     

       29
        
           </a>

     

       30
       -
           -->

     

       31
        
         </main>

     

       32
       -
         <!--

     

       33
       -
         <ProjectsPane />

     

       34
        
         <script>

     

       35
        
           import { initializeProjects } from "../scripts/projects";

     

       36
        
           initializeProjects();

     

       37
        
         </script>

     

       38
       -
         -->

     

       39
        
       </Layout>

···

       1
        
       ---

     

       2
        
       import Layout from "../layouts/Layout.astro";

     

       3
        
       

     

       4
       +
       import Header from "../components/astro/Header.astro";

     

       5
       +
       import SocialLinks from "../components/astro/SocialLinks.astro";

     

       0
        
       
     

       6
        
       

     

       7
       +
       import ProjectsPane from "../components/jsx/ProjectsPane.jsx";

     

       8
       +
       import Status from "../components/jsx/Status.jsx";

     

       9
       +
       import Tealfm from "../components/jsx/Tealfm";

     

       10
        
       ---

     

       11
        
       

     

       12
        
       <Layout title="hello" description="insert wave emoji">

     

       13
        
         <main id="page" class="text-center">

     

       14
        
           <Header />

     

       15
        
           <Status client:load />

     

       16
       +
           <Tealfm client:load />

     

       17
       +
           <SocialLinks />

     

       18
        
           <!--

     

       19
       +
           <img

     

       20
       +
             src="https://ziit.indexx.dev/api/public/badge/cmh6t4rlk0001lz1wau6e8c83/all/month"

     

       21
       +
             alt="Ziit Coding Statistics"

     

       22
       +
           />

     

       23
        
           -->

     

       24
       +
           <br />

     

       0
        
       
     

       25
        
           <a

     

       26
        
             id="projects-button"

     

       27
        
             href="#"

     
···

       31
        
           >

     

       32
        
             . . .

     

       33
        
           </a>

     

       0
        
       
     

       34
        
         </main>

     

       35
       +
         <ProjectsPane client:load />

     

       0
        
       
     

       36
        
         <script>

     

       37
        
           import { initializeProjects } from "../scripts/projects";

     

       38
        
           initializeProjects();

     

       39
        
         </script>

     

       0
        
       
     

       40
        
       </Layout>

Compare changes