extern/web-check
1
0
Fork 0
mirror of https://github.com/Lissy93/web-check.git synced 2024-11-25 09:43:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #109 from Lissy93/DOCS/adds-terminal-trove-sponsorship

Browse Source 
DOCS: adds terminal trove sponsorship
This commit is contained in:
Alicia Sykes 2024-03-12 18:50:02 +00:00 committed by GitHub
commit cd3ab4a264
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 115 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
.github/README.md vendored
View File

@ -9,6 +9,22 @@
</p>
---
<p align="center">
<sup>Kindly supported by:</sup><br>
<a href="https://terminaltrove.com/?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh">
<img src="https://i.ibb.co/fqL7Y6N/terminal-trove-normal.png" width="400" alt="Terminal Trove">
<br>
<strong>The $HOME of all things in the terminal.</strong>
</a>
<br>
<a href="https://terminaltrove.com/newsletter?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh">
<sub>Find your next CLI / TUI tool and more at Terminal Trove,</sub>
<br>
<sup>Get updates on new tools on our newsletter.</sup>
</a>
</p>
---
#### Contents

1
src/App.tsx
View File

@ -12,7 +12,6 @@ const Container = Styled.main`
background: ${colors.background};
color: ${colors.textColor};
width: 100vw;
height: 100vh;
margin: 0;
`;

32
src/pages/About.tsx
View File

@ -101,6 +101,18 @@ const Section = styled(StyledCard)`
}
`;
const SponsorshipContainer = styled.div`
display: flex;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
align-items: center;
line-height: 1.5rem;
img {
border-radius: 4px;
}
`;
const makeAnchor = (title: string): string => {
return title.toLowerCase().replace(/[^\w\s]|_/g, "").replace(/\s+/g, "-");
};
@ -121,6 +133,26 @@ const About = (): JSX.Element => {
<p key={index}>{para}</p>
))}
<hr />
<SponsorshipContainer>
<p>
Web-Check is kindly sponsored
by <a href="https://terminaltrove.com/?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh">
Terminal Trove
</a>
<br />
The $HOME of all things in the terminal.
<br />
<small>
<a href="https://terminaltrove.com/newsletter?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh">
Find your next CLI / TUI tool, and get updates to your inbox
</a>
</small>
</p>
<a href="https://terminaltrove.com/?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh">
<img width="300" alt="Terminal Trove" src="https://i.ibb.co/T1KzVmR/terminal-trove-green.png" />
</a>
</SponsorshipContainer>
<hr />
<p>
Web-Check is developed and maintained by <a href="https://aliciasykes.com">Alicia Sykes</a>.
It's licensed under the <a href="https://github.com/Lissy93/web-check/blob/master/LICENSE">MIT license</a>,

70
src/pages/Home.tsx
View File

@ -20,7 +20,7 @@ const HomeContainer = styled.section`
align-items: center;
height: 100%;
font-family: 'PTMono';
padding: 0 1rem;
padding: 1.5rem 1rem 4rem 1rem;
footer {
z-index: 1;
}
@ -34,10 +34,52 @@ const UserInputMain = styled.form`
z-index: 5;
margin: 1rem;
width: calc(100% - 2rem);
max-width: 50rem;
max-width: 60rem;
z-index: 2;
`;
const SponsorCard = styled.div`
background: ${colors.backgroundLighter};
box-shadow: 4px 4px 0px ${colors.bgShadowColor};
border-radius: 8px;
padding: 1rem;
z-index: 5;
margin: 1rem;
width: calc(100% - 2rem);
max-width: 60rem;
z-index: 2;
.inner {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
p {
margin: 0.25rem 0;
}
}
a {
color: ${colors.textColor};
}
img {
border-radius: 0.25rem;
box-shadow: 2px 2px 0px ${colors.fgShadowColor};
transition: box-shadow 0.2s;
margin: 0 auto;
display: block;
width: 200px;
&:hover {
box-shadow: 4px 4px 0px ${colors.fgShadowColor};
}
&:active {
box-shadow: -2px -2px 0px ${colors.fgShadowColor};
}
}
.cta {
font-size: 0.78rem;
a { color: ${colors.primary}; }
}
`;
// const FindIpButton = styled.a`
// margin: 0.5rem;
// cursor: pointer;
@ -55,7 +97,7 @@ const ErrorMessage = styled.p`
const SiteFeaturesWrapper = styled(StyledCard)`
margin: 1rem;
width: calc(100% - 2rem);
max-width: 50rem;
max-width: 60rem;
z-index: 2;
.links {
display: flex;
@ -173,6 +215,28 @@ const Home = (): JSX.Element => {
{ errorMsg && <ErrorMessage>{errorMsg}</ErrorMessage>}
<Button styles="width: calc(100% - 1rem);" size="large" onClick={submit}>Analyze!</Button>
</UserInputMain>
<SponsorCard>
<Heading as="h2" size="small" color={colors.primary}>Sponsored by</Heading>
<div className="inner">
<p>
<a href="https://terminaltrove.com/?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh">
Terminal Trove
</a> - The $HOME of all things in the terminal.
<br />
<span className="cta">
Get updates on the latest CLI/TUI tools via
the <a className="cta" href="https://terminaltrove.com/newsletter?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh">
Terminal Trove newsletter
</a>
</span>
</p>
<a href="https://terminaltrove.com/?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh">
<img width="120" alt="Terminal Trove" src="https://i.ibb.co/NKtYjJ1/terminal-trove-web-check.png" />
</a>
</div>
</SponsorCard>
<SiteFeaturesWrapper>
<div className="features">
<Heading as="h2" size="small" color={colors.primary}>Supported Checks</Heading>