comparing 1fa601d47ee26fb095f309bebbb3ff10de5b9352 and main on indexx.dev/static

+37

lexicons/dev/indexx/www/project.json

···

       1
       1
       +
       {

     

       2
       2
       +
         "lexicon": 1,

     

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

     

       4
       4
       +
         "defs": {

     

       5
       5
       +
           "main": {

     

       6
       6
       +
             "type": "record",

     

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

     

       8
       8
       +
             "key": "tid",

     

       9
       9
       +
             "record": {

     

       10
       10
       +
               "type": "object",

     

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

     

       12
       12
       +
               "properties": {

     

       13
       13
       +
                 "name": {

     

       14
       14
       +
                   "type": "string",

     

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

     

       16
       16
       +
                 },

     

       17
       17
       +
                 "description": {

     

       18
       18
       +
                   "type": "string",

     

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

     

       20
       20
       +
                 },

     

       21
       21
       +
                 "url": {

     

       22
       22
       +
                   "type": "string",

     

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

     

       24
       24
       +
                 },

     

       25
       25
       +
                 "note": {

     

       26
       26
       +
                   "type": "string",

     

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

     

       28
       28
       +
                 },

     

       29
       29
       +
                 "dateLabel": {

     

       30
       30
       +
                   "type": "string",

     

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

     

       32
       32
       +
                 }

     

       33
       33
       +
               }

     

       34
       34
       +
             }

     

       35
       35
       +
           }

     

       36
       36
       +
         }

     

       37
       37
       +
       }

+34 -50

public/style.css

···

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

     

       2
       2
        
         VARIABLES & PROPERTIES

     

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

     

       4
       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");

     

       4
       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
       5
        
       

     

       6
       6
        
       :root {

     

       7
       7
        
         --line: transparent;

     

       8
       8
        
         --line-active: #ffffff;

     

       9
       9
        
         --bg-gradient: linear-gradient(

     

       10
       10
        
           45deg,

     

       11
       11
       -
           rgb(0, 59, 74),

     

       11
       11
       +
           rgb(0, 29, 36),

     

       12
       12
        
           rgb(0, 35, 44),

     

       13
       13
        
           rgb(0, 29, 36)

     

       14
       14
        
         );

     

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

     

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

     

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

     

       18
       18
       +
           transparent 0px,

     

       19
       19
       +
           transparent 113px,

     

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

     

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

     

       22
       22
       +
         );

     

       23
       23
       +
       

     

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

     

       15
       25
        
       }

     

       16
       26
        
       

     

       17
       27
        
       @property --animatedBorder {

     
···

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

     

       29
       39
        
         width: 100%;

     

       30
       40
        
         height: 100%;

     

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

     

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

     

       42
       42
       +
         background-blend-mode: normal;

     

       43
       43
       +
       }

     

       44
       44
       +
       

     

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

     

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

     

       32
       47
        
       }

     

       33
       48
        
       

     

       34
       49
        
       a {

     
···

       70
       85
        
       h1 {

     

       71
       86
        
         color: #fff;

     

       72
       87
        
         margin-bottom: 0;

     

       73
       73
       -
         font-weight: 1000;

     

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

     

       89
       89
       +
         font-weight: 400;

     

       90
       90
       +
         font-style: normal;

     

       74
       91
        
         font-size: 4rem;

     

       75
       92
        
       }

     

       76
       93
        
       

     
···

       85
       102
        
       }

     

       86
       103
        
       

     

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

     

       88
       88
       -
         CIRCLE HOVER LINK

     

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

     

       90
       90
       -
       .circle-hover {

     

       91
       91
       -
         display: inline-block;

     

       92
       92
       -
         position: relative;

     

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

     

       94
       94
       -
         flex: 1;

     

       95
       95
       -
         min-width: 0;

     

       96
       96
       -
         transition: margin 0.25s;

     

       97
       97
       -
       }

     

       98
       98
       -
       

     

       99
       99
       -
       .circle-hover:hover {

     

       100
       100
       -
         --spacing: 4px;

     

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

     

       102
       102
       -
         --stroke-delay: 0.1s;

     

       103
       103
       -
         --offset: 180px;

     

       104
       104
       -
         color: #fff !important;

     

       105
       105
       -
       }

     

       106
       106
       -
       

     

       107
       107
       -
       .circle-hover svg {

     

       108
       108
       -
         width: 76px;

     

       109
       109
       -
         height: 40px;

     

       110
       110
       -
         position: absolute;

     

       111
       111
       -
         left: 50%;

     

       112
       112
       -
         bottom: 0;

     

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

     

       114
       114
       -
         fill: none;

     

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

     

       116
       116
       -
         stroke-linecap: round;

     

       117
       117
       -
         stroke-width: 2px;

     

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

     

       119
       119
       -
         stroke-dashoffset: 361px;

     

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

     

       121
       121
       -
       }

     

       122
       122
       -
       

     

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

     

       124
       105
        
         PROJECTS SIDE PANE

     

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

     

       126
       107
        
       #projects-pane {

     
···

       143
       124
        
         padding-bottom: 20px;

     

       144
       125
        
         overflow-y: scroll;

     

       145
       126
        
         overflow-x: hidden;

     

       127
       127
       +
       

     

       128
       128
       +
         scrollbar-width: none;

     

       129
       129
       +
         -ms-overflow-style: none;

     

       130
       130
       +
       }

     

       131
       131
       +
       

     

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

     

       133
       133
       +
         display: none;

     

       146
       134
        
       }

     

       147
       135
        
       

     

       148
       136
        
       .project-card {

     
···

       160
       148
        
       #now-playing {

     

       161
       149
        
         position: fixed;

     

       162
       150
        
         bottom: 20px;

     

       163
       163
       -
         left: 50%;

     

       164
       164
       -
         transform: translateX(-50%);

     

       151
       151
       +
         left: 20px;

     

       165
       152
        
         display: flex;

     

       166
       153
        
         align-items: center;

     

       167
       154
        
         gap: 12px;

     

       168
       155
        
         padding: 8px;

     

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

     

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

     

       170
       157
        
         border-radius: 8px;

     

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

     

       172
       172
       -
         color: #000;

     

       173
       173
       -
         text-align: right;

     

       159
       159
       +
         color: #fff;

     

       160
       160
       +
         text-align: left;

     

       174
       161
        
         text-decoration: none;

     

       175
       175
       -
         max-width: 400px;

     

       176
       176
       -
         min-width: 300px;

     

       177
       177
       -
         outline: 2px solid #0000001a;

     

       178
       178
       -
         outline-offset: 5px;

     

       179
       179
       -
         transition: opacity 0.2s;

     

       162
       162
       +
         width: 300px;

     

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

     

       180
       164
        
       }

     

       181
       165
        
       

     

       182
       166
        
       #now-playing img {

