Landing page for website (#798)

* feat(landing): add initial files

* ci: add new process for landing dev

* ci: run landing on port 4200 and on host

* ci: update biome version

* chore(landing): start chaning names of website

* chore(landing): add link to docs

* ci(landing): make project private

* feat(landing): display logo in header

* refactor: change location of icon file

* refactor: move icon to separate project

* ci: add explicit project deps

* chore(landing): change favicon to new path

* feat: change landing section

* chore(landing): playing with types

* ci: add action for landing page

* chore(landing): run linter on files

* build(backend): bump version

* fix(backend): more title types in imdb

* refactor(frontend): imports and server only components

* fix(backend): add new imdb title type

* ci: change step name

.github/workflows/release.yml

@@ -151,3 +151,25 @@ jobs:
 
       - name: Deploy to github pages
         run: poetry run mkdocs gh-deploy --force
+
+  deploy-landing:
+    runs-on: ubuntu-latest
+    needs: docker-release
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Moon
+        uses: moonrepo/setup-toolchain@v0
+        with:
+          auto-install: true
+
+      - name: Build landing page
+        run: moon run landing:build
+
+      - name: Deploy to cloudflare pages
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: apps/landing/dist
+          publish_branch: cf-pages
+          force_orphan: true

.gitignore

@@ -49,3 +49,5 @@ docs/site
 node_modules
 .cache
 remix-routes.d.ts
+.astro
+dist

.moon/workspace.yml

@@ -3,6 +3,8 @@ $schema: "https://moonrepo.dev/schemas/workspace.json"
 projects:
   frontend: "apps/frontend"
   kodi: "apps/kodi"
+  landing: "apps/landing"
+  assets: "libs/assets"
   generated: "libs/generated"
   graphql: "libs/graphql"
   ts-utils: "libs/ts-utils"

apps/backend/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "ryot"
-version = "5.0.9"
+version = "5.0.10"
 edition = "2021"
 repository = "https://github.com/IgnisDa/ryot"
 license = "GPL-3.0"

apps/backend/src/importer/imdb.rs

@@ -46,8 +46,8 @@ pub async fn import(
             }
         };
         let lot = match record.title_type.as_str() {
-            "Movie" | "Video" => MediaLot::Movie,
-            "TV Series" | "TV Mini Series" => MediaLot::Show,
+            "Movie" | "Video" | "movie" | "video" => MediaLot::Movie,
+            "TV Series" | "TV Mini Series" | "tvSeries" | "tvMiniSeries" => MediaLot::Show,
             tt => {
                 failed_items.push(ImportFailedItem {
                     lot: None,

apps/backend/src/utils.rs

@@ -57,7 +57,7 @@ pub const USER_AGENT_STR: &str = const_str::concat!(
     ")"
 );
 pub const AVATAR_URL: &str =
-    "https://raw.githubusercontent.com/IgnisDa/ryot/main/apps/frontend/public/icon-512x512.png";
+    "https://raw.githubusercontent.com/IgnisDa/ryot/main/libs/assets/icon-512x512.png";
 pub const TEMP_DIR: &str = "tmp";
 
 const FRONTEND_OAUTH_ENDPOINT: &str = "/api/auth";

apps/frontend/app/components/media.tsx

@@ -70,6 +70,8 @@ import { type ReactNode, useState } from "react";
 import type { DeepPartial } from "ts-essentials";
 import { match } from "ts-pattern";
 import { withoutHost } from "ufo";
+import { HiddenLocationInput } from "~/components/common";
+import { confirmWrapper } from "~/components/confirmation";
 import events from "~/lib/events";
 import {
 	dayjsLib,
@@ -79,8 +81,6 @@ import {
 import { useGetMantineColor } from "~/lib/hooks";
 import type { ApplicationUser } from "~/lib/utilities.server";
 import classes from "~/styles/common.module.css";
-import { HiddenLocationInput } from "./common";
-import { confirmWrapper } from "./confirmation";
 
 export const commitMedia = async (
 	identifier: string,

apps/frontend/app/lib/generals.ts

@@ -26,6 +26,8 @@ dayjs.extend(duration);
 dayjs.extend(localizedFormat);
 
 export const CurrentWorkoutKey = "CurrentWorkout";
+export const LOGO_IMAGE_URL =
+	"https://raw.githubusercontent.com/IgnisDa/ryot/main/libs/assets/icon-512x512.png";
 
 export const getSetColor = (l: SetLot) =>
 	match(l)

apps/frontend/app/lib/hooks.ts

@@ -3,8 +3,8 @@ import { useMantineTheme } from "@mantine/core";
 import { useNavigate, useSearchParams } from "@remix-run/react";
 import { useAtom } from "jotai";
 import Cookies from "js-cookie";
-import { CurrentWorkoutKey, getStringAsciiValue } from "./generals";
-import { type InProgressWorkout, currentWorkoutAtom } from "./workout";
+import { CurrentWorkoutKey, getStringAsciiValue } from "~/lib/generals";
+import { type InProgressWorkout, currentWorkoutAtom } from "~/lib/workout";
 
 export function useGetMantineColor() {
 	const theme = useMantineTheme();

apps/frontend/app/lib/utilities.server.ts

@@ -28,7 +28,7 @@ import { withoutHost } from "ufo";
 import { v4 as randomUUID } from "uuid";
 import { type ZodTypeAny, type output, z } from "zod";
 import { zx } from "zodix";
-import { redirectToQueryParam } from "./generals";
+import { redirectToQueryParam } from "~/lib/generals";
 
 const isProduction = process.env.NODE_ENV === "production";
 export const API_URL = process.env.API_URL || "http://localhost:8000/backend";

apps/frontend/app/lib/workout.ts

@@ -11,8 +11,8 @@ import type { Dayjs } from "dayjs";
 import { createDraft, finishDraft } from "immer";
 import { atomWithReset, atomWithStorage } from "jotai/utils";
 import { v4 as randomUUID } from "uuid";
+import { CurrentWorkoutKey } from "~/lib/generals";
 import type { loader as resourcesLoader } from "~/routes/api.fitness.exercises.$id";
-import { CurrentWorkoutKey } from "./generals";
 
 export type ExerciseSet = {
 	statistic: WorkoutSetStatistic;

apps/frontend/app/root.tsx

@@ -27,13 +27,14 @@ import {
 } from "@remix-run/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import "mantine-datatable/styles.layer.css";
+import { MountPoint } from "~/components/confirmation";
 import { Toaster } from "~/components/toaster";
+import { LOGO_IMAGE_URL } from "~/lib/generals";
 import {
 	colorSchemeCookie,
 	combineHeaders,
 	getToast,
 } from "~/lib/utilities.server";
-import { MountPoint } from "./components/confirmation";
 
 const theme = createTheme({
 	fontFamily: "Poppins",
@@ -65,8 +66,7 @@ export const meta: MetaFunction = () => {
 		},
 		{
 			property: "og:image",
-			content:
-				"https://raw.githubusercontent.com/IgnisDa/ryot/main/apps/frontend/public/icon-512x512.png",
+			content: LOGO_IMAGE_URL,
 		},
 	];
 };
@@ -76,14 +76,14 @@ export const links: LinksFunction = () => {
 		{
 			rel: "icon",
 			type: "image/png",
-			sizes: "32x32",
-			href: "/favicon-32x32.png",
+			sizes: "16x16",
+			href: "/favicon-16x16.png",
 		},
 		{
 			rel: "icon",
 			type: "image/png",
-			sizes: "16x16",
-			href: "/favicon-16x16.png",
+			sizes: "32x32",
+			href: "https://raw.githubusercontent.com/IgnisDa/ryot/main/libs/assets/favicon-32x32.png",
 		},
 		{
 			rel: "stylesheet",

apps/frontend/app/routes/_dashboard.tsx

@@ -49,7 +49,7 @@ import {
 import { produce } from "immer";
 import { joinURL } from "ufo";
 import { HiddenLocationInput } from "~/components/common";
-import { getLot } from "~/lib/generals";
+import { LOGO_IMAGE_URL, getLot } from "~/lib/generals";
 import {
 	redirectIfNotAuthenticatedOrUpdated,
 	serverVariables,
@@ -363,7 +363,7 @@ export default function Layout() {
 						<Link to={$path("/")} style={{ all: "unset" }}>
 							<Group>
 								<Image
-									src="/icon-512x512.png"
+									src={LOGO_IMAGE_URL}
 									h={40}
 									w={40}
 									radius="md"

apps/frontend/moon.yml

@@ -1,3 +1,6 @@
+dependsOn:
+  - 'assets'
+
 fileGroups:
   remix:
     - app/**/*

apps/frontend/public/manifest.json

@@ -24,7 +24,7 @@
 			"type": "image/png"
 		},
 		{
-			"src": "/icon-512x512.png",
+			"src": "https://raw.githubusercontent.com/IgnisDa/ryot/main/libs/assets/icon-512x512.png",
 			"sizes": "512x512",
 			"type": "image/png"
 		}

apps/landing/astro.config.mjs

@@ -0,0 +1,13 @@
+import sitemap from "@astrojs/sitemap";
+import tailwind from "@astrojs/tailwind";
+import { defineConfig } from "astro/config";
+
+import robotsTxt from "astro-robots-txt";
+
+// https://astro.build/config
+export default defineConfig({
+	site: import.meta.env.DEV
+		? "http://localhost:3000"
+		: "https://luna-landing-rust.vercel.app/",
+	integrations: [tailwind(), sitemap(), robotsTxt()],
+});

apps/landing/moon.yml

@@ -0,0 +1,28 @@
+dependsOn:
+  - 'assets'
+
+fileGroups:
+  astro:
+    - src/**/*
+    - public/**/*
+    - astro.config.*
+    - tailwind.config.*
+
+tasks:
+  dev:
+    command: 'astro dev --port 4200 --host'
+    local: true
+
+  check:
+    command: 'astro check'
+    inputs:
+      - '@group(astro)'
+
+  build:
+    command: 'astro build'
+    deps:
+      - ~:check
+    inputs:
+      - '@group(astro)'
+    outputs:
+      - dist

apps/landing/package.json

@@ -0,0 +1,17 @@
+{
+	"name": "@ryot/landing",
+	"type": "module",
+	"private": true,
+	"devDependencies": {
+		"tailwind-scrollbar": "3.1.0"
+	},
+	"dependencies": {
+		"@astrojs/check": "0.5.10",
+		"@astrojs/sitemap": "3.1.4",
+		"@astrojs/tailwind": "5.1.0",
+		"@fontsource-variable/rubik": "5.0.22",
+		"astro": "4.7.0",
+		"astro-robots-txt": "1.0.0",
+		"tailwindcss": "3.4.3"
+	}
+}

apps/landing/src/components/Action.astro

@@ -0,0 +1,21 @@
+---
+import type { HTMLTag, Polymorphic } from "astro/types";
+
+type actionTypes = "button" | "text" | "icon" | "default";
+
+type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }>;
+
+const { as: Tag, class: className, type, ...props } = Astro.props;
+
+const defaultStyles = {
+	button:
+		"px-3 py-1 text-sm md:text-base md:px-6 md:py-2 rounded-lg text-center font-semibold hover:scale-110 hover:opacity-85 transition inline-block",
+	text: "hover:opacity-50 hover:scale-105",
+	icon: "text-white hover:opacity-50 hover:scale-105",
+	default: "",
+};
+
+const baseClass = defaultStyles[type as actionTypes] ?? "";
+---
+
+<Tag class:list={[baseClass, className]} {...props}><slot /></Tag>

apps/landing/src/components/Background.astro

@@ -0,0 +1,4 @@
+<div
+  class="absolute top-0 z-[-2] h-screen w-full bg-white bg-[radial-gradient(100%_50%_at_50%_0%,rgba(0,163,255,0.13)_0,rgba(0,163,255,0)_50%,rgba(0,163,255,0)_100%)]"
+>
+</div>

apps/landing/src/components/Card.astro

@@ -0,0 +1,5 @@
+<article
+  class="flex flex-col border max-w-xs xl:max-w-sm rounded-lg shadow px-5 py-5 gap-y-10"
+>
+  <slot />
+</article>

apps/landing/src/components/Icon.astro

@@ -0,0 +1,54 @@
+---
+import type { Icon } from "@/config/landing.interface";
+import CheckIcon from "@/icons/commons/CheckIcon.astro";
+import ConfigIcon from "@/icons/commons/ConfigIcon.astro";
+import DevIcon from "@/icons/commons/DevIcon.astro";
+import FileIcon from "@/icons/commons/FileIcon.astro";
+import PlanetIcon from "@/icons/commons/PlanetIcon.astro";
+import FacebookIcon from "@/icons/socials/FacebookIcon.astro";
+import GithubIcon from "@/icons/socials/GithubIcon.astro";
+import InstagramIcon from "@/icons/socials/InstagramIcon.astro";
+import TwitterIcon from "@/icons/socials/TwitterIcon.astro";
+import NetlifyIcon from "@/icons/techs/NetlifyIcon.astro";
+import ReactIcon from "@/icons/techs/ReactIcon.astro";
+import SolidIcon from "@/icons/techs/SolidIcon.astro";
+import SvelteIcon from "@/icons/techs/SvelteIcon.astro";
+import VercelIcon from "@/icons/techs/VercelIcon.astro";
+import VueIcon from "@/icons/techs/VueIcon.astro";
+
+interface Props {
+	icon: Icon;
+	class?: string;
+}
+
+const { icon, class: className } = Astro.props;
+
+const icons = [
+	ConfigIcon,
+	DevIcon,
+	FileIcon,
+	PlanetIcon,
+	CheckIcon,
+	FacebookIcon,
+	GithubIcon,
+	InstagramIcon,
+	TwitterIcon,
+	ReactIcon,
+	SvelteIcon,
+	VueIcon,
+	NetlifyIcon,
+	SolidIcon,
+	VercelIcon,
+];
+
+const figures: Record<string, (_props: Record<string, unknown>) => unknown> =
+	{};
+
+icons.map((item) => {
+	figures[item.name] = item;
+});
+
+const Figure = figures[icon];
+---
+
+{Figure ? <Figure class:list={[className]} /> : <p>Icon not found</p>}

apps/landing/src/components/IconWrapper.astro

@@ -0,0 +1,5 @@
+<div
+  class="bg-primary h-10 md:h-12 md:p-3 md:w-12 p-2 rounded-full text-white w-10 flex justify-center items-center"
+>
+  <slot />
+</div>

apps/landing/src/components/SectionTitle.astro

@@ -0,0 +1,11 @@
+---
+interface Props {
+	class?: string;
+}
+
+const baseClass = "text-2xl text-center md:text-5xl font-semibold";
+
+const { class: className = baseClass } = Astro.props;
+---
+
+<h2 class={className}><slot /></h2>