From 8ee25e17b88b970703f4df9e74cb4726bbffd837 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Mon, 31 May 2021 11:33:49 +0200
Subject: Add ability to set custom markdown in description

---
 .../about-instance/about-instance.component.html   |  4 +-
 .../about-instance/about-instance.component.ts     | 20 ++++++--
 client/src/app/+about/about.module.ts              |  4 +-
 .../edit-homepage.component.html                   |  2 +-
 .../edit-custom-config/edit-homepage.component.ts  |  8 ++-
 .../edit-instance-information.component.html       |  6 ++-
 .../edit-instance-information.component.ts         |  9 ++++
 client/src/app/+home/home.component.html           |  2 +-
 client/src/app/+home/home.component.ts             | 10 ++--
 .../button-markup.component.html                   |  1 -
 .../button-markup.component.scss                   |  3 --
 .../button-markup.component.ts                     | 34 ------------
 .../channel-miniature-markup.component.html        |  8 ---
 .../channel-miniature-markup.component.scss        |  9 ----
 .../channel-miniature-markup.component.ts          | 26 ----------
 .../custom-markup-container.component.html         |  1 +
 .../custom-markup-container.component.ts           | 26 ++++++++++
 .../shared-custom-markup/custom-markup.service.ts  | 24 ++++++---
 .../shared-custom-markup/embed-markup.component.ts | 22 --------
 .../src/app/shared/shared-custom-markup/index.ts   |  1 +
 .../button-markup.component.html                   |  1 +
 .../button-markup.component.scss                   |  3 ++
 .../button-markup.component.ts                     | 34 ++++++++++++
 .../channel-miniature-markup.component.html        |  8 +++
 .../channel-miniature-markup.component.scss        |  9 ++++
 .../channel-miniature-markup.component.ts          | 26 ++++++++++
 .../peertube-custom-tags/embed-markup.component.ts | 22 ++++++++
 .../peertube-custom-tags/index.ts                  |  6 +++
 .../playlist-miniature-markup.component.html       |  2 +
 .../playlist-miniature-markup.component.scss       |  7 +++
 .../playlist-miniature-markup.component.ts         | 38 ++++++++++++++
 .../video-miniature-markup.component.html          |  6 +++
 .../video-miniature-markup.component.scss          |  7 +++
 .../video-miniature-markup.component.ts            | 44 ++++++++++++++++
 .../videos-list-markup.component.html              | 13 +++++
 .../videos-list-markup.component.scss              |  9 ++++
 .../videos-list-markup.component.ts                | 60 ++++++++++++++++++++++
 .../playlist-miniature-markup.component.html       |  2 -
 .../playlist-miniature-markup.component.scss       |  7 ---
 .../playlist-miniature-markup.component.ts         | 38 --------------
 .../shared-custom-markup.module.ts                 | 21 +++++---
 .../video-miniature-markup.component.html          |  6 ---
 .../video-miniature-markup.component.scss          |  7 ---
 .../video-miniature-markup.component.ts            | 44 ----------------
 .../videos-list-markup.component.html              | 13 -----
 .../videos-list-markup.component.scss              |  9 ----
 .../videos-list-markup.component.ts                | 60 ----------------------
 .../instance-about-accordion.component.ts          |  1 -
 .../app/shared/shared-instance/instance.service.ts |  1 -
 .../shared-instance/shared-instance.module.ts      |  4 +-
 50 files changed, 399 insertions(+), 329 deletions(-)
 delete mode 100644 client/src/app/shared/shared-custom-markup/button-markup.component.html
 delete mode 100644 client/src/app/shared/shared-custom-markup/button-markup.component.scss
 delete mode 100644 client/src/app/shared/shared-custom-markup/button-markup.component.ts
 delete mode 100644 client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.html
 delete mode 100644 client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.scss
 delete mode 100644 client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.ts
 create mode 100644 client/src/app/shared/shared-custom-markup/custom-markup-container.component.html
 create mode 100644 client/src/app/shared/shared-custom-markup/custom-markup-container.component.ts
 delete mode 100644 client/src/app/shared/shared-custom-markup/embed-markup.component.ts
 create mode 100644 client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.html
 create mode 100644 client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.scss
 create mode 100644 client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.ts
 create mode 100644 client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.html
 create mode 100644 client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss
 create mode 100644 client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts
 create mode 100644 client/src/app/shared/shared-custom-markup/peertube-custom-tags/embed-markup.component.ts
 create mode 100644 client/src/app/shared/shared-custom-markup/peertube-custom-tags/index.ts
 create mode 100644 client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.html
 create mode 100644 client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.scss
 create mode 100644 client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.ts
 create mode 100644 client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.html
 create mode 100644 client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.scss
 create mode 100644 client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.ts
 create mode 100644 client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.html
 create mode 100644 client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss
 create mode 100644 client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts
 delete mode 100644 client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.html
 delete mode 100644 client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.scss
 delete mode 100644 client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.ts
 delete mode 100644 client/src/app/shared/shared-custom-markup/video-miniature-markup.component.html
 delete mode 100644 client/src/app/shared/shared-custom-markup/video-miniature-markup.component.scss
 delete mode 100644 client/src/app/shared/shared-custom-markup/video-miniature-markup.component.ts
 delete mode 100644 client/src/app/shared/shared-custom-markup/videos-list-markup.component.html
 delete mode 100644 client/src/app/shared/shared-custom-markup/videos-list-markup.component.scss
 delete mode 100644 client/src/app/shared/shared-custom-markup/videos-list-markup.component.ts

