Bump deps

example.env → .env.example

@@ -34,10 +34,6 @@ DISCORD_BOT_TOKEN="your_discord_bot_token"
 # user with discord id will be promoted to admin if account does not exist
 SETUP_WHITELIST_DISCORD_ID="00000000000000000"
 
-# master key for meili search engine
-# read more at https://docs.meilisearch.com/reference/features/authentication.html
-MEILI_MASTER_KEY="a_super_secret_long_randomly_generated_string_that_is_secure"
-
 # mongo-express login credits
 # this is not needed as long as you do not use the mongo-express container for debugging the web app
 ME_CONFIG_BASICAUTH_USERNAME="admin"

.github/workflows/codeql.yml

@@ -1,11 +1,11 @@
-name: "CodeQL"
+name: 'CodeQL'
 
 on:
   push:
-    branches: [ 'main' ]
+    branches: ['main']
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ 'main' ]
+    branches: ['main']
   schedule:
     - cron: '58 20 * * 2'
 
@@ -21,43 +21,42 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'javascript' ]
+        language: ['javascript']
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
         # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v3
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-
-        # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-        queries: +security-and-quality
-
-
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, Go, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
-
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
-
-    #   If the Autobuild fails above, remove it and uncomment the following three lines.
-    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
-
-    # - run: |
-    #   echo "Run, Build Application using script"
-    #   ./location_of_script_within_repo/buildscript.sh
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
-      with:
-        category: "/language:${{matrix.language}}"
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
+
+          # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+          queries: +security-and-quality
+
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, Go, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v2
+
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+      #   If the Autobuild fails above, remove it and uncomment the following three lines.
+      #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+      # - run: |
+      #   echo "Run, Build Application using script"
+      #   ./location_of_script_within_repo/buildscript.sh
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2
+        with:
+          category: '/language:${{matrix.language}}'

Dockerfile

@@ -1,4 +1,16 @@
-FROM node:21.0
+# Install dependencies only when needed
+FROM oven/bun:1.1.17-alpine AS deps
+WORKDIR /app
+
+COPY package.json bun.lockb ./
+RUN bun install --frozen-lockfile
+
+# Rebuild the source code only when needed
+FROM node:22.3-alpine AS builder
+WORKDIR /app
+
+COPY --from=deps /app/node_modules ./node_modules
+ENV PATH /app/node_modules/.bin:$PATH
 
 # We use the image browserless/chrome instead of having our own chrome instance here
 ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD="true"
@@ -30,24 +42,17 @@ EXPOSE 3033
 HEALTHCHECK CMD curl --fail http://localhost:3033 || exit 1
 
 LABEL org.opencontainers.image.vendor="TheIndex" \
-      org.opencontainers.image.url="https://theindex.moe" \
-      org.opencontainers.image.description="Webserver of TheIndex" \
-      org.opencontainers.image.title="TheIndex" \
-      maintainer="Community of TheIndex"
-
-WORKDIR /app
-ENV PATH /app/node_modules/.bin:$PATH
+    org.opencontainers.image.url="https://theindex.moe" \
+    org.opencontainers.image.description="Webserver of TheIndex" \
+    org.opencontainers.image.title="TheIndex" \
+    maintainer="Community of TheIndex"
 
-# install the dependencies
-COPY package.json .
-COPY package-lock.json .
 
 # we want curl for the healthcheck
 RUN apt update -y && \
     apt install --no-install-recommends -y curl && \
     apt-get autoremove -y && \
     rm -rf /var/lib/apt/lists/* && \
-    npm ci && \
     npm install @next/swc-linux-x64-gnu
 
 # build the web app

README.md

@@ -86,7 +86,7 @@ Afterwards, you will need to stop and remove your current running instance and s
 Here is a collection of the possible environment variables with their default values you should set in your `.env` file:
 
 | Parameter                    | Function                                                                                             | Default                              |
-| ---------------------------- |------------------------------------------------------------------------------------------------------| ------------------------------------ |
+| ---------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------ |
 | `NEXT_PUBLIC_SITE_NAME`      | The name of your site                                                                                | `"The Index"`                        |
 | `NEXT_PUBLIC_DOMAIN`         | Your domain or IP, remove trailing slash                                                             | `"https://theindex.moe"`             |
 | `NEXTAUTH_URL`               | Your domain or IP, remove trailing slash                                                             | `$NEXT_PUBLIC_DOMAIN`                |
@@ -180,7 +180,7 @@ To start coding on the frontend, you will need to make sure, you have the latest
 [node.js](https://nodejs.org/) correctly installed. To install all the required dependencies run once:
 
 ```shell
-npm install
+bun install
 ```
 
 > Note: We decided to stick with npm instead of yarn to manage dependencies.
@@ -190,7 +190,7 @@ You should now have a folder called `node_modules`, which contains all the depen
 will have to run a db server in the background and start the frontend via:
 
 ```shell
-npm run dev
+bun run dev
 ```
 
 After compiling you can open [http://localhost:3000](http://localhost:3000) in your browser of choice and see the
@@ -215,7 +215,7 @@ We use [prettier](https://prettier.io) to ensure a consistent code style across
 auto-format everything with e.g. running the command
 
 ```shell
-npx prettier --write .
+bunx prettier --write .
 ```
 
 ## Design of the web app

components/alerts/SupportBanner.tsx

@@ -57,4 +57,4 @@ const SupportBanner: FC = () => {
   )
 }
 
-export default SupportBanner;
+export default SupportBanner

components/buttons/Button.module.css

@@ -6,7 +6,9 @@
   background-color: var(--bg-4);
   border-radius: 0.25rem;
   color: var(--bs-secondary);
-  transition: background-color ease-in-out 0.15s, color ease-in-out 0.15s;
+  transition:
+    background-color ease-in-out 0.15s,
+    color ease-in-out 0.15s;
 }
 
 .button:hover,

components/buttons/Button.tsx

@@ -47,4 +47,4 @@ const Button: FC<Props> = ({
   )
 }
 
-export default Button;
+export default Button

components/cards/Card.module.css

@@ -1,7 +1,9 @@
 .card {
   width: 100%;
   border-right: 3px solid var(--bg-2);
-  transition: border-right-color ease-in-out 0.1s, box-shadow ease-in-out 0.1s;
+  transition:
+    border-right-color ease-in-out 0.1s,
+    box-shadow ease-in-out 0.1s;
   min-height: 69px;
 }
 

components/cards/Card.tsx

@@ -54,8 +54,8 @@ const Card: FC<Props> = ({
     ('urlId' in content
       ? content.urlId
       : 'uid' in content
-      ? content.uid
-      : content._id)
+        ? content.uid
+        : content._id)
 
   if (typeof content === 'undefined') {
     return <Loader />

components/cards/DataCard.tsx

@@ -48,4 +48,4 @@ const DataCard: FC<Props> = ({ data, column, onChange = null }) => {
   )
 }
 
-export default DataCard;
+export default DataCard

components/data/FeatureValue.tsx

@@ -48,4 +48,4 @@ const FeatureValue: FC<Props> = ({
   )
 }
 
-export default FeatureValue;
+export default FeatureValue

components/data/Input.module.css

@@ -4,7 +4,9 @@
   border: 1px solid var(--bg-4);
   border-radius: 0.25rem;
   color: #fff;
-  transition: background-color ease-in-out 0.15s, color ease-in-out 0.15s;
+  transition:
+    background-color ease-in-out 0.15s,
+    color ease-in-out 0.15s;
   cursor: pointer;
   padding: 0.375rem 2.25rem 0.375rem 0.75rem;
   -moz-padding-start: calc(0.75rem - 3px);

components/data/UrlBadge.module.css

@@ -2,7 +2,9 @@
   cursor: pointer;
   user-select: none;
   background-color: var(--bs-secondary);
-  transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
+  transition:
+    color 0.1s ease-in-out,
+    background-color 0.1s ease-in-out;
 }
 
 .badge:hover {

components/edit/EditCollection.tsx

@@ -213,4 +213,4 @@ const EditCollection: FC<Props> = ({
   )
 }
 
-export default EditCollection;
+export default EditCollection

components/edit/EditItem.tsx

@@ -342,4 +342,4 @@ const EditItem: FC<Props> = ({
   )
 }
 
-export default EditItem;
+export default EditItem

components/edit/EditLibrary.tsx

@@ -23,15 +23,15 @@ type Props = {
 }
 
 const EditLibrary: FC<Props> = ({
-                                  libraries = [],
-                                  _id,
-                                  urlId = '',
-                                  img = 'puzzled.png',
-                                  name = '',
-                                  nsfw = false,
-                                  description = '',
-                                  collections = [],
-                                }) => {
+  libraries = [],
+  _id,
+  urlId = '',
+  img = 'puzzled.png',
+  name = '',
+  nsfw = false,
+  description = '',
+  collections = [],
+}) => {
   const [nameState, setName] = useState(name || '')
   const [urlIdState, setUrlId] = useState(urlId || '')
   const [imgState, setImg] = useState(img || 'puzzled.png')

components/icons/Icon.module.css

@@ -1,5 +1,7 @@
 .icon {
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
     border-color 0.15s ease-in-out;
   display: inline-flex;
   justify-content: center;

components/navbar/Navbar.module.css

@@ -18,7 +18,9 @@
 .toggler {
   color: grey;
   background-color: var(--bg-8);
-  transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
+  transition:
+    color 0.1s ease-in-out,
+    background-color 0.1s ease-in-out;
 }
 
 .toggler:hover {

components/navbar/NavbarToggler.module.css

@@ -1,7 +1,9 @@
 .toggle {
   color: grey;
   background-color: var(--bg-8);
-  transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
+  transition:
+    color 0.1s ease-in-out,
+    background-color 0.1s ease-in-out;
   width: 40px;
   height: 40px;
 }

components/rows/ItemRow.tsx

@@ -94,4 +94,4 @@ const ItemRow: FC<Props> = ({
   )
 }
 
-export default ItemRow;
+export default ItemRow

components/rows/Row.module.css

@@ -2,7 +2,9 @@
   width: 100%;
   margin-right: 0.5rem;
   border-right: 3px solid var(--bg-2);
-  transition: border-right-color ease-in-out 0.1s, box-shadow ease-in-out 0.1s;
+  transition:
+    border-right-color ease-in-out 0.1s,
+    box-shadow ease-in-out 0.1s;
 }
 
 .row:hover {

components/rows/Row.tsx

@@ -53,8 +53,8 @@ const Row: FC<Props> = ({
     ('urlId' in content
       ? content.urlId
       : 'uid' in content
-      ? content.uid
-      : content._id)
+        ? content.uid
+        : content._id)
 
   if (typeof content === 'undefined') {
     return <Loader />

components/text/Title.tsx

@@ -58,4 +58,4 @@ const Title: FC<Props> = ({ type, content, contentLink }) => {
   )
 }
 
-export default Title;
+export default Title

docker-compose.yml

@@ -1,4 +1,3 @@
-version: '3.3'
 services:
   web:
     image: ghcr.io/theindexmoe/index
@@ -43,16 +42,22 @@ services:
     restart: unless-stopped
     volumes:
       - ./db:/data/db
+    ports:
+      - '27017:27017'
 
   redis:
     image: redis
     container_name: index-cache
     restart: unless-stopped
+    ports:
+      - '6379:6379'
 
   chrome:
     image: browserless/chrome
     container_name: index-chrome
     restart: unless-stopped
+    ports:
+      - '3300:3300'
 
   # this will not run if not explicitly called via docker-compose --profile dev
   mongo-express: