Merge pull request #37 from yqni13/fix-manual-host

fixed hosting problems
yqni13 · Jul 1, 2024 · 46f5be8 · 46f5be8
2 parents b3876da + a5c4599
commit 46f5be8
Show file tree

Hide file tree

Showing 11 changed files with 111 additions and 76 deletions.
diff --git a/.github/workflows/main.yml → .github/workflows/deploy.yml b/.github/workflows/main.yml → .github/workflows/deploy.yml
@@ -29,9 +29,8 @@ jobs:
         run: npm run build:prod
 
       - name: Deploy to GitHub Pages
-        uses: crazy-max/ghaction-github-pages@v4
-        with:
-          target_branch: gh-pages
-          build_dir: dist/portfolio
+        run:
+          npx angular-cli-ghpages --dir=dist/portfolio --repo=https://github.com/yqni13/portfolio.git --base-href=/portfolio/ --branch=production
+
         env:
           GH_PAT: ${{ secrets.PORTFOLIO_PAT }}
diff --git a/README.md b/README.md
@@ -1,12 +1,7 @@
 # yqni13 portfolio
-$\texttt{\color{teal}{v2.5.0}}$
+$\texttt{\color{teal}{v2.5.5}}$
 
-<br>
 
-$\texttt{\color{red}{!\ !\ !\ }}$<br>
-<b>Currently deployment via angular-cli-ghpages does NOT work for this portfolio. That is why the deployment is running on the 'production' branch instead of the 'gh-pages' branch, which apparently DOES NOT SUPPORT angular multi page applications. Refreshing the webpage will lead to 404 and homepage must be navigated to https://yqni13.github.io/portfolio again. The new version is build into '/docs' folder (hosting is set to check all necessary files in there) and normally merged into 'production' branch. Please note that I am working on this issue parallel to some security vulnerabilities and updating to Angular 18.
-</b><br>
-$\texttt{\color{red}{!\ !\ !\ }}$
 <br><br>
 
 <div>
@@ -36,7 +31,12 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
 Get startet with `npm install` to create necessary modules and run `ng serve` to start on local dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
 
 ### BUILD & DEPLOY
