33j33.github.io/404.html at main · 33j33/33j33.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v5.11.0"><title>404</title><meta name="description" content="This page could not be found."><meta name="theme-color" content="#8c5cf5"><link rel="canonical" href="https://33j33.github.io/"><meta name="og:title" content="404"><meta name="og:description" content="This page could not be found."><meta name="og:image" content="/img/og.png"><meta name="og:url" content="https://33j33.github.io/"><meta name="og:type" content="website"><meta name="og:locale" content="en"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="404"><meta name="twitter:description" content="This page could not be found."><meta name="twitter:image" content="/img/og.png"><link rel="stylesheet" href="/_astro/index.DGEM5TYP.css">
<style>.notfound-container[data-astro-cid-zetdm5md]{display:flex;height:80vh;justify-content:center;align-items:center;width:100%;text-align:center;flex-direction:column}.notfound-container[data-astro-cid-zetdm5md] h1[data-astro-cid-zetdm5md]{font-size:4rem;margin:0}.notfound-container[data-astro-cid-zetdm5md] p[data-astro-cid-zetdm5md]{font-size:1.25em}.block-link[data-astro-cid-zetdm5md]{margin-top:1rem}
</style></head> <body> <main data-pagefind-ignore="true"> <nav data-astro-cid-5blmo7yk> <a class="site-title" href="/" data-astro-cid-5blmo7yk>Ornithop.fyi</a> <ul data-astro-cid-5blmo7yk> <li data-astro-cid-5blmo7yk> <a href="/posts" data-astro-cid-5blmo7yk>Posts</a> </li> <li class="nav-separator" data-astro-cid-5blmo7yk>|</li> <li data-astro-cid-5blmo7yk> <a href="/projects" data-astro-cid-5blmo7yk>Projects</a> </li> <li class="nav-separator" data-astro-cid-5blmo7yk>|</li> <li data-astro-cid-5blmo7yk> <input id="search" type="text" placeholder="Search (Ctrl+K)" data-astro-cid-5blmo7yk> <div id="search-results" data-astro-cid-5blmo7yk></div> </li> </ul> <button class="mobile-nav-toggle" data-astro-cid-5blmo7yk> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="menu-closed" data-astro-cid-5blmo7yk="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12h16M4 6h16M4 18h16"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="menu-open" data-astro-cid-5blmo7yk="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12"/></svg> </button> </nav> <script>
  const searchElement = document.querySelector('#search');
  const results = document.querySelector('#search-results');
  const navToggle = document.querySelector('.mobile-nav-toggle');

  let focusIndex = -1;

  document.addEventListener('keydown', (e) => {
    if (e.key === 'k' && e.ctrlKey) {
      searchElement.focus();
    }

    if (e.key === 'Escape') {
      searchElement.blur();
      results.classList.remove('active');
      focusIndex = -1;
    }

    if (e.key === 'ArrowDown') {
      e.preventDefault();

      focusIndex++;
      const results = document.querySelectorAll('#search-results a');

      if (focusIndex >= results.length) {
        focusIndex = 0;
      }

      results[focusIndex]?.focus();
    }

    if (e.key === 'ArrowUp') {
      e.preventDefault();

      focusIndex--;
      const results = document.querySelectorAll('#search-results a');

      if (focusIndex < 0) {
        focusIndex = results.length - 1;
      }

      results[focusIndex]?.focus();
    }
  });

  let pagefindInitialized = false;

  searchElement?.addEventListener('focus', async () => {
    searchElement.placeholder = '';
    results.classList.add('active');

    // initialize pagefind on first focus
    if (!pagefindInitialized) {
      try {
        window.pagefind = await import("/pagefind/pagefind.js");
        await window.pagefind.init();
        pagefindInitialized = true;
      } catch (error) {
        console.error('Failed to initialize Pagefind:', error);
      }
    }
  });

  searchElement?.addEventListener('blur', () => {
    handleTabletChange()
    setTimeout(() => {
      if (!document.activeElement?.closest('#search-results')) {
        results.classList.remove('active');
        focusIndex = -1;
      }
    }, 1);
  });

  results?.addEventListener('focusout', (e) => {
    if (!e.relatedTarget?.closest('#search-results')) {
      results.classList.remove('active');
      focusIndex = -1;
    }
  });

  searchElement?.addEventListener('input', async (e) => {
    // only search if Pagefind is ready
    if (!pagefindInitialized) {
      return;
    }
    results.innerHTML = '';
    let searchResultHtml = '';

    const search = await window.pagefind.search(e.target.value);
    let i = 0;
    for (const result of search.results) {
      i++;

      const data = await result.data();

      searchResultHtml += `
        <a href="${data.url}">
          <h5 class="no-mt">${data.meta.title}</h5>
          <p>${data.excerpt}</p>
        </a>
        ${i < search.results.length ? '<hr class="separator">' : ''}
      `;
    }

    if (search.results.length === 0 && e.target.value.length > 0) {
      results.innerHTML = '<p style="margin-top: 0;">No results found</p>';
    } else {
      results.innerHTML = searchResultHtml;
    }
    results.classList.add('active');
  });

  navToggle?.addEventListener('click', () => {
    navToggle.classList.toggle('active');
    document.querySelector('nav').classList.toggle('active');
  });

  const handleTabletChange = () => {
    if (window.matchMedia('(max-width: 640px)').matches) {
      searchElement.placeholder = 'Search';
    } else {
      searchElement.placeholder = 'Search (Ctrl+K)';
    }
  }

  document.addEventListener('DOMContentLoaded', handleTabletChange);
  document.addEventListener('resize', handleTabletChange);
