```
+
+### Example audio
+```javascript
+marked.parseInline("")
+```
+generates:
+``````
+
+### Example 3
+```javascript
+marked.parseInline("");
+```
+generates:
+``````
+
+# Getting Started
+
+## Prerequisites
You should install [nodejs](https://nodejs.org) and [pnpm](https://pnpm.io). I'd recommend [Visual Studio Code](https://code.visualstudio.com) for developing.
-### Installation
+## Installation
_Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services._
@@ -21,14 +59,30 @@ _Below is an example of how you can instruct your audience on installing and set
```sh
pnpm install
```
-3. Start app in debug mode
- ```js
- pnpm dev
- ```
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+
+ @if(images().length > 1) {
+
+
+ }
+
\ No newline at end of file
diff --git a/src/app/components/image-slider/image-slider.component.scss b/src/app/components/image-slider/image-slider.component.scss
new file mode 100644
index 0000000..24f645c
--- /dev/null
+++ b/src/app/components/image-slider/image-slider.component.scss
@@ -0,0 +1,46 @@
+
+.keen-slider {
+ text-shadow: 1px 1px 2px #000000;
+ font-weight: 500;
+
+ .slide-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: end;
+ align-items: center;
+ max-height: 100vh;
+
+ img {
+ position: relative;
+ width: 100%;
+ max-height: 100vh;
+ z-index: -1;
+ }
+
+ .caption {
+ position: relative;
+ padding: .4rem;
+ z-index: 1;
+ bottom: 2rem;
+ max-width: 95%;
+ white-space: nowrap;
+ text-overflow: clip;
+ }
+ }
+
+ button {
+ position: absolute;
+ top: 46%;
+ transform: translateY(-50%);
+ z-index: 1;
+ color: var(--decent);
+
+ &.prev {
+ left: 0;
+ }
+
+ &.next {
+ right: 0;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/image-slider/image-slider.component.spec.ts b/src/app/components/image-slider/image-slider.component.spec.ts
new file mode 100644
index 0000000..994020d
--- /dev/null
+++ b/src/app/components/image-slider/image-slider.component.spec.ts
@@ -0,0 +1,32 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ImageSliderComponent } from './image-slider.component';
+import { MediaStorageService } from '../../services/common/media-storage.service';
+
+describe('ImageSliderComponent', () => {
+ let component: ImageSliderComponent;
+ let fixture: ComponentFixture
+ ![]()
+
+ {{img.title}}
+
+
+ }
+
+
+ {{currentGuide.caption}}
+ -
+ @for (item of sidenavRoutes; track item.path) {
+
-
+
+
+ {{item.title}} + +
+ }
+
+ {{currentGuide.title}}
+ — {{currentGuide.caption}}
+
+
+
+ Lade Inhalt...
+} @else {
+
+
\ No newline at end of file
diff --git a/src/app/components/ui/progress-spinner/progress-spinner.component.scss b/src/app/components/ui/progress-spinner/progress-spinner.component.scss
new file mode 100644
index 0000000..2600a9d
--- /dev/null
+++ b/src/app/components/ui/progress-spinner/progress-spinner.component.scss
@@ -0,0 +1,18 @@
+
+.element {
+ position: relative;
+ display: inline-block;
+
+ .content {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 1;
+ }
+
+ &.disabled {
+ filter: grayscale(1);
+ opacity: .5;
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/ui/progress-spinner/progress-spinner.component.spec.ts b/src/app/components/ui/progress-spinner/progress-spinner.component.spec.ts
new file mode 100644
index 0000000..87f7a2a
--- /dev/null
+++ b/src/app/components/ui/progress-spinner/progress-spinner.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProgressSpinnerComponent } from './progress-spinner.component';
+
+describe('ProgressSpinnerComponent', () => {
+ let component: ProgressSpinnerComponent;
+ let fixture: ComponentFixture
+
+{{doc.title}}
+ @for (item of doc.content; track item) { + @if (item.type === 'iframe' && item.value) { +
+
+
+ @if (post.imageSrc) {
+ ![]()
+ }
+
+
+
+
+ {{post.excerpt}}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/pages/blog/blog.component.scss b/src/app/pages/blog/blog.component.scss
new file mode 100644
index 0000000..c5bbbc3
--- /dev/null
+++ b/src/app/pages/blog/blog.component.scss
@@ -0,0 +1,43 @@
+div.card {
+ padding: .2em .8em;
+
+ a.label {
+ }
+}
+
+img.thumbnail {
+ margin: .6rem;
+ object-fit: cover;
+}
+
+.label-group {
+ padding: .2em .8em;
+ display: flex;
+ flex-direction: row;
+ align-items: start;
+ flex-wrap: wrap;
+
+
+ a.label {
+ display: inline-block;
+ margin: .3rem;
+ padding: .2rem .6rem;
+ background: color-mix(in srgb, var(--primary) 5%, transparent);
+ color: var(--primary);
+ padding-inline: 0.75rem;
+ padding-block: 0.375rem;
+ border-radius: 2.75rem;
+ border: 0;
+ transition: all .3s ease-in-out;
+ font-size: 0.875rem;
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1.4rem;
+ letter-spacing: -0.00875rem;
+ text-decoration: none;
+
+ &:hover {
+ background: color-mix(in srgb, var(--primary) 15%, transparent);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/pages/blog/blog.component.spec.ts b/src/app/pages/blog/blog.component.spec.ts
new file mode 100644
index 0000000..c532351
--- /dev/null
+++ b/src/app/pages/blog/blog.component.spec.ts
@@ -0,0 +1,52 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+import { of } from 'rxjs';
+
+import { BlogComponent } from './blog.component';
+import { BlogService } from '../../services/blog/blog.service';
+import { MediaStorageService } from '../../services/common/media-storage.service';
+
+const params = {
+ tag: 'foo'
+};
+
+describe('BlogComponent', () => {
+ let component: BlogComponent;
+ let fixture: ComponentFixture+ + {{post.title}} + +
+
+ @for (tag of post.tags; track $index) {
+ {{tag}}
+ }
+
+ Page not found!
diff --git a/src/app/pages/error/error.component.spec.ts b/src/app/pages/error/error.component.spec.ts new file mode 100644 index 0000000..5ea5f23 --- /dev/null +++ b/src/app/pages/error/error.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ErrorComponent } from './error.component'; + +describe('ErrorComponent', () => { + let component: ErrorComponent; + let fixture: ComponentFixture
+
+ } @else if (item.type === 'text') {
+
+
+
+
+ } @else if (item.type === 'stepper') {
+
+ } @else if (item.type === 'slider') {
+ {{item.value | json}}
+ }
+ }
+
+
+
+
+
+
+
+ {{resource('user-data-info')}}
+{{resource('user-data-export')}}
+ + +{{resource('user-data-reset')}}
+ +{{ greeting }}, {{ userName }}
+{{resource('intro')}}
+
+ @for(unit of units; track $index) {
+
+
+ {{unitProgressPercent($index)}}%
+
+
+ {{resource('unit')}} {{ unit.order }}
+
+
+
+
+ }
+
+ Einheit {{unit.order}} — {{unit.caption}}
+
+ {{unit.title}}
+
+
+
+
+
+
+
+
+ @if (pageProgressPercent($index, page.id) > 99) {
+
+
+
+
+
+
+ @if (page.status === 'draft') {
+
+
+ @if (page.hero_section) {
+
+ {{page.hero_section.subhead}}
+
+ }
+
+
+ @if (page.status === 'draft') {
+
+
+
+ {{pageProgressPercent($index, page.id)}}%
+
+
+
+ @if (page.hero_section && page.hero_section.image) {
+
+ } @else {
+
+
+ {{unit.progress.percent}}%
+
+
+ + {{resource('unit')}} {{$index + 1}} +
+ {{title($index)}} +
+ @for (item of data(unit[page.id]) | keyvalue: doneAtLast; track $index) {
+ @if (item.key === doneKey) {
+
+ + } @else { + +
+ + + } @else { + +
+ {{format(item.value) || 'Keine Angabe'}}
+
+ }
+ }
+ |<\/p>$/g, '').split('--'); + if (quote.length == 2) { + return `
`; + } + return `${quote[0]}
${quote[1]}
${text}`; + } + }; + return { walkTokens, renderer, sanitize: true, async: true }; +}; diff --git a/src/app/pipes/marked-media.model.ts b/src/app/pipes/marked-media.model.ts new file mode 100644 index 0000000..33f0f37 --- /dev/null +++ b/src/app/pipes/marked-media.model.ts @@ -0,0 +1,28 @@ +export type MediaAttributes = ImageAttribute | AudioAttribute | YouTubeAttribute; + +interface ImageAttribute { + type: 'img'; + title: string; + style: string; +} + +interface AudioAttribute { + type: 'wav'; + controls: boolean; + autoplay: boolean; + muted: boolean; +} + +interface YouTubeAttribute { + type: 'youtube'; + title: string; + width: number; + height: number; + allow: string; + allowfullscreen: boolean; +} + +export interface Attributes { + [key: string]: string | number | boolean; + title: string; +} \ No newline at end of file diff --git a/src/app/pipes/marked.pipe.spec.ts b/src/app/pipes/marked.pipe.spec.ts new file mode 100644 index 0000000..1a1ed1f --- /dev/null +++ b/src/app/pipes/marked.pipe.spec.ts @@ -0,0 +1,48 @@ +import { TestBed } from '@angular/core/testing'; +import { MediaStorageService } from '../services/common/media-storage.service'; +import { MarkedPipe } from './marked.pipe'; + +const resourceUrl = "http://example.com/media/"; + +describe('MarkedPipe', () => { + let pipe: MarkedPipe; + let service: MediaStorageService; + + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [ + MarkedPipe, + { + provide: MediaStorageService, + useValue: { + downloadUrl: (path: string) => Promise.resolve(resourceUrl + path) + } + } + ] + }); + service = TestBed.inject(MediaStorageService); + pipe = TestBed.inject(MarkedPipe); + }); + + it('create an instance', () => { + expect(pipe).toBeTruthy(); + }); + + it('test img', async () => { + expect(await pipe.transform("")).toMatch( + `
