Integrate calendar to show them latest events (#161)

* Integrate calendar to show them latest events #9
Add blog posts #27

* Fix package version

CHANGELOG.MD

@@ -7,9 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [0.5.2] - 2020-07-18
 
-### Fixed
+### Added
 
 - [Sync code with fork origin](https://github.com/ragaeeb/das-js/issues/159)
+- [Upgrade dependency packages](https://github.com/ragaeeb/das-js/issues/5)
+- [Add blog posts](https://github.com/ragaeeb/das-js/issues/27)
+- [Integrate calendar to show them latest events](https://github.com/ragaeeb/das-js/issues/9)
+
+### Fixed
+
+- [Nawafil timings are not reduced on mobile devices](https://github.com/ragaeeb/das-js/issues/149)
 
 ## [0.5.1] - 2020-07-06
 

README.md

@@ -2,7 +2,7 @@
 
 ## A clean, beautiful and responsive portfolio template for Developers
 
-<h2 align="center">
+<h2>
   <img src="https://github.com/cobidev/gatsby-simplefolio/blob/master/examples/example.gif" alt="Gatsby Simplefolio" width="600px" />
   <br>
 </h2>

content/blog/1430ah-2009-eidul-adhaa-prayer/index.md

@@ -0,0 +1,20 @@
+---
+title: 'EIDUL-ADHAA PRAYER'
+date: '2009-11-21T15:38:45.169Z'
+description: '1430AH / 2009'
+imageUrl: https://www.novinite.com/media/images/2017-09/photo_verybig_182916.jpg
+thumbnailUrl: https://www.thestatesman.com/wp-content/uploads/2019/06/EID-AL-ADHA.jpg
+---
+
+As-salaamu ‘alaikum,
+
+‘Eidul-Adhaa will be on Friday, November 27th, 2009.
+
+We will be praying the ‘Eidul-Adhaa prayer at the
+
+Boys & Girls Club of Ottawa (2825 Dumaurier Ave. behind Musalla As-Sahaba)
+
+1st jama’ah – 8:30 am SHARP!!!
+2nd jama’ah – 9:30 am SHARP!!!
+
+Please bring your own rugs, blankets, etc.

content/blog/40-ahadeeth-class-time-change-1-hour-before-maghrib-prayer/index.md

@@ -0,0 +1,13 @@
+---
+title: '40 Ahadeeth Class Time Change'
+date: '2010-03-14T11:39:54.169Z'
+description: '1 hour before Maghrib prayer'
+imageUrl: https://images.theconversation.com/files/110758/original/image-20160209-12808-1hoqs2h.jpg
+thumbnailUrl: https://www.tawheedcenter.org/wp-content/uploads/2020/03/hadith.png
+---
+
+As-salaamu ‘alaikum wa rahmatullahi wa barakaatuh,
+
+Due to the daylight savings time change today, Shaykh Abu ‘Abdur-Rahman’s 40 Ahadeeth class will begin 1 hour before Maghrib prayer, in-sha-Allah. So today (March 14th, 2010), the class will begin around 6:00pm bi-idhnillah.
+
+Please pass on this message. Jazakumullahu khair

content/blog/musalla-as-sahaba-prayer-times-schedule-change/index.md

@@ -0,0 +1,24 @@
+---
+title: 'Musalla As-Sahaba Prayer times schedule change'
+date: '2010-03-14T16:48:54.169Z'
+description: 'Daylight Savings'
+imageUrl: https://muslimvillage.com/wp-content/uploads/2015/05/sunset-dua-islamic-3710002_900.jpg
+thumbnailUrl: https://www.alislam.org/wp-content/uploads/2019/06/Salat.jpg
+---
+
+As-salaamu ‘alaikum wa rahmatullahi wa barakaatuh,
+
+Due to the change in the daylight savings time (tomorrow morning), the prayer times at Musalla As-Sahaba will also be affected.
+
+The prayer (iqaamah) times are the following unless otherwise advised:
+
+Salaatul-Fajr: 20 minutes after the adhaan
+Salaatudh-Dhuhr: 1:30pm
+Salaatul-‘Asr: 20 minutes after the adhaan
+Salaatul-Maghrib: 5 minutes after the adhaan
+Salaatul-‘Ishaa: 15 minutes after the adhaan
+
+Salaatul-Jumu’ah: 1:00pm
+Due to limited space at the musalla, salaatul-jumu’ah will be for brothers only.
+
+Jazakumullahu khair

content/blog/quran-for-beginners-every-tuesday-free-for-brothers-only/index.md

@@ -0,0 +1,35 @@
+---
+title: "Qur'an for Beginners, every Tuesday"
+date: '2009-10-25T17:41:45.169Z'
+description: 'Free for Brothers Only'
+imageUrl: https://www.uscatholic.org/sites/default/files/styles/section_feature_large/public/article-images/quran_flickr.jpg
+thumbnailUrl: https://thesaudiexpat.com/wp-content/uploads/2020/01/Holy-Quran-1280x720.jpg
+---
+
+As-salaamu ‘alaikum,
+
+This is just a reminder that brother Abu Hamza’s Qur’an for Beginners class is still on every Tuesday.
+
+QUR’AN FOR BEGINNERS
+(for Non-Arabic Speakers)
+
+An introduction to the recitation of the Qur’an focusing on reading, proper pronunciation of the letters and proper articulation of the verses specifically from Sooratul-Faatihah & Juz ‘Amma
+
+Taught by:
+Brother Abu Hamza
+
+Date:
+Every Tuesday, beginning October 6th, 2009 (in-sha-Allah)
+
+Time:
+
+- From Oct. 6th to Oct. 27th – Between Maghrib & ‘Ishaa Prayers
+
+- From Nov. 3rd on – After ‘Ishaa Prayer (7:30pm)
+
+(The information above takes precedence over the poster)
+
+Location:
+As-Sahaba Musalla (2835 Dumaurier Ave., Ramsey)
+
+This class is free for brothers only due to limited space and we encourage you to benefit and attend.

content/blog/the-rites-of-hajj-sunday-november-15th-615pm-musalla-as-sahaba/index.md

@@ -0,0 +1,33 @@
+---
+title: 'THE RITES OF HAJJ'
+date: '2009-11-14T10:31:54.169Z'
+description: 'Sunday, November 15th @ 6:15pm'
+imageUrl: https://cdn11.bigcommerce.com/s-jwsaz/images/stencil/1280x1280/products/2441/8173/The_Prophets_Prayer_Described_1__08809.1519876429.jpg
+thumbnailUrl: https://insidearabia.com/wp-content/uploads/2020/01/Hajj-1280x640.jpg
+---
+
+As-salaamu ‘alaikum wa rahmatullahi wa barakaatuh,
+
+This Sunday, November 15th, at the same time and place as the class on Imaam An-Nawawee`s 40 ahadeeth class, Shaykh Abu ‘Abdur-Rahman will hold a special session on the Rites of Hajj. This will focus on the fiqh of hajj and is for everyone who is planning on making hajj in the future, in-sha-Allah. The 40 ahadeeth class will resume next Sunday bi-idhnillah.
+
+This class is free for both brothers and sisters and we encourage you to benefit from this blessed knowledge and attend.
+
+Jazakumullahu khair.
+
+Please read below:
+
+THE RITES OF HAJJ
+
+Taught by:
+Shaykh Abu ‘Abdur-Rahman Mohamed ‘Ali
+(Graduate of the Islamic University of Madeenah, Faculty of Hadeeth)
+
+Location:
+As-Sahaba Musalla (2835 Dumaurier Ave., Ramsey)
+w/telelink to As-Sahaba Library (254 Carleton Ave., 1 block from Ottawa Main Masjid)
+
+Date:
+Sunday, November 15th, 2009
+
+Time:
+6:15pm

content/blog/tonights-40-ahadeeth-class-sunday-december-20th-cancelled/index.md

@@ -0,0 +1,11 @@
+---
+title: "Tonight's 40 Ahadeeth Class"
+date: '2009-12-20T19:58:54.169Z'
+description: 'Sunday, December 20th - CANCELLED'
+imageUrl: https://media.suara.com/pictures/original/2018/11/20/60442-pembuatan-al-quran.jpg
+thumbnailUrl: https://image.shutterstock.com/z/stock-photo-quran-mushaf-on-wood-pattern-background-arabic-letters-1448430524.jpg
+---
+
+This is to inform you that due to some last minute matter, tonight’s 40 Ahadeeth class (Sunday, December 20th) is CANCELLED. Class will resume next Sunday in-sha-Allah, unless further advised.
+
+Please pass on this message. Jazakumullahu khair.

content/blog/tonights-40-ahadeeth-class-sunday-nov-29th-2009-cancelled/index.md

@@ -0,0 +1,11 @@
+---
+title: "Tonight's 40 Ahadeeth Class"
+date: '2009-11-29T13:33:54.169Z'
+description: 'Sunday, November 29th - CANCELLED'
+imageUrl: https://hamariweb.com/islam/info/img/671-65.jpg
+thumbnailUrl: https://quranacademy.io/blog/wp-content/uploads/2017/01/attain.jpg
+---
+
+As-salaamu ‘alaikum wa rahmatullahi wa barakaatuh,
+
+This is to inform you that tonight’s 40 Ahadeeth class (Sunday, November 29th) is CANCELLED. Sorry for the last minute’s notice.

content/blog/tonights-40-ahadeeth-class-sunday-oct-25th-2009-cancelled/index.md

@@ -0,0 +1,11 @@
+---
+title: "Tonight's 40 Ahadeeth Class"
+date: '2009-10-25T17:20:54.169Z'
+description: 'Sunday, October 25th - CANCELLED'
+imageUrl: https://www.zabihabookstore.com/assets/images/mushaf3.jpg
+thumbnailUrl: https://www.prayerinislam.com/wp-content/uploads/2013/07/82661.jpg
+---
+
+As-salaamu ‘alaikum wa rahmatullahi wa barakaatuh,
+
+This is to inform you that tonight’s 40 Ahadeeth class (Sunday, October 25th) is CANCELLED. Sorry for the last minute’s notice.

content/blog/tonights-40-ahadeeth-class-sundaymarch-7th-cancelled/index.md

@@ -0,0 +1,15 @@
+---
+title: "Tonight's 40 Ahadeeth Class"
+date: '2010-03-07T20:46:54.169Z'
+description: 'Sunday, March 7th - CANCELLED'
+imageUrl: https://www.4kotob.com/wp-content/uploads/%D8%A7%D9%84%D8%A3%D8%B1%D8%A8%D8%B9%D9%8A%D9%86-%D8%A7%D9%84%D9%86%D9%88%D9%88%D9%8A%D8%A9-%D9%81%D9%8A-%D8%A7%D9%84%D8%A3%D8%AD%D8%A7%D8%AF%D9%8A%D8%AB-%D8%A7%D9%84%D8%B5%D8%AD%D9%8A%D8%AD%D8%A9-%D9%84%D9%84%D8%A5%D9%85%D8%A7%D9%85-%D8%A7%D9%84%D9%86%D9%88%D9%88%D9%8A%D8%8C-%D9%85%D8%B9-%D8%B2%D9%8A%D8%A7%D8%AF%D8%A9-%D8%A7%D8%A8%D9%86-%D8%B1%D8%AC%D8%A8-702x336.jpg
+thumbnailUrl: http://safeeratalislam.sabbora.com/wp-content/uploads/2018/02/WhatsApp-Image-2018-02-02-at-5.02.14-PM.jpeg
+---
+
+As-salaamu ‘alaikum wa rahmatullahi wa barakaatuh,
+
+This is to inform you that tonight’s 40 Ahadeeth class (Sunday, March 7th) is CANCELLED. Shaykh Abu ‘Abdur-Rahman’s uncle passed away this morning. May Allah forgive him, have mercy upon him and grant him jannatul-firdaws.
+
+Class will resume next Sunday in-sha-Allah, unless further advised.
+
+Please pass on this message. Jazakumullahu khair.

cypress/integration/home.spec.js

@@ -6,6 +6,7 @@ describe('Timings', () => {
   beforeEach(() => {
     cy.get('[data-cy="gregorian"]').as('gregorian');
     cy.get('[data-cy="hijri"]').as('hijri');
+    cy.get('[data-cy="timings"]').as('timings');
   });
 
   it('should show the correct gregorian date', () => {
@@ -22,11 +23,20 @@ describe('Timings', () => {
   });
 
   it('should show the prayer timings', () => {
-    cy.get('.hero-title')
+    const timings = [
+      'Fajr \\d{1}:\\d{2} AM\\s+\\d{1}:\\d{2} AM',
+      'Sunrise \\d{1}:\\d{2} AM',
+      'Dhuhr \\d{1,2}:\\d{2} [AP]M\\s+\\d{1,2}:\\d{2} PM',
+      'ʿAṣr \\d{1}:\\d{2} PM\\s+\\+20 mins',
+      'Maġrib \\d{1,2}:\\d{2} PM\\s+\\+5 mins',
+      'ʿIshāʾ \\d{1,2}:\\d{2} PM\\s+\\d{1,2}:\\d{2} PM',
+      '1/2 Night Begins \\d{1,2}:\\d{2} [AP]M',
+      'Last 1/3 Night Begins \\d{1,2}:\\d{2} AM',
+      'Khuṭbah al-Jumuʿah \\d{1,2}:\\d{2} PM, \\d{1,2}:\\d{2} PM',
+    ];
+
+    cy.get('@timings')
       .invoke('text')
-      .should(
-        'match',
-        /Fajr \d{1,2}:\d{2} AMSunrise \d{1,2}:\d{2} AMDhuhr \d{1,2}:\d{2} [AP]MʿAṣr \d{1,2}:\d{2} PMMaġrib \d{1,2}:\d{2} PMʿIshāʾ \d{1,2}:\d{2} PM1\/2 Night Begins \d{1,2}:\d{2} [AP]MLast 1\/3 Night Begins \d{1,2}:\d{2} [AP]M/
-      );
+      .should('match', new RegExp(timings.join('')));
   });
 });

src/components/Hero.jsx

@@ -25,7 +25,7 @@ const getLabel = (event, label, onClick, link) => {
 
 const renderSunnah = (event, label, time) => {
   return (
-    <div key={event} className="sunan">
+    <div key={event} className="sunan" data-cy="sunan">
       {label} <span className="text-color-main">{time}</span>
     </div>
   );
@@ -50,9 +50,21 @@ const placeholder = {
   timings: [],
 };
 
+const onFajrPdfClicked = () => window.analytics.track('FajrTimingPdf');
+const onCalendarClicked = () => window.analytics.track('Calendar');
+
 const Header = () => {
   const { hero } = useContext(PortfolioContext);
-  const { latitude, longitude, timeZone, fajrPdf, istijabaText, iqamahs, labels = {} } = hero;
+  const {
+    latitude,
+    longitude,
+    timeZone,
+    fajrPdf,
+    istijabaText,
+    iqamahs,
+    labels = {},
+    calendarUrl,
+  } = hero;
   const [now, setNow] = useState(new Date());
   const isLoaded = latitude && longitude;
 
@@ -64,8 +76,6 @@ const Header = () => {
     window.analytics.track(delta === 1 ? 'NextDayTimings' : 'PrevDayTimings');
   };
 
-  const onFajrPdfClicked = () => window.analytics.track('FajrTimingPdf');
-
   const { date, timings, istijaba } = isLoaded
     ? daily(labels, latitude, longitude, timeZone, now, iqamahs)
     : placeholder;
@@ -95,19 +105,29 @@ const Header = () => {
           </h3>
         )}
         <h2 data-cy="hijri">{`${day}, ${hijriDate} ${month} ${year} H`}</h2>
-        <h1 className="hero-title">
+        <h1 className="hero-title" data-cy="timings">
           {timings.map(renderTiming(fajrPdf, onFajrPdfClicked))}
           {isLoaded && renderSunnah('jumuah', labels.jumuah, getJumuahTime(now, iqamahs))}
         </h1>
         <p className="hero-cta">
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href={calendarUrl}
+            onClick={onCalendarClicked}
+          >
+            <button type="button" className="cta-btn cta-btn--hero">
+              Calendar
+            </button>
+          </a>
           <Link to="monthly">
             <button type="button" className="cta-btn cta-btn--hero">
               Monthly Schedule
             </button>
           </Link>
           <Link to="yearly">
             <button type="button" className="cta-btn cta-btn--hero">
-              Yearly Schedule
+              Annual
             </button>
           </Link>
         </p>

src/mock/data.js

@@ -154,6 +154,8 @@ export const heroData = {
   },
   timeZone: 'America/Toronto',
   fajrPdf: 'https://archive.org/download/fajr-letter-das/Letter_Fajr-Ishaa_Ottawa-2016-06-27.pdf',
+  calendarUrl:
+    'https://calendar.google.com/calendar/embed?src=60me58mrktt0lt24mijjkhddvc%40group.calendar.google.com&ctz=America%2FNew_York',
   istijabaText:
     'The Messenger of Allāh ﷺ said, “Friday has twelve meaning hours to it. There is no Muslim who asks Allāh for anything (during it) except that Allāh gives it to him so seek it during the last hour after ʿaṣr.” [Abū Dāwūd al-Sijistānī, al-Sunan #1048] [Al-Albānī: Ṣaḥīḥ]',
 };