commit 6065b1d86be534f17aa6477053a87ba4a2ed0eb4 · indexx.dev/static

-50

README.md

···

       1
       1
       -
       # Astro Starter Kit: Basics

     

       2
       2
       -
       

     

       3
       3
       -
       ```sh

     

       4
       4
       -
       npm create astro@latest -- --template basics

     

       5
       5
       -
       ```

     

       6
       6
       -
       

     

       7
       7
       -
       [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)

     

       8
       8
       -
       [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)

     

       9
       9
       -
       [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)

     

       10
       10
       -
       

     

       11
       11
       -
       > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!

     

       12
       12
       -
       

     

       13
       13
       -
       ![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)

     

       14
       14
       -
       

     

       15
       15
       -
       ## 🚀 Project Structure

     

       16
       16
       -
       

     

       17
       17
       -
       Inside of your Astro project, you'll see the following folders and files:

     

       18
       18
       -
       

     

       19
       19
       -
       ```text

     

       20
       20
       -
       /

     

       21
       21
       -
       ├── public/

     

       22
       22
       -
       │   └── favicon.svg

     

       23
       23
       -
       ├── src/

     

       24
       24
       -
       │   ├── layouts/

     

       25
       25
       -
       │   │   └── Layout.astro

     

       26
       26
       -
       │   └── pages/

     

       27
       27
       -
       │       └── index.astro

     

       28
       28
       -
       └── package.json

     

       29
       29
       -
       ```

     

       30
       30
       -
       

     

       31
       31
       -
       To learn more about the folder structure of an Astro project, refer to

     

       32
       32
       -
       [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).

     

       33
       33
       -
       

     

       34
       34
       -
       ## 🧞 Commands

     

       35
       35
       -
       

     

       36
       36
       -
       All commands are run from the root of the project, from a terminal:

     

       37
       37
       -
       

     

       38
       38
       -
       | Command                   | Action                                           |

     

       39
       39
       -
       | :------------------------ | :----------------------------------------------- |

     

       40
       40
       -
       | `npm install`             | Installs dependencies                            |

     

       41
       41
       -
       | `npm run dev`             | Starts local dev server at `localhost:4321`      |

     

       42
       42
       -
       | `npm run build`           | Build your production site to `./dist/`          |

     

       43
       43
       -
       | `npm run preview`         | Preview your build locally, before deploying     |

     

       44
       44
       -
       | `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |

     

       45
       45
       -
       | `npm run astro -- --help` | Get help using the Astro CLI                     |

     

       46
       46
       -
       

     

       47
       47
       -
       ## 👀 Want to learn more?

     

       48
       48
       -
       

     

       49
       49
       -
       Feel free to check [our documentation](https://docs.astro.build) or jump into

     

       50
       50
       -
       our [Discord server](https://astro.build/chat).

+12

package-lock.json

···

       12
       12
        
               "astro": "^5.7.11",

     

       13
       13
        
               "fs": "^0.0.1-security",

     

       14
       14
        
               "marked": "^15.0.11",

     

       15
       15
       +
               "node-cache": "^5.1.2",

     

       15
       16
        
               "ts-node": "^10.9.2"

     

       16
       17
        
             },

     

       17
       18
        
             "devDependencies": {

     
···

       3381
       3382
        
             "funding": {

     

       3382
       3383
        
               "type": "opencollective",

     

       3383
       3384
        
               "url": "https://opencollective.com/unified"

     

       3385
       3385
       +
             }

     

       3386
       3386
       +
           },

     

       3387
       3387
       +
           "node_modules/node-cache": {

     

       3388
       3388
       +
             "version": "5.1.2",

     

       3389
       3389
       +
             "resolved": "https://registry.npmjs.org/node-cache/-/node-cache-5.1.2.tgz",

     

       3390
       3390
       +
             "integrity": "sha512-t1QzWwnk4sjLWaQAS8CHgOJ+RAfmHpxFWmc36IWTiWHQfs0w5JDMBS1b1ZxQteo0vVVuWJvIUKHDkkeK7vIGCg==",

     

       3391
       3391
       +
             "dependencies": {

     

       3392
       3392
       +
               "clone": "2.x"

     

       3393
       3393
       +
             },

     

       3394
       3394
       +
             "engines": {

     

       3395
       3395
       +
               "node": ">= 8.0.0"

     

       3384
       3396
        
             }

     

       3385
       3397
        
           },

     

       3386
       3398
        
           "node_modules/node-fetch": {

package.json

···

       13
       13
        
           "astro": "^5.7.11",

     

       14
       14
        
           "fs": "^0.0.1-security",

     

       15
       15
        
           "marked": "^15.0.11",

     

       16
       16
       +
           "node-cache": "^5.1.2",

     

       16
       17
        
           "ts-node": "^10.9.2"

     

       17
       18
        
         },

     

       18
       19
        
         "devDependencies": {

public/android-chrome-192x192.png

This is a binary file and will not be displayed.

public/android-chrome-512x512.png

This is a binary file and will not be displayed.

public/apple-touch-icon.png

This is a binary file and will not be displayed.

public/favicon-16x16.png

This is a binary file and will not be displayed.

public/favicon-32x32.png

This is a binary file and will not be displayed.

public/favicon.ico

This is a binary file and will not be displayed.

public/site.webmanifest

···

       1
       1
       +
       {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

+2 -1

public/style.css

···

       97
       97
        
           stroke-width: 2px;

     

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

     

       99
       99
        
           stroke-dashoffset: 361px;

     

       100
       100
       -
           transition: stroke 0.25s ease var(--stroke-delay, 0s),

     

       100
       100
       +
           transition:

     

       101
       101
       +
             stroke 0.25s ease var(--stroke-delay, 0s),

     

       101
       102
        
             stroke-dasharray 0.35s;

     

       102
       103
        
         }

     

       103
       104

+25

src/components/Header.astro

···

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

     

       2
       2
       +
         <svg

     

       3
       3
       +
           width="24"

     

       4
       4
       +
           height="24"

     

       5
       5
       +
           viewBox="0 0 24 24"

     

       6
       6
       +
           fill="none"

     

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

     

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

     

       9
       9
       +
         >

     

       10
       10
       +
           <path

     

       11
       11
       +
             fill-rule="evenodd"

     

       12
       12
       +
             clip-rule="evenodd"

     

       13
       13
       +
             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"

     

       14
       14
       +
             fill="currentColor"></path>

     

       15
       15
       +
         </svg>

     

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

     

       17
       17
       +
       </h1>

     

       18
       18
       +
       <span style="display: block; margin-top: -5px;">hey, i'm index. have a great day 👋</span>

     

       19
       19
       +
       <small style="display: block; margin-top: -5px;color: rgb(0, 84, 106);font-size: 0.8rem;">

     

       20
       20
       +
         i usually mess around in Typescript, and recently i've been exploring the 

     

       21
       21
       +
         <a href="https://atproto.com/" target="_blank"><b>AT protocol</b>.</a>

     

       22
       22
       +
       </small>

     

       23
       23
       +
       <small style="display: block; margin-top: -5px;color: rgb(0, 84, 106);font-size: 0.8rem;">

     

       24
       24
       +
         i'm interested in making an open-source Goodreads alternative on the protocol :)

     

       25
       25
       +
       </small>

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

+21

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) => (

     

       17
       17
       +
               <ProjectCard {...project} />

     

       18
       18
       +
             ))}

     

       19
       19
       +
           </li>

     

       20
       20
       +
         </ul>

     

       21
       21
       +
       </section>

+30

src/components/SocialLink.astro

···

       1
       1
       +
       ---

     

       2
       2
       +
       interface Props {

     

       3
       3
       +
         name: string;

     

       4
       4
       +
         href: string;

     

       5
       5
       +
         tooltip?: {

     

       6
       6
       +
           title: string;

     

       7
       7
       +
           placement?: string;

     

       8
       8
       +
         };

     

       9
       9
       +
       }

     

       10
       10
       +
       

     

       11
       11
       +
       const { name, href, tooltip } = Astro.props;

     

       12
       12
       +
       ---

     

       13
       13
       +
       

     

       14
       14
       +
       <a

     

       15
       15
       +
         href={href}

     

       16
       16
       +
         target="_blank"

     

       17
       17
       +
         class="circle-hover"

     

       18
       18
       +
         {...tooltip && {

     

       19
       19
       +
           'data-bs-toggle': 'tooltip',

     

       20
       20
       +
           'data-bs-title': tooltip.title,

     

       21
       21
       +
           'data-bs-placement': tooltip.placement || 'bottom'

     

       22
       22
       +
         }}

     

       23
       23
       +
       >

     

       24
       24
       +
         <svg viewBox="0 0 70 36">

     

       25
       25
       +
           <path

     

       26
       26
       +
             d="M6.9739 30.8153H63.0244C65.5269 30.8152 75.5358 -3.68471 35.4998 2.81531C-16.1598 11.2025 0.894099 33.9766 26.9922 34.3153C104.062 35.3153 54.5169 -6.68469 23.489 9.31527"

     

       27
       27
       +
           ></path>

     

       28
       28
       +
         </svg>

     

       29
       29
       +
         <span>{name}</span>

     

       30
       30
       +
       </a>

+28

src/components/SocialLinks.astro

···

       1
       1
       +
       ---

     

       2
       2
       +
       import SocialLink from './SocialLink.astro';

     

       3
       3
       +
       

     

       4
       4
       +
       const links = [

     

       5
       5
       +
         {

     

       6
       6
       +
           name: 'Bluesky',

     

       7
       7
       +
           href: 'https://bsky.app/profile/did:plc:sfjxpxxyvewb2zlxwoz2vduw'

     

       8
       8
       +
         },

     

       9
       9
       +
         {

     

       10
       10
       +
           name: 'Discord',

     

       11
       11
       +
           href: 'https://discord.com/users/589386198011871233',

     

       12
       12
       +
           tooltip: {

     

       13
       13
       +
             title: 'index.lua',

     

       14
       14
       +
             placement: "top"

     

       15
       15
       +
           }

     

       16
       16
       +
         },

     

       17
       17
       +
         {

     

       18
       18
       +
           name: 'GitHub',

     

       19
       19
       +
           href: 'https://github.com/indexxing/'

     

       20
       20
       +
         }

     

       21
       21
       +
       ];

     

       22
       22
       +
       ---

     

       23
       23
       +
       

     

       24
       24
       +
       <ul class="d-flex mt-4 mb-1" style="padding: 0px; width: 50%; margin: auto; justify-content: space-evenly; flex-basis: 33%;">

     

       25
       25
       +
         {links.map(link => (

     

       26
       26
       +
           <SocialLink {...link} />

     

       27
       27
       +
         ))}

     

       28
       28
       +
       </ul>

+37

src/components/Status.astro

···

       1
       1
       +
       ---

     

       2
       2
       +
       type StatusRes = {

     

       3
       3
       +
         text: string,

     

       4
       4
       +
         createdAt: string,

     

       5
       5
       +
         link: string

     

       6
       6
       +
       }

     

       7
       7
       +
       

     

       8
       8
       +
       const url = new URL("/api/status", Astro.request.url);

     

       9
       9
       +
       const data = await fetch(url);

     

       10
       10
       +
       const { text, createdAt, link } = await data.json() as StatusRes;

     

       11
       11
       +
       

     

       12
       12
       +
       function getRelativeTime(dateStr: string) {

     

       13
       13
       +
         const date = new Date(dateStr);

     

       14
       14
       +
         const now = new Date();

     

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

     

       16
       16
       +
         

     

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

     

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

     

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

     

       20
       20
       +
         

     

       21
       21
       +
         if (days > 0) return `${days} days ago`;

     

       22
       22
       +
         if (hours > 0) return `${hours} hours ago`;

     

       23
       23
       +
         if (minutes > 0) return `${minutes} minutes ago`;

     

       24
       24
       +
         return 'just now';

     

       25
       25
       +
       }

     

       26
       26
       +
       

     

       27
       27
       +
       const timeAgo = getRelativeTime(createdAt);

     

       28
       28
       +
       

     

       29
       29
       +
       const date = new Date(createdAt);

     

       30
       30
       +
       const now = new Date();

     

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

     

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

     

       33
       33
       +
       

     

       34
       34
       +
       const oldStatusClasses = days > 3 ? 'opacity-75 text-decoration-line-through' : '';

     

       35
       35
       +
       ---

     

       36
       36
       +
       

     

       37
       37
       +
       <a href={link} target="_blank" class={`badge bg-white ${oldStatusClasses}`}>Index is.. "{text}", {timeAgo}</a>

-210

src/components/Welcome.astro

···

       1
       1
       -
       ---

     

       2
       2
       -
       import astroLogo from '../assets/astro.svg';

     

       3
       3
       -
       import background from '../assets/background.svg';

     

       4
       4
       -
       ---

     

       5
       5
       -
       

     

       6
       6
       -
       <div id="container">

     

       7
       7
       -
       	<img id="background" src={background.src} alt="" fetchpriority="high" />

     

       8
       8
       -
       	<main>

     

       9
       9
       -
       		<section id="hero">

     

       10
       10
       -
       			<a href="https://astro.build"

     

       11
       11
       -
       				><img src={astroLogo.src} width="115" height="48" alt="Astro Homepage" /></a

     

       12
       12
       -
       			>

     

       13
       13
       -
       			<h1>

     

       14
       14
       -
       				To get started, open the <code><pre>src/pages</pre></code> directory in your project.

     

       15
       15
       -
       			</h1>

     

       16
       16
       -
       			<section id="links">

     

       17
       17
       -
       				<a class="button" href="https://docs.astro.build">Read our docs</a>

     

       18
       18
       -
       				<a href="https://astro.build/chat"

     

       19
       19
       -
       					>Join our Discord <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"

     

       20
       20
       -
       						><path

     

       21
       21
       -
       							fill="currentColor"

     

       22
       22
       -
       							d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z"

     

       23
       23
       -
       						></path></svg

     

       24
       24
       -
       					>

     

       25
       25
       -
       				</a>

     

       26
       26
       -
       			</section>

     

       27
       27
       -
       		</section>

     

       28
       28
       -
       	</main>

     

       29
       29
       -
       

     

       30
       30
       -
       	<a href="https://astro.build/blog/astro-5/" id="news" class="box">

     

       31
       31
       -
       		<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"

     

       32
       32
       -
       			><path

     

       33
       33
       -
       				d="M24.667 12c1.333 1.414 2 3.192 2 5.334 0 4.62-4.934 5.7-7.334 12C18.444 28.567 18 27.456 18 26c0-4.642 6.667-7.053 6.667-14Zm-5.334-5.333c1.6 1.65 2.4 3.43 2.4 5.333 0 6.602-8.06 7.59-6.4 17.334C13.111 27.787 12 25.564 12 22.666c0-4.434 7.333-8 7.333-16Zm-6-5.333C15.111 3.555 16 5.556 16 7.333c0 8.333-11.333 10.962-5.333 22-3.488-.774-6-4-6-8 0-8.667 8.666-10 8.666-20Z"

     

       34
       34
       -
       				fill="#111827"></path></svg

     

       35
       35
       -
       		>

     

       36
       36
       -
       		<h2>What's New in Astro 5.0?</h2>

     

       37
       37
       -
       		<p>

     

       38
       38
       -
       			From content layers to server islands, click to learn more about the new features and

     

       39
       39
       -
       			improvements in Astro 5.0

     

       40
       40
       -
       		</p>

     

       41
       41
       -
       	</a>

     

       42
       42
       -
       </div>

     

       43
       43
       -
       

     

       44
       44
       -
       <style>

     

       45
       45
       -
       	#background {

     

       46
       46
       -
       		position: fixed;

     

       47
       47
       -
       		top: 0;

     

       48
       48
       -
       		left: 0;

     

       49
       49
       -
       		width: 100%;

     

       50
       50
       -
       		height: 100%;

     

       51
       51
       -
       		z-index: -1;

     

       52
       52
       -
       		filter: blur(100px);

     

       53
       53
       -
       	}

     

       54
       54
       -
       

     

       55
       55
       -
       	#container {

     

       56
       56
       -
       		font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;

     

       57
       57
       -
       		height: 100%;

     

       58
       58
       -
       	}

     

       59
       59
       -
       

     

       60
       60
       -
       	main {

     

       61
       61
       -
       		height: 100%;

     

       62
       62
       -
       		display: flex;

     

       63
       63
       -
       		justify-content: center;

     

       64
       64
       -
       	}

     

       65
       65
       -
       

     

       66
       66
       -
       	#hero {

     

       67
       67
       -
       		display: flex;

     

       68
       68
       -
       		align-items: start;

     

       69
       69
       -
       		flex-direction: column;

     

       70
       70
       -
       		justify-content: center;

     

       71
       71
       -
       		padding: 16px;

     

       72
       72
       -
       	}

     

       73
       73
       -
       

     

       74
       74
       -
       	h1 {

     

       75
       75
       -
       		font-size: 22px;

     

       76
       76
       -
       		margin-top: 0.25em;

     

       77
       77
       -
       	}

     

       78
       78
       -
       

     

       79
       79
       -
       	#links {

     

       80
       80
       -
       		display: flex;

     

       81
       81
       -
       		gap: 16px;

     

       82
       82
       -
       	}

     

       83
       83
       -
       

     

       84
       84
       -
       	#links a {

     

       85
       85
       -
       		display: flex;

     

       86
       86
       -
       		align-items: center;

     

       87
       87
       -
       		padding: 10px 12px;

     

       88
       88
       -
       		color: #111827;

     

       89
       89
       -
       		text-decoration: none;

     

       90
       90
       -
       		transition: color 0.2s;

     

       91
       91
       -
       	}

     

       92
       92
       -
       

     

       93
       93
       -
       	#links a:hover {

     

       94
       94
       -
       		color: rgb(78, 80, 86);

     

       95
       95
       -
       	}

     

       96
       96
       -
       

     

       97
       97
       -
       	#links a svg {

     

       98
       98
       -
       		height: 1em;

     

       99
       99
       -
       		margin-left: 8px;

     

       100
       100
       -
       	}

     

       101
       101
       -
       

     

       102
       102
       -
       	#links a.button {

     

       103
       103
       -
       		color: white;

     

       104
       104
       -
       		background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);

     

       105
       105
       -
       		box-shadow:

     

       106
       106
       -
       			inset 0 0 0 1px rgba(255, 255, 255, 0.12),

     

       107
       107
       -
       			inset 0 -2px 0 rgba(0, 0, 0, 0.24);

     

       108
       108
       -
       		border-radius: 10px;

     

       109
       109
       -
       	}

     

       110
       110
       -
       

     

       111
       111
       -
       	#links a.button:hover {

     

       112
       112
       -
       		color: rgb(230, 230, 230);

     

       113
       113
       -
       		box-shadow: none;

     

       114
       114
       -
       	}

     

       115
       115
       -
       

     

       116
       116
       -
       	pre {

     

       117
       117
       -
       		font-family:

     

       118
       118
       -
       			ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',

     

       119
       119
       -
       			monospace;

     

       120
       120
       -
       		font-weight: normal;

     

       121
       121
       -
       		background: linear-gradient(14deg, #d83333 0%, #f041ff 100%);

     

       122
       122
       -
       		-webkit-background-clip: text;

     

       123
       123
       -
       		-webkit-text-fill-color: transparent;

     

       124
       124
       -
       		background-clip: text;

     

       125
       125
       -
       		margin: 0;

     

       126
       126
       -
       	}

     

       127
       127
       -
       

     

       128
       128
       -
       	h2 {

     

       129
       129
       -
       		margin: 0 0 1em;

     

       130
       130
       -
       		font-weight: normal;

     

       131
       131
       -
       		color: #111827;

     

       132
       132
       -
       		font-size: 20px;

     

       133
       133
       -
       	}

     

       134
       134
       -
       

     

       135
       135
       -
       	p {

     

       136
       136
       -
       		color: #4b5563;

     

       137
       137
       -
       		font-size: 16px;

     

       138
       138
       -
       		line-height: 24px;

     

       139
       139
       -
       		letter-spacing: -0.006em;

     

       140
       140
       -
       		margin: 0;

     

       141
       141
       -
       	}

     

       142
       142
       -
       

     

       143
       143
       -
       	code {

     

       144
       144
       -
       		display: inline-block;

     

       145
       145
       -
       		background:

     

       146
       146
       -
       			linear-gradient(66.77deg, #f3cddd 0%, #f5cee7 100%) padding-box,

     

       147
       147
       -
       			linear-gradient(155deg, #d83333 0%, #f041ff 18%, #f5cee7 45%) border-box;

     

       148
       148
       -
       		border-radius: 8px;

     

       149
       149
       -
       		border: 1px solid transparent;

     

       150
       150
       -
       		padding: 6px 8px;

     

       151
       151
       -
       	}

     

       152
       152
       -
       

     

       153
       153
       -
       	.box {

     

       154
       154
       -
       		padding: 16px;

     

       155
       155
       -
       		background: rgba(255, 255, 255, 1);

     

       156
       156
       -
       		border-radius: 16px;

     

       157
       157
       -
       		border: 1px solid white;

     

       158
       158
       -
       	}

     

       159
       159
       -
       

     

       160
       160
       -
       	#news {

     

       161
       161
       -
       		position: absolute;

     

       162
       162
       -
       		bottom: 16px;

     

       163
       163
       -
       		right: 16px;

     

       164
       164
       -
       		max-width: 300px;

     

       165
       165
       -
       		text-decoration: none;

     

       166
       166
       -
       		transition: background 0.2s;

     

       167
       167
       -
       		backdrop-filter: blur(50px);

     

       168
       168
       -
       	}

     

       169
       169
       -
       

     

       170
       170
       -
       	#news:hover {

     

       171
       171
       -
       		background: rgba(255, 255, 255, 0.55);

     

       172
       172
       -
       	}

     

       173
       173
       -
       

     

       174
       174
       -
       	@media screen and (max-height: 368px) {

     

       175
       175
       -
       		#news {

     

       176
       176
       -
       			display: none;

     

       177
       177
       -
       		}

     

       178
       178
       -
       	}

     

       179
       179
       -
       

     

       180
       180
       -
       	@media screen and (max-width: 768px) {

     

       181
       181
       -
       		#container {

     

       182
       182
       -
       			display: flex;

     

       183
       183
       -
       			flex-direction: column;

     

       184
       184
       -
       		}

     

       185
       185
       -
       

     

       186
       186
       -
       		#hero {

     

       187
       187
       -
       			display: block;

     

       188
       188
       -
       			padding-top: 10%;

     

       189
       189
       -
       		}

     

       190
       190
       -
       

     

       191
       191
       -
       		#links {

     

       192
       192
       -
       			flex-wrap: wrap;

     

       193
       193
       -
       		}

     

       194
       194
       -
       

     

       195
       195
       -
       		#links a.button {

     

       196
       196
       -
       			padding: 14px 18px;

     

       197
       197
       -
       		}

     

       198
       198
       -
       

     

       199
       199
       -
       		#news {

     

       200
       200
       -
       			right: 16px;

     

       201
       201
       -
       			left: 16px;

     

       202
       202
       -
       			bottom: 2.5rem;

     

       203
       203
       -
       			max-width: 100%;

     

       204
       204
       -
       		}

     

       205
       205
       -
       

     

       206
       206
       -
       		h1 {

     

       207
       207
       -
       			line-height: 1.5;

     

       208
       208
       -
       		}

     

       209
       209
       -
       	}

     

       210
       210
       -
       </style>

+49

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
       +
       export const projects: Project[] = [

     

       10
       10
       +
         {

     

       11
       11
       +
           title: "Box Critters Localbox",

     

       12
       12
       +
           description:

     

       13
       13
       +
             "Looking to relive Box Critters, a defunct virtual world made by Rocketsnail Games, well you're in luck! In this GitHub organization, you can find: a Typescript, unofficial server remake of the game server, documentation surrounding the game, and an Electron desktop app for playing the game locally.",

     

       14
       14
       +
           date: "since November 2024",

     

       15
       15
       +
           href: "https://github.com/Box-Critters-Localbox/",

     

       16
       16
       +
         },

     

       17
       17
       +
         {

     

       18
       18
       +
           title: "Toonkins Retooned",

     

       19
       19
       +
           description:

     

       20
       20
       +
             "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).",

     

       21
       21
       +
           date: "since October 2024",

     

       22
       22
       +
           href: "https://github.com/ToonkinsRetooned/",

     

       23
       23
       +
           note:

     

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

     

       25
       25
       +
         },

     

       26
       26
       +
         {

     

       27
       27
       +
           title: "Poly+ Rewrite",

     

       28
       28
       +
           description:

     

       29
       29
       +
             "A rewrite of Poly+, my quality-of-life browser extension for Polytoria.com. Built entirely fresh using the WXT extension framework, Typescript, and with added better overall code quality. This version is not public yet.",

     

       30
       30
       +
           date: "since October 2024, work in progress (private)",

     

       31
       31
       +
           href: "#",

     

       32
       32
       +
         },

     

       33
       33
       +
         {

     

       34
       34
       +
           title: "PolyCode",

     

       35
       35
       +
           description:

     

       36
       36
       +
             "PolyCode provides free code snippets, tutorials, and toolbox resources for Polytoria.",

     

       37
       37
       +
           date: "since August 2023, archived",

     

       38
       38
       +
           href: "https://polycode.vercel.app",

     

       39
       39
       +
           note:

     

       40
       40
       +
             "Note: This was made awhile ago, and if I were to redo it, I'd implement SSR instead of doing JSON file fetching.",

     

       41
       41
       +
         },

     

       42
       42
       +
         {

     

       43
       43
       +
           title: "Poly+",

     

       44
       44
       +
           description:

     

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

     

       46
       46
       +
           date: "since February 2023, archived",

     

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

     

       48
       48
       +
         },

     

       49
       49
       +
       ];

src/layouts/Layout.astro

···

       24
       24
        
       		<meta name="site_name" content="hey, I'm Index" />

     

       25
       25
        
       		<meta name="description" content={description} />

     

       26
       26
        
       

     

       27
       27
       +
       		<!-- ICONS -->

     

       28
       28
       +
       		<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

     

       29
       29
       +
       		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

     

       30
       30
       +
       		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

     

       31
       31
       +
       		<link rel="manifest" href="/site.webmanifest">

     

       32
       32
       +
       

     

       27
       33
        
       		<!-- RESOURCES -->

     

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

     

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

+75

src/pages/api/status.ts

···

       1
       1
       +
       import type { APIRoute } from "astro";

     

       2
       2
       +
       import NodeCache from "node-cache";

     

       3
       3
       +
       

     

       4
       4
       +
       const cache = new NodeCache({ stdTTL: 300 }); // cache for 5 minutes

     

       5
       5
       +
       const actorDid = "did:plc:zl4ugdpxfgrzlr5uz2nm7kcq";

     

       6
       6
       +
       

     

       7
       7
       +
       type FeedResponse = {

     

       8
       8
       +
         feed: {

     

       9
       9
       +
           post: {

     

       10
       10
       +
             uri: string;

     

       11
       11
       +
             cid: string;

     

       12
       12
       +
             author: {

     

       13
       13
       +
               did: string;

     

       14
       14
       +
               handle: string;

     

       15
       15
       +
               displayName: string;

     

       16
       16
       +
               avatar: string;

     

       17
       17
       +
               labels: any[];

     

       18
       18
       +
               createdAt: string;

     

       19
       19
       +
             };

     

       20
       20
       +
             record: {

     

       21
       21
       +
               $type: string;

     

       22
       22
       +
               createdAt: string;

     

       23
       23
       +
               text: string;

     

       24
       24
       +
             };

     

       25
       25
       +
             replyCount: number;

     

       26
       26
       +
             repostCount: number;

     

       27
       27
       +
             likeCount: number;

     

       28
       28
       +
             quoteCount: number;

     

       29
       29
       +
             indexedAt: string;

     

       30
       30
       +
             labels: any[];

     

       31
       31
       +
           };

     

       32
       32
       +
         }[];

     

       33
       33
       +
         cursor: string;

     

       34
       34
       +
       };

     

       35
       35
       +
       

     

       36
       36
       +
       export const GET: APIRoute = async () => {

     

       37
       37
       +
         let status = cache.get("status");

     

       38
       38
       +
       

     

       39
       39
       +
         if (status) {

     

       40
       40
       +
           return new Response(JSON.stringify(status), {

     

       41
       41
       +
             headers: { "Content-Type": "application/json", "X-Cache": "HIT" },

     

       42
       42
       +
           });

     

       43
       43
       +
         }

     

       44
       44
       +
       

     

       45
       45
       +
         try {

     

       46
       46
       +
           const res = await fetch(

     

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

     

       48
       48
       +
           );

     

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

     

       50
       50
       +
       

     

       51
       51
       +
           const json: FeedResponse = await res.json();

     

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

     

       53
       53
       +
           status = {

     

       54
       54
       +
             text: latestPost.record.text,

     

       55
       55
       +
             createdAt: latestPost.record.createdAt,

     

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

     

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

     

       58
       58
       +
             }`,

     

       59
       59
       +
           };

     

       60
       60
       +
       

     

       61
       61
       +
           cache.set("status", status);

     

       62
       62
       +
       

     

       63
       63
       +
           return new Response(JSON.stringify(status), {

     

       64
       64
       +
             headers: { "Content-Type": "application/json", "X-Cache": "MISS" },

     

       65
       65
       +
           });

     

       66
       66
       +
         } catch (err) {

     

       67
       67
       +
           return new Response(

     

       68
       68
       +
             JSON.stringify({ error: "Failed to fetch status" }),

     

       69
       69
       +
             {

     

       70
       70
       +
               status: 500,

     

       71
       71
       +
               headers: { "Content-Type": "application/json" },

     

       72
       72
       +
             },

     

       73
       73
       +
           );

     

       74
       74
       +
         }

     

       75
       75
       +
       };

