README.md

# Gatsby theme for Onegeo Portal

**Note:** To install the developpment environment see bellow "Quick Start :: Developping the gatsby-theme"

---

## Quick Start :: Using the gatsby-theme

```shell
gatsby new portal https://gitlab.com/geofit/gatsby-starter-onegeo.git
```

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

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

```shell
npm install @onegeo/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.

```javascript
module.exports = {
  plugins: [
    {
      resolve: "@onegeo/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 `@onegeo/gatsby-theme-onegeo`

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

```shell
gatsby develop
```

## Quick Start :: Developping the gatsby-theme

### Requirements

- VS Code (recommended) (https://code.visualstudio.com/download)
  - Extensions:
    - Git Graph [git-graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)
    - GitLens — Git supercharged [gitlens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
    - Prettier - Code formatter [prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- 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

```shell
mkdir myProject
cd myProject

git clone git@git.geofit.fr:onegeo/gatsby-starter-onegeo.git portal
cd portal
rm -dRf .git
rm -f package-lock.json
cd  ..

git clone git@git.geofit.fr:onegeo/gatsby-theme-onegeo.git

code .
```

Add a `package.json` file

```json
{
  "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"]
}
```

```shell
cat << EOF > package.json
{
  "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"]
}
EOF
```

From `portal` folder

Edit portal `.env` file (from .sample.env)

```
cd portal
mv .sample.env .env
nano .env
```

```
PROJECT_HOST=geokumo.apps.geofit.fr
PROJECT_PORT=80
PROJECT_PROTOCOL=http
PROJECT_URL=${PROJECT_PROTOCOL}://${PROJECT_HOST}:${PROJECT_PORT}

HASURA_API_TOKEN=Admin4Hasura
TYPESENSE_API_TOKEN=
```

Edit portal `gatsby-config.js` to add theme plugin (uncomment lines)

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

Edit portal `tailwind.config.js` to manage TailwindCSS in dev mode (comment & uncomment lines)

```
module.exports = {
  future: {},
  content: [
    // dev plugin
    "./../gatsby-*/src/**/*.{js,jsx,ts,tsx}",
    // dev site
    //"./node_modules/@onegeo/**/*.{js,jsx,ts,tsx}",
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
```

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

From project root path `./myProject`

```shell
npm install
```

Project structure should be like this

```
- ./myProject
  ├─ gatsby-theme-onegeo
  |  ├─ src
  |  ├─ ...
  |  └─ package.json
  ├─ node_modules
  ├─ portal
  |  ├─ node_modules
  |  ├─ src
  |  ├─ ...
  |  ├─ .env
  |  ├─ gatsby-config.js
  |  └─ package.json
  ├─ package-lock.json
  └─ package.json
```

```shell
npm start
```

Sometimes you may need to clean gatsby cache with

```shell
npm run clean
```

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](https://yarnpkg.com/lang/en/docs/workspaces/) like the
[gatsby-theme-examples repo
does](https://github.com/ChristopherBiscardi/gatsby-theme-examples),
but using `yarn link` or `npm link` is a viable alternative if you're
not familiar with workspaces.