From 3781c2c154958595626070402aef5b111676a4f9 Mon Sep 17 00:00:00 2001 From: Paul W Date: Wed, 28 Sep 2022 00:01:03 -0400 Subject: [PATCH] Create card component --- components/github-profile.tsx | 48 ++++++++++++++++++++++++++++ package-lock.json | 9 ++---- package.json | 3 +- pages/about.tsx | 52 +++--------------------------- styles/about.module.css | 45 -------------------------- styles/github-profile.module.css | 55 ++++++++++++++++++++++++++++++++ styles/global.css | 5 +++ 7 files changed, 118 insertions(+), 99 deletions(-) create mode 100644 components/github-profile.tsx delete mode 100644 styles/about.module.css create mode 100644 styles/github-profile.module.css diff --git a/components/github-profile.tsx b/components/github-profile.tsx new file mode 100644 index 0000000..b5e7f2c --- /dev/null +++ b/components/github-profile.tsx @@ -0,0 +1,48 @@ +import Image from 'next/image'; +import { parse as URIparse } from 'uri-js'; +import date from '../util/date'; +import style from '../styles/github-profile.module.css'; + +function CardRow({label, children}: {label: string, children: JSX.Element | string}) { + return !children? <> : ( +
+ {label} + {children} +
+ ); +} +function GitHubProfile({user}: any) { +return (<> +
+
+ {`${user.login}'s +
+
+ {user.name} + {user.login} + {user.html_url} + {user.blog && + {user.blog} + } + {user.location} + {user.bio} + {user.created_at ? date.prettyPrint(user.created_at) : ''} + {user.updated_at && {user.updated_at ? date.prettyPrint(user.updated_at) : ''}} + {user.twitter_username && + + @{user.twitter_username} + + } +
+
+ ); +} + +export default GitHubProfile; diff --git a/package-lock.json b/package-lock.json index 2e1e722..965c68c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,8 @@ "react-dom": "^18.2.0", "react-markdown": "^8.0.3", "react-syntax-highlighter": "^15.5.0", - "remark-gfm": "^3.0.1" + "remark-gfm": "^3.0.1", + "uri-js": "^4.4.1" }, "devDependencies": { "@svgr/webpack": "^6.3.1", @@ -6378,7 +6379,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==", - "dev": true, "engines": { "node": ">=6" } @@ -7345,7 +7345,6 @@ "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==", - "dev": true, "dependencies": { "punycode": "^2.1.0" } @@ -11833,8 +11832,7 @@ "punycode": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", - "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==", - "dev": true + "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==" }, "queue-microtask": { "version": "1.2.3", @@ -12510,7 +12508,6 @@ "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==", - "dev": true, "requires": { "punycode": "^2.1.0" } diff --git a/package.json b/package.json index ddb4da3..375627f 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,8 @@ "react-dom": "^18.2.0", "react-markdown": "^8.0.3", "react-syntax-highlighter": "^15.5.0", - "remark-gfm": "^3.0.1" + "remark-gfm": "^3.0.1", + "uri-js": "^4.4.1" }, "devDependencies": { "@svgr/webpack": "^6.3.1", diff --git a/pages/about.tsx b/pages/about.tsx index 042e657..e590f04 100644 --- a/pages/about.tsx +++ b/pages/about.tsx @@ -1,11 +1,9 @@ import ReactMarkdown from 'react-markdown'; -import Image from 'next/image'; import ReadmeMd from '../README.md'; import License from '../LICENSE.txt'; import Layout from '../components/layout'; -import style from '../styles/about.module.css'; -import date from '../util/date'; +import GitHubProfile from '../components/github-profile'; function AboutPage({usr}: any) { return ( @@ -14,52 +12,12 @@ function AboutPage({usr}: any) {

This is a personal website written by @LambdaPaul.

Why did I write this? I do not really know, at least the content I put here. - I guess I wanted a place on the web where I wanted to put everything I think is worth looking at some point in the future. + I wanted a place on the web where I wanted to put everything I think is worth looking at some point in the future. It seems wise to have things up here even though they may not be worthwhile, as many things ultimately are not.

-

Got any questions, concerns, or issues? Contact me via my email: lambdapaul [at] pm [dot] me.

+

Got any questions, concerns, or issues? Contact me via email: lambdapaul [at] pm [dot] me.

- {/* make this a pretty component with more info */}
-
GitHub Profile
-
-
- {`${usr.login}'s -
-
-
- Name - {usr.login} -
-
- URL - - {usr.html_url} - -
-
- Location - {usr.location} -
-
- About - {usr.bio} -
-
- Created - {date.prettyPrint(usr.created_at)} -
-
- Last Updated - {date.prettyPrint(usr.updated_at)} -
-
- Twitter - - @{usr.twitter_username} - -
-
-
+
@@ -74,7 +32,7 @@ function AboutPage({usr}: any) {

LICENSE

- 
{License}
+ 
{License}
); diff --git a/styles/about.module.css b/styles/about.module.css deleted file mode 100644 index b0945f9..0000000 --- a/styles/about.module.css +++ /dev/null @@ -1,45 +0,0 @@ -.license { - background-color: #222222; - padding: 1rem; -} - -.githubCard { - display: flex; -} - -.githubAvatarContainer { - flex: 0 0; - padding: 0.5rem; -} - -.githubCardTable { - flex: 1 1; - padding: 0.5rem; -} - -.githubCardRow { - display: flex; -} - - -.githubCardLabel { - flex: .2 1; - font-size: 1rem; - padding: .5rem; -} - -.githubCardLabel:after { - content: ':'; -} - -.githubCardValue { - flex: 1 1; - background-color: #222222; - font-size: 1rem; - border-top: 1px solid; - padding: .5rem; -} - -.githubCardRow:first-of-type .githubCardValue { - border-top: none; -} \ No newline at end of file diff --git a/styles/github-profile.module.css b/styles/github-profile.module.css new file mode 100644 index 0000000..ab199ef --- /dev/null +++ b/styles/github-profile.module.css @@ -0,0 +1,55 @@ +.avatarContainer { + padding: 0.5rem; + text-align: center; + overflow: hidden; +} + +.avatarContainer img { + border-radius: 1rem; +} + +.cardLabel { + display: block; + font-weight: 700; + font-size: 1rem; + padding: .5rem; +} + +.cardLabel:after { + content: ':'; +} + +.cardValue { + background-color: #303436; + font-size: 1rem; + padding: 0.25rem 1rem; + margin: 0.25rem 0; + border: none; + display: block; + border-radius: 0.5rem; +} + + +@media screen and (min-width: 800px) { + .card { + display: flex; + } + + .cardTable { + flex: 1 1; + padding: 0.5rem; + align-items: stretch; + } + + .cardRow { + display: flex; + } + + .cardLabel { + flex: .2 1; + } + + .cardValue { + flex: 1 1; + } +} \ No newline at end of file diff --git a/styles/global.css b/styles/global.css index 045351d..6ef13ef 100644 --- a/styles/global.css +++ b/styles/global.css @@ -365,4 +365,9 @@ code { .monospace { font-family: 'Hack', 'Source Code Pro', Consolas, monospace; +} + +.license { + background-color: #222222; + padding: 1rem; } \ No newline at end of file