+
{
+ currentTarget.onerror = null; // prevents looping
+ currentTarget.src = "/default.png";
+ }}
loading="lazy"
/>
- {person.tags.map(tag => (
-
+
+
))}
-
-
-
+
+
+
);
}
Person.propTypes = {
- currentTag: PropTypes.string,
person: PropTypes.shape({
github: PropTypes.string,
name: PropTypes.string,
@@ -112,108 +121,22 @@ Person.propTypes = {
tags: PropTypes.arrayOf(PropTypes.string),
country: PropTypes.string,
computer: PropTypes.oneOf(['apple', 'windows', 'linux']),
- phone: PropTypes.oneOf(['iphone', 'android']),
+ phone: PropTypes.oneOf(['iphone', 'android', 'windowsphone', 'flipphone']),
twitter(props, propName, componentName) {
if (!/^@?(\w){1,15}$/.test(props[propName])) {
return new Error(
`Invalid prop \`${propName}\` supplied to` +
- ` \`${componentName}\`. This isn't a legit twitter handle.`
+ ` \`${componentName}\`. This isn't a legit Twitter handle.`
+ );
+ }
+ },
+ mastodon(props, propName, componentName) {
+ if (!/^@(\w){1,30}@(\w)+\.(\w)+$/.test(props[propName])) {
+ return new Error(
+ `Invalid prop \`${propName}\` supplied to` +
+ ` \`${componentName}\`. This isn't a legit Mastodon handle.`
);
}
},
}),
};
-
-// Component Styles
-const PersonWrapper = styled.div`
- border: 1px solid var(--vape);
- border-radius: 5.34334px;
- box-shadow: 10px -10px 0 var(--blue2);
- display: grid;
- grid-template-rows: 1fr auto auto;
-`;
-
-const PersonInner = styled.div`
- padding: 2rem;
- h3 {
- margin: 0;
- a:visited {
- color: var(--purple);
- }
- }
- header {
- display: grid;
- grid-template-rows: auto auto;
- grid-template-columns: auto 1fr;
- grid-gap: 0 1rem;
- @media all and (max-width: 400px) {
- grid-template-columns: 1fr;
- }
- img {
- grid-row: 1 / -1;
- background: var(--lightblue);
- font-size: 1rem;
- }
- .displayLink {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- text-decoration: none;
- color: var(--vape);
- letter-spacing: 1px;
- font-size: 1.2rem;
- text-overflow: ellipsis;
- max-width: 100%;
- overflow: hidden;
- :hover,
- :visited {
- color: var(--pink);
- }
- }
- }
-`;
-
-const PersonDeets = styled.div`
- display: flex;
- border-top: 1px solid var(--vape);
- > * {
- flex: 1;
- border-left: 1px solid var(--vape);
- text-align: center;
- padding: 1rem;
- display: grid;
- align-items: center;
- justify-content: center;
- grid-template-columns: auto auto;
- &:first-child {
- border-left: 0;
- }
- }
- a {
- color: var(--vape);
- }
- .country {
- font-size: 3rem;
- padding-top: 2rem;
- }
- .phone {
- padding: 0;
- }
- @media all and (max-width: 400px) {
- display: grid;
- grid-template-columns: 1fr 1fr;
- > *:nth-child(1),
- > *:nth-child(2) {
- /* lol */
- border-bottom: 1px solid var(--vape);
- }
- }
-`;
-
-const TwitterHandle = styled.span`
- font-size: 1.24323423426928098420394802rem;
- .at {
- color: var(--yellow);
- margin-right: 2px;
- }
-`;
diff --git a/src/components/Topics.js b/src/components/Topics.js
index d420e2a7..5bab9f08 100644
--- a/src/components/Topics.js
+++ b/src/components/Topics.js
@@ -1,123 +1,52 @@
-import React, { useContext } from 'react';
-import styled from 'styled-components';
-import FilterContext from '../context/FilterContext';
+import { Link, useParams, useRouteLoaderData } from '@remix-run/react';
import * as icons from '../util/icons';
export default function Topics() {
- const { countries, tags, devices, currentTag, setCurrentTag } = useContext(
- FilterContext
- );
+ const { tags, countries, devices } = useRouteLoaderData("root");
+ const params = useParams();
+ const currentTag = params.tag || 'all';
return (
- {person.name} - {' '} + {" "} {person.emoji}
{url.host} - {url.pathname.replace(/\/$/, '')} + {url.pathname.replace(/\/$/, "")}{person.description}
--
+ {person.tags.map((tag) => (
+
- {tag} -
{person.country}
@@ -85,24 +81,37 @@ export default function Person({ person, currentTag }) {
)}
{person.twitter && (
-
+
)}
-
-
+
+ {/* If they have a mastodon, and no twitter, show that */}
+ {person.mastodon && !person.twitter && (
+
+ )}
+
+ - /uses + /uses
A list of /uses pages detailing developer setups, gear,
software and configs.
+ {people.map(person => (
+
+