types instead of interfaces

doordesk/src/App.tsx

@@ -16,10 +16,10 @@ const FAKE_IT_TIL_YOU_MAKE_IT: string[] = [
     'Cartman',  // with knobs!
 ]
 
-interface IAppProps {
+type IAppProps = {
 }
 
-interface IAppState {
+type IAppState = {
     currentPage: string;
     currentPageIndex: number;
 }

doordesk/src/components/Blog.tsx

@@ -14,10 +14,10 @@ const FAKE_IT_TIL_YOU_MAKE_IT: string[] = [
     'blog/000000000-swim.html',
 ]
 
-interface IBlogProps {
+type IBlogProps = {
 }
 
-interface IBlogState {
+type IBlogState = {
 }
 
 class Blog extends Component<IBlogProps, IBlogState> {

doordesk/src/components/BlogPost.tsx

@@ -2,10 +2,10 @@ import { Component } from 'react'
 import ReactMarkdown from 'react-markdown'
 import rehypeRaw from 'rehype-raw'
 
-interface IBlogPostProps {
+type IBlogPostProps = {
     postURL: string;
 }
-interface IBlogPostState {
+type IBlogPostState = {
     postHTML: string;
 }
 class BlogPost extends Component<IBlogPostProps, IBlogPostState> {
@@ -19,7 +19,7 @@ class BlogPost extends Component<IBlogPostProps, IBlogPostState> {
         return fetch(post)
             .then((res) => res.text())
     }
-    componentDidMount() {
+    async componentDidMount() {
         this.getPost(this.props.postURL)
             .then((text) => this.setState({ postHTML: text }))
     }

doordesk/src/components/Cartman.tsx

@@ -1,9 +1,9 @@
 import { Component } from 'react'
 
-interface ICartmanProps {
+type ICartmanProps = {
 }
 
-interface ICartmanState {
+type ICartmanState = {
 }
 
 class Cartman extends Component<ICartmanProps, ICartmanState> {

doordesk/src/components/Games.tsx

@@ -2,10 +2,10 @@ import { Component } from 'react'
 import ReactMarkdown from 'react-markdown'
 import rehypeRaw from 'rehype-raw'
 
-interface IGamesProps {
+type IGamesProps = {
 }
 
-interface IGamesState {
+type IGamesState = {
     html: string;
 }
 
@@ -16,7 +16,7 @@ class Games extends Component<IGamesProps, IGamesState> {
             'html': ''
         }
     }
-    componentDidMount() {
+    async componentDidMount() {
         return fetch('games/index.html')
             .then((res) => res.text())
             .then((text) => this.setState({ html: text }))

doordesk/src/components/Header.tsx

@@ -1,11 +1,11 @@
 import { Component } from 'react'
 
-interface IHeaderProps {
+type IHeaderProps = {
     pages: string[];
     currentPage: string;
 }
 
-interface IHeaderState {
+type IHeaderState = {
 }
 
 class Header extends Component<IHeaderProps, IHeaderState> {

doordesk/src/components/Home.tsx

@@ -16,10 +16,10 @@ const FAKE_IT_TIL_YOU_MAKE_IT: string[] = [
     'blog/000000000-swim.html',
 ]
 
-interface IHomeProps {
+type IHomeProps = {
 }
 
-interface IHomeState {
+type IHomeState = {
 }
 
 class Home extends Component<IHomeProps, IHomeState> {

doordesk/src/components/Projects.tsx

@@ -11,10 +11,10 @@ const FAKE_IT_TIL_YOU_MAKE_IT: string[] = [
     'blog/20220529-housing.html',
 ]
 
-interface IProjectsProps {
+type IProjectsProps = {
 }
 
-interface IProjectsState {
+type IProjectsState = {
 }
 
 class Projects extends Component<IProjectsProps, IProjectsState> {

readme.md

@@ -6,9 +6,13 @@ indexed by the backend then displayed on the frontend with React.
 Idea is to just throw files at it and it'll just be handled, cause I'm lazy.
 
 Home - Interleave latest from other pages, maybe add top/hot lists or something
+
 Blog - Blog, display latest posts, summarize these until clicked? 
+
 Projects - Same as blog but may have pins at the top with cards
+
 Games - Cards with thumbnails and summaries, pins/popular
+
 Cartman, Enigma - Own pages? Pinned projects?
 
 - Animations to make it purdy