whale-agency / headless-horseman-demo

A starter theme for Frontity, written in TypeScript

headless-horseman

This project was bootstrapped with Frontity.

Table of Contents

• Launch a development server
• Create your custom theme
• Create a production-ready build
• Deploy

Launch a development server

npx frontity dev

Runs the app in development mode. Open http://localhost:3000 to view it in the browser.

The site will automatically reload if you make changes inside the packages folder. You will see the build errors in the console.

Have a look at our Quick Start Guide

Create your custom theme

npx frontity create-package your-custom-theme

Use the command npx frontity create-package to create a new package that can be set in your frontity.settings.js as your theme.

Have a look at our blog post How to Create a React WordPress Theme in 30 Minutes

Create a production-ready build

npx frontity build

Builds the app for production to the build folder.

This will create a /build folder with a server.js (a serverless function) file and a /static folder with all your javascript files and other assets.

Your app is ready to be deployed.

Get more info about Frontity's architecture

Deploy

With the files generated in the build you can deploy your project.

As a node app

Use npx frontity serve to run it like a normal Node app.

This command generates (and runs) a small web server that uses the generated server.js and /static to serve your content.

As a serverless service

Upload your static folder to a CDN and your server.js file to a serverless service, like Vercel or Netlify.

Get more info about how to deploy a Frontity project

---

Frontity Community

👋  We'd love for you to be part of the Frontity community. There are a variety of different ways in which you can find more information about the project, join in discussions about it, and also get involved:

• Learn Frontity: in this page you can find Frontity's primary learning resources, including documentation resources, example projects, videos, and more.
• Community forum: Frontity's forum is a great place to ask questions, help fellow Frontity users, and share your projects. It's also where you can keep track of the development work, join feature discussions, and collaborate on building Frontity itself.
• GitHub: for bug reports and code contributions. Questions are answered in the community forum.

If you're looking for news and updates about Frontity, Twitter and the blog are pretty good places to start. You can also join the Frontity Newsletter and stay updated on new releases and features, learning resources, and community news.

Contributing

Frontity welcomes contributions in all forms. There are many different ways to support the project. Check out the How to contribute page for ideas on contributing and helping make Frontity better.

headless-horseman-demo's Issues

Block library css

The gutenberg package have to load the up-to-date styles from wp core
Example: {backend_url}/wp-includes/css/dist/block-library/style.css.

A couple of issue that have to be taken into account:

1. Column block custom width. The block puts custom flex-basis as inline css to overwrite the default settings. That works for the classic theme development, but once we use frontity the inline css is processed and has lower css class priority. That causes all columns be 50%/50% so to say equal width.

2. Responsive iframe. Once the iframe is used the editor puts a wp-embed-responsive class to the body tag. That class is used to detect the embed iframe and apply the necessary styles. Frontity does not insert wp-embed-responsive into body and as a result no responsiveness added.

Starting theme design

What I would like to do is design/build our own starter theme, so we don't have to always start from scratch on each project. Here is what I see as part of the starter theme:

• General layout - simple header and footer, including mobile designs. They can be used as a starting point for any project. The ones provided by frontity's base theme is just kinda oldschool and requires too much modification to always make it work with our designs

• Archive page - following WP's terms, an archive page is basically an index. So for example the blog page where the posts are listed. Would be nice to have a good starting point for this page. That includes the list of items, pagination, loaders, and all the other elements that are required around pagination.

• Single post - a single post

• Single page - a simple page starting layout

• Custom loader - would be nice to make something to replace the one from frontity. It can be as simple but It can be something a bit nicer. It is good to also think how to design this loader so it interacts good with different brands and logos and can be adapted to them.

• Some basic components - some basic generic components that we use in some way or another on every site. Some examples: left/right image text, centered text, Image with caption, full width cover section(with bg image or color). These are the most basic ones I can think about.