feat: v3.4.0

.env.development

@@ -1,5 +1,4 @@
 # Dev config
 VITE_FE_URL = 'http://localhost:3000'
 VITE_CDN_URL = ''
-VITE_PROXY_URL = '/proxy'
-VITE_GRAVATAR_URL = '/avatar'
+VITE_PROXY_URL = '/_proxy'

.env.production

@@ -1,5 +1,4 @@
 # Prod config
 VITE_FE_URL = 'https://surmon.me'
 VITE_CDN_URL = 'https://cdn.surmon.me'
-VITE_PROXY_URL = 'https://cdn.surmon.me/proxy'
-VITE_GRAVATAR_URL = 'https://static.surmon.me/avatar'
+VITE_PROXY_URL = 'https://cdn.surmon.me/_proxy'

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file.
 
+### v3.4.0 (2022-01-03)
+
+**Feature**
+
+- Add BFF proxy server
+- Add Plogs on Lens page
+
 ### v3.3.6 (2022-01-02)
 
 **Feature**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "surmon.me",
-  "version": "3.3.6",
+  "version": "3.4.0",
   "description": "Surmon.me blog",
   "author": {
     "name": "Surmon",
@@ -41,6 +41,7 @@
     "escape-html": "^1.0.3",
     "express": "^4.17.2",
     "highlight.js": "^11.3.1",
+    "http-proxy": "^1.18.1",
     "intersection-observer": "^0.12.0",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
@@ -61,13 +62,15 @@
     "ua-parser-js": "^1.0.2",
     "vue": "^3.2.26",
     "vue-router": "^4.0.10",
-    "wonderful-bing-wallpaper": "^0.3.4"
+    "wonderful-bing-wallpaper": "^0.3.4",
+    "yargs": "^17.3.1"
   },
   "devDependencies": {
     "@surmon-china/libundler": "^1.1.1",
     "@types/compression": "^1.7.2",
     "@types/cookie-parser": "^1.4.2",
     "@types/express": "^4.17.13",
+    "@types/http-proxy": "^1.17.8",
     "@types/lozad": "^1.16.1",
     "@types/marked": "^4.0.1",
     "@types/node-schedule": "^1.3.2",

src/app/router.ts

@@ -37,7 +37,7 @@ import AppPage from '/@/pages/app.vue'
 
 // service pages
 import MusicPage from '/@/pages/music.vue'
-import LensPage from '/@/pages/lens.vue'
+import LensPage from '/@/pages/lens/index.vue'
 import JobPage from '/@/pages/job.vue'
 import MerchPage from '/@/pages/merch/index.vue'
 import FreelancerPage from '/@/pages/freelancer.vue'
@@ -329,7 +329,7 @@ export const routes: RouteRecordRaw[] = [
     meta: {
       responsive: false,
       layout: LayoutColumn.Full,
-      ssrCacheAge: 60 * 60 * 24 // 24 hours
+      ssrCacheAge: 60 * 60 * 4 // 4 hours
     }
   },
   {

src/bff.ts

@@ -7,7 +7,7 @@
 import express from 'express'
 import { NODE_ENV, isDev } from '@/environment'
 import { TunnelModule } from '@/constants/tunnel'
-import { API_TUNNEL_PREFIX, getBFFServerPort } from '@/config/bff.config'
+import { BFF_TUNNEL_PREFIX, getBFFServerPort } from '@/config/bff.config'
 import { getRSSXML } from './server/getters/rss'
 import { getSitemapXML } from './server/getters/sitemap'
 import { getGTagScript } from './server/getters/gtag'
@@ -16,7 +16,6 @@ import { getBiliBiliVideos } from './server/getters/bilibili'
 import { getAllWallpapers } from './server/getters/wallpaper'
 import { getGitHubRepositories } from './server/getters/github'
 import { getInstagramMedias } from './server/getters/instagram'
-import { setInstagramMedias } from './server/setters/instagram'
 import { getSongList } from './server/getters/music'
 import { enableDevRuntime } from './server/runtime/dev'
 import { enableProdRuntime } from './server/runtime/prod'
@@ -98,7 +97,7 @@ app.get('/ghchart.svg', async (_, response) => {
 
 // tunnel services
 app.get(
-  `${API_TUNNEL_PREFIX}/${TunnelModule.BiliBili}`,
+  `${BFF_TUNNEL_PREFIX}/${TunnelModule.BiliBili}`,
   responser(() =>
     cacher({
       key: 'bilibili',
@@ -110,7 +109,7 @@ app.get(
 )
 
 app.get(
-  `${API_TUNNEL_PREFIX}/${TunnelModule.Wallpaper}`,
+  `${BFF_TUNNEL_PREFIX}/${TunnelModule.Wallpaper}`,
   responser(() =>
     cacher({
       key: 'wallpaper',
@@ -122,7 +121,7 @@ app.get(
 )
 
 app.get(
-  `${API_TUNNEL_PREFIX}/${TunnelModule.GitHub}`,
+  `${BFF_TUNNEL_PREFIX}/${TunnelModule.GitHub}`,
   responser(() =>
     cacher({
       key: 'github',
@@ -134,7 +133,7 @@ app.get(
 )
 
 app.get(
-  `${API_TUNNEL_PREFIX}/${TunnelModule.Music}`,
+  `${BFF_TUNNEL_PREFIX}/${TunnelModule.Music}`,
   responser(() =>
     cacher({
       key: 'music',
@@ -145,16 +144,12 @@ app.get(
   )
 )
 
-app.post(`${API_TUNNEL_PREFIX}/${TunnelModule.Instagram}`, (request, response) => {
-  setInstagramMedias(request.body)
-  response.send('ok')
-})
 app.get(
-  `${API_TUNNEL_PREFIX}/${TunnelModule.Instagram}`,
+  `${BFF_TUNNEL_PREFIX}/${TunnelModule.Instagram}`,
   responser(() =>
     cacher({
       key: 'instagram',
-      age: 60 * 60 * 1, // 1 hours
+      age: 60 * 60 * 1, // 6 hours
       retryWhen: 60 * 10, // 10 minutes
       getter: getInstagramMedias
     })

src/components/comment/helper.ts

@@ -3,7 +3,7 @@
  * @author Surmon <https://github.com/surmon-china>
  */
 
-import { getFileCDNUrl } from '/@/transforms/url'
+import { getTargetCDNURL } from '/@/transforms/url'
 
 export const EMOJIS = [
   ...['😃', '😂', '😅', '😉', '😌', '😔', '😓', '😢', '😍', '😘', '😜', '😡'],
@@ -38,21 +38,21 @@ export const luanchEmojiRain = (content: string) => {
       speed: 12,
       staggered: true,
       increaseSpeed: 0.4,
-      emoji: getFileCDNUrl('/images/emojis/haha.png')
+      emoji: getTargetCDNURL('/images/emojis/haha.png')
     })
   } else if (SIX_KEYWORDS.find((keyword) => content.includes(keyword))) {
     luanchRain({
       speed: 12,
       staggered: true,
       increaseSpeed: 0.4,
-      emoji: getFileCDNUrl('/images/emojis/666.png')
+      emoji: getTargetCDNURL('/images/emojis/666.png')
     })
   } else if (HEHE_KEYWORDS.find((keyword) => content.includes(keyword))) {
     luanchRain({
       staggered: false,
       speed: 8,
       increaseSpeed: 0.04,
-      emoji: getFileCDNUrl('/images/emojis/hehe.png')
+      emoji: getTargetCDNURL('/images/emojis/hehe.png')
     })
   } else if (Math.random() <= 0.5) {
     // 否则以 50% 的概率随机出现
@@ -61,7 +61,7 @@ export const luanchEmojiRain = (content: string) => {
       staggered: true,
       speed: 8,
       increaseSpeed: 0.04,
-      emoji: getFileCDNUrl('/images/emojis/doge.png')
+      emoji: getTargetCDNURL('/images/emojis/doge.png')
     })
   }
 }

src/components/common/banner.vue

@@ -17,7 +17,7 @@
 
 <script lang="ts">
   import { defineComponent } from 'vue'
-  import { getFileCDNUrl } from '/@/transforms/url'
+  import { getTargetCDNURL } from '/@/transforms/url'
   import { useEnhancer } from '/@/app/enhancer'
 
   export default defineComponent({
@@ -44,7 +44,7 @@
       const { isDarkTheme } = useEnhancer()
       return {
         isDarkTheme,
-        imageURL: getFileCDNUrl(props.image)
+        imageURL: getTargetCDNURL(props.image)
       }
     }
   })

src/components/common/uimage.ts

@@ -6,7 +6,7 @@
 
 import { defineComponent, ref, h } from 'vue'
 import { useEnhancer } from '/@/app/enhancer'
-import { getFileCDNUrl, getFileProxyUrl } from '/@/transforms/url'
+import { getTargetCDNURL, getTargetProxyURL } from '/@/transforms/url'
 import { onClient } from '/@/universal'
 
 export default defineComponent({
@@ -36,10 +36,10 @@ export default defineComponent({
 
       let imageSrc = src
       if (cdn) {
-        imageSrc = getFileCDNUrl(src)
+        imageSrc = getTargetCDNURL(src)
       }
       if (proxy) {
-        imageSrc = getFileProxyUrl(src)
+        imageSrc = getTargetProxyURL(src)
       }
       if (defer && !deferRenderable.value) {
         return null

src/components/flow-desktop/announcement.vue

@@ -34,7 +34,7 @@
               :set-wrapper-size="true"
               :autoplay="{ delay: 3500, disableOnInteraction: false }"
               @transition-start="handleSwiperTransitionStart"
-              @swiper="onSwiper"
+              @swiper="handleSwiperReady"
             >
               <swiper-slide v-for="(ann, index) in announcements" :key="index">
                 <div class="content" v-html="parseContent(ann.content)" />
@@ -88,7 +88,7 @@
       const { i18n, isDarkTheme } = useEnhancer()
       const activeIndex = ref(0)
       const swiper = ref<SwiperClass>()
-      const onSwiper = (_swiper: SwiperClass) => {
+      const handleSwiperReady = (_swiper: SwiperClass) => {
         swiper.value = _swiper
       }
 
@@ -114,7 +114,7 @@
         parseContent,
         prevSlide,
         nextSlide,
-        onSwiper,
+        handleSwiperReady,
         handleSwiperTransitionStart
       }
     }

src/components/flow-desktop/header.vue

@@ -27,7 +27,7 @@
 <script lang="ts">
   import { defineComponent, computed } from 'vue'
   import { LANGUAGE_KEYS } from '/@/language/key'
-  import { getFileCDNUrl } from '/@/transforms/url'
+  import { getTargetCDNURL } from '/@/transforms/url'
 
   export default defineComponent({
     name: 'FlowArticleListHeader',
@@ -47,7 +47,7 @@
     },
     setup(props) {
       const backgroundImageUrl = computed(() => {
-        return props.backgroundImage || getFileCDNUrl('/images/page-feeelancer/banner.jpg')
+        return props.backgroundImage || getTargetCDNURL('/images/page-feeelancer/banner.jpg')
       })
 
       return {

src/components/layout/mobile/main.vue

@@ -29,7 +29,7 @@
   import { defineComponent, ref, computed, watch } from 'vue'
   import { useEnhancer } from '/@/app/enhancer'
   import { onClient } from '/@/universal'
-  import { getPageUrl } from '/@/transforms/url'
+  import { getPageURL } from '/@/transforms/url'
   import HeaderView from './header.vue'
   import FooterView from './footer.vue'
   import AsideView from './aside.vue'
@@ -43,7 +43,7 @@
     },
     setup() {
       const { route } = useEnhancer()
-      const pageURL = computed(() => getPageUrl(route.fullPath))
+      const pageURL = computed(() => getPageURL(route.fullPath))
 
       const isOpenedAside = ref(false)
       const openAside = () => (isOpenedAside.value = true)

src/components/widget/emoji-rain.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts">
   import { defineComponent, ref, reactive, nextTick, onMounted } from 'vue'
-  import { getFileCDNUrl } from '/@/transforms/url'
+  import { getTargetCDNURL } from '/@/transforms/url'
 
   declare global {
     interface Window {
@@ -41,7 +41,7 @@
                 increaseSpeed: 0.4,
                 density: 5,
                 staggered: true,
-                emoji: getFileCDNUrl('/images/emojis/funny.png'),
+                emoji: getTargetCDNURL('/images/emojis/funny.png'),
                 ...options,
                 onStart() {
                   state.kichikuing = true

src/components/widget/share.vue

@@ -22,7 +22,7 @@
   import { useEnhancer } from '/@/app/enhancer'
   import { GAEventCategories } from '/@/constants/gtag'
   import { renderTextToQRCodeDataURL } from '/@/transforms/qrcode'
-  import { getPageUrl } from '/@/transforms/url'
+  import { getPageURL } from '/@/transforms/url'
   import { openWindow } from '/@/utils/opener'
   import { copy } from '/@/utils/clipboard'
   import { META } from '/@/config/app.config'
@@ -166,7 +166,7 @@
           : socials
       })
 
-      const getURL = () => getPageUrl(route.fullPath)
+      const getURL = () => getPageURL(route.fullPath)
       const getTitle = () => document.title || META.title
       const getDescription = () =>
         document.getElementsByName('description')?.[0]?.getAttribute('content') || META.sub_title

src/config/api.config.ts

@@ -27,7 +27,6 @@ export default {
   FE: import.meta.env.VITE_FE_URL as string,
   CDN: import.meta.env.VITE_CDN_URL as string,
   PROXY: import.meta.env.VITE_PROXY_URL as string,
-  GRAVATAR: import.meta.env.VITE_GRAVATAR_URL as string,
   STATIC: import.meta.env.VITE_STATIC_URL as string,
   NODEPRESS: isDev ? DEV_API : PROD_API
 }

src/config/bff.config.ts

@@ -4,5 +4,8 @@
  * @author Surmon <https://github.com/surmon-china>
  */
 
-export const API_TUNNEL_PREFIX = '/_tunnel'
+export const BFF_TUNNEL_PREFIX = '/_tunnel'
+export const BFF_PROXY_PREFIX = '/_proxy'
+export const BFF_PROXY_ALLOWLIST = ['https://surmon.me', 'https://cdn.surmon.me']
+
 export const getBFFServerPort = () => Number(process.env.PORT || 3000)

src/constants/error.ts

@@ -5,5 +5,6 @@
  */
 
 export const BAD_REQUEST = 400
+export const FORBIDDEN = 403
 export const NOT_FOUND = 404
 export const INVALID_ERROR = 500

src/constants/proxy.ts

@@ -0,0 +1,13 @@
+/**
+ * @file Proxy constant
+ * @module constant.proxy
+ * @author Surmon <https://github.com/surmon-china>
+ */
+
+export enum ProxyModule {
+  Default = 'default',
+  BiliBili = 'bilibili',
+  Instagram = 'instagram',
+  NetEasyMusic = '163',
+  Disqus = 'disqus'
+}

src/csr.ts

@@ -12,7 +12,7 @@ import { createWebHistory } from 'vue-router'
 import { GA_MEASUREMENT_ID, ADSENSE_CLIENT_ID } from '/@/config/app.config'
 import { isSSR } from '/@/app/environment'
 import { Language } from '/@/language/data'
-import { getFileCDNUrl } from '/@/transforms/url'
+import { getTargetCDNURL } from '/@/transforms/url'
 import amplitude from '/@/services/amplitude'
 import gtag from '/@/services/gtag'
 import adsense from '/@/services/adsense'
@@ -64,7 +64,7 @@ app.use(gtag, {
   router,
   id: GA_MEASUREMENT_ID,
   config: { send_page_view: false },
-  customResourceURL: getFileCDNUrl('/gtag.js')
+  customResourceURL: getTargetCDNURL('/gtag.js')
 })
 
 // init: store (from SSR context or fetch)