chakra-ui / frontity-chakra-ui-theme Goto Github PK

View Code? Open in Web Editor NEW

103.0 103.0 20.0 2.78 MB

A Frontity theme built with Chakra UI

Home Page: https://githubbox.com/chakra-ui/frontity-chakra-ui-theme

JavaScript 100.00%

frontity-chakra-ui-theme's Introduction

Frontity Chakra Theme

A Frontity theme made with the Chakra UI library.

You can try it out in codesandbox: https://githubbox.com/chakra-ui/frontity-chakra-ui-theme

Installation guide

To get start quickly with the Chakra UI theme, you can install them like other published packages in Node using npm or yarn.

To install, run this command in your terminal:

npm install frontity-chakra-theme

Then add frontity-chakra-theme to your frontity.settings.js file.

If you want to modify this package, you need to install it as a local package. You can do so by following this guide: How to install a local package in Frontity.

Theme Options

Chakra theme can be configures via the frontity.settings.js file. The theme options can be specified in the state.theme property.

Key	Default Value	Description
`menu`	[]	The top level navigation links for your blog
`socialLinks`	[]	The social media links to use in your theme
`logo`	[]	The text or logo image url
`showBackgroundPattern`	`true`	If `true`, will show a backgroung pattern
`showSocialLinks`	`true`	If `true`, will show the social media links
`colors`		The `primary` and `accent` colors to use

Example Usage

// frontity.settings.js
const settings = {
  packages: [
    {
      name: "frontity-chakra-theme",
      state: {
        theme: {
          // The logo can be a text or an image url
          logo: "Frontity",
          // show background pattern
          showBackgroundPattern: true,
          // show social links
          showSocialLinks: true,
          // the top-level navigation labels and links
          menu: [
            ["Home", "/"],
            ["Portfolio", "/portfolio"],
            ["About", "/about"],
            ["Contact", "/contact"],
          ],
          // the social links
          socialLinks: [
            ["pinterest", "https://www.pinterest.com/frontity/"],
            ["facebook", "https://www.instagram.com/frontity/"],
            ["twitter", "https://www.twitter.com/frontity/"],
          ],
          // color shades to use in the blog
          colors: {
            primary: {
              50: "#e9f5f2",
              100: "#d4dcd9",
              200: "#bbc3be",
              300: "#a1aba5",
              400: "#87938b",
              500: "#6d7972",
              600: "#555f58",
              700: "#323c34",
              800: "#232924",
              900: "#272727",
            },
            accent: {
              50: "#ede4d3",
              100: "#fbe3b2",
              200: "#f6d086",
              300: "#f1be58",
              400: "#eca419",
              500: "#d49212",
              600: "#a5710b",
              700: "#775105",
              800: "#483100",
              900: "#1d0f00",
            },
          },
        },
      },
    },
  ],
};

export default settings;

🚨NOTE: Since this theme is based on Chakra, we require that the theme colors should be color values from 50 - 900. For example, here's what the default colors look like:

// value of theme.colors
{
  "primary": {
    "50": "#e9f5f2",
    "100": "#d4dcd9",
    "200": "#bbc3be",
    "300": "#a1aba5",
    "400": "#87938b",
    "500": "#6d7972",
    "600": "#555f58",
    "700": "#323c34",
    "800": "#232924",
    "900": "#272727"
  },
  "accent": {
    "50": "#ede4d3",
    "100": "#fbe3b2",
    "200": "#f6d086",
    "300": "#f1be58",
    "400": "#eca419",
    "500": "#d49212",
    "600": "#a5710b",
    "700": "#775105",
    "800": "#483100",
    "900": "#1d0f00"
  }
}

Additional Settings

In addition to the theme options, there are a handful of items you can customize via the frontity object in your site’s frontity.settings.js

// frontity.settings.js
const settings = {
  state: {
    frontity: {
      url: "your website url",
      title: "Your website title",
      description: "Your website description",
    },
  },
};

If you ever have questions, kindly post issues here or head over to https://community.frontity.org to get more personalizes support.

Enjoy the Chakra Theme ⚡️

frontity-chakra-ui-theme's People

Contributors

Stargazers

Watchers

frontity-chakra-ui-theme's Issues

Error: post type from endpoints "posts,pages,media" with slug "service-worker.js" not found

Love the theme but it's not working correctly.

