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

TODO: review this step - deprecated

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

Config npm to use git.neogeo.fr npm packages for @onegeo-suite namespace (ONEGEO Suite Libs Group Access Token (read-api))

```shell
npm config set @onegeo-suite:registry https://git.neogeo.fr/api/v4/packages/npm/
npm config set -- '//git.neogeo.fr/api/v4/packages/npm/:_authToken' "glpat-Ax2yhvq-vpbcDo8DhsGF"
```

```shell
cd portal
npm install @onegeo-suite/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-suite/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-suite/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.neogeo.fr:onegeo-suite/sites/onegeo-suite-site-portal.git portal
cd portal
rm -dRf .git
rm -f package-lock.json
cd  ..

git clone git@git.neogeo.fr:onegeo-suite/libs/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
```

```
PF_DOMAIN=
PF_PORT=443
PF_PROTOCOL=https
PF_URL=${PF_PROTOCOL}://${PF_DOMAIN}:${PF_PORT}

DIRECTUS_URL=${PF_URL}/directus/
DIRECTUS_TOKEN=

OGS_LOGIN_PATH=/login
OGS_EXPLORER_PATH=/explorer

DEV_BASE_URL=
TYPESENSE_API_TOKEN=
```

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

```json
    {
      resolve: "@onegeo-suite/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-suite/**/*.{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-suite/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.