diff --git a/package-lock.json b/package-lock.json index 0b98ab2..d54880f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@angular/platform-browser": "^17.3.0", "@angular/platform-browser-dynamic": "^17.3.0", "@angular/router": "^17.3.0", + "marked": "^13.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.3" @@ -8829,6 +8830,18 @@ "node": "^14.17.0 || ^16.13.0 || >=18.0.0" } }, + "node_modules/marked": { + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/marked/-/marked-13.0.0.tgz", + "integrity": "sha512-VTeDCd9txf4KLLljUZ0nljE/Incb9SrWuueE44QVuU0pkOdh4sfCeW1Z6lPcxyDRSVY6rm8db/0OPaN75RNUmw==", + "license": "MIT", + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 18" + } + }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", diff --git a/package.json b/package.json index c73bccf..d5745a1 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@angular/platform-browser": "^17.3.0", "@angular/platform-browser-dynamic": "^17.3.0", "@angular/router": "^17.3.0", + "marked": "^13.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.3" diff --git a/src/app/app.component.css b/src/app/app.component.css index e69de29..8f547ab 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -0,0 +1,7 @@ +#main-wrapper { + display: flex; + height: 87vh; + margin: 0 10px; + border-radius: 1rem; + border: 3px solid black; +} \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index 36093e1..d293c92 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,336 +1,5 @@ - - - - - - - - + - - -
-
-
- -

