Merge pull request #474 from Akhil017/feat/source-code-link

link to source code added in challenge navbar
sadanandpai · Jul 23, 2024 · 4f91a33 · 4f91a33
2 parents 0b6d3dc + aa7fc3f
commit 4f91a33
Show file tree

Hide file tree

Showing 15 changed files with 803 additions and 30 deletions.
diff --git a/apps/angular/angular.json b/apps/angular/angular.json
@@ -32,13 +32,13 @@
  "budgets": [
  {
  "type": "initial",
- "maximumWarning": "500kb",
- "maximumError": "1mb"
+ "maximumWarning": "1000kb",
+ "maximumError": "2mb"
  },
  {
  "type": "anyComponentStyle",
- "maximumWarning": "2kb",
- "maximumError": "4kb"
+ "maximumWarning": "4kb",
+ "maximumError": "8kb"
  }
  ],
  "outputHashing": "all"

diff --git a/apps/angular/src/app/components/challenge-container/challenge-container.component.html b/apps/angular/src/app/components/challenge-container/challenge-container.component.html
@@ -1,4 +1,4 @@
-<app-navbar [title]="title" />
+<app-navbar [title]="title" [link]="link" />
 <div class="container">
  <router-outlet></router-outlet>
 </div>
diff --git a/apps/angular/src/app/components/challenge-container/challenge-container.component.ts b/apps/angular/src/app/components/challenge-container/challenge-container.component.ts
@@ -12,6 +12,8 @@ import { NavbarComponent } from '../navbar/navbar.component';
 })
 export class ChallengeContainerComponent {
  public title = 'Challenge';
+ public link = '';
+
  private router = inject(Router);
 
  ngOnInit() {
@@ -28,5 +30,6 @@ export class ChallengeContainerComponent {
  }
 
  this.title = challenge.title;
+ this.link = challenge.link;
  }
 }
diff --git a/apps/angular/src/app/components/navbar/navbar.component.html b/apps/angular/src/app/components/navbar/navbar.component.html
@@ -12,12 +12,66 @@
  <h1>{{ title }}</h1>
 
  <div class="right">
+ <div class="source_code">
+ <a target="_blank" rel="noreferrer" [href]="angularSourceCodeURL">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="18"
+ height="18"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ class="lucide lucide-external-link"
+ >
+ <path d="M15 3h6v6" />
+ <path d="M10 14 21 3" />
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+ </svg>
+ Source code
+ </a>
+ </div>
  <a href="https://github.com/sadanandpai/frontend-mini-challenges/" target="blank">
  <img
  src="https://cdn-icons-png.flaticon.com/512/25/25231.png"
  alt="github repo"
  class="github"
  />
  </a>
+ <div id="responsive-nav">
+ <div class="hamburger">
+ <input type="checkbox" />
+ <div class="line"></div>
+ <div class="line"></div>
+ <div class="line"></div>
+ <section id="menu">
+ <ul>
+ <a target="_blank" rel="noreferrer" [href]="angularSourceCodeURL">
+ <li>
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="18"
+ height="18"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ class="lucide lucide-external-link"
+ >
+ <path d="M15 3h6v6" />
+ <path d="M10 14 21 3" />
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+ </svg>
+ Source code
+ </li></a
+ >
+ </ul>
+ </section>
+ </div>
+ </div>
  </div>
 </nav>
diff --git a/apps/angular/src/app/components/navbar/navbar.component.scss b/apps/angular/src/app/components/navbar/navbar.component.scss
@@ -47,13 +47,148 @@
  }
 
  .right {
+ display: flex;
+ align-items: center;
+ justify-content: end;
+ gap: 1rem;
  flex: 1;
  text-align: right;
 
+ .source_code {
+ display: flex;
+ align-items: center;
+ justify-content: end;
+ gap: 1rem;
+
+ a {
+ text-decoration: none;
+ color: #000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.25rem;
+ }
+ a:hover {
+ color: blue;
+ }
+ }
+
  .github {
  width: 30px;
  height: 30px;
  vertical-align: text-bottom;
  }
+
+ #responsive-nav {
+ display: none;
+ }
+ }
+}
+
+@media (max-width: 640px) {
+ .right {
+ .source_code {
+ display: none !important;
+ }
+
+ /* responsive navbar */
+ #responsive-nav {
+ display: block !important;
+ position: relative;
+ margin-left: 1rem;
+ }
+
+ .hamburger {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ gap: 0.25rem;
+
+ input {
+ width: 1.5rem;
+ height: 1.5rem;
+ opacity: 0;
+ position: absolute;
+ z-index: 2;
+ cursor: pointer;
+ }
+
+ div.line {
+ height: 4px;
+ width: 2rem;
+ background-color: #0e0615;
+ border-radius: 7px;
+ transform-origin: 4px 0px;
+ position: relative;
+ z-index: 1;
+
+ transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
+ }
+
+ input:checked ~ div.line:nth-child(2) {
+ transform: rotate(45deg) translate(1px, -1px);
+ }
+
+ input:checked ~ div.line:nth-child(3) {
+ opacity: 0;
+ transform: rotate(0deg) scale(0.2, 0.2);
+ background-color: rgb(204, 204, 204);
+ }
+
+ input:checked ~ div.line:nth-child(4) {
+ transform: rotate(-45deg) translate(-2px, 0px);
+ }
+ }
+
+ #menu {
+ height: 100vh;
+ position: fixed;
+ top: 0;
+ right: 0;
+ width: 300px;
+ background-color: #ffffff;
+ padding: 1rem;
+ transform: translateX(100%);
+ transition: transform 0.5s cubic-bezier(0.51, 0.92, 0.24, 1.15);
+ padding-top: 4rem;
+ box-shadow: -4px 5px 22px -6px rgba(0, 0, 0, 0.1);
+
+ ul {
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ justify-content: center;
+ }
+
+ ul a {
+ text-decoration: none;
+ color: #000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.25rem;
+ gap: 0.25rem;
+ }
+
+ ul a:hover {
+ color: blue;
+ }
+
+ ul li {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ list-style: none;
+ margin-bottom: 1rem;
+ gap: 0.25rem;
+ }
+ }
+
+ .hamburger input:checked ~ #menu {
+ transform: none;
+ }
  }
 }
