ReactiveX · niklas-wortmann · Apr 28, 2021 · Apr 27, 2021 · Apr 27, 2021 · Apr 27, 2021
diff --git a/docs_app/content/blackLivesMatter.md b/docs_app/content/blackLivesMatter.md
@@ -0,0 +1,49 @@
+<style>
+    .blm-background {
+        background-color: black; 
+        color: white; 
+        display: flex; 
+        min-height: calc(100vh + 64px);
+        margin: -20px -50px;
+    }
+
+    .text-container.blm-container {
+        text-align: center;
+        line-height: inherit;
+        max-width: inherit;
+    }
+
+    .blm-text {
+        font-size: 2rem;
+        line-height: inherit
+    }
+
+    .blm-list-item {
+        margin: 10px 0
+    }
+</style>
+
+<article class="blm-background">
+  <div layout="row" layout-xs="column" class="home-row homepage-container">
+    <div class="text-container blm-container">
+      <h1 class="no-anchor no-toc" style="font-size: 3rem; line-height: inherit">BLACK LIVES MATTER</h1>
+      <p class="blm-text">
+        We stand in solidarity with the Black Lives Matter movement. We believe that technologists must not be silent in the fight to end racial inequality.      </p>
+      <p class="blm-text">
+        We ask you to stand with us and help educate your team members and those in your network on how to help dismantle a system that oppresses Black people. Find a list of starting resources here: 
+        <ul style="list-style-type: none; line-height: inherit; padding-inline-start: 0">
+          <li class="blm-list-item"><a class="blm-text" href="https://www.youtube.com/watch?v=-aCn72iXO9s">Let's get to the root of racial injustice by Megan Ming Francis</a></li>
+          <li class="blm-list-item"><a class="blm-text" href="http://www.changecadet.com/blog/2020/5/30/what-leaders-can-do-for-black-employees">What Leaders can do for Black Employees by Dr. Akilah Cadet</a></li>
+          <li class="blm-list-item"><a class="blm-text" href="https://blacktechpipeline.substack.com/p/hey-employers-do-black-lives-matter">Hey Employers: Do Black Lives Matter? by Pariss Athena</a></li>
+          <li class="blm-list-item"><a class="blm-text" href="https://safiyaunoble.com/">Algorithms of Oppression by Safiya Umoja Noble</a></li>
+          <li class="blm-list-item"><a class="blm-text" href="https://www.rageinsidethemachine.com/">Rage Inside The Machine by Robert Smith</a></li>
+          <li class="blm-list-item"><a class="blm-text" href="https://www.sarawb.com/">Technically Wrong by Sara Wachter-Boettcher</a></li>
+        </ul>
+      </p>
+      <p class="blm-text">
+        In solidarity, we ask you to consider financially supporting efforts such as <a class="blm-text" href="https://secure.actblue.com/donate/ms_blm_homepage_2019">Black Lives Matter</a>, 
+        <a class="blm-text" href="https://support.eji.org/give/153413/#!/donation/checkout">The Equal Justice Initiative</a> or local charity organizations.
+      </p>
+    </div>
+  </div>
+</article>
diff --git a/docs_app/content/marketing/index.html b/docs_app/content/marketing/index.html
@@ -1,26 +1,78 @@
+<!-- FULL HEADER BLOCK -->
+<header>
+
+  <!-- BACKGROUND IMAGE -->
+  <div class="hero"></div>
+
+  <!-- INTRO SECTION -->
+  <section id="intro">
+
+    <!-- LOGO -->
+    <div class="hero-logo">
+      <img src="generated/images/marketing/home/Rx_Logo-512-512.png" alt="RxJS logo"/>
+    </div>
+
+    <!-- CONTAINER -->
+    <div class="homepage-container">
+      <div class="headline-container">
+        <h2 class="hero-headline no-toc">RxJS</h2>
+        <span class="hero-subheadline">Reactive Extensions Library for JavaScript</span>
+      </div>
+      <a class="button hero-cta" href="/guide/overview">Get Started</a>
+      <a class="button hero-cta" href="/api">API Docs</a>
+    </div>
+
+  </section>
+
+</header>
+
 <!-- MAIN CONTENT -->