+1 -14

src/assets/crown.svg

···

       1
       1
       -
       <svg

     

       2
       2
       -
         width="24"

     

       3
       3
       -
         height="24"

     

       4
       4
       -
         viewBox="0 0 24 24"

     

       5
       5
       -
         fill="none"

     

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

     

       7
       7
       -
       >

     

       8
       8
       -
         <path

     

       9
       9
       -
           fill-rule="evenodd"

     

       10
       10
       -
           clip-rule="evenodd"

     

       11
       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
       12
       -
           fill="currentColor"

     

       13
       13
       -
         />

     

       14
       14
       -
       </svg>
     

       1
       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>

-27

src/components/Header.astro

···

       1
       1
       -
       <section id="header">

     

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

     

       3
       3
       -
           <svg

     

       4
       4
       -
             width="24"

     

       5
       5
       -
             height="24"

     

       6
       6
       -
             viewBox="0 0 24 24"

     

       7
       7
       -
             fill="none"

     

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

     

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

     

       10
       10
       -
           >

     

       11
       11
       -
             <path

     

       12
       12
       -
               fill-rule="evenodd"

     

       13
       13
       -
               clip-rule="evenodd"

     

       14
       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
       15
       -
               fill="currentColor"></path>

     

       16
       16
       -
           </svg>

     

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

     

       18
       18
       -
         </h1>

     

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

     

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

     

       21
       21
       -
         >

     

       22
       22
       -
         <small

     

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

     

       24
       24
       -
         >

     

       25
       25
       -
           he/him

     

       26
       26
       -
         </small>

     

       27
       27
       -
       </section>

-27

src/components/ProjectCard.astro

···

       1
       1
       -
       ---

     

       2
       2
       -
       interface Props {

     

       3
       3
       -
         title: string;

     

       4
       4
       -
         description: string;

     

       5
       5
       -
         date: string;

     

       6
       6
       -
         href: string;

     

       7
       7
       -
         note?: string;

     

       8
       8
       -
       }

     

       9
       9
       -
       

     

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

     

       11
       11
       -
       ---

     

       12
       12
       -
       

     

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

     

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

     

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

     

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

     

       17
       17
       -
           {description}

     

       18
       18
       -
           {

     

       19
       19
       -
             note && (

     

       20
       20
       -
               <>

     

       21
       21
       -
                 <br />

     

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

     

       23
       23
       -
               </>

     

       24
       24
       -
             )

     

       25
       25
       -
           }

     

       26
       26
       -
         </div>

     

       27
       27
       -
       </a>

-19

src/components/ProjectsPane.astro

···

       1
       1
       -
       ---

     

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

     

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

     

       4
       4
       -
       ---

     

       5
       5
       -
       

     

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

     

       7
       7
       -
         <h6

     

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

     

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

     

       10
       10
       -
         >

     

       11
       11
       -
           (SOME OF) MY PROJECTS

     

       12
       12
       -
         </h6>

     

       13
       13
       -
       

     

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

     

       15
       15
       -
           <li>

     

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

     

       17
       17
       -
           </li>

     

       18
       18
       -
         </ul>

     

       19
       19
       -
       </section>

-43

src/components/SocialLink.astro

···

       1
       1
       -
       ---

     

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

     

       3
       3
       -
       

     

       4
       4
       -
       interface Props {

     

       5
       5
       -
         icon?: any;

     

       6
       6
       -
         name: string;

     

       7
       7
       -
         href: string;

     

       8
       8
       -
         tooltip?: {

     

       9
       9
       -
           title: string;

     

       10
       10
       -
           placement?: string;

     

       11
       11
       -
         };

     

       12
       12
       -
         rel?: string;

     

       13
       13
       -
       }

     

       14
       14
       -
       

     

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

     

       16
       16
       -
       

     

       17
       17
       -
       const Icon = icon;

     

       18
       18
       -
       ---

     

       19
       19
       -
       

     

       20
       20
       -
       <a

     

       21
       21
       -
         rel={rel}

     

       22
       22
       -
         href={href}

     

       23
       23
       -
         target="_blank"

     

       24
       24
       -
         {...tooltip && {

     

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

     

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

     

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

     

       28
       28
       -
         }}

     

       29
       29
       -
       >

     

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

     

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

     

       32
       32
       -
         </span>

     

       33
       33
       -
       </a>

     

       34
       34
       -
       

     

       35
       35
       -
       <style>

     

       36
       36
       -
         .icon-hover {

     

       37
       37
       -
           display: inline-block;

     

       38
       38
       -
           transition: transform 0.2s ease;

     

       39
       39
       -
         }

     

       40
       40
       -
         a:hover .icon-hover {

     

       41
       41
       -
           transform: scale(1.12);

     

       42
       42
       -
         }

     

       43
       43
       -
       </style>

-35

src/components/SocialLinks.astro

