feat(rewrite): Rewrote the whole thing in ReactJS 💅 (techno-tim#22)

* feat(rewrite): Rewrote the whole thing in ReactJS 💅

* chore(docs): Updated

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

.env.example

@@ -0,0 +1,23 @@
+# this is used for local debugging
+# RAZZLE_ variable is passed to the server
+# copy this to .env for testing
+
+RAZZLE_META_TITLE=Techno Tim
+RAZZLE_META_DESCRIPTION=Techno Tim Link page
+RAZZLE_META_AUTHOR=Techno Tim
+RAZZLE_THEME=Dark
+RAZZLE_FAVICON_URL=https://pbs.twimg.com/profile_images/1286144221217316864/qIAsKOpB_200x200.jpg
+RAZZLE_AVATAR_URL=https://pbs.twimg.com/profile_images/1286144221217316864/qIAsKOpB_200x200.jpg
+RAZZLE_AVATAR_2X_URL=https://pbs.twimg.com/profile_images/1286144221217316864/qIAsKOpB_400x400.jpg
+RAZZLE_AVATAR_ALT=Techno Tim Profile Pic
+RAZZLE_NAME=TechnoTim
+RAZZLE_BIO=Hey! Just a place where you can connect with me!
+RAZZLE_GITHUB=https://github.com/timothystewart6
+RAZZLE_TWITTER=https://twitter.com/TechnoTimLive
+RAZZLE_INSTAGRAM=https://www.instagram.com/techno.tim
+RAZZLE_YOUTUBE=https://www.youtube.com/channel/UCOk-gHyjcWZNj3Br4oxwh0A
+RAZZLE_TWITCH=https://www.twitch.tv/technotim/
+RAZZLE_DISCORD=https://discord.gg/DJKexrJ
+RAZZLE_TIKTOK=https://www.tiktok.com/@technotim
+RAZZLE_KIT=https://kit.co/TechnoTim
+RAZZLE_FOOTER=Thanks for stopping by!

.eslintignore

@@ -0,0 +1,13 @@
+logs
+*.log
+npm-debug.log*
+.DS_Store
+
+coverage
+node_modules
+build
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+cache

.eslintrc

@@ -0,0 +1,42 @@
+{
+  "parser": "@babel/eslint-parser",
+  "settings": {
+    "react": {
+      "pragma": "React",
+      "version": "detect"
+    }
+  },
+  "plugins": ["jsx","prettier"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "prettier"
+    ],
+  "env": {
+    "jest": true,
+    "jasmine": true,
+    "node": true,
+    "browser": true,
+    "es6": true
+
+  },
+  "rules": {
+    "prettier/prettier":
+      ["error", {
+          "singleQuote": true,
+          "jsxSingleQuote": false,
+          "arrowParens": "avoid",
+          "semi": true,
+          "trailingComma": "all",
+          "spaceAfterFunction": true
+        }],
+    "no-console": ["error", { "allow": ["warn", "error"] }],
+    "no-alert": "error",
+    "no-debugger": "error",
+    "prefer-const": "error",
+    "prefer-arrow-callback": "error",
+    "no-unused-vars": ["error", {"args": "none"}],
+    "react/prop-types": 0,
+    "react/no-unescaped-entities": 0
+  }
+}

.github/workflows/main.yml

@@ -20,6 +20,8 @@ jobs:
     - name: Install Dependencies, Test, and Build
       run: |
         yarn install --frozen-lockfile --check-files
+        yarn lint
+        yarn test
       env:
         CI: true
 

.github/workflows/pull-request.yml

@@ -23,5 +23,7 @@ jobs:
     - name: Install Dependencies, Test, and Build
       run: |
         yarn install --frozen-lockfile --check-files
+        yarn lint
+        yarn test
       env:
         CI: true

.gitignore

@@ -1,26 +1,14 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
+logs
+*.log
+npm-debug.log*
 .DS_Store
+
+coverage
+node_modules
+build
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# this is is the output
-www/index.html
+.env
+cache

.vscode/launch.json

@@ -0,0 +1,13 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+      {
+        "name": "Attach to dev server",
+        "type": "node",
+        "request": "attach",
+        "protocol": "inspector",
+        "address": "localhost",
+        "port": 9229
+      }
+    ]
+  }

Dockerfile

@@ -1,18 +1,23 @@
-FROM node:14.17.4-alpine
+FROM node:14.17.4-alpine AS node-build
 RUN apk --no-cache add \
     gettext \
     bash
