diff --git a/.eslintrc.js b/.eslintrc.js index 3725308..0151529 100644 --- a/.eslintrc.js +++ b/.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', }; diff --git a/.gitignore b/.gitignore index e23ed7b..76ac9b9 100644 --- a/.gitignore +++ b/.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 \ No newline at end of file +package-lock.json diff --git a/.nvmrc b/.nvmrc index b6a7d89..209e3ef 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -16 +20 diff --git a/LICENSE.md b/LICENSE.md index 3a8ee75..2b6f091 100644 --- a/LICENSE.md +++ b/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 diff --git a/README.md b/README.md index ddf37f4..178d110 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ ![Travis](https://travis-ci.org/koodiklinikka/koodiklinikka.fi.svg?branch=master) -Koodiklinikka-logo +Koodiklinikka-logo **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 diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..d805cbf --- /dev/null +++ b/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; +} diff --git a/app/icon.png b/app/icon.png new file mode 100644 index 0000000..a9901c3 Binary files /dev/null and b/app/icon.png differ diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..31b6bca --- /dev/null +++ b/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 ( + + + {children} + + + + ); +} diff --git a/app/opengraph-image.alt.txt b/app/opengraph-image.alt.txt new file mode 100644 index 0000000..37f6a87 --- /dev/null +++ b/app/opengraph-image.alt.txt @@ -0,0 +1 @@ +Koodiklinikka on Suomen suurin ohjelmistoalan yhteisö, joka tuo alan ammattilaiset ja harrastajat yhteen diff --git a/app/opengraph-image.jpg b/app/opengraph-image.jpg new file mode 100644 index 0000000..94ab1b0 Binary files /dev/null and b/app/opengraph-image.jpg differ diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 0000000..ea62eeb --- /dev/null +++ b/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 ( + <> +