···

       1
       1
       -
       ---

     

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

     

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

     

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

     

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

     

       6
       6
       -
       

     

       7
       7
       -
       const links = [

     

       8
       8
       -
         {

     

       9
       9
       -
           icon: Bluesky,

     

       10
       10
       -
           name: "Bluesky",

     

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

     

       12
       12
       -
         },

     

       13
       13
       -
         {

     

       14
       14
       -
           icon: Discord,

     

       15
       15
       -
           name: "Discord",

     

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

     

       17
       17
       -
           tooltip: {

     

       18
       18
       -
             title: "index.lua",

     

       19
       19
       -
             placement: "top",

     

       20
       20
       -
           },

     

       21
       21
       -
         },

     

       22
       22
       -
         {

     

       23
       23
       -
           icon: Tangled,

     

       24
       24
       -
           name: "Tangled",

     

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

     

       26
       26
       -
         },

     

       27
       27
       -
       ];

     

       28
       28
       -
       ---

     

       29
       29
       -
       

     

       30
       30
       -
       <ul

     

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

     

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

     

       33
       33
       -
       >

     

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

     

       35
       35
       -
       </ul>

+27

src/components/astro/Header.astro

···

       1
       1
       +
       <section id="header">

     

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

     

       3
       3
       +
           <svg

     

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

     

       5
       5
       +
             width="24"

     

       6
       6
       +
             height="24"

     

       7
       7
       +
             viewBox="0 0 24 24"

     

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

     

       9
       9
       +
             ><path

     

       10
       10
       +
               fill="gold"

     

       11
       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
       12
       +
             ></path></svg

     

       13
       13
       +
           >

     

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

     

       15
       15
       +
         </h1>

     

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

     

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

     

       18
       18
       +
         >

     

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

     

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

     

       21
       21
       +
         >

     

       22
       22
       +
         <small

     

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

     

       24
       24
       +
         >

     

       25
       25
       +
           he/him

     

       26
       26
       +
         </small>

     

       27
       27
       +
       </section>

+27

src/components/astro/ProjectCard.astro

···

       1
       1
       +
       ---

     

       2
       2
       +
       interface Props {

     

       3
       3
       +
         title: string;

     

       4
       4
       +
         description: string;

     

       5
       5
       +
         date: string;

     

       6
       6
       +
         href: string;

     

       7
       7
       +
         note?: string;

     

       8
       8
       +
       }

     

       9
       9
       +
       

     

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

     

       11
       11
       +
       ---

     

       12
       12
       +
       

     

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

     

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

     

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

     

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

     

       17
       17
       +
           {description}

     

       18
       18
       +
           {

     

       19
       19
       +
             note && (

     

       20
       20
       +
               <>

     

       21
       21
       +
                 <br />

     

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

     

       23
       23
       +
               </>

     

       24
       24
       +
             )

     

       25
       25
       +
           }

     

       26
       26
       +
         </div>

     

       27
       27
       +
       </a>

+43

src/components/astro/SocialLink.astro

···

       1
       1
       +
       ---

     

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

     

       3
       3
       +
       

     

       4
       4
       +
       interface Props {

     

       5
       5
       +
         icon?: any;

     

       6
       6
       +
         name: string;

     

       7
       7
       +
         href: string;

     

       8
       8
       +
         tooltip?: {

     

       9
       9
       +
           title: string;

     

       10
       10
       +
           placement?: string;

     

       11
       11
       +
         };

     

       12
       12
       +
         rel?: string;

     

       13
       13
       +
       }

     

       14
       14
       +
       

     

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

     

       16
       16
       +
       

     

       17
       17
       +
       const Icon = icon;

     

       18
       18
       +
       ---

     

       19
       19
       +
       

     

       20
       20
       +
       <a

     

       21
       21
       +
         rel={rel}

     

       22
       22
       +
         href={href}

     

       23
       23
       +
         target="_blank"

     

       24
       24
       +
         {...tooltip && {

     

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

     

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

     

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

     

       28
       28
       +
         }}

     

       29
       29
       +
       >

     

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

     

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

     

       32
       32
       +
         </span>

     

       33
       33
       +
       </a>

     

       34
       34
       +
       

     

       35
       35
       +
       <style>

     

       36
       36
       +
         .icon-hover {

     

       37
       37
       +
           display: inline-block;

     

       38
       38
       +
           transition: transform 0.2s ease;

     

       39
       39
       +
         }

     

       40
       40
       +
         a:hover .icon-hover {

     

       41
       41
       +
           transform: scale(1.12);

     

       42
       42
       +
         }

     

       43
       43
       +
       </style>

+35

src/components/astro/SocialLinks.astro

···

       1
       1
       +
       ---

     

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

     

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

     

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

     

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

     

       6
       6
       +
       

     

       7
       7
       +
       const links = [

     

       8
       8
       +
         {

     

       9
       9
       +
           icon: Bluesky,

     

       10
       10
       +
           name: "Bluesky",

     

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

     

       12
       12
       +
         },

     

       13
       13
       +
         {

     

       14
       14
       +
           icon: Discord,

     

       15
       15
       +
           name: "Discord",

     

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

     

       17
       17
       +
           tooltip: {

     

       18
       18
       +
             title: "index.lua",

     

       19
       19
       +
             placement: "top",

     

       20
       20
       +
           },

     

       21
       21
       +
         },

     

       22
       22
       +
         {

     

       23
       23
       +
           icon: Tangled,

     

       24
       24
       +
           name: "Tangled",

     

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

     

       26
       26
       +
         },

     

       27
       27
       +
       ];

     

       28
       28
       +
       ---

     

       29
       29
       +
       

     

       30
       30
       +
       <ul

     

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

     

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

     

       33
       33
       +
       >

     

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

     

       35
       35
       +
       </ul>

-100

src/components/islands/NowPlaying.jsx

···

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

     

       2
       2
       -
       

     

       3
       3
       -
       export default function NowPlaying() {

     

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

     

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

     

       6
       6
       -
       

     

       7
       7
       -
           useEffect(() => {

     

       8
       8
       -
               const fetchNowPlaying = async () => {

     

       9
       9
       -
                   try {

     

       10
       10
       -
                       const res = await fetch(

     

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

     

       12
       12
       -
                       );

     

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

     

       14
       14
       -
       

     

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

     

       16
       16
       -
                       const status = {

     

       17
       17
       -
                           song: json.track,

     

       18
       18
       -
                           artist: json.artist,

     

       19
       19
       -
                           albumArt: json.cover,

     

       20
       20
       -
                           createdAt: json.createdAt,

     

       21
       21
       -
                           link: json.url,

     

       22
       22
       -
                           nowPlaying: !json.createdAt,

     

       23
       23
       -
                       };

     

       24
       24
       -
                       setData(status);

     

       25
       25
       -
                   } catch (err) {

     

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

     

       27
       27
       -
                       setError(err.message);

     

       28
       28
       -
                   }

     

       29
       29
       -
               };

     

       30
       30
       -
       

     

       31
       31
       -
               fetchNowPlaying();

     

       32
       32
       -
           }, []);

     

       33
       33
       -
       

     

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

     

       35
       35
       -
           if (!data) return null;

     

       36
       36
       -
       

     

       37
       37
       -
           let timeAgo = "";

     

       38
       38
       -
           let oldStatusClasses = "";

     

       39
       39
       -
       

     

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

     

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

     

       42
       42
       -
               const now = new Date();

     

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

     

       44
       44
       -
       

     

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

     

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

     

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

     

       48
       48
       -
       

     

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

     

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

     

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

     

       52
       52
       -
               else timeAgo = "just now";

     

       53
       53
       -
       

     

       54
       54
       -
               oldStatusClasses = days > 3

     

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

     

       56
       56
       -
                   : "";

     

       57
       57
       -
           }

     

       58
       58
       -
       

     

       59
       59
       -
           return (

     

       60
       60
       -
               <a

     

       61
       61
       -
                   id="now-playing"

     

       62
       62
       -
                   href={data.link}

     

       63
       63
       -
                   target="_blank"

     

       64
       64
       -
                   className={oldStatusClasses}

     

       65
       65
       -
               >

     

       66
       66
       -
                   <img

     

       67
       67
       -
                       src={data.albumArt}

     

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

     

       69
       69
       -
                   />

     

       70
       70
       -
                   <div

     

       71
       71
       -
                       style={{

     

       72
       72
       -
                           display: "flex",

     

       73
       73
       -
                           flexDirection: "column",

     

       74
       74
       -
                           gap: "2px",

     

       75
       75
       -
                           width: "100%",

     

       76
       76
       -
                       }}

     

       77
       77
       -
                   >

     

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

     

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

     

       80
       80
       -
                           {data.artist}

     

       81
       81
       -
                       </div>

     

       82
       82
       -
                       <div

     

       83
       83
       -
                           style={{

     

       84
       84
       -
                               fontSize: "0.8em",

     

       85
       85
       -
                               opacity: 0.7,

     

       86
       86
       -
                               marginTop: "-5px",

     

       87
       87
       -
                           }}

     

       88
       88
       -
                       >

     

       89
       89
       -
                           {data.nowPlaying

     

       90
       90
       -
                               ? (

     

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

     

       92
       92
       -
                                       ▶ Now Playing

     

       93
       93
       -
                                   </span>

     

       94
       94
       -
                               )

     

       95
       95
       -
                               : timeAgo}

     

       96
       96
       -
                       </div>

     

       97
       97
       -
                   </div>

     

       98
       98
       -
               </a>

     

       99
       99
       -
           );

     

       100
       100
       -
       }

-98

src/components/islands/Status.jsx

