diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/.prettierrc @@ -0,0 +1 @@ +{} diff --git a/README.md b/README.md index bfbb202..b8df072 100644 --- a/README.md +++ b/README.md @@ -40,7 +40,7 @@ Before a pull request can be merged: request, and approvals from staff do not count — you review each other's code. 2. **Every review comment must be marked resolved.** Reply to each one, fix it - or explain why not, then click *Resolve conversation*. + or explain why not, then click _Resolve conversation_. 3. **Pushing new commits dismisses the approval**, so if you change something after being approved, ask for another review. This is deliberate: what was approved is what gets merged. diff --git a/eslint.config.js b/eslint.config.js index ef614d2..da6f026 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -1,14 +1,14 @@ -import js from '@eslint/js' -import globals from 'globals' -import reactHooks from 'eslint-plugin-react-hooks' -import reactRefresh from 'eslint-plugin-react-refresh' -import tseslint from 'typescript-eslint' -import { defineConfig, globalIgnores } from 'eslint/config' +import js from "@eslint/js"; +import globals from "globals"; +import reactHooks from "eslint-plugin-react-hooks"; +import reactRefresh from "eslint-plugin-react-refresh"; +import tseslint from "typescript-eslint"; +import { defineConfig, globalIgnores } from "eslint/config"; export default defineConfig([ - globalIgnores(['dist']), + globalIgnores(["dist"]), { - files: ['**/*.{ts,tsx}'], + files: ["**/*.{ts,tsx}"], extends: [ js.configs.recommended, tseslint.configs.recommended, @@ -19,4 +19,4 @@ export default defineConfig([ globals: globals.browser, }, }, -]) +]); diff --git a/index.html b/index.html index b88f56f..7e10677 100644 --- a/index.html +++ b/index.html @@ -5,19 +5,35 @@ Prosjekt 1 - - - - + + + + - - - + + +
- diff --git a/package-lock.json b/package-lock.json index 8fa5678..152fe1b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,9 +25,14 @@ "eslint-plugin-react-hooks": "^7.1.1", "eslint-plugin-react-refresh": "^0.5.4", "globals": "^17.11.0", + "prettier": "3.9.6", "typescript": "~6.0.2", "typescript-eslint": "^8.67.0", "vite": "^8.2.2" + }, + "engines": { + "node": ">=24.6.0", + "npm": ">=11.0.0" } }, "node_modules/@babel/code-frame": { @@ -2367,6 +2372,22 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.9.6", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.9.6.tgz", + "integrity": "sha512-OpN0zzVdiaiAhxpuuj5efpIS4sY9j7bY6uR5mnj5yPzGkdkjNKSJeUThPb60Jw29QuAZgA4o+/iB49kFiaBX6g==", + "dev": true, + "license": "MIT", + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", diff --git a/package.json b/package.json index 69993e5..110cabd 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "eslint-plugin-react-hooks": "^7.1.1", "eslint-plugin-react-refresh": "^0.5.4", "globals": "^17.11.0", + "prettier": "3.9.6", "typescript": "~6.0.2", "typescript-eslint": "^8.67.0", "vite": "^8.2.2" diff --git a/public/favicon/site.webmanifest b/public/favicon/site.webmanifest index 45dc8a2..fa99de7 100644 --- a/public/favicon/site.webmanifest +++ b/public/favicon/site.webmanifest @@ -1 +1,19 @@ -{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file +{ + "name": "", + "short_name": "", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/src/App.tsx b/src/App.tsx index dbb14f9..2e500c4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,6 @@ -import { Header } from './components/Header/Header.tsx'; -import { Footer } from './components/Footer/Footer.tsx'; -import { BookGrid } from './components/BookGrid/BookGrid.tsx'; +import { Header } from "./components/Header/Header.tsx"; +import { Footer } from "./components/Footer/Footer.tsx"; +import { BookGrid } from "./components/BookGrid/BookGrid.tsx"; function App() { return ( diff --git a/src/components/BookCard/BookCard.module.css b/src/components/BookCard/BookCard.module.css index 2742767..06efbde 100644 --- a/src/components/BookCard/BookCard.module.css +++ b/src/components/BookCard/BookCard.module.css @@ -1,44 +1,44 @@ .bookCard { - position: relative; - display: flex; - flex-direction: column; - height: 100%; - background-color: white; - border-radius: var(--border-radius); - border: 1px solid var(--border-color); - padding: 24px; + position: relative; + display: flex; + flex-direction: column; + height: 100%; + background-color: white; + border-radius: var(--border-radius); + border: 1px solid var(--border-color); + padding: 24px; } .favoriteButton { - position: absolute; - top: 8px; - right: 8px; - background-color: white; - color: var(--theme-color); - border: 1px solid var(--border-color); - border-radius: var(--border-radius); - width: 32px; - height: 32px; - font-size: 1.5rem; - cursor: pointer; + position: absolute; + top: 8px; + right: 8px; + background-color: white; + color: var(--theme-color); + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + width: 32px; + height: 32px; + font-size: 1.5rem; + cursor: pointer; - &:hover { - border: 1px solid var(--theme-color); - } + &:hover { + border: 1px solid var(--theme-color); + } } .coverImage { - width: 100%; - padding: 12px 24px; - object-fit: contain; + width: 100%; + padding: 12px 24px; + object-fit: contain; } .info { - margin-top: 16px; - font-size: 0.90rem; + margin-top: 16px; + font-size: 0.9rem; } .title { - margin-bottom: 8px; - font-size: 1rem; + margin-bottom: 8px; + font-size: 1rem; } diff --git a/src/components/BookCard/BookCard.tsx b/src/components/BookCard/BookCard.tsx index 5312d87..92a5305 100644 --- a/src/components/BookCard/BookCard.tsx +++ b/src/components/BookCard/BookCard.tsx @@ -1,22 +1,26 @@ -import type { Book } from '../BookGrid/mockData'; -import styles from './BookCard.module.css'; +import type { Book } from "../BookGrid/mockData"; +import styles from "./BookCard.module.css"; interface BookCardProps { - book: Book; + book: Book; } function BookCard({ book }: BookCardProps) { - return ( -
- - {`Book -
-

{book.title}

-

{book.author}

-

{book.publishedYear}

-
-
- ); + return ( +
+ + {`Book +
+

{book.title}

+

{book.author}

+

{book.publishedYear}

+
+
+ ); } export { BookCard }; diff --git a/src/components/BookGrid/BookGrid.module.css b/src/components/BookGrid/BookGrid.module.css index 48f810d..bc5c45e 100644 --- a/src/components/BookGrid/BookGrid.module.css +++ b/src/components/BookGrid/BookGrid.module.css @@ -1,21 +1,21 @@ .bookGrid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 16px; - justify-content: center; - max-width: 1200px; - margin: 0 auto; - padding: 40px 40px; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 16px; + justify-content: center; + max-width: 1200px; + margin: 0 auto; + padding: 40px 40px; - @media only screen and (max-width: 1200px) { - grid-template-columns: repeat(3, 1fr); - } + @media only screen and (max-width: 1200px) { + grid-template-columns: repeat(3, 1fr); + } - @media only screen and (max-width: 1000px) { - grid-template-columns: repeat(2, 1fr); - } + @media only screen and (max-width: 1000px) { + grid-template-columns: repeat(2, 1fr); + } - @media only screen and (max-width: 600px) { - grid-template-columns: 1fr; - } + @media only screen and (max-width: 600px) { + grid-template-columns: 1fr; + } } diff --git a/src/components/BookGrid/BookGrid.tsx b/src/components/BookGrid/BookGrid.tsx index 4c56de1..25e3d79 100644 --- a/src/components/BookGrid/BookGrid.tsx +++ b/src/components/BookGrid/BookGrid.tsx @@ -1,17 +1,17 @@ import { BookCard } from "../BookCard/BookCard"; import { mockBooks } from "./mockData"; -import styles from './BookGrid.module.css'; +import styles from "./BookGrid.module.css"; function BookGrid() { - return ( - - ); + return ( + + ); } export { BookGrid }; diff --git a/src/components/BookGrid/mockData.ts b/src/components/BookGrid/mockData.ts index 521eeb5..bc68335 100644 --- a/src/components/BookGrid/mockData.ts +++ b/src/components/BookGrid/mockData.ts @@ -1,53 +1,58 @@ export interface Book { - id: number; - title: string; - author: string; - publishedYear: string; - coverImage: string; + id: number; + title: string; + author: string; + publishedYear: string; + coverImage: string; } export const mockBooks: Book[] = [ - { - id: 1, - title: "Maskiner som tenker: Algoritmenes hemmeligheter og veien til kunstig intelligens", - author: "Inga Strümke", - publishedYear: "2023", - coverImage: "https://covers.openlibrary.org/b/id/14604820-L.jpg" - }, - { - id: 2, - title: "Maskiner som tenker: Algoritmenes hemmeligheter og veien til kunstig intelligens", - author: "Inga Strümke", - publishedYear: "2023", - coverImage: "https://covers.openlibrary.org/b/id/14604820-L.jpg" - }, - { - id: 3, - title: "Maskiner som tenker: Algoritmenes hemmeligheter og veien til kunstig intelligens", - author: "Inga Strümke", - publishedYear: "2023", - coverImage: "https://covers.openlibrary.org/b/id/14604820-L.jpg" - }, - { - id: 4, - title: "Maskiner som tenker: Algoritmenes hemmeligheter og veien til kunstig intelligens", - author: "Inga Strümke", - publishedYear: "2023", - coverImage: "https://covers.openlibrary.org/b/id/14604820-L.jpg" - }, - { - id: 5, - title: "Maskiner som tenker: Algoritmenes hemmeligheter og veien til kunstig intelligens", - author: "Inga Strümke", - publishedYear: "2023", - coverImage: "https://covers.openlibrary.org/b/id/14604820-L.jpg" - }, - { - id: 6, - title: "Maskiner som tenker: Algoritmenes hemmeligheter og veien til kunstig intelligens", - author: "Inga Strümke", - publishedYear: "2023", - coverImage: "https://covers.openlibrary.org/b/id/14604820-L.jpg" - }, - + { + id: 1, + title: + "Maskiner som tenker: Algoritmenes hemmeligheter og veien til kunstig intelligens", + author: "Inga Strümke", + publishedYear: "2023", + coverImage: "https://covers.openlibrary.org/b/id/14604820-L.jpg", + }, + { + id: 2, + title: + "Maskiner som tenker: Algoritmenes hemmeligheter og veien til kunstig intelligens", + author: "Inga Strümke", + publishedYear: "2023", + coverImage: "https://covers.openlibrary.org/b/id/14604820-L.jpg", + }, + { + id: 3, + title: + "Maskiner som tenker: Algoritmenes hemmeligheter og veien til kunstig intelligens", + author: "Inga Strümke", + publishedYear: "2023", + coverImage: "https://covers.openlibrary.org/b/id/14604820-L.jpg", + }, + { + id: 4, + title: + "Maskiner som tenker: Algoritmenes hemmeligheter og veien til kunstig intelligens", + author: "Inga Strümke", + publishedYear: "2023", + coverImage: "https://covers.openlibrary.org/b/id/14604820-L.jpg", + }, + { + id: 5, + title: + "Maskiner som tenker: Algoritmenes hemmeligheter og veien til kunstig intelligens", + author: "Inga Strümke", + publishedYear: "2023", + coverImage: "https://covers.openlibrary.org/b/id/14604820-L.jpg", + }, + { + id: 6, + title: + "Maskiner som tenker: Algoritmenes hemmeligheter og veien til kunstig intelligens", + author: "Inga Strümke", + publishedYear: "2023", + coverImage: "https://covers.openlibrary.org/b/id/14604820-L.jpg", + }, ]; diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 71fd750..6808f0b 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -1,12 +1,12 @@ -import styles from './Footer.module.css'; +import styles from "./Footer.module.css"; function Footer() { - return ( - - ); + return ( + + ); } export { Footer }; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 1186d48..501c1d0 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,12 +1,12 @@ -import styles from './Header.module.css'; +import styles from "./Header.module.css"; function Header() { - return ( -
-

Applikasjonsnavn

- -
- ); + return ( +
+

Applikasjonsnavn

+ +
+ ); } export { Header }; diff --git a/src/main.tsx b/src/main.tsx index 0bac8bf..08c3d74 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,10 +1,10 @@ -import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; -import './index.css'; -import { App } from './App.tsx'; +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import "./index.css"; +import { App } from "./App.tsx"; -createRoot(document.getElementById('root')!).render( +createRoot(document.getElementById("root")!).render( , -) +); diff --git a/vite.config.ts b/vite.config.ts index d789a7c..f2ac363 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,11 +1,8 @@ -import react, { reactCompilerPreset } from '@vitejs/plugin-react' -import babel from '@rolldown/plugin-babel' -import { defineConfig } from 'vite' +import react, { reactCompilerPreset } from "@vitejs/plugin-react"; +import babel from "@rolldown/plugin-babel"; +import { defineConfig } from "vite"; // https://vite.dev/config/ export default defineConfig({ - plugins: [ - react(), - babel({ presets: [reactCompilerPreset()] }) - ], -}) + plugins: [react(), babel({ presets: [reactCompilerPreset()] })], +});