Store progress

apps/web/app/not-found.tsx

@@ -0,0 +1,25 @@
+import { BaseCard } from "@components/card";
+import PageTitle from "@components/page-title";
+import { ExclamationCircleIcon } from "@heroicons/react/24/solid";
+
+export const metadata = {
+  title: "404 | Sidan hittades inte | Partiguiden",
+};
+
+export default function Error404() {
+  return (
+    <main>
+      <PageTitle Icon={ExclamationCircleIcon}>
+        404 - Sidan hittades inte
+      </PageTitle>
+      <div className="container mt-4">
+        <BaseCard>
+          <p className="text-center text-lg">
+            Sidan du letade har kanske blivit borttagen, eller skrev du in en
+            felaktig URL.
+          </p>
+        </BaseCard>
+      </div>
+    </main>
+  );
+}

apps/web/app/page.tsx

@@ -10,7 +10,7 @@ export const metadata = {
 
 function PageTitleContainer() {
   return (
-    <h2 className="bg-primary-elevated-light dark:bg-primary-elevated-dark mb-4 py-6 text-center text-xl font-light leading-10 text-white shadow-sm sm:text-3xl">
+    <h2 className="bg-primary dark:bg-primary-elevated-dark mb-4 py-6 text-center text-xl font-light leading-10 text-white shadow-sm sm:text-3xl">
       Hur vill Sveriges partier förbättra
       <br />
       <Typed

apps/web/app/standpunkter/[id]/page.tsx

@@ -0,0 +1,54 @@
+import { notFound } from "next/navigation";
+import type { Party } from "@partiguiden/party-data/types";
+import {
+  getStandpointsForSubject,
+  getSubject,
+} from "@partiguiden/party-data/reader";
+import { ERROR_404_TITLE } from "@lib/constants";
+import PageTitle from "@components/page-title";
+import PartyStandpoints from "./party-standpoints";
+
+interface PageProps {
+  params: {
+    id: string;
+  };
+}
+
+export async function generateMetadata({ params: { id } }: PageProps) {
+  const subject = getSubject(id);
+
+  if (!subject) {
+    return {
+      title: ERROR_404_TITLE,
+    };
+  }
+
+  return {
+    title: `${subject.name} | Ämne | Partiguiden`,
+    description: `Vad tar Sveriges partier för ståndpunkter inom sakområdet ${subject.name}? Här hittar du informationen du behöver för att kunna jämföra och hitta det parti du sympatiserar med mest!`,
+  };
+}
+
+export default function Standpoints({ params: { id } }: PageProps) {
+  const subject = getSubject(id);
+  if (!subject) {
+    return notFound();
+  }
+
+  const standpoints = getStandpointsForSubject(subject.id);
+
+  return (
+    <main>
+      <PageTitle>{subject.name}</PageTitle>
+      <div className="container">
+        {Object.entries(standpoints).map(([party, standpoints]) => (
+          <PartyStandpoints
+            key={party}
+            party={party as Party}
+            standpoints={standpoints}
+          />
+        ))}
+      </div>
+    </main>
+  );
+}

apps/web/app/standpunkter/[id]/party-standpoints.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import type { Party, Standpoint } from "@partiguiden/party-data/types";
+import { getPartyName } from "@partiguiden/party-data/utils";
+import { useState } from "react";
+
+interface PartyStandpointsProps {
+  party: Party;
+  standpoints: Standpoint[];
+}
+
+export default function PartyStandpoints({
+  party,
+  standpoints,
+}: PartyStandpointsProps) {
+  const [visible, setVisible] = useState(false);
+
+  function handleClick() {
+    setVisible((prevState) => !prevState);
+  }
+
+  return <div>{getPartyName(party)}</div>;
+}

apps/web/app/standpunkter/page.tsx

@@ -0,0 +1,53 @@
+import PageTitle from "@components/page-title";
+import { getSubjects } from "@partiguiden/party-data/reader";
+import { PencilSquareIcon } from "@heroicons/react/24/solid";
+import Link from "next/link";
+import { routes } from "@lib/navigation";
+
+export const metadata = {
+  title: "Partiernas ståndpunkter | Partiguiden",
+  description:
+    "Vad tar Sveriges partier för ståndpunkter i olika ämnen och sakfrågor? Jämför Sveriges partier politik och hitta det parti du sympatiserar mest med nu!",
+};
+
+const shiftColors = [
+  "[&:nth-child(3n)]:bg-gray-100",
+  "[&:nth-child(3n+1)]:bg-gray-200",
+  "[&:nth-child(3n+2)]:bg-gray-200/60",
+  "dark:[&:nth-child(3n)]:bg-background-elevated-dark",
+  "dark:[&:nth-child(3n+1)]:bg-background-elevated-dark",
+  "dark:[&:nth-child(3n+2)]:bg-background-elevated-dark",
+].join(" ");
+
+export default function Subjects() {
+  const subjects = getSubjects().sort((a, b) => {
+    if (a.name < b.name) {
+      return -1;
+    }
+    if (a.name > b.name) {
+      return 1;
+    }
+    return 0;
+  });
+
+  return (
+    <main>
+      <PageTitle Icon={PencilSquareIcon}>Partiernas Ståndpunkter</PageTitle>
+      <div className="mb-8 sm:container">
+        <div className="border-l-primary grid grid-cols-1 border-l-2 border-t-2 border-t-slate-300 dark:border-t-slate-700 md:grid-cols-2">
+          {subjects.map((subject) => (
+            <Link
+              key={subject.id}
+              href={routes.standpoint(subject.id)}
+              className={`${shiftColors} group`}
+            >
+              <span className="to-primary group:hover:transition-all inline-block bg-gradient-to-l from-transparent from-50% to-50% bg-[length:200%_100%] bg-right px-3 py-4 duration-300 group-hover:bg-left group-hover:text-white">
+                {subject.name}
+              </span>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </main>
+  );
+}

apps/web/components/header/header.tsx

@@ -13,8 +13,8 @@ function MainLogo() {
 export default function Header() {
   return (
     <>
-      <div className="bg-primary-elevated-light dark:bg-background-elevated-dark absolute h-14 w-full sm:h-24"></div>
-      <header className="bg-primary-elevated-light/75 text-font-dark dark:bg-background-elevated-dark/75 sticky top-0 flex h-14 flex-col shadow-md backdrop-blur-md sm:h-24">
+      <div className="bg-primary dark:bg-background-elevated-dark absolute h-14 w-full sm:h-24"></div>
+      <header className="bg-primary/75 text-font-dark dark:bg-background-elevated-dark/75 sticky top-0 flex h-14 flex-col shadow-md backdrop-blur-md sm:h-24">
         <div className="container flex h-full items-center justify-between">
           <MainLogo />
           <ThemeToggle />

apps/web/components/header/tab-navigation.tsx

@@ -81,7 +81,7 @@ export default function TabNavigation() {
             key={href}
             href={href}
             aria-current={href === pathname && "page"}
-            className="aria-current-page:border-b-2 min-w-tab-link border-primary-light dark:border-primary-elevated-light flex-shrink-0 whitespace-nowrap p-4 text-sm uppercase hover:opacity-80"
+            className="aria-current-page:border-b-2 border-primary-light dark:border-primary-elevated-light min-w-[90px] flex-shrink-0 whitespace-nowrap p-4 text-sm uppercase hover:opacity-80"
           >
             {title}
           </Link>

apps/web/components/page-title.tsx

@@ -0,0 +1,12 @@
+type PageTitleProps = React.PropsWithChildren<{
+  Icon?: React.ElementType;
+}>;
+
+export default function PageTitle({ children, Icon }: PageTitleProps) {
+  return (
+    <div className="bg-primary dark:bg-background-elevated-dark py-4 text-center text-white">
+      {Icon && <Icon className="mx-auto mb-4 h-10 w-10" />}
+      <h1 className="text-3xl">{children}</h1>
+    </div>
+  );
+}

apps/web/lib/constants.ts

@@ -0,0 +1 @@
+export const ERROR_404_TITLE = "404 | Sidan hittades inte | Partiguiden";

apps/web/lib/navigation.ts

@@ -12,13 +12,15 @@ import {
 export const routes = {
   index: "/",
   cookiePolicy: "/cookie-policy",
-  aboutUs: "/about-us",
+  aboutUs: "/om-oss",
   polls: "/polls",
-  votes: "/vote",
+  votes: "/voteringar",
   vote: "/vote/[id]/[bet]",
   decisions: "/decisions",
-  standpoints: "/standpoints",
-  standpoint: "/standpoints/[id]",
+  standpoints: "/standpunkter",
+  standpoint(id: string) {
+    return `/standpunkter/${id}`;
+  },
   party: "/party/[party]",
   members: "/member",
   member: "/member/[id]",
@@ -29,19 +31,6 @@ export const routes = {
   debate: "/debate/[id]",
 };
 
-export const getVoteHref = (id: string, bet: number): string =>
-  `/vote/${id}/${bet}`;
-
-export const getStandpointHref = (id: number): string => `/standpoints/${id}`;
-
-export const getPartyHref = (party: string): string => `/party/${party}`;
-
-export const getMemberHref = (id: string): string => `/member/${id}`;
-
-export const getDocumentHref = (id: string): string => `/document/${id}`;
-
-export const getDebateHref = (id: string): string => `/debate/${id}`;
-
 export const mainNavigation = [
   { href: routes.index, title: "Hem", Icon: HomeIcon },
   {

apps/web/next.config.mjs

@@ -7,6 +7,7 @@ const withBundleAnalyzer = bundleAnalyzer({
 
 let moduleExports = withBundleAnalyzer({
   productionBrowserSourceMaps: true,
+  transpilePackages: ["@partiguiden/party-data"],
   basePath: "",
   images: {
     remotePatterns: [

apps/web/package.json

@@ -26,6 +26,7 @@
     "@mui/material": "5.14.9",
     "@mui/system": "5.14.9",
     "@next/bundle-analyzer": "13.4.19",
+    "@partiguiden/party-data": "workspace:*",
     "@sentry/nextjs": "7.69.0",
     "isomorphic-unfetch": "4.0.2",
     "jsdom": "22.1.0",