New tailwind-based joinlemmy-site (#243)

* Starting on new tailwind based joinlemmy-site.

* Formatting fix.

* Adding follow communities block.

* Adding a few more blocks.

* Finishing up blocks.

* Adding a few more pages.

* Adding apps page.

* Almost done with donation page.

* Adding most of instances page.

* Trying to fix CI 1.

* Adding navbar and footer.

* Adding bottom spacer.

* Finishing up more info modal.

* Adding icons to main page.

* Eruda only in development mode.

* Finishing up main page, starting to work on recs.

* Adding main images.

* Adding images 2.

* Starting to add filters.

* Finishing up helper modal.

* Adding topic icons.

* Adding more instances.

* Fixing recommended.

* Forgot to add instance picker.

* Adding world background image.

* Adding alexandrite.

* Adding funding goal block.

* Fix dockerfile.

* Upgrading deps.

* Fixing package json.

* Updating coders, sponsors.

* Fixing mobile margins.

* Fixing navbar auto-close when clicked.

* Removing todo.

* Removing some useless instance helper links.

* Fixing news titling.

* Addressing PR comments.

* Updating instance stats.

* Fixing class -> className

* Fixing sm:max directives.

* Make instance images links to their sites.

* Use ubuntu font.

* Addressing PR comments.

* Adding a few more android apps.

* Adding thunder and combustible apps.

* Fixing z index.

* Add a warning alert for closed source apps.

* Adding MLMYM app. Fixes #213

* Fixing i18n key.

* Adding QR codes for cryptos. Fixes #219

* Addressing PR comments.

* Fixing news preview.

* Adding registration mode to details modal. Fixes #153

* Filter out bot instances.

* Using glide carousel.

* Adding glide min css.

* Adding donation platform fetching. Fixes #248

* Prettying glide css.

* Change dev goal to 3

* Adding sign up button.

* Minifying docker image.

* Removing sortpack.

.dockerignore

@@ -1,3 +1,4 @@
 .git
 node_modules
 dist
+lemmy-stats-crawler

.eslintignore

@@ -1,3 +1,4 @@
 generate_translations.js
 webpack.config.js
+tailwind.config.js
 src/api_tests

.gitmodules

@@ -5,7 +5,7 @@
 [submodule "joinlemmy-translations"]
 	path = joinlemmy-translations
 	url = https://github.com/lemmynet/joinlemmy-translations
-	branch = main
+	branch = tailwind_rework
 [submodule "lemmy-translations"]
 	path = lemmy-translations
 	url = https://github.com/lemmynet/lemmy-translations
@@ -17,3 +17,4 @@
 [submodule "lemmy-stats-crawler"]
 	path = lemmy-stats-crawler
 	url = https://github.com/LemmyNet/lemmy-stats-crawler.git
+	branch = main

.woodpecker.yml

@@ -16,25 +16,25 @@ pipeline:
   prettier_markdown_check:
     image: tmknom/prettier:3.0.0
     commands:
-      - prettier -c . "!dist" "!lemmy-docs" "!lemmy-translations" "!joinlemmy-translations" "!lemmy-js-client" "!lemmy-stats-crawler" "!src/shared/instance_stats.ts"
+      - prettier -c . "!dist" "!lemmy-docs" "!lemmy-translations" "!joinlemmy-translations" "!lemmy-js-client" "!lemmy-stats-crawler" "!src/shared/instance_stats.ts" "!src/shared/donation_stats.ts"
 
   yarn:
-    image: node:14-alpine
+    image: node:alpine
     commands:
       - yarn
 
   yarn_lint:
-    image: node:14-alpine
+    image: node:alpine
     commands:
       - yarn lint
 
   yarn_build_dev:
-    image: node:14-alpine
+    image: node:alpine
     commands:
       - yarn build:dev
 
   nightly_instance_crawl:
-    image: node:14-alpine
+    image: node:alpine
     commands:
       # libpq and openssl can probably be removed after lemmy dep is upgraded to 0.16.4+
       - apk add cargo pkgconfig openssl openssl-dev libpq libpq-dev
@@ -58,7 +58,7 @@ pipeline:
         - cron
 
   release_instance_crawl:
-    image: node:14-alpine
+    image: node:alpine
     commands:
       # libpq and openssl can probably be removed after lemmy dep is upgraded to 0.16.4+
       - apk add cargo pkgconfig openssl openssl-dev libpq libpq-dev

Dockerfile

@@ -24,19 +24,21 @@ RUN yarn docs
 
 # Build the isomorphic app
 FROM node:alpine as builder
-RUN apk update && apk add yarn python3 build-base gcc wget git --no-cache
+RUN apk update && apk add yarn python3 build-base gcc wget git curl --no-cache
+RUN curl -sf https://gobinaries.com/tj/node-prune | sh
 
 WORKDIR /app
 
 # Cache deps
 COPY package.json yarn.lock ./
-RUN yarn install --pure-lockfile
+RUN yarn --production --prefer-offline --pure-lockfile
 
 # Build
 COPY tsconfig.json \
   webpack.config.js \
   .babelrc \
   generate_translations.mjs \
+  tailwind.config.js \
   ./
 
 COPY joinlemmy-translations joinlemmy-translations
@@ -47,9 +49,18 @@ COPY src src
 COPY --from=docs /app/docs ./src/assets/docs
 COPY --from=api /app/lemmy-js-client/docs ./src/assets/api
 
-RUN yarn install --pure-lockfile
+RUN yarn --production --prefer-offline
 RUN yarn build:prod
 
+# Prune the image
+RUN node-prune ./node_modules
+
+RUN rm -rf ./node_modules/import-sort-parser-typescript
+RUN rm -rf ./node_modules/typescript
+RUN rm -rf ./node_modules/npm
+
+RUN du -sh ./node_modules/* | sort -nr | grep '\dM.*'
+
 FROM node:alpine as runner
 COPY --from=builder /app/dist /app/dist
 COPY --from=builder /app/node_modules /app/node_modules

crawl.mjs

@@ -52,7 +52,7 @@ try {
     process.stdout.write(strData);
   });
 
-  run.on("close", exitCode => {
+  run.on("close", _exitCode => {
     var stats = JSON.parse(savedOutput);
     // Crawl results from all instances include tons of data which needs to be compiled.
     // If it is too much data it breaks the build, so we need to exclude as much as possible.

deploy.sh

@@ -4,8 +4,10 @@
 ./update_submodules.sh
 
 yarn crawl
+yarn update-donations
 git add "src/shared/instance_stats.ts"
-git commit -m "Crawl instance statistics"
+git add "src/shared/donation_stats.ts"
+git commit -m "Crawl and donation instance statistics"
 
 # look for unused translations
 for langfile in joinlemmy-translations/translations/*.json; do

package.json

@@ -8,64 +8,71 @@
     "build:prod": "webpack --mode=production",
     "clean": "yarn run rimraf dist",
     "crawl": "node crawl.mjs",
+    "update-donations": "node update_donations.mjs",
     "lint": "node generate_translations.mjs && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx src && prettier --check \"src/**/*.{ts,tsx,js,css,scss}\"",
-    "prebuild:dev": "yarn clean && node generate_translations.mjs",
-    "prebuild:prod": "yarn clean && node generate_translations.mjs",
+    "prebuild:dev": "yarn clean && node generate_translations.mjs && yarn tailwind",
+    "prebuild:prod": "yarn clean && node generate_translations.mjs && yarn tailwind",
+    "tailwind": "tailwindcss -i ./src/style.css -o ./dist/styles/styles.css --minify",
     "prepare": "husky install",
-    "start": "yarn build:dev --watch"
+    "start": "yarn build:dev --watch & yarn tailwind --watch"
   },
   "repository": "https://github.com/LemmyNet/joinlemmy-site",
   "dependencies": {
-    "@typescript-eslint/parser": "^5.60.1",
-    "chota": "^0.9.2",
+    "@glidejs/glide": "3.5.2",
+    "classnames": "^2.3.2",
     "express": "~4.18.2",
-    "i18next": "^23.2.6",
-    "inferno": "^8.2.1",
-    "inferno-create-element": "^8.2.1",
+    "i18next": "^23.5.1",
+    "inferno": "^8.2.2",
+    "inferno-create-element": "^8.2.2",
     "inferno-helmet": "^5.2.1",
-    "inferno-hydrate": "^8.2.1",
+    "inferno-hydrate": "^8.2.2",
     "inferno-i18next": "github:nimbusec-oss/inferno-i18next#semver:^7.4.2",
-    "inferno-router": "^8.2.1",
-    "inferno-server": "^8.2.1",
-    "markdown-it": "^13.0.1",
-    "node-fetch": "^3.3.1"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.22.5",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-transform-runtime": "^7.22.5",
-    "@babel/plugin-transform-typescript": "^7.22.5",
-    "@babel/preset-env": "7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
-    "@babel/runtime": "^7.22.5",
-    "@types/express": "^4.17.17",
-    "@types/node": "^20.3.2",
-    "@types/node-fetch": "^2.6.4",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "babel-loader": "^9.1.2",
-    "babel-plugin-inferno": "^6.6.0",
+    "inferno-router": "^8.2.2",
+    "tailwindcss": "^3.3.3",
+    "inferno-server": "^8.2.2",
+    "webpack": "5.88.2",
+    "daisyui": "^3.9.2",
+    "@babel/runtime": "^7.23.2",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^11.0.0",
+    "run-node-webpack-plugin": "^1.3.0",
+    "@tailwindcss/typography": "^0.5.10",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-runtime": "^7.23.2",
+    "@babel/plugin-transform-typescript": "^7.22.15",
+    "markdown-it": "^13.0.2",
+    "babel-loader": "^9.1.3",
+    "@babel/preset-env": "7.23.2",
+    "@babel/preset-typescript": "^7.23.2",
+    "babel-plugin-inferno": "^6.7.0",
+    "@babel/core": "^7.23.2",
+    "webpack-node-externals": "^3.0.0",
     "countries-list": "^2.6.1",
+    "node-fetch": "^3.3.2",
+    "webpack-cli": "^5.1.4",
+    "qrcode": "^1.5.3"
+  },
+  "devDependencies": {
+    "@typescript-eslint/parser": "^6.7.5",
+    "@types/express": "^4.17.19",
+    "@types/glidejs__glide": "^3.6.3",
+    "@types/node": "^20.8.4",
+    "@types/node-fetch": "^2.6.6",
+    "@types/qrcode": "^1.5.4",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
     "css-loader": "^6.8.1",
-    "eslint": "^8.43.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint": "^8.51.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "husky": "^8.0.3",
-    "lint-staged": "^13.2.3",
-    "mini-css-extract-plugin": "^2.7.6",
-    "prettier": "^3.0.0",
-    "rimraf": "^5.0.1",
-    "run-node-webpack-plugin": "^1.3.0",
-    "sass": "^1.63.6",
+    "lint-staged": "^14.0.1",
+    "prettier": "^3.0.3",
+    "rimraf": "^5.0.5",
+    "sass": "^1.69.3",
     "sass-loader": "^13.3.2",
-    "sortpack": "^2.3.4",
     "style-loader": "^3.3.3",
-    "terser": "^5.18.2",
-    "typescript": "^5.1.6",
-    "webpack": "5.88.1",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "4.15.1",
-    "webpack-node-externals": "^3.0.0"
+    "terser": "^5.21.0",
+    "typescript": "^5.2.2",
+    "webpack-dev-server": "4.15.1"
   },
   "engines": {
     "node": ">=8.9.0"
@@ -75,9 +82,6 @@
     "*.{ts,tsx,js}": [
       "prettier --write",
       "eslint --fix"
-    ],
-    "package.json": [
-      "sortpack"
     ]
   }
 }

