chore: number of small updates and tweaks to the website

I'll be honest it's quite a rough edit. I want to come back and clean up the page a bit

.github/workflows/release-please.yml

@@ -59,6 +59,10 @@ jobs:
             built-*/*.snap
             built-*/*.blockmap
             tauri-release/*
+      - name: Invoke website publish
+        uses: benc-uk/workflow-dispatch@v1
+        with:
+          workflow: Deploy Website
   publish-to-homebrew-cask:
     name: Publish to Homebrew Cask
     needs:

.github/workflows/website-deploy.yml

@@ -5,7 +5,6 @@ on:
       - master
     paths:
       - "website"
-  release:
   workflow_dispatch:
 jobs:
   deploy:

website/content/hero.md

@@ -1,5 +1,7 @@
 ---
-title: Stay Focused, Take a Break.
-subTitle: Download this elegant multi-platform Pomodoro desktop app to boost your productivity.
+title: Stay Focused, Take a Break!
+subTitle: Download this elegant multi-platform Pomodoro desktop app to boost your productivity
+betaText: Or check out the Tauri Beta version
+mobileText: Mobile versions coming soon!
 image: ../assets/images/preview-light.png
 ---

website/content/roadmap.md

@@ -3,12 +3,12 @@ title: Roadmap
 subTitle: Features to look forward to.
 
 features:
+  - heading: Mobile Version
+    description: Take it on the go! A mobile version of the app is currently in the works.
+
   - heading: Customizable shortcuts
     description: Provide a way to make the default keyboard shortcuts customizable by the user.
 
-  - heading: Website Blocker
-    description: Enable user to block specific website while working in order to stay on focus.
-
   - heading: Productivity report
     description: Provide some useful summary about user's productivity to have some sense of accomplishments.
 

website/src/config.ts

@@ -9,13 +9,54 @@ export const AUTHOR_GITHUB_URL = "https://github.com/roldanjr";
 export const PROJECT_GITHUB_URL = `${AUTHOR_GITHUB_URL}/pomatez`;
 export const PROJECT_RELEASES_URL = `${PROJECT_GITHUB_URL}/releases`;
 
-export const INSTALLER = `${PROJECT_RELEASES_URL}/download/${APP_VERSION}/Pomatez-${APP_VERSION}`;
+export const DOWNLOAD_PREFIX = `${PROJECT_RELEASES_URL}/download/${APP_VERSION}`;
+export const INSTALLER = `${DOWNLOAD_PREFIX}/Pomatez-${APP_VERSION}`;
 
-export const WINDOWS_INSTALLER = `${INSTALLER}-setup.exe`;
-export const DEB_INSTALLER = `${INSTALLER}-linux.deb`;
-export const APP_IMAGE_INSTALLER = `${INSTALLER}-linux.AppImage`;
-export const RPM_INSTALLER = `${INSTALLER}-linux.rpm`;
-export const MAC_INSTALLER = `${INSTALLER}-mac.dmg`;
+export const WINDOWS_x64_INSTALLER = `${INSTALLER}-win-x64-setup.exe`;
+export const WINDOWS_ARM_INSTALLER = `${INSTALLER}-win-arm64-setup.exe`;
+export const DEB_INSTALLER = `${INSTALLER}-linux-amd64.deb`;
+export const APP_IMAGE_x64_INSTALLER = `${INSTALLER}-linux-x86_64.AppImage`;
+export const APP_IMAGE_ARM_INSTALLER = `${INSTALLER}-linux-arm64.AppImage`;
+export const RPM_INSTALLER = `${INSTALLER}-linux-x86_64.rpm`;
+export const MAC_x64_INSTALLER = `${INSTALLER}-mac-x64.dmg`;
+export const MAC_ARM_INSTALLER = `${INSTALLER}-mac-arm64.dmg`;
+
+export const INSTALLERS = {
+  ELECTRON: {
+    WINDOWS: {
+      x64: WINDOWS_x64_INSTALLER,
+      arm: WINDOWS_ARM_INSTALLER,
+    },
+    LINUX: {
+      deb: DEB_INSTALLER,
+      appImage: {
+        x64: APP_IMAGE_x64_INSTALLER,
+        arm: APP_IMAGE_ARM_INSTALLER,
+      },
+      rpm: RPM_INSTALLER,
+    },
+    MAC: {
+      x64: MAC_x64_INSTALLER,
+      arm: MAC_ARM_INSTALLER,
+    },
+  },
+  // Only done like this because of the different caps and it doesn't have v before the version.
+  TAURI: {
+    WINDOWS: {
+      x64: `${DOWNLOAD_PREFIX}/Pomatez_${json.version}_x64_en-US-win-tauri-beta.msi`,
+      arm: `${DOWNLOAD_PREFIX}/Pomatez_${json.version}_arm64-setup-win-tauri-beta.exe`,
+    },
+    LINUX: {
+      deb: `${DOWNLOAD_PREFIX}/pomatez_${json.version}_amd64-linux-tauri-beta.deb`,
+      appImage: {
+        x64: `${DOWNLOAD_PREFIX}/pomatez_${json.version}_amd64-linux-tauri-beta.AppImage`,
+      },
+    },
+    MAC: {
+      universal: `${DOWNLOAD_PREFIX}/Pomatez_${json.version}_universal-mac-tauri-beta.dmg`,
+    },
+  },
+};
 
 export const NAV_LINKS = [
   { label: "Features", link: "features", offset: -24 },

website/src/queries/hero.ts

@@ -27,6 +27,8 @@ export const useLandingQuery = () =>
             frontmatter {
               title
               subTitle
+              betaText
+              mobileText
             }
           }
         }

website/src/sections/download.tsx

@@ -15,11 +15,11 @@ import {
 } from "../styles";
 import { Header, SVG } from "../components";
 import {
-  WINDOWS_INSTALLER,
   DEB_INSTALLER,
-  APP_IMAGE_INSTALLER,
   RPM_INSTALLER,
-  MAC_INSTALLER,
+  MAC_x64_INSTALLER,
+  WINDOWS_x64_INSTALLER,
+  APP_IMAGE_x64_INSTALLER,
 } from "../config";
 import { useDownloadQuery } from "../queries";
 
@@ -50,9 +50,9 @@ export function Download() {
             </StyledDownloadOSLogo>
 
             <StyledDownloadButton>
-              <a href={WINDOWS_INSTALLER}>
+              <a href={WINDOWS_x64_INSTALLER}>
                 <SVG name="download" />
-                Windows 7, 8 and 10
+                Windows 7+ x64
               </a>
             </StyledDownloadButton>
           </StyledDownloadForWindows>
@@ -70,7 +70,7 @@ export function Download() {
                 </a>
               </StyledDownloadButton>
               <StyledDownloadButton>
-                <a href={APP_IMAGE_INSTALLER} id="app-image">
+                <a href={APP_IMAGE_x64_INSTALLER} id="app-image">
                   <SVG name="download" />
                   .AppImage
                 </a>
@@ -103,7 +103,7 @@ export function Download() {
             </StyledDownloadOSLogo>
 
             <StyledDownloadButton>
-              <a href={MAC_INSTALLER}>
+              <a href={MAC_x64_INSTALLER}>
                 <SVG name="download" />
                 Mac OS 10.10+
               </a>

website/src/sections/hero.tsx

@@ -16,11 +16,12 @@ import {
   StyledHeroHeading,
   StyledHeroDescription,
   StyledWatermarkContainer,
+  StyledHeroBetaDescription,
 } from "../styles";
 import {
-  WINDOWS_INSTALLER,
-  MAC_INSTALLER,
+  MAC_x64_INSTALLER,
   PROJECT_GITHUB_URL,
+  INSTALLERS,
 } from "../config";
 import { OSTypes, detectOS } from "../utils";
 import { ThemeContext } from "../context";
@@ -55,27 +56,71 @@ export function Hero() {
     setOperatingSystem(detectOS());
   }, []);
 
-  const renderDownloadButton = () => {
+  const renderDownloadButton = (beta: boolean, isArm: boolean) => {
     switch (operatingSystem) {
       case "Windows":
         return (
           <StyledCTADownloader>
-            <a href={WINDOWS_INSTALLER}>
+            <a
+              href={
+                INSTALLERS[beta ? "TAURI" : "ELECTRON"].WINDOWS[
+                  isArm ? "arm" : "x64"
+                ]
+              }
+            >
               <SVG name="windows" />
-              for Windows
+              for Windows {isArm ? "ARM" : "x64"}
             </a>
           </StyledCTADownloader>
         );
       case "MacOS":
+        if (beta) {
+          if (isArm) {
+            // We only want to show one universal button
+            return <></>;
+          } else {
+            return (
+              <StyledCTADownloader>
+                <a href={INSTALLERS.TAURI.MAC.universal}>
+                  <SVG name="apple" />
+                  for macOS Intel & Apple Silicon
+                </a>
+              </StyledCTADownloader>
+            );
+          }
+        }
         return (
           <StyledCTADownloader>
-            <a href={MAC_INSTALLER}>
+            <a href={MAC_x64_INSTALLER}>
               <SVG name="apple" />
-              for Mac OS
+              for macOS {isArm ? "Apple Silicon" : "Intel"}
             </a>
           </StyledCTADownloader>
         );
       case "Linux":
+        if (beta) {
+          // Weird way of doing it, but arm  versions are not currently being build for these.
+          if (isArm) {
+            return (
+              <StyledCTADownloader>
+                <a href={INSTALLERS.TAURI.LINUX.deb}>
+                  <SVG name="tux" />
+                  for Linux Deb
+                </a>
+              </StyledCTADownloader>
+            );
+          } else {
+            return (
+              <StyledCTADownloader>
+                <a href={INSTALLERS.TAURI.LINUX.appImage.x64}>
+                  <SVG name="tux" />
+                  for Linux AppImage
+                </a>
+              </StyledCTADownloader>
+            );
+          }
+        }
+        if (!isArm) return <></>;
         return (
           <StyledCTADownloader>
             <ScrollLink
@@ -91,20 +136,23 @@ export function Hero() {
           </StyledCTADownloader>
         );
       default:
-        return (
-          <StyledCTADownloader>
-            <ScrollLink
-              href="/"
-              to="installers"
-              offset={-24}
-              duration={420}
-              smooth
-            >
-              <SVG name="download" />
-              See Installers
-            </ScrollLink>
-          </StyledCTADownloader>
-        );
+        if (!beta && !isArm) {
+          return (
+            <StyledCTADownloader>
+              <ScrollLink
+                href="/"
+                to="installers"
+                offset={-24}
+                duration={420}
+                smooth
+              >
+                <SVG name="download" />
+                See Installers
+              </ScrollLink>
+            </StyledCTADownloader>
+          );
+        }
+        return <></>;
     }
   };
 
@@ -125,7 +173,8 @@ export function Hero() {
           </StyledHeroHeader>
 
           <StyledHeroActionWrapper>
-            {renderDownloadButton()}
+            {renderDownloadButton(false, false)}
+            {renderDownloadButton(false, true)}
             <StyledGithubLink
               as={"a"}
               href={PROJECT_GITHUB_URL}
@@ -136,6 +185,15 @@ export function Hero() {
               GitHub Repo
             </StyledGithubLink>
           </StyledHeroActionWrapper>
+          <StyledHeroBetaDescription>
+            {operatingSystem === "Mobile"
+              ? frontmatter.mobileText
+              : frontmatter.betaText}
+          </StyledHeroBetaDescription>
+          <StyledHeroActionWrapper>
+            {renderDownloadButton(true, false)}
+            {renderDownloadButton(true, true)}
+          </StyledHeroActionWrapper>
         </StyledHeroActionContainer>
 
         <StyledPreviewWrapper>

website/src/styles/animate.ts

@@ -2,7 +2,7 @@ export const stagger = {
   animate: {
     transition: {
       delayChildren: 0.3,
-      staggerChildren: 0.3,
+      staggerChildren: 0.2,
     },
   },
 };

website/src/styles/sections/download.ts

@@ -122,8 +122,6 @@ export const StyledLinuxInstallerWrapper = styled.div`
 
     padding: 0 1.2rem;
 
-    overflow: hidden;
-
     & > a {
       padding: 0 1.2rem;
     }

website/src/styles/sections/hero.ts

@@ -98,7 +98,6 @@ export const StyledWaterMarkRight = styled(WaterMarkRight)`
 
 export const StyledHeroActionContainer = styled.div`
   display: grid;
-  row-gap: 4.8rem;
   justify-content: center;
   justify-items: center;
 
@@ -150,6 +149,27 @@ export const StyledHeroDescription = styled(motion.h2).attrs(() => ({
   font-size: 2.2rem;
   font-weight: 400;
   line-height: 1.7;
+  margin-bottom: 4.8rem;
+
+  ${media.tabletSm} {
+    line-height: 1.5;
+  }
+
+  ${media.mobileXl} {
+    font-size: 2rem;
+  }
+`;
+
+export const StyledHeroBetaDescription = styled(motion.h2).attrs(
+  () => ({
+    variants: fadeFromBottom,
+  })
+)`
+  font-size: 2.2rem;
+  font-weight: 400;
+  line-height: 1.7;
+  margin-top: 4.8rem;
+  margin-bottom: 2.8rem;
 
   ${media.tabletSm} {
     line-height: 1.5;
@@ -164,7 +184,7 @@ export const StyledHeroActionWrapper = styled(motion.div).attrs(() => ({
   variants: fadeFromBottom,
 }))`
   display: grid;
-  grid-template-columns: repeat(2, max-content);
+  grid-template-columns: repeat(3, max-content);
   gap: 2rem;
 
   ${media.tabletMd} {

website/src/types/markdown.ts

@@ -35,6 +35,8 @@ type CompanyList = {
 export type Frontmatter = {
   title: string;
   subTitle?: string;
+  betaText?: string;
+  mobileText?: string;
   features?: FeatureList[];
   boosters?: BoosterList[];
   stepList?: StepList[];