Merge pull request #70 from hwgilbert16/develop

v1.0.9 Release

Author: hwgilbert16

Dockerfile

@@ -1,4 +1,17 @@
 # syntax=docker/dockerfile:1.3-labs
+FROM node:lts-alpine3.18 as builder
+
+WORKDIR /usr/src/app
+
+RUN apk add g++ make py3-pip
+
+COPY package*.json .
+RUN npm clean-install --production --silent --legacy-peer-deps
+
+COPY . .
+RUN npm run generate
+RUN npm run build
+
 FROM node:lts-alpine3.18
 
 ARG NODE_ENV
@@ -19,16 +32,9 @@ ARG SCHOLARSOME_RECAPTCHA_SECRET
 
 WORKDIR /usr/src/app
 
-COPY package*.json .
-
-RUN apk add g++ make py3-pip
-RUN npm install --production --silent --unsafe-perm --legacy-peer-deps
-RUN apk del g++ make py3-pip
-
 COPY . .
-
-RUN npm run generate
-RUN npm run build
+COPY --from=builder /usr/src/app/dist ./dist
+COPY --from=builder /usr/src/app/node_modules ./node_modules
 
 RUN <<EOL
     touch .env
@@ -37,7 +43,6 @@ RUN <<EOL
     echo "DATABASE_URL=$DATABASE_URL\n" >> .env
     echo "JWT_SECRET=$JWT_SECRET\n" >> .env
     echo "HTTP_PORT=$HTTP_PORT\n" >> .env
-
     echo "S3_STORAGE_ENDPOINT=$S3_STORAGE_ENDPOINT\n" >> .env
     echo "S3_STORAGE_ACCESS_KEY=$S3_STORAGE_ACCESS_KEY\n" >> .env
     echo "S3_STORAGE_SECRET_KEY=$S3_STORAGE_SECRET_KEY\n" >> .env

README.md

@@ -19,6 +19,10 @@ https://scholarsome.com
 
 </div>
 
+<p align="center">
+<a href="https://news.ycombinator.com/item?id=36454783" target="_blank"><img height=53 src="https://hackerbadge.now.sh/api?id=36454783&type=orange" alt="Featured on HackerNews"></a>
+</p>
+
 <p align="center">
 <img src="https://i.imgur.com/MshTOaL.png">
 </p>
@@ -27,7 +31,9 @@ https://scholarsome.com
 
 Scholarsome <a href="http://ipa-reader.xyz/?text=%CB%88sk%C3%A4l%C9%99rs(%C9%99)m%2F">(pronounced ˈskälərs(ə)m/)</a> is a web-based and open source studying system. Through the use of flashcards, among other core features, users can practice memorization of terms and definitions, along with keeping their data secure locally.
 
-While other services have begun to paywall core functionalities, Scholarsome intends to offer an equal alternative that does not compromise on feature sets.
+While other services have begun to paywall core functionalities, Scholarsome intends to offer an equal alternative that does not compromise on features.
+
+You can read more about our design philosophy <a href="https://github.com/hwgilbert16/scholarsome#design-philosophy">here.</a>
 
 ## Features
 
@@ -76,6 +82,18 @@ Scholarsome is an open source project. We believe in a transparent development p
 - **Bug reports.** If you run into an issue using Scholarsome, please <a href="https://github.com/hwgilbert16/scholarsome/issues/new">create a bug report</a>. Make sure you attach the `bug` label to your issue.
 - **Feature requests.** We'd love to hear your ideas for future features. Please <a href="https://github.com/hwgilbert16/scholarsome/issues/new">create an issue</a> and attach the `feature request` label to propose a new feature.
 
