kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-07-19 01:17:38 +02:00
Code Issues Projects Releases Wiki Activity

Port to TypeScript

Browse source
This commit is contained in:
Kevin Kandlbinder 2022-02-04 13:34:57 +00:00 • committed by GitHub
parent 01d3014e2f
commit bc429f5d69
32 changed files with 419 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/languageSwitcher.module.scss.d.ts vendored Normal file
View file

@ -0,0 +1,3 @@
export const languageModal: string;
export const languageModalInner: string;
export const modalCloseLink: string;

4
src/components/languageSwitcher.js → src/components/languageSwitcher.tsx
View file

@ -3,7 +3,7 @@ import { Link, Trans, useI18next } from "gatsby-plugin-react-i18next";
import * as styles from "./languageSwitcher.module.scss";
export default function LanguageSwitcher() {
const LanguageSwitcher = () => {
const { languages, originalPath } = useI18next();
return (
@ -33,3 +33,5 @@ export default function LanguageSwitcher() {
</div>
);
}
export default LanguageSwitcher

11
src/components/navigation.module.scss.d.ts vendored Normal file
View file

@ -0,0 +1,11 @@
export const active: string;
export const close: string;
export const flexSpacer: string;
export const hamburger: string;
export const homeBar: string;
export const homeBarTransparent: string;
export const inner: string;
export const logo: string;
export const offscreenNav: string;
export const topBar: string;
export const topBarInner: string;

11
src/components/navigation.js → src/components/navigation.tsx
View file

@ -1,6 +1,5 @@
/* eslint-disable no-undef */
import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import { Trans, Link, useTranslation } from "gatsby-plugin-react-i18next";
import { graphql, StaticQuery } from "gatsby";
@ -9,7 +8,11 @@ import { Fade as Hamburger } from "hamburger-react";
import OffScreenNav from "./offscreenNav";
import useSiteMetadata from "../helpers/useSiteMetadata";
const Navigation = ({ isHome }) => {
type NavigationProps = {
isHome?: boolean
}
const Navigation = ({ isHome }: NavigationProps) => {
let [atTop, setAtTop] = useState(false);
const [offscreenNavActive, setOffscreenNavActive] = useState(false);
const { t } = useTranslation();
@ -117,8 +120,4 @@ const Navigation = ({ isHome }) => {
);
};
Navigation.propTypes = {
isHome: PropTypes.bool.isRequired,
};
export default Navigation;

13
src/components/offscreenNav.js → src/components/offscreenNav.tsx
View file

@ -1,6 +1,5 @@
/* eslint-disable no-undef */
import React from "react";
import PropTypes from "prop-types";
import { Trans, Link, useTranslation } from "gatsby-plugin-react-i18next";
import { createPortal } from "react-dom";
@ -8,7 +7,12 @@ import * as styles from "./navigation.module.scss";
import { X } from "lucide-react";
import useSiteMetadata from "../helpers/useSiteMetadata";
const OffScreenNav = ({ active, close }) => {
type OffScreenNavProps = {
active: boolean,
close: () => void
}
const OffScreenNav = ({ active, close }: OffScreenNavProps) => {
const { t } = useTranslation();
const { modules } = useSiteMetadata();
@ -56,9 +60,4 @@ const OffScreenNav = ({ active, close }) => {
);
};
OffScreenNav.propTypes = {
close: PropTypes.func.isRequired,
active: PropTypes.bool.isRequired,
};
export default OffScreenNav;

20
src/components/seo.js → src/components/seo.tsx
View file

@ -1,12 +1,19 @@
import React from "react";
import PropTypes from "prop-types";
import { Helmet } from "gatsby-plugin-react-i18next";
import { useStaticQuery, graphql } from "gatsby";
import { useLocation } from "@reach/router";
import { useTranslation } from "gatsby-plugin-react-i18next";
import useSiteMetadata from "../helpers/useSiteMetadata";
function SEO({ description, meta, title, speakable, image, children }) {
type SEOProps = {
description?: string,
meta?: any[],
title: string,
speakable?: any,
image?: string
}
function SEO({ description, meta, title, speakable, image, children }: React.PropsWithChildren<SEOProps>) {
const { t } = useTranslation();
const { site } = useStaticQuery(
graphql`
@ -140,13 +147,4 @@ SEO.defaultProps = {
description: ``,
};
SEO.propTypes = {
description: PropTypes.string,
meta: PropTypes.arrayOf(PropTypes.object),
title: PropTypes.string.isRequired,
speakable: PropTypes.any,
image: PropTypes.string,
children: PropTypes.any,
};
export default SEO;

0
src/helpers/useSiteMetadata.js → src/helpers/useSiteMetadata.ts
View file

69
src/layouts/default.js
View file

@ -1,69 +0,0 @@
import React from "react";
import PropTypes from "prop-types";
import Navigation from "../components/navigation";
import SEO from "../components/seo";
import "./default.scss";
import { Link, Trans } from "gatsby-plugin-react-i18next";
import LanguageSwitcher from "../components/languageSwitcher";
class Layout extends React.Component {
render() {
return (
<>
<SEO
description={this.props.description}
lang={this.props.lang}
meta={this.props.meta}
title={this.props.title}
image={this.props.image}
speakable={this.props.speakable}
>
{this.props.seoAdditional ?? null}
</SEO>
<Navigation isHome={this.props.transparentTopbar} />
<div id="content" role="main">
{this.props.children}
</div>
<footer role="contentinfo">
CC-BY 4.0 Kevin Kandlbinder,{" "}
<Link to="/legal/about" className="spf-link">
<Trans i18nKey="layout.imprint">Imprint</Trans>
</Link>{" "}
|{" "}
<Link to="/legal/datasec" className="spf-link">
<Trans i18nKey="layout.datasec">Data Protection</Trans>
</Link>{" "}
|{" "}
<Link to="/legal/disclaimer" className="spf-link">
<Trans i18nKey="layout.disclaimer">Disclaimer</Trans>
</Link>{" "}
| <a href="#languageChooser">Language</a>
</footer>
<LanguageSwitcher />
</>
);
}
}
Layout.defaultProps = {
module: `none`,
meta: [],
description: ``,
transparentTopbar: false,
};
Layout.propTypes = {
description: PropTypes.string,
lang: PropTypes.string,
meta: PropTypes.arrayOf(PropTypes.object),
title: PropTypes.string.isRequired,
transparentTopbar: PropTypes.bool,
children: PropTypes.any.isRequired,
seoAdditional: PropTypes.any,
image: PropTypes.string,
speakable: PropTypes.any,
};
export default Layout;

6
src/layouts/default.scss.d.ts vendored Normal file
View file

@ -0,0 +1,6 @@
export const content: string;
export const flexSpacer: string;
export const gatsby: string;
export const gatsbyFocusWrapper: string;
export const profile: string;
export const section: string;

62
src/layouts/default.tsx Normal file
View file

@ -0,0 +1,62 @@
import React from "react";
import Navigation from "../components/navigation";
import SEO from "../components/seo";
import "./default.scss";
import { Link, Trans } from "gatsby-plugin-react-i18next";
import LanguageSwitcher from "../components/languageSwitcher";
type LayoutProps = {
description?: string,
meta?: any[],
title: string,
transparentTopbar?: boolean,
seoAdditional?: any,
image?: string,
speakable?: any
}
const Layout = ({description, meta, title, image, speakable, seoAdditional, transparentTopbar, children}: React.PropsWithChildren<LayoutProps>) => {
return (
<>
<SEO
description={description}
meta={meta}
title={title}
image={image}
speakable={speakable}
>
{seoAdditional ?? null}
</SEO>
<Navigation isHome={transparentTopbar} />
<div id="content" role="main">
{children}
</div>
<footer role="contentinfo">
CC-BY 4.0 Kevin Kandlbinder,{" "}
<Link to="/legal/about" className="spf-link">
<Trans i18nKey="layout.imprint">Imprint</Trans>
</Link>{" "}
|{" "}
<Link to="/legal/datasec" className="spf-link">
<Trans i18nKey="layout.datasec">Data Protection</Trans>
</Link>{" "}
|{" "}
<Link to="/legal/disclaimer" className="spf-link">
<Trans i18nKey="layout.disclaimer">Disclaimer</Trans>
</Link>{" "}
| <a href="#languageChooser">Language</a>
</footer>
<LanguageSwitcher />
</>
);
}
Layout.defaultProps = {
module: `none`,
meta: [],
description: ``,
transparentTopbar: false,
};
export default Layout;

0
src/pages/404.js → src/pages/404.tsx
View file

1
src/pages/about.js → src/pages/about.tsx
View file

@ -187,6 +187,7 @@ const AboutPage = (props) => {
}
objectFit="cover"
style={{ height: "100%" }}
alt={project.name}
></GatsbyImage>
</div>
<div

3
src/pages/donate.module.scss.d.ts vendored Normal file
View file

@ -0,0 +1,3 @@
export const donateButton: string;
export const priceAmount: string;
export const sronly: string;

2
src/pages/donate.js → src/pages/donate.tsx
View file

@ -93,7 +93,7 @@ const DonatePage = (props) => {
step="1"
value={amount}
onChange={(ev) => {
setAmount(ev.target.value);
setAmount(parseInt(ev.target.value));
}}
name="priceInput"
id="priceInput"

9
src/pages/friends.module.scss.d.ts vendored Normal file
View file

@ -0,0 +1,9 @@
export const contactLink: string;
export const contactLinks: string;
export const friendBg: string;
export const friendBio: string;
export const friendImage: string;
export const friendName: string;
export const friendProfile: string;
export const friendsList: string;
export const friendTitle: string;

1
src/pages/friends.js → src/pages/friends.tsx
View file

@ -77,6 +77,7 @@ const FriendsPage = ({ data }) => {
image={getImage(
friend.localImage
)}
alt={friend.name}
></GatsbyImage>
</div>
<span

38
src/pages/index.module.scss.d.ts vendored Normal file
View file

@ -0,0 +1,38 @@
export const aboutSection: string;
export const aboutText: string;
export const amazonAlexaSection: string;
export const birth: string;
export const careerContainer: string;
export const contactLink: string;
export const contactLinks: string;
export const creditSection: string;
export const ctaAccent: string;
export const date: string;
export const description: string;
export const donationSection: string;
export const entry: string;
export const entryContent: string;
export const entryTypeeducation: string;
export const hello: string;
export const heroSection: string;
export const heroSectionBg: string;
export const heroSectionBgOver: string;
export const hireMeSection: string;
export const landingCta: string;
export const mainline: string;
export const name: string;
export const profile: string;
export const profileCard: string;
export const profileImage: string;
export const profileImageDummy: string;
export const seeMoreButton: string;
export const skill: string;
export const skillFramework: string;
export const skillLanguage: string;
export const skillList: string;
export const skillOs: string;
export const skillPlatform: string;
export const skillProgram: string;
export const skills: string;
export const spacer: string;
export const title: string;

1
src/pages/index.js → src/pages/index.tsx
View file

@ -124,6 +124,7 @@ const IndexPage = (props) => {
width={250}
height={350}
placeholder="blurred"
alt="Kevin Kandlbinder"
></StaticImage>
</div>
<div className={styles.profileImageDummy}></div>

8
src/pages/projects.module.scss.d.ts vendored Normal file
View file

@ -0,0 +1,8 @@
export const projectCard: string;
export const projectCardBg: string;
export const projectCardCta: string;
export const projectCardCtaContainer: string;
export const projectCardImage: string;
export const projectCardMeta: string;
export const projectCardTitle: string;
export const projectList: string;

1
src/pages/projects.js → src/pages/projects.tsx
View file

@ -102,6 +102,7 @@ const ProjectsPage = ({ data }) => {
}
objectFit="cover"
style={{ height: "100%" }}
alt={project.name}
></GatsbyImage>
</div>
<div className={styles.projectCardMeta}>

6
src/pages/social.module.scss.d.ts vendored Normal file
View file

@ -0,0 +1,6 @@
export const socialBg: string;
export const socialCard: string;
export const socialImage: string;
export const socialList: string;
export const socialName: string;
export const socialUsername: string;

1
src/pages/social.js → src/pages/social.tsx
View file

@ -65,6 +65,7 @@ const SocialPage = ({ data }) => {
image={getImage(
social.localImage
)}
alt={social.platformName}
></GatsbyImage>
</div>
<span className={styles.socialName}>

13
src/templates/blogListing.module.scss.d.ts vendored Normal file
View file

@ -0,0 +1,13 @@
export const excerpt: string;
export const list: string;
export const meta: string;
export const moreSoon: string;
export const pageSwitcher: string;
export const post: string;
export const sectionBacklink: string;
export const sectionBg: string;
export const sectionCard: string;
export const sectionImage: string;
export const sectionList: string;
export const sectionName: string;
export const title: string;

2
src/templates/blogListing.js → src/templates/blogListing.tsx
View file

@ -43,7 +43,7 @@ const BlogListing = ({ data, pageContext }) => {
>
<div className={styles.sectionImage}>
<div className={styles.sectionBg}>
<StaticImage src="https://source.unsplash.com/gf8e6XvG_3E/300x150"></StaticImage>
<StaticImage src="https://source.unsplash.com/gf8e6XvG_3E/300x150" alt={t("blog.section.scambox.name")}></StaticImage>
</div>
<span className={styles.sectionName}>
{t("blog.section.scambox.name")}

4
src/templates/blogPost.module.scss.d.ts vendored Normal file
View file

@ -0,0 +1,4 @@
export const chatBox: string;
export const meta: string;
export const noticeBox: string;
export const postSection: string;

0
src/templates/blogPost.js → src/templates/blogPost.tsx
View file

12
src/templates/project.module.scss.d.ts vendored Normal file
View file

@ -0,0 +1,12 @@
export const fa: string;
export const fab: string;
export const fal: string;
export const far: string;
export const fas: string;
export const headerBackground: string;
export const headerInner: string;
export const headerPlaceholder: string;
export const linkList: string;
export const projectAbout: string;
export const projectHeader: string;
export const projectLinks: string;

1
src/templates/project.js → src/templates/project.tsx
View file

@ -79,6 +79,7 @@ const ProjectTemplate = ({ data }) => {
}
style={{ width: "100%", height: "100%" }}
objectFit="cover"
alt={projectName}
></GatsbyImage>
</div>
<header>