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

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.

3 Likes

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.

1 Like

Hi @inamkbmail!

Congratulations for your first theme for Frontity! :tada:

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!

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

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 :blush:

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

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

Awesome work @inamkbmail :slight_smile:

Oh this would be so niceee! :clap::smile:

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

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?

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

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

1 Like