Skip to content
This repository has been archived by the owner on Jun 17, 2022. It is now read-only.

Commit

Permalink
(www) shutdown message (#1411)
Browse files Browse the repository at this point in the history 
* Add shutdown message

* Fix typo
  • Loading branch information
@ehowey
ehowey authored Oct 16, 2021
1 parent ce0f4a6 commit 148b57b
Show file tree
Hide file tree
Showing 5 changed files with 179 additions and 214 deletions.
243 changes: 86 additions & 157 deletions www/src/components/home/home-hero.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
/** @jsx jsx */
import { jsx, Themed } from "theme-ui"
import { jsx } from "theme-ui"
import { Link } from "gatsby"
import { Button } from "theme-ui"
import { baseColors } from "@theme-ui/preset-tailwind"
import { darken } from "@theme-ui/color"
import { AiOutlineFire } from "react-icons/ai"
// import { AiOutlineFire } from "react-icons/ai"
import { FiBookOpen, FiGithub } from "react-icons/fi"
import GitHubButton from "react-github-btn"
import catalystLogo from "../../../content/assets/catalyst-svg-logo.svg"
Expand Down Expand Up @@ -43,174 +43,103 @@ const HomeHero = () => {
Star
</GitHubButton>
</div>
<img
src={catalystLogo}
alt="Gatsby Theme Catalyst Logo"
sx={{ width: "180px" }}
/>
<h1
sx={{
fontFamily: "heading",
fontWeight: "heading",
textTransform: "uppercase",
textAlign: "center",
fontSize: [5, 6, 7, 8, null],
color: baseColors.gray[8],
mb: 3,
}}
>
Gatsby Theme Catalyst
</h1>
<Themed.inlineCode
sx={{
mb: 0,
px: 2,
bg: baseColors.gray[8],
color: baseColors.gray[1],
wordWrap: "break-word",
textOverflow: "wrap",
overflowWrap: "break-word",
wordBreak: "break-word",
lineHeight: "tight",
}}
>
gatsby new catalyst ehowey/gatsby-starter-catalyst
</Themed.inlineCode>
<Themed.p
sx={{
fonmtSize: 3,
my: 1,
textTransform: "uppercase",
fontWeight: "bold",
}}
>
or
</Themed.p>
<Themed.p
sx={{
mt: 0,
mb: 4,
px: 2,
pb: 1,
bg: baseColors.gray[8],
lineHeight: "tight",
}}
>
<Themed.a
href="https://www.sanity.io/create?template=ehowey%2Fsanity-template-catalyst"
<div sx={{ display: "grid", placeItems: "center" }}>
<img
src={catalystLogo}
alt="Gatsby Theme Catalyst Logo"
sx={{ width: "100px" }}
/>
<h1
sx={{
color: baseColors.gray[1],
fontFamily: "monospace",
fontSize: 1,
fontFamily: "heading",
fontWeight: "heading",
textTransform: "uppercase",
textAlign: "center",
fontSize: 4,
color: baseColors.gray[8],
mb: 3,
}}
>
sanity.io/create?template=ehowey/sanity-template-catalyst
</Themed.a>
</Themed.p>
Gatsby Theme Catalyst
</h1>

<nav sx={{ width: ["100%", "auto", null, null, null] }}>
<ul
sx={{
display: "grid",
gridTemplateColumns: [
"minmax(0, 1fr) minmax(0, 1fr)",
"auto auto auto",
null,
null,
null,
],
gridTemplateRows: ["auto auto", "auto", null, null, null],
gridGap: 3,
maxWidth: "maxContentWidth",
m: 0,
p: 0,
listStyle: "none",
}}
>
<li
sx={{
gridColumn: ["1 / -1", "1 / 2", null, null, null],
grideRow: "1 / 2",
}}
>
<Button
as={Link}
to="/docs/getting-started/"
sx={{
fontSize: 2,
bg: "#e91c21",
color: "white",
boxShadow: "default",
display: "flex",
alignItems: "center",
transition: "all 0.3s ease",
justifyContent: ["center", "start", null, null, null],
":hover, :active, :focus": {
bg: darken("#e91c21", 0.03),
boxShadow: "lg",
},
}}
>
<AiOutlineFire sx={{ mr: 1 }} /> Get Started
</Button>
</li>
<li
<nav sx={{ width: ["100%", "auto", null, null, null] }}>
<ul
sx={{
gridColumn: ["1 / 2", "2 / 3", null, null, null],
gridRow: ["2 / 3", "1 / 2", null, null, null],
display: "grid",
gridTemplateColumns: [
"minmax(0, 1fr) minmax(0, 1fr)",
"auto auto auto",
null,
null,
null,
],
gridTemplateRows: ["auto auto", "auto", null, null, null],
gridGap: 3,
maxWidth: "maxContentWidth",
m: 0,
p: 0,
listStyle: "none",
}}
>
<Button
as={Link}
to="/docs/"
<li
sx={{
fontSize: 2,
bg: "#ffd7d7",
color: "black",
boxShadow: "default",
transition: "all 0.3s ease",
display: "flex",
alignItems: "center",
justifyContent: ["center", "start", null, null, null],
":hover, :active, :focus": {
bg: darken("#ffd7d7", 0.03),
boxShadow: "lg",
},
gridColumn: ["1 / 2", "2 / 3", null, null, null],
gridRow: ["2 / 3", "1 / 2", null, null, null],
}}
>
<FiBookOpen sx={{ mr: 1 }} /> Docs
</Button>
</li>
<li
sx={{
gridColumn: ["2 / 3", "3 / 4", null, null, null],
gridRow: ["2 / 3", "1 / 2", null, null, null],
}}
>
<Button
as="a"
href="https://github.com/ehowey/gatsby-theme-catalyst"
<Button
as={Link}
to="/docs/"
sx={{
fontSize: 2,
bg: "#ffd7d7",
color: "black",
boxShadow: "default",
transition: "all 0.3s ease",
display: "flex",
alignItems: "center",
justifyContent: ["center", "start", null, null, null],
":hover, :active, :focus": {
bg: darken("#ffd7d7", 0.03),
boxShadow: "lg",
},
}}
>
<FiBookOpen sx={{ mr: 1 }} /> Docs
</Button>
</li>
<li
sx={{
fontSize: 2,
bg: "#ffd7d7",
color: "black",
boxShadow: "default",
transition: "all 0.3s ease",
display: "flex",
alignItems: "center",
justifyContent: ["center", "start", null, null, null],
":hover, :active, :focus": {
bg: darken("#ffd7d7", 0.03),
boxShadow: "lg",
},
gridColumn: ["2 / 3", "3 / 4", null, null, null],
gridRow: ["2 / 3", "1 / 2", null, null, null],
}}
>
<FiGithub sx={{ mr: 1 }} />
GitHub
</Button>
</li>
</ul>
</nav>
<Button
as="a"
href="https://github.com/ehowey/gatsby-theme-catalyst"
sx={{
fontSize: 2,
bg: "#ffd7d7",
color: "black",
boxShadow: "default",
transition: "all 0.3s ease",
display: "flex",
alignItems: "center",
justifyContent: ["center", "start", null, null, null],
":hover, :active, :focus": {
bg: darken("#ffd7d7", 0.03),
boxShadow: "lg",
},
}}
>
<FiGithub sx={{ mr: 1 }} />
GitHub
</Button>
</li>
</ul>
</nav>
</div>
</header>
)
}
Expand Down
29 changes: 0 additions & 29 deletions www/src/components/home/home-layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,32 +63,3 @@ const HomeLayout = ({ children }) => {
}

