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
gatsby new portal https://gitlab.com/geofit/gatsby-starter-onegeo.gitConfig npm to use git.geofit.fr npm packages for @onegeo namespace (ONEGEO Suite Group Access Token (read-api))
npm config set @onegeo:registry https://git.geofit.fr/api/v4/packages/npm/
npm config set -- '//git.geofit.fr/api/v4/packages/npm/:_authToken' "glpat-HkT6yTZQQEWqKRPU8dxC"cd portal
npm install @onegeo/gatsby-theme-onegeoEdit .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/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
gatsby developQuick Start :: Developping the gatsby-theme
Requirements
- VS Code (recommended) (https://code.visualstudio.com/download)
- 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 typescriptSetting environment
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
{
"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"]
}
EOFFrom portal folder
Edit portal .env file (from .sample.env)
cd portal
mv .sample.env .env
nano .envPROJECT_HOST=geokumo.apps.geofit.fr
PROJECT_PORT=80
PROJECT_PROTOCOL=http
PROJECT_URL=${PROJECT_PROTOCOL}://${PROJECT_HOST}:${PROJECT_PORT}
DIRECTUS_URL=
DIRECTUS_TOKEN=
TYPESENSE_API_TOKEN=Edit portal gatsby-config.js to add theme plugin (uncomment lines)
{
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
npm installProject 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.jsonnpm startSometimes you may need to clean gatsby cache with
npm run cleanBuilding 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.