mudhorn/meshtastic
1
0
Fork 0
mirror of https://github.com/meshtastic/meshtastic.git synced 2024-12-26 06:04:22 -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: {
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`,
},
algolia: {

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

@ -13,8 +13,10 @@ export interface CardProps {
export const Card = React.memo(({ network }: CardProps) => (
<div className="card">
<div className="card__image">
<div style={{ height: "140px" }}>
<Image img={mapUrl(network.nodes ?? [])} alt={network.title} />
</div>
</div>
<div className="card__body">
<h4>{network.title}</h4>
<small>{network.summary}</small>
@ -43,7 +45,7 @@ export const PlaceholderCard = (): JSX.Element => (
<div className="card__image">
<div
style={{
height: "150px",
height: "140px",
}}
/>
</div>
@ -82,7 +84,20 @@ export const PlaceholderCard = (): JSX.Element => (
>
&nbsp;
</a>
<div>
<div
style={{
display: "flex",
gap: "0.5rem",
}}
>
<div
style={{
width: "4rem",
height: "1.5rem",
borderRadius: "0.4rem",
backgroundColor: "gray",
}}
/>
<div
style={{
width: "4rem",

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

@ -25,7 +25,15 @@ export const Network = ({ id }: NetworkProps): JSX.Element => {
fetcher
).data;
return data && !error ? (
return true ? (
<PlaceholderNetwork />
) : (
<div>
<a className="button button--outline button--secondary" href="/showcase">
Back
</a>
{data && !error ? (
<div className="container">
<h1>{data.title}</h1>
<p>{data.summary}</p>
@ -92,7 +100,9 @@ export const Network = ({ id }: NetworkProps): JSX.Element => {
</div>
<div className="avatar__intro">
<div className="avatar__name">{material.name}</div>
<small className="avatar__subtitle">{material.details}</small>
<small className="avatar__subtitle">
{material.details}
</small>
</div>
<a
target="_blank"
@ -119,5 +129,194 @@ export const Network = ({ id }: NetworkProps): JSX.Element => {
)}
{!data && <div>Loading...</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>
);
};