feat!: implemented webmention receiving and cron-scheduled ci runs

.circleci/config.yml

@@ -35,7 +35,7 @@ jobs: # a collection of steps
       - store_artifacts:
           path: ~/tmp/reports/eslint
 
-  build_without_version: # build the project - requires dependencies to have been installed
+  build_dev: # build the project - requires dependencies to have been installed
     executor: node-project
     steps:
       - checkout
@@ -57,7 +57,32 @@ jobs: # a collection of steps
             - ~/tmp/firebase.json
             - ~/tmp/package-lock.json
 
-  build_and_version:
+  build_prod_no_version:
+    executor: node-project
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ .Environment.CIRCLE_WORKFLOW_ID }}
+      - run:
+          name: Add Git User details
+          command: |
+            git config --global user.email "ripixel+ci@gmail.com"
+            git config --global user.name "CircleCi"
+      - run: # run build
+          name: Build
+          command: npm run build
+      - store_artifacts: # for display in Artifacts: https://circleci.com/docs/2.0/artifacts/
+          path: public
+          prefix: public
+      - save_cache: # special step to save the public cache and deploy files
+          key: deploy-cache-{{ .Environment.CIRCLE_WORKFLOW_ID }}
+          paths:
+            - ~/tmp/public
+            - ~/tmp/.firebaserc
+            - ~/tmp/firebase.json
+            - ~/tmp/package-lock.json
+
+  build_prod_with_version:
     executor: node-project
     steps:
       - checkout
@@ -115,13 +140,13 @@ workflows:
       - lint:
           requires:
             - install_deps
-      - build_without_version:
+      - build_dev:
           filters:
             branches:
               ignore: master
           requires:
             - install_deps
-      - build_and_version:
+      - build_prod_with_version:
           filters:
             branches:
               only: master
@@ -133,11 +158,31 @@ workflows:
               only: master
           requires:
             - lint
-            - build_and_version
+            - build_prod_with_version
       - deploy_to_firebase_stg:
           filters:
             branches:
               only: staging
           requires:
             - lint
-            - build_without_version
+            - build_dev
+  hourly:
+    triggers:
+      - schedule:
+        cron: '55 * * * *'
+        filters:
+          branches:
+            only:
+              - master
+    jobs:
+      - install_deps
+      - lint:
+          requires:
+            - install_deps
+      - build_prod_no_version:
+          requires:
+            - install_deps
+      - deploy_to_firebase_prod:
+          requires:
+            - lint
+            - build_prod_no_version

assets/styles/styles.css

@@ -207,6 +207,119 @@ main.area {
   min-height: 30vh;
 }
 
+.mentions {
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  flex-wrap: wrap;
+  padding: 40px 120px 20px;
+  max-width: 100%;
+  font-size: 1em;
+}
+
+.mentions .item {
+  background: rgba(0, 0, 0, 0.2);
+  margin-right: 10px;
+  margin-bottom: 10px;
+  text-transform: uppercase;
+  font-family: 'Lato', sans-serif;
+}
+
+.mentions .item span {
+  padding: 10px;
+}
+
+.mentions h4 {
+  padding-bottom: 10px;
+}
+
+.mentions > div {
+  max-width: 100%;
+  padding-bottom: 20px;
+}
+
+.mention-links a {
+  display: inline-block;
+}
+
+.mention-links img {
+  background-color: #999;
+  max-width: 30px;
+  vertical-align: middle;
+  border-left: 2px solid #fff;
+}
+
+.comments {
+  max-width: 100%;
+}
+
+.comments .mention-links {
+  display: flex;
+  flex-direction: column;
+}
+
+.mention-links .comment {
+  background: #025a44;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.mention-links .comment:last-child {
+  margin-bottom: 0;
+}
+
+.mention-links .comment .comment-link {
+  padding: 5px;
+  float: right;
+  margin-right: 0;
+  margin-bottom: 0;
+  font-size: 0.8em;
+}
+
+.mention-links .comment .comment-link:hover {
+  transform: none;
+}
+
+.mention-links .comment p {
+  padding: 0 10px 10px;
+}
+
+@media only screen and (max-width: 600px) {
+  .mentions {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    padding: 20px 40px 10px;
+  }
+
+  .mention-links {
+    white-space: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .comments .mention-links {
+    white-space: normal;
+  }
+
+  .mention-links .comment {
+    max-width: 100%;
+  }
+
+  .mention-links .comment p {
+    padding: 10px;
+  }
+
+  .mentions .item {
+    margin-bottom: 0;
+  }
+}
+
+@media only screen and (max-width: 420px) {
+  .mentions {
+    padding: 20px 30px 10px;
+  }
+}
+
 .details {
   display: flex;
   justify-content: flex-start;
@@ -332,6 +445,10 @@ main.thoughts.details {
   background: rgb(1, 65, 49);
 }
 
+main.thoughts.mentions {
+  background: rgb(0, 112, 84);
+}
+
 main.profile {
   min-height: 0;
   background: rgb(17, 50, 143);

package.json

@@ -24,6 +24,7 @@
     "homepage": "https://github.com/ripixel/ripixel-website#readme",
     "devDependencies": {
         "@types/node": "^13.13.5",
+        "@types/node-fetch": "^2.5.8",
         "@types/prettier": "^2.0.1",
         "@types/showdown": "^1.9.3",
         "@typescript-eslint/eslint-plugin": "^3.2.0",