Skip to content
This repository has been archived by the owner on Nov 4, 2024. It is now read-only.

Typescript #230

Merged
merged 7 commits into from
Feb 7, 2022
Merged
Show file tree
Hide file tree
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
16 changes: 6 additions & 10 deletions src/components/Layout/Hamburger.component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@ const Hamburger = (): JSX.Element => {
};
}, [isExpanded]);

const handleClickOutside = (e: { target: any }) => {
if (node.current?.contains(e.target)) {
const handleClickOutside = (e: MouseEvent): void => {
if (node.current?.contains(e.target as Node)) {
/**
* Clicked inside of the menu
*/
Expand Down Expand Up @@ -85,8 +85,7 @@ const Hamburger = (): JSX.Element => {
data-testid="hamburger"
onClick={handleMobileMenuClick}
aria-expanded={isExpanded}
type="button"
>
type="button">
<span className="sr-only text-white text-2xl">Hamburger</span>
<span
className={`${hamburgerLine} ${
Expand All @@ -109,23 +108,20 @@ const Hamburger = (): JSX.Element => {
id="mobile-menu"
data-testid="mobile-menu"
aria-hidden={!isExpanded}
className="absolute right-0 w-full text-center bg-gray-800 mt-4 w-30 invisible"
>
className="absolute right-0 w-full text-center bg-gray-800 mt-4 w-30 invisible">
<ul aria-label="Navigasjon">
{LINKS.map((link) => (
<li
key={link.id}
className="menu-item w-full border-t border-gray-600 border-solid shadow"
>
className="menu-item w-full border-t border-gray-600 border-solid shadow">
{link.external ? (
<a
className="inline-block m-4 text-xl text-white hover:underline"
aria-label={link.text}
href={link.url}
target="_blank"
rel="noreferrer"
data-testid={`mobil-${link.text}`}
>
data-testid={`mobil-${link.text}`}>
{link.text}
</a>
) : (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,19 +1,10 @@
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

import Image from "../UI/Image.component";
import Button from "../UI/Button.component";

import { urlFor } from "../../lib/sanity";

import type { IProject } from "./ProsjekterListings.component";

import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";

interface IOnEnter {
progress: number;
}

interface ILinkButton {
url: string;
text: string;
Expand All @@ -27,43 +18,20 @@ interface ILinkButton {
*/

const ProsjektIndividualProjects = ({ projects }: IProject): JSX.Element => {
// https://edidiongasikpo.com/using-gsap-scrolltrigger-plugin-in-react
// https://greensock.com/forums/topic/24427-scrolltrigger-fade-in-elements-on-scroll-by-toggleclass-only-once/

const ShowLinkButton = ({ url, text, name }: ILinkButton): JSX.Element => (
<a rel="noopener noreferrer" target="_blank" aria-label={name} href={url}>
<Button text={text} />
</a>
);

useIsomorphicLayoutEffect(() => {
gsap.registerPlugin(ScrollTrigger);
const boxes = gsap.utils.toArray("#projectdiv");
boxes.forEach((box: any, _i: number) => {
const anim = gsap.from(box, { duration: 0.5, autoAlpha: 0, y: 50, paused: true });
ScrollTrigger.create({
trigger: box,
end: "bottom bottom",
once: true,
onEnter: (self: IOnEnter) => {
if (self.progress === 1) {
anim.progress(1);
} else {
anim.play();
}
}
});
});
}, []);
return (
<>
{projects.map(
({ id, name, description, subdescription, urlwww, urlgithub, projectimage }) => (
<div
id="projectdiv"
key={id}
className="p-6 text-lg text-black bg-white rounded shadow invisible"
>
className="p-6 text-lg text-black bg-white rounded shadow invisible">
<h2 className="text-xl font-black text-center">{name}</h2>
<div className="mt-6 text-lg text-left lg:text-left md:text-left">
<p>{description}</p>
Expand Down
13 changes: 3 additions & 10 deletions src/pages/api/siteMapGenerator.ts
Original file line number Diff line number Diff line change
@@ -1,26 +1,19 @@
const { SitemapStream, streamToPromise } = require("sitemap");
const { Readable } = require("stream");

import type { NextApiRequest, NextApiResponse } from "next";

interface IData {
toString: () => string;
}

interface IReq {
headers: { host: any };
}

interface IRes {
writeHead: (arg0: number, arg1: { "Content-Type": string }) => void;
end: (arg0: any) => void;
}

interface ILinks {
url: string;
changefreq: string;
priority: number;
}

const siteMapGenerator = async (req: IReq, res: IRes) => {
const siteMapGenerator = async (req: NextApiRequest, res: NextApiResponse) => {
// An array with your links

const links: ILinks[] = [
Expand Down