(limited to 'client/src/app')

diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html
index 1f372090e..29dfd89fb 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -91,7 +91,7 @@
 
     <div class="anchor" id="information"></div>
     <a
-      *ngIf="html.description"
+      *ngIf="descriptionContent"
       class="anchor-link"
       routerLink="/about/instance"
       fragment="information"
@@ -113,7 +113,7 @@
         <h3 i18n class="section-title">Description</h3>
       </a>
 
-      <div [innerHTML]="html.description"></div>
+      <my-custom-markup-container [content]="descriptionContent"></my-custom-markup-container>
     </div>
 
     <div class="anchor" id="moderation"></div>
diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts
index 7eb382a46..2e0996429 100644
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -1,11 +1,12 @@
 import { ViewportScroller } from '@angular/common'
-import { AfterViewChecked, Component, OnInit, ViewChild } from '@angular/core'
+import { AfterViewChecked, Component, ElementRef, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
 import { Notifier } from '@app/core'
-import { copyToClipboard } from '../../../root-helpers/utils'
+import { CustomMarkupService } from '@app/shared/shared-custom-markup'
 import { InstanceService } from '@app/shared/shared-instance'
-import { ServerConfig } from '@shared/models'
+import { About, ServerConfig } from '@shared/models'
+import { copyToClipboard } from '../../../root-helpers/utils'
 import { ResolverData } from './about-instance.resolver'
 
 @Component({
@@ -14,12 +15,13 @@ import { ResolverData } from './about-instance.resolver'
   styleUrls: [ './about-instance.component.scss' ]
 })
 export class AboutInstanceComponent implements OnInit, AfterViewChecked {
+  @ViewChild('descriptionWrapper') descriptionWrapper: ElementRef<HTMLInputElement>
   @ViewChild('contactAdminModal', { static: true }) contactAdminModal: ContactAdminModalComponent
 
   shortDescription = ''
+  descriptionContent: string
 
   html = {
-    description: '',
     terms: '',
     codeOfConduct: '',
     moderationInformation: '',
@@ -40,6 +42,7 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
   private lastScrollHash: string
 
   constructor (
+    private customMarkupService: CustomMarkupService,
     private viewportScroller: ViewportScroller,
     private route: ActivatedRoute,
     private notifier: Notifier,
@@ -67,9 +70,12 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
     this.categories = categories
 
     this.shortDescription = about.instance.shortDescription
+    this.descriptionContent = about.instance.description
 
     this.html = await this.instanceService.buildHtml(about)
 
+    await this.injectDescription(about)
+
     this.initialized = true
   }
 
@@ -90,4 +96,10 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
     copyToClipboard(link)
     this.notifier.success(link, $localize `Link copied`)
   }
+
+  private async injectDescription (about: About) {
+    const element = await this.customMarkupService.buildElement(about.instance.description)
+
+    this.descriptionWrapper.nativeElement.appendChild(element)
+  }
 }
diff --git a/client/src/app/+about/about.module.ts b/client/src/app/+about/about.module.ts
index 1aca14033..dfea52fb8 100644
--- a/client/src/app/+about/about.module.ts
+++ b/client/src/app/+about/about.module.ts
@@ -5,6 +5,7 @@ import { AboutInstanceResolver } from '@app/+about/about-instance/about-instance
 import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
 import { AboutPeertubeContributorsComponent } from '@app/+about/about-peertube/about-peertube-contributors.component'
 import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component'
+import { SharedCustomMarkupModule } from '@app/shared/shared-custom-markup'
 import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { SharedInstanceModule } from '@app/shared/shared-instance'
@@ -19,7 +20,8 @@ import { AboutComponent } from './about.component'
     SharedMainModule,
     SharedFormModule,
     SharedInstanceModule,
-    SharedGlobalIconModule
+    SharedGlobalIconModule,
+    SharedCustomMarkupModule
   ],
 
   declarations: [
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
index baaac5fb7..2286a5a1a 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
@@ -17,7 +17,7 @@
 
           <my-markdown-textarea
             name="instanceCustomHomepageContent" formControlName="content" textareaMaxWidth="90%" textareaHeight="300px"
-            [customMarkdownRenderer]="customMarkdownRenderer"
+            [customMarkdownRenderer]="getCustomMarkdownRenderer()"
             [classes]="{ 'input-error': formErrors['instanceCustomHomepage.content'] }"
           ></my-markdown-textarea>
 
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.ts
index 7decf8f75..1923ede39 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.ts
@@ -7,7 +7,7 @@ import { CustomMarkupService } from '@app/shared/shared-custom-markup'
   templateUrl: './edit-homepage.component.html',
   styleUrls: [ './edit-custom-config.component.scss' ]
 })