export default HomeLayout

// /** @jsx jsx */
// import { jsx } from "theme-ui"
// import { SkipNavLink, SkipNavContent } from "@reach/skip-nav"
// import GlobalCSS from "../utils/global-css"
// import SiteContainer from "./site-container"
// import AlertBanner from "./alert-banner"
// import Header from "./header"
// import Main from "./main"
// import ContentContainer from "./content-container"
// import Footer from "./footer"

// const SiteLayout = ({ children }) => {
// return (
// <SiteContainer>
// <GlobalCSS />
// <SkipNavLink />
// <AlertBanner />
// <Header />
// <Main>
// <SkipNavContent />
// <ContentContainer>{children}</ContentContainer>
// </Main>
// <Footer />
// </SiteContainer>
// )
// }

// export default SiteLayout
88 changes: 88 additions & 0 deletions www/src/components/home/home-shutdown.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
/** @jsx jsx */
import { jsx, Themed } from "theme-ui"
import { baseColors } from "@theme-ui/preset-tailwind"

const HomeShutdown = () => {
return (
<div>
<Themed.p>
After 2 years and over 2000 commits I have made the difficult decision
to shutdown Gatsby Theme Catalyst. This project will not be migrated to
Gatsby v4.
</Themed.p>
<Themed.p>
You will be able to access the docs indefinetely and I will continue to
respond to any issues on GitHub.
</Themed.p>
<Themed.p>
Before I talk about why, I want to say thank you to everyone who helped
out and contributed to this project it any way. A retweet, a comment, an
issue, or a pull request - they were all appreciated. For those of you I
collaborated with more closely it was exciting and fun to work with
learn from you.
</Themed.p>
<Themed.p>
A few quick notes about why I made this decision. TLDR; I don't think
Gatsby Themes are the best approach for my own freelance work anymore,
however I still rely heavily on Gatsby as a framework.
</Themed.p>
<Themed.ul>
<Themed.li>
<strong>Customization:</strong> I struggled with the themes when
needing to do a really custom piece of code and found myself using
more and more component shadowing to the point it was frustrating to
develop with.
</Themed.li>
<Themed.li>
<strong>Maintainability:</strong> With all of the dependencies tucked
away inside the themes coming back to a project after 6 months or a
year was a daunting task as I didn't have the power to granularly
manage updating dependencies as I needed to.
</Themed.li>
<Themed.li>
<strong>Speed:</strong> Themes are great at the start - you can go
from zero to hero in a matter of minutes but then as projects grew and
got more complex I found myself being slowed down by having to
reference files back inside of the theme. I found it much more
efficient to have all of the components, hooks, and files together in
single repo and not siloed off into themes.
</Themed.li>
<Themed.li>
<strong>Lack of use:</strong> This one didn't matter as much to me,
but no one really uses these themes much as far as I can tell. Given
that now I am also migrating my own freelance work away from the
themes it just isn't worth the time and effort to maintain a complex
project very few people are using.
</Themed.li>
</Themed.ul>
<Themed.p>
If you are currently using these themes I have updated and published a
release that supports Gatsby v3.14 which is the last version of Gatsby
before v4.
</Themed.p>
<Themed.p>
With moderate effort you can reconfigure your site into a traditional
Gatsby site, ejecting from the themes. The main tasks involve copy and
pasting the theme components into your own repo, and merging gatsby-node
as needed. If you are familiar with Gatsby projects this is fairly
straightforward but could be a struggle if you are less familiar with
the internal workings of Gatsby.
</Themed.p>
<Themed.p>I apologize for any frustration this may cause you.</Themed.p>
<Themed.p>
If you get stuck please feel free to reach out to me, and I will do my
best to help. I hope to also have an example repo of what this could
look like available in the near future.
</Themed.p>
<Themed.p>Happy coding!</Themed.p>
<Themed.p>
—
<Themed.a href="https://www.erichowey.dev/" sx={{ fontSize: 2 }}>
Eric Howey
</Themed.a>
</Themed.p>
</div>
)
}

export default HomeShutdown
Loading

0 comments on commit 148b57b

Please sign in to comment.