refactor: nav.config

README.md

@@ -134,7 +134,7 @@ server {
 
 
 ## 配置
-所有可配置位于文件 `config/index.ts`。
+所有可配置位于文件 `nav.config.ts`。
 
 
 ## 更新数据

config/index.ts

-/**
- * 所有配置通过此文件进行配置
- * @author xiejiahe
- * @url https://github.com/xjh22222228/nav
- */
-import { ISearchEngineProps, ThemeType } from '../src/types'
-
-// 网站标题
-export const TITLE = '发现导航 - 精选实用导航网站'
-
-// 默认主题: light | sim
-export const THEME: ThemeType = 'light'
-
-// 海报图, 只支持 sim 主题
-export const POSTER_IMAGE = 'assets/img/wallpaper.jpg'
-
-// 搜索引擎列表, 为空时不显示搜索引擎
-// 自定义引擎 icon 请使用网络图标
-export const SEARCH_ENGINE_LIST: ISearchEngineProps[] = [
-  {
-    name: '站内',
-    icon: 'assets/logo.png',
-    placeholder: '站内搜索'
-  },
-  {
-    name: '百度',
-    url: 'https://www.baidu.com/s?wd=',
-    icon: 'assets/engine/baidu.svg',
-    placeholder: '百度一下'
-  },
-  {
-    name: 'Google',
-    url: 'https://www.google.com/search?q=',
-    icon: 'assets/engine/google.svg',
-  },
-  {
-    name: '必应',
-    url: 'https://cn.bing.com/search?q=',
-    icon: 'assets/engine/bing.svg',
-  },
-  {
-    name: 'GitHub',
-    url: 'https://github.com/search?q=',
-    icon: 'assets/engine/github.svg',
-    placeholder: 'Search GitHub'
-  },
-  {
-    name: '知乎',
-    url: 'https://www.zhihu.com/search?type=content&q=',
-    icon: 'assets/engine/zhihu.svg',
-  },
-  {
-    name: '豆瓣',
-    url: 'https://search.douban.com/book/subject_search?search_text=',
-    icon: 'assets/engine/douban.svg',
-    placeholder: '书名、作者、ISBN'
-  }
-]
-
-// Git 仓库地址, 没有填空字符串
-export const GIT_REPO_URL = 'https://github.com/xjh22222228/nav'
-
-// 错误图标, 图标地址访问不了时显示
-// 建议使用网络地址，放在您任何服务器上, 减少入侵
-export const ERROR_ICON = ''
-
-// 网站底部描述, 可以是 HTML
-// 可以是版权信息，备案号
-export const FOOTER_DESC = ''
-
-// 百度统计
-export const TONGJI_URL = 'https://hm.baidu.com/hm.js?4582be7af7e7c95ef75351e07c6c32ba'
-
-export const INDEX_LANGUAGE = [
-  '英文',
-  '中文',
-  'GitHub'
-]
-
-export const APP_LANGUAGE = [
-  'EN',
-  'CN',
-  'Git'
-]
-
-// 只支持 light 主题
-// http://www.nav3.cn/#/index?q=grabient
-export const BACKGROUND_LINEAR = [
-  'linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%)',
-  'linear-gradient(90deg, #FEE140 0%, #FA709A 100%)',
-  'linear-gradient(0deg, #08AEEA 0%, #2AF598 100%)',
-  'linear-gradient(19deg, #21D4FD 0%, #B721FF 100%)',
-  'linear-gradient(19deg, #FAACA8 0%, #DDD6F3 100%)',
-  'linear-gradient(147deg, #FFE53B 0%, #FF2525 74%)',
-  'linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%)',
-  'linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%)',
-  'linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%)',
-  'linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%)',
-  'linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)',
-  'linear-gradient(90deg, #74EBD5 0%, #9FACE6 100%)',
-  'linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%)',
-  'linear-gradient(90deg, #FAD961 0%, #F76B1C 100%)',
-  'linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%)',
-  'linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%)',
-  'linear-gradient(90deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%)',
-  'linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%)',
-  'linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%)',
-  'linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%)',
-  'linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%)',
-  'linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%)',
-  'linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)',
-  'linear-gradient(132deg, #F4D03F 0%, #16A085 100%)',
-  'linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)',
-  'linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%)'
-]

data/utilityTool/devops.ts

@@ -5,6 +5,12 @@ const nav = {
     {
       title: '开发神器',
       nav: [
+        {
+          icon: 'https://avatars2.githubusercontent.com/u/7366472?s=200&v=4',
+          name: 'tldr',
+          desc: '控制台命令的协作备忘单',
+          url: 'https://github.com/tldr-pages/tldr',
+        },
         {
           name: 'Tutor',
           desc: '可视化Python，Java，JavaScript，C，C ++，Ruby代码执行过程',

nav.config.ts

+import { IConfig } from './src/types'
+
+const c: IConfig = {
+  // 网站标题
+  title: '发现导航 - 精选实用导航网站',
+
+  // 默认主题: light | sim
+  theme: 'light',
+
+  // 海报图, 只支持 sim 主题
+  posterImageUrl: 'assets/img/wallpaper.jpg',
+
+  // 搜索引擎列表, 为空时不显示搜索引擎
+  // 自定义引擎 icon 请使用网络图标
+  searchEngineList: [
+    {
+      name: '站内',
+      icon: 'assets/logo.png',
+      placeholder: '站内搜索'
+    },
+    {
+      name: '百度',
+      url: 'https://www.baidu.com/s?wd=',
+      icon: 'assets/engine/baidu.svg',
+      placeholder: '百度一下'
+    },
+    {
+      name: 'Google',
+      url: 'https://www.google.com/search?q=',
+      icon: 'assets/engine/google.svg',
+    },
+    {
+      name: '必应',
+      url: 'https://cn.bing.com/search?q=',
+      icon: 'assets/engine/bing.svg',
+    },
+    {
+      name: 'GitHub',
+      url: 'https://github.com/search?q=',
+      icon: 'assets/engine/github.svg',
+      placeholder: 'Search GitHub'
+    },
+    {
+      name: '知乎',
+      url: 'https://www.zhihu.com/search?type=content&q=',
+      icon: 'assets/engine/zhihu.svg',
+    },
+    {
+      name: '豆瓣',
+      url: 'https://search.douban.com/book/subject_search?search_text=',
+      icon: 'assets/engine/douban.svg',
+      placeholder: '书名、作者、ISBN'
+    }
+  ],
+
+  // Git 仓库地址, 没有填空字符串
+  gitRepoUrl: 'https://github.com/xjh22222228/nav',
+
+  // 错误图标, 图标地址访问不了时显示
+  // 建议使用网络地址，放在您任何服务器上, 减少入侵
+  errorIconUrl: '',
+
+  // 网站底部描述, 可以是 HTML
+  // 可以是版权信息，备案号
+  footerCopyright: '',
+
+  // 百度统计
+  tongjiUrl: 'https://hm.baidu.com/hm.js?4582be7af7e7c95ef75351e07c6c32ba',
+
+  indexLanguage: [
+    '英文',
+    '中文',
+    'GitHub'
+  ],
+
+  appLanguage: [
+    'EN',
+    'CN',
+    'Git'
+  ],
+
+  // 只支持 light 主题
+  // https://www.nav3.cn/#/index?q=grabient
+  backgroundLinear: [
+    'linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%)',
+    'linear-gradient(90deg, #FEE140 0%, #FA709A 100%)',
+    'linear-gradient(0deg, #08AEEA 0%, #2AF598 100%)',
+    'linear-gradient(19deg, #21D4FD 0%, #B721FF 100%)',
+    'linear-gradient(19deg, #FAACA8 0%, #DDD6F3 100%)',
+    'linear-gradient(147deg, #FFE53B 0%, #FF2525 74%)',
+    'linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%)',
+    'linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%)',
+    'linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%)',
+    'linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%)',
+    'linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)',
+    'linear-gradient(90deg, #74EBD5 0%, #9FACE6 100%)',
+    'linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%)',
+    'linear-gradient(90deg, #FAD961 0%, #F76B1C 100%)',
+    'linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%)',
+    'linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%)',
+    'linear-gradient(90deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%)',
+    'linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%)',
+    'linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%)',
+    'linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%)',
+    'linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%)',
+    'linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%)',
+    'linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)',
+    'linear-gradient(132deg, #F4D03F 0%, #16A085 100%)',
+    'linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)',
+    'linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%)'
+  ]
+}
+
+export default c

src/app/app.component.ts

 import { Component } from '@angular/core'
 import { Router, ActivatedRoute } from '@angular/router'
-import { TONGJI_URL, TITLE } from '../../config'
+import config from '../../nav.config'
 import { queryString, setLocation } from '../utils'
 
 @Component({
@@ -12,7 +12,7 @@ export class AppComponent {
   constructor (private router: Router, private activatedRoute: ActivatedRoute) {}
 
   ngOnInit() {
-    document.title = TITLE
+    document.title = config.title
 
     this.goRoute()
     this.appendTongji()
@@ -37,7 +37,7 @@ export class AppComponent {
     ) return
 
     const script = document.createElement('script')
-    script.src = TONGJI_URL
+    script.src = config.tongjiUrl
     script.id = 'tongji_url'
     script.async = true
     document.head.appendChild(script)

src/app/app.module.ts

@@ -2,7 +2,7 @@ import { BrowserModule } from '@angular/platform-browser'
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
 import { FormsModule } from '@angular/forms'
-import { THEME } from '../../config'
+import config from '../../nav.config'
 
 // components
 import { AppComponent } from './app.component'
@@ -33,7 +33,7 @@ const appRoutes: Routes = [
   },
   {
     path: '**',
-    redirectTo: '/' + THEME,
+    redirectTo: '/' + config.theme,
   },
 ]
 

src/components/footer/footer.component.html

 <footer class="footer dark-text" [class]="className" >
-  <div class="total" [ngStyle]="{marginBottom: !FOOTER_DESC && '5px'}">
+  <div class="total" [ngStyle]="{marginBottom: !footerCopyright && '5px'}">
     共收录 {{ totalWeb }} 个网站
   </div>
   
-  <div class="copyright" *ngIf="FOOTER_DESC" [innerHTML]="FOOTER_DESC"></div>
+  <div class="copyright" *ngIf="footerCopyright" [innerHTML]="footerCopyright"></div>
 </footer>

src/components/footer/footer.component.ts

 import { Component, Input } from '@angular/core'
-import { FOOTER_DESC } from '../../../config'
+import config from '../../../nav.config'
 import { totalWeb } from '../../utils'
 
 @Component({
@@ -8,7 +8,7 @@ import { totalWeb } from '../../utils'
   styleUrls: ['./footer.component.scss']
 })
 export class FooterComponent {
-  FOOTER_DESC: string = FOOTER_DESC;
+  footerCopyright: string = config.footerCopyright;
   totalWeb: number = totalWeb()
 
   @Input() className: string

src/components/icon-git/icon-git.component.html

 <a
-  [href]="GIT_REPO_URL"
+  [href]="gitRepoUrl"
   target="_blank"
   rel="noreferer noopener"
   class="github-link"
-  *ngIf="GIT_REPO_URL"
+  *ngIf="gitRepoUrl"
 >
   <svg width="60" height="60" viewBox="0 0 250 250" style="fill:#20a0ff;color:#fff;position:fixed;top:-6px;border:0;right:-6px;z-index:10001;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" data-url="https://github.com/xjh22222228" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"><style>@keyframes octocat {0%, 100% {transform:rotate(0);}20%,60%{transform:rotate(-25deg);}40%, 80%{transform: rotate(100deg);}}.octo-arm {animation: octocat 1.1s linear infinite;}</style></path></svg>
 </a>

src/components/icon-git/icon-git.component.ts

 import { Component, OnInit } from '@angular/core';
-import { GIT_REPO_URL } from '../../../config';
+import config from '../../../nav.config';
 
 @Component({
   selector: 'app-icon-git',
@@ -8,7 +8,7 @@ import { GIT_REPO_URL } from '../../../config';
 })
 export class IconGitComponent implements OnInit {
 
-  GIT_REPO_URL: string = GIT_REPO_URL
+  gitRepoUrl: string = config.gitRepoUrl
 
   constructor() { }
 

src/components/multiple-site/index.component.ts

 import { Component, Input } from '@angular/core'
-import { INDEX_LANGUAGE } from '../../../config'
+import config from '../../../nav.config'
 import { INavFourProp } from '../../types'
 
 @Component({
@@ -10,5 +10,5 @@ import { INavFourProp } from '../../types'
 export class MultipleSiteComponent {
   @Input() dataSource: INavFourProp
 
-  language: string[] = INDEX_LANGUAGE
+  language: string[] = config.indexLanguage
 }

src/components/search-engine/search-engine.component.html

-<div class="search-engine" *ngIf="SEARCH_ENGINE_LIST && SEARCH_ENGINE_LIST.length > 0">
+<div class="search-engine" *ngIf="searchEngineList && searchEngineList.length > 0">
   <div class="input-wrapper dark-bg dark-border-color">
     <div
       class="left-icon"
@@ -23,7 +23,7 @@
   <div class="engine-main dark-bg dark-border-color" *ngIf="showEngine">
     <div
       class="item dark-bg-gary dark-item-hover"
-      *ngFor="let item of SEARCH_ENGINE_LIST; let i=index"
+      *ngFor="let item of searchEngineList; let i=index"
       (click)="clickEngineItem(i)"
     >
       <img class="icon" [src]="item.icon" alt="" />

src/components/search-engine/search-engine.component.ts

 import { Component, Output, EventEmitter } from '@angular/core'
-import { SEARCH_ENGINE_LIST } from '../../../config'
+import config from '../../../nav.config'
 import { getDefaultSearchEngine, setDefaultSearchEngine, queryString } from '../../utils'
 
 @Component({
@@ -8,7 +8,7 @@ import { getDefaultSearchEngine, setDefaultSearchEngine, queryString } from '../
   styleUrls: ['./search-engine.component.scss']
 })
 export class SearchEngineComponent {
-  SEARCH_ENGINE_LIST = SEARCH_ENGINE_LIST
+  searchEngineList = config.searchEngineList
 
   currentEngine = getDefaultSearchEngine()
 
@@ -32,7 +32,7 @@ export class SearchEngineComponent {
   }
 
   toggleEngine(e?: Event, isShow?: boolean) {
-    if (this.SEARCH_ENGINE_LIST.length <= 1) return
+    if (this.searchEngineList.length <= 1) return
 
     if (e) {
       e.stopPropagation()
@@ -43,7 +43,7 @@ export class SearchEngineComponent {
   }
 
   clickEngineItem(index) {
-    this.currentEngine = SEARCH_ENGINE_LIST[index]
+    this.currentEngine = config.searchEngineList[index]
     this.toggleEngine()
     this.inputFocus()
     setDefaultSearchEngine(this.currentEngine)

src/types/index.d.ts

@@ -38,3 +38,17 @@ export interface ISearchEngineProps {
   icon: string
   placeholder?: string
 }
+
+export interface IConfig {
+  title: string
+  theme: ThemeType
+  posterImageUrl: string
+  searchEngineList: ISearchEngineProps[]
+  gitRepoUrl: string,
+  errorIconUrl: string
+  footerCopyright: string|null
+  tongjiUrl: string
+  indexLanguage: string[]
+  appLanguage: string[]
+  backgroundLinear: string[]
+}

src/utils/index.ts

 import WEBSITE_LIST from '../../data'
 import qs from 'qs'
-import { BACKGROUND_LINEAR, ERROR_ICON, SEARCH_ENGINE_LIST } from '../../config'
+import config from '../../nav.config'
 import { INavProps, ISearchEngineProps } from '../types'
 
+const { backgroundLinear, errorIconUrl, searchEngineList } = config
+
 export function debounce(func, wait, immediate) {
   let timeout
 
@@ -100,11 +102,11 @@ export function randomBgImg() {
   const el = document.createElement('div')
   el.id = 'random-light-bg'
   el.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;z-index:-3;transition: 1s linear;'
-  el.style.backgroundImage = BACKGROUND_LINEAR[randomInt(BACKGROUND_LINEAR.length)]
+  el.style.backgroundImage = backgroundLinear[randomInt(backgroundLinear.length)]
   document.body.appendChild(el)
 
   function setBg() {
-    const randomBg = BACKGROUND_LINEAR[randomInt(BACKGROUND_LINEAR.length)]
+    const randomBg = backgroundLinear[randomInt(backgroundLinear.length)]
     el.style.opacity = '.3'
     setTimeout(() => {
       el.style.backgroundImage = randomBg
@@ -116,8 +118,8 @@ export function randomBgImg() {
 }
 
 export function onImgError(e: any) {
-  if (ERROR_ICON) {
-    e.target.src = ERROR_ICON
+  if (errorIconUrl) {
+    e.target.src = errorIconUrl
   } else {
     const el = e.target
     el.parentNode.removeChild(el)
@@ -218,7 +220,7 @@ export function setLocation() {
 }
 
 export function getDefaultSearchEngine(): ISearchEngineProps {
-  let DEFAULT = (SEARCH_ENGINE_LIST[0] || {}) as ISearchEngineProps
+  let DEFAULT = (searchEngineList[0] || {}) as ISearchEngineProps
   try {
     const engine = window.localStorage.getItem('engine');
     if (engine) {

src/view/app/default/app.component.ts

 import nav from '../../../../data'
 import { Component } from '@angular/core'
 import { Router, ActivatedRoute } from '@angular/router'
-import { APP_LANGUAGE } from '../../../../config'
+import config from '../../../../nav.config'
 import { onImgError, queryString } from '../../../utils'
 import { INavProps } from '../../../types'
 
@@ -17,7 +17,7 @@ export default class WebpComponent {
   id: number = 0
   page: number = 0
   open: boolean = false
-  language: string[] = APP_LANGUAGE
+  language: string[] = config.appLanguage
 
   ngOnInit () {
     this.activatedRoute.queryParams.subscribe(() => {

src/view/index/light/index.component.ts

 import { Component } from '@angular/core'
 import { Router, ActivatedRoute } from '@angular/router'
-import { GIT_REPO_URL } from '../../../../config'
+import config from '../../../../nav.config'
 import { INavProps, INavThreeProp } from '../../../types'
 import {
   debounce,
@@ -30,7 +30,7 @@ export default class HomeComponent {
   page: number = 0
   searchKeyword: string = ''
   showInput = false
-  GIT_REPO_URL: string = GIT_REPO_URL
+  gitRepoUrl: string = config.gitRepoUrl
 
   ngOnInit() {
     randomBgImg()

src/view/index/sim/index.component.html

 <div class="sim">
-  <div class="wallpaper" [ngStyle]="{ 'background-image': 'url(' + POSTER_IMAGE + ')' }">
+  <div class="wallpaper" [ngStyle]="{ 'background-image': 'url(' + posterImageUrl + ')' }">
     <h1 class="title dark-title">{{ title }}</h1>
     <h2 class="description dark-text-active">这里收录多达 <b>{{ totalWeb }}</b> 个优质网站， 助您工作、学习和生活</h2>
     <app-search-engine (onSearch)="onSearch($event)"></app-search-engine>

src/view/index/sim/index.component.ts

 import { Component } from '@angular/core'
 import { Router, ActivatedRoute } from '@angular/router'
-import { GIT_REPO_URL, TITLE, POSTER_IMAGE } from '../../../../config'
+import config from '../../../../nav.config'
 import { INavProps, INavThreeProp } from '../../../types'
 import {
   debounce,
@@ -15,6 +15,7 @@ import {
 } from '../../../utils'
 import { initRipple, setAnnotate } from '../../../utils/ripple'
 
+const { gitRepoUrl, title, posterImageUrl } = config
 let sidebarEl: HTMLElement;
 
 @Component({
@@ -31,10 +32,10 @@ export default class HomeComponent {
   id: number = 0
   page: number = 0
   searchKeyword: string = ''
-  GIT_REPO_URL: string = GIT_REPO_URL
+  gitRepoUrl: string = gitRepoUrl
   totalWeb: number = totalWeb()
-  title: string = TITLE
-  POSTER_IMAGE: string = POSTER_IMAGE
+  title: string = title
+  posterImageUrl: string = posterImageUrl
 
   ngOnInit() {
     const initList = () => {