@xcpcio/board-app 0.6.4 → 0.13.0

package/src/modules/README.md

@@ -0,0 +1,11 @@
+## Modules
+
+A custom user module system. Place a `.ts` file with the following template, it will be installed automatically.
+
+```ts
+import { type UserModule } from "~/types";
+
+export const install: UserModule = ({ app, router, isClient }) => {
+  // do something
+};
+```

package/src/modules/i18n.ts

@@ -0,0 +1,52 @@
+import type { Locale } from "vue-i18n";
+import { createI18n } from "vue-i18n";
+import { type UserModule } from "~/types";
+
+// Import i18n resources
+// https://vitejs.dev/guide/features.html#glob-import
+const i18n = createI18n({
+  legacy: false,
+  locale: "",
+  messages: {},
+});
+
+const localesMap = Object.fromEntries(
+  Object.entries(import.meta.glob("../../locales/*.yml"))
+    .map(([path, loadLocale]) => [path.match(/([\w-]*)\.yml$/)?.[1], loadLocale]),
+) as Record<Locale, () => Promise<{ default: Record<string, string> }>>;
+
+export const availableLocales = Object.keys(localesMap);
+
+const loadedLanguages: string[] = [];
+
+function setI18nLanguage(lang: Locale) {
+  i18n.global.locale.value = lang as any;
+  if (typeof document !== "undefined") {
+    document.querySelector("html")?.setAttribute("lang", lang);
+  }
+
+  return lang;
+}
+
+export async function loadLanguageAsync(lang: string): Promise<Locale> {
+  // If the same language
+  if (i18n.global.locale.value === lang) {
+    return setI18nLanguage(lang);
+  }
+
+  // If the language was already loaded
+  if (loadedLanguages.includes(lang)) {
+    return setI18nLanguage(lang);
+  }
+
+  // If the language hasn't been loaded yet
+  const messages = await localesMap[lang]();
+  i18n.global.setLocaleMessage(lang, messages.default);
+  loadedLanguages.push(lang);
+  return setI18nLanguage(lang);
+}
+
+export const install: UserModule = async ({ app }) => {
+  app.use(i18n);
+  await loadLanguageAsync("en");
+};

package/src/modules/nprogress.ts

@@ -0,0 +1,15 @@
+import NProgress from "nprogress";
+import { type UserModule } from "~/types";
+
+export const install: UserModule = ({ isClient, router }) => {
+  if (isClient) {
+    router.beforeEach((to, from) => {
+      if (to.path !== from.path) {
+        NProgress.start();
+      }
+    });
+    router.afterEach(() => {
+      NProgress.done();
+    });
+  }
+};

package/src/modules/pinia.ts

@@ -0,0 +1,18 @@
+import { createPinia } from "pinia";
+import { type UserModule } from "~/types";
+
+// Setup Pinia
+// https://pinia.vuejs.org/
+export const install: UserModule = ({ isClient, initialState, app }) => {
+  const pinia = createPinia();
+  app.use(pinia);
+
+  // Refer to
+  // https://github.com/antfu/vite-ssg/blob/main/README.md#state-serialization
+  // for other serialization strategies.
+  if (isClient) {
+    pinia.state.value = (initialState.pinia) || {};
+  } else {
+    initialState.pinia = pinia.state.value;
+  }
+};

package/src/modules/pwa.ts

@@ -0,0 +1,15 @@
+import { type UserModule } from "~/types";
+
+// https://github.com/antfu/vite-plugin-pwa#automatic-reload-when-new-content-available
+export const install: UserModule = ({ isClient, router }) => {
+  if (!isClient) {
+    return;
+  }
+
+  router.isReady()
+    .then(async () => {
+      const { registerSW } = await import("virtual:pwa-register");
+      registerSW({ immediate: true });
+    })
+    .catch(() => {});
+};

package/src/modules/toast.ts

