Skip to content
Snippets Groups Projects
Julien MARGAIL's avatar
Julien MARGAIL authored
add objectFit in components image

See merge request onegeo-suite/libs/gatsby-theme-onegeo!32
e85fcda6
History

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

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))

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"
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.

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

gatsby develop

Quick Start :: Developping the gatsby-theme

Requirements

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

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 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

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

TYPESENSE_API_TOKEN=

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

    {
      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

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
npm start

Sometimes you may need to clean gatsby cache with

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 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.