mirror of
https://github.com/meshtastic/meshtastic.git
synced 2024-12-26 22:19:46 -08:00
Showcase Placeholder & Clean Footer
This commit is contained in:
Sacha Weatherstone
parent
1fa41e7d52
commit
538d8593c9
|
|
@ -63,48 +63,6 @@ const config = {
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
footer: {
|
footer: {
|
||||||
style: "dark",
|
|
||||||
links: [
|
|
||||||
{
|
|
||||||
title: "Docs",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: "Get Started",
|
|
||||||
to: "docs/getting-started",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Showcase",
|
|
||||||
to: "showcase",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Community",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: "Forum",
|
|
||||||
href: "https://meshtastic.discourse.group",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Discord",
|
|
||||||
href: "https://discord.gg/UQJ5QuM7vq",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "More",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: "GitHub",
|
|
||||||
href: "https://github.com/meshtastic/meshtastic",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Legal",
|
|
||||||
to: "docs/legal",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
copyright: `<a href="https://vercel.com/?utm_source=meshtastic&utm_campaign=oss" style="color: white">Powered by ▲ Vercel</a> | Meshtastic® trademark is a registered trademark belonging to Geeksville Industries LLC`,
|
copyright: `<a href="https://vercel.com/?utm_source=meshtastic&utm_campaign=oss" style="color: white">Powered by ▲ Vercel</a> | Meshtastic® trademark is a registered trademark belonging to Geeksville Industries LLC`,
|
||||||
},
|
},
|
||||||
algolia: {
|
algolia: {
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,9 @@ export interface CardProps {
|
||||||
export const Card = React.memo(({ network }: CardProps) => (
|
export const Card = React.memo(({ network }: CardProps) => (
|
||||||
<div className="card">
|
<div className="card">
|
||||||
<div className="card__image">
|
<div className="card__image">
|
||||||
<Image img={mapUrl(network.nodes ?? [])} alt={network.title} />
|
<div style={{ height: "140px" }}>
|
||||||
|
<Image img={mapUrl(network.nodes ?? [])} alt={network.title} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="card__body">
|
<div className="card__body">
|
||||||
<h4>{network.title}</h4>
|
<h4>{network.title}</h4>
|
||||||
|
|
@ -43,7 +45,7 @@ export const PlaceholderCard = (): JSX.Element => (
|
||||||
<div className="card__image">
|
<div className="card__image">
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
height: "150px",
|
height: "140px",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -82,7 +84,20 @@ export const PlaceholderCard = (): JSX.Element => (
|
||||||
>
|
>
|
||||||
|
|
||||||
</a>
|
</a>
|
||||||
<div>
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
gap: "0.5rem",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: "4rem",
|
||||||
|
height: "1.5rem",
|
||||||
|
borderRadius: "0.4rem",
|
||||||
|
backgroundColor: "gray",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
width: "4rem",
|
width: "4rem",
|
||||||
|
|
|
||||||
|
|
@ -25,99 +25,298 @@ export const Network = ({ id }: NetworkProps): JSX.Element => {
|
||||||
fetcher
|
fetcher
|
||||||
).data;
|
).data;
|
||||||
|
|
||||||
return data && !error ? (
|
return true ? (
|
||||||
<div className="container">
|
<PlaceholderNetwork />
|
||||||
<h1>{data.title}</h1>
|
) : (
|
||||||
<p>{data.summary}</p>
|
<div>
|
||||||
{githubData && (
|
<a className="button button--outline button--secondary" href="/showcase">
|
||||||
<div className="avatar">
|
Back
|
||||||
<img
|
</a>
|
||||||
src={githubData.avatar_url}
|
|
||||||
alt={githubData.name}
|
{data && !error ? (
|
||||||
className="avatar__photo"
|
<div className="container">
|
||||||
/>
|
<h1>{data.title}</h1>
|
||||||
<div className="avatar__intro">
|
<p>{data.summary}</p>
|
||||||
<div className="avatar__name">{githubData.name}</div>
|
{githubData && (
|
||||||
<div className="avatar__subtitle">{githubData.bio}</div>
|
<div className="avatar">
|
||||||
|
<img
|
||||||
|
src={githubData.avatar_url}
|
||||||
|
alt={githubData.name}
|
||||||
|
className="avatar__photo"
|
||||||
|
/>
|
||||||
|
<div className="avatar__intro">
|
||||||
|
<div className="avatar__name">{githubData.name}</div>
|
||||||
|
<div className="avatar__subtitle">{githubData.bio}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="markdown">{data.body}</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="card"
|
||||||
|
style={{
|
||||||
|
marginLeft: "auto",
|
||||||
|
marginRight: "auto",
|
||||||
|
maxWidth: "900px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="card__header"
|
||||||
|
style={{
|
||||||
|
margin: "8px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h2>Bill of Materials</h2>
|
||||||
|
</div>
|
||||||
|
<div className="card__body">
|
||||||
|
{data.materials?.map((material, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
style={{
|
||||||
|
borderTop: "2px solid gray",
|
||||||
|
display: "flex",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: "4rem",
|
||||||
|
display: "flex",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={material.image}
|
||||||
|
height="auto"
|
||||||
|
width="100%"
|
||||||
|
style={{
|
||||||
|
margin: "auto",
|
||||||
|
padding: "4px",
|
||||||
|
display: "block",
|
||||||
|
maxWidth: "60px",
|
||||||
|
maxHeight: "60px",
|
||||||
|
width: "auto",
|
||||||
|
height: "auto",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="avatar__intro">
|
||||||
|
<div className="avatar__name">{material.name}</div>
|
||||||
|
<small className="avatar__subtitle">
|
||||||
|
{material.details}
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
href={material.url}
|
||||||
|
className="button button--outline button--secondary"
|
||||||
|
style={{
|
||||||
|
marginTop: "auto",
|
||||||
|
marginBottom: "auto",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
View
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
{error && (
|
||||||
|
<div>
|
||||||
|
<JSONPretty data={error} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!data && <div>Loading...</div>}
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="markdown">{data.body}</div>
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const PlaceholderNetwork = (): JSX.Element => {
|
||||||
|
return (
|
||||||
|
<div className="container" style={{ display: "flex", gap: "2rem" }}>
|
||||||
<div
|
<div
|
||||||
className="card"
|
|
||||||
style={{
|
style={{
|
||||||
marginLeft: "auto",
|
width: "60%",
|
||||||
marginRight: "auto",
|
|
||||||
maxWidth: "900px",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="card__header"
|
className="card"
|
||||||
style={{
|
style={{
|
||||||
margin: "8px",
|
width: "100%",
|
||||||
|
animation: "pulse 2s infinite",
|
||||||
|
transform: "scale(1)",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: "2rem",
|
||||||
|
padding: "2rem",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<h2>Bill of Materials</h2>
|
<div
|
||||||
</div>
|
style={{
|
||||||
<div className="card__body">
|
borderRadius: "0.4rem",
|
||||||
{data.materials?.map((material, index) => (
|
backgroundColor: "gray",
|
||||||
|
height: "4rem",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
borderRadius: "0.4rem",
|
||||||
|
backgroundColor: "gray",
|
||||||
|
height: "12rem",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div style={{ display: "flex", gap: "1rem" }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
borderRadius: "999px",
|
||||||
|
backgroundColor: "gray",
|
||||||
|
height: "4rem",
|
||||||
|
width: "4rem",
|
||||||
|
minWidth: "4rem",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
<div
|
<div
|
||||||
key={index}
|
|
||||||
style={{
|
style={{
|
||||||
borderTop: "2px solid gray",
|
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: "1rem",
|
||||||
|
width: "100%",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
width: "4rem",
|
width: "100%",
|
||||||
display: "flex",
|
borderRadius: "0.4rem",
|
||||||
|
backgroundColor: "gray",
|
||||||
|
height: "1rem",
|
||||||
}}
|
}}
|
||||||
>
|
/>
|
||||||
<img
|
<div
|
||||||
src={material.image}
|
|
||||||
height="auto"
|
|
||||||
width="100%"
|
|
||||||
style={{
|
|
||||||
margin: "auto",
|
|
||||||
padding: "4px",
|
|
||||||
display: "block",
|
|
||||||
maxWidth: "60px",
|
|
||||||
maxHeight: "60px",
|
|
||||||
width: "auto",
|
|
||||||
height: "auto",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="avatar__intro">
|
|
||||||
<div className="avatar__name">{material.name}</div>
|
|
||||||
<small className="avatar__subtitle">{material.details}</small>
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
target="_blank"
|
|
||||||
href={material.url}
|
|
||||||
className="button button--outline button--secondary"
|
|
||||||
style={{
|
style={{
|
||||||
marginTop: "auto",
|
width: "100%",
|
||||||
marginBottom: "auto",
|
borderRadius: "0.4rem",
|
||||||
|
backgroundColor: "gray",
|
||||||
|
height: "2rem",
|
||||||
}}
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: "40%",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="card"
|
||||||
|
style={{
|
||||||
|
width: "100%",
|
||||||
|
animation: "pulse 2s infinite",
|
||||||
|
transform: "scale(1)",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: "2rem",
|
||||||
|
padding: "2rem",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
borderRadius: "0.4rem",
|
||||||
|
backgroundColor: "gray",
|
||||||
|
height: "12rem",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
borderRadius: "0.4rem",
|
||||||
|
backgroundColor: "gray",
|
||||||
|
height: "2rem",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div style={{ display: "flex", gap: "0.5rem" }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: "7rem",
|
||||||
|
height: "1.8rem",
|
||||||
|
borderRadius: "0.4rem",
|
||||||
|
backgroundColor: "gray",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: "7rem",
|
||||||
|
height: "1.8rem",
|
||||||
|
borderRadius: "0.4rem",
|
||||||
|
backgroundColor: "gray",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: "7rem",
|
||||||
|
height: "1.8rem",
|
||||||
|
borderRadius: "0.4rem",
|
||||||
|
backgroundColor: "gray",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
|
||||||
|
>
|
||||||
|
<div style={{ display: "flex", gap: "1rem" }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
borderRadius: "0.4rem",
|
||||||
|
backgroundColor: "gray",
|
||||||
|
height: "2.5rem",
|
||||||
|
width: "20%",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
borderRadius: "0.4rem",
|
||||||
|
backgroundColor: "gray",
|
||||||
|
height: "2.5rem",
|
||||||
|
width: "60%",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
className="button disabled button--primary button--block"
|
||||||
|
style={{ width: "20%" }}
|
||||||
>
|
>
|
||||||
View
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
))}
|
<div style={{ display: "flex", gap: "1rem" }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
borderRadius: "0.4rem",
|
||||||
|
backgroundColor: "gray",
|
||||||
|
height: "2.5rem",
|
||||||
|
width: "20%",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
borderRadius: "0.4rem",
|
||||||
|
backgroundColor: "gray",
|
||||||
|
height: "2.5rem",
|
||||||
|
width: "60%",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
className="button disabled button--primary button--block"
|
||||||
|
style={{ width: "20%" }}
|
||||||
|
>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
<div>
|
|
||||||
{error && (
|
|
||||||
<div>
|
|
||||||
<JSONPretty data={error} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{!data && <div>Loading...</div>}
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue