Merge pull request #613 from danactive/to-css-modules

To css modules
danactive · Apr 26, 2024 · a55dceb · a55dceb
2 parents abac008 + 09a4a00
commit a55dceb
Show file tree

Hide file tree

Showing 34 changed files with 396 additions and 449 deletions.
diff --git a/app/global.css b/app/global.css
@@ -0,0 +1,15 @@
+body {
+  font-family: Verdana, sans-serif;
+  color: silver;
+  background-color: #323232;
+  margin: 0 auto;
+  display: flex;
+  min-height: 100%;
+  padding: 0 16px;
+  flex-direction: column;
+}
+
+html {
+  --gridPx: 4px;
+  --grid2Px: calc(2 * 4px);
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,17 @@
+// These styles apply to every route in the application
+import './global.css'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <h1>App root layout</h1>
+        {children}
+      </body>
+    </html>
+  )
+}
diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -0,0 +1,11 @@
+import Link from '../src/components/Link'
+
+export default function NotFound() {
+  return (
+    <div>
+      <h2>Not Found</h2>
+      <p>Could not find requested resource</p>
+      <Link href="/">Return Home</Link>
+    </div>
+  )
+}
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,7 +31,6 @@
     "react-dom": "^18.2.0",
     "react-image-gallery": "^1.3.0",
     "react-map-gl": "^7.1.5",
-    "styled-components": "^6.1.8",
     "stylis": "^4.3.0",
     "xml2js": "^0.6.2"
   },
@@ -59,7 +58,6 @@
     "eslint-plugin-testing-library": "^6.0.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-styled-components": "^7.1.1",
     "next-test-api-route-handler": "^4.0.5",
     "snyk": "^1.1211.0",
     "standard-version": "^9.5.0",

diff --git a/pages/[gallery].tsx b/pages/[gallery].tsx
@@ -1,21 +1,15 @@
 import type { GetStaticPaths, GetStaticProps } from 'next'
 import Head from 'next/head'
 import { type ParsedUrlQuery } from 'node:querystring'
-import styled, { css } from 'styled-components'
 
-import config from '../config.json'
 import getAlbums from '../src/lib/albums'
 import getGalleries from '../src/lib/galleries'
 import indexKeywords from '../src/lib/search'
 
-import Img from '../src/components/Img'
+import Galleries from '../src/components/Albums'
 import Link from '../src/components/Link'
 import useSearch from '../src/hooks/useSearch'
-import type { AlbumMeta, GalleryAlbum, IndexedKeywords } from '../src/types/common'
-
-interface ServerSideAlbumItem extends GalleryAlbum {
-  corpus: string;
-}
+import type { AlbumMeta, IndexedKeywords, ServerSideAlbumItem } from '../src/types/common'
 
 type ComponentProps = {
   gallery: NonNullable<AlbumMeta['gallery']>;
@@ -49,37 +43,11 @@ export const getStaticPaths: GetStaticPaths = async () => {
   }
 }
 
-const Albums = styled.div<{ $odd: boolean }>`
-  float: left;
-  width: 185px;
-  height: 170px;
-  padding: 10px;
-  background: peachpuff;
-  ${(props) => props.$odd && css`
-    background-color: linen;
-  `}
-`
-const AlbumTitle = styled.h1`
-  font-size: 1.1rem;
-  font-family: "Trebuchet MS",sans-serif;
-`
-const AlbumSubTitle = styled.h2`
-  font-size: 0.75rem;
-  font-family: Verdana,sans-serif;
-  color: #8B7765;
-`
-const AlbumYear = styled.h3`
-  font-size: 0.9rem;
-  font-family: "Trebuchet MS",sans-serif;
-  color: #8B5A2B;
-`
-
 function AlbumsPage({ gallery, albums, indexedKeywords }: ComponentProps) {
   const {
     filtered,
     searchBox,
   } = useSearch({ items: albums, indexedKeywords })
-  const { width, height } = config.resizeDimensions.thumb
 
   return (
     <div>
@@ -91,17 +59,7 @@ function AlbumsPage({ gallery, albums, indexedKeywords }: ComponentProps) {
       <h1>Links</h1>
       <ul><li><Link href={`/${gallery}/all`}>All</Link></li></ul>
       <ul><li><Link href={`/${gallery}/today`}>Today</Link></li></ul>
-      {filtered.map((album, i) => (
-        <Albums
-          key={album.name}
-          $odd={i % 2 === 0}
-        >
-          <Link href={`/${gallery}/${album.name}`}><Img src={album.thumbPath} alt={album.name} width={width} height={height} /></Link>
-          <AlbumTitle>{album.h1}</AlbumTitle>
-          <AlbumSubTitle>{album.h2}</AlbumSubTitle>
-          <AlbumYear>{album.year}</AlbumYear>
-        </Albums>
-      ))}
+      <Galleries items={filtered} gallery={gallery} />
     </div>
   )
 }

diff --git a/pages/[gallery]/[album]/nearby.tsx b/pages/[gallery]/[album]/nearby.tsx
@@ -1,12 +1,4 @@
 import Head from 'next/head'
-import styled from 'styled-components'
-
-const Hello = styled.div`
-  background: palevioletred;
-  border-radius: 3px;
-  border: none;
-  color: white;
-`
 
 function Nearby() {
   return (
@@ -15,7 +7,7 @@ function Nearby() {
         <title>History App - Nearby</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <Hello>Hello World</Hello>
+      <p>Hello World</p>
     </>
   )
 }