noctbot/web/src/routes/rules/index.svelte

<script lang="typescript" context="module">
  import type { AppSession, PageData, PreloadContext } from "src/utils/session";
  import type { Option } from "@shared/common/async_utils";
  import type { MDText } from "./md";
  import type { VerifyInfo } from "./verify";

  export async function preload(
    this: PreloadContext,
    { path }: PageData,
    session: AppSession
  ) {
    const mdResult = await this.fetch("/rules/md");
    const md = (await mdResult.json()) as Option<MDText, { error: string }>;

    const verifyReusult = await this.fetch("/rules/verify");
    const verify = (await verifyReusult.json()) as VerifyInfo;
    return {
      rulesText: md.ok ? md.text : "",
      sitekey: verify.captchaSitekey,
    };
  }
</script>

<script lang="typescript">
  import { Converter } from "showdown";
  import { onMount } from "svelte";
  import Icon from "svelte-awesome/components/Icon.svelte";
  import { faSpinner } from "@fortawesome/free-solid-svg-icons";
  import { fade } from "svelte/transition";

  export let rulesText!: string;
  export let sitekey!: string;
  const spinner = (faSpinner as unknown) as undefined;
  let htmlContent = new Converter().makeHtml(rulesText);

  enum State { None, Verify, Error, Message };

  let state: State = State.None;
  let message: string = "";
  function onVerified(e: { key: string }) {
    // console.log(e.key);
    state = State.Verify;
    // message = "wew";
  }
</script>

<style>
  @import "./markdown-dark.css";

  .viewport {
    @apply bg-gray-700 h-screen w-screen p-8 pt-16;
    overflow-y: auto;
  }

  @screen lg {
    .viewport {
      @apply w-2/4;
    }
  }

  .message {
    @apply text-white;
  }

  .error {
    @apply text-red-600;
  }
</style>

<div class="viewport md-dark md-body">
  <div>
    {@html htmlContent}
  </div>
  <div class="flex flex-col flex-wrap items-center">
    <a href="asd" on:click|preventDefault={() => onVerified({ key: "wew" })}>Verify test</a>
    <!-- <h-captcha site-key={sitekey} dark on:verified={onVerified} /> -->
    <div class="py-2">
      {#if state == State.Verify}
        <span transition:fade={{ duration: 50 }}><Icon data={spinner} spin /> Verifying</span>
        {:else if state == State.Error || state == State.Message }
        <span class:message={state == State.Message} class:error={state == State.Error}>{message}</span>
      {/if}
    </div>
  </div>
</div>