+## Design Philosophy
+
+Many existing flashcard systems exist that offer countless features - Anki, SuperMemo, etc. However, we recognize that many of these tools can be daunting to new users, or are bloated with features that can be seen as overwhelming. This encourages new flashcard users to stick to simpler tools, causing them to lose out on more advanced functionality. Additionally, not all of these tools are open source.
+
+Scholarsome will bridge this gap between ease of use and functionality in multiple ways.
+
+One way is by offering a familiar web-based interface. There is no syncing between multiple devices to worry about, as data is stored, accessed, and edited from a central server. The process of syncing and having to think about where data is stored can be a confusing topic. Having the place where flashcards are edited be the same place they are stored simplifies this process.
+
+We're also selective about the order in which features are being added. Instead of using a scattershot method, we're working our way up from the simplest features that are the most commonly utilized to the most complex so that they can build upon each other. We write easy to understand guides that are intended to be understood from first glance by the layman. From the ground up, Scholarsome has been designed to have powerful learning tools, but still be understandable by anybody.
+
+It's important to note that Scholarsome is far from complete. We're firm believers of shipping fast and early to gain feedback from users. While some features may be absent at the moment, we love having early users that can ensure we have a stable foundation through valuable feedback.
+
 ## Contact
 
 For formal inquiries, you can contact us via [email protected]

apps/api/src/app/users/users.controller.ts