···

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

     

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

     

       3
       3
       -
       

     

       4
       4
       -
       if (!actorDid) {

     

       5
       5
       -
           console.error(

     

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

     

       7
       7
       -
           );

     

       8
       8
       -
       }

     

       9
       9
       -
       

     

       10
       10
       -
       export default function Status() {

     

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

     

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

     

       13
       13
       -
       

     

       14
       14
       -
           useEffect(() => {

     

       15
       15
       -
               const fetchStatus = async () => {

     

       16
       16
       -
                   if (!actorDid) {

     

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

     

       18
       18
       -
                       return;

     

       19
       19
       -
                   }

     

       20
       20
       -
                   try {

     

       21
       21
       -
                       const res = await fetch(

     

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

     

       23
       23
       -
                       );

     

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

     

       25
       25
       -
       

     

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

     

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

     

       28
       28
       -
       

     

       29
       29
       -
                       const status = {

     

       30
       30
       -
                           text: latestPost.record.text,

     

       31
       31
       -
                           createdAt: latestPost.record.createdAt,

     

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

     

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

     

       34
       34
       -
                           }`,

     

       35
       35
       -
                       };

     

       36
       36
       -
                       setData(status);

     

       37
       37
       -
                   } catch (err) {

     

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

     

       39
       39
       -
                       setError(err.message);

     

       40
       40
       -
                   }

     

       41
       41
       -
               };

     

       42
       42
       -
       

     

       43
       43
       -
               fetchStatus();

     

       44
       44
       -
           }, [actorDid]);

     

       45
       45
       -
       

     

       46
       46
       -
           if (error) {

     

       47
       47
       -
               return (

     

       48
       48
       -
                   <span

     

       49
       49
       -
                       className="badge bg-dark"

     

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

     

       51
       51
       -
                   >

     

       52
       52
       -
                       Error: {error}

     

       53
       53
       -
                   </span>

     

       54
       54
       -
               );

     

       55
       55
       -
           }

     

       56
       56
       -
           if (!data) {

     

       57
       57
       -
               return (

     

       58
       58
       -
                   <span

     

       59
       59
       -
                       className="badge bg-dark"

     

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

     

       61
       61
       -
                   >

     

       62
       62
       -
                       Loading status...

     

       63
       63
       -
                   </span>

     

       64
       64
       -
               );

     

       65
       65
       -
           }

     

       66
       66
       -
       

     

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

     

       68
       68
       -
           const now = new Date();

     

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

     

       70
       70
       -
       

     

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

     

       72
       72
       -
       

     

       73
       73
       -
           if (days >= 2) {

     

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

     

       75
       75
       -
           }

     

       76
       76
       -
       

     

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

     

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

     

       79
       79
       -
       

     

       80
       80
       -
           let timeAgo = "just now";

     

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

     

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

     

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

     

       84
       84
       -
       

     

       85
       85
       -
           const oldStatusClasses = days >= 1

     

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

     

       87
       87
       -
               : "";

     

       88
       88
       -
       

     

       89
       89
       -
           return (

     

       90
       90
       -
               <a

     

       91
       91
       -
                   href={data.link}

     

       92
       92
       -
                   target="_blank"

     

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

     

       94
       94
       -
               >

     

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

     

       96
       96
       -
               </a>

     

       97
       97
       -
           );

     

       98
       98
       -
       }

+80

src/components/jsx/AudioVisualizer.jsx

···

       1
       1
       +
       import React from "react";

     

       2
       2
       +
       

     

       3
       3
       +
       const BAR_COUNT = 15;

     

       4
       4
       +
       const BAR_ANIMATION_DELAYS = [

     

       5
       5
       +
         "0.3s",

     

       6
       6
       +
         "0.7s",

     

       7
       7
       +
         "0.1s",

     

       8
       8
       +
         "0.9s",

     

       9
       9
       +
         "0.4s",

     

       10
       10
       +
         "0.2s",

     

       11
       11
       +
         "0.8s",

     

       12
       12
       +
         "0.5s",

     

       13
       13
       +
         "0s",

     

       14
       14
       +
         "0.6s",

     

       15
       15
       +
         "0.3s",

     

       16
       16
       +
         "0.9s",

     

       17
       17
       +
         "0.1s",

     

       18
       18
       +
         "0.7s",

     

       19
       19
       +
         "0.4s",

     

       20
       20
       +
       ];

     

       21
       21
       +
       

     

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

     

       23
       23
       +
         // Define the base animation style

     

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

     

       25
       25
       +
       

     

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

     

       27
       27
       +
         const silentStyle = {

     

       28
       28
       +
           animation: "none",

     

       29
       29
       +
           height: "5px",

     

       30
       30
       +
         };

     

       31
       31
       +
       

     

       32
       32
       +
         return (

     

       33
       33
       +
           <div className="visualizer">

     

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

     

       35
       35
       +
               // Determine the specific style for each bar

     

       36
       36
       +
               const barStyle = isSilent

     

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

     

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

     

       39
       39
       +
                   animation: activeAnimation,

     

       40
       40
       +
                   animationDelay: BAR_ANIMATION_DELAYS[index],

     

       41
       41
       +
                 };

     

       42
       42
       +
       

     

       43
       43
       +
               return (

     

       44
       44
       +
                 <div

     

       45
       45
       +
                   key={index}

     

       46
       46
       +
                   className="bar"

     

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

     

       48
       48
       +
                 >

     

       49
       49
       +
                 </div>

     

       50
       50
       +
               );

     

       51
       51
       +
             })}

     

       52
       52
       +
       

     

       53
       53
       +
             <style jsx>

     

       54
       54
       +
               {`

     

       55
       55
       +
               .visualizer {

     

       56
       56
       +
                 display: flex;

     

       57
       57
       +
                 align-items: center;

     

       58
       58
       +
                 gap: 1px;

     

       59
       59
       +
                 height: 50px;

     

       60
       60
       +
               }

     

       61
       61
       +
       

     

       62
       62
       +
               .bar {

     

       63
       63
       +
                 width: 2px;

     

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

     

       65
       65
       +
                 border-radius: 1px;

     

       66
       66
       +
               }

     

       67
       67
       +
               

     

       68
       68
       +
               @keyframes wave {

     

       69
       69
       +
                 0%, 100% {

     

       70
       70
       +
                   height: 5px; 

     

       71
       71
       +
                 }

     

       72
       72
       +
                 50% {

     

       73
       73
       +
                   height: 30px; 

     

       74
       74
       +
                 }

     

       75
       75
       +
               }

     

       76
       76
       +
             `}

     

       77
       77
       +
             </style>

     

       78
       78
       +
           </div>

     

       79
       79
       +
         );

     

       80
       80
       +
       }

+95

src/components/jsx/Lastfm.jsx

···

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

     

       2
       2
       +
       import AudioVisualizer from "./AudioVisualizer";

     

       3
       3
       +
       

     

       4
       4
       +
       export default function Lastfm() {

     

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

     

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

     

       7
       7
       +
       

     

       8
       8
       +
           useEffect(() => {

     

       9
       9
       +
               const fetchLastfmData = async () => {

     

       10
       10
       +
                   try {

     

       11
       11
       +
                       const res = await fetch(

     

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

     

       13
       13
       +
                       );

     

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

     

       15
       15
       +
       

     

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

     

       17
       17
       +
                       const status = {

     

       18
       18
       +
                           song: json.track,

     

       19
       19
       +
                           artist: json.artist,

     

       20
       20
       +
                           albumArt: json.cover,

     

       21
       21
       +
                           createdAt: json.createdAt,

     

       22
       22
       +
                           link: json.url,

     

       23
       23
       +
                           nowPlaying: !json.createdAt,

     

       24
       24
       +
                       };

     

       25
       25
       +
                       setData(status);

     

       26
       26
       +
                   } catch (err) {

     

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

     

       28
       28
       +
                       setError(err.message);

     

       29
       29
       +
                   }

     

       30
       30
       +
               };

     

       31
       31
       +
       

     

       32
       32
       +
               fetchLastfmData();

     

       33
       33
       +
           }, []);

     

       34
       34
       +
       

     

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

     

       36
       36
       +
       

     

       37
       37
       +
           let timeAgo = "";

     

       38
       38
       +
           let oldStatusClasses = "";

     

       39
       39
       +
       

     

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

     

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

     

       42
       42
       +
               const now = new Date();

     

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

     

       44
       44
       +
       

     

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

     

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

     

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

     

       48
       48
       +
       

     

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

     

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

     

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

     

       52
       52
       +
               else timeAgo = "just now";

     

       53
       53
       +
       

     

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

     

       55
       55
       +
       

     

       56
       56
       +
               oldStatusClasses = days > 3

     

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

     

       58
       58
       +
                   : "";

     

       59
       59
       +
           }

     

       60
       60
       +
       

     

       61
       61
       +
           return (

     

       62
       62
       +
               <a

     

       63
       63
       +
                   id="now-playing"

     

       64
       64
       +
                   href={data.link}

     

       65
       65
       +
                   target="_blank"

     

       66
       66
       +
                   className={oldStatusClasses}

     

       67
       67
       +
               >

     

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

     

       69
       69
       +
                   <div

     

       70
       70
       +
                       style={{

     

       71
       71
       +
                           display: "flex",

     

       72
       72
       +
                           flexDirection: "column",

     

       73
       73
       +
                           gap: "2px",

     

       74
       74
       +
                           width: "100%",

     

       75
       75
       +
                       }}

     

       76
       76
       +
                   >

     

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

     

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

     

       79
       79
       +
                           {data.artist}

     

       80
       80
       +
                       </div>

     

       81
       81
       +
                       <div

     

       82
       82
       +
                           style={{

     

       83
       83
       +
                               fontSize: "0.8em",

     

       84
       84
       +
                               opacity: 0.7,

     

       85
       85
       +
                               marginTop: "-5px",

     

       86
       86
       +
                           }}

     

       87
       87
       +
                       >

     

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

     

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

     

       90
       90
       +
                           </small>

     

       91
       91
       +
                       </div>

     

       92
       92
       +
                   </div>

     

       93
       93
       +
               </a>

     

       94
       94
       +
           );

     

       95
       95
       +
       }

+78

src/components/jsx/ProjectsPane.jsx

···

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

     

       2
       2
       +
       

     

       3
       3
       +
       export default function NowPlaying() {

     

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

     

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

     

       6
       6
       +
       

     

       7
       7
       +
           useEffect(() => {

     

       8
       8
       +
               const fetchProjectData = async () => {

     

       9
       9
       +
                   try {

     

       10
       10
       +
                       const res = await fetch(

     

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

     

       12
       12
       +
                       );

     

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

     

       14
       14
       +
       

     

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

     

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

     

       17
       17
       +
       

     

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

     

       19
       19
       +
                           title: project.name,

     

       20
       20
       +
                           description: project.description,

     

       21
       21
       +
                           date: project.dateLabel,

     

       22
       22
       +
                           href: project.url,

     

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

     

       24
       24
       +
                       })));

     

       25
       25
       +
                   } catch (err) {

     

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

     

       27
       27
       +
                       setError(err.message);

     

       28
       28
       +
                   }

     

       29
       29
       +
               };

     

       30
       30
       +
       

     

       31
       31
       +
               fetchProjectData();

     

       32
       32
       +
           }, []);

     

       33
       33
       +
       

     

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

     

       35
       35
       +
           if (!data) return null;

     

       36
       36
       +
       

     

       37
       37
       +
           return (

     

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

     

       39
       39
       +
                   <h6

     

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

     

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

     

       42
       42
       +
                   >

     

       43
       43
       +
                       My Recent Projects

     

       44
       44
       +
                   </h6>

     

       45
       45
       +
       

     

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

     

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

     

       48
       48
       +
                           <li>

     

       49
       49
       +
                               <a

     

       50
       50
       +
                                   href={project.href}

     

       51
       51
       +
                                   target="_blank"

     

       52
       52
       +
                                   className="text-reset"

     

       53
       53
       +
                               >

     

       54
       54
       +
                                   <div

     

       55
       55
       +
                                       className="project-card"

     

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

     

       57
       57
       +
                                   >

     

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

     

       59
       59
       +
                                           {project.date}

     

       60
       60
       +
                                       </small>

     

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

     

       62
       62
       +
                                       {project.description}

     

       63
       63
       +
                                       {project.note && (

     

       64
       64
       +
                                           <>

     

       65
       65
       +
                                               <br />

     

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

     

       67
       67
       +
                                                   {project.note}

     

       68
       68
       +
                                               </small>

     

       69
       69
       +
                                           </>

     

       70
       70
       +
                                       )}

     

       71
       71
       +
                                   </div>

     

       72
       72
       +
                               </a>

     

       73
       73
       +
                           </li>

     

       74
       74
       +
                       ))}

     

       75
       75
       +
                   </ul>

     

       76
       76
       +
               </section>

     

       77
       77
       +
           );

     

       78
       78
       +
       }

+109

src/components/jsx/Status.jsx

···

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

     

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

     

       3
       3
       +
       

     

       4
       4
       +
       if (!actorDid) {

     

       5
       5
       +
           console.error(

     

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

     

       7
       7
       +
           );

     

       8
       8
       +
       }

     

       9
       9
       +
       

     

       10
       10
       +
       export default function Status() {

     

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

     

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

     

       13
       13
       +
       

     

       14
       14
       +
           useEffect(() => {

     

       15
       15
       +
               const fetchStatus = async () => {

     

       16
       16
       +
                   if (!actorDid) {

     

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

     

       18
       18
       +
                       return;

     

       19
       19
       +
                   }

     

       20
       20
       +
                   try {

     

       21
       21
       +
                       const res = await fetch(

     

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

     

       23
       23
       +
                       );

     

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

     

       25
       25
       +
       

     

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

     

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

     

       28
       28
       +
       

     

       29
       29
       +
                       const status = {

     

       30
       30
       +
                           text: latestPost.record.text,

     

       31
       31
       +
                           createdAt: latestPost.record.createdAt,

     

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

     

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

     

       34
       34
       +
                           }`,

     

       35
       35
       +
                       };

     

       36
       36
       +
                       setData(status);

     

       37
       37
       +
                   } catch (err) {

     

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

     

       39
       39
       +
                       setError(err.message);

     

       40
       40
       +
                   }

     

       41
       41
       +
               };

     

       42
       42
       +
       

     

       43
       43
       +
               fetchStatus();

     

       44
       44
       +
           }, [actorDid]);

     

       45
       45
       +
       

     

       46
       46
       +
           if (error) {

     

       47
       47
       +
               return (

     

       48
       48
       +
                   <span

     

       49
       49
       +
                       className="badge bg-dark"

     

       50
       50
       +
                       style={{

     

       51
       51
       +
                           color: "#595959 !important",

     

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

     

       53
       53
       +
                           //outlineOffset: "1px",

     

       54
       54
       +
                       }}

     

       55
       55
       +
                   >

     

       56
       56
       +
                       Error: {error}

     

       57
       57
       +
                   </span>

     

       58
       58
       +
               );

     

       59
       59
       +
           }

     

       60
       60
       +
           if (!data) {

     

       61
       61
       +
               return (

     

       62
       62
       +
                   <span

     

       63
       63
       +
                       className="badge bg-dark"

     

       64
       64
       +
                       style={{

     

       65
       65
       +
                           color: "#595959 !important",

     

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

     

       67
       67
       +
                           //outlineOffset: "1px",

     

       68
       68
       +
                       }}

     

       69
       69
       +
                   >

     

       70
       70
       +
                       Loading status...

     

       71
       71
       +
                   </span>

     

       72
       72
       +
               );

     

       73
       73
       +
           }

     

       74
       74
       +
       

     

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

     

       76
       76
       +
           const now = new Date();

     

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

     

       78
       78
       +
       

     

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

     

       80
       80
       +
       

     

       81
       81
       +
           if (days >= 2) {

     

       82
       82
       +
               return null;

     

       83
       83
       +
           }

     

       84
       84
       +
       

     

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

     

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

     

       87
       87
       +
       

     

       88
       88
       +
           let timeAgo = "just now";

     

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

     

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

     

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

     

       92
       92
       +
       

     

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

     

       94
       94
       +
       

     

       95
       95
       +
           const oldStatusClasses = days >= 1

     

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

     

       97
       97
       +
               : "";

     

       98
       98
       +
       

     

       99
       99
       +
           return (

     

       100
       100
       +
               <a

     

       101
       101
       +
                   href={data.link}

     

       102
       102
       +
                   target="_blank"

     

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

     

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

     

       105
       105
       +
               >

     

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

     

       107
       107
       +
               </a>

     

       108
       108
       +
           );

     

       109
       109
       +
       }

