Start implementing app router

Ackuq · Sep 19, 2023 · b90252e · b90252e
1 parent c963c35
commit b90252e
Show file tree

Hide file tree

Showing 19 changed files with 483 additions and 506 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,3 +1,4 @@
 {
+  "plugins": ["prettier-plugin-tailwindcss"],
   "trailingComma": "all"
 }
diff --git a/apps/web/app/footer.tsx b/apps/web/app/footer.tsx
@@ -0,0 +1,29 @@
+import Image from "next/image";
+import { githubProfile, linkedIn } from "../src/lib/socials";
+
+export default function Footer() {
+  return (
+    <footer className="bg-primary-elevated-light dark:bg-primary-elevated-dark mt-auto flex flex-col gap-3 py-6 text-center text-white">
+      <span>© Axel Pettersson 2023</span>
+      <a href="mailto:[email protected]">[email protected]</a>
+      <span className="flex items-center justify-center gap-8">
+        <a href={linkedIn} target="_blank" rel="noopener noreferrer">
+          <Image
+            src="/static/images/linkedin_logo.png"
+            height={28}
+            width={28}
+            alt="LinkedIn logo"
+          />
+        </a>
+        <a href={githubProfile} target="_blank" rel="noopener noreferrer">
+          <Image
+            src="/static/images/github_logo.png"
+            height={28}
+            width={28}
+            alt="GitHub logo"
+          />
+        </a>
+      </span>
+    </footer>
+  );
+}
diff --git a/apps/web/app/global.css b/apps/web/app/global.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/apps/web/app/head.tsx b/apps/web/app/head.tsx
@@ -0,0 +1,135 @@
+import Script from "next/script";
+import * as gtag from "../src/lib/gtag";
+import { ADSENSE_CLIENT_ID } from "../src/lib/adsense";
+
+export default function Head() {
+  return (
+    <head>
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
+      <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href="/static/icons/apple-touch-icon.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        href="/static/icons/favicon-32x32.png"
+        sizes="32x32"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        href="/static/icons/favicon-16x16.png"
+        sizes="16x16"
+      />
+      <link
+        rel="mask-icon"
+        href="/static/icons/safari-pinned-tab.svg"
+        color="#5bbad5"
+      />
+      <link rel="manifest" href="/manifest.webmanifest" />
+
+      <meta property="og:image" content="/static/images/partiguiden_logo.png" />
+      <meta
+        name="theme-color"
+        content="#1e293b"
+        media="(prefers-color-scheme: light)"
+      />
+      <meta
+        name="theme-color"
+        content="#1e293b"
+        media="(prefers-color-scheme: dark)"
+      />
+      <style>
+        {`
+        #__next {     
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-orient: vertical;
+          -webkit-box-direction: normal;
+          -ms-flex-direction: column;
+          flex-direction: column;
+          min-height: 100%; 
+        }
+        a:not(:hover) {
+          text-decoration: none;
+        }
+      `}
+      </style>
+      {process.env.NEXT_PUBLIC_VERCEL_ENV !== "production" && (
+        <>
+          {/* Disable indexing of all non-production sites */}
+          <meta name="robots" content="noindex" />
+        </>
+      )}
+      <Script
+        id="twttr-init"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+            window.twttr = (function(d, s, id) {
+              var js, fjs = d.getElementsByTagName(s)[0],
+                t = window.twttr || {};
+              if (d.getElementById(id)) return t;
+              js = d.createElement(s);
+              js.id = id;
+              js.src = "https://platform.twitter.com/widgets.js";
+              fjs.parentNode.insertBefore(js, fjs);
+            
+              t._e = [];
+              t.ready = function(f) {
+                t._e.push(f);
+              };
+            
+              return t;
+            }(document, "script", "twitter-wjs"));
+          `,
+        }}
+      />
+      {process.env.NODE_ENV === "production" && (
+        <>
+          {/* Google Ads */}
+          <Script
+            id="ads-init"
+            async
+            onError={(e) => {
+              console.error("Ads failed to load", e);
+            }}
+            strategy="afterInteractive"
+            src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${ADSENSE_CLIENT_ID}`}
+            crossOrigin="anonymous"
+          />
+          {/* Global site tag (gtag.js) - Google Analytics  */}
+          <Script
+            strategy="afterInteractive"
+            onError={(e) => {
+              console.error("gtag failed to load", e);
+            }}
+            src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
+          />
+          <Script
+            id="gtag-init"
+            strategy="afterInteractive"
+            onError={(e) => {
+              console.error("gtag failed to load", e);
+            }}
+            dangerouslySetInnerHTML={{
+              __html: `
+              window.dataLayer = window.dataLayer || [];
+              function gtag(){dataLayer.push(arguments);}
+              gtag('js', new Date());
+              gtag('config', '${gtag.GA_TRACKING_ID}', {
+                page_path: window.location.pathname,
+              });
+        `,
+            }}
+          />
+        </>
+      )}
+    </head>
+  );
+}
diff --git a/apps/web/app/header.tsx b/apps/web/app/header.tsx
@@ -0,0 +1,27 @@
+import Link from "next/link";
+
+function MainLogo() {
+  return (
+    <Link href="/" className="text-3xl font-medium">
+      Partiguiden
+    </Link>
+  );
+}
+
+export default function Header() {
+  return (
+    <>
+      <div className="bg-background-elevated-light dark:bg-background-elevated-dark absolute h-12 w-full sm:h-20"></div>
+      <header className="bg-background-elevated-light/75 dark:bg-background-elevated-dark/75 sticky top-0 h-12 px-4  backdrop-blur-md sm:h-20">
+        <div className="container">
+          <div className="flex items-center">
+            <MainLogo />
+          </div>
+          <nav>
+            <Link href="/">link</Link>
+          </nav>
+        </div>
+      </header>
+    </>
+  );
+}
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -0,0 +1,28 @@
+import "./global.css";
+import { Roboto } from "@next/font/google";
+import type { PropsWithChildren } from "react";
+import Head from "./head";
+import Footer from "./footer";
+import Header from "./header";
+
+const roboto = Roboto({
+  weight: ["300", "400", "500", "700"],
+  subsets: ["latin"],
+  display: "swap",
+  fallback: ["Helvetica", "Arial", "sans-serif"],
+});
+
+export default function RootLayout({ children }: PropsWithChildren) {
+  return (
+    <html lang="sv">
+      <Head />
+      <body
+        className={`${roboto.className} bg-background-light dark:bg-background-dark text-font-light dark:text-font-dark flex min-h-screen flex-col shadow-2xl`}
+      >
+        <Header />
+        {children}
+        <Footer />
+      </body>
+    </html>
+  );
+}
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
@@ -0,0 +1,83 @@
+import { BaseCard } from "@components/card";
+import Typed from "../src/components/Typed";
+import Link from "next/link";
+
+export const metadata = {
+  title: "Partiguiden | Rösta rätt",
+  description:
+    "Vad tar Sveriges partier för ståndpunkter i sakfrågor? På Partiguiden kan du hitta och jämföra vad partierns åsikter för att hitta det parti du sympatiserar mest med.",
+};
+
+/**
+const PageTitleContainer = styled(Paper)`
+  background-color: ${({ theme }) =>
+    theme.palette.mode === "dark"
+      ? theme.palette.background.paper
+      : theme.palette.primary.light};
+  text-align: center;
+  padding: 1.5rem 0.25rem;
+  margin-bottom: 1rem;
+  color: #fff;
+  min-height: 5rem;
+`;
+
+ */
+
+function PageTitleContainer() {
+  return (
+    <h2 className="bg-primary-elevated-light dark:bg-primary-elevated-dark mb-4 py-6 text-center text-3xl leading-10 text-white shadow-lg">
+      Hur vill Sveriges partier förbättra
+      <br />
+      <Typed
+        strings={["miljön?", "jämlikheten?", "vården?", "Sverige?"]}
+        typeSpeed={100}
+        backSpeed={50}
+        showCursor={false}
+      />
+      &nbsp;
+    </h2>
+  );
+}
+
+const featured = [
+  { id: "ekonomi-och-skatter", name: "Ekonomi och Skatter" },
+  { id: "lag-och-ratt", name: "Lag och rätt" },
+  { id: "migration-och-integration", name: "Migration och Integration" },
+  { id: "miljo-och-klimat", name: "Miljö och klimat" },
+];
+
+export default function IndexPage() {
+  return (
+    <main>
+      <PageTitleContainer />
+      <div className="container grid gap-4">
+        <BaseCard className="w-full">
+          <h3 className="pb-4 text-center text-3xl">
+            Vilket parti ska man rösta på?
+          </h3>
+          <p>
+            Vilket parti ska man rösta på? Och vad tycker partierna egentligen?
+            På Partiguiden kan du läsa om vad partierna tycker enligt sina
+            partiprogram och samt se hur de röstar i riksdagsvoteringar.
+          </p>
+        </BaseCard>
+        <BaseCard>
+          <h3 className="pb-4 text-center text-3xl">
+            Mest besökta ämnen de senaste 30 dagarna
+          </h3>
+          <div className="grid grid-cols-2 gap-6 text-center">
+            {featured.map((subject) => (
+              <Link
+                key={subject.id}
+                href={`/standpoints/${subject.id}`}
+                className="bg-background-elevated-light-200 dark:bg-background-elevated-dark-200 rounded py-3 shadow-lg transition-opacity hover:opacity-70"
+              >
+                {subject.name}
+              </Link>
+            ))}
+          </div>
+        </BaseCard>
+      </div>
+    </main>
+  );
+}
diff --git a/apps/web/components/button.tsx b/apps/web/components/button.tsx
@@ -0,0 +1,11 @@
+type BaseButtonProps = React.PropsWithChildren<
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>;
+
+export function BaseButton({ children, className, ...props }: BaseButtonProps) {
+  return (
+    <button className={`hover:opacity-75 ${className}`} {...props}>
+      {children}
+    </button>
+  );
+}
diff --git a/apps/web/components/card.tsx b/apps/web/components/card.tsx
@@ -0,0 +1,14 @@
+type BaseCardProps = React.PropsWithChildren<
+  React.HTMLAttributes<HTMLDivElement>
+>;
+
+export function BaseCard({ children, className, ...props }: BaseCardProps) {
+  return (
+    <div
+      className={`bg-background-elevated-light dark:bg-background-elevated-dark rounded shadow-lg ${className}`}
+      {...props}
+    >
+      <div className="px-4 py-6">{children}</div>
+    </div>
+  );
+}
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -47,6 +47,8 @@
     "@types/node": "20.6.0",
     "@types/react": "18.2.21",
     "@types/turndown": "5.0.2",
-    "next-sitemap": "4.2.3"
+    "autoprefixer": "^10.4.15",
+    "next-sitemap": "4.2.3",
+    "tailwindcss": "^3.3.3"
   }
 }
diff --git a/apps/web/postcss.config.js b/apps/web/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};