improvements and fixes (#35)

* refactor: robots, sizes, improvements * refactor: some improvements * fix: card test * fix: text
nsdonato · Jan 28, 2024 · 7cb38e9 · 7cb38e9
1 parent ab45020
commit 7cb38e9
Show file tree

Hide file tree

Showing 21 changed files with 476 additions and 474 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -2,26 +2,27 @@
 @tailwind components;
 @tailwind utilities;
 
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');
 
 :root {
-	color-scheme: light;
+  --font-popi: 'Poppins', sans-serif;
+  color-scheme: light;
 }
 :root[data-theme='synthwave'] {
-	color-scheme: synthwave;
+  color-scheme: synthwave;
 }
 
 :root[data-theme='synthwave'] img#svg {
-	filter: invert(1);
+  filter: invert(1);
 }
 
 :root[data-theme='light'] img#svg.commitconf {
-	filter: invert(1);
+  filter: invert(1);
 }
 
 :root[data-theme='light'] img#svg.youtube,
 :root[data-theme='light'] img#svg.vitest {
-	filter: none;
+  filter: none;
 }
 
 :root[data-theme='synthwave'] img#svg.youtube,
@@ -31,38 +32,34 @@
 :root[data-theme='synthwave'] img#svg.jest,
 :root[data-theme='synthwave'] img#svg.vitest,
 :root[data-theme='synthwave'] img#svg.playwright {
-	filter: none;
+  filter: none;
 }
 
 img.bilbostack {
-	border-radius: inherit;
+  border-radius: inherit;
 }
 
 * {
-	--font-popi: 'Poppins', sans-serif;
-	--font-weight-light: 100;
-	--font-weight-regular: 400;
-	--font-weight-bold: 700;
-	min-width: 0;
+  min-width: 0;
 }
 
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 img,
 video,
 svg {
-	display: block;
-	height: auto;
-	max-width: 100%;
+  display: block;
+  height: auto;
+  max-width: 100%;
 }
 
 body {
-	margin: 0;
-	min-height: 100dvh;
+  margin: 0;
+  min-height: 100dvh;
 }
 
 h1,
@@ -71,21 +68,21 @@ h3,
 h4,
 h5,
 h6 {
-	text-wrap: balance;
+  text-wrap: balance;
 }
 
 p {
-	text-wrap: pretty;
+  text-wrap: pretty;
 }
 svg {
-	fill: 'red';
+  fill: 'red';
 }
 
 .icon-svg {
-	mask-size: 100%;
-	-webkit-mask-repeat: no-repeat;
-	mask-repeat: no-repeat;
-	mask-position: center;
-	width: 24px;
-	height: 24px;
+  mask-size: 100%;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  width: 24px;
+  height: 24px;
 }
