OpenMoji.org

Website of the OpenMoji project 👉 http://openmoji.org/

⚠️ Please note that the master branch is in active development!

Developer Setup

Installing:

Install node.js (see version in the file .nvmrc)
Open Terminal and navigate over to the openmoji.org folder that you downloaded onto your computer: cd path/to/folder
Run: npm install

Starting:

Run npm start

Note: The gzipped openmoji.json (which is mainly responsible for the emojigrid on the home page and the search recommendations) is only loaded by the browser when using npm start (or on the actual server), not with npm preview. Assumable due to different server configurations.

Build:

Run npm run build
The build will appear in /docs¹

¹ The folder name /docs was chosen, because it's a restriction by Github Pages (which we will be using for staging).

(Normally not necessary) Downloading Emojipedia-data:

Run node get-emojipedia-data.js
This will get all emoji-descriptions from Emojipedia and save them in /src/data/emojipediaData.json

Notes about structure

Astro + Markdown:

Astro doesn't automatically resolve relative file paths yet. However, for convenient editting with a Markdown-editor all pages (e.g. src/pages/samples/index.md) have the necessary assets in next to them. These are copied to public/ using gulp.

Components:

components/-folder: Contains all Astro-components

components/shared/ contains all components used across the whole site, all others are associated to the page they appear in (components/about/, components/index/ & components/library/)

Layouts:

layouts/ contains the layouts used to render the markdown pages → Astro docs

BaseLayout is a simple single column (e.g. used for FAQ) and LayoutWithSidebar has a side with table of contents (used on the styleguide and about page)

Styles:

SCSS is now (where possible) moved to a component level and scoped (thanks to Astro)

All cross-site styles are located in src/shared-styles/