+154

src/components/jsx/Tealfm.jsx

···

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

     

       2
       2
       +
       import AudioVisualizer from "./AudioVisualizer";

     

       3
       3
       +
       

     

       4
       4
       +
       export default function Tealfm() {

     

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

     

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

     

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

     

       8
       8
       +
       

     

       9
       9
       +
           useEffect(() => {

     

       10
       10
       +
               const fetchStatus = async () => {

     

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

     

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

     

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

     

       14
       14
       +
       

     

       15
       15
       +
                   try {

     

       16
       16
       +
                       const statusUrl =

     

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

     

       18
       18
       +
                       const statusRes = await fetch(statusUrl);

     

       19
       19
       +
       

     

       20
       20
       +
                       if (!statusRes.ok) {

     

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

     

       22
       22
       +
                       }

     

       23
       23
       +
       

     

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

     

       25
       25
       +
                       const statusValue = statusData?.value;

     

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

     

       27
       27
       +
       

     

       28
       28
       +
                       const isExpired = statusValue?.expiry &&

     

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

     

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

     

       31
       31
       +
       

     

       32
       32
       +
                       let status;

     

       33
       33
       +
       

     

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

     

       35
       35
       +
                           const latest = statusValue.item;

     

       36
       36
       +
       

     

       37
       37
       +
                           status = {

     

       38
       38
       +
                               song: latest.trackName,

     

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

     

       40
       40
       +
                                   artist.artistName

     

       41
       41
       +
                               ).join(", "),

     

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

     

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

     

       44
       44
       +
                           };

     

       45
       45
       +
                           setData(status);

     

       46
       46
       +
                           setIsCurrentlyPlaying(true);

     

       47
       47
       +
                           return;

     

       48
       48
       +
                       }

     

       49
       49
       +
       

     

       50
       50
       +
                       console.log(

     

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

     

       52
       52
       +
                       );

     

       53
       53
       +
       

     

       54
       54
       +
                       const lastPlayedUrl =

     

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

     

       56
       56
       +
                       const lastPlayedRes = await fetch(lastPlayedUrl);

     

       57
       57
       +
       

     

       58
       58
       +
                       if (!lastPlayedRes.ok) {

     

       59
       59
       +
                           throw new Error(

     

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

     

       61
       61
       +
                           );

     

       62
       62
       +
                       }

     

       63
       63
       +
       

     

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

     

       65
       65
       +
       

     

       66
       66
       +
                       if (

     

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

     

       68
       68
       +
                       ) {

     

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

     

       70
       70
       +
       

     

       71
       71
       +
                           status = {

     

       72
       72
       +
                               song: latest.trackName,

     

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

     

       74
       74
       +
                                   artist.artistName

     

       75
       75
       +
                               ).join(", "),

     

       76
       76
       +
                               albumArt:

     

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

     

       78
       78
       +
                               createdAt: latest.playedTime,

     

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

     

       80
       80
       +
                           };

     

       81
       81
       +
                           setData(status);

     

       82
       82
       +
                           setIsCurrentlyPlaying(false);

     

       83
       83
       +
                       } else {

     

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

     

       85
       85
       +
                           setIsCurrentlyPlaying(false);

     

       86
       86
       +
                       }

     

       87
       87
       +
                   } catch (err) {

     

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

     

       89
       89
       +
                       setError(err.message);

     

       90
       90
       +
                       setIsCurrentlyPlaying(false);

     

       91
       91
       +
                   }

     

       92
       92
       +
               };

     

       93
       93
       +
       

     

       94
       94
       +
               fetchStatus();

     

       95
       95
       +
           }, []);

     

       96
       96
       +
       

     

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

     

       98
       98
       +
           if (!data) return null;

     

       99
       99
       +
       

     

       100
       100
       +
           let timeAgo = "";

     

       101
       101
       +
           let oldStatusClasses = "";

     

       102
       102
       +
       

     

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

     

       104
       104
       +
           const now = new Date();

     

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

     

       106
       106
       +
       

     

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

     

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

     

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

     

       110
       110
       +
       

     

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

     

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

     

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

     

       114
       114
       +
           else timeAgo = "just now";

     

       115
       115
       +
       

     

       116
       116
       +
           oldStatusClasses = days > 3

     

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

     

       118
       118
       +
               : "";

     

       119
       119
       +
       

     

       120
       120
       +
           return (

     

       121
       121
       +
               <a

     

       122
       122
       +
                   id="now-playing"

     

       123
       123
       +
                   href={data.link}

     

       124
       124
       +
                   target="_blank"

     

       125
       125
       +
                   className={oldStatusClasses}

     

       126
       126
       +
               >

     

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

     

       128
       128
       +
                   <div

     

       129
       129
       +
                       style={{

     

       130
       130
       +
                           display: "flex",

     

       131
       131
       +
                           flexDirection: "column",

     

       132
       132
       +
                           gap: "2px",

     

       133
       133
       +
                           width: "100%",

     

       134
       134
       +
                       }}

     

       135
       135
       +
                   >

     

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

     

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

     

       138
       138
       +
                           {data.artist}

     

       139
       139
       +
                       </div>

     

       140
       140
       +
                       <div

     

       141
       141
       +
                           style={{

     

       142
       142
       +
                               fontSize: "0.8em",

     

       143
       143
       +
                               opacity: 0.7,

     

       144
       144
       +
                               marginTop: "-5px",

     

       145
       145
       +
                           }}

     

       146
       146
       +
                       >

     

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

     

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

     

       149
       149
       +
                           </small>

     

       150
       150
       +
                       </div>

     

       151
       151
       +
                   </div>

     

       152
       152
       +
               </a>

     

       153
       153
       +
           );

     

       154
       154
       +
       }

