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