@@ -78,14 +78,8 @@ export class UsersController {
     delete user.verified;
     delete user.email;
 
-    for (let i = 0; i < user.sets.length; i++) {
-      if (cookies) {
-        if (user.sets[i].private && user.sets[i].authorId !== cookies.id) {
-          user.sets = user.sets.splice(i, i + 1);
-        }
-      } else {
-        user.sets = user.sets.filter((set) => set.private === false);
-      }
+    if (!cookies || user.id !== cookies.id) {
+      user.sets = user.sets.filter((set) => set.private === false);
     }
 
     return {

apps/api/src/main.ts

@@ -26,11 +26,10 @@ async function bootstrap() {
 
   const server = express();
   const app = await NestFactory.create(AppModule, new ExpressAdapter(server), {
-    bufferLogs: true
+    bufferLogs: process.env.NODE_ENV === "production"
   });
   const logger = LoggerFactory("Scholarsome");
   app.useLogger(logger);
-  logger.log("Application Started!");
 
   app.useGlobalPipes(
       new ValidationPipe({
@@ -68,11 +67,12 @@ async function bootstrap() {
 
   const document = SwaggerModule.createDocument(app, config);
   fs.writeFileSync("./dist/api-spec.json", JSON.stringify(document));
-  SwaggerModule.setup("api", app, document);
 
   await app.init();
 
   http.createServer(server).listen(process.env.HTTP_PORT);
+
+  logger.log("Scholarsome has started!");
 }
 
 bootstrap();

apps/docs/docs/installation/installing.md

@@ -33,13 +33,27 @@ mkdir ~/scholarsome && cd ~/scholarsome
 Download the compose file.
 
 ```
-wget https://raw.githubusercontent.com/hwgilbert16/scholarsome/develop/compose.yml
+wget https://raw.githubusercontent.com/hwgilbert16/scholarsome/release/compose.yml
 ```
 
+:::caution
+If you will be using a valid SSL certificate with Scholarsome, you will need to modify your `compose.yml` file to inform Docker Compose what port you would like the SSL version of Scholarsome to be accessible on. If you use an SSL certificate, Scholarsome will run both an HTTP and HTTPS version of the site.
+
+Open the `compose.yml` file in any text editor and navigate to line 29.
+
+```
+# - "(your ssl port):8443"
+```
+
+Remove the hashtag to uncomment the line, and replace `(your ssl port)` with the port that you would like the SSL version of Scholarsome to be accessible on.
+
+Keep in mind that **non-root** users, by default, **do not have permission to bind to ports lower than 1024.** If you will be running SSL on a port lower than 1024, ensure that the user running the Scholarsome process has necessary permissions.
+:::
+
 Download the environment file and make a copy of it.
 
 ```
-wget https://raw.githubusercontent.com/hwgilbert16/scholarsome/develop/.env.compose.example && cp .env.compose.example .env
+wget https://raw.githubusercontent.com/hwgilbert16/scholarsome/release/.env.compose.example && cp .env.compose.example .env
 ```
 
 Open the `.env` file in any text editor.
@@ -49,7 +63,7 @@ Expand the dropdown below, it lists Scholarsome's environment variables. These a
 Additionally, if you are using S3 as your storage medium, you will need to fill the `S3_` fields as well.
 
 :::info
-If the SMTP fields are left blank, users will be verified by default. Most installations do not need to enforce email verification.
+If the SMTP fields are left blank, users will not have to verify their emails. Most installations do not need to enforce email verification, unless you are planning to expose Scholarsome to other users.
 :::
 
 <details>
@@ -80,7 +94,6 @@ If the SMTP fields are left blank, users will be verified by default. Most insta
 
 </details>
 
-
 Start the service in a detached state.
 
 ```
@@ -111,7 +124,7 @@ docker pull hwgilbert16/scholarsome
 Download the environment file and make a copy of it.
 
 ```
-wget https://raw.githubusercontent.com/hwgilbert16/scholarsome/develop/.env.docker.example && cp .env.docker.example .env
+wget https://raw.githubusercontent.com/hwgilbert16/scholarsome/release/.env.docker.example && cp .env.docker.example .env
 ```
 
 Open `.env` in any text editor.

apps/front/src/app/app.module.ts

@@ -68,6 +68,29 @@ Quill.register("modules/imageResize", ImageResize);
     QuillConfigModule.forRoot({
       modules: {
         imageResize: true,
+        keyboard: {
+          bindings: {
+            tab: {
+              key: 9,
+              handler: () => {
+                const editors = document.querySelectorAll("quill-editor");
+
+                const buttons = [
+                  ...Array.from(editors[0].querySelectorAll("button")),
+                  ...Array.from(editors[0].querySelectorAll("[role=\"button\"]")),
+                  ...Array.from(editors[1].querySelectorAll("button")),
+                  ...Array.from(editors[1].querySelectorAll("[role=\"button\"]"))
+                ];
+
+                for (const button of buttons) {
+                  button.setAttribute("tabindex", "-1");
+                }
+
+                return true;
+              }
+            }
+          }
+        },
         toolbar: [
           ["bold", "italic", "underline", "strike"],
           ["code-block"],

apps/front/src/app/create/study-set/create-study-set.component.ts

@@ -1,5 +1,4 @@
 import { Component, ComponentRef, ElementRef, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
-import { HttpClient } from "@angular/common/http";
 import { AlertComponent } from "../../shared/alert/alert.component";
 import { Router } from "@angular/router";
 import { SetsService } from "../../shared/http/sets.service";
@@ -13,11 +12,7 @@ import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
   styleUrls: ["./create-study-set.component.scss"]
 })
 export class CreateStudySetComponent implements OnInit {
-  /**
-   * @ignore
-   */
   constructor(
-    private readonly http: HttpClient,
     private readonly router: Router,
     private readonly sets: SetsService,
     private readonly titleService: Title,
@@ -35,6 +30,8 @@ export class CreateStudySetComponent implements OnInit {
 
   protected formDisabled = false;
 
+  protected emptyTitleAlert = false;
+
   protected faQuestionCircle = faQuestionCircle;
 
   // index starts at 0
@@ -43,16 +40,19 @@ export class CreateStudySetComponent implements OnInit {
   async createSet() {
     const cards: { index: number; term: string; definition: string; }[] = [];
 
-    if (!this.titleInput.element.nativeElement.value) {
+    if (!this.titleInput.element.nativeElement.value && !this.emptyTitleAlert) {
       const alert = this.titleInput.createComponent<AlertComponent>(AlertComponent);
 
       alert.instance.message = "Title must not be empty";
       alert.instance.type = "danger";
       alert.instance.dismiss = true;
       alert.instance.spacingClass = "mt-3";
 
+      this.emptyTitleAlert = true;
+      setTimeout(() => this.emptyTitleAlert = false, 3000);
+
       return;
-    }
+    } else if (!this.titleInput.element.nativeElement.value) return;
 
     for (const card of this.cards) {
       if (card.component.instance.term.length !== 0 && card.component.instance.definition.length !== 0) {

apps/front/src/app/header/header.component.ts

@@ -101,6 +101,21 @@ export class HeaderComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   async ngOnInit(): Promise<void> {
+    if (this.cookieService.get("authenticated")) {
+      // we set this.user here so that it can be checked on every router event and log users out if auth invalid
+      // however since header initializes on the homepage, this.user will not be set immediately after login
+      // technically this would cause an issue if the tokens were invalid immediately after login
+      // however it is more than overwhelmingly likely that any token issues with be on a future page reload when the user is already logged in
+      this.signedIn = true;
+      const user = await this.usersService.myUser();
+
+      if (user) {
+        this.user = user;
+      } else {
+        this.signedIn = false;
+      }
+    }
+
     this.sharedService
         .isUpdateAvailable()
         .then((r) => (this.updateAvailable = r));
@@ -112,9 +127,15 @@ export class HeaderComponent implements OnInit, AfterViewInit, OnDestroy {
 
         if (!this.hidden && this.signedIn) {
           const user = await this.usersService.myUser();
-          if (user) this.user = user;
 
-          await this.viewAvatar();
+          // if this user was authenticated and is now no longer authenticated, sign them out
+          if (this.user && !user) {
+            await this.authService.logout();
+            await this.router.navigate([""]);
+          } else if (user) {
+            this.user = user;
+          }
+
           this.profilePictureModal.updateAvatarEvent.subscribe(async () => await this.viewAvatar());
         }
       }
@@ -139,13 +160,11 @@ export class HeaderComponent implements OnInit, AfterViewInit, OnDestroy {
 
     this.checkIfVerifiedInCookie();
 
-    if (this.deviceService.isTablet() || this.deviceService.isMobile()) {
+    if (this.deviceService.isMobile()) {
       this.isMobile = true;
     }
 
-    if (this.cookieService.get("authenticated")) {
-      this.signedIn = true;
-    }
+    if (this.signedIn && !this.hidden) await this.viewAvatar();
 
     // Hide modals when the route changes
     this.router.events.subscribe(() => this.modalRef?.hide());

apps/front/src/app/homepage/homepage.component.html

@@ -8,34 +8,26 @@
   <div class="d-flex header">
     <h2>Your sets</h2>
   </div>
-  <div class="row row-cols-1 row-cols-md-4 g-4 py-4 px-3 w-100">
-    <div *ngIf="sets && sets.length === 0" class="text-secondary">
+  <div class="row row-cols-1 row-cols-md-4 g-4 py-4 px-3 w-100" *ngIf="user">
+    <div *ngIf="user.sets.length === 0" class="text-secondary">
       You haven't created any sets yet.
       <a [routerLink]="['/create/set']">Create your first one.</a>
     </div>
-    <a
-      *ngFor="let set of sets"
-      [routerLink]="['/study-set', set.id]"
-      class="text-decoration-none"
-    >
-      <div class="col">
-        <div class="card shadow set-card" role="button">
-          <div class="card-body">
-            <h5 class="card-title">
-              {{ set.title }}
-              <fa-icon
-                *ngIf="set.private"
-                [icon]="['far', 'eye-slash']"
-              ></fa-icon>
-            </h5>
-            <h6 class="card-subtitle text-muted">
-              {{ set.cards.length }} term{{
-                this.set.cards.length > 1 ? 's' : ''
-              }}
-            </h6>
-          </div>
+    <div class="col" *ngFor="let set of user.sets">
+      <div class="card shadow-sm set-card h-100" [routerLink]="['/study-set', set.id]" role="button">
+        <div class="card-body d-flex flex-column">
+          <h5 class="card-title">
+            {{ set.title }}
+            <fa-icon
+              *ngIf="set.private"
+              [icon]="['far', 'eye-slash']"
+            ></fa-icon>
+          </h5>
+        </div>
+        <div class="card-footer mt-auto">
+          <small class="text-body-secondary">Updated on {{ set.updatedAt.toLocaleString('en-us', { month:'short', day: 'numeric', year:'numeric'}) }}</small>
         </div>
       </div>
-    </a>
+    </div>
   </div>
 </div>