-<article class="blm-background">
+<article>
 
-  <div layout="row" layout-xs="column" class="home-row homepage-container">
-    <div class="text-container blm-container">
-      <h1 class="no-anchor no-toc" style="font-size: 3rem; line-height: inherit">BLACK LIVES MATTER</h1>
-      <p class="blm-text">
-        We stand in solidarity with the Black Lives Matter movement. We believe that technologists must not be silent in the fight to end racial inequality.      </p>
-      <p class="blm-text">
-        We ask you to stand with us and help educate your team members and those in your network on how to help dismantle a system that oppresses Black people. Find a list of starting resources here: 
-        <ul style="list-style-type: none; line-height: inherit; padding-inline-start: 0">
-          <li class="blm-list-item"><a class="blm-text" href="https://www.youtube.com/watch?v=-aCn72iXO9s">Let's get to the root of racial injustice by Megan Ming Francis</a></li>
-          <li class="blm-list-item"><a class="blm-text" href="http://www.changecadet.com/blog/2020/5/30/what-leaders-can-do-for-black-employees">What Leaders can do for Black Employees by Dr. Akilah Cadet</a></li>
-          <li class="blm-list-item"><a class="blm-text" href="https://blacktechpipeline.substack.com/p/hey-employers-do-black-lives-matter">Hey Employers: Do Black Lives Matter? by Pariss Athena</a></li>
-          <li class="blm-list-item"><a class="blm-text" href="https://safiyaunoble.com/">Algorithms of Oppression by Safiya Umoja Noble</a></li>
-          <li class="blm-list-item"><a class="blm-text" href="https://www.rageinsidethemachine.com/">Rage Inside The Machine by Robert Smith</a></li>
-          <li class="blm-list-item"><a class="blm-text" href="https://www.sarawb.com/">Technically Wrong by Sara Wachter-Boettcher</a></li>
+  <h1 class="no-anchor no-toc" style="display: none"></h1>
+
+  <div class="home-rows">
+
+  <aio-announcement-bar></aio-announcement-bar>
+  <div layout="row" class="home-row homepage-container">
+    <div class="card">
+      <div class="promo-1-desc l-pad-top-2">
+        <div class="text-headline">Version 7 got just released!</div>
+        <p>here are a some of the benefits of running on the latest version</p>
+        <ul>
+          <li>~50% smaller</li>
+          <li>improved typings</li>
+          <li>more consistent APIs</li>
+          <li>and much more...</li>
         </ul>
-      </p>
-      <p class="blm-text">
-        In solidarity, we ask you to consider financially supporting efforts such as <a class="blm-text" href="https://secure.actblue.com/donate/ms_blm_homepage_2019">Black Lives Matter</a>, 
-        <a class="blm-text" href="https://support.eji.org/give/153413/#!/donation/checkout">The Equal Justice Initiative</a> or local charity organizations.
-      </p>
+      </div>
+    </div>
+  </div>
+
+
+  <div layout="row" layout-xs="column" class="home-row homepage-container">
+
+    <div class="text-container">
+      <div class="text-block promo-1-desc l-pad-top-2">
+       <div class="text-headline">Reactive Extensions Library for JavaScript</div>
+        <p class="text-body">
+          RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code. This project is a rewrite of Reactive-Extensions/RxJS with better performance, better modularity, better debuggable call stacks, while staying mostly backwards compatible, with some breaking changes that reduce the API surface
+        </p>
+      </div>
     </div>
   </div>
+  <hr>
+  <div layout="row" layout-xs="column" class="home-row homepage-container">
+    <div layout="row" layout-xs="column" class="home-row">
+      <a href="code-of-conduct">
+        <div class="card">
+          <div class="card-text-container">
+            <p>Please pay attention to our</p>
+            <div class="text-headline">Code of Conduct</div>
+          </div>
+        </div>
+      </a>
+    </div>
+  </div><!-- end of home rows -->
+
 </article>
diff --git a/docs_app/content/navigation.json b/docs_app/content/navigation.json
@@ -95,6 +95,11 @@
         }
       ]
     },