-ENV NODE_ENV=production
+
+WORKDIR /usr/src/app
+COPY package.json ./
+COPY yarn.lock ./
+COPY src ./src
+COPY public ./public
+RUN yarn install --frozen-lockfile --check-files
+RUN yarn build --noninteractive
+RUN yarn install --frozen-lockfile --check-files --production --modules-folder node_modules_prod
+
+FROM node:14.17.4-alpine
 WORKDIR /usr/src/app
-COPY package.json yarn.lock ./
-RUN yarn install --frozen-lockfile --check-files --production=true
-COPY www ./www
-COPY template ./template
-COPY env.js ./
-COPY app.js ./
-COPY ./entrypoint.sh /
-RUN chmod +x /entrypoint.sh
+ENV NODE_ENV production
+RUN mkdir -p /node_modules
+COPY --from=node-build /usr/src/app/build ./build
+COPY --from=node-build /usr/src/app/node_modules_prod ./node_modules
 EXPOSE 3000
-ENTRYPOINT ["/entrypoint.sh"]
-CMD [ "node", "app.js" ]
+CMD [ "node", "build/server.js" ]
 

README.md

@@ -1,7 +1,7 @@
 # 🔗 LittleLink-Server
 
 This project is based on the great work from [littlelink](https://github.com/sethcottle/littlelink)
-It takes the same simple approach to a link page and hosts it within a nodeJS server containerized for you to use. Now, customizing `LittleLink` with `littlelink-server` is as easy as passing in some environment variables.  If you need help configuring this, please see [this video that explains everything](https://www.youtube.com/watch?v=42SqfI_AjXU).
+It takes the same simple approach to a link page and hosts it within a NodeJS server with React Server Side Rendering, containerized for you to use. Now, customizing `LittleLink` with `littlelink-server` is as easy as passing in some environment variables.  If you need help configuring this, please see [this video that explains everything](https://www.youtube.com/watch?v=42SqfI_AjXU).
 
 # 🚀 Getting Started
 
@@ -45,7 +45,9 @@ services:
       # - MEDIUM=https://medium.com
       # - PINTEREST=https://www.pinterest.com/
       # - [email protected]
+      # - EMAIL_TEXT=Email Me!
       # - [email protected]
+      # - EMAIL_ALT_TEXT=Email me!
       # - SOUND_CLOUD=https://souncloud.com
       # - FIGMA=https://figma.com
       # - TELEGRAM=https://telegram.org/
@@ -87,20 +89,23 @@ docker run -d \
   -e DISCORD='https://discord.gg/DJKexrJ' \
   -e TIKTOK='https://www.tiktok.com/@technotim' \
   -e KIT='https://kit.co/TechnoTim' \
+  -e EMAIL='[email protected]' \
+  -e EMAIL_TEXT='Email me!' \
+  -e FOOTER=Thanks for stopping by! \
   --restart unless-stopped \
   ghcr.io/techno-tim/littlelink-server:latest
 ```
 
 ## Kubernetes
 
-[unoffical helm chart provided by k8s-at-home](https://github.com/k8s-at-home/charts/tree/master/charts/stable/littlelink-server)
+[Unofficial helm chart provided by k8s-at-home](https://github.com/k8s-at-home/charts/tree/master/charts/stable/littlelink-server)
 
 ```
 helm repo add k8s-at-home https://k8s-at-home.com/charts/
 helm repo update
 helm install littlelink-server \
   --set env.TZ="America/New York" \
-  --set env.META_TITLE="Technotim"
+  --set env.META_TITLE="TechnoTim"
     k8s-at-home/littlelink-server
 ```
 Or use a values.yaml files

docker-compose.yml

@@ -19,13 +19,12 @@ services:
       - BIO=Hey! Just a place where you can connect with me!
       - GITHUB=https://github.com/timothystewart6
       - TWITTER=https://twitter.com/TechnoTimLive
-      - MASTODON=https://mastodon.social/TechnoTimLive
       - INSTAGRAM=https://www.instagram.com/techno.tim
       - YOUTUBE=https://www.youtube.com/channel/UCOk-gHyjcWZNj3Br4oxwh0A/
       - TWITCH=https://www.twitch.tv/technotim/
       - DISCORD=https://discord.gg/DJKexrJ
       - KIT=https://kit.co/TechnoTim
-      - FOOTER=Thanks for stopping by!
+      - FOOTER=Thanks for stopping by!!!
 
     ports:
       - 8080:3000