Develop (#21)

* ui work

* ui work

* ui work

* CV link

* missing pkg

* pkg

* ui tweaks

* tests wip

* lastfm ui

* lastfm ui

* UI work

* typog stuff

* screen shots and UI work

* OH img

* update aliases

* add date

* marketplace img

* spacing

* mdash

* contrast fix

* spacing

* update cv

* ui work

* ui work

* footer and ui work

* UI tweaks

* brand colour

* summer campaign

* about links

* render links

* fix tests

* tests

* tests

* add ci file

* fix tests

* lastfm tests

* tidy up

* add coverage report

* comment out data

* tests

* tests

* remove github workflows

* ui work

* workflow

* node version in workflow

* delete workflow

* update lastfm ui

* tests and UI updates

* conflicts

* comment test

* version

* build command

* remove test

* version

* element ordering

* tests and UI

* UI fixes

* spacing

* fix key

* Update index.js

* Update index.js

* Update global.styles.js

* Update layout.js

* Update index.styles.js

* Update index.js

* Update index.js

* Update index.js

* fix tests

* tidy up media queries

* font sizing

* h3

* Update index.js

* Typescript (#19)

* init commit

* convert icon

* fix console err

* wip

* big rework

* rework

* tests wip

* wip

* tests wip

* test updates

* wip

* fix tests

* tests

* remove test

---------

Co-authored-by: Simon Hudson <hellosimonhudson [at] gmail.com>

* tidy up

* update types

* gitignore

* version bump

---------

Co-authored-by: Simon Hudson <hellosimonhudson+github [at] gmail.com>
Co-authored-by: Simon Hudson <hellosimonhudson [at] gmail.com>

.gitignore

@@ -9,4 +9,4 @@ src/**/*.js
 src/**/*.jsx
 test/**/*.js
 test/**/*.jsx
-./**/*.tsbuildinfo
+**/*.tsbuildinfo

package.json

@@ -1,6 +1,6 @@
 {
   "name": "personal",
-  "version": "1.0.3",
+  "version": "2.0.0",
   "description": "Personal website of Simon Hudson",
   "main": "index.js",
   "scripts": {

src/components/lastfm/index.tsx

@@ -7,27 +7,12 @@ import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import httpStatusCodes from 'src/constants/httpStatusCodes';
 dayjs.extend(relativeTime);
-
-type LastFmDataImage = {
-	size: 'small' | 'medium' | 'large' | 'extralarge';
-	'#text': 'small.jpg' | 'medium.jpg' | 'large.jpg' | 'extralarge.jpg'
-}
-
-type LastFmData = {
-	artist: { '#text': string };
-	image: Array<LastFmDataImage>;
-	album: { '#text': string };
-	name: string;
-	url: string;
-	date: { '#text': string };
-	relativeTime: string;
-	isCurrentlyPlaying?: Boolean
-}
+import { ILastFmDisplayData } from './lastfm.d';
 
 const LastFm = () => {
 	const isMount = useIsMount();
 	const [isLoading, setIsLoading] = useState(true);
-	const [data, setData] = useState<LastFmData>();
+	const [data, setData] = useState<ILastFmDisplayData>();
 	const [errorMsg, setErrorMsg] = useState('');
 
 	const ERROR_MSG = `Sorry, couldn't load data from Last.fm :o(`;
@@ -36,14 +21,13 @@ const LastFm = () => {
 		(async () => {
 			if (isMount) {
 				const response = await fetch(
-					`https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=${process.env.LASTFM_USERNAME}&api_key=${process.env.LASTFM_API_KEY}&format=json&limit=1`
+					`https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=${process.env.LASTFM_USERNAME}&api_key=${process.env.LASTFM_API_KEY}&format=json&limit=1`,
 				);
-
 				if (response?.status !== httpStatusCodes.OK) {
 					setErrorMsg(ERROR_MSG);
 				} else {
 					const data = await response?.json();
-					const recentTrack: LastFmData = data?.recenttracks?.track[0];		
+					const recentTrack: ILastFmDisplayData = data?.recenttracks?.track[0];
 					if (recentTrack) {
 						const displayData = { ...recentTrack };
 						displayData.relativeTime = recentTrack?.date

src/components/lastfm/lastfm.d.ts

@@ -0,0 +1,24 @@
+type LastFmDataImage = {
+	size: 'small' | 'medium' | 'large' | 'extralarge';
+	'#text': 'small.jpg' | 'medium.jpg' | 'large.jpg' | 'extralarge.jpg';
+};
+
+interface ILastFmApiResponseTrack {
+	artist: { '#text': string };
+	image: Array<LastFmDataImage>;
+	album: { '#text': string };
+	name: string;
+	url: string;
+	date: { '#text': any };
+}
+
+export interface ILastFmDisplayData extends ILastFmApiResponseTrack {
+	relativeTime: string;
+	isCurrentlyPlaying?: Boolean;
+}
+
+export type LastFmApiResponse = {
+	recenttracks: {
+		track: Array<ILastFmApiResponseTrack>;
+	};
+};

src/components/portfolio/data.d.ts

@@ -0,0 +1,20 @@
+type MetadataItem = {
+	label: 'Made with' | 'Tested with' | 'Built with';
+	items: Array<string>
+}
+
+export type DataItem = {
+	client: string;
+	date: string;
+	isArchived?: Boolean | null | undefined,
+	metadata: Array<MetadataItem>;
+	omit?: Boolean
+	slug: string;
+	text?: string[];
+	title: string;
+	url: string;
+}
+
+type Data = Array<DataItem>;
+
+export default Data;

src/components/portfolio/data.ts

@@ -1,4 +1,4 @@
-import Data from './data.type';
+import Data from './data.d';
 import githubUrl from 'src/constants/githubUrl';
 
 const AQUASEC: string = 'Aquasec';
@@ -267,4 +267,4 @@ let data: Data = [
 	// },
 ];
 
-export default data;
+export default data;

src/components/portfolio/item.tsx

@@ -16,19 +16,9 @@ import Layout from 'src/theme/layout';
 import githubUrl from 'src/constants/githubUrl';
 import PropTypes from 'prop-types';
 import kebabCase from 'lodash/kebabCase';
-import { DataItem } from './data.type';
+import { DataItem } from './data.d';
 
-const Item = ({
-	client,
-	date,
-	isArchived,
-	metadata,
-	omit,
-	slug,
-	text,
-	title,
-	url
-}: DataItem) => {
+const Item = ({ client, date, isArchived, metadata, omit, slug, text, title, url }: DataItem) => {
 	if (omit) return null;
 
 	const ctaText = url.startsWith(githubUrl) ? (

test/data/lastfm.ts

@@ -1,8 +1,9 @@
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 dayjs.extend(relativeTime);
+import { LastFmApiResponse } from 'src/components/lastfm/lastfm.d';
 
-module.exports = {
+const LastFmTestData: LastFmApiResponse = {
 	recenttracks: {
 		track: [
 			{
@@ -39,3 +40,5 @@ module.exports = {
 		],
 	},
 };
+
+export default LastFmTestData;

tsconfig.json

@@ -118,8 +118,7 @@
   ],
   "exclude": [
     "node_modules",
-    "**/*.interface.js",
-    "**/*.type.js",
+    "**/*.d.ts",
     "**/*.test.ts",
     "**/*.test.tsx"
   ]