Feat/live markdown editor

.env.example

@@ -1,12 +1,15 @@
-POSTGRES_USER="postgres"
-POSTGRES_PASSWORD="postgres"
-POSTGRES_DB="postgres"
-POSTGRES_HOST="localhost"
-POSTGRES_PORT="5432"
+DATABASE_URL="postgresql://db-user:db-pass@localhost:5432/db-name?schema=public"
 
 S3_BUCKET_NAME="test"
 S3_ACCESS_KEY="test"
 S3_SECRET_KEY="test"
 S3_REGION="us-west-1"
 S3_ENDPOINT="https://s3.akarinext.org"
 S3_PREFIX="*"
+
+# PKCEを使用してください。CLIENT_SECRETは使用しません。認証方式はnoneになっています。
+OIDC_CLIENT_ID=""
+OIDC_ISSUER="https://example.com/OIDC-Provider-URL"
+OIDC_REDIRECT_URIS="['https://example.com/redirect-URL1', 'https://example.com/redirect-URL2']"
+OIDC_USERINFO_ENDPOINT=""
+SESSION_SECRET="セッションシークレット"

.github/workflows/playwright.yml

@@ -12,7 +12,9 @@ jobs:
       postgres:
         image: postgres
         env:
-          POSTGRES_PASSWORD: postgres
+          POSTGRES_PASSWORD: db-pass
+          POSTGRES_USER: db-user
+          POSTGRES_DB: db-name
         options: >-
           --health-cmd pg_isready
           --health-interval 10s

app/components/ArticleCard.tsx

@@ -1,57 +1,74 @@
-import { InlineIcon } from "@iconify/react/dist/iconify.js";
-import { NavLink } from "@remix-run/react";
-import { cn } from "~/lib/utils";
+import { InlineIcon } from '@iconify/react/dist/iconify.js';
+import { NavLink } from '@remix-run/react';
+import { cn } from '~/lib/utils';
 
 export type ArticleCardProps = {
-    title: string;
-    emoji: string;
-    dateDisplay: string;
-    classes?: { root: string };
-    isTransitioning?: boolean;
-}
-
-export function ArticleCard({ title, emoji, dateDisplay, classes, isTransitioning }: ArticleCardProps) {
-    return (
-        <div className={cn("bg-white border rounded-xl flex flex-col justify-between", classes?.root)}>
-            <div className="flex items-center flex-col bg-primary py-8 rounded-t-xl">
-                <div className="flex items-center justify-center h-20 w-20 rounded-full bg-blue-100">
-                    <InlineIcon
-                        icon={`fluent-emoji-flat:${emoji}`}
-                        className="h-20 w-20 bg-white p-2 rounded-lg"
-                        style={
-                            isTransitioning
-                                ? { viewTransitionName: 'blog-image' }
-                                : undefined
-                        }
-                    />
-                </div>
-            </div>
-            <div className="flex flex-col flex-grow p-4">
-                <h2 className="text-lg font-semibold text-gray-800" style={
-                    isTransitioning
-                        ? { viewTransitionName: 'blog-title' }
-                        : undefined
-                }>{title}</h2>
-                <div className="flex-grow"></div>
-                <p className="text-gray-600 pt-8 select-none">
-                    {dateDisplay}
-                </p>
-            </div>
-        </div>
-    )
+	title: string;
+	emoji: string;
+	dateDisplay: string;
+	classes?: { root: string };
+	isTransitioning?: boolean;
+};
 
+export function ArticleCard({
+	title,
+	emoji,
+	dateDisplay,
+	classes,
+	isTransitioning,
+}: ArticleCardProps) {
+	return (
+		<div
+			className={cn(
+				'bg-white border rounded-xl flex flex-col justify-between',
+				classes?.root,
+			)}
+		>
+			<div className="flex items-center flex-col bg-primary py-8 rounded-t-xl">
+				<div className="flex items-center justify-center h-20 w-20 rounded-full bg-blue-100">
+					<InlineIcon
+						icon={`fluent-emoji-flat:${emoji}`}
+						className="h-20 w-20 bg-white p-2 rounded-lg"
+						style={
+							isTransitioning ? { viewTransitionName: 'blog-image' } : undefined
+						}
+					/>
+				</div>
+			</div>
+			<div className="flex flex-col flex-grow p-4">
+				<h2
+					className="text-lg font-semibold text-gray-800"
+					style={
+						isTransitioning ? { viewTransitionName: 'blog-title' } : undefined
+					}
+				>
+					{title}
+				</h2>
+				<div className="flex-grow"></div>
+				<p className="text-gray-600 pt-8 select-none">{dateDisplay}</p>
+			</div>
+		</div>
+	);
 }
 
-export function ArticleCardWithLink({ title, emoji, dateDisplay, classes, slug }: ArticleCardProps & { slug: string }) {
-    return (
-        <NavLink
-            to={`/blog/${slug}`}
-            unstable_viewTransition
-            prefetch="intent"
-        >
-            {({ isTransitioning }) => (
-                <ArticleCard title={title} emoji={emoji} dateDisplay={dateDisplay} classes={classes} isTransitioning={isTransitioning} />
-            )}
-        </NavLink>
-    );
-};
+export function ArticleCardWithLink({
+	title,
+	emoji,
+	dateDisplay,
+	classes,
+	slug,
+}: ArticleCardProps & { slug: string }) {
+	return (
+		<NavLink to={`/blog/${slug}`} unstable_viewTransition prefetch="intent">
+			{({ isTransitioning }) => (
+				<ArticleCard
+					title={title}
+					emoji={emoji}
+					dateDisplay={dateDisplay}
+					classes={classes}
+					isTransitioning={isTransitioning}
+				/>
+			)}
+		</NavLink>
+	);
+}