</script>   <div class="layout-grid" data-astro-cid-cgyg4spe>   </div>  <div class="notfound-container" data-astro-cid-zetdm5md> <h1 class="text-glow" data-astro-cid-zetdm5md>404</h1> <p data-astro-cid-zetdm5md>This page could not be found.</p> <a class="block-link" href="/" data-astro-cid-zetdm5md>← Back to the homepage</a> </div> </main> <canvas id="overlay-canvas"></canvas> <script type="module">class a extends Error{type="AstroUserError";hint;name="AstroUserError";constructor(t,e){super(),this.message=t,this.hint=e}static is(t){return t.type==="AstroUserError"}}class l{LETTER_FADE_DURATION=[2,7];overlayCanvas;overlayCtx;width=document.body.clientWidth;height=Math.max(document.body.scrollHeight,document.body.offsetHeight,document.documentElement.clientHeight,document.documentElement.offsetHeight);animationFrameId=null;letterPositions=[];letterInstances=[];primaryRgb;constructor(t){const e=t.getContext("2d");if(!e)throw new a("Unable to get 2D context.");this.overlayCanvas=t,this.overlayCtx=e,t.width=this.width,t.height=this.height,this.primaryRgb=window.getComputedStyle(document.documentElement).getPropertyValue("--primary-rgb").trim(),this.initBackground(),this.animationFrameId=requestAnimationFrame(this.redrawBackground)}configureContext=()=>{this.overlayCtx.font="bold 28px Geist Mono",this.overlayCtx.textAlign="start",this.overlayCtx.textBaseline="top",this.overlayCtx.shadowBlur=16};initBackground=()=>{const t=document.title.toLowerCase().split(" | ")[0]||"spectre",e=Math.ceil(this.width/17),n=Math.ceil(this.height/35);for(let o=0;o<n;o++)for(let i=0;i<e;i++)this.letterPositions.push({x:i*17,y:o*35,letter:t[i%t.length]});const r=this.getRandomAmountFromArray(this.letterPositions,Number.parseInt((n*.75).toFixed()));this.configureContext();for(const o of r){this.overlayCtx.fillStyle=`rgba(${this.primaryRgb}, 0)`,this.overlayCtx.shadowColor=`rgba(${this.primaryRgb}, 0)`,this.overlayCtx.fillText(o.letter,o.x,o.y);const i=this.LETTER_FADE_DURATION[0]+Math.random()*(this.LETTER_FADE_DURATION[1]-this.LETTER_FADE_DURATION[0]);this.letterInstances.push({x:o.x,y:o.y,letter:o.letter,timestamp:Date.now(),fadeout:Date.now()+i*1e3})}};easeInOutSine=(t,e,n)=>{const r=n-e;if(t<e)return 0;if(t>n){const h=(t-n)/(r/2);return Math.sin(h*Math.PI)}const o=(t-e)/r;return Math.max(0,.5-.5*Math.cos(o*Math.PI))};getRandomAmountFromArray=(t,e=20)=>{let n=t.length;const r=new Array(e),o=new Array(n);if(e>n)throw new a("getRandomAmountFromArray: more elements taken than available");for(;e--;){const i=Math.floor(Math.random()*n);r[e]=t[i in o?o[i]:i],o[i]=--n in o?o[n]:n}return r};redrawBackground=()=>{this.overlayCtx.clearRect(0,0,this.overlayCanvas.width,this.overlayCanvas.height);const t=Date.now();for(const e of this.letterInstances){if(e.fadeout>t)continue;const n=this.easeInOutSine(t,e.timestamp,e.fadeout);if(n<=0&&t>e.fadeout){this.letterInstances.splice(this.letterInstances.indexOf(e),1);const r=this.getRandomAmountFromArray(this.letterPositions,1);this.letterInstances.push({x:r[0].x,y:r[0].y,letter:r[0].letter,timestamp:t,fadeout:t+(this.LETTER_FADE_DURATION[0]+Math.random()*(this.LETTER_FADE_DURATION[1]-this.LETTER_FADE_DURATION[0]))*1e3})}this.overlayCtx.fillStyle=`rgba(${this.primaryRgb}, ${n})`,this.overlayCtx.shadowColor=`rgba(${this.primaryRgb}, ${n})`,this.overlayCtx.fillText(e.letter,e.x,e.y)}this.animationFrameId=requestAnimationFrame(this.redrawBackground)};resizeBackground=()=>{this.width=document.body.clientWidth,this.height=Math.max(document.body.scrollHeight,document.body.offsetHeight,document.documentElement.clientHeight,document.documentElement.offsetHeight),this.overlayCanvas.width=this.width,this.overlayCanvas.height=this.height,this.overlayCtx.clearRect(0,0,this.overlayCanvas.width,this.overlayCanvas.height),this.letterInstances=[],this.letterPositions=[],this.initBackground()};destroy=()=>{this.animationFrameId!==null&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}}async function d(){const s=new FontFace("Geist Mono","url(/fonts/GeistMono.woff2)");await s.load(),document.fonts.add(s)}async function c(){await d();const s=document.getElementById("overlay-canvas"),t=new l(s),e=new ResizeObserver(()=>{t.resizeBackground()});e.observe(document.body),window.addEventListener("beforeunload",()=>{t.destroy(),e.disconnect()})}c();</script> </body></html>