Hello, {{ title }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
-
-
- - - - - - - - - - - +
+ +
\ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 25a58a8..94f75d7 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,10 +1,11 @@ import { Component } from '@angular/core'; -import { RouterOutlet } from '@angular/router'; +import { RouterOutlet, RouterLink } from '@angular/router'; +import { NavbarComponent } from './navbar/navbar.component'; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet], + imports: [RouterOutlet,RouterLink, NavbarComponent], templateUrl: './app.component.html', styleUrl: './app.component.css' }) diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 6c6ef60..8a65e19 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -1,8 +1,9 @@ import { ApplicationConfig } from '@angular/core'; -import { provideRouter } from '@angular/router'; +import { provideRouter, withComponentInputBinding } from '@angular/router'; import { routes } from './app.routes'; +import { provideHttpClient } from '@angular/common/http'; export const appConfig: ApplicationConfig = { - providers: [provideRouter(routes)] + providers: [provideRouter(routes, withComponentInputBinding()), provideHttpClient()] }; diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index dc39edb..b12953b 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,3 +1,6 @@ import { Routes } from '@angular/router'; +import { MarkdownComponent } from './markdown/markdown.component'; -export const routes: Routes = []; +export const routes: Routes = [ + { path: 'md/:file', component: MarkdownComponent } +]; diff --git a/src/app/markdown.pipe.spec.ts b/src/app/markdown.pipe.spec.ts new file mode 100644 index 0000000..16330df --- /dev/null +++ b/src/app/markdown.pipe.spec.ts @@ -0,0 +1,8 @@ +import { MarkdownPipe } from './markdown.pipe'; + +describe('MarkdownPipe', () => { + it('create an instance', () => { + const pipe = new MarkdownPipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/src/app/markdown.pipe.ts b/src/app/markdown.pipe.ts new file mode 100644 index 0000000..990b3fb --- /dev/null +++ b/src/app/markdown.pipe.ts @@ -0,0 +1,15 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { marked } from 'marked'; + +@Pipe({ + name: 'markdown', + standalone: true +}) +export class MarkdownPipe implements PipeTransform { + transform(value: string): string { + if (!value) return ''; + + return String(marked(value)); + } +} + diff --git a/src/app/markdown/markdown.component.css b/src/app/markdown/markdown.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/markdown/markdown.component.html b/src/app/markdown/markdown.component.html new file mode 100644 index 0000000..a30d37d --- /dev/null +++ b/src/app/markdown/markdown.component.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/src/app/markdown/markdown.component.spec.ts b/src/app/markdown/markdown.component.spec.ts new file mode 100644 index 0000000..42df238 --- /dev/null +++ b/src/app/markdown/markdown.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MarkdownComponent } from './markdown.component'; + +describe('MarkdownComponent', () => { + let component: MarkdownComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [MarkdownComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(MarkdownComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/markdown/markdown.component.ts b/src/app/markdown/markdown.component.ts new file mode 100644 index 0000000..6ddde04 --- /dev/null +++ b/src/app/markdown/markdown.component.ts @@ -0,0 +1,28 @@ +import { Component, Input} from '@angular/core'; +import { MarkdownService } from '../services/markdown.service'; +import { NgIf } from '@angular/common'; +import { MarkdownPipe } from '../markdown.pipe'; + +@Component({ + selector: 'app-markdown', + standalone: true, + imports: [NgIf, MarkdownPipe], + providers: [ MarkdownService], + templateUrl: './markdown.component.html', + styleUrl: './markdown.component.css' +}) +export class MarkdownComponent { + @Input() file: string = ''; + md: string = ''; + + markdownRoot = '../assets/'; + extension = '.md'; + + constructor(private markdownService: MarkdownService) {} + + ngOnInit() : void { + this.markdownService.convertFromFile(this.markdownRoot+this.file+this.extension).subscribe( + (markdown) => this.md = markdown + ); + } +} diff --git a/src/app/navbar/navbar.component.css b/src/app/navbar/navbar.component.css new file mode 100644 index 0000000..143122d --- /dev/null +++ b/src/app/navbar/navbar.component.css @@ -0,0 +1,23 @@ +nav { + width: 50%; + margin: 0 auto; + border-radius: 2rem; + border: 3px solid black; + margin: 1rem auto; + + ul { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + list-style: none; + gap: 1rem; + padding: 1rem; + + li { + a { + padding: 20px 10px; + } + } + } +} \ No newline at end of file diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html new file mode 100644 index 0000000..337fa10 --- /dev/null +++ b/src/app/navbar/navbar.component.html @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/src/app/navbar/navbar.component.spec.ts b/src/app/navbar/navbar.component.spec.ts new file mode 100644 index 0000000..78867a6 --- /dev/null +++ b/src/app/navbar/navbar.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NavbarComponent } from './navbar.component'; + +describe('NavbarComponent', () => { + let component: NavbarComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NavbarComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(NavbarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts new file mode 100644 index 0000000..aef9405 --- /dev/null +++ b/src/app/navbar/navbar.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-navbar', + standalone: true, + imports: [], + templateUrl: './navbar.component.html', + styleUrl: './navbar.component.css' +}) +export class NavbarComponent { + +} diff --git a/src/app/services/markdown.service.ts b/src/app/services/markdown.service.ts new file mode 100644 index 0000000..a8e5287 --- /dev/null +++ b/src/app/services/markdown.service.ts @@ -0,0 +1,17 @@ +import { Injectable } from '@angular/core'; +import { marked } from 'marked'; +import { HttpClient } from '@angular/common/http'; +import { Observable } from 'rxjs'; + +@Injectable({ + providedIn: 'root', +}) +export class MarkdownService { + markdownContent : string | undefined = ''; + + constructor(private http: HttpClient) {} + + convertFromFile(filepath: string): Observable { + return this.http.get(filepath, { responseType: 'text' }); + } +} diff --git a/src/assets/test.md b/src/assets/test.md new file mode 100644 index 0000000..0ab4d5d --- /dev/null +++ b/src/assets/test.md @@ -0,0 +1,6 @@ +# Test + +Hello i am *Rémi*, currently **trying** to get markdown working; + +- [X] Deploy +- [ ] Styles diff --git a/src/styles.css b/src/styles.css index 90d4ee0..1a5a9c7 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1 +1,9 @@ -/* You can add global styles to this file, and also import other style files */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Helvetica, sans-serif, sans-serif; +} \ No newline at end of file