app/components/Avatar.tsx

@@ -1,30 +1,29 @@
-import { cn } from "~/lib/utils";
+import { cn } from '~/lib/utils';
 
 export type AvatarProps = {
-    src: string;
-    alt: string;
-    size?: "xs" | "sm" | "md" | "lg";
-    rounded?: "full" | "md" | "sm" | "none";
-}
+	src: string;
+	alt: string;
+	size?: 'xs' | 'sm' | 'md' | 'lg';
+	rounded?: 'full' | 'md' | 'sm' | 'none';
+};
 
 export const avatarSizes = {
-    xs: "w-8 h-8",
-    sm: "w-12 h-12",
-    md: "w-16 h-16",
-    lg: "w-24 h-24"
-}
+	xs: 'w-8 h-8',
+	sm: 'w-12 h-12',
+	md: 'w-16 h-16',
+	lg: 'w-24 h-24',
+};
 
 export const avatarRoundeds = {
-    full: "rounded-full",
-    md: "rounded-md",
-    sm: "rounded-sm",
-    none: "rounded-none"
-}
+	full: 'rounded-full',
+	md: 'rounded-md',
+	sm: 'rounded-sm',
+	none: 'rounded-none',
+};
 
-export function Avatar({src, alt, size, rounded}: AvatarProps) {
+export function Avatar({ src, alt, size, rounded }: AvatarProps) {
+	const sizeClass = size ? avatarSizes[size] : avatarSizes.md;
+	const roundedClass = rounded ? avatarRoundeds[rounded] : avatarRoundeds.full;
 
-    const sizeClass = size ? avatarSizes[size] : avatarSizes.md
-    const roundedClass = rounded ? avatarRoundeds[rounded] : avatarRoundeds.full
-
-    return <img src={src} alt={alt} className={cn(sizeClass, roundedClass)} />
-}
+	return <img src={src} alt={alt} className={cn(sizeClass, roundedClass)} />;
+}

app/components/MemberCard.tsx

@@ -38,7 +38,9 @@ export function MemberCard({ member }: MemberCardProps) {
 			</div>
 			<div className="flex gap-1 flex-row flex-wrap border-t pt-2 mt-2">
 				{member.roles.map((role, index) => (
-					<Badge key={index}>{role}</Badge>
+					<Badge key={index} className="select-none">
+						{role}
+					</Badge>
 				))}
 			</div>
 		</div>

app/components/footer.tsx

@@ -1,78 +1,27 @@
 import { Link } from '@remix-run/react';
-import {
-	NavigationMenu,
-	NavigationMenuItem,
-	NavigationMenuLink,
-	NavigationMenuList,
-	navigationMenuTriggerStyle,
-} from './ui/navigation-menu';
-import type { TConfig } from '~/lib/config.server';
-import type { PickType } from '~/lib/helper.server';
-import { getSocialIcon } from '~/lib/utils';
-import EasyTooltip from './Tooltip';
 
-type Props = {
-	links: PickType<PickType<TConfig, 'footer'>, 'links'>;
-};
-
-export function Footer({ links }: Props) {
+export function Footer() {
 	return (
 		<footer className="mt-16 bg-white p-4">
-			<div className="sm:flex block min-h-16  items-center sticky mb-4">
-				<NavigationMenu>
-					<NavigationMenuList>
-						<NavigationMenuItem className="text-2xl font-bold">
-							<NavigationMenuLink
-								className={navigationMenuTriggerStyle()}
-								asChild
-							>
-								<Link to="/" aria-label="トップページに移動する">
-									AkariNext
-								</Link>
-							</NavigationMenuLink>
-						</NavigationMenuItem>
-					</NavigationMenuList>
-				</NavigationMenu>
-				<NavigationMenu>
-					<NavigationMenuList>
-						{links.map((link, index) =>
-							link.alt ? (
-								<EasyTooltip key={index} tooltip={link.alt}>
-									<NavigationMenuLink
-										className={navigationMenuTriggerStyle()}
-										asChild
-									>
-										<a
-											href={link.link}
-											target="_blank"
-											rel="noreferrer noopener"
-											aria-label={`${link.type} へ移動する`}
-										>
-											{getSocialIcon(link.type)}
-										</a>
-									</NavigationMenuLink>
-								</EasyTooltip>
-							) : (
-								<NavigationMenuLink
-									key={index}
-									className={navigationMenuTriggerStyle()}
-									asChild
+			<div className="m-auto" style={{ maxWidth: 'min(1200px, 90%)' }}>
+				<div className="sm:flex block min-h-16  justify-between items-center sticky mb-4">
+					AkariNext
+					<div className="border-l-2 border-blue-400 p-2">
+						<h4>LINKS</h4>
+						<ul>
+							<li className="relative">
+								<Link
+									to="/tos"
+									className='after:border-b after:border-blue-400 after:content-[""] after:absolute after:w-2 after:-left-2 after:top-1/2 pl-2'
 								>
-									<a
-										href={link.link}
-										target="_blank"
-										rel="noreferrer noopener"
-										aria-label={`${link.type} へ移動する`}
-									>
-										{getSocialIcon(link.type)}
-									</a>
-								</NavigationMenuLink>
-							),
-						)}
-					</NavigationMenuList>
-				</NavigationMenu>
+									利用規約
+								</Link>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div className="mt-4">&copy; 2024 AkariNext</div>
 			</div>
-			<div className="mt-4 px-3">&copy; 2024 AkariNext</div>
 		</footer>
 	);
 }