-export class EditHomepageComponent implements OnInit {
+export class EditHomepageComponent {
   @Input() form: FormGroup
   @Input() formErrors: any
 
@@ -17,9 +17,7 @@ export class EditHomepageComponent implements OnInit {
 
   }
 
-  ngOnInit () {
-    this.customMarkdownRenderer = async (text: string) => {
-      return this.customMarkup.buildElement(text)
-    }
+  getCustomMarkdownRenderer () {
+    return this.customMarkup.getCustomMarkdownRenderer()
   }
 }
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
index cbff26e5a..d806616bd 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
@@ -32,10 +32,14 @@
         </div>
 
         <div class="form-group">
-          <label i18n for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help>
+          <label i18n for="instanceDescription">Description</label>
+          <div class="label-small-info">
+            <my-custom-markup-help></my-custom-markup-help>
+          </div>
 
           <my-markdown-textarea
             name="instanceDescription" formControlName="description" textareaMaxWidth="500px"
+            [customMarkdownRenderer]="getCustomMarkdownRenderer()"
             [classes]="{ 'input-error': formErrors['instance.description'] }"
           ></my-markdown-textarea>
 
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.ts
index 26365e707..4185f121f 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.ts
@@ -1,6 +1,7 @@
 import { SelectOptionsItem } from 'src/types/select-options-item.model'
 import { Component, Input } from '@angular/core'
 import { FormGroup } from '@angular/forms'
+import { CustomMarkupService } from '@app/shared/shared-custom-markup'
 
 @Component({
   selector: 'my-edit-instance-information',
@@ -13,4 +14,12 @@ export class EditInstanceInformationComponent {
 
   @Input() languageItems: SelectOptionsItem[] = []
   @Input() categoryItems: SelectOptionsItem[] = []
+
+  constructor (private customMarkup: CustomMarkupService) {
+
+  }
+
+  getCustomMarkdownRenderer () {
+    return this.customMarkup.getCustomMarkdownRenderer()
+  }
 }
diff --git a/client/src/app/+home/home.component.html b/client/src/app/+home/home.component.html
index 645b9dc69..dfce46618 100644
--- a/client/src/app/+home/home.component.html
+++ b/client/src/app/+home/home.component.html
@@ -1,4 +1,4 @@
 <div class="root margin-content">
-  <div #contentWrapper></div>
+  <my-custom-markup-container [content]="homepageContent"></my-custom-markup-container>
 </div>
 
diff --git a/client/src/app/+home/home.component.ts b/client/src/app/+home/home.component.ts
index 16d3a6df7..6e0c96760 100644
--- a/client/src/app/+home/home.component.ts
+++ b/client/src/app/+home/home.component.ts
@@ -1,6 +1,4 @@
-
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
-import { CustomMarkupService } from '@app/shared/shared-custom-markup'
 import { CustomPageService } from '@app/shared/shared-main/custom-page'
 
 @Component({
@@ -11,16 +9,14 @@ import { CustomPageService } from '@app/shared/shared-main/custom-page'
 export class HomeComponent implements OnInit {
   @ViewChild('contentWrapper') contentWrapper: ElementRef<HTMLInputElement>
 
+  homepageContent: string
+
   constructor (
-    private customMarkupService: CustomMarkupService,
     private customPageService: CustomPageService
   ) { }
 
   async ngOnInit () {
     this.customPageService.getInstanceHomepage()
-      .subscribe(async ({ content }) => {
-        const element = await this.customMarkupService.buildElement(content)
-        this.contentWrapper.nativeElement.appendChild(element)
-      })
+      .subscribe(({ content }) => this.homepageContent = content)
   }
 }
diff --git a/client/src/app/shared/shared-custom-markup/button-markup.component.html b/client/src/app/shared/shared-custom-markup/button-markup.component.html
deleted file mode 100644
index 619bb9d8c..000000000
--- a/client/src/app/shared/shared-custom-markup/button-markup.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<a [href]="href" [ngClass]="getClasses()" [target]="getTarget()">{{ label }}</a>
diff --git a/client/src/app/shared/shared-custom-markup/button-markup.component.scss b/client/src/app/shared/shared-custom-markup/button-markup.component.scss
deleted file mode 100644
index f43d6b400..000000000
--- a/client/src/app/shared/shared-custom-markup/button-markup.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import '_variables';
-@import '_mixins';
-
diff --git a/client/src/app/shared/shared-custom-markup/button-markup.component.ts b/client/src/app/shared/shared-custom-markup/button-markup.component.ts
deleted file mode 100644
index c0aab2edd..000000000
--- a/client/src/app/shared/shared-custom-markup/button-markup.component.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Component, Input } from '@angular/core'
-import { VideoChannel } from '../shared-main'
-
-/*
- * Markup component that creates a button
-*/
-
-@Component({
-  selector: 'my-button-markup',
-  templateUrl: 'button-markup.component.html',
-  styleUrls: [ 'button-markup.component.scss' ]
-})
-export class ButtonMarkupComponent {
-  @Input() theme: 'primary' | 'secondary'
-  @Input() href: string
-  @Input() label: string
-  @Input() blankTarget?: boolean
-
-  channel: VideoChannel
-
-  getTarget () {
-    if (this.blankTarget === true) return '_blank'
-
-    return ''
-  }
-
-  getClasses () {
-    const additionalClass = this.theme === 'primary'
-      ? 'orange-button'
-      : 'grey-button'
-
-    return [ 'peertube-button-link', additionalClass ]
-  }
-}
diff --git a/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.html b/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.html
deleted file mode 100644
index da81006b9..000000000
--- a/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div *ngIf="channel" class="channel">
-  <my-actor-avatar [channel]="channel" size="34"></my-actor-avatar>
-
-  <div class="display-name">{{ channel.displayName }}</div>
-  <div class="username">{{ channel.name }}</div>
-
-  <div class="description">{{ channel.description }}</div>
-</div>
diff --git a/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.scss
deleted file mode 100644
index 85018afe2..000000000
--- a/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import '_variables';
-@import '_mixins';
-
-.channel {
-  border-radius: 15px;
-  padding: 10px;
-  width: min-content;
-  border: 1px solid pvar(--mainColor);
-}
diff --git a/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.ts b/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.ts
deleted file mode 100644
index 97bb5567e..000000000
--- a/client/src/app/shared/shared-custom-markup/channel-miniature-markup.component.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core'
-import { VideoChannel, VideoChannelService } from '../shared-main'
-
-/*
- * Markup component that creates a channel miniature only
-*/
-
-@Component({
-  selector: 'my-channel-miniature-markup',
-  templateUrl: 'channel-miniature-markup.component.html',
-  styleUrls: [ 'channel-miniature-markup.component.scss' ]
-})
-export class ChannelMiniatureMarkupComponent implements OnInit {
-  @Input() name: string
-
-  channel: VideoChannel
-
-  constructor (
-    private channelService: VideoChannelService
-  ) { }
-
-  ngOnInit () {
-    this.channelService.getVideoChannel(this.name)
-      .subscribe(channel => this.channel = channel)
-  }
-}
diff --git a/client/src/app/shared/shared-custom-markup/custom-markup-container.component.html b/client/src/app/shared/shared-custom-markup/custom-markup-container.component.html
new file mode 100644
index 000000000..3ad88645d
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/custom-markup-container.component.html
@@ -0,0 +1 @@
+<div #contentWrapper></div>
diff --git a/client/src/app/shared/shared-custom-markup/custom-markup-container.component.ts b/client/src/app/shared/shared-custom-markup/custom-markup-container.component.ts
new file mode 100644
index 000000000..3d49c6768
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/custom-markup-container.component.ts
@@ -0,0 +1,26 @@
+import { Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core'
+import { CustomMarkupService } from './custom-markup.service'
+
+@Component({
+  selector: 'my-custom-markup-container',
+  templateUrl: './custom-markup-container.component.html'
+})
+export class CustomMarkupContainerComponent implements OnChanges {
+  @ViewChild('contentWrapper') contentWrapper: ElementRef<HTMLInputElement>
+
+  @Input() content: string
+
+  constructor (
+    private customMarkupService: CustomMarkupService
+  ) { }
+
+  async ngOnChanges () {
+    await this.buildElement()
+  }
+
+  private async buildElement () {
+    const element = await this.customMarkupService.buildElement(this.content)
+    this.contentWrapper.nativeElement.appendChild(element)
+  }
+
+}
diff --git a/client/src/app/shared/shared-custom-markup/custom-markup.service.ts b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
index 09414da95..dbb07914e 100644
--- a/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
+++ b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
@@ -8,13 +8,15 @@ import {
   VideoMiniatureMarkupData,
   VideosListMarkupData
 } from '@shared/models'
-import { ButtonMarkupComponent } from './button-markup.component'
-import { ChannelMiniatureMarkupComponent } from './channel-miniature-markup.component'
 import { DynamicElementService } from './dynamic-element.service'
-import { EmbedMarkupComponent } from './embed-markup.component'
-import { PlaylistMiniatureMarkupComponent } from './playlist-miniature-markup.component'
-import { VideoMiniatureMarkupComponent } from './video-miniature-markup.component'
-import { VideosListMarkupComponent } from './videos-list-markup.component'
+import {
+  ButtonMarkupComponent,
+  ChannelMiniatureMarkupComponent,
+  EmbedMarkupComponent,
+  PlaylistMiniatureMarkupComponent,
+  VideoMiniatureMarkupComponent,
+  VideosListMarkupComponent
+} from './peertube-custom-tags'
 
 type BuilderFunction = (el: HTMLElement) => ComponentRef<any>
 
@@ -30,10 +32,18 @@ export class CustomMarkupService {
     'peertube-videos-list': el => this.videosListBuilder(el)
   }
 
+  private customMarkdownRenderer: (text: string) => Promise<HTMLElement>
+
   constructor (
     private dynamicElementService: DynamicElementService,
     private markdown: MarkdownService
-  ) { }
+  ) {
+    this.customMarkdownRenderer = async (text: string) => this.buildElement(text)
+  }
+
+  getCustomMarkdownRenderer () {
+    return this.customMarkdownRenderer
+  }
 
   async buildElement (text: string) {
     const html = await this.markdown.customPageMarkdownToHTML(text, this.getSupportedTags())
diff --git a/client/src/app/shared/shared-custom-markup/embed-markup.component.ts b/client/src/app/shared/shared-custom-markup/embed-markup.component.ts
deleted file mode 100644
index a854d89f6..000000000
--- a/client/src/app/shared/shared-custom-markup/embed-markup.component.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { buildPlaylistLink, buildVideoLink, buildVideoOrPlaylistEmbed } from 'src/assets/player/utils'
-import { environment } from 'src/environments/environment'
-import { Component, ElementRef, Input, OnInit } from '@angular/core'
-
-@Component({
-  selector: 'my-embed-markup',
-  template: ''
-})
-export class EmbedMarkupComponent implements OnInit {
-  @Input() uuid: string
-  @Input() type: 'video' | 'playlist' = 'video'
-
-  constructor (private el: ElementRef) { }
-
-  ngOnInit () {
-    const link = this.type === 'video'
-      ? buildVideoLink({ baseUrl: `${environment.originServerUrl}/videos/embed/${this.uuid}` })
-      : buildPlaylistLink({ baseUrl: `${environment.originServerUrl}/video-playlists/embed/${this.uuid}` })
-
-    this.el.nativeElement.innerHTML = buildVideoOrPlaylistEmbed(link, this.uuid)
-  }
-}
diff --git a/client/src/app/shared/shared-custom-markup/index.ts b/client/src/app/shared/shared-custom-markup/index.ts
index a9ac2516c..3bff3a914 100644
--- a/client/src/app/shared/shared-custom-markup/index.ts
+++ b/client/src/app/shared/shared-custom-markup/index.ts
@@ -1,4 +1,5 @@
 export * from './custom-markup.service'
+export * from './custom-markup-container.component'
 export * from './dynamic-element.service'
 export * from './custom-markup-help.component'
 export * from './shared-custom-markup.module'
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.html b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.html
new file mode 100644
index 000000000..619bb9d8c
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.html
@@ -0,0 +1 @@
+<a [href]="href" [ngClass]="getClasses()" [target]="getTarget()">{{ label }}</a>
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.scss
new file mode 100644
index 000000000..f43d6b400
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.scss
@@ -0,0 +1,3 @@
+@import '_variables';
+@import '_mixins';
+
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.ts
new file mode 100644
index 000000000..987b37d19
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.ts
@@ -0,0 +1,34 @@
+import { Component, Input } from '@angular/core'
+import { VideoChannel } from '../../shared-main'
+
+/*
+ * Markup component that creates a button
+*/
+
+@Component({
+  selector: 'my-button-markup',
+  templateUrl: 'button-markup.component.html',
+  styleUrls: [ 'button-markup.component.scss' ]
+})
+export class ButtonMarkupComponent {
+  @Input() theme: 'primary' | 'secondary'
+  @Input() href: string
+  @Input() label: string
+  @Input() blankTarget?: boolean
+
+  channel: VideoChannel
+
+  getTarget () {
+    if (this.blankTarget === true) return '_blank'
+
+    return ''
+  }
+
+  getClasses () {
+    const additionalClass = this.theme === 'primary'
+      ? 'orange-button'
+      : 'grey-button'
+
+    return [ 'peertube-button-link', additionalClass ]
+  }
+}
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.html b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.html
new file mode 100644
index 000000000..da81006b9
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.html
@@ -0,0 +1,8 @@
+<div *ngIf="channel" class="channel">
+  <my-actor-avatar [channel]="channel" size="34"></my-actor-avatar>
+
+  <div class="display-name">{{ channel.displayName }}</div>
+  <div class="username">{{ channel.name }}</div>
+
+  <div class="description">{{ channel.description }}</div>
+</div>
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss
new file mode 100644
index 000000000..85018afe2
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss
@@ -0,0 +1,9 @@
+@import '_variables';
+@import '_mixins';
+
+.channel {
+  border-radius: 15px;
+  padding: 10px;
+  width: min-content;
+  border: 1px solid pvar(--mainColor);
+}
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts
new file mode 100644
index 000000000..25deafb80
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts
@@ -0,0 +1,26 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { VideoChannel, VideoChannelService } from '../../shared-main'
+
+/*
+ * Markup component that creates a channel miniature only
+*/
+
+@Component({
+  selector: 'my-channel-miniature-markup',
+  templateUrl: 'channel-miniature-markup.component.html',
+  styleUrls: [ 'channel-miniature-markup.component.scss' ]
+})
+export class ChannelMiniatureMarkupComponent implements OnInit {
+  @Input() name: string
+
+  channel: VideoChannel
+
+  constructor (
+    private channelService: VideoChannelService
+  ) { }
+
+  ngOnInit () {
+    this.channelService.getVideoChannel(this.name)
+      .subscribe(channel => this.channel = channel)
+  }
+}
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/embed-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/embed-markup.component.ts
new file mode 100644
index 000000000..a854d89f6
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/embed-markup.component.ts
@@ -0,0 +1,22 @@
+import { buildPlaylistLink, buildVideoLink, buildVideoOrPlaylistEmbed } from 'src/assets/player/utils'
+import { environment } from 'src/environments/environment'
+import { Component, ElementRef, Input, OnInit } from '@angular/core'
+
+@Component({
+  selector: 'my-embed-markup',
+  template: ''
+})
+export class EmbedMarkupComponent implements OnInit {
+  @Input() uuid: string
+  @Input() type: 'video' | 'playlist' = 'video'
+
+  constructor (private el: ElementRef) { }
+
+  ngOnInit () {
+    const link = this.type === 'video'
+      ? buildVideoLink({ baseUrl: `${environment.originServerUrl}/videos/embed/${this.uuid}` })
+      : buildPlaylistLink({ baseUrl: `${environment.originServerUrl}/video-playlists/embed/${this.uuid}` })
+
+    this.el.nativeElement.innerHTML = buildVideoOrPlaylistEmbed(link, this.uuid)
+  }
+}
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/index.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/index.ts
new file mode 100644
index 000000000..ee2a8f330
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/index.ts
@@ -0,0 +1,6 @@
+export * from './button-markup.component'
+export * from './channel-miniature-markup.component'
+export * from './embed-markup.component'
+export * from './playlist-miniature-markup.component'
+export * from './video-miniature-markup.component'
+export * from './videos-list-markup.component'
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.html b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.html
new file mode 100644
index 000000000..4e1d1a13f
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.html
@@ -0,0 +1,2 @@
+<my-video-playlist-miniature *ngIf="playlist" [playlist]="playlist">
+</my-video-playlist-miniature>
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.scss
new file mode 100644
index 000000000..281cef726
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.scss
@@ -0,0 +1,7 @@
+@import '_variables';
+@import '_mixins';
+
+my-video-playlist-miniature {
+  display: inline-block;
+  width: $video-thumbnail-width;
+}
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.ts
new file mode 100644
index 000000000..eddc3636e
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.ts
@@ -0,0 +1,38 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { MiniatureDisplayOptions } from '../../shared-video-miniature'
+import { VideoPlaylist, VideoPlaylistService } from '../../shared-video-playlist'
+
+/*
+ * Markup component that creates a playlist miniature only
+*/
+
+@Component({
+  selector: 'my-playlist-miniature-markup',
+  templateUrl: 'playlist-miniature-markup.component.html',
+  styleUrls: [ 'playlist-miniature-markup.component.scss' ]
+})
+export class PlaylistMiniatureMarkupComponent implements OnInit {
+  @Input() uuid: string
+
+  playlist: VideoPlaylist
+
+  displayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: true,
+    avatar: false,
+    privacyLabel: false,
+    privacyText: false,
+    state: false,
+    blacklistInfo: false
+  }
+
+  constructor (
+    private playlistService: VideoPlaylistService
+  ) { }
+
+  ngOnInit () {
+    this.playlistService.getVideoPlaylist(this.uuid)
+      .subscribe(playlist => this.playlist = playlist)
+  }
+}
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.html b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.html
new file mode 100644
index 000000000..9b4930b6d
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.html
@@ -0,0 +1,6 @@
+<my-video-miniature
+  *ngIf="video"
+  [video]="video" [user]="getUser()" [displayAsRow]="false"
+  [displayVideoActions]="false" [displayOptions]="displayOptions"
+>
+</my-video-miniature>
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.scss
new file mode 100644
index 000000000..81e265f29
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.scss
@@ -0,0 +1,7 @@
+@import '_variables';
+@import '_mixins';
+
+my-video-miniature {
+  display: inline-block;
+  width: $video-thumbnail-width;
+}
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.ts
new file mode 100644
index 000000000..c833c56c7
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.ts
@@ -0,0 +1,44 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { AuthService } from '@app/core'
+import { Video, VideoService } from '../../shared-main'
+import { MiniatureDisplayOptions } from '../../shared-video-miniature'
+
+/*
+ * Markup component that creates a video miniature only
+*/
+
+@Component({
+  selector: 'my-video-miniature-markup',
+  templateUrl: 'video-miniature-markup.component.html',
+  styleUrls: [ 'video-miniature-markup.component.scss' ]
+})
+export class VideoMiniatureMarkupComponent implements OnInit {
+  @Input() uuid: string
+
+  video: Video
+
+  displayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: true,
+    avatar: false,
+    privacyLabel: false,
+    privacyText: false,
+    state: false,
+    blacklistInfo: false
+  }
+
+  constructor (
+    private auth: AuthService,
+    private videoService: VideoService
+  ) { }
+
+  getUser () {
+    return this.auth.getUser()
+  }
+
+  ngOnInit () {
+    this.videoService.getVideo({ videoId: this.uuid })
+      .subscribe(video => this.video = video)
+  }
+}
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.html b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.html
new file mode 100644
index 000000000..501f35e04
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.html
@@ -0,0 +1,13 @@
+<div class="root">
+  <h4 *ngIf="title">{{ title }}</h4>
+  <div *ngIf="description" class="description">{{ description }}</div>
+
+  <div class="videos">
+    <my-video-miniature
+      *ngFor="let video of videos"
+      [video]="video" [user]="getUser()" [displayAsRow]="false"
+      [displayVideoActions]="false" [displayOptions]="displayOptions"
+    >
+    </my-video-miniature>
+  </div>
+</div>
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss
new file mode 100644
index 000000000..dcd931090
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss
@@ -0,0 +1,9 @@
+@import '_variables';
+@import '_mixins';
+
+my-video-miniature {
+  margin-right: 15px;
+  display: inline-block;
+  min-width: $video-thumbnail-width;
+  max-width: $video-thumbnail-width;
+}
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts
new file mode 100644
index 000000000..8d9e223da
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts
@@ -0,0 +1,60 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { AuthService } from '@app/core'
+import { VideoSortField } from '@shared/models'
+import { Video, VideoService } from '../../shared-main'
+import { MiniatureDisplayOptions } from '../../shared-video-miniature'
+
+/*
+ * Markup component list videos depending on criterias
+*/
+
+@Component({
+  selector: 'my-videos-list-markup',
+  templateUrl: 'videos-list-markup.component.html',
+  styleUrls: [ 'videos-list-markup.component.scss' ]
+})
+export class VideosListMarkupComponent implements OnInit {
+  @Input() title: string
+  @Input() description: string
+  @Input() sort = '-publishedAt'
+  @Input() categoryOneOf: number[]
+  @Input() languageOneOf: string[]
+  @Input() count = 10
+
+  videos: Video[]
+
+  displayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: true,
+    avatar: false,
+    privacyLabel: false,
+    privacyText: false,
+    state: false,
+    blacklistInfo: false
+  }
+
+  constructor (
+    private auth: AuthService,
+    private videoService: VideoService
+  ) { }
+
+  getUser () {
+    return this.auth.getUser()
+  }
+
+  ngOnInit () {
+    const options = {
+      videoPagination: {
+        currentPage: 1,
+        itemsPerPage: this.count
+      },
+      categoryOneOf: this.categoryOneOf,
+      languageOneOf: this.languageOneOf,
+      sort: this.sort as VideoSortField
+    }
+
+    this.videoService.getVideos(options)
+      .subscribe(({ data }) => this.videos = data)
+  }
+}
diff --git a/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.html b/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.html
deleted file mode 100644
index 4e1d1a13f..000000000
--- a/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<my-video-playlist-miniature *ngIf="playlist" [playlist]="playlist">
-</my-video-playlist-miniature>
diff --git a/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.scss
deleted file mode 100644
index 281cef726..000000000
--- a/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import '_variables';
-@import '_mixins';
-
-my-video-playlist-miniature {
-  display: inline-block;
-  width: $video-thumbnail-width;
-}
diff --git a/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.ts b/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.ts
deleted file mode 100644
index 7aee450f1..000000000
--- a/client/src/app/shared/shared-custom-markup/playlist-miniature-markup.component.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core'
-import { MiniatureDisplayOptions } from '../shared-video-miniature'
-import { VideoPlaylist, VideoPlaylistService } from '../shared-video-playlist'
-
-/*
- * Markup component that creates a playlist miniature only
-*/
-
-@Component({
-  selector: 'my-playlist-miniature-markup',
-  templateUrl: 'playlist-miniature-markup.component.html',
-  styleUrls: [ 'playlist-miniature-markup.component.scss' ]
-})
-export class PlaylistMiniatureMarkupComponent implements OnInit {
-  @Input() uuid: string
-
-  playlist: VideoPlaylist
-
-  displayOptions: MiniatureDisplayOptions = {
-    date: true,
-    views: true,
-    by: true,
-    avatar: false,
-    privacyLabel: false,
-    privacyText: false,
-    state: false,
-    blacklistInfo: false
-  }
-
-  constructor (
-    private playlistService: VideoPlaylistService
-  ) { }
-
-  ngOnInit () {
-    this.playlistService.getVideoPlaylist(this.uuid)
-      .subscribe(playlist => this.playlist = playlist)
-  }
-}
diff --git a/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts b/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts
index 66f6b98f6..dccd64709 100644
--- a/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts
+++ b/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts
@@ -5,15 +5,18 @@ import { SharedGlobalIconModule } from '../shared-icons'
 import { SharedMainModule } from '../shared-main'
 import { SharedVideoMiniatureModule } from '../shared-video-miniature'
 import { SharedVideoPlaylistModule } from '../shared-video-playlist'
-import { ButtonMarkupComponent } from './button-markup.component'
-import { ChannelMiniatureMarkupComponent } from './channel-miniature-markup.component'
+import { CustomMarkupContainerComponent } from './custom-markup-container.component'
 import { CustomMarkupHelpComponent } from './custom-markup-help.component'
 import { CustomMarkupService } from './custom-markup.service'
 import { DynamicElementService } from './dynamic-element.service'
-import { EmbedMarkupComponent } from './embed-markup.component'
-import { PlaylistMiniatureMarkupComponent } from './playlist-miniature-markup.component'
-import { VideoMiniatureMarkupComponent } from './video-miniature-markup.component'
-import { VideosListMarkupComponent } from './videos-list-markup.component'
+import {
+  ButtonMarkupComponent,
+  ChannelMiniatureMarkupComponent,
+  EmbedMarkupComponent,
+  PlaylistMiniatureMarkupComponent,
+  VideoMiniatureMarkupComponent,
+  VideosListMarkupComponent
+} from './peertube-custom-tags'
 
 @NgModule({
   imports: [
@@ -33,7 +36,8 @@ import { VideosListMarkupComponent } from './videos-list-markup.component'
     EmbedMarkupComponent,
     VideosListMarkupComponent,
     ButtonMarkupComponent,
-    CustomMarkupHelpComponent
+    CustomMarkupHelpComponent,
+    CustomMarkupContainerComponent
   ],
 
   exports: [
@@ -43,7 +47,8 @@ import { VideosListMarkupComponent } from './videos-list-markup.component'
     VideosListMarkupComponent,
     EmbedMarkupComponent,
     ButtonMarkupComponent,
-    CustomMarkupHelpComponent
+    CustomMarkupHelpComponent,
+    CustomMarkupContainerComponent
   ],
 
   providers: [
diff --git a/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.html b/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.html
deleted file mode 100644
index 9b4930b6d..000000000
--- a/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<my-video-miniature
-  *ngIf="video"
-  [video]="video" [user]="getUser()" [displayAsRow]="false"
-  [displayVideoActions]="false" [displayOptions]="displayOptions"
->
-</my-video-miniature>
diff --git a/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.scss
deleted file mode 100644
index 81e265f29..000000000
--- a/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import '_variables';
-@import '_mixins';
-
-my-video-miniature {
-  display: inline-block;
-  width: $video-thumbnail-width;
-}
diff --git a/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.ts b/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.ts
deleted file mode 100644
index 79add0c3b..000000000
--- a/client/src/app/shared/shared-custom-markup/video-miniature-markup.component.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core'
-import { AuthService } from '@app/core'
-import { Video, VideoService } from '../shared-main'
-import { MiniatureDisplayOptions } from '../shared-video-miniature'
-
-/*
- * Markup component that creates a video miniature only
-*/
-
-@Component({
-  selector: 'my-video-miniature-markup',
-  templateUrl: 'video-miniature-markup.component.html',
-  styleUrls: [ 'video-miniature-markup.component.scss' ]
-})
-export class VideoMiniatureMarkupComponent implements OnInit {
-  @Input() uuid: string
-
-  video: Video
-
-  displayOptions: MiniatureDisplayOptions = {
-    date: true,
-    views: true,
-    by: true,
-    avatar: false,
-    privacyLabel: false,
-    privacyText: false,
-    state: false,
-    blacklistInfo: false
-  }
-
-  constructor (
-    private auth: AuthService,
-    private videoService: VideoService
-  ) { }
-
-  getUser () {
-    return this.auth.getUser()
-  }
-
-  ngOnInit () {
-    this.videoService.getVideo({ videoId: this.uuid })
-      .subscribe(video => this.video = video)
-  }
-}
diff --git a/client/src/app/shared/shared-custom-markup/videos-list-markup.component.html b/client/src/app/shared/shared-custom-markup/videos-list-markup.component.html
deleted file mode 100644
index 501f35e04..000000000
--- a/client/src/app/shared/shared-custom-markup/videos-list-markup.component.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<div class="root">
-  <h4 *ngIf="title">{{ title }}</h4>
-  <div *ngIf="description" class="description">{{ description }}</div>
-
-  <div class="videos">
-    <my-video-miniature
-      *ngFor="let video of videos"
-      [video]="video" [user]="getUser()" [displayAsRow]="false"
-      [displayVideoActions]="false" [displayOptions]="displayOptions"
-    >
-    </my-video-miniature>
-  </div>
-</div>
diff --git a/client/src/app/shared/shared-custom-markup/videos-list-markup.component.scss b/client/src/app/shared/shared-custom-markup/videos-list-markup.component.scss
deleted file mode 100644
index dcd931090..000000000
--- a/client/src/app/shared/shared-custom-markup/videos-list-markup.component.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import '_variables';
-@import '_mixins';
-
-my-video-miniature {
-  margin-right: 15px;
-  display: inline-block;
-  min-width: $video-thumbnail-width;
-  max-width: $video-thumbnail-width;
-}
diff --git a/client/src/app/shared/shared-custom-markup/videos-list-markup.component.ts b/client/src/app/shared/shared-custom-markup/videos-list-markup.component.ts
deleted file mode 100644
index cc25d0a51..000000000
--- a/client/src/app/shared/shared-custom-markup/videos-list-markup.component.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core'
-import { AuthService } from '@app/core'
-import { VideoSortField } from '@shared/models'
-import { Video, VideoService } from '../shared-main'
-import { MiniatureDisplayOptions } from '../shared-video-miniature'
-
-/*
- * Markup component list videos depending on criterias
-*/
-
-@Component({
-  selector: 'my-videos-list-markup',
-  templateUrl: 'videos-list-markup.component.html',
-  styleUrls: [ 'videos-list-markup.component.scss' ]
-})
-export class VideosListMarkupComponent implements OnInit {
-  @Input() title: string
-  @Input() description: string
-  @Input() sort = '-publishedAt'
-  @Input() categoryOneOf: number[]
-  @Input() languageOneOf: string[]
-  @Input() count = 10
-
-  videos: Video[]
-
-  displayOptions: MiniatureDisplayOptions = {
-    date: true,
-    views: true,
-    by: true,
-    avatar: false,
-    privacyLabel: false,
-    privacyText: false,
-    state: false,
-    blacklistInfo: false
-  }
-
-  constructor (
-    private auth: AuthService,
-    private videoService: VideoService
-  ) { }
-
-  getUser () {
-    return this.auth.getUser()
-  }
-
-  ngOnInit () {
-    const options = {
-      videoPagination: {
-        currentPage: 1,
-        itemsPerPage: this.count
-      },
-      categoryOneOf: this.categoryOneOf,
-      languageOneOf: this.languageOneOf,
-      sort: this.sort as VideoSortField
-    }
-
-    this.videoService.getVideos(options)
-      .subscribe(({ data }) => this.videos = data)
-  }
-}
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.ts b/client/src/app/shared/shared-instance/instance-about-accordion.component.ts
index ab75c31ae..8e7bf2021 100644
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.ts
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.ts
@@ -23,7 +23,6 @@ export class InstanceAboutAccordionComponent implements OnInit {
 
   about: About
   aboutHtml = {
-    description: '',
     terms: '',
     codeOfConduct: '',
     moderationInformation: '',
diff --git a/client/src/app/shared/shared-instance/instance.service.ts b/client/src/app/shared/shared-instance/instance.service.ts
index 0a30446df..70e022178 100644
--- a/client/src/app/shared/shared-instance/instance.service.ts
+++ b/client/src/app/shared/shared-instance/instance.service.ts
@@ -40,7 +40,6 @@ export class InstanceService {
 
   async buildHtml (about: About) {
     const html = {
-      description: '',
       terms: '',
       codeOfConduct: '',
       moderationInformation: '',
diff --git a/client/src/app/shared/shared-instance/shared-instance.module.ts b/client/src/app/shared/shared-instance/shared-instance.module.ts
index 13c681ab8..77a64b538 100644
--- a/client/src/app/shared/shared-instance/shared-instance.module.ts
+++ b/client/src/app/shared/shared-instance/shared-instance.module.ts
@@ -1,6 +1,7 @@
 
 import { NgModule } from '@angular/core'
 import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
+import { SharedCustomMarkupModule } from '../shared-custom-markup'
 import { SharedMainModule } from '../shared-main/shared-main.module'
 import { FeatureBooleanComponent } from './feature-boolean.component'
 import { InstanceAboutAccordionComponent } from './instance-about-accordion.component'
@@ -12,7 +13,8 @@ import { InstanceService } from './instance.service'
 @NgModule({
   imports: [
     SharedMainModule,
-    NgbAccordionModule
+    NgbAccordionModule,
+    SharedCustomMarkupModule
   ],
 
   declarations: [
-- 
cgit v1.2.3