Merge remote-tracking branch 'origin/test'

Client/src/app/app-routing.module.ts

@@ -80,7 +80,17 @@ const routes =
       },
       {
         path: 'covid',
-        component: ImageComponent
+        component: ImageComponent,
+        data: {
+          imageUrl: 'assets/images/tiny/covid_tract.jpg'
+        }
+      },
+      {
+        path: 'covid2',
+        component: ImageComponent,
+        data: {
+          imageUrl: 'assets/images/tiny/covid_tract_2.jpg'
+        }
       },
       {
         path: 'camp',

Client/src/app/components/home/home.component.html

@@ -45,12 +45,12 @@
         <img src="assets/images/home-images/tiny/VBS_small.jpg" style="width:75%; max-width: 350px; position: relative; z-index: 1; box-shadow: 0 0 20px pink;" >
     </div> 
 
-    <div class="row tint" *ngIf="showSpecial" >            
+    <div class="row" *ngIf="showSpecial" >            
         <div class="row-content">            
             <div class="row-content-col-right align-top center">
                 <p ofbFadeInOnScroll class="row-content-header">COVID-19</p>
                 <p ofbFadeInOnScroll> 
-                    Due to the COVID-19 outbreak our church building will be closed until April 1st. Video 
+                    Due to the COVID-19 outbreak our church building will be closed until May 1st. Video 
                     and audio services will be posted online during this time. 
                 </p>
                 <br>
@@ -61,10 +61,30 @@
                     <i ofbicon>headset</i> <a routerLink="/sermons" class="align-top">Click here to listen online</a>
                 </p>
                 <p ofbFadeInOnScroll class="action">
-                    <i ofbicon>insert_photo</i> <a routerLink="/covid" class="align-top">Click here for coronavirus encouragement</a>
+                    <i ofbicon>insert_photo</i> <a routerLink="/covid2" class="align-top">Click here for coronavirus encouragement</a>
                 </p>
             </div>  
             <div class="row-content-col-left"> 
+                <a routerLink="/covid2" >
+                    <img class="w-100pct" ofbFadeInOnScroll src="assets/images/home-images/tiny/covid_header_2.jpg" > 
+                </a>                              
+            </div>                      
+        </div>
+    </div>
+
+    <div class="row tint" *ngIf="showSpecial" >            
+        <div class="row-content">            
+            <div class="row-content-col-left align-top center">
+                <p ofbFadeInOnScroll class="row-content-header">Days of Uncertainty</p>
+                <p ofbFadeInOnScroll> 
+                    Days of uncertainty are looming over us. There is fear of loss - of life, jobs and income. Restricted gatherings. Food & medical equipment shortages. The future is concerning. Fear produces a negative atmospher, tormenting us, agitating our minds. Fear is crippling to those caught in its grip.
+                </p>
+                <br>
+                <p ofbFadeInOnScroll class="action">
+                    <i ofbicon>insert_photo</i> <a routerLink="/covid2" class="align-top">There is Hope! There is an Answer! Click Here!</a>
+                </p>
+            </div>  
+            <div class="row-content-col-right"> 
                 <a routerLink="/covid" >
                     <img class="w-100pct" ofbFadeInOnScroll src="assets/images/home-images/tiny/covid_header.jpg" > 
                 </a>                              
@@ -108,7 +128,7 @@
 
     <div class="row">
         <div class="row-content">
-            <div class="row-content-col-left align-top">
+            <div class="row-content-col-right align-top">
                 <p ofbFadeInOnScroll class="row-content-header">...that ye also may have fellowship with us...</p>                
                 <p ofbFadeInOnScroll>It is exciting to gather together in the name of the Lord and
                    we sincerily hope that YOU will join us. Guests are always welcome at Old Fashion
@@ -116,7 +136,7 @@
                 <p class="verse" ofbFadeInOnScroll>For where two or three are gathered together in my name, there am I in the midst of them. - Matthew 18:20</p>
                 <p ofbFadeInOnScroll class="action"><i ofbicon>info_outline</i> <a href="#" routerLink="/whoweare" class="align-top">Learn more about us</a></p>
             </div>
-            <div class="row-content-col-right">
+            <div class="row-content-col-left">
                 <!-- <img ofbFadeInOnScroll src="assets/images/home-images/2-church-color.png"> -->
                 <a routerLink="/whoweare"><img ofbFadeInOnScroll src="assets/images/home-images/tiny/family.jpg"></a>
             </div>

Client/src/app/components/image/image.component.html

@@ -1,13 +1,13 @@
 <secondary-page-component [hideSideBarOnMobile]="true" >
     <div mainContent class="mapWrapper">        
-        <img style="width: 100%" src="assets/images/tiny/covid_tract.jpg">
+        <img style="width: 100%" src="{{imageUrl}}">
-        <div class="fab-buttons" >
+        <!-- <div class="fab-buttons" >
             <button mat-fab (click)="share()"><i ofbicon>share</i></button>
-        </div>  
+        </div>   -->
     </div>
     <div sideBar ofbFadeInOnScroll>
-        <div class="side-bar">
+        <!-- <div class="side-bar">
             <button style="width: 100%;" mat-stroked-button (click)="share()"><i ofbicon>share</i> Share</button>
-        </div>        
+        </div>         -->
     </div>
 </secondary-page-component>

Client/src/app/components/image/image.component.ts

@@ -1,8 +1,9 @@
 import { BibleVerseService } from './../../services/bible-verse.service';
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, Inject, Input } from '@angular/core';
 import { MatDialogConfig, MatDialog } from '@angular/material';
 import { SharePopupComponent } from '../popups/share-popup/share-popup.component';
 import { DOCUMENT } from '@angular/platform-browser';
