feat: initial site

.github/workflows/deploy-preview.yml

@@ -0,0 +1,46 @@
+name: Deploy a Preview Site
+
+on:
+  pull_request:
+    branches:
+      - main
+
+concurrency:
+  group: ${{ github.head_ref }}
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "latest"
+      - run: npm install -g pnpm
+      - run: pnpm install
+      - run: 'sed -i "s|baseURL: \"/\"|baseURL: \"/branches/${{ github.head_ref }}\"|g" nuxt.config.ts'
+      - run: cat nuxt.config.ts
+      - run: pnpm nuxt build --preset github_pages
+      - run: |
+          mkdir -p dist/branches/${{ github.head_ref }}
+          mv .output/public/* dist/branches/${{ github.head_ref }} || exit 0
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          name: "Project Documentation"
+          path: "dist"
+  deploy:
+    needs: build
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}branches/${{ github.head_ref }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+        with:
+          artifact_name: "Project Documentation"

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

README.md

@@ -1,3 +1,75 @@
-# Charter
+# Nuxt 3 Minimal Starter
 
-The project charter for `rust-seq`.
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="dark:bg-slate-950">
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+useSeoMeta({
+  title: "rust-seq",
+  ogTitle: "Documentation",
+  description:
+    "rust-seq: a project that endeavours to rebuild the omics ecosystem using Rust",
+  ogDescription:
+    "A project that endeavours to rebuild the omics ecosystem using Rust",
+});
+</script>
+
+<style lang="postcss">
+* {
+  @apply text-slate-900;
+  @apply dark:text-slate-300;
+}
+</style>

assets/css/main.postcss

@@ -0,0 +1,68 @@
+@import url("https://fonts.googleapis.com/css2?family=");
+@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&Space+Grotesk:wght@300..700&display=swap");
+
+/* Prose Code */
+* {
+  @apply prose-code:rounded-md;
+  @apply prose-code:px-2;
+  @apply prose-code:py-1;
+
+  @apply prose-code:text-slate-900;
+  @apply prose-code:bg-slate-100;
+  @apply dark:prose-code:text-slate-100;
+  @apply dark:prose-code:bg-slate-800;
+}
+
+code::before,
+code::after {
+  content: none !important;
+}
+
+/**
+ * Documentation Formatting (Globally Applied)
+ **/
+
+.docs {
+  @apply flex;
+  @apply w-full;
+  @apply h-full;
+
+  .content {
+    @apply flex;
+    @apply w-full;
+    @apply h-full;
+
+    @apply pt-16;
+
+    @apply dark:bg-slate-950;
+
+    main {
+      @apply flex;
+      @apply h-full;
+
+      @apply overflow-auto;
+
+      @apply px-16;
+      @apply mx-10;
+
+      article {
+        /* Prose */
+        @apply prose;
+        @apply prose-slate;
+        @apply dark:prose-invert;
+
+        @apply py-8;
+
+        @apply max-w-3xl;
+
+        :where(a) {
+          @apply no-underline;
+        }
+      }
+
+      aside {
+        @apply dark:text-white;
+      }
+    }
+  }
+}

components/ColorMode.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="cursor-pointer">
+    <UIcon
+      class="w-6 h-6"
+      name="heroicons:moon-solid"
+      v-if="colorMode.preference === Mode.Light"
+      @click="colorMode.preference = Mode.Dark"
+    />
+    <UIcon
+      class="w-6 h-6"
+      name="heroicons:sun-solid"
+      v-else
+      @click="colorMode.preference = Mode.Light"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const colorMode = useColorMode();
+
+enum Mode {
+  Light = "light",
+  Dark = "dark",
+  System = "system",
+}
+</script>

components/ContextMenu.vue

@@ -0,0 +1,66 @@
+<template>
+  <nav>
+    <div class="links">
+      <NuxtLink
+        class="flex flex-col space-y-1.5 items-center justify-center"
+        to="/"
+      >
+        <Icon class="mx-auto w-6 h-6" name="heroicons:home"></Icon>
+        <span class="label">Home</span>
+      </NuxtLink>
+      <NuxtLink
+        class="flex flex-col space-y-1.5 items-center justify-center"
+        to="/docs"
+      >
+        <Icon class="mx-auto w-6 h-6" name="heroicons:book-open"></Icon>
+        <span class="label">Docs</span>
+      </NuxtLink>
+    </div>
+
+    <div class="links">
+      <ColorMode />
+      <a href="https://github.com/rust-seq/rust-seq.github.io">
+        <Icon class="mx-auto w-7 h-7" name="mdi:github"></Icon>
+      </a>
+    </div>
+  </nav>
+</template>
+
+<style scoped lang="postcss">
+nav {
+  .links {
+    @apply flex flex-col justify-start items-center space-y-6;
+  }
+
+  @apply flex;
+  @apply flex-col;
+  @apply justify-between;
+  @apply items-center;
+
+  @apply w-[50px];
+  @apply h-full;
+
+  @apply py-4;
+
+  @apply bg-slate-100;
+  @apply dark:bg-slate-950;
+
+  @apply text-gray-500;
+  @apply hover:text-gray-700;
+  @apply dark:text-gray-200;
+  @apply dark:hover:text-gray-50;
+
+  @apply border-2;
+  @apply border-slate-200;
+  @apply dark:border-slate-900;
+
+  a {
+    .label {
+      @apply text-xs;
+      @apply font-bold;
+      @apply uppercase;
+      @apply transition;
+    }
+  }
+}
+</style>