Migrate JSON configs to YAML

.github/workflows/ci.yml

@@ -2,6 +2,9 @@ name: CI
 
 on: [push]
 
+env:
+  node_version: "12.x"
+
 jobs:
   lint:
     runs-on: ubuntu-latest
@@ -11,7 +14,7 @@ jobs:
       - name: Use Node.js 12
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: ${{ env.node_version }}
       - name: Cache JS dependencies
         uses: actions/cache@v1
         with:
@@ -23,32 +26,3 @@ jobs:
         run: npm install
       - name: Lint
         run: npm run lint
-
-  deploy:
-    needs: lint
-    if: github.ref == 'refs/heads/master'
-    runs-on: ubuntu-latest
-    timeout-minutes: 5
-    steps:
-      - uses: actions/checkout@v1
-      - name: Use Node.js 12
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-      - name: Cache JS dependencies
-        uses: actions/cache@v1
-        with:
-          path: node_modules
-          key: ${{ runner.OS }}-js-dependencies-${{ hashFiles('**/package-lock.json') }}
-          restore-key: |
-            ${{ runner.OS }}-js-dependencies-
-      - name: Install JS dependencies
-        run: npm install
-      - name: Build static HTML & Deploy to GitHub pages
-        uses: JamesIves/github-pages-deploy-action@releases/v2
-        env:
-          CONFIG_JSON: ${{ secrets.configJSON }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          BRANCH: gh-pages
-          FOLDER: out
-          BUILD_SCRIPT: npm run deploy # https://github.com/zeit/next.js/wiki/Deploying-a-Next.js-app-into-GitHub-Pages

.github/workflows/deploy.yml

@@ -0,0 +1,43 @@
+name: Deploy
+
+on:
+  push:
+    branches:
+      - master
+
+env:
+  node_version: "12.x"
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - uses: actions/checkout@v1
+      - name: Use Node.js 12
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ env.node_version }}
+      - name: Cache JS dependencies
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: ${{ runner.OS }}-js-dependencies-${{ hashFiles('**/package-lock.json') }}
+          restore-key: |
+            ${{ runner.OS }}-js-dependencies-
+      - name: Install JS dependencies
+        run: npm install
+      - name: Build & Prepare files for deployment
+        env:
+          CONFIG: ${{ secrets.CONFIG }}
+        run: npm run pre:deploy
+      - name: Install SSH Client
+        uses: webfactory/[email protected]
+        with:
+          ssh-private-key: ${{ secrets.DEPLOY_KEY }}
+      - name: Deploy
+        uses: JamesIves/github-pages-deploy-action@releases/v3
+        with:
+          SSH: true
+          BRANCH: gh-pages
+          FOLDER: out

README.md

