fix: missing media links

OpenMobileAlliance · Nov 27, 2021 · 9c181a2 · 9c181a2
1 parent a3149a4
commit 9c181a2
Show file tree

Hide file tree

Showing 6 changed files with 400 additions and 25 deletions.
diff --git a/components/global/AppHeader.vue b/components/global/AppHeader.vue
@@ -0,0 +1,171 @@
+<template>
+  <nav
+    class="fixed top-0 z-40 w-full border-b dark:border-gray-800 bg-white dark:bg-gray-900"
+    :class="{ 'shadow border-transparent': scrolled }"
+    @click="scrollToTop"
+  >
+    <div class="container mx-auto flex-1 px-4 lg:px-8">
+      <div class="flex items-center justify-between h-16">
+        <div class="lg:w-1/5 flex items-center pr-4" @click.stop="noop">
+          <NuxtLink
+            :to="localePath('/')"
+            class="flex-shrink-0 flex-1 font-bold text-xl"
+            :aria-label="`${settings.title} Logo`"
+          >
+            <span v-if="!logo">{{ settings.title }}</span>
+
+            <img
+              v-if="logo"
+              :src="logo.light"
+              class="h-8 max-w-full light-img"
+              :alt="settings.title"
+            />
+            <img v-if="logo" :src="logo.dark" class="h-8 max-w-full dark-img" :alt="settings.title" />
+          </NuxtLink>
+        </div>
+        <div v-if="settings.layout !== 'single'" class="flex-1 flex justify-start w-4/6">
+          <AppSearchAlgolia v-if="settings.algolia" :options="settings.algolia" :settings="settings" />
+          <AppSearch v-else class="hidden lg:block" />
+        </div>
+        <div
+          class="lg:w-1/5 flex items-center pl-4 lg:pl-8"
+          :class="{ 'justify-between': lastRelease && settings.layout !== 'single', 'justify-end': !lastRelease || settings.layout === 'single' }"
+        >
+          <NuxtLink
+            v-if="lastRelease"
+            to="/releases"
+            class="font-semibold leading-none text-gray-700 dark:text-gray-300 hover:text-primary-500 dark-hover:text-primary-500 text-base mr-4"
+            exact-active-class="text-primary-500"
+          >{{ lastRelease.name }}</NuxtLink>
+          <div class="flex items-center">
+            <a
+              v-if="settings.linkedin"
+              :href="`https://www.linkedin.com/company/${settings.linkedin}/?viewAsMember=true`"
+              target="_blank"
+              rel="noopener noreferrer"
+              title="LinkendIn"
+              name="LinkendIn"
+              class="text-gray-700 dark:text-gray-300 hover:text-primary-500 dark-hover:text-primary-500 ml-4"
+              :class="{
+                'hidden lg:block': settings.layout !== 'single'
+              }"
+            >
+              <IconLinkendin class="w-5 h-5" />
+            </a>
+            <a
+              v-if="settings.youtube"
+              :href="`https://www.youtube.com/c/${settings.youtube}`"
+              target="_blank"
+              rel="noopener noreferrer"
+              title="YouTube"
+              name="YouTube"
+              class="text-gray-700 dark:text-gray-300 hover:text-primary-500 dark-hover:text-primary-500 ml-4"
+              :class="{
+                'hidden lg:block': settings.layout !== 'single'
+              }"
+            >
+              <IconYoutube class="w-5 h-5" />
+            </a>
+            <a
+              v-if="settings.twitter"
+              :href="`https://twitter.com/${settings.twitter}`"
+              target="_blank"
+              rel="noopener noreferrer"
+              title="Twitter"
+              name="Twitter"
+              class="text-gray-700 dark:text-gray-300 hover:text-primary-500 dark-hover:text-primary-500 ml-4"
+              :class="{
+                'hidden lg:block': settings.layout !== 'single'
+              }"
+            >
+              <IconTwitter class="w-5 h-5" />
+            </a>
+            <a
+              v-if="settings.github"
+              :href="githubUrls.repo"
+              target="_blank"
+              rel="noopener noreferrer"
+              title="Github"
+              name="Github"
+              class="text-gray-700 dark:text-gray-300 hover:text-primary-500 dark-hover:text-primary-500 ml-4"
+              :class="{
+                'hidden lg:block': settings.layout !== 'single'
+              }"
+            >
+              <IconGithub class="w-5 h-5" />
+            </a>
+
+            <button
+              v-if="settings.layout !== 'single'"
+              class="lg:hidden p-2 rounded-md text-gray-700 dark:text-gray-300 focus:outline-none -mr-2"
+              aria-label="Menu"
+              @click.stop="menu = !menu"
+            >
+              <IconX v-if="menu" class="w-5 h-5" />
+              <IconMenu v-else class="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  data () {
+    return {
+      scrolled: 0
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'settings',
+      'githubUrls',
+      'lastRelease'
+    ]),
+    menu: {
+      get () {
+        return this.$store.state.menu.open
+      },
+      set (val) {
+        this.$store.commit('menu/toggle', val)
+      }
+    },
+    logo () {
+      if (!this.settings.logo) {
+        return
+      }
+
+      if (typeof this.settings.logo === 'object') {
+        return this.settings.logo
+      }
+
+      return {
+        light: this.settings.logo,
+        dark: this.settings.logo
+      }
+    }
+  },
+  beforeMount () {
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  beforeDestroy () {
+    window.removeEventListener('scroll', this.handleScroll)
+  },
+  methods: {
+    handleScroll () {
+      this.scrolled = window.scrollY > 0
+    },
+    scrollToTop () {
+      if (window.innerWidth >= 1280) {
+        return
+      }
+      window.scrollTo(0, 0)
+    },
+    noop () { }
+  }
+}
+</script>
diff --git a/components/global/AppNav.vue b/components/global/AppNav.vue
@@ -0,0 +1,143 @@
+<template>
+  <aside
+    class="w-full lg:w-1/5 lg:block fixed lg:relative inset-0 mt-16 lg:mt-0 z-30 bg-white dark:bg-gray-900 lg:bg-transparent lg:dark:bg-transparent"
+    :class="{ 'block': menu, 'hidden': !menu }"
+  >
+    <div class="lg:sticky lg:top-16 overflow-y-auto h-full lg:h-auto lg:max-h-(screen-16)">
+      <ul class="p-4 lg:py-8 lg:pl-0 lg:pr-8">
+        <li v-if="!settings.algolia" class="mb-4 lg:hidden">
+          <AppSearch />
+        </li>
+        <li
+          v-for="(docs, category, index) in categories"
+          :key="category"
+          class="mb-4"
+          :class="{
+            'active': isCategoryActive(docs),
+            'lg:mb-0': index === Object.keys(categories).length - 1
+          }"
+        >
+          <p
+            class="mb-2 text-gray-500 uppercase tracking-wider font-bold text-sm lg:text-xs"
+          >{{ category }}</p>
+          <ul>
+            <li v-for="doc of docs" :key="doc.slug" class="text-gray-700 dark:text-gray-300">
+              <NuxtLink
+                :to="localePath(doc.to)"
+                class="px-2 rounded font-medium py-1 hover:text-primary-500 flex items-center justify-between"
+                exact-active-class="text-primary-500 bg-primary-100 hover:text-primary-500 dark:bg-primary-900"
+              >
+                {{ doc.menuTitle || doc.title }}
+                <client-only>
+                  <span
+                    v-if="isDocumentNew(doc)"
+                    class="animate-pulse rounded-full bg-primary-500 opacity-75 h-2 w-2"
+                  />
+                </client-only>
+              </NuxtLink>
+            </li>
+          </ul>
+        </li>
+        <li class="lg:hidden">
+          <p class="mb-2 text-gray-500 uppercase tracking-wider font-bold text-sm lg:text-xs">More</p>
+          <div class="flex items-center ml-2">
+            <a
+              v-if="settings.linkedin"
+              :href="`https://www.linkedin.com/company/${settings.linkedin}/?viewAsMember=true`"
+              target="_blank"
+              rel="noopener noreferrer"
+              title="LinkendIn"
+              name="LinkendIn"
+              class="text-gray-700 dark:text-gray-300 hover:text-primary-500 dark-hover:text-primary-500 ml-4"
+              :class="{
+                'hidden lg:block': settings.layout !== 'single'
+              }"
+            >
+              <IconLinkendin class="w-5 h-5" />
+            </a>
+            <a
+              v-if="settings.youtube"
+              :href="`https://www.youtube.com/c/${settings.youtube}`"
+              target="_blank"
+              rel="noopener noreferrer"
+              title="YouTube"
+              name="YouT`ube"
+              class="inline-flex text-gray-700 dark:text-gray-300 hover:text-primary-500 mr-4"
+            >
+              <IconYoutube class="w-5 h-5" />
+            </a>
+            <a
+              v-if="settings.twitter"
+              :href="`https://twitter.com/${settings.twitter}`"
+              target="_blank"
+              rel="noopener noreferrer"
+              title="Twitter"
+              name="Twitter"
+              class="inline-flex text-gray-700 dark:text-gray-300 hover:text-primary-500 mr-4"
+            >
+              <IconTwitter class="w-5 h-5" />
+            </a>
+            <a
+              v-if="settings.github"
+              :href="githubUrls.repo"
+              target="_blank"
+              rel="noopener noreferrer"
+              title="Github"
+              name="Github"
+              class="inline-flex text-gray-700 dark:text-gray-300 hover:text-primary-500 mr-4"
+            >
+              <IconGithub class="w-5 h-5" />
+            </a>
+
+            <AppLangSwitcher class="mr-4" />
+            <AppColorSwitcher />
+          </div>
+        </li>
+      </ul>
+    </div>
+  </aside>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  computed: {
+    ...mapGetters([
+      'settings',
+      'githubUrls'
+    ]),
+    menu: {
+      get () {
+        return this.$store.state.menu.open
+      },
+      set (val) {
+        this.$store.commit('menu/toggle', val)
+      }
+    },
+    categories () {
+      return this.$store.state.categories[this.$i18n.locale]
+    }
+  },
+  methods: {
+    isCategoryActive (documents) {
+      return documents.some(document => document.to === this.$route.fullPath)
+    },
+    isDocumentNew (document) {
+      if (process.server) {
+        return
+      }
+      if (!document.version || document.version <= 0) {
+        return
+      }
+
+      const version = localStorage.getItem(`document-${document.slug}-version`)
+      if (document.version > Number(version)) {
+        return true
+      }
+
+      return false
+    }
+  }
+}
+</script>
diff --git a/components/global/IconLinkendin.vue b/components/global/IconLinkendin.vue
@@ -0,0 +1,36 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="feather feather-twitter"
+    x="0px"
+    y="0px"
+    viewBox="0 0 45.959 45.959"
+  >
+    <g>
+      <g>
+        <path
+          d="M5.392,0.492C2.268,0.492,0,2.647,0,5.614c0,2.966,2.223,5.119,5.284,5.119c1.588,0,2.956-0.515,3.957-1.489
+			c0.96-0.935,1.489-2.224,1.488-3.653C10.659,2.589,8.464,0.492,5.392,0.492z M7.847,7.811C7.227,8.414,6.34,8.733,5.284,8.733
+			C3.351,8.733,2,7.451,2,5.614c0-1.867,1.363-3.122,3.392-3.122c1.983,0,3.293,1.235,3.338,3.123
+			C8.729,6.477,8.416,7.256,7.847,7.811z"
+        />
+        <path
+          d="M0.959,45.467h8.988V12.422H0.959V45.467z M2.959,14.422h4.988v29.044H2.959V14.422z"
+        />
+        <path
+          d="M33.648,12.422c-4.168,0-6.72,1.439-8.198,2.792l-0.281-2.792H15v33.044h9.959V28.099c0-0.748,0.303-2.301,0.493-2.711
+			c1.203-2.591,2.826-2.591,5.284-2.591c2.831,0,5.223,2.655,5.223,5.797v16.874h10v-18.67
+			C45.959,16.92,39.577,12.422,33.648,12.422z M43.959,43.467h-6V28.593c0-4.227-3.308-7.797-7.223-7.797
+			c-2.512,0-5.358,0-7.099,3.75c-0.359,0.775-0.679,2.632-0.679,3.553v15.368H17V14.422h6.36l0.408,4.044h1.639l0.293-0.473
+			c0.667-1.074,2.776-3.572,7.948-3.572c4.966,0,10.311,3.872,10.311,12.374V43.467z"
+        />
+      </g>
+    </g>
+  </svg>
+</template>
diff --git a/components/global/IconYoutube.vue b/components/global/IconYoutube.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 46 46"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="feather feather-twitter"
+  >
+    <path
+      d="M 24.402344 9 C 17.800781 9 11.601563 9.5 8.300781 10.199219 C 6.101563 10.699219 4.199219 12.199219 3.800781 14.5 C 3.402344 16.898438 3 20.5 3 25 C 3 29.5 3.398438 33 3.898438 35.5 C 4.300781 37.699219 6.199219 39.300781 8.398438 39.800781 C 11.902344 40.5 17.898438 41 24.5 41 C 31.101563 41 37.097656 40.5 40.597656 39.800781 C 42.800781 39.300781 44.699219 37.800781 45.097656 35.5 C 45.5 33 46 29.402344 46.097656 24.902344 C 46.097656 20.402344 45.597656 16.800781 45.097656 14.300781 C 44.699219 12.101563 42.800781 10.5 40.597656 10 C 37.097656 9.5 31 9 24.402344 9 Z M 24.402344 11 C 31.601563 11 37.398438 11.597656 40.199219 12.097656 C 41.699219 12.5 42.898438 13.5 43.097656 14.800781 C 43.699219 18 44.097656 21.402344 44.097656 24.902344 C 44 29.199219 43.5 32.699219 43.097656 35.199219 C 42.800781 37.097656 40.800781 37.699219 40.199219 37.902344 C 36.597656 38.601563 30.597656 39.097656 24.597656 39.097656 C 18.597656 39.097656 12.5 38.699219 9 37.902344 C 7.5 37.5 6.300781 36.5 6.101563 35.199219 C 5.300781 32.398438 5 28.699219 5 25 C 5 20.398438 5.402344 17 5.800781 14.902344 C 6.101563 13 8.199219 12.398438 8.699219 12.199219 C 12 11.5 18.101563 11 24.402344 11 Z M 19 17 L 19 33 L 33 25 Z M 21 20.402344 L 29 25 L 21 29.597656 Z"
+    />
+  </svg>
+</template>
diff --git a/content/settings.json b/content/settings.json
@@ -7,6 +7,8 @@
   },
   "github": "OpenMobileAlliance",
   "twitter": "OMASpecWorks",
+  "youtube": "OMASpecWorks",
+  "linkedin": "open-mobile-alliance",
   "algolia": {
     "appId": "BH4D9OD16A",
     "apiKey": "7cae46537bbb611c92ae53c73a567064",