feat: add changelog view and wikis links

.github/workflows/pull_request.yml

@@ -13,6 +13,7 @@ jobs:
                     node-version: 18.x
             -   run: npm install
             -   run: npm run lint
+            -   run: npm run build
 #    unit_test:
 #        runs-on: ubuntu-latest
 #        needs: [lint]
@@ -22,8 +23,6 @@ jobs:
 #                with:
 #                    node-version: 18.x
 #            -   run: npm install
-#            -   name: build
-#                run: npm run build
 #            -   name: unit test
 #                run: npm run test:unit
     e2e_test:
@@ -35,7 +34,5 @@ jobs:
                 with:
                     node-version: 18.x
             -   run: npm install
-            -   name: build
-                run: npm run build
             -   name: e2e testing
                 run: npm run test:e2e

.github/workflows/push.yml

@@ -13,6 +13,7 @@ jobs:
                     node-version: 18.x
             -   run: npm install
             -   run: npm run lint
+            -   run: npm run build
 #    unit_test:
 #        runs-on: ubuntu-latest
 #        needs: [lint]
@@ -22,8 +23,6 @@ jobs:
 #                with:
 #                    node-version: 18.x
 #            -   run: npm install
-#            -   name: build
-#                run: npm run build
 #            -   name: unit test
 #                run: npm run test:unit
     e2e_test:
@@ -35,8 +34,6 @@ jobs:
                 with:
                     node-version: 18.x
             -   run: npm install
-            -   name: build
-                run: npm run build
             -   name: unit test
                 run: npm run test:e2e
     release:

.gitignore

@@ -38,3 +38,7 @@ next-env.d.ts
 # cypress
 /cypress/videos
 /cypress/screenshots
+
+# IDE
+.idea
+.vscode

components/cards/card.tsx

@@ -0,0 +1,33 @@
+import LayoutChildren from '../../types/layoutChildren';
+
+
+const Card = (props: LayoutChildren) => {
+    const { children } = props;
+    return (
+        <div className={"flex justify-center"}>
+            <div className={"block p-6 rounded-lg shadow-lg bg-gray-800 max-w-sm"}>
+                {children}
+            </div>
+        </div>
+)
+}
+
+const CardTitle = (props: LayoutChildren) => {
+    const { children } = props;
+    return (
+        <h5 className={"text-white text-xl leading-tight font-medium mb-2"}>
+            {children}
+        </h5>
+    )
+}
+
+const CardBody = (props: LayoutChildren) => {
+    const { children } = props;
+    return (
+        <div className={"text-base p-2"}>
+            {children}
+        </div>
+    )
+}
+
+export { Card, CardTitle, CardBody };

components/changelog/changes.tsx

@@ -0,0 +1,37 @@
+import {Change} from '../../types/whatsNewResponse';
+import {CardBody, CardTitle} from '../cards/card';
+import Container from '../layout/container';
+import Link from 'next/link';
+
+
+export function ChangeEntry (props: Change) {
+    const { description, author_url, author_username, pr_url, pr_number } = props;
+    return (
+        <>
+            <p className={"font-semibold"}>
+                {description}
+            </p>
+            <p className={"font-extralight mb-1"}>
+                done by <Link href={author_url}>{author_username}</Link> on PR #<Link href={pr_url}>{pr_number}</Link>
+            </p>
+        </>
+    )
+}
+
+
+
+export function ChangesGroup(props: { changes: Array<Change>, title: string }) {
+    const {changes, title} = props;
+    return (
+        <Container>
+            <CardTitle>{title}</CardTitle>
+            <CardBody>
+                <ul className={"list-disc"}>
+                    {
+                        changes?.map((change) => <li key={change.description}><ChangeEntry key={change.description}{...change}/></li>)
+                    }
+                </ul>
+            </CardBody>
+        </Container>
+    )
+}

components/emoji.tsx

@@ -0,0 +1,21 @@
+interface EmojiProps {
+    symbol: string;
+    label?: string;
+}
+
+const Emoji = (props: EmojiProps) => {
+    const { label, symbol } = props;
+
+    return (
+        <span
+            className={"emoji"}
+            role={"img"}
+            aria-label={label ? label : ""}
+            aria-hidden={label ? "false" : "true"}
+        >
+            {symbol}
+        </span>
+    )
+}
+
+export default Emoji