diff --git a/apps/angular/src/app/components/navbar/navbar.component.ts b/apps/angular/src/app/components/navbar/navbar.component.ts
@@ -10,6 +10,7 @@ import { RouterLink } from '@angular/router';
 })
 export class NavbarComponent {
  @Input() title = 'Challenge';
+ @Input() link!: string;
 
  public homeURL = isDevMode()
  ? 'http://localhost:6010/frontend-mini-challenges/'
@@ -18,4 +19,18 @@ export class NavbarComponent {
  public backURL = isDevMode()
  ? 'http://localhost:6010/frontend-mini-challenges/#/angular/'
  : '/frontend-mini-challenges/#/angular/';
+
+ public angularSourceCodeBaseURL =
+ 'https://github.com/sadanandpai/frontend-mini-challenges/tree/main/apps/angular/src/app/challenges/';
+
+ // public angularSourceCode = this.angularSourceCodeBaseURL + this.link;
+ public angularSourceCodeURL!: string;
+
+ ngOnInit() {
+ this.angularSourceCodeURL = this.angularSourceCodeBaseURL + this.link;
+ }
+
+ // get fullLink(): string {
+ // return `${this.angularSourceCodeBaseURL}${this.link}`;
+ // }
 }
diff --git a/apps/angular/src/index.html b/apps/angular/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
  <meta charset="utf-8" />
- <title>Frontend Mini Challengessssss</title>
+ <title>Frontend Mini Challenges</title>
  <link
  rel="icon"
  type="image/svg+xml"

diff --git a/apps/javascript/src/helpers/navbar.ts b/apps/javascript/src/helpers/navbar.ts
@@ -9,6 +9,11 @@ const homeURL = DEV ? `${VITE_HOST_URL}${VITE_PATH}/` : `/${VITE_PATH}/`;
 const challengeLink = window.location.pathname.split('/challenges/')[1].slice(0, -1);
 const challenge = jsChallenges.get(challengeLink)!;
 
+const externalLinkIco = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>`;
+
+const jsSourceCodeBaseURL =
+ 'https://github.com/Akhil017/frontend-mini-challenges/tree/main/apps/javascript/src/challenges/';
+
 const navbar = document.createElement('nav');
 navbar.classList.add('challenge-navbar');
 navbar.innerHTML = `
@@ -21,26 +26,39 @@ navbar.innerHTML = `
  </a>
  </div>
 
- <h1>${challenge.title}</h1>
+ <div class="title-container">
+ <h1>${challenge.title}</h1>
+ </div>
 
  <div class="right">
- ${
- challenge?.youtube
- ? `
- <a slot="icon" href=${challenge.youtube} target="blank" class="youtube">
- <img src="https://cdn-icons-png.flaticon.com/256/1384/1384060.png" alt="youtube solution" />
- </a>
- `
- : ''
- }
+ <div class="source_code"> 
+ ${challenge?.link ? `<a href=${jsSourceCodeBaseURL + challenge.link} target="blank">${externalLinkIco}Source code</a>` : ''}
+ ${challenge?.youtube ? `<a href=${challenge.youtube} target="blank">${externalLinkIco}Youtube</a>` : ''}
+ </div>
  <a href="https://github.com/sadanandpai/frontend-mini-challenges/" target="blank">
  <img
  src="https://cdn-icons-png.flaticon.com/512/25/25231.png"
  alt="github repo"
  class="github"
  />
  </a>
+ <div id="responsive-nav">
+ <div class="hamburger">
+ <input type="checkbox" />
+ <div class="line"></div>
+ <div class="line"></div>
+ <div class="line"></div>
+ <section id="menu">
+ <ul>
+ ${challenge?.link ? `<a href=${jsSourceCodeBaseURL + challenge.link} target="blank"><li>${externalLinkIco}Source code</li></a>` : ''}
+ ${challenge?.youtube ? `<a href=${challenge.youtube} target="blank"><li>${externalLinkIco}Youtube</li></a>` : ''}
+ </ul>
+ 
+ </section>
+ </div>
+ </div>
  </div>
+
 `;
 
 document.body.prepend(navbar);