test(cypress): add cypress to test

.github/workflows/ci.yml

@@ -96,3 +96,35 @@ jobs:
 
       - run: pnpm install
       - run: pnpm run test
+  
+  test-e2e:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/cache@v3
+        with:
+          path: |
+            ~/.cache
+          key: cypress-cache-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
+
+      - uses: pnpm/action-setup@v2
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          registry-url: https://registry.npmjs.org/
+          cache: pnpm
+
+      - run: pnpm install
+
+      - name: Cypress PNPM Patch
+        run: cp pnpm-lock.yaml package-lock.json
+
+      - name: Cypress
+        uses: cypress-io/github-action@v4
+        with:
+          install-command: echo
+          build: pnpm run build
+          start: cd demo/yun && npx valaxy --port 3333
+    

.gitignore

@@ -16,3 +16,5 @@ node_modules
 *.log
 
 components.d.ts
+
+cypress/downloads

cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3333',
+    chromeWebSecurity: false,
+    specPattern: 'cypress/e2e/**/*.spec.*',
+    supportFile: false,
+  },
+})

cypress/e2e/demo/yun.spec.ts

@@ -0,0 +1,51 @@
+context('Demo Yun', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  it('basic', () => {
+    cy.url()
+      .should('eq', 'http://localhost:3333/')
+  })
+
+  it('banner', () => {
+    // test banner
+    cy.get('.char-box')
+      .should('exist')
+  })
+
+  it('sidebar', () => {
+    cy.get('.sidebar')
+      .should('exist')
+  })
+
+  it('post list', () => {
+    cy.get('.yun-post-list')
+      .should('exist')
+  })
+
+  it('enter post', () => {
+    cy.get('.post-title-link')
+      .first()
+      .click()
+      .url()
+      .should('eq', 'http://localhost:3333/posts/hello-valaxy')
+
+    cy.contains('Hello, Valaxy!')
+      .should('exist')
+
+    // post nav next
+    cy.get('.post-nav-next')
+      .should('exist')
+      .click()
+      .url()
+      .should('contain', 'http://localhost:3333/posts/')
+  })
+
+  it('comment', () => {
+    cy.visit('/about')
+
+    cy.get('.comment')
+      .should('exist')
+  })
+})

cypress/e2e/docs/docs.spec.ts

@@ -0,0 +1,10 @@
+context('Docs', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  it('basic', () => {
+    cy.url()
+      .should('eq', 'http://localhost:3333/')
+  })
+})

cypress/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "types": [
+      "cypress"
+    ]
+  },
+  "exclude": [],
+  "include": [
+    "**/*.ts"
+  ]
+}

demo/yun/package.json

@@ -7,7 +7,7 @@
     "build": "npm run build:ssg && npm run rss && npm run fuse",
     "build:spa": "valaxy build",
     "build:ssg": "valaxy build --ssg --log=info",
-    "dev": "nodemon -w \"../../packages/valaxy/dist/*.cjs\" --exec \"valaxy .\"",
+    "dev": "nodemon -w \"../../packages/valaxy/dist/*.cjs\" --exec \"valaxy . --port 3333\"",
     "fuse": "valaxy fuse",
     "new": "valaxy new",
     "rss": "valaxy rss",

docs/pages/dev/docs.md