recommended-instances.json

@@ -1,24 +1,19 @@
 {
-  "en": [
-    "sopuli.xyz",
-    "sh.itjust.works",
-    "lemmy.fmhy.ml",
-    "discuss.tchncs.de",
+  "start_scan_instances": [
+    "lemmy.ml",
     "lemm.ee",
+    "lemmy.world",
+    "feddit.it",
+    "lemmygrad.ml",
     "reddthat.com",
+    "lemmy.sdf.org",
+    "feddit.uk",
+    "hexbear.net",
+    "lemmy.fmhy.ml",
     "discuss.online",
+    "feddit.de",
     "lemmings.world"
   ],
-  "fr": ["sh.itjust.works"],
-  "da": ["feddit.dk"],
-  "de": ["feddit.de", "discuss.tchncs.de"],
-  "nl": ["feddit.nl"],
-  "pt": ["lemmy.pt"],
-  "pt-PT": ["lemmy.pt"],
-  "pt-BR": ["lemmy.pt"],
-  "eu": ["lemmy.eus"],
-  "ja": ["tabinezumi.net", "lm.korako.me"],
-  "it": ["feddit.it"],
   "exclude": [
     "lemmy.glasgow.social",
     "ds9.lemmy.ml",
@@ -29,6 +24,7 @@
     "lemmy.burger.rodeo",
     "bakchodi.org",
     "lemmy.comfysnug.space",
+    "ani.social",
     "rqd2.net"
   ]
 }