+16 -231

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 Status from "../components/Status.astro";

     

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

     

       3
       8
        
       ---

     

       4
       9
        
       

     

       5
       10
        
       <Layout title="hello" description="insert wave emoji">

     

       6
       11
        
         <main id="page" class="text-center">

     

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

     

       8
       8
       -
             <svg

     

       9
       9
       -
               width="24"

     

       10
       10
       -
               height="24"

     

       11
       11
       -
               viewBox="0 0 24 24"

     

       12
       12
       -
               fill="none"

     

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

     

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

     

       15
       15
       -
             >

     

       16
       16
       -
               <path

     

       17
       17
       -
                 fill-rule="evenodd"

     

       18
       18
       -
                 clip-rule="evenodd"

     

       19
       19
       -
                 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"

     

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

     

       21
       21
       -
             </svg>

     

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

     

       23
       23
       -
           </h1>

     

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

     

       25
       25
       -
             >hey, i'm index. have a great day 👋

     

       26
       26
       -
           </span>

     

       27
       27
       -
           <small

     

       28
       28
       -
             style="display: block; margin-top: -5px;color: rgb(0, 84, 106);font-size: 0.8rem;"

     

       29
       29
       -
             >i usually mess around in Typescript, and recently i've been exploring the <a

     

       30
       30
       -
               href="https://atproto.com/"

     

       31
       31
       -
               target="_blank"><b>AT protocol</b>.</a

     

       32
       32
       -
             >

     

       33
       33
       -
             </small

     

       34
       34
       -
           >

     

       35
       35
       -
           <small

     

       36
       36
       -
             style="display: block; margin-top: -5px;color: rgb(0, 84, 106);font-size: 0.8rem;"

     

       37
       37
       -
             >

     

       38
       38
       -
             i'm interested in making an open-source Goodreads alternative on the protocol :)

     

       39
       39
       -
             </small

     

       40
       40
       -
           >

     

       41
       41
       -
           <ul

     

       42
       42
       -
             class="d-flex mt-4 mb-1"

     

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

     

       44
       44
       -
           >

     

       45
       45
       -
             <a

     

       46
       46
       -
               href="https://github.com/indexxing/"

     

       47
       47
       -
               target="_blank"

     

       48
       48
       -
               class="circle-hover"

     

       49
       49
       -
             >

     

       50
       50
       -
               <svg viewBox="0 0 70 36">

     

       51
       51
       -
                 <path

     

       52
       52
       -
                   d="M6.9739 30.8153H63.0244C65.5269 30.8152 75.5358 -3.68471 35.4998 2.81531C-16.1598 11.2025 0.894099 33.9766 26.9922 34.3153C104.062 35.3153 54.5169 -6.68469 23.489 9.31527"

     

       53
       53
       -
                 ></path>

     

       54
       54
       -
               </svg>

     

       55
       55
       -
               GitHub

     

       56
       56
       -
             </a>

     

       57
       57
       -
             <a

     

       58
       58
       -
               id="discord-link"

     

       59
       59
       -
               href="#"

     

       60
       60
       -
               class="circle-hover"

     

       61
       61
       -
               data-bs-toggle="tooltip"

     

       62
       62
       -
               data-bs-title="index.lua"

     

       63
       63
       -
             >

     

       64
       64
       -
               <svg viewBox="0 0 70 36">

     

       65
       65
       -
                 <path

     

       66
       66
       -
                   d="M6.9739 30.8153H63.0244C65.5269 30.8152 75.5358 -3.68471 35.4998 2.81531C-16.1598 11.2025 0.894099 33.9766 26.9922 34.3153C104.062 35.3153 54.5169 -6.68469 23.489 9.31527"

     

       67
       67
       -
                 ></path>

     

       68
       68
       -
               </svg>

     

       69
       69
       -
               <span> Discord </span>

     

       70
       70
       -
             </a>

     

       71
       71
       -
             <a

     

       72
       72
       -
               href="https://bsky.app/profile/did:plc:sfjxpxxyvewb2zlxwoz2vduw"

     

       73
       73
       -
               target="_blank"

     

       74
       74
       -
               class="circle-hover"

     

       75
       75
       -
             >

     

       76
       76
       -
               <svg viewBox="0 0 70 36">

     

       77
       77
       -
                 <path

     

       78
       78
       -
                   d="M6.9739 30.8153H63.0244C65.5269 30.8152 75.5358 -3.68471 35.4998 2.81531C-16.1598 11.2025 0.894099 33.9766 26.9922 34.3153C104.062 35.3153 54.5169 -6.68469 23.489 9.31527"

     

       79
       79
       -
                 ></path>

     

       80
       80
       -
               </svg>

     

       81
       81
       -
               Bluesky

     

       82
       82
       -
             </a>

     

       83
       83
       -
           </ul>

     

       12
       12
       +
           <Header />

     

       13
       13
       +
           <Status />

     

       14
       14
       +
           <SocialLinks />

     

       84
       15
        
           <a

     

       16
       16
       +
             id="projects-button"

     

       85
       17
        
             href="#"

     

       86
       86
       -
             id="projects-button"

     

       18
       18
       +
             class="d-block mt-3"

     

       87
       19
        
             data-bs-toggle="tooltip"

     

       88
       20
        
             data-bs-title="(Some of) My Projects"

     

       89
       89
       -
             data-bs-placement="bottom">. . .</a

     

       21
       21
       +
             data-bs-placement="bottom"

     

       90
       22
        
           >

     

       23
       23
       +
             . . .

     

       24
       24
       +
           </a>

     

       91
       25
        
         </main>

     

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

     

       93
       93
       -
           <h6

     

       94
       94
       -
             class="text-muted text-center"

     

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

     

       96
       96
       -
           >

     

       97
       97
       -
             (SOME OF) MY PROJECTS

     

       98
       98
       -
           </h6>

     

       99
       99
       -
       

     

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

     

       101
       101
       -
             <li>

     

       102
       102
       -
               <a

     

       103
       103
       -
                 href="https://github.com/Box-Critters-Localbox/"

     

       104
       104
       -
                 target="_blank"

     

       105
       105
       -
                 class="text-reset"

     

       106
       106
       -
               >

     

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

     

       108
       108
       -
                   <small class="text-muted">since November 2024</small>

     

       109
       109
       -
                   <h4>Box Critters Localbox</h4>

     

       110
       110
       -
                   Looking to relive Box Critters, a defunct virtual world made by Rocketsnail

     

       111
       111
       -
                   Games, well you're in luck! In this GitHub organization, you can find:

     

       112
       112
       -
                   a Typescript, unofficial server remake of the game server, documentation

     

       113
       113
       -
                   surrounding the game, and an Electron desktop app for playing the game

     

       114
       114
       -
                   locally.

     

       115
       115
       -
                 </div>

     

       116
       116
       -
               </a>

     

       117
       117
       -
               <a

     

       118
       118
       -
                 href="https://github.com/ToonkinsRetooned/"

     

       119
       119
       -
                 target="_blank"

     

       120
       120
       -
                 class="text-reset"

     

       121
       121
       -
               >

     

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

     

       123
       123
       -
                   <small class="text-muted">since October 2024</small>

     

       124
       124
       -
                   <h4>Toonkins Retooned</h4>

     

       125
       125
       -
                   Looking to relive Toonkins, a defunct virtual world made by Shenanigames,

     

       126
       126
       -
                   well you're in luck! In this Github organization, you can find: a Typescript,

     

       127
       127
       -
                   unofficial server remake of the game server, and a decompiled Unity project

     

       128
       128
       -
                   reassembly of the game (Unity project source coming soon).

     

       129
       129
       -
                   <br />

     

       130
       130
       -
                   <small class="text-muted"

     

       131
       131
       -
                     >Note: "Retooned" is purposely spelled wrong, I know how to spell

     

       132
       132
       -
                     I swear 😭</small

     

       133
       133
       -
                   >

     

       134
       134
       -
                 </div>

     

       135
       135
       -
               </a>

     

       136
       136
       -
               <a

     

       137
       137
       -
                 href="https://github.com/indexxing/PolyPlus-Rewrite/"

     

       138
       138
       -
                 target="_blank"

     

       139
       139
       -
                 class="text-reset"

     

       140
       140
       -
               >

     

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

     

       142
       142
       -
                   <small class="text-muted">since October 2024, coming soon</small>

     

       143
       143
       -
                   <h4>Poly+ Rewrite</h4>

     

       144
       144
       -
                   A rewrite of Poly+, my quality-of-life browser extension for Polytoria.com.

     

       145
       145
       -
                   Built entirely fresh using the WXT extension framework, Typescript, and

     

       146
       146
       -
                   with added better overall code quality. This version is not public yet.

     

       147
       147
       -
                 </div>

     

       148
       148
       -
               </a>

     

       149
       149
       -
               <a

     

       150
       150
       -
                 href="https://polycode.vercel.app/"

     

       151
       151
       -
                 target="_blank"

     

       152
       152
       -
                 class="text-reset"

     

       153
       153
       -
               >

     

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

     

       155
       155
       -
                   <small class="text-muted">since August 2023, archived</small>

     

       156
       156
       -
                   <h4>PolyCode</h4>

     

       157
       157
       -
                   PolyCode provides free code snippets, tutorials, and toolbox resources

     

       158
       158
       -
                   for Polytoria.

     

       159
       159
       -
                   <br />

     

       160
       160
       -
                   <small class="text-muted"

     

       161
       161
       -
                     >Note: This was made awhile ago, and if I were to redo it, I'd

     

       162
       162
       -
                     implement SSR instead of doing JSON file fetching.</small

     

       163
       163
       -
                   >

     

       164
       164
       -
                 </div>

     

       165
       165
       -
               </a>

     

       166
       166
       -
               <a

     

       167
       167
       -
                 href="https://github.com/indexxing/PolyPlus/"

     

       168
       168
       -
                 target="_blank"

     

       169
       169
       -
                 class="text-reset mb-3"

     

       170
       170
       -
               >

     

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

     

       172
       172
       -
                   <small class="text-muted">since February 2023, archived</small>

     

       173
       173
       -
                   <h4>Poly+</h4>

     

       174
       174
       -
                   Poly+ is a quality-of-life Chromium-based extension for Polytoria!

     

       175
       175
       -
                 </div>

     

       176
       176
       -
               </a>

     

       177
       177
       -
             </li>

     

       178
       178
       -
           </ul>

     

       179
       179
       -
         </section>

     

       26
       26
       +
         <ProjectsPane />

     

       180
       27
        
         <script>

     

       181
       181
       -
           const tooltips = document.querySelectorAll(

     

       182
       182
       -
             '[data-bs-toggle="tooltip"]'

     

       183
       183
       -
           ) as NodeListOf<Element>;

     

       184
       184
       -
           [...tooltips].forEach((element) => {

     

       185
       185
       -
             //@ts-ignore

     

       186
       186
       -
             new bootstrap.Tooltip(element);

     

       187
       187
       -
       

     

       188
       188
       -
             element.addEventListener("click", () => (element as HTMLElement).blur());

     

       189
       189
       -
           });

     

       190
       190
       -
       

     

       191
       191
       -
           const page = document.getElementById("page")!;

     

       192
       192
       -
           const projectsButton = document.getElementById("projects-button")!;

     

       193
       193
       -
           projectsButton.addEventListener("click", function () {

     

       194
       194
       -
             projectsButton.blur();

     

       195
       195
       -
             page.classList.toggle("side");

     

       196
       196
       -
             if (!page.classList.contains("side")) {

     

       197
       197
       -
               // fade in

     

       198
       198
       -
               fade("projects-pane", 1, 0, 0.5);

     

       199
       199
       -
             } else {

     

       200
       200
       -
               // fade out

     

       201
       201
       -
               fade("projects-pane", 0, 1, 0.5);

     

       202
       202
       -
             }

     

       203
       203
       -
           });

     

       204
       204
       -
       

     

       205
       205
       -
           /*

     

       206
       206
       -
       			I'm lazy so thank you, Neel

     

       207
       207
       -
       			credits: https://blog.abhranil.net/2011/11/03/simplest-javascript-fade-animation/

     

       208
       208
       -
       			* slightly modified

     

       209
       209
       -
       		*/

     

       210
       210
       -
           function fade(

     

       211
       211
       -
             id: string,

     

       212
       212
       -
             initialOpacity: number,

     

       213
       213
       -
             finalOpacity: number,

     

       214
       214
       -
             totalTime: number

     

       215
       215
       -
           ) {

     

       216
       216
       -
             const element = document.getElementById(id);

     

       217
       217
       -
             if (!element) {

     

       218
       218
       -
               throw new Error("why");

     

       219
       219
       -
             }

     

       220
       220
       -
             if (initialOpacity == 0) {

     

       221
       221
       -
               element.style.visibility = "visible";

     

       222
       222
       -
               element.style.pointerEvents = "auto";

     

       223
       223
       -
             } else {

     

       224
       224
       -
               element.style.pointerEvents = "none";

     

       225
       225
       -
               setTimeout(() => {

     

       226
       226
       -
                 element.style.visibility = "hidden";

     

       227
       227
       -
               }, totalTime);

     

       228
       228
       -
             }

     

       229
       229
       -
       

     

       230
       230
       -
             const currentTick = new Date().getTime();

     

       231
       231
       -
             const elapsed = currentTick - totalTime;

     

       232
       232
       -
             const newOpacity =

     

       233
       233
       -
               initialOpacity +

     

       234
       234
       -
               ((finalOpacity - initialOpacity) * elapsed) / totalTime;

     

       235
       235
       -
             if (

     

       236
       236
       -
               Math.abs(newOpacity - initialOpacity) >

     

       237
       237
       -
               Math.abs(finalOpacity - initialOpacity)

     

       238
       238
       -
             ) {

     

       239
       239
       -
               element.style.opacity = finalOpacity.toString();

     

       240
       240
       -
               return;

     

       241
       241
       -
             }

     

       242
       242
       -
       

     

       243
       243
       -
             element.style.opacity = newOpacity.toString();

     

       244
       244
       -
           }

     

       28
       28
       +
           import { initializeProjects } from "../scripts/projects";

     

       29
       29
       +
           initializeProjects();

     

       245
       30
        
         </script>

     

       246
       31
        
       </Layout>

