HeadstartWP
-Next.js Framework for WordPress
+Next.js Framework for Headless WordPress
Documentation
+Developer Guide
If you are unsure how to do something with the framework, this is where you should start. diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css index 16cf451f8..854907858 100644 --- a/docs/src/pages/index.module.css +++ b/docs/src/pages/index.module.css @@ -7,11 +7,61 @@ padding: 6rem 0; text-align: center; position: relative; - background-color: var(--c-10up-secondary); + /* No overflow:hidden here - the search dropdown must be able to + extend past the hero. The lattice stays contained because the + ::after box is inset:0 with border-radius:inherit. */ + /* Mirrors the main site's hero: soft lavender wash with the purple + radial from the top right, and the lattice graphic ghosted on the + right (CSS background keeps it inert - no click capture, no + gradient-id collisions). */ + background: + radial-gradient(153.4% 328.78% at 88.61% -33.98%, rgba(163, 107, 163, 0.24) 0%, rgba(163, 107, 163, 0) 53.12%), + #faf8fb; border-radius: 2rem; margin-inline: 1rem; } +.heroBanner::after { + content: ""; + position: absolute; + inset: 0; + border-radius: inherit; + background: url("../../static/img/hero-lattice.svg") no-repeat right -8rem center; + background-size: auto 200%; + opacity: 0.5; + pointer-events: none; +} + +.heroBanner > * { + position: relative; + z-index: 1; +} + +/* The oversized lattice reads great wide, but scales down busy — step the + crop and strength down with the viewport. */ +@media (max-width: 1200px) { + .heroBanner::after { + background-position: right -5rem center; + background-size: auto 160%; + opacity: 0.4; + } +} + +@media (max-width: 996px) { + .heroBanner::after { + background-position: right -4rem center; + background-size: auto 130%; + opacity: 0.25; + } +} + +@media (max-width: 600px) { + .heroBanner::after { + background-size: auto 110%; + opacity: 0.18; + } +} + .heroBanner p { font-size: 1.25rem; } diff --git a/docs/src/pages/philosophy.md b/docs/src/pages/philosophy.md index c06fd74c6..026656b86 100644 --- a/docs/src/pages/philosophy.md +++ b/docs/src/pages/philosophy.md @@ -1,16 +1,16 @@ # Framework Principles -These are the guiding principles for 10up's Headless Framework. +These are the guiding principles for HeadstartWP, Fueled's framework for headless WordPress. ## Solid Foundation -We aren't trying to reinvent the wheel nor do we want to spend a massive amount of resources building a new foundation for our framework. Therefore we decided to pick an existing and solid foundation to power 10up's Headless Framework: [Next.js](https://nextjs.org/). +We aren't trying to reinvent the wheel nor do we want to spend a massive amount of resources building a new foundation for our framework. Therefore we decided to pick an existing and solid foundation to power HeadstartWP: [Next.js](https://nextjs.org/). Next.js is by far the most used Full-Stack React Framework and we believe using Next.js will give us a solid foundation for our framework and let us focus on what matters: solving headless WordPress sites. ## Reduce the complexity of building headless sites -The 10up headless framework aims at making creating headless sites as easy as creating traditional WordPress sites. We want to reduce the complexity that developers need to face when building headless WordPress sites from scratch. +HeadstartWP aims at making creating headless sites as easy as creating traditional WordPress sites. We want to reduce the complexity that developers need to face when building headless WordPress sites from scratch. We aim to let engineers focus on the important aspects of the site instead of spending time figuring out how to "wire up" the Next.js application with WordPress. @@ -20,7 +20,7 @@ We want to boost creativity and let engineers explore new ways of building and s ## Low cost of maintenance -The 10up headless framework is a thin layer built on top of a solid foundation. It focuses on interacting with WordPress. At the end of the day, it's a Next.js application. +HeadstartWP is a thin layer built on top of a solid foundation. It focuses on interacting with WordPress. At the end of the day, it's a Next.js application. This means the maintenance cost is low as the lowest-level and most complex parts are provided by Next.js which is maintained by Vercel and have been driving a lot of innovations alongside partners like Google. @@ -30,7 +30,7 @@ We also aim at maintaining a simple stack. ### REST API over WPGraphQL -The 10up's Headless Framework at the moment does not work with WPGraphQL. +HeadstartWP at the moment does not work with WPGraphQL. GraphQL is great and when used on the right project adds tons of value in the long run. However, for most headless sites, there isn’t much value added by GraphQL. The additional complexity and engineering time required by adopting GraphQL/WPGraphQL isn’t worth the cost most of the time (caching, persisted queries, cache-bursting, etc). diff --git a/docs/src/theme/Footer/index.js b/docs/src/theme/Footer/index.js index 03619e62c..d317c84c9 100644 --- a/docs/src/theme/Footer/index.js +++ b/docs/src/theme/Footer/index.js @@ -4,90 +4,91 @@ import React from 'react'; import Footer from '@theme-original/Footer'; import useBaseUrl from '@docusaurus/useBaseUrl'; +/** + * Bottom band mirrors the footer on headstartwp.fueled.com: greyish-blue + * ground, "Finely crafted by Fueled (formerly 10up)" with a links row, + * centered white Fueled lockup, GitHub + LinkedIn on the right. + */ export default function FooterWrapper(props) { + const year = new Date().getFullYear(); + return ( <> -
- - Careers at 10up - -
- Open source, MIT licensed.
-
- Copyright © 2025
-