@@ -10,103 +10,20 @@ npm run lint
 npm run dev
 ```
 
-## Configuration
+## Usage
 
-Replace
-- `settings/settings.json`
-- `public/favicon.ico`
-- `public/static/logo/logo.png`
+#### Configuration
 
-### Example
+Refer to the [example](./config/config.example.yml) file for the available options. Store them in the `CONFIG` environment variable.
 
-```
-{
-  "name": "Example Name",
-  "logo": "static/logo/logo.png",
-  "technologyIcons": {
-    "react": {"name": "React", "icon": "static/svg/react.svg"},
-    "javascript": {"name": "Javascript", "icon": "static/svg/js.svg"}
-  },
-  "socialIcons": {
-    "github": { "name": "Github", "icon": "static/svg/github.svg" },
-    "medium": { "name": "Medium", "icon": "static/svg/medium.svg" }
-  },
-  "display": "icon",
-  "proxyURL": "https://example-proxy.com",
-  "header": {
-    "technologies": ["javascript", "react"],
-    "teamMembers": [
-      { "name": "Example Member1", "link": "https://github.com/examplemember1" },
-      { "name": "Example Member2", "link": "https://github.com/examplemember2" }
-    ],
-    "socialLinks": [
-      { "name": "medium", "link": "https://medium.com/" },
-      { "name": "github", "link": "https://github.com/" }
-    ]
-  },
-  "productsTitle": "Project showcase",
-  "products": [
-    {
-      "name": "First product",
-      "cover": "static/images/first-cover.jpg",
-      "description": "First product description",
-      "technologies": ["react", "javascript"],
-      "socialLinks": [
-        { "name": "medium", "link": "https://medium.com/" },
-        { "name": "github", "link": "https://github.com/" }}
-      ]
-    },
-    {
-      "name": "Second product",
-      "cover": "static/images/second-cover.jpg",
-      "description": "Second product description",
-      "technologies": ["react", "javascript"],
-      "socialLinks": [
-        { "name": "medium", "link": "https://medium.com/" },
-        { "name": "github", "link": "https://github.com/" }}
-      ]
-    }
-  ],
-  "teamContributionCalendarUsers": {
-    "github": ["exampleuser1", "exampleuser2"],
-    "gitlab": ["exampleuser1", "exampleuser2"]
-  },
-  "medium": "examplemediumuser",
-  "github": {
-    "name": "examplegithubuser",
-    "languageThreshold": 10,
-    "repos": ["examplegithubrepo1", "examplegithubrepo2"]
-  }
-}
-```
-
-#### Below you'll find a description of what each option does.
-
-| Key                             | Value Information                                                                                                                                                      | Type                   | Required |
-| ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | -------- |
-| `name`                          | Team/user/company name.                                                                                                                                                | `string`               | **No**   |
-| `logo`                          | Team/user/company logo.                                                                                                                                                | `string / path to img` | **No**   |
-| `technologyIcons`               | Path to the used technology icons (img or svg).                                                                                           | `object`               | **No**   |
-| `socialIcons`               | Path to the used social icons (img or svg).                                                                                           | `object`               | **No**   |
-| `display`                       | The given technologies should be shown by name or by logo. It accepts two states: "icon" or "name"                                                                     | `string`               | **No**   |
-| `proxyURL`                      | CORS proxy url. Required for Medium API access E.g. [cors-anywhere](https://github.com/Rob--W/cors-anywhere)                                                                               | `string / url`         | **No**   |
-| `header.technologies`           | Technologies used by team/user/company.                                                                                                                                | `array`                | **No**   |
-| `header.teamMembers`            | Team member(s) name and link.                                                                                                                                          | `object`               | **No**   |
-| `header.socialLinks`            | Team online presence.                                                                                                                                          | `object`               | **No**   |
-| `productsTitle`                      | Change products block title. Default value: "Products"                                                                               | `string`         | **No**   |
-| `products.name`            | Product name. (This is required if you create a product entry)                                                                                                                                          | `string`               | **Yes**   |
-| `products.cover`            | Product cover image.                                                                                                                                          | `string / path to img`               | **No**   |
-| `products.description`            | Product description                                                                                                                                          | `string`               | **No**   |
-| `products.technologies`            | Technologies used by the product.                                                                                                                                          | `array`               | **No**   |
-| `products.socialLinks`            | Product online presence.                                                                                                                                          | `object`               | **No**   |
-| `teamContributionCalendarUsers` | GitHub-like contribution calendar for the whole team. Supports GitHub and GitLab, **[you can learn more here](https://github.com/c-hive/team-contribution-calendar)**. | `object`               | **No**   |
-| `medium`                        | Medium user/publication name.                                                                                                                                          | `string`               | **No**   |
-| `github.name`                        | GitHub user/organization name.                                                                                                                  | `string`               | **No**   |
-| `github.languageThreshold`                        | Percentage threshold for coding languages in a repository to be displayed for the project (by default 10%).                                                                                                                     | `integer`               | **No**   |
-| `github.repos`                        | GitHub user/organization repository name(s).                                                                                                                  | `array`               | **No**   |
-
-Note:
-- Leading slashes for static resources might work locally but fail in production
+#### Deploy to GitHub Pages
+- [Fork me](/../../fork)
+- Store a [deployment key](https://github.com/JamesIves/github-pages-deploy-action/tree/dev#using-an-ssh-deploy-key-) in the `DEPLOY_KEY` secret
+- Store config in `CONFIG` secret
+#### Deploy elsewhere
+- [Fork me](/../../fork)
+- Set up custom deployment workflow
+- Store the configuration in the `CONFIG` environment variable
 
 ## Conventions
 

config/config.example.yml

@@ -0,0 +1,101 @@
+# NOTES
+# - Avoid leading slashes for static resources.
+
+# Team/user/company name. Type: string. Required: no.
+name: "John Doe"
+
+# Team/user/company logo. Type: string. Required: no.
+logo: "static/logo/logo.png"
+
+# Customize and extend technology icons. Type: object. Required: no.
+technologyIcons:
+    react:
+      name: "React"
+      icon: "static/svg/react.svg"
+    javascript:
+      name: "JavaScript"
+      icon: "static/svg/js.svg"
+
+# Customize and extend social icons. Type: object. Required: no.
+socialIcons:
+  github:
+    name: "GitHub"
+    icon: "static/svg/github.svg"
+  medium:
+    name: "Medium"
+    icon: "static/svg/medium.svg"
+
+# Showcase technologies by their icon or name. Type: string, values: "icon" || "name". Required: no.
+display: "icon"
+
+# CORS proxy. Required for accessing the Medium API. Use your own! E.g. https://github.com/Rob--W/cors-anywhere. Type: string. Required: no.
+proxyURL: "https://cors-anywhere.herokuapp.com/"
+
+# Site header. Type: object. Required: no.
+header:
+    # Technologies used by team/user/company. Type: array of strings. Required: no.
+    technologies:
+      - javascript
+      - react
+    # Team member(s) name and link. Type: array of objects. Required: no.
+    teamMembers:
+      - name: "Arunoda Susiripala"
+        link: "https://twitter.com/arunoda"
+    # Team online presence. Type: array of objects. Required:
+    socialLinks:
+      - name: "github"
+        link: "https://github.com/c-hive"
+      - name: "medium"
+        link: "https://medium.com/c-hive"
+
+# Override the default title. Type: string, default: "Products". Required: no.
+productsTitle: "Projects"
+
+# Showcase products. Type: array of objects. Required: no.
+products:
+  # Product's title. Type: string. Required: yes.
+  - name: "Next.JS"
+
+    # Product's cover image. Type: string. Required: no.
+    cover: ""
+
+    # Product description. Type: string. Required: no.
+    description: "The React Framework"
+
+    # Technologies used by the product. Type: array. Required: no.
+    technologies:
+      - "react"
+
+    # Product online presence. Type. array of objects. Required: no.
+    socialLinks:
+      - name: "github"
+        link: "https://github.com/zeit/next.js/"
+
+# Aggregate contributions: https://github.com/c-hive/team-contribution-calendar. Type: object. Required: no.
+teamContributionCalendarUsers:
+  # GitHub users. Type: array of objects. Required: no.
+  github:
+    - name: "thisismydesign"
+      from: "2019-09-22"
+    - name: "gomorizsolt"
+      from: "2020-01-01"
+      to: "2020-04-07"
+  # GitLab users. Type: array of objects. Required: no.
+  gitlab: []
+
+# Medium identifier. Type: string. Required: no.
+medium: "c-hive"
+
+# GitHub identifier. Type: object. Required: no.
+github:
+  # Organization/user. Type: string. Required: no.
+  name: "c-hive"
+
+  # Repository identifiers. Type: array of strings. Required: no.
+  repos:
+    - "team-contribution-calendar"
+    - "ws-anywhere"
+    - "js-boilerplate"
+
+  # Percentage threshold for coding languages in a repository to be displayed for the project. Type: number, default: 10. Required: no
+  # languageThreshold: 15

next.config.js

@@ -6,4 +6,12 @@ module.exports = {
     };
   },
   assetPrefix: "./",
+  // https://github.com/zeit/next.js/issues/3141#issuecomment-364551848
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.ya?ml$/,
+      use: "js-yaml-loader",
+    });
+    return config;
+  },
 };