-56

src/data/projects.ts

···

       1
       1
       -
       export interface Project {

     

       2
       2
       -
         title: string;

     

       3
       3
       -
         description: string;

     

       4
       4
       -
         date: string;

     

       5
       5
       -
         href: string;

     

       6
       6
       -
         note?: string;

     

       7
       7
       -
       }

     

       8
       8
       -
       

     

       9
       9
       -
       /*

     

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

     

       11
       11
       -
       */

     

       12
       12
       -
       export const projects: Project[] = [

     

       13
       13
       -
         {

     

       14
       14
       -
           title: "Aero",

     

       15
       15
       -
           description:

     

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

     

       17
       17
       -
           date: "October 2025",

     

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

     

       19
       19
       -
         },

     

       20
       20
       -
         {

     

       21
       21
       -
           title: "Echo",

     

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

     

       23
       23
       -
           date: "July 2025",

     

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

     

       25
       25
       -
         },

     

       26
       26
       -
         {

     

       27
       27
       -
           title: "Localbox",

     

       28
       28
       -
           description:

     

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

     

       30
       30
       -
           date: "November 2024",

     

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

     

       32
       32
       -
         },

     

       33
       33
       -
         {

     

       34
       34
       -
           title: "Toonkins Retooned",

     

       35
       35
       -
           description:

     

       36
       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
       37
       -
           date: "October 2024",

     

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

     

       39
       39
       -
           note:

     

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

     

       41
       41
       -
         },

     

       42
       42
       -
         {

     

       43
       43
       -
           title: "Poly+ Rewrite",

     

       44
       44
       -
           description:

     

       45
       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
       46
       -
           date: "since October 2024, never finished",

     

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

     

       48
       48
       -
         },

     

       49
       49
       -
         {

     

       50
       50
       -
           title: "Poly+",

     

       51
       51
       -
           description:

     

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

     

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

     

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

     

       55
       55
       -
         },

     

       56
       56
       -
       ];