-To host the application on GitHub Pages directly from CLI, install the regarding package via `ng add angular-cli-ghpages`. See <a href="https://docs.angular.lat/guide/deployment">list of packages</a> for different hosting platforms deployed by command. Firstly, try the production build locally via command `ng serve --configuration production` to see, if there are differences between development and production build. Run `ng build --configuration production --base-href https://<username>.github.io/<projectname>` to create a deployable build in the folder /dist. For deployment, run `ng deploy --base-href=/<projectname>/` to push the necessary code automatically and trigger the workflow starting until project on 'https://username.github.io/projectname' is deployed. In contrast to my non-framework projects, the deployment will happen for angular projects on the 'gh-pages' branch due to the CLI-deployment instead of a 'production' branch.
+Hosting an Angular project via GitHub-Pages needs a bit more effort. Firstly, install the regarding package via `ng add angular-cli-ghpages`. See <a href="https://docs.angular.lat/guide/deployment">list of packages</a> for different hosting platforms deployed by cli. Run tests locally to avoid failed deployments ([see 'Testing'](#testing)). To host the application on GitHub, a customized CI/CD workflow is used which automatically starts when code changes are merged into the 'master' branch. By adding 'deploy.yml' to .github/workflows folder (folder starts from same level as angular.json), the run script will execute tests (ESLint and Angular unit-tests) before building the project and deploying it via angular-cli-ghpages on the predefined 'production' branch. All commands to run are keys in 'deploy.yml' and full commands as value for the keys in 'package.json' to find.
+<br><br>
+build:prod >> `ng build --configuration production --base-href https://<username>.github.com/<projectname>`
+<br>
+deploy >> `npx angular-cli-ghpages --dir=dist/<projectname> --repo=https://github.com/<username>/<projectname>.git --base-href=/<projectname>/ --branch=production`
+
 <br><br>
 
 ## Features
@@ -115,11 +115,21 @@ To optimize work I use the VS Code extension 'ESLint' from Microsoft.
 
 <br>
 
+### Angular unit tests & other tests
+
+Specified unit tests in xyz.component.spec.ts files or other tests are my last step of testing locally and in the CI/CD workflow. Run the following command in Powershell/Terminal:<br>
+`ng test --browsers=ChromeHeadless --watch=false --code-coverage`
+
+<br>
+
 ## Updates
 
 [list of all updates](src/docs/update_protocol.md)
-### $\textsf{last\ update\ 2.5.0\ >>\ {\color{pink}2.5.?}}$
+### $\textsf{last\ update\ 2.5.0\ >>\ {\color{pink}2.5.5}}$
 
+- $\textsf{\color{red}Patch:}$ Addressing webpage stability issues: Disabled error alert because of fixed hosting.
+- $\textsf{\color{red}Bugfix:}$ Default unit tests have all necessary declarations and imports. [Before: Template was not recognised as existing component because unit tests were missing the regarding declarations and imports.]
+- $\textsf{\color{red}Bugfix:}$ Hosting works again (refreshing does not lead to error 404) and CI/CD pipeline adapted. [Before: Necessary options in deployment command missing. Customized workflow was missing.]
 - $\textsf{\color{red}Bugfix:}$ Navigating to other page in menu resets scroll to top position (refresh gets back to current scroll position). [Before: Scroll position was used for next page so that it didn't start at top.]
 - $\textsf{\color{red}Bugfix:}$ The component 'portfolio' shows the correct number of cards with the regarding data. [Before: Due to change of ESLint errors, json data was fetched by import but loaded single objects additional to default collection of objects. Needed adaption in import command to load data only from default.]
 

diff --git a/src/api/json/project-data.json b/src/api/json/project-data.json
@@ -141,8 +141,8 @@
     "Portfolio": {
         "type": "frontend",
         "title": "Portfolio",
-        "version": "2.5.0",
-        "keywords": "live demo | portfolio | angular framework | english | responsive | custom design | dark/light theme | animation | custom search filter | template | multi page layout | custom alert",
+        "version": "2.5.5",
+        "keywords": "live demo | portfolio | angular framework | english | responsive | custom design | dark/light theme | animation | custom search filter | template | multi page layout | custom alert | ESLint | CI/CD Workflow",
         "technology": "Angular | RxJS | JSON",
         "cardScreenPath": "assets/img/web_portfolio.jpg",
         "githublink": "https://github.com/yqni13/portfolio",

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -30,8 +30,8 @@
             <span [ngClass]="setLight" (click)="setDarkMode()" (keydown.enter)="setDarkMode()"><i class="icon-LightMode" id="nav-lightmode"></i></span>
         </li>
         <li>
-            <p class="nav-full nav-issues" (click)="openAlertMsg(); expandNavMobile(true)"
-            (keydown.enter)="openAlertMsg(); expandNavMobile(true)">-current issues-</p>
+            <!-- <p class="nav-full nav-issues" (click)="openAlertMsg(); expandNavMobile(true)"
+            (keydown.enter)="openAlertMsg(); expandNavMobile(true)">-current issues-</p> -->
             <div class="link_icons">
                 <a href="https://github.com/yqni13" target="_blank"><i class="icon-GitHub"></i></a>
                 <a href="https://app.daily.dev/yqni13" target="_blank"><img src="assets/img/dailydev.png" alt="#"></a>
@@ -44,14 +44,14 @@
 
 
 </nav>
-<div class="error-msg-box" *ngIf="!isAccepted">
+<!-- <div class="error-msg-box" *ngIf="!isAccepted">
     <div class="error-wrapper">
         <p>
             There are currently problems with the hosting of this project on GitHub => normal navigating by nav-menu works perfectly, <span class="red-msg">refreshing (F5)</span> will lead to <span class="red-msg">Error: 404</span>. I am currently working on this issue. Until issue is closed, this message is available in nav-menu '-current issues-'<br><span class="green-msg">Accept to continue.</span><br>Started: 22.06.2024, v2.2.2<br>
         </p>
         <a (click)="closeAlertMsg()" (keydown.enter)="closeAlertMsg()">ACCEPT</a>
     </div>
-</div>
+</div> -->
 
 
 <router-outlet><router-outlet />
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -129,6 +129,10 @@ ul>:last-child p {
     font-size: 12px;
 }
 
+.footer-verification {
+    cursor: default;
+}
+
 /* --- ALERT STYLING --- */
 
 .error-msg-box {

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -9,11 +9,11 @@ import _ from 'underscore';
 })
 export class AppComponent implements OnInit {
 
-  public version = '2.5.0';
+  public version = '2.5.5';
   public copyrightYear: number = new Date().getFullYear();
   public setDark = "";
   public setLight = "";
-  public isAccepted = false;
+  // public isAccepted = false;
 
   private mobileNavExpended = false;
   private collapseNavbarWidth = 768;
@@ -29,7 +29,7 @@ export class AppComponent implements OnInit {
 
   ngOnInit() {
     this.checkThemeCookie();
-    this.checkAlertCookie();
+    // this.checkAlertCookie(); // TODO: disabled unless hotfix necessary
 
     this.setNavWidthDynamically(window.screen.width);
     this.setNavWidthDynamically(document.body.clientWidth);
@@ -101,28 +101,28 @@ export class AppComponent implements OnInit {
     }
   }
 
-  checkAlertCookie() {
-    const alertCookie = localStorage.getItem("yqni13-alert");
-    switch(alertCookie) {
-      case 'true':
-        this.isAccepted = true;
-        break;
-      case 'false':
-        this.isAccepted = false;
-        break;
-      default:
-        this.isAccepted = false;
-    }
-  }
-
-  openAlertMsg() {
-    this.isAccepted = false;
-  }
-
-  closeAlertMsg() {
-    this.isAccepted = true;
-    localStorage.setItem('yqni13-alert', 'true');
-  }
+  // checkAlertCookie() {
+  //   const alertCookie = localStorage.getItem("yqni13-alert");
+  //   switch(alertCookie) {
+  //     case 'true':
+  //       this.isAccepted = true;
+  //       break;
+  //     case 'false':
+  //       this.isAccepted = false;
+  //       break;
+  //     default:
+  //       this.isAccepted = false;
+  //   }
+  // }
+
+  // openAlertMsg() {
+  //   this.isAccepted = false;
+  // }
+
+  // closeAlertMsg() {
+  //   this.isAccepted = true;
+  //   localStorage.setItem('yqni13-alert', 'true');
+  // }
 
 
 }

diff --git a/src/app/cv/cv.component.html b/src/app/cv/cv.component.html
@@ -1,7 +1,7 @@
 <section class="box cv">
     <h2>CV.</h2>
     <div class="cv_download">
-        <a href="assets/pdf/Varga_Lebenslauf.pdf" download="CV_LukasVarga">download - cv</a>
+        <a href="assets/pdf/CV_LukasVarga.pdf" download="CV_LukasVarga">download - cv</a>
     </div>
     <div class="wrapper_cv block">
         <div class="column left_exp">
@@ -27,36 +27,37 @@ <h4>Technical skills</h4>
         <!-- </div> -->
         <div class="wrapper_ul">
             <ul>
-                <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank"><i class="icon-HTML5"></i></a></li>
-                <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS?retiredLocale=de" target="_blank"><i class="icon-CSS3"></i></a></li>
-                <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank"><i class="icon-Javascript"></i></a></li>
-                <li><a href="https://www.typescriptlang.org/" target="_blank"><i class="icon-Typescript"></i></a></li>
-                <li><a href="https://angular.io/" target="_blank"><i class="icon-Angular"></i></a></li>
-                <li><a href="https://dotnet.microsoft.com/en-us/languages/csharp" target="_blank"><i class="icon-CSharp"></i></a></li>
-                <li><a href="https://git-scm.com/" target="_blank"><i class="icon-git"></i></a></li>
-                <li><a href="https://github.com/" target="_blank"><i class="icon-GitHub" id="black_fill"></i></a></li>
-                <li><a href="https://about.gitlab.com/" target="_blank"><i class="icon-GitLab"></i></a></li>
-                <li><a href="https://gitextensions.github.io/" target="_blank"><i class="icon-GitExtensions"></i></a></li>
-                <li><a href="https://www.notion.so/product" target="_blank"><i class="icon-Notion"></i></a></li>
-                <li><a href="https://www.atlassian.com/" target="_blank"><i class="icon-Atlassian"></i></a></li>
-                <li><a href="https://www.mysql.com/" target="_blank"><i class="icon-MySQL" id="horizontal"></i></a></li>
-                <li><a href="https://www.postgresql.org/" target="_blank"><i class="icon-PostgreSQL"></i></a></li>
-                <li><a href="https://sass-lang.com/" target="_blank"><i class="icon-Sass"></i></a></li>
-                <li><a href="https://nodejs.org/en" target="_blank"><i class="icon-Nodejs"></i></a></li>
-                <li><a href="https://www.npmjs.com/" target="_blank"><i class="icon-npm"></i></a></li>
-                <li><a href="https://code.visualstudio.com/" target="_blank"><i class="icon-vscode"></i></a></li>
+                <li><a title="HTML5" href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank"><i class="icon-HTML5"></i></a></li>
+                <li><a title="CSS3" href="https://developer.mozilla.org/en-US/docs/Web/CSS?retiredLocale=de" target="_blank"><i class="icon-CSS3"></i></a></li>
+                <li><a title="Javascript" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank"><i class="icon-Javascript"></i></a></li>
+                <li><a title="Typescript" href="https://www.typescriptlang.org/" target="_blank"><i class="icon-Typescript"></i></a></li>
+                <li><a title="Angular" href="https://angular.io/" target="_blank"><i class="icon-Angular"></i></a></li>
+                <li><a title="C#" href="https://dotnet.microsoft.com/en-us/languages/csharp" target="_blank"><i class="icon-CSharp"></i></a></li>
+                <li><a title="Git" href="https://git-scm.com/" target="_blank"><i class="icon-git"></i></a></li>
+                <li><a title="GitHub" href="https://github.com/" target="_blank"><i class="icon-GitHub" id="black_fill"></i></a></li>
+                <li><a title="GitLab" href="https://about.gitlab.com/" target="_blank"><i class="icon-GitLab"></i></a></li>
+                <li><a title="GitExtensions" href="https://gitextensions.github.io/" target="_blank"><i class="icon-GitExtensions"></i></a></li>
+                <li><a title="Notion" href="https://www.notion.so/product" target="_blank"><i class="icon-Notion"></i></a></li>
+                <li><a title="Atlassian" href="https://www.atlassian.com/" target="_blank"><i class="icon-Atlassian"></i></a></li>
+                <li><a title="MySQL" href="https://www.mysql.com/" target="_blank"><i class="icon-MySQL" id="horizontal"></i></a></li>
+                <li><a title="PostgreSQL" href="https://www.postgresql.org/" target="_blank"><i class="icon-PostgreSQL"></i></a></li>
+                <li><a title="SaSS" href="https://sass-lang.com/" target="_blank"><i class="icon-Sass"></i></a></li>
+                <li><a title="NodeJS" href="https://nodejs.org/en" target="_blank"><i class="icon-Nodejs"></i></a></li>
+                <li><a title="NPM" href="https://www.npmjs.com/" target="_blank"><i class="icon-npm"></i></a></li>
+                <li><a title="VSCode" href="https://code.visualstudio.com/" target="_blank"><i class="icon-vscode"></i></a></li>
             </ul>
         </div>
         <h4>First Experiences</h4>
         <div class="wrapper_ul">
             <ul>
-                <li><a href="https://getbootstrap.com/" target="_blank"><i class="icon-Bootstrap"></i></a></li>
-                <li><a href="https://jquery.com/" target="_blank"><i class="icon-jQuery"></i></a></li>
-                <li><a href="https://rxjs.dev" target="_blank"><i class="icon-RxJS"></i></a></li>
-                <li><a href="https://www.postman.com/" target="_blank"><i class="icon-Postman"></i></a></li>
-                <li><a href="https://www.docker.com/" target="_blank"><i class="icon-Docker"></i></a></li>
-                <li><a href="https://kotlinlang.org/" target="_blank"><i class="icon-Kotlin"></i></a></li>
-                <li><a href="https://www.jenkins.io/" target="_blank"><i class="icon-Jenkins"></i></a></li>
+                <li><a title="CI/CD" href="https://resources.github.com/devops/ci-cd/" target="_blank"><i class="icon-CiCd"></i></a></li>
+                <li><a title="Bootstrap" href="https://getbootstrap.com/" target="_blank"><i class="icon-Bootstrap"></i></a></li>
+                <li><a title="jQuery" href="https://jquery.com/" target="_blank"><i class="icon-jQuery"></i></a></li>
+                <li><a title="RxJS" href="https://rxjs.dev" target="_blank"><i class="icon-RxJS"></i></a></li>
+                <li><a title="Postman" href="https://www.postman.com/" target="_blank"><i class="icon-Postman"></i></a></li>
+                <li><a title="Docker" href="https://www.docker.com/" target="_blank"><i class="icon-Docker"></i></a></li>
+                <li><a title="Kotlin" href="https://kotlinlang.org/" target="_blank"><i class="icon-Kotlin"></i></a></li>
+                <li><a title="Jenkins" href="https://www.jenkins.io/" target="_blank"><i class="icon-Jenkins"></i></a></li>
             </ul>
         </div>
     </div>

diff --git a/src/assets/pdf/CV_LukasVarga.pdf b/src/assets/pdf/CV_LukasVarga.pdf
diff --git a/src/assets/pdf/Varga_Lebenslauf.pdf b/src/assets/pdf/Varga_Lebenslauf.pdf