Skip to content

PYTHON-4121: Added format and linting to frontend + Updated Library Requirements #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 10, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions {{cookiecutter.project_slug}}/frontend/app/about/page.tsx
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
import { Metadata } from "next"
import { getPostData } from "../lib/utilities/posts"
import { Metadata } from "next";
import { getPostData } from "../lib/utilities/posts";

type Post = {
id: string
content: string
title: string
description: string
author: string
publishedAt: string
}
id: string;
content: string;
title: string;
description: string;
author: string;
publishedAt: string;
};

const aboutPath = "app/content/"
const aboutPath = "app/content/";

export const metadata: Metadata = {
title: "Getting started with a base project",
}
};

export default async function About() {
const data: Post = await getPostData("about", aboutPath)
const data: Post = await getPostData("about", aboutPath);

return (
<>
<div className="max-w-none mx-auto sm:w-3/5 prose prose-reader-light prose-reader-base prose-reader-compact px-4 pt-10 pb-20 sm:px-6">
<div dangerouslySetInnerHTML={{ __html: data.content }} />
</div>
</>
)
);
}
26 changes: 13 additions & 13 deletions {{cookiecutter.project_slug}}/frontend/app/authentication/page.tsx
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
import { Metadata } from "next"
import { getPostData } from "../lib/utilities/posts"
import { Metadata } from "next";
import { getPostData } from "../lib/utilities/posts";

type Post = {
id: string
content: string
title: string
description: string
author: string
publishedAt: string
}
id: string;
content: string;
title: string;
description: string;
author: string;
publishedAt: string;
};

const aboutPath = "app/content/"
const aboutPath = "app/content/";

export const metadata: Metadata = {
title: "Authentication with Magic and Oauth2",
}
};

export default async function Authentication() {
const data: Post = await getPostData("authentication", aboutPath)
const data: Post = await getPostData("authentication", aboutPath);

return (
<>
<div className="max-w-none mx-auto sm:w-3/5 prose prose-reader-light prose-reader-base prose-reader-compact px-4 pt-10 pb-20 sm:px-6">
<div dangerouslySetInnerHTML={{ __html: data.content }} />
</div>
</>
)
);
}
30 changes: 15 additions & 15 deletions {{cookiecutter.project_slug}}/frontend/app/blog/[id]/page.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
import { getPostData } from "../../lib/utilities/posts"
import { readableDate } from "../../lib/utilities/textual"
import { getPostData } from "../../lib/utilities/posts";
import { readableDate } from "../../lib/utilities/textual";

type Params = {
id: string
}
id: string;
};

type Props = {
params: Params
}
params: Params;
};

type Post = {
title: string
publishedAt: string
content: string
author: string
}
title: string;
publishedAt: string;
content: string;
author: string;
};

export async function generateMetadata({ params }: Props) {
const postData: Post = await getPostData(params.id)
const postData: Post = await getPostData(params.id);

return {
title: postData.title,
}
};
}

// -< Post >-
export default async function Post({ params }: Props) {
const data: Post = await getPostData(params.id)
const data: Post = await getPostData(params.id);

return (
<>
@@ -39,5 +39,5 @@ export default async function Post({ params }: Props) {
<div dangerouslySetInnerHTML={{ __html: data.content }} />
</div>
</>
)
);
}
36 changes: 18 additions & 18 deletions {{cookiecutter.project_slug}}/frontend/app/blog/page.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import Link from "next/link"
import { getSortedPostsData } from "../lib/utilities/posts"
import { readableDate } from "../lib/utilities/textual"
import Link from "next/link";
import { getSortedPostsData } from "../lib/utilities/posts";
import { readableDate } from "../lib/utilities/textual";

type PostMeta = {
id: string
title: string
description: string
author: string
publishedAt: string
categories: string[]
}
id: string;
title: string;
description: string;
author: string;
publishedAt: string;
categories: string[];
};

const title = "Recent blog posts"
const description = "Thoughts from the world of me."
const title = "Recent blog posts";
const description = "Thoughts from the world of me.";

const renderPost = (post: PostMeta) => {
let categories = post.categories.map((category) => (
@@ -22,7 +22,7 @@ const renderPost = (post: PostMeta) => {
>
{category.trim()}
</span>
))
));

return (
<div key={post.id}>
@@ -42,12 +42,12 @@ const renderPost = (post: PostMeta) => {
</div>
</div>
</div>
)
}
);
};

export default function BlogHome() {
const postsList: PostMeta[] = getSortedPostsData()
const posts = postsList.map((post) => renderPost(post))
const postsList: PostMeta[] = getSortedPostsData();
const posts = postsList.map((post) => renderPost(post));

return (
<main className="max-w-none mx-auto sm:w-3/5 bg-white px-4 pt-10 pb-20 sm:px-6">
@@ -63,5 +63,5 @@ export default function BlogHome() {
</div>
</div>
</main>
)
);
}
26 changes: 13 additions & 13 deletions {{cookiecutter.project_slug}}/frontend/app/components/Footer.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client"
"use client";

import Link from "next/link"
import { siteName } from "../lib/utilities/generic"
import Link from "next/link";
import { siteName } from "../lib/utilities/generic";

const githubIcon = () => {
return (
@@ -17,8 +17,8 @@ const githubIcon = () => {
clipRule="evenodd"
/>
</svg>
)
}
);
};

const mastodonIcon = () => {
return (
@@ -34,8 +34,8 @@ const mastodonIcon = () => {
clipRule="evenodd"
/>
</svg>
)
}
);
};

const footerNavigation = {
main: [
@@ -57,7 +57,7 @@ const footerNavigation = {
icon: mastodonIcon,
},
],
}
};

const renderNavigation = () => {
return footerNavigation.main.map((item) => (
@@ -69,8 +69,8 @@ const renderNavigation = () => {
{item.name}
</Link>
</div>
))
}
));
};

const renderSocials = () => {
return footerNavigation.social.map((item) => (
@@ -82,8 +82,8 @@ const renderSocials = () => {
<span className="sr-only">{item.name}</span>
{item.icon()}
</a>
))
}
));
};

export default function Footer() {
return (
@@ -105,5 +105,5 @@ export default function Footer() {
</div>
</div>
</footer>
)
);
}
Original file line number Diff line number Diff line change
@@ -1,36 +1,36 @@
"use client"
"use client";

import { Disclosure } from "@headlessui/react"
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline"
import Link from "next/link"
import AlertsButton from "./alerts/AlertsButton"
import dynamic from "next/dynamic"
import { Disclosure } from "@headlessui/react";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
import Link from "next/link";
import AlertsButton from "./alerts/AlertsButton";
import dynamic from "next/dynamic";
const AuthenticationNavigation = dynamic(
() => import("./authentication/AuthenticationNavigation"),
{ ssr: false },
)
);

const navigation = [
{ name: "About", to: "/about" },
{ name: "Authentication", to: "/authentication" },
{ name: "Blog", to: "/blog" },
]
];

const renderIcon = (open: boolean) => {
if (!open) {
return <Bars3Icon className="block h-6 w-6" aria-hidden="true" />
return <Bars3Icon className="block h-6 w-6" aria-hidden="true" />;
} else {
return <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
return <XMarkIcon className="block h-6 w-6" aria-hidden="true" />;
}
}
};

const renderNavLinks = (style: string) => {
return navigation.map((nav) => (
<Link href={nav.to} key={nav.name} className={style}>
{nav.name}
</Link>
))
}
));
};
export default function Navigation() {
return (
<header>
@@ -84,5 +84,5 @@ export default function Navigation() {
)}
</Disclosure>
</header>
)
);
}
Loading