Merge branch 'master' of https://github.com/VueTubeApp/VueTube-site-v2

src/components/Foot.astro

@@ -2,18 +2,23 @@
 const sitemap = [
  {
  label: "Team",
+ external: true,
+ href: "https://github.com/orgs/VueTubeApp/people",
  },
  {
  label: "Branding",
+ external: true,
+ href: "https://github.com/VueTubeApp/VueTube-Branding",
  },
  {
  label: "Support",
+ href: "/discord",
+ external: true,
  },
  {
  label: "Donate",
- },
- {
- label: "Connect",
+ external: true,
+ href: "https://ko-fi.com/vuetube",
  },
 ];
 const socials = [
@@ -91,7 +96,7 @@ const { fixed, classes } = Astro.props;
  {
  sitemap.map((item, index) => (
  <a
- class="cursor-pointer pb-1 duration-300 hover:translate-x-1 hover:text-white md:pb-2 md:text-xl"
+ class="cursor-pointer pb-2 duration-300 hover:translate-x-1 hover:text-white md:pb-3 md:text-xl"
  href={item.href}
  target={item.external ? "_blank" : ""}
  rel={item.external ? "noopener" : ""}

src/components/Head.vue

@@ -3,8 +3,8 @@
  id="nav"
  :class="
  menu
- ? 'h-[23rem] rounded-b-3xl bg-neutral-800 bg-opacity-30 duration-300'
- : 'h-[5.5rem] overflow-hidden rounded-b-none bg-transparent duration-300'
+ ? 'max-h-[23rem] rounded-b-3xl bg-neutral-800 bg-opacity-30 duration-300'
+ : 'max-h-[5.5rem] overflow-hidden rounded-b-none bg-transparent duration-300'
  "
  class="fixed top-0 z-50 flex w-full flex-wrap items-center justify-between p-4 backdrop-blur-xl lg:px-6"
  >
@@ -55,6 +55,16 @@
  >
  Features
  </a>
+ <a
+ href="/contribute"
+ class="-mr-5 block cursor-pointer whitespace-nowrap px-8 py-4 transition duration-150 hover:scale-90 hover:text-white focus:scale-90 focus:text-white focus:outline-none md:-mx-3"
+ @mouseenter="moveBackgroundToTarget"
+ @mouseleave="onUnhover"
+ @focusin="moveBackgroundToTarget"
+ @focusout="onUnhover"
+ >
+ Contribute
+ </a>
  <a
  href="/docs"
  class="-mr-5 block cursor-pointer whitespace-nowrap px-8 py-4 transition duration-150 hover:scale-90 hover:text-white focus:scale-90 focus:text-white focus:outline-none md:-mx-3"
@@ -94,7 +104,7 @@
  >
  <Icon class="h-6 w-6" icon="fa-brands:github" />
  </a>
- <Interactive
+ <a
  id="dl"
  url="/#download"
  class="flex items-center justify-center gap-x-2 overflow-hidden rounded-3xl px-1 py-1 font-semibold capitalize text-white transition duration-75 hover:scale-105 hover:border-neutral-600 hover:bg-transparent hover:text-white focus:scale-105 focus:border-neutral-600 focus:bg-transparent focus:text-white focus:outline-none focus:ring focus:ring-neutral-300 active:scale-110 active:rounded-2xl active:duration-150 sm:px-2 sm:py-2 md:border md:border-white md:bg-white md:text-black xl:pl-3 xl:pr-4"
@@ -105,16 +115,12 @@
  >
  <Icon class="h-6 w-6" icon="mdi:download" />
  <span class="hidden xl:block">Download</span>
- </Interactive>
+ </a>
  <button
  @click="menu = !menu"
  class="-mr-4 rounded-l-full bg-neutral-600 bg-opacity-30 p-2 pl-3 md:hidden"
  >
- <Icon
- class="h-6 w-6 duration-300"
- :class="menu ? 'rotate-90' : 'rotate-0'"
- :icon="menu ? 'mdi:close' : 'mdi:menu'"
- />
+ <Hamburger class="h-6 w-6" :class="menu ? 'active' : ''"></Hamburger>
  </button>
  </div>
  </header>
@@ -123,7 +129,7 @@
 <script lang="ts" setup>
 import { ref, onMounted } from "vue";
 import { Icon } from "@iconify/vue";
-import Interactive from "./Interactive.vue";
+import Hamburger from "./icons/hamburger.vue";
 import anime from "animejs";
 
 const menu = ref(false);

src/components/Interactive.vue

@@ -1,21 +1,21 @@
 <template>
  <button
  v-if="!disabled && !url"
- class="flex items-center justify-center gap-x-2 rounded-3xl px-4 py-2 duration-300"
+ class="flex items-center justify-center gap-x-2 rounded-3xl px-4 py-3 duration-300 md:py-2"
  >
  <slot></slot>
  </button>
  <button
  v-else-if="disabled"
- class="text-grey-500 pointer-events-none flex items-center justify-center gap-x-2 overflow-hidden rounded-3xl bg-gray-300 px-4 py-2 font-semibold capitalize"
+ class="text-grey-500 pointer-events-none flex items-center justify-center gap-x-2 overflow-hidden rounded-3xl bg-gray-300 px-4 py-3 font-semibold capitalize md:py-2"
  >
  <slot></slot>
  </button>
  <a
  v-else
  :href="url"
  :target="isExternal ? '_blank' : '_self'"
- class="flex items-center justify-center gap-x-2 rounded-3xl px-4 py-2 duration-300"
+ class="flex items-center justify-center gap-x-2 rounded-3xl px-4 py-3 duration-300 md:py-2"
  >
  <slot></slot>
  </a>

src/components/download-chip.astro

@@ -3,8 +3,8 @@ import { Octokit } from "@octokit/core";
 import { Icon } from "astro-iconify";
 
 interface Props {
- releaseType: "canary" | "release";
- release: number;
+ releaseType?: "canary" | "release";
+ release?: number;
 }
 
 const { releaseType = "release", release = 0 } = Astro.props;
@@ -25,7 +25,11 @@ interface graphqlResponse {
  };
 }
 
-async function getDownload() {
+async function getDownload(): Promise<[string, string, string] | undefined> {
+ if (!import.meta.env.IS_PROD) {
+ console.log("Development mode, returning mocked array");
+ return ["https://github.com/VueTubeApp", "2023-01-01T00:00:00Z", "v1.1.1"];
+ }
  const octokit = new Octokit({ auth: import.meta.env.GITHUB_TOKEN });
  if (releaseType === "canary") {
  const { data } = await octokit.request(
@@ -90,5 +94,33 @@ async function getDownload() {
  }
  }
 }
-console.log(await getDownload());
+
+const response = await getDownload();
+if (!response) {
+ return;
+}
+let [downloadUrl, publishedAt, name] = response;
+publishedAt = new Date(publishedAt).toLocaleDateString("en-US", {
+ year: "numeric",
+ month: "long",
+ day: "numeric",
+});
 ---
+
+<a
+ class="w-full rounded-2xl bg-neutral-800 p-8 duration-300 hover:scale-105 focus:scale-105 active:scale-90"
+ href={downloadUrl}
+>
+ <div class="flex flex-col items-center">
+ <Icon name="mdi:android" class="h-24 w-24" />
+ <h3 class="mt-4 text-2xl font-bold">Download</h3>
+ <p class="mt-2 text-center text-neutral-400">
+ Download the latest {releaseType} build of VueTube for Android
+ </p>
+ </div>
+ <div class="mt-4 flex flex-col items-center">
+ <p class="mt-2 text-neutral-400">
+ {name} ({publishedAt})
+ </p>
+ </div>
+</a>

src/components/icons/hamburger.vue

@@ -0,0 +1,40 @@
+<template>
+ <svg
+ class="hamburger"
+ stroke="currentColor"
+ viewBox="-4 6 100 100"
+ fill="none"
+ >
+ <path
+ class="line"
+ stroke-width="10"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ d="m 20 40 h 60 a 1 1 0 0 1 0 20 h -60 a 1 1 0 0 1 0 -40 h 30 v 70"
+ ></path>
+ </svg>
+</template>
+
+<style>
+.hamburger {
+ transition: translate 0.25s ease-in-out, rotate 0.25s ease-in-out;
+ translate: 0 2px;
+ scale: 1.2;
+}
+
+.hamburger.active {
+ cursor: pointer;
+ rotate: 45deg;
+ translate: 0 -1px;
+}
+
+.hamburger .line {
+ stroke-dasharray: 60 31 60 300;
+ transition: stroke-dashoffset 0.4s ease-in-out,
+ stroke-dasharray 0.4s ease-in-out;
+}
+.hamburger.active .line {
+ stroke-dasharray: 60 105 60 300;
+ stroke-dashoffset: -90;
+}
+</style>

src/layouts/BaseLayout.astro

@@ -43,8 +43,8 @@ const {
  </head>
  <body
  class:list={[
- "flex h-fit min-h-screen flex-col items-center",
- navPadding ? "pt-[5.5rem]" : "",
+ "flex h-fit min-h-screen flex-col items-center pt-[5.5rem] ",
+ navPadding ? "" : "sm:pt-0",
  stickyFooter ? "pb-[25rem] md:pb-[19rem]" : "justify-between",
  ]}
  >

src/pages/index.astro

@@ -55,7 +55,7 @@ const avatars = await getOcto();
  >
  </div>
  <div
- class="flex w-1/2 flex-col justify-center portrait:h-1/2 portrait:w-full portrait:justify-end"
+ class="flex w-1/2 flex-col justify-center px-2 portrait:h-1/2 portrait:w-full portrait:justify-end"
  >
  <h1
  class="mb-6 text-4xl font-black md:text-5xl lg:mb-8 portrait:text-center"
@@ -68,21 +68,21 @@ const avatars = await getOcto();
  </span>
  </h1>
  <div
- class="flex items-start gap-x-2 portrait:flex-col portrait:items-center portrait:gap-y-6"
+ class="flex flex-col items-center gap-x-2 gap-y-6 md:items-start md:landscape:mx-0 md:landscape:flex-row"
  >
  <Interactive
  url="#download"
- class="border border-white bg-white px-6 py-2 font-semibold text-black duration-150 hover:border-neutral-600 hover:bg-black hover:px-10 hover:text-white focus:bg-black focus:px-10 focus:text-white focus:outline-none focus:ring focus:ring-neutral-300 active:scale-90 active:duration-75 landscape:rounded-r-md"
+ class="w-full max-w-xs border border-white bg-white px-6 py-2 font-semibold text-black duration-150 hover:border-neutral-600 hover:bg-black hover:px-10 hover:text-white focus:bg-black focus:text-white focus:outline-none focus:ring focus:ring-neutral-300 active:scale-90 active:duration-75 md:focus:px-10 md:landscape:w-fit md:landscape:rounded-r-md"
  >
  <Icon class="h-6 w-6" name="mdi:download" />
  Download
  </Interactive>
- <a
- href="/docs"
- class="rounded-3xl border border-neutral-600 px-6 py-2 font-semibold capitalize text-white duration-150 hover:bg-neutral-600 focus:bg-neutral-800 focus:outline-none focus:ring focus:ring-neutral-300 active:scale-90 active:duration-75 landscape:rounded-l-md"
+ <Interactive
+ url="/docs"
+ class="flex w-full max-w-xs justify-center rounded-3xl border border-neutral-600 px-6 font-semibold capitalize text-white duration-150 hover:bg-neutral-600 focus:bg-neutral-800 focus:outline-none focus:ring focus:ring-neutral-300 active:scale-90 active:duration-75 md:landscape:w-fit md:landscape:rounded-l-md"
  >
  Documentation
- </a>
+ </Interactive>
  </div>
  </div>
  </section>
@@ -140,7 +140,7 @@ const avatars = await getOcto();
  <!-- This will be a fancy animation. Image for effect -->
  <img
  src="/extension-mock.png"
- alt=""
+ alt="mockup of the VueTube UI on a phone"
  class="absolute mx-auto w-full drop-shadow-lg"
  />
  </div>
@@ -214,7 +214,7 @@ const avatars = await getOcto();
  </div>
  </section>
 
- <section
+ <!-- <section
  class="flex w-full flex-col items-center bg-gradient-to-b from-transparent to-black px-4"
  >
  <h2
@@ -274,9 +274,11 @@ const avatars = await getOcto();
  </div>
  </div>
  </div>
- </section>
+ </section> -->
 
- <section class="m-auto flex w-full flex-col items-center bg-black px-4">
+ <section
+ class="m-auto flex w-full flex-col items-center bg-gradient-to-b from-transparent to-black px-4 px-4"
+ >
  <h2
  class="mb-4 max-w-screen-md text-center text-3xl font-bold capitalize md:mb-6 md:text-5xl"
  >
@@ -321,7 +323,7 @@ const avatars = await getOcto();
  <div
  class="m-auto flex w-full max-w-screen-md flex-col justify-between gap-8 px-4 md:flex-row"
  >
- <div class="mb-8 flex flex-grow flex-col items-start">
+ <div class="flex flex-grow flex-col items-start">
  <div
  class="h-20 w-20 bg-[url('/logomark.svg')] bg-contain bg-center bg-no-repeat"
  >
@@ -336,49 +338,53 @@ const avatars = await getOcto();
  0.5.1 For Android | Released 2023.01.6 (2.22 MB)
  </div>
  <!-- <DownloadChip releaseType="release" /> -->
- <div class="flex w-full flex-col gap-2 font-semibold md:w-fit">
+ <div class="flex w-fit flex-col gap-2 font-semibold">
  <Interactive
  url="https://github.com/VueTubeApp/VueTube/releases/latest/"
  isExternal={true}
- class="items-center gap-2 rounded-full bg-brand-green px-6 py-2 duration-200 hover:scale-105 hover:bg-green-700"
+ class="items-center gap-2 rounded-full bg-brand-green px-6 duration-200 hover:scale-105 hover:bg-green-700"
  >
  Download Latest
  </Interactive>
  <Interactive
  isExternal={true}
- class="flex items-center justify-center gap-2 rounded-full bg-white px-4 py-2 text-black duration-200 hover:scale-105 hover:bg-neutral-200"
+ class="flex items-center justify-center gap-2 rounded-full bg-white px-4 text-black duration-200 hover:scale-105 hover:bg-neutral-200"
  url="https://github.com/VueTubeApp"
  >
  GitHub
  <Icon name="mdi:arrow-right" class="h-4 w-4" />
  </Interactive>
  </div>
  </div>
- <div class="flex flex-col gap-2 md:w-[60%]">
- <div class="flex flex-col sm:flex-row">
+ <div class="flex flex-col gap-10 md:w-[60%] md:gap-8">
+ <div class="flex flex-col-reverse gap-2 md:flex-col">
  <Interactive
- class="group flex items-center gap-2 rounded-full bg-brand-blue px-6 py-2 font-semibold text-black duration-200"
+ class="group flex w-fit items-center gap-2 rounded-full bg-brand-blue px-6 font-semibold text-black duration-200"
  >
  Past Releases
  <Icon
+ url="https://github.com/VueTubeApp/VueTube/releases"
+ isExternal={true}
  name="mdi:arrow-right"
  class="h-4 duration-300 group-hover:w-4 group-hover:opacity-100 md:w-0 md:opacity-0"
  />
  </Interactive>
+ <DownloadChip releaseType="release" />
  </div>
- <div class="w-full rounded-2xl bg-neutral-800 p-8"></div>
- <div class="mt-12 flex flex-col sm:flex-row">
+ <div class="flex flex-col-reverse gap-2 md:flex-col">
  <Interactive
- class="group flex items-center gap-2 rounded-full bg-brand-red px-6 py-2 font-semibold duration-200"
+ url="https://nightly.link/VueTubeApp/VueTube/workflows/ci/main"
+ isExternal={true}
+ class="group flex w-fit items-center gap-2 rounded-full bg-brand-red px-6 font-semibold duration-200"
  >
  Canary
  <Icon
  name="mdi:arrow-right"
  class="h-4 duration-300 group-hover:w-4 group-hover:opacity-100 md:w-0 md:opacity-0"
  />
  </Interactive>
+ <DownloadChip releaseType="canary" />
  </div>
- <div class="w-full rounded-2xl bg-neutral-800 p-8"></div>
  </div>
  </div>
  </section>