@@ -0,0 +1,10 @@
+import ToastPlugin from "vue-toast-notification";
+import "vue-toast-notification/dist/theme-sugar.css";
+
+import { type UserModule } from "~/types";
+
+export const install: UserModule = ({ app }) => {
+  app.use(ToastPlugin, {
+    position: "bottom-right",
+  });
+};

package/src/pages/[...all].vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const { t } = useI18n();
+const route = useRoute();
+
+const contestTypes = [
+  "camp",
+  "icpc",
+  "ccpc",
+  "provincial-contest",
+];
+
+const isNotFound = !contestTypes.some(c => route.fullPath.startsWith(`/${c}`));
+</script>
+
+<template>
+  <div
+    v-if="isNotFound"
+    class="flex flex-col items-center"
+  >
+    <div text-4xl>
+      <div i-carbon-warning />
+    </div>
+    {{ t('not-found') }}
+    <GoBack />
+  </div>
+  <div v-else>
+    <Board />
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: board-layout
+</route>

package/src/pages/about.md

@@ -0,0 +1,21 @@
+---
+title: About
+---
+
+<div class="text-center">
+  <!-- You can use Vue components inside markdown -->
+  <div i-carbon-dicom-overlay class="text-4xl -mb-6 m-auto" />
+  <h3>About</h3>
+</div>
+
+[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. With **file-based routing**, **components auto importing**, **markdown support**, I18n, PWA and uses **UnoCSS** for styling and icons.
+
+```js
+// syntax highlighting example
+function vitesse() {
+  const foo = "bar";
+  console.log(foo);
+}
+```
+
+Check out the [GitHub repo](https://github.com/antfu/vitesse) for more details.

package/src/pages/hi/[name].vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const props = defineProps<{ name: string }>();
+const router = useRouter();
+const user = useUserStore();
+const { t } = useI18n();
+
+watchEffect(() => {
+  user.setNewName(props.name);
+});
+</script>
+
+<template>
+  <div
+    w-full
+    flex flex-col justify-center items-center
+  >
+    <div text-4xl>
+      <div i-carbon-pedestrian inline-block />
+    </div>
+    <p>
+      {{ t('intro.hi', { name: props.name }) }}
+    </p>
+
+    <p text-sm opacity-75>
+      <em>{{ t('intro.dynamic-route') }}</em>
+    </p>
+
+    <template v-if="user.otherNames.length">
+      <p mt-4 text-sm>
+        <span opacity-75>{{ t('intro.aka') }}:</span>
+        <ul>
+          <li v-for="otherName in user.otherNames" :key="otherName">
+            <RouterLink :to="`/hi/${otherName}`" replace>
+              {{ otherName }}
+            </RouterLink>
+          </li>
+        </ul>
+      </p>
+    </template>
+
+    <div>
+      <button
+        m="3 t6" text-sm btn
+        @click="router.back()"
+      >
+        {{ t('button.back') }}
+      </button>
+    </div>
+  </div>
+</template>

package/src/pages/index.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { useFetch } from "@vueuse/core";
+import { useRouteQuery } from "@vueuse/router";
+import { createContestIndexList } from "@xcpcio/core";
+import type { ContestIndexList } from "@xcpcio/core";
+import SearchInput from "~/components/SearchInput.vue";
+
+const { t } = useI18n();
+
+const now = ref(new Date());
+const url = ref(`${window.DATA_HOST}index/contest_list.json?t=${now.value.getTime()}`);
+const refetch = ref(false);
+
+const s = useRouteQuery<string | null>("s", "", { transform: String });
+const searchText = ref<string | null>(s.value);
+const searchInputRef = ref<InstanceType<typeof SearchInput> | null>(null);
+
+const contestIndexAllList = ref([] as ContestIndexList);
+const contestIndexList = ref([] as ContestIndexList);
+
+const {
+  error,
+  isFetching,
+  isFinished,
+} = useFetch(url, {
+  refetch,
+  afterFetch: (ctx) => {
+    contestIndexAllList.value = createContestIndexList(JSON.parse(ctx.data));
+    contestIndexList.value = contestIndexAllList.value.map(c => c);
+
+    return ctx;
+  },
+}).get();
+
+watch(searchText, () => {
+  contestIndexList.value = contestIndexAllList.value.filter((c) => {
+    if (searchText.value?.length === 0) {
+      searchText.value = null;
+    }
+
+    if (searchText.value === null) {
+      s.value = undefined as unknown as string;
+      return true;
+    }
+
+    s.value = searchText.value;
+
+    if (c.contest.name.includes(searchText.value)
+        || c.contest.name.toLowerCase().includes(searchText.value.toLowerCase())) {
+      return true;
+    }
+
+    return false;
+  });
+});
+
+function clearSearch() {
+  searchText.value = null;
+  searchInputRef.value?.focus();
+}
+</script>
+
+<template>
+  <div
+    class="sm:w-[1024px] lg:w-screen"
+    lg:of-x-hidden
+    flex flex-col justify-center items-center
+  >
+    <div>
+      <div
+        v-if="isFetching"
+        class="sm:w-[1000px] lg:w-screen"
+        flex justify-center
+      >
+        {{ t("common.loading") }}...
+      </div>
+
+      <div v-if="error">
+        {{ error }}
+      </div>
+
+      <div
+        v-if="isFinished"
+        class="sm:w-[1000px] lg:w-screen min-h-120"
+        flex flex-col items-center
+      >
+        <div w-240>
+          <SearchInput
+            ref="searchInputRef"
+            v-model="searchText"
+          />
+        </div>
+
+        <div
+          v-if="contestIndexList.length"
+          mt-4
+        >
+          <template
+            v-for="item in contestIndexList"
+            :key="item.boardLink"
+          >
+            <ContestIndex
+              :data="item"
+            />
+          </template>
+        </div>
+
+        <div v-else p10>
+          <div op40 italic mb5>
+            No result found
+          </div>
+          <div row justify-center>
+            <button
+              btn
+              @click="clearSearch()"
+            >
+              Clear search
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: index-layout
+</route>

package/src/pages/test.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+defineOptions({
+  name: "IndexPage",
+});
+const user = useUserStore();
+const name = ref(user.savedName);
+
+const router = useRouter();
+function go() {
+  if (name.value) {
+    router.push(`/hi/${encodeURIComponent(name.value)}`);
+  }
+}
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div>
+    <div text-4xl>
+      <div i-carbon-campsite />
+    </div>
+    <p>
+      <a rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank">
+        Vitesse
+      </a>
+    </p>
+    <p>
+      <em text-sm opacity-75>{{ t('intro.desc') }}</em>
+    </p>
+
+    <div py-4 />
+
+    <TheInput
+      v-model="name"
+      :placeholder="t('intro.whats-your-name')"
+      autocomplete="false"
+      @keydown.enter="go"
+    />
+    <label class="hidden" for="input">{{ t('intro.whats-your-name') }}</label>
+
+    <div>
+      <button
+        m-3 text-sm btn
+        :disabled="!name"
+        @click="go"
+      >
+        {{ t('button.go') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: home
+</route>

package/src/shims.d.ts

@@ -0,0 +1,16 @@
+declare interface Window {
+  DATA_HOST: string;
+}
+
+// with vite-plugin-vue-markdown, markdown files can be treated as Vue components
+declare module '*.md' {
+  import { type DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+declare module '*.vue' {
+  import { type DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/src/stores/user.ts

@@ -0,0 +1,36 @@
+import { acceptHMRUpdate, defineStore } from "pinia";
+
+export const useUserStore = defineStore("user", () => {
+  /**
+   * Current name of the user.
+   */
+  const savedName = ref("");
+  const previousNames = ref(new Set<string>());
+
+  const usedNames = computed(() => Array.from(previousNames.value));
+  const otherNames = computed(() => usedNames.value.filter(name => name !== savedName.value));
+
+  /**
+   * Changes the current name of the user and saves the one that was used
+   * before.
+   *
+   * @param name - new name to set
+   */
+  function setNewName(name: string) {
+    if (savedName.value) {
+      previousNames.value.add(savedName.value);
+    }
+
+    savedName.value = name;
+  }
+
+  return {
+    setNewName,
+    otherNames,
+    savedName,
+  };
+});
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useUserStore as any, import.meta.hot));
+}

package/src/styles/color.css

@@ -0,0 +1,51 @@
+html {
+  --global-background: #fff;
+
+  --theme-status-pending: #6cf;
+  --theme-status-configuration-error: #e28989;
+  --theme-status-system-error: grey;
+  --theme-status-compilation-error: #1679dc;
+  --theme-status-canceled: #676fc1;
+  --theme-status-file-error: darkorchid;
+  --theme-status-runtime-error: darkorchid;
+  --theme-status-time-limit-exceeded: sandybrown;
+  --theme-status-memory-limit-exceeded: sandybrown;
+  --theme-status-output-limit-exceeded: sandybrown;
+  --theme-status-partially-correct: #01bab2;
+  --theme-status-wrong-answer: #ff4545;
+  --theme-status-accepted: #37da58;
+  --theme-status-judgement-failed: #FF5722;
+  --theme-status-waiting: grey;
+  --theme-status-preparing: #de4d9e;
+  --theme-status-compiling: #00b5ad;
+  --theme-status-running: #6cf;
+  --theme-status-skipped: #78909C;
+  --theme-status-unknown: #000;
+  --theme-status-undefined: var(--theme-status-unknown);
+}
+
+html.dark {
+  --global-background: #323443;
+
+  --theme-status-pending: #6cf;
+  --theme-status-configuration-error: #e28989;
+  --theme-status-system-error: #a5a5a5;
+  --theme-status-compilation-error: #3387da;
+  --theme-status-canceled: #6770d0;
+  --theme-status-file-error: #bc35ff;
+  --theme-status-runtime-error: #bc35ff;
+  --theme-status-time-limit-exceeded: #ff9840;
+  --theme-status-memory-limit-exceeded: #ff9840;
+  --theme-status-output-limit-exceeded: #ff9840;
+  --theme-status-partially-correct: #01bab2;
+  --theme-status-wrong-answer: #ff4545;
+  --theme-status-accepted: #37da58;
+  --theme-status-judgement-failed: #FF5722;
+  --theme-status-waiting: #a5a5a5;
+  --theme-status-preparing: #de4d9e;
+  --theme-status-compiling: #00b5ad;
+  --theme-status-running: #6cf;
+  --theme-status-skipped: #78909C;
+  --theme-status-unknown: #fff;
+  --theme-status-undefined: var(--theme-status-unknown);
+}

package/src/styles/main.css

@@ -0,0 +1,30 @@
+@import './markdown.css';
+@import './color.css';
+
+html,
+body,
+#app {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+html.dark {
+  background: var(--global-background);
+  color-scheme: dark;
+}
+
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: rgb(13,148,136);
+  opacity: 0.75;
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+}

package/src/styles/markdown.css

@@ -0,0 +1,28 @@
+.prose pre:not(.shiki) {
+  padding: 0;
+}
+
+.prose .shiki {
+  font-family: 'DM Mono', monospace;
+  font-size: 1.2em;
+  line-height: 1.4;
+}
+
+.prose img {
+  width: 100%;
+}
+
+.shiki-light {
+  background: #f8f8f8 !important;
+}
+.shiki-dark {
+  background: #0e0e0e !important;
+}
+
+html.dark .shiki-light {
+  display: none;
+}
+
+html:not(.dark) .shiki-dark {
+  display: none;
+}