{siteConfig.tagline}
diff --git a/src/pages/showcase/_components/Card.tsx b/src/pages/showcase/_components/Card.tsx new file mode 100644 index 00000000..c7396790 --- /dev/null +++ b/src/pages/showcase/_components/Card.tsx @@ -0,0 +1,112 @@ +import React from 'react'; + +import Image from '@theme/IdealImage'; + +import { Showcase } from '../../../utils/apiTypes'; +import { mapUrl } from '../../../utils/map'; +import { CardTags } from './CardTags'; + +export interface CardProps { + network: Showcase; +} + +export const Card = React.memo(({ network }: CardProps) => ( + +)); + +export const PlaceholderCard = (): JSX.Element => ( + +); diff --git a/src/pages/showcase/_components/CardTags.tsx b/src/pages/showcase/_components/CardTags.tsx new file mode 100644 index 00000000..4d444f95 --- /dev/null +++ b/src/pages/showcase/_components/CardTags.tsx @@ -0,0 +1,29 @@ +import React from 'react'; + +import { ShowcaseTag } from '../../../utils/apiTypes'; + +export interface CardTagsProps { + tags: ShowcaseTag[]; +} + +export const CardTags = ({ tags }: CardTagsProps) => { + return ( +
+ {tags.map(({ color, label }, index) => {
+ return (
+
+ {label}
+
+ );
+ })}
+
+ );
+};
diff --git a/src/pages/showcase/_components/Filters.tsx b/src/pages/showcase/_components/Filters.tsx
new file mode 100644
index 00000000..1e6c53da
--- /dev/null
+++ b/src/pages/showcase/_components/Filters.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+
+import { FiHeart } from 'react-icons/fi';
+import useSWR from 'swr';
+
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { fetcher } from '@site/src/utils/swr';
+
+import { ShowcaseTag } from '../../../utils/apiTypes';
+// import { TagList, Tags } from '../../../utils/showcase';
+import { PlaceholderTagSelect, TagSelect } from './TagSelect';
+
+export const Filters = (): JSX.Element => {
+ const { siteConfig } = useDocusaurusContext();
+
+ const { data, error } = useSWR-
+ {data.map((tag, i) => {
+ const { label, description, color } = tag;
+ const id = `showcase_checkbox_id_${tag};`;
+
+ return (
+
+
+
+ );
+ })}
+
+ {data && !error ? (
+
+ );
+};
+
+export const PlaceholderNetwork = (): JSX.Element => {
+ return (
+
+
+ ) : (
+ {data.title}
+{data.summary}
+ {githubData && ( +
+ 
+
+ )}
+
+
+ {githubData.name}
+ {githubData.bio}
+ {data.body}
+
+
+
+
+
+ Bill of Materials
+
+ {data.materials?.map((material, index) => (
+
+ ))}
+
+
+ {error && (
+
+ )}
+
+
+ )}
+ {!data && 768 ? "row" : "column",
+ gap: "2rem",
+ }}
+ >
+
+ );
+};
diff --git a/src/pages/showcase/_components/NetworkSection.tsx b/src/pages/showcase/_components/NetworkSection.tsx
new file mode 100644
index 00000000..88b148a7
--- /dev/null
+++ b/src/pages/showcase/_components/NetworkSection.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { Showcase } from '../../../utils/apiTypes';
+import { Card, PlaceholderCard } from './Card';
+
+interface NetworkSectionProps {
+ title: string;
+ icon?: JSX.Element;
+ iconColor?: string;
+ networks?: Showcase[];
+}
+
+export const NetworkSection = ({
+ title,
+ icon,
+ iconColor,
+ networks,
+}: NetworkSectionProps): JSX.Element => {
+ return (
+ 768 ? "60%" : "100%",
+ }}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/pages/showcase/_components/Networks.tsx b/src/pages/showcase/_components/Networks.tsx
new file mode 100644
index 00000000..e278e258
--- /dev/null
+++ b/src/pages/showcase/_components/Networks.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { FiHeart, FiSearch } from 'react-icons/fi';
+import JSONPretty from 'react-json-pretty';
+import useSWR from 'swr';
+
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useSelectedTags } from '@site/src/hooks/useSelectedTags';
+
+import { useFilteredNetworks } from '../../../hooks/useFilteredNetworks';
+import { Showcase } from '../../../utils/apiTypes';
+import { fetcher } from '../../../utils/swr';
+import { NetworkSection } from './NetworkSection';
+
+export const Networks = (): JSX.Element => {
+ const { siteConfig } = useDocusaurusContext();
+
+ const { data, error } = useSWR
+
+ {title}
+ {icon && ( + + {icon} + + )} +-
+ {networks ? (
+ <>
+ {networks.map((network) => (
+
No result
} + + ) : ( +
+
+ )}
+
+
+ )}
+
+
+
+
+
+);
diff --git a/website/src/pages/showcase/index.tsx b/src/pages/showcase/index.tsx
similarity index 100%
rename from website/src/pages/showcase/index.tsx
rename to src/pages/showcase/index.tsx
diff --git a/src/utils/apiTypes.ts b/src/utils/apiTypes.ts
new file mode 100644
index 00000000..157d2cac
--- /dev/null
+++ b/src/utils/apiTypes.ts
@@ -0,0 +1,50 @@
+export interface Showcase {
+ id: string;
+ title: string;
+ summary: string;
+ body: string;
+ createdAt: Date;
+ updatedAt: Date;
+
+ tags: ShowcaseTag[];
+ nodes?: Node[];
+ materials?: Material[];
+ author?: Author;
+ authorId?: string;
+}
+
+export interface ShowcaseTag {
+ id: string;
+ label: string;
+ description: string;
+ color: string;
+
+ showcases?: Showcase[];
+}
+
+export interface Node {
+ id: string;
+ latitude: string;
+ longitude: string;
+
+ showcase?: Showcase;
+ showcaseId?: String;
+}
+
+export interface Material {
+ id: string;
+ name: string;
+ details: string;
+ image: string;
+ url: string;
+
+ showcases?: Showcase[];
+}
+
+export interface Author {
+ id: string;
+ githubUsername: string;
+ bio: string;
+
+ showcase?: Showcase[];
+}
diff --git a/website/src/utils/github.ts b/src/utils/github.ts
similarity index 70%
rename from website/src/utils/github.ts
rename to src/utils/github.ts
index 253fa4b1..b4cbb6af 100644
--- a/website/src/utils/github.ts
+++ b/src/utils/github.ts
@@ -1,3 +1,38 @@
+export interface User {
+ login: string;
+ id: number;
+ node_id: string;
+ avatar_url: string;
+ gravatar_id: string;
+ url: string;
+ html_url: string;
+ followers_url: string;
+ following_url: string;
+ gists_url: string;
+ starred_url: string;
+ subscriptions_url: string;
+ organizations_url: string;
+ repos_url: string;
+ events_url: string;
+ received_events_url: string;
+ type: string;
+ site_admin: boolean;
+ name: string;
+ company: string | null;
+ blog: string;
+ location: string;
+ email: string | null;
+ hireable: string | null;
+ bio: string | null;
+ twitter_username: string | null;
+ public_repos: number;
+ public_gists: number;
+ followers: number;
+ following: number;
+ created_at: string;
+ updated_at: string;
+}
+
export interface Author {
login: string;
id: number;
diff --git a/src/utils/map.ts b/src/utils/map.ts
new file mode 100644
index 00000000..7d212a88
--- /dev/null
+++ b/src/utils/map.ts
@@ -0,0 +1,13 @@
+import { Node } from './apiTypes.js';
+
+export const mapUrl = (nodes: Node[]): string => {
+ const width = 900;
+ const height = 400;
+ const access_token =
+ "pk.eyJ1Ijoic2FjaGF3IiwiYSI6ImNrNW9meXozZjBsdW0zbHBjM2FnNnV6cmsifQ.3E4n8eFGD9ZOFo-XDVeZnQ";
+ const nodeCoords = nodes.map(
+ ({ latitude, longitude }) => `pin-l+67ea94(${longitude},${latitude})`
+ );
+
+ return `https://api.mapbox.com/styles/v1/mapbox/satellite-v9/static/${nodeCoords}/auto/${width}x${height}@2x?access_token=${access_token}`;
+};
diff --git a/src/utils/showcase.ts b/src/utils/showcase.ts
new file mode 100644
index 00000000..a337f830
--- /dev/null
+++ b/src/utils/showcase.ts
@@ -0,0 +1,23 @@
+export const sortBy = -
- {tagObjectsSorted.map(({ color, description, label }, index) => {
- return (
-
- - {label.toLowerCase()} - - - ); - })} -
-
- {TagList.map((tag, i) => {
- const { label, description, color } = Tags[tag];
- const id = `showcase_checkbox_id_${tag};`;
-
- return (
-
-
-
- );
- })}
-
-
- ) : (
- {metadata.title}
-{metadata.description}
-
- 
-
-
- {networkWriteup.body.map((segment, index) => (
-
-
- {networkWriteup.author.name}
- {networkWriteup.author.about}
-
-
- ))}
-
- {segment.heading}
-{segment.body}
-
-
-
-
- Bill of Materials
-
- {networkWriteup.bom.map((material, index) => (
-
- ))}
-
-
-
- );
-};
diff --git a/website/src/pages/showcase/_components/Networks.tsx b/website/src/pages/showcase/_components/Networks.tsx
deleted file mode 100644
index 02d1bd10..00000000
--- a/website/src/pages/showcase/_components/Networks.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import React from 'react';
-
-import { FiHeart, FiSearch } from 'react-icons/fi';
-
-import { useFilteredNetworks } from '../../../hooks/useFilteredNetworks';
-import { useSelectedTags } from '../../../hooks/useSelectedTags';
-import { ShowcaseNetwork, sortedNetworks } from '../../../utils/showcase';
-import { Card } from './Card';
-
-interface NetworkSectionProps {
- title: string;
- icon?: JSX.Element;
- iconColor?: string;
- networks: ShowcaseNetwork[];
-}
-
-const NetworkSection = ({
- title,
- icon,
- iconColor,
- networks,
-}: NetworkSectionProps): JSX.Element => {
- return (
- Network not found
-
-
- );
-};
-
-export const Networks = (): JSX.Element => {
- const [sorted, setSorted] = React.useState
-
- {title}
- {icon && ( - - {icon} - - )} --
- {networks.map((network) => (
-