Skip to content

Commit

Permalink
feat(docs): Experience wujie on the official website (#110)
Browse files Browse the repository at this point in the history
* feat(docs): experience wujie on official website

* fix(docs): home page remove components

* fix(docs): home page remove useless

* chore(docs): wujie build with vite

* chore(docs): optimize wujie online

* fix(wujie): fixed no response from change url

* chore(docs): build success

* chore(docs): build success

* fix(search): 修复搜索监听不到数据问题
  • Loading branch information
ErKeLost authored Sep 2, 2022
1 parent 4895297 commit d6a004f
Show file tree
Hide file tree
Showing 14 changed files with 896 additions and 594 deletions.
7 changes: 5 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.DS_Store
node_modules
npm-debug.log
dist
site
lib
Expand All @@ -9,4 +9,7 @@ esm
yarn.lock
package-lock.json
coverage
.history
.history

# Log files
.pnpm-debug.log*
12 changes: 6 additions & 6 deletions docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const ogDescription = "Next Generation Frontend Tooling";
const ogImage = "https://main.vitejs.dev/og-image.png";
const ogTitle = "Vite";
const ogUrl = "https://main.vitejs.dev";
const base = process.env.NODE_ENV === "production" ? "/doc/" : ""
const base = process.env.NODE_ENV === "production" ? "/doc/" : "";

export default defineConfig({
title: "无界",
Expand All @@ -25,7 +25,6 @@ export default defineConfig({

themeConfig: {
logo: "/wujie.svg",

editLink: {
pattern: "https://github.com/Tencent/wujie/tree/master/docs/:path",
text: "编辑本页",
Expand Down Expand Up @@ -76,14 +75,15 @@ export default defineConfig({
},
],
},
{ text: "在线体验无界", link: "/wujie/", activeMatch: "/wujie/" },
],

sidebar: {
"/guide/": [
{
text: "入门",
collapsible: true,
items:[
items: [
{
text: "介绍",
link: "/guide/",
Expand All @@ -92,7 +92,7 @@ export default defineConfig({
text: "快速上手",
link: "/guide/start",
},
]
],
},
{
text: "指南",
Expand Down Expand Up @@ -147,7 +147,7 @@ export default defineConfig({
{
text: "项目实战",
collapsible: true,
items:[
items: [
{
text: "vue主应用",
link: "https://github.com/Tencent/wujie/tree/master/examples/main-vue",
Expand All @@ -156,7 +156,7 @@ export default defineConfig({
text: "react主应用",
link: "https://github.com/Tencent/wujie/tree/master/examples/main-react",
},
]
],
},
],
"/api/": [
Expand Down
Empty file.
2 changes: 1 addition & 1 deletion docs/.vitepress/theme/components/wujie-home.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup>
import Theme from "vitepress/theme";
import { useData, withBase } from "vitepress";
import { useData } from "vitepress";
import WujieContent from "./wujie-content.vue";
const { frontmatter } = useData();
const { Layout } = Theme;
Expand Down
26 changes: 15 additions & 11 deletions docs/.vitepress/theme/index.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
import Theme from 'vitepress/theme'
// import Theme from '../wujie-theme'
import wujieHome from './components/wujie-home.vue'
import { h } from 'vue'
import './styles/vars.css'
console.log(Theme)
import Theme from "vitepress/theme";
import wujieHome from "./components/wujie-home.vue";
import { h } from "vue";
import "./styles/vars.css";

const inBrowser = typeof window !== "undefined";
export default {
...Theme,
Layout() {
return h(wujieHome, null, {
// 'home-hero-before': () => h(wujieHome)
'nav-bar-title-before': () => h(wujieHome)
})
}
}
"nav-bar-title-before": () => h(wujieHome),
});
},
enhanceApp({ app }) {
inBrowser &&
import("wujie-vue3").then((module) => {
app.use(module.default);
});
},
};
3 changes: 3 additions & 0 deletions docs/.vitepress/theme/styles/vars.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,12 @@
--vp-c-brand: #f16b5f;
--vp-c-brand-light: #ec857c;
--vp-c-brand-lighter: #e99f98;
--vp-c-brand-lighter-item: #f5a5a150;
--vp-c-brand-dark: #f15547;
--vp-c-brand-darker: #ce5d52;
--vp-c-brand-dimm: #c9433710;
--vp-z-index-nav: 999 !important;
--vp-z-index-footer: -10;
}

/**
Expand Down
7 changes: 6 additions & 1 deletion docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,15 @@
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "yiludege,ERKELSOT",
"author": "yiludege,erkelost",
"license": "ISC",
"devDependencies": {
"vite": "3.0.9",
"vitepress": "1.0.0-alpha.9"
},
"dependencies": {
"@vue/theme": "^1.2.2",
"vue": "^3.2.38",
"wujie-vue3": "workspace:*"
}
}
2 changes: 1 addition & 1 deletion docs/vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@ export default defineConfig({
// legacy: {
// buildSsrCjsExternalHeuristics: true
// }
css: { preprocessorOptions: { scss: { charset: false } } }
css: { preprocessorOptions: { scss: { charset: false } } },
})
39 changes: 39 additions & 0 deletions docs/wujie/components/data.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
export const wujieList = [
{
name: "UmiJS",
url: "https://umijs.org/",
},
{
name: "TurboRepo",
url: "https://turborepo.org/docs/getting-started",
},
{
name: "React",
url: "https://reactjs.org/",
},
{
name: "Vercel",
url: "https://vercel.com/",
},
{
name: "Webpack",
url: "https://webpack.js.org/",
},
{
name: "Vuetify",
url: "https://vuetifyjs.com/en/",
},
{
name: "AntDesign",
url: "https://ant.design/components/drawer-cn/",
},

{
name: "AntV",
url: "https://g2.antv.vision/zh",
},
{
name: "NaiveUI",
url: "https://www.naiveui.com/zh-CN/os-theme/components/button",
},
];
149 changes: 149 additions & 0 deletions docs/wujie/components/wujie-connect.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
<script setup lang="ts">
import { ref } from "vue";
const emit = defineEmits(["changeUrl"]);
const url = ref("");
const flag = ref(false);
function preventDefault(event) {
event.preventDefault;
const reg = /(https):\/\/([\w.]+\/?)\S*/;
if (reg.test(url.value)) {
flag.value = !flag.value;
console.log(flag.value);
emit("changeUrl", [url.value, flag.value]);
}
}
</script>
<template>
<section id="newsletter" class="NewsLetter">
<div class="container">
<h2 class="title"><span class="link">开箱即用</span> , 用最简单的方式体验<span class="link">无界</span></h2>
<div class="form">
<form class="box" action="javascript:">
<input
class="input"
placeholder="Your Website"
required
pattern="https:\/\/([\w.]+\/?)\S*"
title="请输入允许跨域的并且是https协议的网站"
v-model="url"
/>
<div class="action">
<input class="button" type="submit" @click="preventDefault" value="Magic" />
</div>
</form>
</div>
<p class="help">
您可以输入一个允许跨域访问的<span class="link">https</span>协议网站来在线体验<span class="link">无界</span>
</p>
</div>
</section>
</template>

<style scoped>
.NewsLetter {
border-top: 1px solid transparent;
border-bottom: 1px solid var(--vp-c-divider-light);
padding: 32px 24px;
background: var(--vp-c-bg-soft);
transition: border-color 0.5s, background-color 0.5s;
}
.dark .NewsLetter {
border-top-color: var(--vp-c-divider-light);
border-bottom-color: transparent;
background: var(--vp-c-bg);
}
@media (min-width: 768px) {
.NewsLetter {
padding: 48px 32px;
}
}
.container {
margin: 0 auto;
max-width: 552px;
}
.title {
text-align: center;
font-size: 14px;
font-weight: 500;
color: var(--vp-c-text-2);
transition: color 0.5s;
}
@media (min-width: 375px) {
.title {
font-size: 18px;
}
}
.form {
padding-top: 8px;
}
@media (min-width: 375px) {
.form {
padding-top: 16px;
}
}
.box {
position: relative;
width: 100%;
}
.input {
border: 3px solid var(--vp-c-divider);
border-radius: 8px;
padding: 11px 128px 11px 16px;
font-size: 16px;
width: 100%;
color: var(--vp-c-text-1);
transition: border-color 0.25s, background-color 0.25s;
}
.input:hover,
.input:focus {
border-color: var(--vp-c-brand);
}
.input::placeholder {
font-weight: 500;
color: var(--vp-c-text-3);
transition: color 0.25s;
}
.action {
position: absolute;
top: 7px;
right: 6px;
}
.button {
border-radius: 4px;
padding: 0 12px;
letter-spacing: 0.8px;
line-height: 36px;
font-size: 13px;
font-weight: 500;
color: var(--vp-c-text-dark-1);
background-color: var(--vp-c-brand);
transition: background-color 0.25s;
cursor: pointer;
}
.button:hover {
background-color: var(--vp-c-brand-dark);
}
.help {
margin: 0 auto;
padding: 8px;
max-width: 480px;
text-align: center;
line-height: 20px;
font-size: 14px;
font-weight: 500;
color: var(--vp-c-text-2);
transition: color 0.5s;
}
@media (min-width: 375px) {
.help {
padding-top: 16px;
}
}
.link {
color: var(--vp-c-brand);
transition: color 0.25s;
}
.link:hover {
color: var(--vp-c-brand-dark);
}
</style>
Loading

0 comments on commit d6a004f

Please sign in to comment.