Gatsby theme for Onegeo Portal

Quick Start

gatsby new portal https://gitlab.com/geofit/gatsby-starter-egeo.git

Config npm to use git.geofit.fr npm packages for @egeo namespace

npm config set @egeo:registry https://git.geofit.fr/api/v4/packages/npm/
npm config set -- '//git.geofit.fr/api/v4/packages/npm/:_authToken' "7nb3MLSqutKyb6BvmA5d"

npm install @egeo/gatsby-theme-onegeo

Edit .env file (from .sample.env)

Then add the theme to your gatsby-config.js. We'll use the long-form here for educational purposes.

module.exports = {
  plugins: [
    {
      resolve: "@egeo/gatsby-theme-onegeo",
      options: {},
    },
  ],
};

Rename or delete portal default Starter index page ./src/pages/index.tsx. Will be replaced by the default index page of the @egeo/gatsby-theme-onegeo

That's it, you can now run your gatsby site using

gatsby develop

Contribute

Requirements

• VS Code (recommended) (https://code.visualstudio.com/download)
  • Extensions:
    • Git Graph git-graph
    • GitLens — Git supercharged gitlens
    • Prettier - Code formatter prettier
• Git (https://git-scm.com/download)

git config --global user.name "Sam Smith"
git config --global user.email sam@example.com

• NodeJS npm & yarn (https://nodejs.org/en/download/)

v16.x required
Recommended : use 'nvm' to manage node versions

node -v
npm install -g yarn

• Gatsby CLI

npm install -g gatsby-cli

• TypeScript compiler tsc

npm i -g typescript

Setting environment ...

mkdir gatsby
cd gatsby
gatsby new portal https://gitlab.com/geofit/gatsby-starter-egeo.git
git clone git@git.geofit.fr:egeo/gatsby/gatsby-theme-onegeo.git

Add a package.json file

{
  "name": "gatsby-theme-workspace",
  "private": true,
  "version": "0.0.1",
  "license": "0BSD",
  "scripts": {
    "clean": "yarn workspace portal clean",
    "start": "yarn workspace portal develop",
    "build": "yarn workspace portal build",
    "serve": "yarn workspace portal serve"
  },
  "workspaces": ["portal", "gatsby-theme-onegeo"]
}

Project structure should be like this

- ./gatsby
  ├─ gatsby-theme-onegeo
  |  ├─ src
  |  ├─ ...
  |  └─ package.json
  ├─ portal
  |  ├─ src
  |  ├─ ...
  |  └─ package.json
  └─ package.json

Edit .env file (from .sample.env)

Edit portal gatsby-config.js to add theme plugin

    {
      resolve: "@egeo/gatsby-theme-onegeo",
      options: {},
    },

Edit portal tailwind.config.js to manage TailwindCSS in dev mode

module.exports = {
  future: {},
  content: [
    "./../gatsby-theme-*/src/**/*.{js,jsx,ts,tsx}",
    "./src/**/*.{js,jsx,ts,tsx}",
  ],

Optional:
Rename or delete portal default Starter index page ./src/pages/index.tsx. Will be replaced by the default index page of the @egeo/gatsby-theme-onegeo

Start the project

npm install --force

npm start

Building npm package (cf. CI/CD) ...

Doing more with themes

You can use this as a place to start when developing themes. I generally suggest using yarn workspaces like the gatsby-theme-examples repo does, but using yarn link or npm link is a viable alternative if you're not familiar with workspaces.