@@ -30,6 +30,8 @@ This is a example.
 </div>
 ```
 
+更多请参见 [单页 i18n](https://valaxy.site/guide/i18n)。
+
 ## 如何提交
 
 使用 GitHub 的 Pull Request 向 valaxy 提交即可。

docs/pages/guide/why.md

@@ -3,7 +3,6 @@ cover: https://fastly.jsdelivr.net/gh/YunYouJun/cdn/img/bg/girl-in-water-tank.we
 title: Why Valaxy
 title_zh-CN: 为什么选 Valaxy
 date: 2022-03-22
-updated: 2022-03-23
 categories:
   - Getting Started
 tags:

package.json

@@ -35,6 +35,7 @@
     "start": "node packages/valaxy/bin/valaxy.js dev",
     "typecheck": "vue-tsc --noEmit --skipLibCheck",
     "test": "vitest",
+    "test:e2e": "cypress open",
     "test:space": "export NODE_OPTIONS='--inspect --max-old-space-size=2048' && pnpm -C demo/yun run build:ssg",
     "prepare": "husky install"
   },
@@ -47,7 +48,10 @@
     "@types/resolve": "^1.20.2",
     "@types/semver": "^7.3.13",
     "cross-env": "^7.0.3",
+    "cypress": "^12.6.0",
     "eslint": "^8.34.0",
+    "eslint-plugin-cypress": "^2.12.1",
+    "https-localhost": "^4.7.1",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.2",
     "prompts": "^2.4.2",

packages/valaxy-theme-press/components/PressArticle.vue

@@ -3,6 +3,9 @@ import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { useFrontmatter, useSiteStore } from 'valaxy'
+import { useI18n } from 'vue-i18n'
+import { getLocaleTitle } from '../utils'
+
 const frontmatter = useFrontmatter()
 
 const route = useRoute()
@@ -14,6 +17,9 @@ function findCurrentIndex() {
 
 const nextPost = computed(() => site.postList[findCurrentIndex() - 1])
 const prevPost = computed(() => site.postList[findCurrentIndex() + 1])
+
+const { locale } = useI18n()
+const localeTitle = computed(() => getLocaleTitle(locale.value, frontmatter.value))
 </script>
 
 <template>
@@ -30,7 +36,7 @@ const prevPost = computed(() => site.postList[findCurrentIndex() + 1])
           md:text-5xl md:leading-14
         "
       >
-        {{ frontmatter.title }}
+        {{ localeTitle }}
       </h1>
     </header>
 

packages/valaxy-theme-press/components/ValaxyMain.vue

@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import type { PageData, Post } from 'valaxy'
 import { useFrontmatter, useLayout, useSidebar, useSiteConfig } from 'valaxy'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { getLocaleTitle } from '../utils'
 
 defineProps<{
   frontmatter: Post
@@ -12,12 +15,16 @@ const frontmatter = useFrontmatter()
 
 const { hasSidebar } = useSidebar()
 const isHome = useLayout('home')
+const layout = useLayout()
+
+const { locale } = useI18n()
+const localeTitle = computed(() => getLocaleTitle(locale.value, frontmatter.value))
 </script>
 
 <template>
   <main
     class="press-main flex" :class="{
-      'has-sidebar': hasSidebar,
+      'has-sidebar': hasSidebar && layout !== 'post',
     }"
   >
     <div
@@ -37,7 +44,7 @@ const isHome = useLayout('home')
               <Transition appear>
                 <ValaxyMd class="prose mx-auto w-full max-w-4xl" :frontmatter="frontmatter">
                   <h1 v-if="hasSidebar && !isHome && frontmatter.title" :id="frontmatter.title" tabindex="-1">
-                    {{ frontmatter.title }}
+                    {{ localeTitle }}
                     <a class="header-anchor" :href="`#${frontmatter.title}`" aria-hidden="true">#</a>
                   </h1>
                   <slot name="main-content-md" />

packages/valaxy-theme-press/utils/index.ts

@@ -0,0 +1,9 @@
+/**
+ * get locale title
+ * @param locale
+ * @param frontmatter
+ * @returns
+ */
+export function getLocaleTitle(locale: string, frontmatter: any) {
+  return frontmatter[`title${locale === 'en' ? '' : `_${locale}`}`]
+}

packages/valaxy-theme-yun/components/YunPostList.vue

@@ -20,7 +20,7 @@ const displayedPosts = computed(() => posts.value.slice((props.curPage - 1) * pa
 </script>
 
 <template>
-  <div w="full" p="x-4 lt-sm:0">
+  <div class="yun-post-list" w="full" p="x-4 lt-sm:0">
     <template v-if="!displayedPosts.length">
       <div py2 op50>
         博主还什么都没写哦～

packages/valaxy/node/markdown/markdown-it/container.ts

@@ -35,7 +35,7 @@ function createContainer(classes: string, { icon, color, text: defaultTitle, lan
           let title = `<span lang="en">${info || defaultTitle}</span>`
           if (langs) {
             Object.keys(langs).forEach((lang) => {
-              title += `<span lang="${lang}">${langs[lang]}</span>`
+              title += `<span lang="${lang}">${info || langs[lang]}</span>`
             })
           }
 

tsconfig.json

@@ -38,5 +38,5 @@
     "./packages/**/*.ts",
     "./packages/**/*.vue"
   ],
-  "exclude": ["**/dist/**", "node_modules"]
+  "exclude": ["**/dist/**", "node_modules", "cypress"]
 }