feat: new design for koodiklinikka.fi

Co-authored-by: Aarni Koskela <[email protected]>

.eslintrc.js

@@ -1,37 +1,3 @@
 module.exports = {
-  extends: [
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:react/recommended",
-    "plugin:jsx-a11y/recommended",
-    "plugin:@next/next/recommended",
-    "prettier",
-  ],
-  settings: {
-    react: {
-      version: "detect",
-    },
-  },
-  env: {
-    browser: true,
-    node: true,
-  },
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    ecmaVersion: 2020,
-    sourceType: "module",
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-  rules: {
-    "@typescript-eslint/ban-types": "warn",
-    "no-use-before-define": 0,
-    "padded-blocks": 0,
-    "react/jsx-no-target-blank": 0,
-    "react/jsx-uses-react": 2,
-    "react/jsx-uses-vars": 2,
-    "react/prop-types": 0,
-    "react/react-in-jsx-scope": 2,
-  },
+  extends: 'next/core-web-vitals',
 };

.gitignore

@@ -1,7 +1,17 @@
-*.log
+*.log*
+*.pem
+*.tsbuildinfo
 .DS_Store
+.env*.local
 .history
 .next
+.pnp.js
+.vercel
+.yarn
+/.pnp
+/build
+/coverage
+next-env.d.ts
 node_modules
 out
-package-lock.json
+package-lock.json

.nvmrc

@@ -1 +1 @@
-16
+20

LICENSE.md

@@ -1,6 +1,7 @@
 The MIT License (MIT)
 
 Copyright (c) 2015 Riku Rouvila
