Merge pull request #123 from goodeats/122-landing-page-personal-image…

…-vs-svg-logo

landing page personal image vs svg logo

app/components/layout/marketing.tsx

@@ -27,6 +27,12 @@ const MarketingLogoLink = createContainerComponent({
 	displayName: 'MarketingLogoLink',
 })
 
+const MarketingLogoImage = createContainerComponent({
+	defaultTagName: 'img',
+	defaultClassName: 'h-52 w-52 rounded-full object-cover',
+	displayName: 'MarketingLogoImage',
+})
+
 const MarketingHeader = createContainerComponent({
 	defaultTagName: 'h1',
 	defaultClassName:
@@ -72,6 +78,7 @@ export {
 	MarketingContentSection,
 	MarketingDetailsSection,
 	MarketingLogoLink,
+	MarketingLogoImage,
 	MarketingHeader,
 	MarketingContent,
 	MarketingSocialLinksList,

app/components/layout/page-footer.tsx

@@ -1,11 +1,14 @@
+import { useOptionalUser } from '#app/utils/user'
 import Logo from '../logo'
 import { ThemeSwitch } from '../theme-switch'
 
 const PageFooter = () => {
+	const user = useOptionalUser()
+
 	return (
 		<div className="container flex justify-between pb-5">
 			<Logo />
-			<ThemeSwitch />
+			{user ? <ThemeSwitch /> : '🔺'}
 		</div>
 	)
 }

app/components/layout/page-header.tsx

@@ -1,6 +1,7 @@
 import { Link } from '@remix-run/react'
 import { useOptionalUser } from '#app/utils/user'
 import Logo from '../logo'
+import { ThemeSwitch } from '../theme-switch'
 import { Button } from '../ui/button'
 import { UserDropdown } from '../user-dropdown'
 
@@ -12,13 +13,7 @@ const PageHeader = () => {
 			<nav className="flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap md:gap-8">
 				<Logo />
 				<div className="flex items-center gap-10">
-					{user ? (
-						<UserDropdown />
-					) : (
-						<Button asChild variant="default" size="lg">
-							<Link to="/">Coming Soon</Link>
-						</Button>
-					)}
+					{user ? <UserDropdown /> : <ThemeSwitch />}
 				</div>
 			</nav>
 		</header>

app/models/user/user.get.server.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod'
 import { prisma } from '#app/utils/db.server'
-import { type IUser, type IUserBasic } from './user.server'
+import { type IUserBasic } from './user.server'
 
 export type queryWhereArgsType = z.infer<typeof queryWhereArgs>
 const queryWhereArgs = z.object({
@@ -33,24 +33,3 @@ export const getUserBasic = async ({
 		image,
 	}
 }
-
-export const getFirstUser = async (): Promise<Pick<
-	IUser,
-	| 'name'
-	| 'username'
-	| 'bio'
-	| 'sm_url_instagram'
-	| 'sm_url_github'
-	| 'createdAt'
-> | null> => {
-	return await prisma.user.findFirst({
-		select: {
-			name: true,
-			username: true,
-			bio: true,
-			sm_url_instagram: true,
-			sm_url_github: true,
-			createdAt: true,
-		},
-	})
-}

app/routes/_marketing+/components/content.tsx

@@ -1,31 +1,10 @@
 import {
 	MarketingContent,
 	MarketingHeader,
-	MarketingLogoLink,
 	MarketingSocialLinksList,
 } from '#app/components/layout/marketing'
 import { Icon } from '#app/components/ui/icon'
 
-export const ContentLogo = () => {
-	return (
-		<MarketingLogoLink href="https://github.com/goodeats/epic-pppaaattt.xyz">
-			<svg
-				className="size-20 text-foreground xl:-mt-4"
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 65 65"
-			>
-				<polygon fill="currentColor" points="32.5,22.33 20.5,2.66 44.5,2.66" />
-				<polygon fill="currentColor" points="12.5,42.66 0.5,62.33 24.5,62.33" />
-				<polygon
-					fill="currentColor"
-					points="52.5,64.33 40.5,44.66 64.5,44.66"
-				/>
-			</svg>
-		</MarketingLogoLink>
-	)
-}
-
 export const ContentHeader = () => {
 	return (
 		<MarketingHeader data-heading>

app/routes/_marketing+/index.tsx

@@ -8,19 +8,30 @@ import { useLoaderData } from '@remix-run/react'
 import {
 	MarketingContentSection,
 	MarketingDetailsSection,
+	MarketingLogoImage,
+	MarketingLogoLink,
 	MarketingMainLayout,
 } from '#app/components/layout/marketing.tsx'
-import { getFirstUser } from '#app/models/user/user.get.server.ts'
+import { prisma } from '#app/utils/db.server.ts'
+import { getUserImgSrc } from '#app/utils/misc.tsx'
 import {
 	ContentBody,
 	ContentContact,
 	ContentHeader,
-	ContentLogo,
 } from './components/content.tsx'
 import { ImagesGrid } from './components/images-grid.tsx'
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
-	const user = await getFirstUser()
+	const user = await await prisma.user.findFirst({
+		select: {
+			name: true,
+			username: true,
+			bio: true,
+			sm_url_instagram: true,
+			sm_url_github: true,
+			image: { select: { id: true } },
+		},
+	})
 	invariantResponse(user, 'Nothing to show today', { status: 404 })
 
 	return json({
@@ -31,13 +42,21 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 export default function Index() {
 	const data = useLoaderData<typeof loader>()
 	const { user } = data
-	console.log(user)
 
 	return (
 		<MarketingMainLayout>
 			<MarketingContentSection>
 				<MarketingDetailsSection>
-					<ContentLogo />
+					<MarketingLogoLink
+						href="https://github.com/goodeats/epic-pppaaattt.xyz"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<MarketingLogoImage
+							alt="Pat Needham"
+							src={getUserImgSrc(user.image?.id)}
+						/>
+					</MarketingLogoLink>
 					<ContentHeader />
 					<ContentBody bio={user.bio} />
 					<ContentContact ig={user.sm_url_instagram} gh={user.sm_url_github} />

app/routes/settings+/profile.index.tsx

@@ -30,7 +30,7 @@ export const handle: SEOHandle = {
 const ProfileFormSchema = z.object({
 	name: NameSchema.optional(),
 	username: UsernameSchema,
-	bio: z.string().max(500).optional(),
+	bio: z.string().max(1000).optional(),
 	sm_url_instagram: z.string().optional(),
 	sm_url_github: z.string().optional(),
 })