gedaechtnas/gdn-app/src/App.vue

<script setup lang="ts">
import CNavbar from "./components/CNavbar.vue";
import CNote from "./components/CNote.vue";
import { Path, Segment } from "./lib/path";
import { useUiStore } from "./stores/ui";

const ui = useUiStore();

window.addEventListener("keypress", (ev) => {
  if (document.activeElement !== document.body) return;

  if (ev.key === "Escape") {
    if (ui.mode !== "focus") {
      ui.focus();
      return;
    }

    const parent = ui.focusPath.parent();
    if (parent) ui.focusOn(parent);
    return;
  }
});
</script>

<template>
  <div class="flex h-screen touch-pan-x touch-pan-y flex-col">
    <CNavbar />
    <div class="h-full overflow-auto p-1 pr-5">
      <CNote
        v-if="ui.anchorId"
        :path="new Path()"
        :segment="new Segment(ui.anchorId, 0)"
        :force-open="true"
      />
    </div>
  </div>
</template>

<style>
@import "tailwindcss";

/*
Weights according to https://github.com/bBoxType/FiraGO?tab=readme-ov-file#firago-font-weights

100 - Thin
200 - UltraLight
300 - Light
400 - Regular
500 - Medium
600 - SemiBold
700 - Bold
800 - ExtraBold
900 - Heavy
*/

@font-face {
  font-family: FiraGO;
  font-style: normal;
  font-weight: 100;
  src: url("/fonts/FiraGO-Thin.woff2") format("woff2");
}
@font-face {
  font-family: FiraGO;
  font-style: normal;
  font-weight: 200;
  src: url("/fonts/FiraGO-UltraLight.woff2") format("woff2");
}
@font-face {
  font-family: FiraGO;
  font-style: normal;
  font-weight: 300;
  src: url("/fonts/FiraGO-Light.woff2") format("woff2");
}
@font-face {
  font-family: FiraGO;
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/FiraGO-Regular.woff2") format("woff2");
}
@font-face {
  font-family: FiraGO;
  font-style: normal;
  font-weight: 500;
  src: url("/fonts/FiraGO-Medium.woff2") format("woff2");
}
@font-face {
  font-family: FiraGO;
  font-style: normal;
  font-weight: 600;
  src: url("/fonts/FiraGO-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: FiraGO;
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/FiraGO-Bold.woff2") format("woff2");
}
@font-face {
  font-family: FiraGO;
  font-style: normal;
  font-weight: 800;
  src: url("/fonts/FiraGO-ExtraBold.woff2") format("woff2");
}
@font-face {
  font-family: FiraGO;
  font-style: normal;
  font-weight: 900;
  src: url("/fonts/FiraGO-Heavy.woff2") format("woff2");
}
@font-face {
  font-family: FiraGO;
  font-style: italic;
  font-weight: 100;
  src: url("/fonts/FiraGO-ThinItalic.woff2") format("woff2");
}
@font-face {
  font-family: FiraGO;
  font-style: italic;
  font-weight: 200;
  src: url("/fonts/FiraGO-UltraLightItalic.woff2") format("woff2");
}
@font-face {
  font-family: FiraGO;
  font-style: italic;
  font-weight: 300;
  src: url("/fonts/FiraGO-LightItalic.woff2") format("woff2");
}
@font-face {
  font-family: FiraGO;
  font-style: italic;
  font-weight: 400;
  src: url("/fonts/FiraGO-Italic.woff2") format("woff2");
}
@font-face {
  font-family: FiraGO;
  font-style: italic;
  font-weight: 500;
  src: url("/fonts/FiraGO-MediumItalic.woff2") format("woff2");
}
@font-face {
  font-family: FiraGO;
  font-style: italic;
  font-weight: 600;
  src: url("/fonts/FiraGO-SemiBoldItalic.woff2") format("woff2");
}
@font-face {
  font-family: FiraGO;
  font-style: italic;
  font-weight: 700;
  src: url("/fonts/FiraGO-BoldItalic.woff2") format("woff2");
}
@font-face {
  font-family: FiraGO;
  font-style: italic;
  font-weight: 800;
  src: url("/fonts/FiraGO-ExtraBoldItalic.woff2") format("woff2");
}
@font-face {
  font-family: FiraGO;
  font-style: italic;
  font-weight: 900;
  src: url("/fonts/FiraGO-HeavyItalic.woff2") format("woff2");
}

@theme {
  --font-sans: FiraGO;
}
</style>