+    {
+      "url": "6-to-7-change-summary",
+      "title": "Detailed Change List",
+      "tooltip": "Detailed Change List"
+    },
     {
       "url": "code-of-conduct",
       "title": "Code of Conduct",

diff --git a/docs_app/src/app/app.component.html b/docs_app/src/app/app.component.html
@@ -7,40 +7,54 @@
 <mat-toolbar color="primary" class="app-toolbar no-print" [class.transitioning]="isTransitioning">
   <mat-toolbar-row class="notification-container">
     <aio-notification
-      notificationId="angular-v6-announcement"
-      expirationDate="2018-07-01"
-      [dismissOnContentClick]="true"
-      (dismissed)="notificationDismissed()">
-      <a href="https://blog.angular.io/version-6-0-0-of-angular-now-available-cc56b0efa7a4">
-        <mat-icon class="icon" svgIcon="insert_comment" aria-label="Announcement"></mat-icon>
-        <span class="message">Version 6 of Angular Now Available!</span>
-        <span class="action-button">Learn More</span>
-      </a>
+      notificationId="blm-2020"
+      expirationDate="2022-04-15"
+      [dismissOnContentClick]="false"
+      (dismissed)="notificationDismissed()"
+    >
+      <a href="/blackLivesMatter">#BlackLivesMatter</a>
     </aio-notification>
   </mat-toolbar-row>
   <mat-toolbar-row>
     <button mat-button class="hamburger" [class.starting]="isStarting" (click)="sidenav.toggle()" title="Docs menu">
       <mat-icon svgIcon="menu"></mat-icon>
     </button>
     <a class="nav-link home" href="/" [ngSwitch]="isSideBySide">
-      <img *ngSwitchCase="true" src="assets/images/logos/logo.png" width="150" height="40" title="Home" alt="Home">
-      <img *ngSwitchDefault src="assets/images/logos/Rx_Logo_S.png" width="37" height="40" title="Home" alt="Home">
+      <img *ngSwitchCase="true" src="assets/images/logos/logo.png" width="150" height="40" title="Home" alt="Home" />
+      <img *ngSwitchDefault src="assets/images/logos/Rx_Logo_S.png" width="37" height="40" title="Home" alt="Home" />
     </a>
     <aio-top-menu *ngIf="isSideBySide" [nodes]="topMenuNodes"></aio-top-menu>
     <aio-search-box class="search-container" #searchBox (onSearch)="doSearch($event)" (onFocus)="doSearch($event)"></aio-search-box>
     <div class="toolbar-external-icons-container">
       <a href="https://github.com/ReactiveX/rxjs" title="GitHub" target="_blank">
-        <img src="assets/images/logos/github-icon.svg" alt="View on GitHub"></a>
+        <img src="assets/images/logos/github-icon.svg" alt="View on GitHub"
+      /></a>
     </div>
   </mat-toolbar-row>
 </mat-toolbar>
 
-<aio-search-results #searchResultsView *ngIf="showSearchResults" [searchResults]="searchResults | async" (resultSelected)="hideSearchResults()"></aio-search-results>
+<aio-search-results
+  #searchResultsView
+  *ngIf="showSearchResults"
+  [searchResults]="searchResults | async"
+  (resultSelected)="hideSearchResults()"
+></aio-search-results>
 
 <mat-sidenav-container class="sidenav-container" [class.starting]="isStarting" [class.has-floating-toc]="hasFloatingToc">
-
-  <mat-sidenav [ngClass]="{'collapsed': !isSideBySide}" #sidenav class="sidenav" [mode]="mode" [opened]="isOpened" (openedChange)="updateHostClasses()">
-    <aio-nav-menu *ngIf="!isSideBySide" [nodes]="topMenuNarrowNodes" [currentNode]="currentNodes?.TopBarNarrow" [isWide]="false"></aio-nav-menu>
+  <mat-sidenav
+    [ngClass]="{ collapsed: !isSideBySide }"
+    #sidenav
+    class="sidenav"
+    [mode]="mode"
+    [opened]="isOpened"
+    (openedChange)="updateHostClasses()"
+  >
+    <aio-nav-menu
+      *ngIf="!isSideBySide"
+      [nodes]="topMenuNarrowNodes"
+      [currentNode]="currentNodes?.TopBarNarrow"
+      [isWide]="false"
+    ></aio-nav-menu>
     <aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNodes?.SideNav" [isWide]="isSideBySide"></aio-nav-menu>
 
     <div class="doc-version">
@@ -50,18 +64,23 @@
 
   <section class="sidenav-content" [id]="pageId" role="main">
     <aio-mode-banner [mode]="deployment.mode" [version]="versionInfo"></aio-mode-banner>
-    <aio-doc-viewer [class.no-animations]="isStarting"
-        [doc]="currentDocument"
-        (docReady)="onDocReady()"
-        (docRemoved)="onDocRemoved()"
-        (docInserted)="onDocInserted()"
-        (docRendered)="onDocRendered()">
+    <aio-doc-viewer
+      [class.no-animations]="isStarting"
+      [doc]="currentDocument"
+      (docReady)="onDocReady()"
+      (docRemoved)="onDocRemoved()"
+      (docInserted)="onDocInserted()"
+      (docRendered)="onDocRendered()"
+    >
     </aio-doc-viewer>
     <aio-dt *ngIf="dtOn" [(doc)]="currentDocument"></aio-dt>
   </section>
-
 </mat-sidenav-container>
 
 <div *ngIf="hasFloatingToc" class="toc-container no-print" [style.max-height.px]="tocMaxHeight" (mousewheel)="restrainScrolling($event)">
   <aio-lazy-ce selector="aio-toc"></aio-lazy-ce>
-</div>
+</div>
+
+<footer class="no-print">
+  <aio-footer [nodes]="footerNodes" [versionInfo]="versionInfo"></aio-footer>
+</footer>
diff --git a/docs_app/src/app/layout/footer/footer.component.html b/docs_app/src/app/layout/footer/footer.component.html
@@ -0,0 +1,6 @@
+<p>
+  Code licensed under an <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache-2.0 License</a>. Documentation licensed under
+  <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
+</p>
+<p>Version {{ versionInfo?.full }}.</p>
+<!-- TODO: twitter widget (but only on pages that use twitter) -->
diff --git a/docs_app/src/styles/1-layouts/_footer.scss b/docs_app/src/styles/1-layouts/_footer.scss
@@ -0,0 +1,103 @@
+footer {
+  position: relative;
+  line-height: 24px;
+  flex: 1;
+  padding: 48px;
+  z-index: 0;
+  background-color: $pink;
+  color: $offwhite;
+  font-weight: 300;
+
+  aio-footer {
+    position: relative;
+    z-index: 0;
+  }
+
+  .footer-block {
+    margin: 0 24px;
+    vertical-align: top;
+  }
+
+  a {
+    color: $offwhite;
+    font-weight: 300;
+    text-decoration: none;
+    z-index: 20;
+    position: relative;
+    &:hover {
+      text-decoration: underline;
+    }
+    &:visited {
+      text-decoration: none;
+    }
+  }
+  a.action {
+    cursor: pointer;
+  }
+  h3 {
+    font-size: 16px;
+    text-transform: uppercase;
+    font-weight: 400;
+    margin: 0 0 16px;
+  }
+  p {
+    text-align: center;
+    margin: 10px 0px 5px;
+
+    @media (max-width: 480px) {
+      text-align: left;
+    }
+  }
+
+  div.grid-fluid {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+
+    justify-content: center;
+
+    text-align: left;
+    margin: 0 0 40px;
+
+    ul {
+      list-style-position: inside;
+      padding: 0px;
+      margin: 0px;
+
+      li {
+        list-style-type: none;
+        padding: 0px;
+        text-align: left;
+      }
+    }
+
+    @media (max-width: 480px) {
+      flex-direction: column;
+      .footer-block {
+        margin: 8px 24px;
+      }
+    }
+  }
+
+  @media (max-width: 700px) {
+    h3 {
+      font-size: 110%;
+    }
+  }
+  @media (max-width: 600px) {
+    h3 {
+      font-size: 100%;
+    }
+  }
+}
+
+footer::after {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-size: 320px auto;
+}