diff --git a/components/badge/badge.test.tsx b/components/badge/badge.test.tsx
@@ -6,9 +6,7 @@ describe('<Badge />', () => {
   const today = new Date().toISOString()
   const yesterday = new Date(Date.now() - 86400000).toISOString()
   const lastWeek = new Date(Date.now() - 604800000).toISOString()
-  console.log(today)
-  console.log(yesterday)
-  console.log(lastWeek)
+
   test('renders the new badge', () => {
     const { getByText } = render(
       <Badge createdAt={today} updatedAt={yesterday} />

diff --git a/components/card/card-body.tsx b/components/card/card-body.tsx
@@ -3,35 +3,29 @@ import { Figure as CoverType } from '@/lib/mdx/get-menu-item'
 import { Figure } from '../figure/figure'
 
 type CardBodyProps = {
-	cover: CoverType
-	imgPlaceholder: string
+  cover: CoverType
+  imgPlaceholder: string
 }
 
 export const CardBody = ({ cover, imgPlaceholder }: CardBodyProps) => {
-	const hasCover = Boolean(cover.src)
-	const isSvg = cover.src.includes('.svg')
-	const coverName = isSvg
-		? cover.src.replace('.svg', '').split('/')[2]
-		: cover.src.replace('.png', '').split('/')[2]
-	return (
-		<div
-			key={imgPlaceholder}
-			className='tooltip tooltip-sm'
-			data-tip={imgPlaceholder}>
-			<div className='card-body items-center justify-center h-40 w-full'>
-				{hasCover ? (
-					<Figure
-						isSvg={isSvg}
-						className={coverName}
-						cover={cover}
-						placeholder={imgPlaceholder}
-					/>
-				) : (
-					<h2 className='card-title items-center justify-center h-40 w-full'>
-						{imgPlaceholder}
-					</h2>
-				)}
-			</div>
-		</div>
-	)
+  const isSvg = cover.src ? cover.src.includes('.svg') : true
+  const coverName = isSvg
+    ? cover.src.replace('.svg', '').split('/')[2]
+    : cover.src.replace('.png', '').split('/')[2]
+
+  return (
+    <div
+      key={imgPlaceholder}
+      className='tooltip tooltip-sm'
+      data-tip={imgPlaceholder}>
+      <div className='card-body items-center justify-center h-40 w-full'>
+        <Figure
+          isSvg={isSvg}
+          className={coverName}
+          cover={cover}
+          placeholder={imgPlaceholder}
+        />
+      </div>
+    </div>
+  )
 }
diff --git a/components/card/card-information.tsx b/components/card/card-information.tsx
@@ -0,0 +1,14 @@
+import { InfoExtra } from '@/lib/mdx/get-menu-item'
+
+import { getConferenceInfo } from './card-utils'
+
+type CardTitleProps = {
+  title?: string
+  infoExtra?: InfoExtra
+}
+
+export const CardInformation = ({ title, infoExtra }: CardTitleProps) => (
+  <p className='py-1 truncate text-sm'>
+    {infoExtra ? getConferenceInfo(infoExtra) : title}
+  </p>
+)
diff --git a/components/card/card-title.tsx b/components/card/card-title.tsx
@@ -1,14 +1,7 @@
-import { InfoExtra } from '@/lib/mdx/get-menu-item'
-
-import { getConferenceInfo } from './card-utils'
-
 type CardTitleProps = {
-	title?: string
-	infoExtra?: InfoExtra
+  title: string
 }
 
-export const CardTitle = ({ title, infoExtra }: CardTitleProps) => (
-	<p className='py-1 truncate'>
-		{infoExtra ? getConferenceInfo(infoExtra) : title}
-	</p>
+export const CardTitle = ({ title }: CardTitleProps) => (
+  <p className='py-1 truncate'>{title}</p>
 )
diff --git a/components/card/card.tsx b/components/card/card.tsx
@@ -3,48 +3,50 @@ import { Video } from '@/components/video/video'
 
 import { WebLink } from '../web-link/web-link'
 import { CardBody } from './card-body'
+import { CardInformation } from './card-information'
 import { CardTitle } from './card-title'
 import { CardItem } from './card-types'
 
 type CardProps = {
-	item: CardItem
+  item: CardItem
 }
 
 export const Card = ({ item }: CardProps) => {
-	const {
-		cover,
-		imgPlaceholder,
-		titleCard,
-		infoExtra,
-		links,
-		videos,
-		createdAt,
-		updatedAt,
-	} = item
+  const {
+    cover,
+    imgPlaceholder,
+    titleCard,
+    infoExtra,
+    links,
+    videos,
+    createdAt,
+    updatedAt,
+  } = item
 
-	return (
-		<div className='card p-4 ring-1 bg-base-100 shadow-lg h-auto'>
-			<Badge
-				className='absolute top-0 right-0 m-2'
-				createdAt={createdAt}
-				updatedAt={updatedAt}
-			/>
-			<CardBody cover={cover} imgPlaceholder={imgPlaceholder} />
-			<>
-				<div className='divider m-0 p-0'></div>
-				<CardTitle title={titleCard} infoExtra={infoExtra} />
-				<div className='flex flex-wrap gap-2 pt-1'>
-					{links?.map(({ url, type }, index) => (
-						<WebLink
-							key={index}
-							className='btn btn-sm btn-outline btn-accent'
-							href={url}>
-							{type}
-						</WebLink>
-					))}
-					{videos?.map((video, index) => <Video key={index} video={video} />)}
-				</div>
-			</>
-		</div>
-	)
+  return (
+    <div className='card p-4 ring-1 bg-base-100 shadow-lg h-auto'>
+      <Badge
+        className='absolute top-0 right-0 m-2'
+        createdAt={createdAt}
+        updatedAt={updatedAt}
+      />
+      <CardBody cover={cover} imgPlaceholder={imgPlaceholder} />
+      <>
+        <CardTitle title={imgPlaceholder} />
+        <div className='divider m-0 p-0'></div>
+        <CardInformation title={titleCard} infoExtra={infoExtra} />
+        <div className='flex flex-wrap gap-2 pt-1'>
+          {links?.map(({ url, type }, index) => (
+            <WebLink
+              key={index}
+              className='btn btn-sm btn-outline btn-accent'
+              href={url}>
+              {type}
+            </WebLink>
+          ))}
+          {videos?.map((video, index) => <Video key={index} video={video} />)}
+        </div>
+      </>
+    </div>
+  )
 }
diff --git a/components/card/test/card-title.test.tsx b/components/card/test/card-title.test.tsx
@@ -3,9 +3,9 @@ import { render } from '@/lib/test-utils'
 import { CardTitle } from '../card-title'
 
 describe('<CardTitle />', () => {
-	test('renders correctly', () => {
-		const title = 'test'
-		const { getByText } = render(<CardTitle title={title} />)
-		expect(getByText('test')).toBeInTheDocument()
-	})
+  test('renders correctly', () => {
+    const title = 'test'
+    const { getByText } = render(<CardTitle title={title} />)
+    expect(getByText('test')).toBeInTheDocument()
+  })
 })