This is a simple website that displays a collection of doginals, along with a filter. Below is an example used with the Ordinal Fomojis collection, which is available on https://ord-filter.vercel.app, and is also used on the Ordinal Fomojis website
On the collection page, all doginals are visible, and are labelled with their inscription number. The doginals can be filtered by trait, and as many filters as you want can be applied. Each filter can be removed one by one either by unticking it in the filter pane, or clicking the cross on the filter cards at the top. All filters can be cleared using the "Clear all" button
Clicking on an individual Ordinal on the collection page brings up more detailed information about it, including its inscription id, all it's attributes, and a button to take you to its doginals.com page. Also, any of the attributes can be clicked, which will take you to the collection page showing just the doginals with that trait
The source code is free for other projects to use how they would like to. It is built with a React.js front end, with a Next.js backend
If you have any questions, jump into the Fomojis Discord and raise a ticket. I (Vannix) will try to help you out with any issues
If you discover bugs or other issues, please raise an issue in GitHub and I will try to address it as soon as possible
To get started, Fork this repo into your own Github account (I recommend forking it rather than duplicating the code in your own repo so you can pull updates and improvements when I add them)
Once you have forked and cloned the repo onto your computer, cd into ord-filter and execute npm run dev. You can then view the website on localhost:3000. It will update live, so when you change the code and save it, the website will automatically update to reflect the change.
Note: performance in development is significantly worse than it will be when it is built properly, becuase it tries to download the inscription numbers from doginals.com every time a change is made, whereas this normally only happens once when the website is built.
The below instructions outline the minimal changes that need to be made if you want to set up this website for your collection. You can also take any parts from the source code and put them into your own website
The lib/inscriptions.json file contains all the metadata about your doginals, such as the inscription ids and the traits. You will need to replace the existing file with your metadata. It has the following structure
[
{
"id": ...,
"meta": {
"attributes": [
{
"trait_type": ...,
"value": ...,
"percent": ...
},
{
"trait_type": ...,
"value": ...,
"percent": ...
},
...
]
}
},
...
]
It is not an issue if there are additional properties, as they will be ignored. For example, if you have created an inscriptions.json file for Ordinals Wallet, then that will work without any changes. Checkout lib/inscriptions.json for a full example
I highly encourage you to change the colors of the website to create your own theme, and to differentiate it from Ordinal Fomojis
All of the colors used throughout the website are defined in styles/_variables.sass. Read the associated comments in that file to understand where each color is used. There are countless tools online to generate the color hex codes, such as this one
I also recommend changing the fonts to align with your brand. You will need to use a font from Google Fonts (unless you know how to load a downloaded font into React.js)
The website has two fonts, a title font and a body font. When selecting your fonts in Google Fonts, ensure you select Regular 400 and Bold 700 weights for the body font, and a Regular 400 weight for the title font. Once you have selected your fonts, Google Fonts will give you the code needed to use it. You will get the option between <link> and @import. Select @import. It will give you something like this
<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&family=Rock+Salt&display=swap');
</style>
Just take the middle line, and make sure to remove the semicolon at the end (this is important). So you should end up with something like
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&family=Rock+Salt&display=swap')
Replace the existing font import in styles/globals.sass with your font import (line 2)
Google Fonts will also give you the CSS rules to specify the font families, which will look like
font-family: 'Nunito', sans-serif;
font-family: 'Rock Salt', cursive;
In the styles/globals.sass file replace the font under the p with your body font (line 5) and replace the font under the h1 with your title font (line 8). Again, it is important you remove the semicolons from the code Google Fonts gives you. There should not be any semicolons in styles/globals.sass, otherwise the website will crash
A site map is needed for search engine optimisation. If it is not correct, you site will may appear on Google or other search engines. In public/sitemap.xml, change https://fomojis.io to your website url
A favicon is the logo for your website and is used in various situations, most notably as the icon in the tab for your website as seen below
The favicon consists of 7 files, so that the icon can be displayed correctly at various different sizes
android-chrome-192x192.pngandroid-chrome-512x512.pngapple-touch-icon.pngfavicon-16x16.pngfavicon-32x32.pngfavicon.icosite.webmanifest
All of these files need to go in the public folder. You can use online tools such as favicon.io to generate all of these files for you
You can set the title and description in lib/config.json.
The title is displayed in the tabs as seen below
And the description is displayed in social media posts such as Discord or Twitter. Below is an example from Discord
If you don't already have a deployed website, you can deply this on a hosting service of you choice. Instructions for this can be found on the Next.js docs
I recommed hosting the website on Vercel. Vercel created Next.js, so their services are optimised for it. It is relatively cheap, and if you don't expect much traffic the free plan may be sufficient. You can also buy domain names for a decent price through Vercel. All you need to do is create a project and connect you github repo and it will deploy automatically. Click here to set it up