highfivery / nextjs-starter Goto Github PK

View Code? Open in Web Editor NEW

31.0 3.0 3.0 1.96 MB

A Next.js 13 CMS & theme agnostic starter framework to build fully-featured headless sites.

Home Page: https://nextjs-starter-sandy-two.vercel.app

License: GNU General Public License v2.0

TypeScript 94.01% JavaScript 2.12% Shell 0.12% SCSS 3.74%

headless-cms headless-wordpress nextjs nextjs-starter react storybook wordpress wpgraphql nextjs-13 drupal

nextjs-starter's People

Contributors

Stargazers

Watchers

Forkers

entermedia-llc mreckendonk ngby

nextjs-starter's Issues

Prevent all styles from getting loaded in Storybook

Currently, there's 3 base styles setup: ant-design, atomic-design & wordpress

Those styles are being directly imported into the component that needs it. See the blockquote component as an example:

import "@/styles/atomic-design/style.scss";

Doing this causes those styles getting loaded globally in storybook vs. per component view. We need to load the base style conditionally based on the component that's being displayed.

The WordPress Gutenburg has done this & would like to replicate that behavior where Storybook adds a toolbar button & decorators that allow the user to select the base style that should be used. See https://github.com/WordPress/gutenberg/blob/trunk/storybook/preview.js

Tried implementing it, but was running into some issues with paths.

Root composer.json requires highfivery/wordpress-gutenberg-ant-design ^0.1.0, found highfivery/wordpress-gutenberg-ant-design[dev-main] but it does not match the constraint.

Problem 1
- Root composer.json requires highfivery/wordpress-gutenberg-ant-design ^0.1.0, found highfivery/wordpress-gutenberg-ant-design[dev-main] but it does not match the constraint.

Solution:

Download https://github.com/Highfivery/wordpress-gutenberg-ant-design/archive/refs/heads/main.zip and install manually, then run composer install.

Integrate WordPress's gutenberg project storybook stories

WordPress provides Storybook stories for all available components in the gutenberg project. Currently, we are manually building the WordPress-specific components in the app/components/wordpress/ directory.

Ideally, we use the stories already created for their components found here https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src so we're not having to manually keep the stories up-to-date when WordPress makes changes.

Important: The project's storybook hierarchy for these should be WordPress/Components/[Component Name]

Import WP theme.json defaults & custom theme

WordPress uses theme.json to define the default core & theme style definitions. We need to find a way to import the default core theme.json settings & then the WP theme theme.json settings. I've looked into this quite a bit & appears WP injects these styles inline globally on normal WP themes.

So when a WP component get's output with a class of has-vivid-green-cyan-color, it use's WP's class and CSS variables for it.

Some helpful links:

https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/
https://robkendal.co.uk/blog/using-css-custom-properties-to-apply-themes-in-javascript-or-react - Can maybe be used to extract a way to accomplish in this app

Warning: Failed prop type: Invalid prop `children` supplied to `Blockquote`, expected one of type [string, object].

Getting a TS warning originating from the RichText.tsx component where it attempts to find blockquote tags in an HTML string and convert it to a blockquote component. Likely need to update the accepted types in the blockquote component.

documents(composer): {"error":"Not Found"}

In the documentation, https://github.com/Highfivery/nextjs-starter/wiki/WordPress-Setup composer.json is missing if using the link: then download our composer.json.

It should be:
https://raw.githubusercontent.com/Highfivery/nextjs-starter/main/backend/wordpress/composer.json

instead of

https://github.com/Highfivery/nextjs-starter/main/backend/wordpress/composer.json

{"error":"Not Found"}

.env.sample is empty

The .env.sample is empty, guess the values are the same as in the WebDevStudios repo

https://github.com/Highfivery/nextjs-starter/blob/4953a64a4835ed071cff22dd025ed3d5003b9752/.env.sample

# Your WordPress username.
WORDPRESS_APPLICATION_USERNAME="YOUR_WORDPRESS_USERNAME"

# Your WordPress application password. Requires WordPress 5.6 and above.
# See https://make.wordpress.org/core/2020/11/05/application-passwords-integration-guide/
WORDPRESS_APPLICATION_PASSWORD="YOUR_GENERATED_APPLICATION_PASSWORD"

Setup Github Actions to do a deploy for demo purposes

Attempted to create a workflow to deploy the built site to gh-pages when changes are pushed to main, but ran into an issue with NPM not finding modules. See https://github.com/Highfivery/nextjs-starter/actions/runs/3482109524/jobs/5824042700

Fresh install blank page

Hi there ! I am following your project and i would like to participate. I am looking for a slightly help here to start making it work in order to test it. I am currently having the following versions :

➜ wbsnext npm -v
8.19.3
➜ wbsnext node -v
v16.19.1

To Reproduce
Steps to reproduce the behavior:

Go to nextjs-started
Run npm run dev
Go to localhost:3000
I am having an error (Module not found: Can't resolve '@/styles/atomic-design/style.scss') regarding import "@/styles/atomic-design/style.scss"; which i comment it out just for the love of having it running
I go to localhost:3000 and refresh
For a second you can see the content, but it then disappears and is replaced by a blank page.

Expected behavior
I guess i should see the content without it being removed. Probably i'm doing something wrong in the config keys ?

screen-recorder-thu-mar-30-2023-12-24-36.webm

Thanks

npm run dev won't run (Internal Server Error)

Following instructions, getting stuck at this point.
Using JetBrains IDE (WebStorm) but never had any problem with JetBrains

$ npm run dev

> [email protected] dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from D:\Projects\others\nextjs-starter\.env
info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback
warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

error - [stylelint] Class extends value undefined is not a constructor or null
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 283 ms (247 modules)
error - Error: Cannot find module 'D:\Projects\others\nextjs-starter\.next\fallback-build-manifest.json'
Require stack:
- D:\Projects\others\nextjs-starter\node_modules\next\dist\server\load-components.js
- D:\Projects\others\nextjs-starter\node_modules\next\dist\server\next-server.js
- D:\Projects\others\nextjs-starter\node_modules\next\dist\server\dev\next-dev-server.js
- D:\Projects\others\nextjs-starter\node_modules\next\dist\server\next.js
- D:\Projects\others\nextjs-starter\node_modules\next\dist\server\lib\start-server.js
- D:\Projects\others\nextjs-starter\node_modules\next\dist\cli\next-dev.js
- D:\Projects\others\nextjs-starter\node_modules\next\dist\lib\commands.js
- D:\Projects\others\nextjs-starter\node_modules\next\dist\bin\next
    at Module._resolveFilename (node:internal/modules/cjs/loader:1039:15)
    at mod._resolveFilename (D:\Projects\others\nextjs-starter\node_modules\next\dist\build\webpack\require-hook.js:23:32)
    at Module._load (node:internal/modules/cjs/loader:885:27)
    at Module.require (node:internal/modules/cjs/loader:1105:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.loadDefaultErrorComponents (D:\Projects\others\nextjs-starter\node_modules\next\dist\server\load-components.js:22:24)
    at DevServer.getFallbackErrorComponents (D:\Projects\others\nextjs-starter\node_modules\next\dist\server\dev\next-dev-server.js:1062:43)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async DevServer.renderErrorToResponse (D:\Projects\others\nextjs-starter\node_modules\next\dist\server\base-server.js:1178:40)
    at async DevServer.renderToResponse (D:\Projects\others\nextjs-starter\node_modules\next\dist\server\base-server.js:1048:30)
    at async DevServer.pipe (D:\Projects\others\nextjs-starter\node_modules\next\dist\server\base-server.js:407:25)
    at async Object.fn (D:\Projects\others\nextjs-starter\node_modules\next\dist\server\next-server.js:759:21)
    at async Router.execute (D:\Projects\others\nextjs-starter\node_modules\next\dist\server\router.js:253:36)
    at async DevServer.run (D:\Projects\others\nextjs-starter\node_modules\next\dist\server\base-server.js:384:29)
    at async DevServer.run (D:\Projects\others\nextjs-starter\node_modules\next\dist\server\dev\next-dev-server.js:743:20)
    at async DevServer.handleRequest (D:\Projects\others\nextjs-starter\node_modules\next\dist\server\base-server.js:322:20) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'D:\\Projects\\others\\nextjs-starter\\node_modules\\next\\dist\\server\\load-components.js',
    'D:\\Projects\\others\\nextjs-starter\\node_modules\\next\\dist\\server\\next-server.js',
    'D:\\Projects\\others\\nextjs-starter\\node_modules\\next\\dist\\server\\dev\\next-dev-server.js',
    'D:\\Projects\\others\\nextjs-starter\\node_modules\\next\\dist\\server\\next.js',
    'D:\\Projects\\others\\nextjs-starter\\node_modules\\next\\dist\\server\\lib\\start-server.js',
    'D:\\Projects\\others\\nextjs-starter\\node_modules\\next\\dist\\cli\\next-dev.js',
    'D:\\Projects\\others\\nextjs-starter\\node_modules\\next\\dist\\lib\\commands.js',
    'D:\\Projects\\others\\nextjs-starter\\node_modules\\next\\dist\\bin\\next'
  ]
}
Error: Cannot find module 'D:\Projects\others\nextjs-starter\.next\fallback-build-manifest.json'
Require stack:
- D:\Projects\others\nextjs-starter\node_modules\next\dist\server\load-components.js
- D:\Projects\others\nextjs-starter\node_modules\next\dist\server\next-server.js
- D:\Projects\others\nextjs-starter\node_modules\next\dist\server\dev\next-dev-server.js
- D:\Projects\others\nextjs-starter\node_modules\next\dist\server\next.js
- D:\Projects\others\nextjs-starter\node_modules\next\dist\server\lib\start-server.js
- D:\Projects\others\nextjs-starter\node_modules\next\dist\cli\next-dev.js
- D:\Projects\others\nextjs-starter\node_modules\next\dist\lib\commands.js
- D:\Projects\others\nextjs-starter\node_modules\next\dist\bin\next
    at Module._resolveFilename (node:internal/modules/cjs/loader:1039:15)
    at mod._resolveFilename (D:\Projects\others\nextjs-starter\node_modules\next\dist\build\webpack\require-hook.js:23:32)
    at Module._load (node:internal/modules/cjs/loader:885:27)
    at Module.require (node:internal/modules/cjs/loader:1105:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.loadDefaultErrorComponents (D:\Projects\others\nextjs-starter\node_modules\next\dist\server\load-components.js:22:24)
    at DevServer.getFallbackErrorComponents (D:\Projects\others\nextjs-starter\node_modules\next\dist\server\dev\next-dev-server.js:1062:43)
    at async DevServer.renderErrorToResponse (D:\Projects\others\nextjs-starter\node_modules\next\dist\server\base-server.js:1178:40)
    at async pipe.req.req (D:\Projects\others\nextjs-starter\node_modules\next\dist\server\base-server.js:1075:30)
    at async DevServer.pipe (D:\Projects\others\nextjs-starter\node_modules\next\dist\server\base-server.js:407:25)
    at async DevServer.run (D:\Projects\others\nextjs-starter\node_modules\next\dist\server\dev\next-dev-server.js:751:28)
    at async DevServer.handleRequest (D:\Projects\others\nextjs-starter\node_modules\next\dist\server\base-server.js:322:20) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'D:\\Projects\\others\\nextjs-starter\\node_modules\\next\\dist\\server\\load-components.js',
    'D:\\Projects\\others\\nextjs-starter\\node_modules\\next\\dist\\server\\next-server.js',
    at async pipe.req.req (D:\Projects\others\nextjs-starter\node_modules\next\dist\server\base-server.js:1075:30)
    at async DevServer.pipe (D:\Projects\others\nextjs-starter\node_modules\next\dist\server\base-server.js:407:25) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'D:\\Projects\\others\\nextjs-starter\\node_modules\\next\\dist\\server\\load-components.js',
    'D:\\Projects\\others\\nextjs-starter\\node_modules\\next\\dist\\server\\next-server.js',
    'D:\\Projects\\others\\nextjs-starter\\node_modules\\next\\dist\\server\\dev\\next-dev-server.js',
    'D:\\Projects\\others\\nextjs-starter\\node_modules\\next\\dist\\server\\next.js',
    'D:\\Projects\\others\\nextjs-starter\\node_modules\\next\\dist\\server\\lib\\start-server.js',
    'D:\\Projects\\others\\nextjs-starter\\node_modules\\next\\dist\\cli\\next-dev.js',
    'D:\\Projects\\others\\nextjs-starter\\node_modules\\next\\dist\\lib\\commands.js',
    'D:\\Projects\\others\\nextjs-starter\\node_modules\\next\\dist\\bin\\next'
  ]
}

Create Pages
In the WordPress Dashboard, navigate to Pages -> Add New

Create three blank pages named:

Homepage
Blog
404

For the 404 I could not find the settings. Settings -> Headless Config -> Custom Page Options

As I don't have a crystal ball, I don't know if you're simplifying this also.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.