<script lang="ts">
  import { fade } from "svelte/transition";
  import github from "$lib/images/github.svg?raw";
  import xmppSvg from "$lib/assets/xmpp.svg?raw";
  import { decode, isDecoded } from "$lib/decoder";
  import { getContext, onMount } from "svelte";
  import { isMobile } from "$lib/mobile";
  import { browser } from "$app/environment";

  const header = getContext<Header>("Header");

  var description = [
    "Hiiiii im Rose!! I've been coding and abusing computers for like 8 years now (as of 2024)!",
    "My main focus is in OSdev and Containers, but my experience ranges all accross the spectrum, ",
    "frontend, backend, weird amalgamations inbetween, I can make everything work! ",
  ].join("");


  var xmpp:string = "e714815f15b15315615a12714b15015a15915615615b11515615914e";
  var matrix: string = "c210213a12713012b1230fc13612a1270ef12313213113612a12712512313413b0f012512e137124"
  onMount(() => {
    if (navigator.webdriver) {
      return;
    }

    xmpp = decode(xmpp);
    matrix = decode(matrix);
  });

  onMount(async () => {
    var chrome: boolean = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
    if (chrome && !isMobile()) { // I can forgive people for using chrome on mobile tbh
      header.addMessage("Chrome browsers enforce Googles monopolistic position while harming user privacy. See https://contrachrome.com/", {
	dismissable: false
      })
    }
  });

  function copyText(text: string): (event: MouseEvent|KeyboardEvent) => void {
    return (event) => {
      if (event instanceof KeyboardEvent && event.code != "Enter")
	  return;

      if (navigator.clipboard == null) {
	return;
      }

      navigator.clipboard.writeText(text)
	.then(() => header.addMessage("Copied to clipboard"))
	.catch(() => header.addMessage("Failed to copy to clipboard"));
    };
  }
</script>

<svelte:head>
  <title>rose</title>
  <meta name="description" content="Coder of C. Abuser of Containers. Hater of golang." />
  <meta property="og:title" content="axtlos"/>
  <meta property="og:type" content="website"/>
  <meta property="og:description" content={description}/>
  <meta property="og:image" content="/me.png"/>
  <meta property="og:url" content="https://xenia.blahaj.land"/>
  <meta property="og:locale" content="en_US"/>
  <link rel="me" href="https://eepy.moe/@rose"/>
</svelte:head>

<page>
  <section id="welcome">
    <h1>Hi! I'm Rose</h1>
  </section>
  <section id="about">
    <h2>About me!</h2>
    <p>
      I'm a software engineer with an interest in Containers and OSdev.
      I currently live in germany and study Computer Science.
    </p>
    <p>
      Apart from Coding and tinkering with Hardware, I enjoy listening to music, reading books and going on walks!
    </p>
  </section>
  <section id="projects">
    <h2>My work</h2>
    <p>
      Currently most of my time is spent working on
      <a href="https://github.com/Vanilla-OS/vib">vib</a>,
      as the maintainer of vib I handle any project management,
      while actively expanding it with more features.
    </p>
    <p>
      In connection to vib. I am currently reviving an older
      project called Project Shards, an arch based immutable
      distribution, that went through many different designs,
      but has settled on using systemd-sysupdate in the same vein as
      <a href="https://os.gnome.org">GNOME OS</a>.
    </p>
    <p>
      A more thorough list of Projects can be found in the
      <a href="/projects">Projects</a> page.
    </p>
  </section>
  <section id="contact">
    <h2>Contact</h2>
    <p class="subheader">Click on a card to copy its address</p>
    <p>
      You can contact me on these platforms!
    </p>
    {#if !browser}
      <p id="noscript">
	You seem to have disable javascript! But this website uses js to deobfuscate the contacts &gt;w&lt;
	The obfuscated codes are displayed in the boxes below, you can use <a href="/deobfuscate.sh">this shell script</a> to debofuscate them locally!
      </p>
    {/if}
    <ul>
      <li id="xmpp">
	<div
	  role="button"
	  tabindex="0"
	  on:click={isDecoded(matrix) ? copyText(xmpp) : undefined}
	  on:keydown={isDecoded(matrix) ? copyText(xmpp) : undefined}>
	  <h3>XMPP</h3>
	  {#if !browser}
	    <noscript>{xmpp}</noscript>
	  {:else}
	    <p>{xmpp}</p>
	  {/if}
	</div>
      </li>
      <li id="matrix">
	<div
	  role="button"
	  tabindex="0"
	  on:click={isDecoded(matrix) ? copyText(matrix) : undefined}
	  on:keydown={isDecoded(matrix) ? copyText(matrix) : undefined}>
	  <h3>matrix</h3>
 	  {#if !browser}
	    <noscript>{matrix}</noscript>
	  {:else}
	    <p>{matrix}</p>
	  {/if}
	</div>
      </li>
      <li id="email">
	<div>
	  <a class="permalink"
	     href={isDecoded(matrix) ? `mailto:${xmpp}` :  `javascript:void`}>
	    <h3>email</h3>
	    {#if !browser}
	      <noscript>{xmpp}</noscript>
	    {:else}
	      <p>{xmpp}</p>
	    {/if}
	  </a>
	</div>
      </li>
    </ul>
  </section>
  <section id="buttons">
    <a href="https://xenia.blahaj.land" target="_blank" rel="noopener noreferrer" title="rose garden">
      <img src="/rose_88x31.png" alt="button that says 'rose', a rose grows out of the o, on the left the character milk chan is visible, a very pale girl with shoulder length brown hair wearing a black hoodie" width="88px" height="31px">
    </a>
    <a href="https://nyaa.si/view/964646" target="_blank" rel="noopener noreferrer" title="watch lain now!!">
      <img src="/lain.gif" alt="lain" width="88px" height="31px">
    </a>
    <img src="/ltg.gif" alt="now!" width="88px" height="31px">
    <img src="/transrights.png" alt="trans rights now!" width="88px" height="31px">
    <img src="/xeniatransnow.png" alt="use linux now!" width="88px" height="31px">
  </section>
</page>

<style lang="scss">
  @use "$lib/styles";
  page {
    & section {
      width: 100%;

      &#buttons {
	margin-top: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding-bottom: 10px;
      }
      
      &#contact {
	& .subheader {
	  font-size: 0.8em;
	  margin-top: -25px;
	}
	& ul {
	  list-style: none;
	  display: flex;
	  gap: 10px;
	  flex-wrap: wrap;
	  flex-direction: row;
	  padding: unset;
	  margin: unset;
          margin-top: 1em;
	  margin-bottom: 1em;
	  justify-content: space-around;

	  & li#xmpp > div { @include styles.contact($color: #FFC067, $text-color: #000000); }
	  & li#matrix > div { @include styles.contact($color: #7D7, $text-color: #000000); }
	  & li#email {
	    & a {
	      text-decoration: none;
	    }
	    & > div {
	      @include styles.contact($color: #B19CD9, $text-color: #000000);
	    }
	  }

	  & li > * {
	    & p {
	      text-align: center;
	    }
	  }
	}
      }
    }
  }

</style>