+1 -1

src/layouts/Layout.astro

···

       30
       30
        
           <!-- RESOURCES -->

     

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

     

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

     

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

     

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

     

       34
       34
        
         </head>

     

       35
       35
        
         <body>

     

       36
       36
        
           <slot />

+13 -12

src/pages/index.astro

···

       1
       1
        
       ---

     

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

     

       3
       3
        
       

     

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

     

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

     

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

     

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

     

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

     

       7
       6
        
       

     

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

     

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

     

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

     

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

     

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

     

       10
       10
        
       ---

     

       11
       11
        
       

     

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

     

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

     

       14
       14
        
           <Header />

     

       15
       15
        
           <Status client:load />

     

       16
       16
       +
           <Tealfm client:load />

     

       17
       17
       +
           <SocialLinks />

     

       16
       18
        
           <!--

     

       17
       17
       -
           <NowPlaying client:load />

     

       19
       19
       +
           <img

     

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

     

       21
       21
       +
             alt="Ziit Coding Statistics"

     

       22
       22
       +
           />

     

       18
       23
        
           -->

     

       19
       19
       -
           <SocialLinks />

     

       20
       20
       -
           <!--

     

       24
       24
       +
           <br />

     

       21
       25
        
           <a

     

       22
       26
        
             id="projects-button"

     

       23
       27
        
             href="#"

     
···

       27
       31
        
           >

     

       28
       32
        
             . . .

     

       29
       33
        
           </a>

     

       30
       30
       -
           -->

     

       31
       34
        
         </main>

     

       32
       32
       -
         <!--

     

       33
       33
       -
         <ProjectsPane />

     

       35
       35
       +
         <ProjectsPane client:load />

     

       34
       36
        
         <script>

     

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

     

       36
       38
        
           initializeProjects();

     

       37
       39
        
         </script>

     

       38
       38
       -
         -->

     

       39
       40
        
       </Layout>

Compare changes