feat(app): add authors and about page (#424)

* feat(app): add authors and about page

* refactor(app): refactor authors page

* chore: undo .all-contributorsrc file

apps/app/next.config.js

@@ -12,10 +12,10 @@ const nextConfig = {
 	},
 	images: {
 		remotePatterns: [
-			{
+			...["", 0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((number) => ({
 				protocol: "https",
-				hostname: "avatars.githubusercontent.com",
-			},
+				hostname: `avatars${number}.githubusercontent.com`,
+			})),
 		],
 	},
 	webpack(config) {

apps/app/package.json

@@ -36,11 +36,12 @@
 		"@storybook/react": "^7.0.0-alpha.54",
 		"@storybook/testing-library": "^0.0.13",
 		"@svgr/webpack": "6.5.1",
-		"@types/prismjs": "1.26.0",
-		"@types/remark-prism": "1.3.4",
+		"@tailwindcss/typography": "0.5.8",
 		"@types/node": "18.11.15",
+		"@types/prismjs": "1.26.0",
 		"@types/react": "18.0.26",
 		"@types/react-dom": "18.0.9",
+		"@types/remark-prism": "1.3.4",
 		"@vercel/analytics": "0.1.6",
 		"autoprefixer": "^10.4.13",
 		"css-loader": "^6.7.3",

apps/app/src/app/(main-layout)/about/page.tsx

@@ -0,0 +1,75 @@
+import { StaticPageContainer } from "../../../components/StaticPageContainer";
+
+export default function AboutPage() {
+	return (
+		<StaticPageContainer>
+			<article className="prose dark:prose-invert">
+				<h2>Jak korzystać? FAQ</h2>
+				<h3>Co to jest DevFAQ.pl?</h3>
+				<p>
+					DevFAQ.pl jest serwisem internetowym służącym do udostępniania i wymiany pytań
+					rekrutacyjnych na stanowiska developerów oraz inne pokrewne. Został stworzony przez
+					programistów dla programistów, a jego celem jest wymiana wiedzy oraz możliwość
+					przygotowania się do rozmów rekrutacyjnych.
+				</p>
+
+				<h3>Jak można dodać pytanie?</h3>
+				<p>
+					Każdy użytkownik DevFAQ może dodać treść pytania, przydzielić mu kategorię oraz poziom
+					trudności. Następnie po kliknięciu „Dodaj” pytanie trafia do moderacji. Po zaakceptowaniu
+					przez administratorów, pojawi się na stronie. Może to zająć kilka dni!
+				</p>
+
+				<h3>Jakie są ogólne zasady korzystania z serwisu?</h3>
+				<ul>
+					<li>W treści nie podawaj nazwy firmy, w której padło pytanie.</li>
+					<li>
+						Przed dodaniem pytania, upewnij się czy treść jest wolna od błędów ortograficznych,
+						zaoszczędzisz pracy moderacji.
+					</li>
+					<li>Pytanie niezwiązane z technologiami (np. miękkie) umieść w kategorii INNE</li>
+					<li>
+						Jeśli dodajesz kod do pytania, zadbaj o poprawne formatowanie (spacje, wcięcia itp.).
+					</li>
+					<li>
+						Wszystkie pytania są moderowane. Moderatorzy dbają również o to, aby pytania się nie
+						powtarzały.
+					</li>
+				</ul>
+
+				<h3>Czy mogę formatować jakoś treść dodawanych pytań?</h3>
+				<p>Tak! Możesz skorzystać z powszechnie znanego Markdown:</p>
+				<ul>
+					<li>``` Code block ```</li>
+					<li>`Inline code`</li>
+					<li>*Italic*</li>
+					<li>**Bold**</li>
+					<li>[Link](http://a.com)</li>
+					<li>* List</li>
+				</ul>
+
+				<h4>Przykład użycia</h4>
+				<p>Przykładowe pytanie napisane w Markdown może wyglądać tak:</p>
+
+				<pre>
+					Czy funkcja `sayHello` zwraca **string**?{"\n"}
+					```javascript
+					{`
+function sayHello() {
+  return 'Hello World';
+}
+`}
+					```
+				</pre>
+
+				<p>
+					Więcej informacji na temat Markdown oraz kompletną dokumentację znajdziesz na stronie{" "}
+					<a href="http://commonmark.org/" target="_blank" rel="noopener noreferrer">
+						CommonMark
+					</a>
+					.
+				</p>
+			</article>
+		</StaticPageContainer>
+	);
+}

apps/app/src/app/(main-layout)/authors/page.tsx

@@ -0,0 +1,20 @@
+import { Author } from "../../../components/Author/Author";
+import { StaticPageContainer } from "../../../components/StaticPageContainer";
+import { getAllContributors } from "../../../lib/github";
+
+export default async function AuthorsPage() {
+	const contributors = await getAllContributors();
+
+	return (
+		<StaticPageContainer>
+			<h2 className="mb-8 text-4xl font-bold">Autorzy</h2>
+			<ul className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
+				{contributors.map((contributor) => (
+					<li key={contributor.login}>
+						<Author contributor={contributor} />
+					</li>
+				))}
+			</ul>
+		</StaticPageContainer>
+	);
+}

apps/app/src/components/Author/Author.stories.ts

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Author } from "./Author";
+
+const meta: Meta<typeof Author> = {
+	title: "Author",
+	component: Author,
+	args: {
+		contributor: {
+			login: "xStrixU",
+			name: "Kacper Polak",
+			avatar_url: "https://avatars.githubusercontent.com/u/41890821?v=4",
+			profile: "https://github.com/xStrixU",
+			contributions: ["code"],
+		},
+	},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Author>;
+
+export const Default: Story = {};

apps/app/src/components/Author/Author.tsx

@@ -0,0 +1,47 @@
+import Image from "next/image";
+import { Contributor } from "../../lib/github";
+
+type AuthorProps = Readonly<{
+	contributor: Contributor;
+}>;
+
+const contributionTranslations: Record<string, string> = {
+	code: "Kod",
+	content: "Treść",
+	design: "Design",
+	doc: "Dokumentacja",
+	ideas: "Pomysły",
+	maintenance: "Utrzymanie",
+	platform: "Platforma",
+	review: "Code Review",
+};
+
+export const Author = ({
+	contributor: { login, profile, avatar_url, name, contributions },
+}: AuthorProps) => {
+	const translatedContributions = contributions.map(
+		(contribution) => contributionTranslations[contribution] || contribution,
+	);
+
+	return (
+		<a href={profile} target="_blank" rel="noreferrer">
+			<article className="flex flex-col items-center rounded-lg bg-neutral-100 px-3.5 py-6 shadow-[0px_1px_4px] shadow-neutral-400 active:translate-y-px dark:bg-neutral-700 dark:shadow-neutral-900">
+				<Image
+					src={avatar_url}
+					alt={`Avatar użytkownika o loginie ${login}`}
+					width={125}
+					height={125}
+					className="mb-5 rounded-full"
+				/>
+				<h3 className="mb-1 font-semibold">
+					<span className="sr-only">Imię:</span>
+					{name}
+				</h3>
+				<p className="text-center font-semibold leading-tight text-violet-600 dark:text-violet-400">
+					<span className="sr-only">Zasługi:</span>
+					{translatedContributions.join(", ")}
+				</p>
+			</article>
+		</a>
+	);
+};

apps/app/src/components/Header/Header.tsx

@@ -16,8 +16,8 @@ export const Header = () => (
 				<AppLogo />
 			</Link>
 			<HeaderNavigation>
-				<ActiveNavigationLink href="/">Jak korzystać?</ActiveNavigationLink>
-				<ActiveNavigationLink href="/foo">Autorzy</ActiveNavigationLink>
+				<ActiveNavigationLink href="/about">Jak korzystać?</ActiveNavigationLink>
+				<ActiveNavigationLink href="/authors">Autorzy</ActiveNavigationLink>
 				<a href="https://www.facebook.com/DevFAQ" target="_blank" rel="noreferrer">
 					FaceBook
 				</a>

apps/app/src/components/StaticPageContainer.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import { Container } from "./Container";
+
+type StaticPageContainerProps = Readonly<{
+	children: ReactNode;
+}>;
+
+export const StaticPageContainer = ({ children }: StaticPageContainerProps) => (
+	<Container
+		as="section"
+		className="static-page-shadow my-3 bg-white p-4 text-neutral-800 dark:bg-white-dark dark:text-neutral-200 sm:p-4"
+	>
+		{children}
+	</Container>
+);

apps/app/src/lib/github.ts

@@ -0,0 +1,18 @@
+export interface Contributor {
+	login: string;
+	name: string;
+	avatar_url: string;
+	profile: string;
+	contributions: string[];
+}
+
+export const getAllContributors = async () => {
+	const { content } = await fetch(
+		"https://api.github.com/repos/typeofweb/devfaq/contents/.all-contributorsrc",
+	).then((res) => res.json() as Promise<{ content: string }>);
+	const { contributors } = JSON.parse(Buffer.from(content, "base64").toString()) as {
+		contributors: Contributor[];
+	};
+
+	return contributors;
+};

apps/app/src/styles/tailwind.css

@@ -3,6 +3,11 @@
 @tailwind utilities;
 
 @layer components {
+	.static-page-shadow {
+		box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+			0 1px 5px 0 rgba(0, 0, 0, 0.12);
+	}
+
 	.select-purple {
 		background-image: url("/select-purple.svg");
 		background-size: 25px;

apps/app/tailwind.config.js

@@ -69,5 +69,5 @@ module.exports = {
 			},
 		},
 	},
-	plugins: [],
+	plugins: [require("@tailwindcss/typography")],
 };