mudhorn/meshtastic
1
0
Fork 0
mirror of https://github.com/meshtastic/meshtastic.git synced 2025-03-05 21:00:08 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Showcase Placeholder & Clean Footer

Browse source
This commit is contained in:
Sacha Weatherstone 2021-12-24 13:17:40 +11:00
parent 1fa41e7d52
commit 538d8593c9
3 changed files with 283 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
docusaurus.config.js
View file

@ -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: {

19
src/pages/showcase/_components/Card.tsx
View file

@ -13,8 +13,10 @@ 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">
<div style={{ height: "140px" }}>
<Image img={mapUrl(network.nodes ?? [])} alt={network.title} /> <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>
<small>{network.summary}</small> <small>{network.summary}</small>
@ -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 => (
> >
&nbsp; &nbsp;
</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",

203
src/pages/showcase/_components/Network.tsx
View file

@ -25,7 +25,15 @@ export const Network = ({ id }: NetworkProps): JSX.Element => {
fetcher fetcher
).data; ).data;
return data && !error ? ( return true ? (
<PlaceholderNetwork />
) : (
<div>
<a className="button button--outline button--secondary" href="/showcase">
Back
</a>
{data && !error ? (
<div className="container"> <div className="container">
<h1>{data.title}</h1> <h1>{data.title}</h1>
<p>{data.summary}</p> <p>{data.summary}</p>
@ -92,7 +100,9 @@ export const Network = ({ id }: NetworkProps): JSX.Element => {
</div> </div>
<div className="avatar__intro"> <div className="avatar__intro">
<div className="avatar__name">{material.name}</div> <div className="avatar__name">{material.name}</div>
<small className="avatar__subtitle">{material.details}</small> <small className="avatar__subtitle">
{material.details}
</small>
</div> </div>
<a <a
target="_blank" target="_blank"
@ -119,5 +129,194 @@ export const Network = ({ id }: NetworkProps): JSX.Element => {
)} )}
{!data && <div>Loading...</div>} {!data && <div>Loading...</div>}
</div> </div>
)}
</div>
);
};
export const PlaceholderNetwork = (): JSX.Element => {
return (
<div className="container" style={{ display: "flex", gap: "2rem" }}>
<div
style={{
width: "60%",
}}
>
<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: "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
style={{
display: "flex",
flexDirection: "column",
gap: "1rem",
width: "100%",
}}
>
<div
style={{
width: "100%",
borderRadius: "0.4rem",
backgroundColor: "gray",
height: "1rem",
}}
/>
<div
style={{
width: "100%",
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%" }}
>
&nbsp;
</a>
</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%" }}
>
&nbsp;
</a>
</div>
</div>
</div>
</div>
</div>
); );
}; };