imranhsayed/frontity-twentynineteen

:art: A Frontity Twentynineteen theme Project

Twenty Nineteen Frontity Theme Project 🎨

🔥 A WordPress Twenty Nineteen Theme Project in React for Frontity.

⚡ Check out the demo site here.

Tutorial Video

Demo 📹

Demo 2 📹

Speed and performance comparision between the same Twenty Nineteen theme on WordPress (in PHP) vs Frontity (in React).

Installation 🔧

1. For new projects: clone this project.

1. git clone https://github.com/imranhsayed/frontity-twentynineteen.

2. cd frontity-twentynineteen.

3. npm install && npx frontity dev (from the project's root directory).

4. Your site will now be available at http://localhost:3000/

2. For new/existing project: use npm.

1. npm install @frontity/twentynineteen-theme.
2. Add the package in frontity-settings.js.

  packages: [
    {
      name: "@frontity/twentynineteen-theme",
      state: {
        theme: {
          menu: [
            ["Home", "/"],
            ["Nature", "/category/nature/"],
            ["Travel", "/category/travel/"],
            ["Japan", "/tag/japan/"],
            ["About Us", "/about-us/"]
          ],
          featured: {
            showOnList: true,
            showOnPost: true
          }
        }
      }
    },

3. Remove your previous theme (mars-theme?) from frontity-settings.js.
4. npx frontity dev (from project's root directory).
5. Your site will be available at http://localhost:3000/.

Credits 💮

• Build with love 💙, using Frontity's mars-theme as base.

Authors

1. Imran Sayed
2. Smit Patadiya

Contributors

1. Shaun Guimond
2. David Arenas

License 📜

• GPLv2

frontity-twentynineteen's Issues

The pseudo class ":nth-child" is potentially unsafe when doing server-side rendering

There are two CSS errors on the server:

The pseudo class ":nth-child" is potentially unsafe when doing server-side rendering. Try changing it to ":nth-of-type".

and

The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type".

Category & Tag support in Archive & Single Post

Add Category & Tag support in Archive & Single Post

Featured image height should be known on render

To prevent the text from "jumping", the image height should be known prior to the image render.

Like here:

Loader icon is not visible on mobile

Loader icon is not visible on mobile

Error: ./node_modules/react-spinners/ScaleLoader.js

Thanks but I tried to add to exisitng project I found this issue

Error: ./node_modules/react-spinners/ScaleLoader.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: E:\frontity\az-translation\node_modules\react-spinners\ScaleLoader.js: pragma and pragmaFrag cannot be set when runtime is automatic.
> 1 | "use strict";
    | ^
  2 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
  3 |     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
  4 |     return cooked;
    at File.buildCodeFrameError (E:\frontity\az-translation\node_modules\@babel\core\lib\transformation\file\file.js:250:12)
    at NodePath.buildCodeFrameError (E:\frontity\az-translation\node_modules\@babel\traverse\lib\path\index.js:138:21)
    at PluginPass.enter (E:\frontity\az-translation\node_modules\@babel\plugin-transform-react-jsx\lib\create-plugin.js:163:28)
    at newFn (E:\frontity\az-translation\node_modules\@babel\traverse\lib\visitors.js:175:21)
    at NodePath._call (E:\frontity\az-translation\node_modules\@babel\traverse\lib\path\context.js:55:20)
    at NodePath.call (E:\frontity\az-translation\node_modules\@babel\traverse\lib\path\context.js:42:17)
    at NodePath.visit (E:\frontity\az-translation\node_modules\@babel\traverse\lib\path\context.js:92:31)
    at TraversalContext.visitQueue (E:\frontity\az-translation\node_modules\@babel\traverse\lib\context.js:116:16)
    at TraversalContext.visitSingle (E:\frontity\az-translation\node_modules\@babel\traverse\lib\context.js:85:19)
    at TraversalContext.visit (E:\frontity\az-translation\node_modules\@babel\traverse\lib\context.js:144:19)
 @ ./node_modules/@frontity/twentynineteen-theme/src/components/loading.js 1:339-386 1:493-499
 @ ./node_modules/@frontity/twentynineteen-theme/src/components/index.js
 @ ./node_modules/@frontity/twentynineteen-theme/src/index.js
 @ ./build/bundling/entry-points/az-translation/client.ts
 @ multi webpack-hot-middleware/client ./build/bundling/entry-points/az-translation/client.ts

If you need help please visit https://community.frontity.org/.