components/landing/externalLink.tsx

@@ -0,0 +1,35 @@
+interface ExternalLinkProps {
+    href: string;
+    text: string;
+}
+
+const ExternalLink = (props: ExternalLinkProps) => {
+    const { href, text } = props;
+
+    return (
+        <a
+            className="inline-flex items-center px-3 py-2 rounded-lg"
+            href={href}
+            target="_blank"
+            rel="noreferrer"
+        >
+            {text}
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                className="ml-1.5 w-4 h-4"
+            >
+                <path
+                    strokeLinecap={"round"}
+                    strokeLinejoin={"round"}
+                    strokeWidth={"2"}
+                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                ></path>
+            </svg>
+        </a>
+    )
+}
+
+export default ExternalLink;

components/landing/landingText.tsx

@@ -1,6 +1,4 @@
-import LandingButtons from './landingButtons';
-
-type LandingTextProps = {
+interface LandingTextProps {
     mainText: string
     secondaryText: string
     lastText: string
@@ -20,7 +18,6 @@ const LandingText = (props: LandingTextProps) => {
             <p className={'mx-auto mt-4 font-extralight'}>
                 {lastText}
             </p>
-            <LandingButtons/>
         </div>)
 }
 

components/layout/column.tsx

@@ -0,0 +1,16 @@
+import layoutChildren from '../../types/layoutChildren';
+
+interface ColumnProps extends layoutChildren {
+    isCentered?: boolean;
+}
+
+const Column = (props: ColumnProps) => {
+    const {children, isCentered=false} = props;
+    return (
+        <div className={`flex flex-col ${isCentered ? 'items-center': ''}`}>
+            {children}
+        </div>
+    )
+}
+
+export default Column;

components/layout/container.tsx

@@ -0,0 +1,17 @@
+import layoutChildren from '../../types/layoutChildren';
+
+interface ContainerProps extends layoutChildren {
+    isCentered?: boolean;
+    isPadded?: boolean;
+}
+
+
+export default function Container (props: ContainerProps) {
+    const { children, isCentered=true, isPadded=true} = props;
+
+    return (
+        <div className={`container ${ isCentered ? 'mx-auto' : ''} ${isPadded ? 'p-2' : ''}`}>
+            {children}
+        </div>)
+}
+

components/layout/row.tsx

@@ -0,0 +1,18 @@
+import LayoutChildren from '../../types/layoutChildren';
+
+interface RowProps extends LayoutChildren {
+    isCentered?: boolean;
+    isPadded?: boolean;
+}
+
+
+const Row = (props: RowProps) => {
+    const { children, isCentered=true, isPadded=true} = props;
+    return (
+        <div className={`flex flex-row ${isCentered ? 'items-center' : ''} ${isPadded ? 'p-5' : ''}`}>
+            {children}
+        </div>
+    )
+}
+
+export default Row;

components/layout/section.tsx

@@ -0,0 +1,15 @@
+import LayoutChildren from '../../types/layoutChildren';
+
+
+const Section = (props: LayoutChildren) => {
+    const { children } = props;
+    return (
+        <section className={"h-100"}>
+            <div className="container p-4 mx-auto">
+                {children}
+            </div>
+        </section>
+    )
+}
+
+export default Section;

components/navigation.tsx

@@ -0,0 +1,30 @@
+import StyledLink from './styledLink';
+import ExternalLink from './landing/externalLink';
+
+const playerWiki = 'https://wiki.unitystation.org'
+const devWiki = 'https://unitystation.github.io/unitystation/'
+
+const Navigation = () => {
+    return (
+        <nav className="flex items-center justify-between max-w-3xl p-4 mx-auto">
+            <ul className="flex items-center text-sm font-medium text-gray-500 space-x-2">
+                <li>
+                    <StyledLink href="/" className="px-3 py-2 rounded-lg"> Home </StyledLink>
+                </li>
+
+                <li>
+                    <StyledLink href="/changelog" className="px-3 py-2 rounded-lg">Changelog</StyledLink>
+                </li>
+
+                <li>
+                    <ExternalLink href={playerWiki} text="Player's Wiki" />
+                </li>
+                <li>
+                    <ExternalLink href={devWiki} text="Developer's Wiki" />
+                </li>
+            </ul>
+        </nav>
+    )
+}
+
+export default Navigation;