feature: add render only menu and output path select

src/assets/locales.ts

@@ -18,6 +18,8 @@ const message = {
     newVersionTips: '有新版本发布，快去下载新版本吧！',
     newArticle: '新文章',
     publish: '发布',
+    RenderSite: '仅渲染',
+    RenderFinish: '渲染输出完成',
     published: '已发布',
     draft: '草稿',
     title: '标题',
@@ -80,6 +82,7 @@ const message = {
     connectSuccess: '远程连接成功',
     connectFailed: '远程连接失败，请检查仓库、用户名和令牌设置',
     sourceFolder: '站点源文件路径',
+    outputFolder: '渲染输出路径',
     language: '语 言',
     inConfig: '配置中',
     searchArticle: '搜索文章',
@@ -148,6 +151,8 @@ const message = {
     newArticle: '新文章',
     publish: '發布',
     published: '已發布',
+    RenderSite: '僅渲染',
+    RenderFinish: '渲染輸出完成',
     draft: '草稿',
     title: '標題',
     status: '狀態',
@@ -209,6 +214,7 @@ const message = {
     connectSuccess: '遠程連接成功',
     connectFailed: '遠程連接失敗，請檢查倉庫、用戶名和令牌設置',
     sourceFolder: '站点源文件路径',
+    outputFolder: '渲染輸出路徑',
     language: '語 言',
     inConfig: '配置中',
     searchArticle: '搜索文章',
@@ -276,6 +282,8 @@ const message = {
     newArticle: 'New',
     publish: 'Publish',
     published: 'Published',
+    RenderSite: 'RenderOnly',
+    RenderFinish: 'RenderFinish',
     draft: 'Draft',
     title: 'Title',
     status: 'Status',
@@ -332,11 +340,12 @@ const message = {
     editorTip: 'You can insert a separate line <!-- more --> is the abstract separator identifier ( the content before this line is the abstract)',
     saveError: 'Save failed',
     privateKeyTip: 'Please fill in the absolute path, for example: /home/username/.ssh/id_rsa',
-    remotePathTip: 'Please fill in the absolute path, for example:：/home/username/www/',
+    remotePathTip: 'Please fill in the absolute path, for example: /home/username/www/',
     testConnection: 'Test Connection',
     connectSuccess: 'Remote connection succeeded',
     connectFailed: 'Remote connection failed, please check repository, username and token settings',
     sourceFolder: 'Site source file path',
+    outputFolder: 'Render output file path',
     language: 'Language',
     inConfig: 'In configuration',
     searchArticle: 'Articles search',
@@ -404,6 +413,8 @@ const message = {
     newArticle: 'Nouveau',
     publish: 'Publier',
     published: 'Publié',
+    RenderSite: 'Rendu uniquement',
+    RenderFinish: 'Render Finish',
     draft: 'Brouillon',
     title: 'Titre',
     status: 'Status',
@@ -465,6 +476,7 @@ const message = {
     connectSuccess: 'Connexion à distance a réussi',
     connectFailed: 'La connexion à distance a échoué, veuillez vérifier les paramètres du référentiel, du nom d\'utilisateur et du token',
     sourceFolder: 'Chemin d\'accès au fichier source du site',
+    outputFolder: 'Chemin du fichier de sortie du rendu',
     language: 'Langue',
     inConfig: 'En configuration',
     searchArticle: 'Rechercher des articles',
@@ -532,6 +544,8 @@ const message = {
     newArticle: '新規文書',
     publish: '公開',
     published: '公開済み',
+    RenderSite: 'レンダリングのみ',
+    RenderFinish: 'レンダリングフィニッシュ',
     draft: '下書き',
     title: 'タイトル',
     status: 'ステータス',
@@ -593,6 +607,7 @@ const message = {
     connectSuccess: '接続は成功しました',
     connectFailed: '接続が失敗しました。リポジトリ名、ユーザー名とトークンを確認してください。',
     sourceFolder: 'サイトのソースファイルのパス',
+    outputFolder: 'レンダリング出力ファイルのパス',
     language: '言語',
     inConfig: '配置中',
     searchArticle: '文書検索',

src/components/AppSystem/Index.vue

@@ -2,6 +2,7 @@
   <div>
     <language-setting></language-setting>
     <source-folder-setting></source-folder-setting>
+    <output-folder-setting></output-folder-setting>
     <version></version>
   </div>
 </template>
@@ -10,12 +11,14 @@
 import { Vue, Component } from 'vue-property-decorator'
 import LanguageSetting from './includes/LanguageSetting.vue'
 import SourceFolderSetting from './includes/SourceFolderSetting.vue'
+import OutputFolderSetting from './includes/OutputFolderSetting.vue'
 import Version from './includes/Version.vue'
 
 @Component({
   components: {
     LanguageSetting,
     SourceFolderSetting,
+    OutputFolderSetting,
     Version,
   },
 })

src/components/AppSystem/includes/OutputFolderSetting.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="mb-4 py-4 border-b border-gray-200">
+    <div class="text-base font-medium mb-4">{{ $t('outputFolder') }}</div>
+    <a-form>
+      <a-form-item :labelCol="formLayout.label" :wrapperCol="formLayout.wrapper" :colon="false">
+        <a-input v-model="currentFolderPath" read-only>
+          <i slot="addonAfter" class="zwicon-folder-open px-2" @click="handleFolderSelect"></i>
+        </a-input>
+      </a-form-item>
+      <a-form-item :labelCol="formLayout.label" :wrapperCol="formLayout.wrapper" :colon="false">
+        <a-button type="primary" @click="save">{{ $t('save') }}</a-button>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+
+<script lang="ts">
+import {
+  app,
+  ipcRenderer, IpcRendererEvent, remote,
+} from 'electron'
+import { Vue, Component } from 'vue-property-decorator'
+import { State } from 'vuex-class'
+
+@Component
+export default class System extends Vue {
+  @State('site') site!: any
+
+  formLayout = {
+    label: { span: 5 },
+    wrapper: { span: 12 },
+  }
+
+  currentFolderPath = '-'
+
+  mounted() {
+    this.currentFolderPath = this.site.buildDir
+  }
+
+  save() {
+    ipcRenderer.send('app-output-folder-setting', this.currentFolderPath)
+    ipcRenderer.once('app-output-folder-set', (event: IpcRendererEvent, data: any) => {
+      if (data) {
+        this.$message.success(this.$t('saved'))
+        this.$bus.$emit('site-reload')
+        remote.app.relaunch()
+        remote.app.quit()
+      } else {
+        this.$message.error(this.$t('saveError'))
+      }
+    })
+  }
+
+  async handleFolderSelect() {
+    const res = await remote.dialog.showOpenDialog({
+      properties: ['openDirectory', 'createDirectory'],
+    })
+    if (res.filePaths.length > 0) {
+      this.currentFolderPath = res.filePaths[0].replace(/\\/g, '/')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+/deep/ .ant-input-group-addon {
+  padding: 0;
+}
+.folder-btn {
+  padding: 0 8px;
+}
+</style>

src/components/Main.vue

@@ -29,6 +29,12 @@
           <i class="zwicon-eye"></i>
           {{ $t('preview') }}
         </a-button>
+        <a-button class="Render-btn" block type="primary" :loading="Rendering" @click="RenderOnly">
+          <template v-if="!Rendering">
+            <i class="zwicon-script"></i>
+            {{ $t('RenderSite') }}
+          </template>
+        </a-button>
         <a-button class="sync-btn" block type="primary" :loading="publishLoading" @click="publish">
           <template v-if="!publishLoading">
             <i class="zwicon-deploy"></i>
@@ -119,6 +125,8 @@ export default class App extends Vue {
 
   publishLoading = false
 
+  Rendering = false
+
   hasUpdate = false
 
   newVersion = ''
@@ -259,6 +267,24 @@ export default class App extends Vue {
       )
     })
   }
+
+  public RenderOnly() {
+    ipcRenderer.send('site-render')
+    this.Rendering = true
+
+    ga.event('Render', 'Render - start', { evLabel: this.site.setting.domain })
+
+    ipcRenderer.once('site-rendered', (event: IpcRendererEvent, result: any) => {
+      console.log(result)
+      if (result.success) {
+        this.$message.success(`🎉  ${this.$t('RenderFinish')}`)
+        ga.event('Render', 'Render - success', { evLabel: this.site.setting.domain })
+      } else {
+        ga.event('Render', 'Render - failed', { evLabel: this.site.setting.domain })
+      }
+      this.Rendering = false
+    })
+  }
 
   public publish() {
     const { setting } = this.site
@@ -455,6 +481,18 @@ export default class App extends Vue {
   }
 }
 
+.Render-btn {
+  border-radius: 20px;
+  background: linear-gradient(124deg, rgb(113, 118, 124) 0%, rgba(31,31,31,1) 100%);
+  color: #bababa;
+  border: none;
+  transition: all 0.3s;
+  &:hover {
+    background: linear-gradient(124deg, rgb(71, 71, 71) 0%, rgb(31, 31, 31) 100%);
+    border: none;
+  }
+}
+
 .sync-btn {
   border-radius: 20px;
   background: linear-gradient(124deg, rgba(65,70,75,1) 0%, rgba(0,0,0,1) 100%);

src/server/app.ts

@@ -149,6 +149,7 @@ export default class App {
       ...this.db,
       currentThemeConfig,
       appDir: this.appDir,
+      buildDir: this.buildDir,
       mainWindow: this.mainWindow,
     }
   }
@@ -163,7 +164,7 @@ export default class App {
     try {
       const appConfigFolder = path.join(this.app.getPath('home'), '.gridea')
       const appConfigPath = path.join(appConfigFolder, 'config.json')
-      const jsonString = `{"sourceFolder": "${sourceFolderPath || this.appDir}"}`
+      const jsonString = `{"sourceFolder": "${sourceFolderPath || this.appDir}","outputFolder": "${this.buildDir}"}`
 
       fse.writeFileSync(appConfigPath, jsonString)
       const appConfig = fse.readJsonSync(appConfigPath)
@@ -179,6 +180,26 @@ export default class App {
     }
   }
 
+  public async saveOutputFolderSetting(outputFolderPath: string = '') {
+    try {
+      const appConfigFolder = path.join(this.app.getPath('home'), '.gridea')
+      const appConfigPath = path.join(appConfigFolder, 'config.json')
+      const jsonString = `{"sourceFolder": "${this.appDir}","outputFolder": "${outputFolderPath || this.buildDir}"}`
+
+      fse.writeFileSync(appConfigPath, jsonString)
+      const appConfig = fse.readJsonSync(appConfigPath)
+      this.buildDir = appConfig.outputFolder
+      this.updateStaticServer()
+
+      this.checkDir()
+
+      return true
+    } catch (e) {
+      console.log(e)
+      return false
+    }
+  }
+
   /**
    * Check if the hve-next folder exists, if it does not exist, it is initialized
    */
@@ -203,17 +224,13 @@ export default class App {
 
       if (!fse.pathExistsSync(appConfigFolder)) {
         fse.mkdirSync(appConfigFolder)
-        const jsonString = `{"sourceFolder": "${defaultAppDir}"}`
+        const jsonString = `{"sourceFolder": "${defaultAppDir},"outputFolder": "${this.buildDir}""}`
         fse.writeFileSync(appConfigPath, jsonString)
       }
 
-      const buildDir = path.join(appConfigFolder, 'output')
-      if (!fse.pathExistsSync(buildDir)) {
-        fse.mkdirSync(buildDir)
-      }
-
       const appConfig = fse.readJsonSync(appConfigPath)
       this.appDir = appConfig.sourceFolder
+      this.buildDir = appConfig.outputFolder
 
       // Site folder exists
       if (fse.pathExistsSync(this.appDir)) {
@@ -248,7 +265,8 @@ export default class App {
 
       // Site folder not exists
       this.appDir = defaultAppDir
-      const jsonString = `{"sourceFolder": "${defaultAppDir}"}`
+      const outputFolder = this.buildDir
+      const jsonString = `{"sourceFolder": "${defaultAppDir}","outputFolder":"${outputFolder}"}`
       fse.writeFileSync(appConfigPath, jsonString)
       fse.mkdirSync(this.appDir)
 

src/server/events/deploy.ts

@@ -37,6 +37,17 @@ export default class DeployEvents {
       event.sender.send('site-published', result)
     })
 
+    ipcMain.on('site-render', async (event: IpcMainEvent, params: any) => {
+      // render
+      const result = {
+        success: true,
+        message: '',
+      }
+      renderer.db.themeConfig.domain = renderer.db.setting.domain
+      await renderer.renderAll()
+      event.sender.send('site-rendered', result)
+    })
+
     ipcMain.on('remote-detect', async (event: IpcMainEvent, params: any) => {
       const client = ({
         'github': deploy,

src/server/events/site.ts

@@ -9,6 +9,8 @@ export default class SiteEvents {
     ipcMain.removeAllListeners('app-site-loaded')
     ipcMain.removeAllListeners('app-source-folder-setting')
     ipcMain.removeAllListeners('app-source-folder-set')
+    ipcMain.removeAllListeners('app-output-folder-setting')
+    ipcMain.removeAllListeners('app-output-folder-set')
     ipcMain.removeAllListeners('app-preview-server-port-get')
     ipcMain.removeAllListeners('app-preview-server-port-got')
 
@@ -17,6 +19,11 @@ export default class SiteEvents {
       event.sender.send('app-site-loaded', result)
     })
 
+    ipcMain.on('app-output-folder-setting', async (event: IpcMainEvent, params: string) => {
+      const result = await appInstance.saveOutputFolderSetting(params)
+      event.sender.send('app-output-folder-set', result)
+    })
+
     ipcMain.on('app-source-folder-setting', async (event: IpcMainEvent, params: string) => {
       const result = await appInstance.saveSourceFolderSetting(params)
       event.sender.send('app-source-folder-set', result)

src/store/modules/site.ts

@@ -10,6 +10,7 @@ import {
 
 export interface Site {
   appDir: string
+  buildDir: string
   config: any
   posts: IPost[]
   tags: ITag[]
@@ -23,6 +24,7 @@ export interface Site {
 }
 const siteState: Site = {
   appDir: '',
+  buildDir: '',
   config: {},
   posts: [],
   tags: [],
@@ -89,6 +91,7 @@ const mutations: MutationTree<Site> = {
   updateSite(state, siteData: Site) {
     console.log('data', siteData)
     state.appDir = siteData.appDir
+    state.buildDir = siteData.buildDir
     state.posts = siteData.posts
     state.tags = siteData.tags
     state.menus = siteData.menus