+Copyright (c) 2024 Petri Partio
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -2,7 +2,7 @@
 
 ![Travis](https://travis-ci.org/koodiklinikka/koodiklinikka.fi.svg?branch=master)
 
-<img align="right" src="./public/static/images/logo-new-black.svg" alt="Koodiklinikka-logo" max-width="30%">
+<img align="right" src="./logo-new-black.svg" alt="Koodiklinikka-logo" max-width="30%">
 
 **Koodiklinikka.fi lähdekoodi**. [Issueita](https://github.com/koodiklinikka/koodiklinikka.fi/issues) ja [Pull Requestejä](https://github.com/koodiklinikka/koodiklinikka.fi/pulls) otetaan lämpimästi vastaan. Yritämme pitää kynnyksen kontribuoida projektiin alhaisena, jotta mahdollisimman moni pääsisi jättämään siihen jälkensä. Kaikki koodi katselmoidaan läpi ja mergetään projektiin kun näyttää hyvälle. Muutamasta mergetystä Pull Requestista oikeudet ylläpitää projektia.
 
@@ -20,8 +20,7 @@
 
 ### Vaaditut työkalut
 
-- Asenna [Node.js](http://nodejs.org)
-- Asenna [Yarn 1.x](https://classic.yarnpkg.com/en/)
+- Asenna [Node.js](http://nodejs.org) ja [Yarn 1.x](https://classic.yarnpkg.com/en/) (tai [Bun](https://bun.sh/))
 - Asenna [Git](https://git-scm.com/) client lähdekoodin hallintaan
 
 ### Kloonaa projekti koneellesi
@@ -44,14 +43,14 @@ Avaa selaimessasi: [`http://localhost:3000`](http://localhost:3000)
 
 ## Komennot
 
-### `yarn`
+### `yarn` (tai `bun i`)
 
 Asentaa projektin riippuvuudet
 
-### `yarn start`
+### `yarn dev` (tai `bun dev`)
 
-Kääntää lähdetiedostot ja palvelee sovellusta porttiin `3000`
+Palvelee sovellusta kehitystilassa porttiin `3000`
 
-### `yarn build`
+### `yarn build` (tai `bun run build`)
 
 Kääntää lähdetiedostot -> `out/` -hakemistoon

app/globals.css

@@ -0,0 +1,99 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  .text-shadow {
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.title-highlight {
+  background: linear-gradient(200deg, #ff0098 20%, #0ef 80%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  filter: drop-shadow(0 0 20px rgba(255, 0, 234, 0.2));
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  .title-highlight {
+    background: linear-gradient(200deg, oklch(68% 0.5 340) 20%, oklch(90% 0.5 200) 100%);
+
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    filter: drop-shadow(0 0 20px oklch(80% 0.41 211 / 20%));
+  }
+}
+
+.bg-button {
+  background: linear-gradient(200deg, #f0f 20%, #ff00c4 100%);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  .bg-button {
+    background: linear-gradient(200deg, oklch(100% 0.5 340) 20%, oklch(86% 0.5 360) 100%);
+  }
+}
+
+html {
+  background: #070b1e url('../public/background.webp');
+  background-size: 1024px auto;
+  background-position: top center;
+  background-repeat: no-repeat;
+  scroll-behavior: smooth;
+}
+
+@media (min-width: 1024px) {
+  html {
+    background-size: 100% auto;
+  }
+}
+
+h1,
+h2,
+h3 {
+  text-wrap: balance;
+}
+
+.checkbox svg {
+  display: none;
+}
+
+input[type='checkbox']:checked + .checkbox {
+  background-color: #ef008e;
+  border-color: #ff0099;
+}
+
+input[type='checkbox']:checked + .checkbox svg {
+  display: block;
+  align-items: center;
+  justify-items: center;
+  width: 80%;
+  height: auto;
+}
+
+input[type='checkbox']:focus + .checkbox {
+  outline: 2px solid var(--tw-color-red-800);
+  outline-offset: 2px;
+}
+
+@keyframes fadeInOut {
+  0% {
+    opacity: 20%;
+  }
+  50% {
+    opacity: 100%;
+  }
+  100% {
+    opacity: 20%;
+  }
+}
+
+.fade-in-out {
+  opacity: 20%;
+  animation: fadeInOut 4s ease-in-out infinite;
+}

app/layout.tsx

@@ -0,0 +1,27 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import BottomFade from '@/components/BottomFade';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'Koodiklinikka',
+  description: 'Yhteisö kaikille ohjelmoinnista ja ohjelmistoalasta kiinnostuneille harrastajille ja ammattilaisille',
+  robots: 'noindex',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="fi">
+      <body className={`${inter.className} pb-24 text-white`}>
+        {children}
+        <BottomFade />
+      </body>
+    </html>
+  );
+}

app/opengraph-image.alt.txt

@@ -0,0 +1 @@
+Koodiklinikka on Suomen suurin ohjelmistoalan yhteisö, joka tuo alan ammattilaiset ja harrastajat yhteen

app/page.tsx

@@ -0,0 +1,105 @@
+import shuffle from 'lodash.shuffle';
+
+import ChannelGrid from '@/components/ChannelGrid';
+import FeatureImage from '@/components/FeatureImage';
+import Footer from '@/components/Footer';
+import Hero from '@/components/Hero';
+import Nav from '@/components/Nav';
+import Wrapper from '@/components/Wrapper';
+
+async function getChannels() {
+  const res = await fetch('https://stats.koodiklinikka.fi/api/channels', { next: { revalidate: 3600 } });
+
+  if (!res.ok) {
+    // This will activate the closest `error.js` Error Boundary
+    throw new Error('Failed to fetch data');
+  }
+
+  return res.json();
+}
+
+export default async function Home() {
+  let channels: Channel[] = await getChannels();
+  channels = channels.sort((a, b) => (a.messages_today > b.messages_today ? -1 : 1));
+
+  return (
+    <>
+      <Nav />
+      <main className="mt-20">
+        <Wrapper>
+          <Hero />
+
+          <div className="text-shadow py-16 lg:my-24">
+            <h2 className="mx-auto max-w-screen-xs text-center text-2xl font-extrabold md:max-w-none md:text-3xl">
+              Suosituimmat keskustelunaiheet tänään
+            </h2>
+
+            <ChannelGrid channels={channels.splice(0, 12)} />
+
+            <div className="mx-auto max-w-md p-6 text-center font-mono text-sm leading-relaxed text-fuchsia-100/60 lg:max-w-3xl">
+              Ja paljon muuta:{' '}
+              {shuffle(channels.splice(0, 20))
+                .map<React.ReactNode>((channel) => (
+                  <a
+                    key={channel.id}
+                    href={`https://app.slack.com/client/T03BQ3NU9/${channel.id}`}
+                    target="_blank"
+                    className="underline-offset-4 hover:underline"
+                  >
+                    #{channel.name}
+                  </a>
+                ))
+                .reduce((prev, curr) => [prev, ', ', curr])}
+              …
+            </div>
+          </div>
+
+          <div className="mx-auto max-w-lg space-y-14 p-6 md:p-12 lg:max-w-none lg:space-y-28">
+            <div className="text-shadow grid gap-10 lg:grid-cols-2 lg:gap-16">
+              <div className="lg:order-2">
+                <FeatureImage src="/meetup.webp" alt="" width="1792" height="1024" />
+              </div>
+              <div className="flex flex-col justify-center space-y-5 lg:order-1">
+                <h2 className="text-3xl font-extrabold">Yhteisö ohjelmoinnista kiinnostuneille</h2>
+                <div className="space-y-5 font-mono text-sm leading-relaxed text-pink-100">
+                  <p>
+                    Koodiklinikka on Suomen suurin ohjelmistoalan yhteisö, joka kokoaa yhteen ammattilaiset, harrastajat
+                    ja vasta-alkajat. Tavoitteenamme on yhdistää ja kasvattaa suomalaista ohjelmointiyhteisöä sekä
+                    tarjota apua ja uusia kontakteja kaikille ohjelmoinnista innostuneille.
+                  </p>
+
+                  <p>
+                    Liittyminen on ilmaista ja helppoa. Jätä sähköpostiosoitteesi{' '}
+                    <a href="#liity" className="underline underline-offset-4">
+                      yllä olevaan kenttään
+                    </a>
+                    , niin lähetämme sinulle kutsun Slack-yhteisöömme.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="text-shadow grid gap-10 lg:grid-cols-2 lg:gap-16">
+              <div>
+                <FeatureImage src="/opensource.webp" alt="" width="1792" height="1024" />
+              </div>
+              <div className="flex flex-col justify-center space-y-5">
+                <h2 className="text-3xl font-extrabold">Avoin lähdekoodi &lt;3</h2>
+                <div className="space-y-5 font-mono text-sm leading-relaxed text-pink-100">
+                  <p>
+                    Suosimme avointa lähdekoodia ja kaikki käyttämämme koodi on vapaasti saatavilla sekä
+                    hyödynnettävissä Github-organisaatiomme sivulta. Organisaation jäseneksi otamme kaikki
+                    Slack-yhteisömme jäsenet. Koodiklinikan projekteihin voi osallistua kuka tahansa ja muutosideat ovat
+                    aina lämpimästi tervetulleita!
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Wrapper>
+      </main>
+
+      <Footer />
+    </>
+  );
+}

app/twitter-image.alt.txt

@@ -0,0 +1 @@
+Koodiklinikka on Suomen suurin ohjelmistoalan yhteisö, joka tuo alan ammattilaiset ja harrastajat yhteen

components/BottomFade.tsx

@@ -0,0 +1,5 @@
+export default function BottomFade() {
+  return (
+    <div className="pointer-events-none fixed bottom-0 left-0 right-0 z-50 h-32 bg-gradient-to-t from-[#070b1e] to-black/0"></div>
+  );
+}

components/ChannelGrid.tsx

@@ -0,0 +1,33 @@
+import shuffle from 'lodash.shuffle';
+
+const DELAYS = shuffle([0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 1.1]);
+
+export default function ChannelGrid({ channels }: { channels: Channel[] }) {
+  return (
+    <div className="mt-8 grid gap-3 rounded-3xl bg-gradient-to-b from-black/10 to-black/0 p-6 backdrop-blur-sm xs:grid-cols-2 sm:grid-cols-3 md:grid-cols-4 md:p-12">
+      {channels.map((channel, i) => (
+        <div key={channel.id} className="relative h-[5.5rem]">
+          <div
+            className="fade-in-out absolute bottom-0 left-0 right-0 top-0 z-0 rounded-[9px] bg-fuchsia-200/40"
+            style={{
+              WebkitMask: 'linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0))',
+              animationDelay: `${DELAYS[i] * 2}s`,
+            }}
+          ></div>
+          <div
+            className="absolute bottom-0 left-0 right-0 top-0 z-10 m-px rounded-[8px] bg-[#2c0c33]"
+            style={{ WebkitMask: 'linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,0))' }}
+          ></div>
+          <div className="relative z-20 flex flex-col items-center  justify-center gap-1 px-3 py-6 font-mono">
+            <a
+              href={`https://app.slack.com/client/T03BQ3NU9/${channel.id}`}
+              target="_blank"
+              className="text-sm font-semibold underline-offset-4 hover:underline"
+            >{`#${channel.name}`}</a>
+            <div className="text-xs opacity-70">{channel.num_members} jäsentä</div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}