The front page loads fine and posts are pulled but if I try to view a post, I get this dump (+ white page in browser preview):

Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\00d7';" should become "content: '\\00d7';".
You can read more about this here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences
Error: post type from endpoints "posts,pages,media" with slug "service-worker.js" not found
    at Object.eval (webpack-internal:///./node_modules/@frontity/wp-source/src/libraries/handlers/postType.ts:8:21)
    at process._tickCallback (internal/process/next_tick.js:68:7)
You have illegal escape sequence in your template literal, most likely
inside content's property value.
Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\00d7';" should become "content: '\\00d7';".
You can read more about this here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences
Error: post type from endpoints "posts,pages,media" with slug "service-worker.js" not found
    at Object.eval (webpack-internal:///./node_modules/@frontity/wp-source/src/libraries/handlers/postType.ts:8:21)
    at process._tickCallback (internal/process/next_tick.js:68:7)
You have illegal escape sequence in your template literal, most likely
inside content's property value.
Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\00d7';" should become "content: '\\00d7';".
You can read more about this here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences

I assume this is the problem but don't know how to fix it:

Use the Switch component for pagination

Instead of doing the pagination with plain JavaScript logic, like this:

{
  (data.isFetching && <Loading />) ||
    (isSearch && <SearchResults />) ||
    (data.isArchive && <Archive />) ||
    (data.isPostType && <Post />) ||
    (data.is404 && <Page404 />);
}

We can now use the Switch component like we are doing in our starter themes: frontity/frontity@ecdab9f

Update to latest version of Frontity

It'd be nice to keep up with the latest improvements in Frontity:
https://docs.frontity.org/guides/keep-frontity-updated

not able to change logo and footer text

please or anything does not change in this theme

First post link only works on top of the image

It looks like there's a problem with the link of the first post, it only works when you click on the top section of the image.

Issue with menu configuration/pulling page data in

Hello, Really love this theme. Beautiful job! However, I'm having some issues with pulling in page data. I started a conversation here on the frontity forum but then thought it might be helpful to reach out to you here. I notice the chakra them is running beautifully using the source url https://test.frontity.org so I am not sure what is wrong in my configuration.

Add an error page for not 404 errors

Frontity now supports more than just 404 errors. It'd be great to transform the 404 component in a more general error component, like what we did here in our starter themes: frontity/frontity@145210c

use wordpress menu with this theme

HI,

there are detailed instructions how to get the wordpress menu on the frontity community site with a video:
https://www.youtube.com/watch?v=BMJn0RZ2I9s
I have managed to follow this with the mars theme and get it working. However, your theme is somewhat more complex with navigation.
I can get the data to store in sorce, as items as per that instruction, but I cant seem to get my head around how to impliment it with your code. I did set the theme to use the default nav.js file and that worked, but havent been able to get further than that. the usual error is not being able to read source of undefined.
help would be appreicated, thanks.

Decode category, author and tag names

Simply add decode from Frontity to categories, authors and tag names, like we did here in the starter themes: frontity/frontity@f44a54c

<Header>
  Author: <b>{decode(state.source.author[data.id].name)}</b>
</Header>

Frontity needs to be updated first: #13

Pagination buttons are disabled

If you go to https://frontity-chakra.now.sh/page/2/ you will see that the pagination is disabled for the next and the previous page:

By a quick look at the code, it seems like the isDisabled attribute should be the opposite of what it is right now:
https://github.com/chakra-ui/frontity-chakra-ui-theme/blob/master/packages/frontity-chakra-theme/src/components/archive/pagination.js#L87-L88

<PrevLink link={nextPageLink} isDisabled={!isTherePreviousPage} />
<NextLink link={prevPageLink} isDisabled={!isThereNextPage} />

Content not displaying correctly on mobile

Observed behavior

I can't see the content correctly when I visit the Chakra theme on mobile unless I scroll horizontally.

I'm using a Xiaomi Mi A1 device and the Chrome browser on mobile.

Here are some screenshots:

Theme breaks when posts list has just one item

If you install the frontity-chakra-ui-theme in a Frontity project, and point it to a WordPress where you just have one post, it stops working and it returns this error:

TypeError: Cannot destructure property `title` of 'undefined' or 'null'.
      at SecondaryPostPreview (webpack-internal:///./packages/frontity-chakra-theme/src/components/featured-post/featured-post.js:13:2258)
      at processChild (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:480:2385)
      at resolve (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:479:122)
      at ReactDOMServerRenderer.render (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:516:1153)
      at ReactDOMServerRenderer.read (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:516:55)
      at renderToString (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:555:116)
      at eval (webpack-internal:///./node_modules/@frontity/core/src/server/index.tsx:45:243)
      at processTicksAndRejections (internal/process/task_queues.js:93:5)
      at eval (webpack-internal:///./node_modules/koa-mount/index.js:16:290)

It seems that the theme is expecting to find a second post (I guess for the homepage, for the first three posts), and as it doesn't exists it returns that error.

Simplify pagination

We don't have to use libraries.source.parse and libraries.source.stringify for next and previous page anymore, so we can simplify this code: https://github.com/chakra-ui/frontity-chakra-ui-theme/blob/master/packages/frontity-chakra-theme/src/components/archive/pagination.js#L63-L78

const { totalPages } = state.source.get(state.router.link);
const { path, page, query } = libraries.source.parse(state.router.link);

const isThereNextPage = page > 1;
const isTherePreviousPage = page < totalPages;

const nextPageLink = libraries.source.stringify({
  path,
  page: page + 1,
  query,
});

const prevPageLink = libraries.source.stringify({
  path,
  page: page - 1,
  query,
});

And just use the next and previous we get from data:

const { totalPages, route, page, next, previous } = state.source.get(
  state.router.link
);

Please note that path has been renamed and is now route.

Docs: https://docs.frontity.org/api-reference-1/wordpress-source#state

Getting error while integrating @frontity/yoast and frontity-contact-form-7, in frontity-chakra-ui-theme. Can you please help me out.

./packages/frontity-chakra-theme/node_modules/@chakra-ui/core/dist/es/CloseButton/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\Andolasoft Projects\AS_Blog\packages\frontity-chakra-theme\node_modules@chakra-ui\core\dist\es\CloseButton\index.js: pragma and pragmaFrag cannot be set when runtime is automatic.

./packages/frontity-chakra-theme/node_modules/@chakra-ui/core/dist/es/Code/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\Andolasoft Projects\AS_Blog\packages\frontity-chakra-theme\node_modules@chakra-ui\core\dist\es\Code\index.js: pragma and pragmaFrag
cannot be set when runtime is automatic.

./packages/frontity-chakra-theme/node_modules/@chakra-ui/core/dist/es/Collapse/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\Andolasoft Projects\AS_Blog\packages\frontity-chakra-theme\node_modules@chakra-ui\core\dist\es\Collapse\index.js: pragma and pragmaFrag cannot be set when runtime is automatic.

./packages/frontity-chakra-theme/node_modules/@chakra-ui/core/dist/es/ColorModeProvider/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\Andolasoft Projects\AS_Blog\packages\frontity-chakra-theme\node_modules@chakra-ui\core\dist\es\ColorModeProvider\index.js: pragma and pragmaFrag cannot be set when runtime is automatic.

./packages/frontity-chakra-theme/node_modules/@chakra-ui/core/dist/es/Divider/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\Andolasoft Projects\AS_Blog\packages\frontity-chakra-theme\node_modules@chakra-ui\core\dist\es\Divider\index.js: pragma and pragmaFrag cannot be set when runtime is automatic.

./packages/frontity-chakra-theme/node_modules/@chakra-ui/core/dist/es/Drawer/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\Andolasoft Projects\AS_Blog\packages\frontity-chakra-theme\node_modules@chakra-ui\core\dist\es\Drawer\index.js: pragma and pragmaFrag cannot be set when runtime is automatic.

./packages/frontity-chakra-theme/node_modules/@chakra-ui/core/dist/es/Editable/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\Andolasoft Projects\AS_Blog\packages\frontity-chakra-theme\node_modules@chakra-ui\core\dist\es\Editable\index.js: pragma and pragmaFrag cannot be set when runtime is automatic.

./packages/frontity-chakra-theme/node_modules/@chakra-ui/core/dist/es/FormControl/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\Andolasoft Projects\AS_Blog\packages\frontity-chakra-theme\node_modules@chakra-ui\core\dist\es\FormControl\index.js: pragma and pragmaFrag cannot be set when runtime is automatic.

./packages/frontity-chakra-theme/node_modules/@chakra-ui/core/dist/es/FormErrorMessage/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\Andolasoft Projects\AS_Blog\packages\frontity-chakra-theme\node_modules@chakra-ui\core\dist\es\FormErrorMessage\index.js: pragma and pragmaFrag cannot be set when runtime is automatic.

./packages/frontity-chakra-theme/node_modules/@chakra-ui/core/dist/es/FormHelperText/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\Andolasoft Projects\AS_Blog\packages\frontity-chakra-theme\node_modules@chakra-ui\core\dist\es\FormHelperText\index.js: pragma and pragmaFrag cannot be set when runtime is automatic.

./packages/frontity-chakra-theme/node_modules/@chakra-ui/core/dist/es/FormLabel/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\Andolasoft Projects\AS_Blog\packages\frontity-chakra-theme\node_modules@chakra-ui\core\dist\es\FormLabel\index.js: pragma and pragmaFrag cannot be set when runtime is automatic.

./packages/frontity-chakra-theme/node_modules/@chakra-ui/core/dist/es/Heading/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\Andolasoft Projects\AS_Blog\packages\frontity-chakra-theme\node_modules@chakra-ui\core\dist\es\Heading\index.js: pragma and pragmaFrag cannot be set when runtime is automatic.

ppacage.json file

{
"name": "my-frontity-project",
"version": "1.0.0",
"private": true,
"description": "Frontity project",
"keywords": [
"frontity"
],
"scripts": {
"dev": "frontity dev",
"build": "frontity build",
"serve": "npx frontity serve"
},
"repository": {
"type": "git",
"url": "git+https://github.com/chakra-ui/frontity-chakra-ui-theme.git"
},
"author": "Segun Adebayo [email protected]",
"license": "MIT",
"bugs": {
"url": "https://github.com/chakra-ui/frontity-chakra-ui-theme/issues"
},
"homepage": "https://github.com/chakra-ui/frontity-chakra-ui-theme#readme",
"prettier": {},
"dependencies": {
"@chakra-ui/core": "^0.8.0",
"@emotion/core": "^11.0.0",
"@fontsource/work-sans": "^4.5.1",
"@frontity/core": "^1.14.3",
"@frontity/html2react": "^1.7.0",
"@frontity/tiny-router": "^1.4.4",
"@frontity/wp-comments": "^1.0.0",
"@frontity/wp-source": "^1.11.5",
"@frontity/yoast": "^2.1.1",
"frontity": "^1.17.0",
"frontity-chakra-theme": "./packages/frontity-chakra-theme",
"frontity-contact-form-7": "^0.1.7"
},
"devDependencies": {
"@babel/core": "^7.15.4",
"@babel/preset-env": "^7.15.4",
"@changesets/changelog-github": "^0.4.1",
"@changesets/cli": "2.17.0",
"babel-loader": "^8.2.2",
"eslint": "7.32.0",
"eslint-plugin-react": "7.25.1",
"webpack": "^5.51.2"
}
}

Illegal escape sequence ? & <a> cannot appear as a descendant of <a> ??

I ran the frontity chakra theme I just installed from this Github repo and once I ran it I got following errors in the Devtools console:

5 errors had the same text:

You have illegal escape sequence in your template literal, most likely inside content's property value.
Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\00d7';" should become "content: '\\00d7';".
You can read more about this here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences

2 of them were from the path eval @ webpack-internal:///…e.browser.esm.js:14 and
3 of them were from the path serializeStyles @ webpack-internal:///…e.browser.esm.js:12

and 2 errors that were as follows:

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
    in a (created by Context.Consumer)
    in PseudoBox
    in Unknown (created by PostCategories)
    in div (created by Context.Consumer)
    in PseudoBox (created by PostCategory)
    in PostCategory (created by PostCategories)
    in div (created by Context.Consumer)
    in Box (created by Flex)
    in Flex (created by PostCategories)
    in PostCategories (created by PrimaryPostPreview)
    in div (created by Context.Consumer)
    in Box (created by PostContent)
    in PostContent (created by PrimaryPostPreview)
    in article (created by Context.Consumer)
    in Box (created by PrimaryPostArticle)
    in PrimaryPostArticle (created by PrimaryPostPreview)
    in a (created by Context.Consumer)
    in PseudoBox
    in Unknown (created by PrimaryPostPreview)
    in PrimaryPostPreview (created by FeaturedPostSection)
    in div (created by Context.Consumer)
    in Box (created by FeaturedPostSection)
    in section (created by Context.Consumer)
    in Box (created by Flex)
    in Flex (created by FeaturedPostSection)
    in FeaturedPostSection
    in section (created by Context.Consumer)
    in Box
    in Unknown
    in Unknown (created by InnerLoadable)
    in InnerLoadable (created by Context.Consumer)
    in Unknown (created by ForwardRef)
    in ForwardRef
    in main (created by Context.Consumer)
    in Box
    in ThemeProvider (created by ThemeProvider)
    in ThemeProvider
    in Unknown (created by App)
    in HelmetProvider (created by App)
    in App

both of them were from the path warningWithoutStack @ webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:179

PS: my OS is windows 10

search not working (on default settings)

HI,

it appears the search feature does not work on a default install. have tried a few things, just throwing undefined errors.

please can you look at this issue?

Simplify Search

Data objects now have a data.isSearch attribute like this:

<SearchResults when={data.isSearch} />

And also data.searchQuery, so there's no need for extracting that from the query anymore, like here: https://github.com/chakra-ui/frontity-chakra-ui-theme/blob/master/packages/frontity-chakra-theme/src/components/search/search-results.js#L85-L86

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.