+60

src/scripts/projects.ts

···

       1
       1
       +
       export function initializeProjects() {

     

       2
       2
       +
         const tooltips = document.querySelectorAll(

     

       3
       3
       +
           '[data-bs-toggle="tooltip"]',

     

       4
       4
       +
         ) as NodeListOf<Element>;

     

       5
       5
       +
         [...tooltips].forEach((element) => {

     

       6
       6
       +
           //@ts-ignore

     

       7
       7
       +
           new bootstrap.Tooltip(element);

     

       8
       8
       +
           element.addEventListener(

     

       9
       9
       +
             "click",

     

       10
       10
       +
             () => (element as HTMLElement).blur(),

     

       11
       11
       +
           );

     

       12
       12
       +
         });

     

       13
       13
       +
       

     

       14
       14
       +
         const page = document.getElementById("page")!;

     

       15
       15
       +
         const projectsButton = document.getElementById("projects-button")!;

     

       16
       16
       +
         projectsButton.addEventListener("click", function () {

     

       17
       17
       +
           projectsButton.blur();

     

       18
       18
       +
           page.classList.toggle("side");

     

       19
       19
       +
           if (!page.classList.contains("side")) {

     

       20
       20
       +
             fade("projects-pane", 1, 0, 0.5);

     

       21
       21
       +
           } else {

     

       22
       22
       +
             fade("projects-pane", 0, 1, 0.5);

     

       23
       23
       +
           }

     

       24
       24
       +
         });

     

       25
       25
       +
       }

     

       26
       26
       +
       

     

       27
       27
       +
       function fade(

     

       28
       28
       +
         id: string,

     

       29
       29
       +
         initialOpacity: number,

     

       30
       30
       +
         finalOpacity: number,

     

       31
       31
       +
         totalTime: number,

     

       32
       32
       +
       ) {

     

       33
       33
       +
         const element = document.getElementById(id);

     

       34
       34
       +
         if (!element) {

     

       35
       35
       +
           throw new Error("why");

     

       36
       36
       +
         }

     

       37
       37
       +
         if (initialOpacity == 0) {

     

       38
       38
       +
           element.style.visibility = "visible";

     

       39
       39
       +
           element.style.pointerEvents = "auto";

     

       40
       40
       +
         } else {

     

       41
       41
       +
           element.style.pointerEvents = "none";

     

       42
       42
       +
           setTimeout(() => {

     

       43
       43
       +
             element.style.visibility = "hidden";

     

       44
       44
       +
           }, totalTime);

     

       45
       45
       +
         }

     

       46
       46
       +
       

     

       47
       47
       +
         const currentTick = new Date().getTime();

     

       48
       48
       +
         const elapsed = currentTick - totalTime;

     

       49
       49
       +
         const newOpacity = initialOpacity +

     

       50
       50
       +
           ((finalOpacity - initialOpacity) * elapsed) / totalTime;

     

       51
       51
       +
         if (

     

       52
       52
       +
           Math.abs(newOpacity - initialOpacity) >

     

       53
       53
       +
             Math.abs(finalOpacity - initialOpacity)

     

       54
       54
       +
         ) {

     

       55
       55
       +
           element.style.opacity = finalOpacity.toString();

     

       56
       56
       +
           return;

     

       57
       57
       +
         }

     

       58
       58
       +
       

     

       59
       59
       +
         element.style.opacity = newOpacity.toString();

     

       60
       60
       +
       }