pwa and birthday icon

Author: janzheng

.ruby-version

@@ -0,0 +1 @@
+2.5.3

components/Periodical.vue

@@ -8,19 +8,19 @@
         <div class="Periodical-title">{{ issue.fields['Name'] }}</div>
         <div class="Periodical-date _right-sm">{{ issue.fields['Date'] | niceDate }}</div>
       </div>
-      <div class="Periodical-description _margin-bottom-2" v-html="$md.render(issue.fields['Markdown'])"></div>
+      <div class="Periodical-description _margin-bottom-2" v-html="$md.render(issue.fields['Markdown'] || '')"></div>
 
       <div class="Periodical-updates" v-if="getUpdates(issue)">
         <h5 class="Periodical-updates-title">{{issue.fields['UpdatesTitle'] || 'What’s New'}}</h5>
         <div class="Periodical-update-item _margin-bottom" v-for="update of getUpdates(issue)" :key="update.fields['Name']" v-if="update && update.fields['isPublished']">
-          <div class="_md-p_fix" v-html="$md.render(update.fields['Markdown' || ''])"></div>
+          <div class="_md-p_fix" v-html="$md.render(update.fields['Markdown'] || '')"></div>
           <div class="_margin-top-half" v-if="update.fields['Tags']">
             <span class="Periodical-item-tag _tag" :class="tag == 'Sponsor' ? '--sponsor' : ''" v-for="tag of update.fields.Tags" :key="tag">{{ tag }}</span>
           </div>
         </div>
       </div>
 
-      <div class="Periodical-content" v-if="issue.fields['ArticleContent']" v-html="$md.render(issue.fields['ArticleContent'])">
+      <div class="Periodical-content" v-if="issue.fields['ArticleContent']" v-html="$md.render(issue.fields['ArticleContent'] || '')">
       </div>
 
       <!-- list has been moved to PeriodicalList.vue -->
@@ -78,7 +78,7 @@ export default {
     },
     getArticleName(article) {
       if(article.fields['MdTitle'])
-        return this.$md.render(article.fields['MdTitle'])
+        return this.$md.render(article.fields['MdTitle'] || '')
       else 
         return article.fields['Name']
     },

nuxt.config.js

@@ -32,7 +32,7 @@ const airtable_base = 'appSCAap8SWbFRtu0';
 
 let mode = 'universal' // loads airtable dynamically
 // const mode = 'universal' // loads airtable during build-time only (any changes to airtable won't be reflected live)
-if (process.env.NODE_ENV == 'production') {
+if (process.env.NODE_ENV == 'spa') {
   mode = 'spa'
   // mode = 'universal'
 }
@@ -251,31 +251,69 @@ module.exports = {
       id: site_ga,
       // disabled: true // gdpr, policy.js enables it: https://medium.com/dailyjs/google-analytics-gdpr-and-vuejs-e1bd6affd2b4
     }],
-    ['@nuxtjs/markdownit', {
-      html: true,
-    }],
+    // ['@nuxtjs/markdownit', {
+    //   html: true,
+    // }],
     ['@nuxtjs/google-tag-manager', { 
       id: 'GTM-WCR3X43' 
     }],
+    '@nuxtjs/pwa',
+    'nuxt-device-detect',
   ],
-  markdownit: {
-    // preset: 'default',
-    injected: false, // markdownit.js plugin takes over injection
-    // to use custom injection, remove  if (_options.injected === true) { block from @nuxtjs/markdownit/index.js
-    // use the custom plugin/markdownit to inject properly; the official thing is broken
-    // injected: true, // commented out to allow attrs in lang="md" blocks
-    // BUG: in @nuxtjs/markdownit/index.js: this needs to be set: 
-    //      options: Object.assign({}, options, this.options.markdownit)
-    //      this allows lang="md" to continue processing plugins like markdown-it-attrs, otherwise it doesn't do that anymore
-    // otherwise plugins will break
-    html: true,
-    typographer: true,
-    linkify: true,
-    breaks: true,
-    use: [
-      'markdown-it-attrs',
-      ['markdown-it-attrs', {'leftDelimiter': '[', 'rightDelimiter': ']'}]
-    ],
+  // this is buggy, using own plugin instead
+  // markdownit: {
+  //   // preset: 'default',
+  //   injected: false, // markdownit.js plugin takes over injection
+  //   // to use custom injection, remove  if (_options.injected === true) { block from @nuxtjs/markdownit/index.js
+  //   // use the custom plugin/markdownit to inject properly; the official thing is broken
+  //   // injected: true, // commented out to allow attrs in lang="md" blocks
+  //   // BUG: in @nuxtjs/markdownit/index.js: this needs to be set: 
+  //   //      options: Object.assign({}, options, this.options.markdownit)
+  //   //      this allows lang="md" to continue processing plugins like markdown-it-attrs, otherwise it doesn't do that anymore
+  //   // otherwise plugins will break
+  //   html: true,
+  //   typographer: true,
+  //   linkify: true,
+  //   breaks: true,
+  //   use: [
+  //     'markdown-it-attrs',
+  //     ['markdown-it-attrs', {'leftDelimiter': '[', 'rightDelimiter': ']'}]
+  //   ],
+  // },
+
+
+  manifest: {
+    name: 'Phage Directory',
+    short_name: 'phagedirectory',
+    display: 'standalone',
+    start_url: 'https://phage.directory/',
+    theme_color: site_color,
+    background_color: '#FFFFFF',
+    lang: 'en',
+    // icons: PWAIcons
+  },
+
+  workbox: {
+    runtimeCaching: [
+      {
+          urlPattern: 'https://api.airtable.com/v0/appSCAap8SWbFRtu0/.*',
+          handler: 'cacheFirst',
+          method: 'GET',
+          strategyOptions: {cacheableResponse: {statuses: [0, 200]}}
+      },
+      // {
+      //     urlPattern: 'https://fonts.googleapis.com/.*',
+      //     handler: 'cacheFirst',
+      //     method: 'GET',
+      //     strategyOptions: {cacheableResponse: {statuses: [0, 200]}}
+      // },
+      // {
+      //     urlPattern: 'https://fonts.gstatic.com/.*',
+      //     handler: 'cacheFirst',
+      //     method: 'GET',
+      //     strategyOptions: {cacheableResponse: {statuses: [0, 200]}}
+      // },
+    ]
   },
 
   build: {
@@ -383,11 +421,11 @@ module.exports = {
           path: '/antibiotics',
           component: resolve(__dirname, 'pages/dir.vue')
         },
-        {
-          name: 'orgs',
-          path: '/orgs',
-          component: resolve(__dirname, 'pages/dir.vue')
-        },
+        // {
+        //   name: 'orgs',
+        //   path: '/orgs',
+        //   component: resolve(__dirname, 'pages/dir.vue')
+        // },
         {
           name: 'labs',
           path: '/labs',
@@ -405,11 +443,11 @@ module.exports = {
         // },
 
         // news alerts
-        {
-          name: 'alerts',
-          path: '/alerts/:id',
-          component: resolve(__dirname, 'pages/alerts.vue')
-        },
+        // {
+        //   name: 'alerts',
+        //   path: '/alerts/:id',
+        //   component: resolve(__dirname, 'pages/alerts.vue')
+        // },
 
 
         // blog / news / 'viral' newsletter; resolves to generic Blog page