+import { Router, ActivatedRouteSnapshot, ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'image-component',
@@ -11,9 +12,11 @@ import { DOCUMENT } from '@angular/platform-browser';
 })
 export class ImageComponent implements OnInit {
 
-  public shareUrl: string;
+  public imageUrl: string;
 
-  constructor(private dialog: MatDialog, @Inject(DOCUMENT) private document) { }
+  constructor(private dialog: MatDialog, @Inject(DOCUMENT) private document, private route: ActivatedRoute) {
+    this.imageUrl = this.route.snapshot.data.imageUrl;
+   }
 
   ngOnInit() {
     // this.bibleVerseService.randomVerse().subscribe(
@@ -34,8 +37,7 @@ export class ImageComponent implements OnInit {
         imageWidth: 750,
         imageHeight: 404,
         title: 'Coronavirus Anxiety?',
-        description: 'The cure for coronavirus anxiety',
+        description: 'The cure for coronavirus anxiety'
-        url: baseUrl + '/covid'
       }      
     };
     let dialog = this.dialog.open(SharePopupComponent, opts); 

Server/src/routes/api/share.js

@@ -8,6 +8,7 @@ const calendarImageUrl = '/api2/cim/';
 const eventUrl = '/api2/share/e'; 
 const sermonImageUrl = '/assets/images/tiny/facebookplay.png';
 const sermonUrl = '/api2/share/s';
+const otherUrl = '/api2/share/o';
 
 
 router.get("/:shareCode",function(req,res){
@@ -40,9 +41,9 @@ function getOther(req, res, param) {
        userAgent === 'Facebot' ||
        userAgent.startsWith('Twitterbot') ||
        referrer.startsWith('http://opengraphcheck.com')) {
-        getOtherMeta(req, res, params.title, params.description, params.imageUrl, params.imageWidth, params.imageHeight, params.url);
+        getOtherMeta(req, res, params.title, params.description, params.imageUrl, params.imageWidth, params.imageHeight);
     } else {
-        var url = params.url || (req.protocol + "://" + req.hostname);
+        var url = params.url || (req.protocol + "://" + req.hostname + req.originalUrl);
         res.redirect(url);
     }
 }
@@ -64,15 +65,16 @@ function getSermon(req, res, id){
     }
 }
 
-function getOtherMeta(req, res, title, description, imageUrl, imageWidth, imageHeight, url) {
+function getOtherMeta(req, res, title, description, imageUrl, imageWidth, imageHeight) {
     imageWidth = imageWidth || 200;
     imageHeight = imageHeight || 200;
+    const url = req.protocol + '://' + req.hostname + req.originalUrl;
     var result = `<html>
                     <head>
                     <title>Old Fashion Baptist Church</title>
                         <!-- You can use Open Graph tags to customize link previews.
                         Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
-                    <meta property="og:url"           content="`+ '' +`"/>
+                    <meta property="og:url"           content="`+ url +`"/>
                     <meta property="og:type"          content="website" />
                     <meta property="og:title"         content="` + title + `" />
                     <meta property="og:description"   content="` + description + `" />