refactor: general cleaning and improvements

app/components/app/TranslationSelect.tsx

@@ -1,16 +1,16 @@
 import { useLocation, useNavigate } from '@remix-run/react'
-import { LOCALE_LABEL } from 'studio/lib/i18n'
+import { LOCALE_LABEL } from 'sanity/lib/i18n'
 import { useRouteData } from '~/hooks/useRouteData'
 
 export const TranslationSelect = () => {
 	const { pathname } = useLocation()
 	const { page } = useRouteData()
-	const to = useNavigate()
+	const navigate = useNavigate()
 
 	return page ? (
 		<select 
-			value={pathname.replace(/^\/|\/$/, '')}
-			onChange={e => to(e.target.value)}
+			defaultValue={pathname}
+			onChange={e => navigate({ pathname: e.target.value })}
 		>
 			{page?.header.translations.map(t => <option key={t.slug} value={t.slug}>{LOCALE_LABEL[t.lang]}</option>)}
 		</select>

app/components/layout/layout.css

@@ -31,8 +31,9 @@ main > section {
   max-width: var(--layout-max-width-section);
 }
 
-main > section + section,
-footer {
+:where(main > section:first-of-type),
+	main > section + section,
+	footer {
   margin-block-start: var(--layout-section-gap);
 }
 

app/components/modules/hero/hero.css

@@ -27,6 +27,10 @@
 	align-items: center;
 }
 
+section:first-of-type.hero {
+	margin-block-start: unset;
+}
+
 .hero > div {
 	width: 50%;
 	display: flex;

app/components/modules/index.tsx

@@ -5,6 +5,7 @@ import CTA, { links as ctaLinks } from './cta/cta'
 import Partners, { links as partnersLinks } from './partners/partners'
 import Hero, { links as heroLinks } from './hero/hero'
 import BlogPosts, { links as blogPostLinks } from './blog-posts/blog-posts'
+import TextImage, { links as textImageLinks } from './text-image/text-image'
 
 import type { LinksFunction, MetaFunction } from '@remix-run/node'
 import type { Modules } from '~/loaders'
@@ -15,7 +16,8 @@ export const links: LinksFunction = () => {
 		...ctaLinks(),
 		...heroLinks(),
 		...partnersLinks(),
-		...blogPostLinks()
+		...blogPostLinks(),
+		...textImageLinks()
 	]
 }
 
@@ -25,8 +27,6 @@ export const meta: MetaFunction = (props) => {
 	}
 }
 
-export const hydrate = true
-
 export interface ModuleProps<T extends Modules['_type'] = Modules['_type']> {
   index: number;
   data: Extract<Modules, { _type: T }>;
@@ -38,7 +38,8 @@ const modules = {
   'start-page-hero': StartPageHero,
 	cta: CTA,
 	partners: Partners,
-	hero: Hero
+	hero: Hero,
+	'text-image': TextImage
 } as { [k in Modules['_type']]: React.FunctionComponent<ModuleProps> };
 
 export const Module = ({

app/components/modules/start-page-hero/start-page-hero.css

@@ -35,14 +35,19 @@ html[color-scheme="dark"] .start-page-hero {
 	--frost-color: var(--frost-color-dark);
 }
 
-.start-page-hero {
+section.start-page-hero {
 	--link: var(--indigo-7);
 	--link-visited: var(--grape-7);
 
   position: relative;
   max-width: var(--layout-max-width);
 	padding: 0;
 }
+
+section:first-of-type.start-page-hero {
+	margin-block-start: unset;
+}
+
 .start-page-hero > div {
 	--link: var(--indigo-7);
 	--link-visited: var(--grape-7);

app/components/modules/text-image/text-image.css

@@ -0,0 +1,60 @@
+.text-image {
+	--_alignment: column-reverse;
+	--_image-width: unset;
+	--_image-min-height: 100vh;
+}
+@media (min-width: /* var(--size-md) */ 768px) {
+	.text-image {
+		--_alignment: row;
+		--_image-width: 50%;
+		--_image-height: 500px;
+	}
+	.text-image--alignment-right {
+		--_alignment: row-reverse;
+	}
+}
+
+.text-image {
+	display: flex;
+	flex-direction: var(--_alignment);
+	min-width: var(--size-content-1);
+	max-width: var(--layout-max-width);
+	height: var(--_image-height);
+}
+
+.text-image > div {
+	width: var(--_image-width);
+}
+
+.text-image .text-image__text {
+	padding: var(--size-7);
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.text-image p {
+	font-size: var(--font-size-3);
+	color: var(--text-2);
+}
+
+.text-image .text-image__image {
+	display: flex;
+}
+.text-image .text-image__image img {
+	width: 100%;
+	height: 100%;
+	border-radius: var(--radius-conditional-4);
+}
+.text-image .text-image__image img.svg {
+	width: 400px;
+	height: 400px;
+	margin: auto;
+}
+
+@media (max-width: /* var(--size-md) */ 768px) {
+	.text-image {
+		padding-inline: 0;
+	}
+}
+

app/components/modules/text-image/text-image.tsx

@@ -0,0 +1,37 @@
+import { PortableText } from '@portabletext/react';
+
+import { clsx } from 'app/utils/utils';
+import { Image } from '~/components/core/Image/Image';
+
+import stylesUrl from './text-image.css'
+
+import type { LinksFunction } from '@remix-run/node';
+import type { ModuleProps } from '..';
+
+export const links: LinksFunction = () => {
+  return [
+		{ rel: "stylesheet", href: stylesUrl }
+	];
+};
+
+const TextImage = ({ data }: ModuleProps<'text-image'>) => {
+
+	return (
+		<section className={clsx(
+			'text-image',
+			`text-image--alignment-${data.alignment}`
+		)}>
+			<div className='text-image__text'>
+				<PortableText value={data.body} />
+			</div>
+			<div className='text-image__image'>
+				<Image
+					image={data.photo}
+					maxWidth={650}
+				/>
+			</div>
+		</section>
+	)
+}
+
+export default TextImage

app/entry.server.tsx

@@ -4,7 +4,7 @@ import { Response } from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
 import isbot from "isbot";
 import { renderToPipeableStream } from "react-dom/server";
-import { i18nConfig } from "studio/lib/i18n";
+import { i18nConfig } from "sanity/lib/i18n";
 import { getNormalizedURLPathname, redirectMaliciousRequests, getLocaleFromReqUrl, stripBaseLocaleFromURL, stripTrailingSlashFromURL } from "./utils/server-redirects";
 
 const ABORT_DELAY = 5000;

app/loaders/groq-fragments/documents/blog-post.ts

@@ -7,7 +7,7 @@ import { filterById } from "../utils";
 import { post } from '../objects/post'
 import { PortableTextBlock } from "sanity";
 import { ImageSrc } from "../objects/image";
-import { Locale } from "studio/lib/i18n";
+import { Locale } from "sanity/lib/i18n";
 
 export type Post = {
 	_type: 'blog-post'

app/loaders/groq-fragments/documents/header.ts

@@ -1,5 +1,5 @@
 import groq from "groq";
-import { Locale } from "studio/lib/i18n";
+import { Locale } from "sanity/lib/i18n";
 
 import { menu, MenuItem } from "./menu";
 

app/loaders/groq-fragments/documents/page.ts

@@ -5,7 +5,7 @@ import { Footer, footer } from './footer'
 import { Header, header } from './header'
 import { Modules, modules } from '../objects/modules'
 import { filterById } from '../utils/filters'
-import { Locale } from 'studio/lib/i18n'
+import { Locale } from 'sanity/lib/i18n'
 
 export type Page = {
 	id: string

app/loaders/groq-fragments/documents/site.ts

@@ -1,5 +1,5 @@
 import groq from 'groq'
-import { i18nConfig } from '../../../../studio/lib/i18n'
+import { i18nConfig } from '../../../../sanity/lib/i18n'
 
 import { ReferenceWithSlug, referenceWithSlug } from '../objects/links'
 import { filterById, filterSavedPages } from '../utils/filters'

app/loaders/groq-fragments/objects/links.ts

@@ -1,5 +1,5 @@
 import groq from 'groq'
-import { Locale } from 'studio/lib/i18n'
+import { Locale } from 'sanity/lib/i18n'
 
 import { normalizeSlug } from '../utils/normalizers'
 

app/loaders/groq-fragments/objects/modules.ts

@@ -5,6 +5,7 @@ import { Card, card } from './card'
 import { post } from './post'
 import { Theme } from '~/utils/theme-provider'
 import { Post } from '../documents/blog-post'
+import { PortableTextBlock } from 'sanity'
 
 type StartPageHeroModule = {
 	_type: 'start-page-hero'
@@ -55,12 +56,21 @@ type BlogPostsModule = {
 	posts: Post[]
 }
 
+type TextImageModule = {
+	_type: 'text-image'
+	_key: string
+	body: PortableTextBlock
+	photo: ImageSrc
+	alignment: 'left' | 'right'
+}
+
 export type Modules = 
 	| StartPageHeroModule
 	| CTAModule
 	| HeroModule
 	| PartnersModule
 	| BlogPostsModule
+	| TextImageModule
 
 export const modules = groq`
   _type == 'start-page-hero' => {
@@ -124,30 +134,13 @@ export const modules = groq`
 			}
 		}
 	},
-  _type == 'marquee' => {
-    _type,
-    _key,
-    items[]{
-      _type == 'simple' => {
-        _type,
-        text
-      },
-      _type == 'photo' => {
-        _type,
-        "photo": {
-          ${image}
-        }
-      }
+	_type == 'text-image' => {
+		_type,
+		_key,
+		body,
+    photo {
+			${image}
     },
-    speed,
-    reverse,
-    pauseable
-  },
-  _type == 'dividerPhoto' => {
-    _type,
-    _key,
-    photo{
-      ${image}
-    }
-  }
+		alignment
+	}
 `

app/loaders/groq-fragments/utils/normalizers.ts

@@ -1,4 +1,4 @@
 import groq from 'groq'
-import { i18nConfig } from '../../../../studio/lib/i18n'
+import { i18nConfig } from '../../../../sanity/lib/i18n'
 
 export const normalizeSlug = groq`coalesce(string::split(slug.current, '${i18nConfig.base}')[1], slug.current)`

app/loaders/index.ts

@@ -4,7 +4,7 @@ import { urlBuilder } from '~/utils/urlBuilder'
 import { loadTheme } from '~/utils/theme.server'
 import { assert } from '~/utils/utils'
 import { blogPostQueryBySlug, pageQueryBySlug, pageQueryById, siteQuery, queryHomeID } from './groq-fragments/query'
-import { getLocaleFromPath, i18nConfig } from '../../studio/lib/i18n'
+import { getLocaleFromPath, i18nConfig } from '../../sanity/lib/i18n'
 
 import type { SanityImageSource } from '@sanity/image-url/lib/types/types'
 import type { BlogPost } from './groq-fragments/documents/blog-post'

app/loaders/metadata.ts

@@ -1,4 +1,4 @@
-import { replaceTemplateTags } from "studio/lib/helpers"
+import { replaceTemplateTags } from "sanity/lib/helpers"
 import { RouteData } from "."
 
 export function metadata(data?: RouteData) {

app/root.tsx

@@ -7,19 +7,16 @@ import {
   ScrollRestoration,
 } from "@remix-run/react";
 import { LinksFunction, MetaFunction } from "@remix-run/node";
-import { useShouldHydrate, DynamicLinks } from 'remix-utils'
+import { DynamicLinks } from 'remix-utils'
 
 import { useRouteData } from "./hooks/useRouteData";
 
-import stylesUrl from "~/styles/global.css";
-
 import { ThemeBody, ThemeHead, ThemeProvider } from "~/utils/theme-provider";
 
 export const links: LinksFunction = () => {
   return [
 		{ rel: 'manifest', href: '/manifest.json' },
-		{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
-    { rel: 'stylesheet', href: stylesUrl }
+		{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
   ];
 };
 
@@ -33,7 +30,6 @@ export const meta: MetaFunction = () => {
 
 function Root({ title }: {title?: string}) {
 	const { theme, lang } = useRouteData()
-  const shouldHydrate = useShouldHydrate();
 
   return (
     <ThemeProvider specifiedTheme={theme}>
@@ -49,8 +45,7 @@ function Root({ title }: {title?: string}) {
 					<Outlet />
 					<ThemeBody ssrTheme={Boolean(theme)} />
 					<ScrollRestoration />
-					{/* Render Scripts if shouldHydrate is true */}
-					{shouldHydrate && <Scripts />}
+					<Scripts />
 					{process.env.NODE_ENV === "development" && <LiveReload />}
 				</body>
 			</html>