I made a theme from scratch and it's called Gaunt

inamkbmail · 6 April 2020 14:31

Hi, I made a theme for my own site and I planned to publish it.
Please go to repo to see the source and point our my mistakes there and install it from npm i gaunt-frontity .

Some feature

Sidebar

Unique desgin
Social media
Search
two colors and minimal

Coming features

Sticky header
Social share
Syntax highlighting
Some components like popups, newsletter subscription,
and few more

Please check it and notice all of the bugs, shortcomings and also check theme’s UI/UX and let me know about your ideas. I’m not sure if it’ll work on your side but I tested it on my computer with both wp.com/.org API and it’s working good.

Please: I’m not good with React and ths is my first frontity project so let me now about bugs. Also this is my first publication on npm registry and I don’t how many mistakes I made while publishing and now ironically I myself can’t install it maybe because I messed with directories or something so please go to https://www.npmjs.com/package/gaunt-frontity and check it too.

inamkbmail · 6 April 2020 14:37

Hi @Pablo sir here is my announcement.
If you appreciate my work with a reason, I’m thinking to bring twentyfifteen theme of WordPress --which I like too much because of simple elegant design-- to our frontity package.

juanma · 6 April 2020 15:58

Hi @inamkbmail!

Congratulations for your first theme for Frontity!

Please: I’m not good with React and ths is my first frontity project so let me now about bugs. Also this is my first publication on npm registry and I don’t how many mistakes I made while publishing and now ironically I myself can’t install it maybe because I messed with directories or something so please go to https://www.npmjs.com/package/gaunt-frontity and check it too.

I’ll check the code and provide some Pull Requests and Issues to your repository if that’s ok with you

Thanks for sharing your work!

Pablo · 6 April 2020 18:09

Hey, @inamkbmail thanks a lot for sharing this with the community

Quick feedback, it would be great if you deploy a live version of it so people can take a look at it easily. You can use Now for free, here you have a guide: https://docs.frontity.org/installation-and-deploy/deploy-on-now

I’m sure that the rest of the team will be able to give you feedback on the implementation of the team

thedonquixotic · 7 April 2020 01:58

Congrats! Would love to see a preview image of it to see how you handled your visual design.

inamkbmail · 7 April 2020 05:48

@Pablo @thedonquixotic @juanma Agree to all of you!

luisherranz · 7 April 2020 15:25

Awesome work @inamkbmail

Oh this would be so niceee!

juanma · 9 April 2020 07:57

Hi @inamkbmail,

I’ve create a Pull Request for your project with the suggested structure for developing a Frontity theme.

I’ve also added a README.md (in the PR) with the proper explanations. This is the content:

Frontity project w/ `gaunt-theme`

This repository contains a Frontity project using the gaunt-theme developed by @minaminfo

About Frontity themes structure

In Frontity, themes are packages that can be published in NPM so they can be installed and used in any other Frontity project

You can find all the Frontity themes looking for the tag frontity-theme at npm

The suggested structure for developing new themes that works with frontity is the following one, where the theme we’re developing is a local dependency of our main package.json

"dependencies": {
    "gaunt-theme": "file:packages/gaunt-theme"
  }

This type of dependency is automatically define if we create the package (theme) w/ the frontity command npx frontity create-package gaunt-theme

This structure implies having a main Frontity project (root package.json) and some packages (each one with its own package.json) under the packages folder

/my-frontity-project
|__ frontity.settings.js
|__ package.json
|__ /node_modules
|__ /packages
    |__ /my-theme
    |__ /my-custom-extension-1
    |__ /my-custom-extension-2

The Project

These files in the root represents the Frontity project that can be launched and that will allow us to see the theme (or any other package) in action

In the root folder you’ll find the following:

`frontity.setting.js`

A frontity.setting.js file containing the settings for your project (among other settings you’ll usually define the use of this theme)

For example:

...
"packages": [
    {
      "name": "gaunt-theme"
    },
...

`node_modules`

A /node_modules/ folder, where the dependencies of the project are installed

`packages`

A packages folder where your local packages live

`package.json`

And a package.json with the configuration & dependencies for the Frontity project.

This package.json is used when you publish a package in NPM, but this Frontity project is not meant to be published

Notice the

"private": true`

preventing this package (the main Frontity project defined in the root) being published

The Theme

So, with this structure we can develop our theme as a package inside the packages folder. Each one of these packages will have its own package.json and these packages are the ones meant to be published (npm publish)

In frontity we can create a new package by doing npx frontity create-package <my package name> (from the root of the Frontity project)

Why this structure?

This structure allows to:

Launch the project using the theme locally
Publish the theme independently

So any developer can clone this project, launch the Frontity project locally, have a look at how the theme looks like & behave and make contributions (pull requests) to your repository (that can be eventually merged into the main repo).

With all of this, the owner of the theme still can publish those new updates independently (from the theme folder, packages/gaunt-theme in this case)

Installing

So, after these explanations… what do I need to do before launching locally this project using this theme?

From the root

npm install

This command will install the dependencies of the Frontity project and the dependencies of its dependencies, just as any other npm package

So, as our theme is also one of our dependencies (a local dependency) is:

"dependencies": {
   ...
    "gaunt-theme": "file:packages/gaunt-theme"
  }

All needed dependencies are installed (the ones defined for the frontity project and the ones defined for the theme)

More info about this → npm install : https://docs.npmjs.com/cli/install

Launching

Once we have all the dependencies installed we can do (from the root)

npx frontity dev

This will launch the Frontity project using this theme

Publishing the theme

Just do:

cd packages/gaunt-theme
npm publish

Hope it’s clear enough and that this helps to increase the contributions to your theme

inamkbmail · 13 April 2020 05:43

I’m sorry a lot that I couldn’t reply you soom. I like the way you added changes the problem was that I kept repo of theme package separate so that I update package on npm too.
Thank you for your pull request. I’m not going to revert back I like your method. But I’m gonna create a separate repo for theme package only. Is that good?

juanma · 13 April 2020 07:21

Hi @inamkbmail,

This structure allows you to publish your package independently. I mean you can directly do…

cd packages/gaunt-theme
npm publish

and publish your NPM package while maintaining this structure

The structure of your github repository doesn’t have to mirror what you publish as an NPM package.
For example, the repo https://github.com/frontity/frontity contains a folder packages with several NPM packages that can be published independently while keeping all of them under the same repository,

Hope this helps

inamkbmail · 13 April 2020 12:42

Ok. TY! I’ll do that direct with npm publish now instead of np