Skip to content

Commit

Permalink
chore: replace intranet repo and script (#405)
Browse files Browse the repository at this point in the history
* chore: fix intranet script

* chore: fix intranet repo address
  • Loading branch information
uyarn authored Sep 20, 2023
1 parent 99a025f commit f8a5b9c
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 116 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"dev:theme-generator": "pnpm run --filter 'tdesign-theme-generator' dev",
"build:components": "pnpm run --filter 'tdesign-site-components' build && pnpm run --filter 'tdesign-site-components' postbuild",
"site": "npm run build:components && cd site && npm run build",
"site:intranet": "npm run build:components && cd site && vite build --mode intranet",
"site:intranet": "npm run build:components && cd site && npm run site:intranet",
"prepare": "husky install"
},
"license": "MIT",
Expand Down
1 change: 1 addition & 0 deletions packages/components/.eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ module.exports = {
babelOptions: {
configFile: path.resolve(__dirname, './babelrc'),
},
ecmaVersion: 2020,
},
rules: {},
};
2 changes: 1 addition & 1 deletion packages/components/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "tdesign-site-components",
"version": "0.13.13",
"version": "0.13.14",
"main": "lib/site.es.js",
"scripts": {
"dev": "vite",
Expand Down
177 changes: 63 additions & 114 deletions packages/components/src/components/td-header/index.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import { html, define } from "hybrids";
import style from "./style.less";
import portalStyle from "./portal.less";
import githubIcon from "@images/github.svg?raw";
import gitIcon from "@images/git.svg?raw";
import fakeArrowIcon from "@images/fake-arrow.svg?raw";
import translateIcon from "@images/translate.svg?raw";
import { isIntranet, getLang } from "@utils/index";
import closeIcon from "@images/close.svg?raw";
import { getHeaderConfig } from "@config/header.js";
import { html, define } from 'hybrids';
import style from './style.less';
import portalStyle from './portal.less';
import githubIcon from '@images/github.svg?raw';
import fakeArrowIcon from '@images/fake-arrow.svg?raw';
import translateIcon from '@images/translate.svg?raw';
import { getLang } from '@utils/index';
import closeIcon from '@images/close.svg?raw';
import { getHeaderConfig } from '@config/header.js';

const headerConfig = getHeaderConfig();
const { headerList, baseComponentsLinks, baseComponentPrefix } = headerConfig;
Expand Down Expand Up @@ -38,40 +37,34 @@ function isActive(path) {

// 渲染公告
function renderNotice(host) {
if (
location.host !== "tdesign.tencent.com" &&
!localStorage.getItem("TDesign_notice")
)
return html``;
if (location.host !== 'tdesign.tencent.com' && !localStorage.getItem('TDesign_notice')) return html``;
const { notice } = host;

let currentSite = location.pathname.split("/")[1] || "site";
if (["design", "source", "about"].includes(currentSite)) currentSite = "site";
let currentSite = location.pathname.split('/')[1] || 'site';
if (['design', 'source', 'about'].includes(currentSite)) currentSite = 'site';

let noticeOption = notice[currentSite];
// 无当前站点公告时,使用全站公告
if (!noticeOption?.title) noticeOption = notice["all"];
if (!noticeOption?.title) noticeOption = notice['all'];
if (!noticeOption?.title) return html``;

// 已关闭公告不再提醒
if (localStorage.getItem("TDesign_notice_closed") === noticeOption?.title)
return html``;
if (localStorage.getItem('TDesign_notice_closed') === noticeOption?.title) return html``;

const changeAsideElTop = (top = "96px") => {
const changeAsideElTop = (top = '96px') => {
// 左侧栏适配
const asideEl = document.querySelector("td-doc-aside");
const asideEl = document.querySelector('td-doc-aside');
if (asideEl) {
asideEl.style.setProperty("--aside-top", top);
asideEl.shadowRoot.querySelector(".TDesign-doc-aside").style.top = top;
asideEl.style.setProperty('--aside-top', top);
asideEl.shadowRoot.querySelector('.TDesign-doc-aside').style.top = top;
}
};

const closeNotice = () => {
if (!host.shadowRoot) return;
host.shadowRoot.querySelector(".TDesign-header-notice").style.display =
"none";
changeAsideElTop("64px");
localStorage.setItem("TDesign_notice_closed", noticeOption?.title);
host.shadowRoot.querySelector('.TDesign-header-notice').style.display = 'none';
changeAsideElTop('64px');
localStorage.setItem('TDesign_notice_closed', noticeOption?.title);
};

const handleNoticeAction = () => {
Expand All @@ -83,18 +76,9 @@ function renderNotice(host) {

return html`
<div class="TDesign-header-notice ${noticeOption.type}">
<div
class="TDesign-header-notice__content"
onclick="${handleNoticeAction}"
>
${noticeOption.title}
</div>
<div class="TDesign-header-notice__content" onclick="${handleNoticeAction}">${noticeOption.title}</div>
${noticeOption.closeable &&
html`<i
class="TDesign-header-notice__close"
innerHTML="${closeIcon}"
onclick="${closeNotice}"
></i>`}
html`<i class="TDesign-header-notice__close" innerHTML="${closeIcon}" onclick="${closeNotice}"></i>`}
</div>
`;
}
Expand All @@ -111,24 +95,18 @@ function renderLinksPopup(host, trigger) {
(item) => html`
<a
href="${item.path}"
class="link ${isActive(item.path)
? "active"
: ""} ${!item.status ? "disabled" : ""}"
class="link ${isActive(item.path) ? 'active' : ''} ${!item.status ? 'disabled' : ''}"
onclick=${(host, e) => handleLinkClick(host, e, item)}
>
<img class="icon" src="${item.icon}" />
<div class="details">
<span class="name">
${item.name} ${renderTag(item.status)}
</span>
<span class="name"> ${item.name} ${renderTag(item.status)} </span>
<span class="version">
${item.status
? `Version:${host.npmVersions[item.npm]}`
: "敬请期待"}
${item.status ? `Version:${host.npmVersions[item.npm]}` : '敬请期待'}
</span>
</div>
</a>
`
`,
)}
</div>
</div>
Expand All @@ -140,24 +118,18 @@ function renderLinksPopup(host, trigger) {
(item) => html`
<a
href="${item.path}"
class="link ${isActive(item.path)
? "active"
: ""} ${!item.status ? "disabled" : ""}"
class="link ${isActive(item.path) ? 'active' : ''} ${!item.status ? 'disabled' : ''}"
onclick=${(host, e) => handleLinkClick(host, e, item)}
>
<img class="icon" src="${item.icon}" />
<div class="details">
<span class="name">
${item.name} ${renderTag(item.status)}
</span>
<span class="name"> ${item.name} ${renderTag(item.status)} </span>
<span class="version">
${item.status
? `Version:${host.npmVersions[item.npm] || "alpha"}`
: "敬请期待"}
${item.status ? `Version:${host.npmVersions[item.npm] || 'alpha'}` : '敬请期待'}
</span>
</div>
</a>
`
`,
)}
</div>
</div>
Expand All @@ -168,88 +140,67 @@ function renderLinksPopup(host, trigger) {

export function gitPath(platform, framework) {
const isStarter = /starter/.test(location.pathname);
// 页面模板跳转
if (isStarter) {
const [, starterFramework] =
location.pathname.match(/starter\/docs\/([\w-]+)/) || [];
if (!starterFramework)
return "https://github.com/Tencent/?q=tdesign+starter";
const [, starterFramework] = location.pathname.match(/starter\/docs\/([\w-]+)/) || [];
if (!starterFramework) return 'https://github.com/Tencent/?q=tdesign+starter';
return `https://github.com/Tencent/tdesign-${starterFramework}-starter`;
}

if (framework === "site") {
return isIntranet()
? "https://git.woa.com/groups/TDesign/-/projects/list"
: "https://github.com/Tencent/tdesign";
} else if (platform === "mobile") {
return isIntranet()
? `https://git.woa.com/Tdesign/Tdesign-${platform}-${framework}`
: `https://github.com/Tencent/tdesign-${platform}-${framework}`;
} else if (framework === "flutter") {
// 等待 flutter 仓库迁移到 Tencent Group 下后可以删除
return "https://github.com/TDesignOteam/tdesign-flutter";
// 组件库跳转
if (framework === 'site') {
return 'https://github.com/Tencent/tdesign';
} else if (platform === 'mobile') {
// mobile
return `https://github.com/Tencent/tdesign-${platform}-${framework}`;
} else if (framework === 'flutter') {
// TODO: 等待 flutter 仓库迁移到 Tencent Group 下后可以删除
return 'https://github.com/TDesignOteam/tdesign-flutter';
} else {
return isIntranet()
? `https://git.woa.com/Tdesign/Tdesign-${platform}-${framework}`
: `https://github.com/Tencent/tdesign-${framework}`;
// PC端/小程序 不再区分内外网仓库
return `https://github.com/Tencent/tdesign-${framework}`;
}
}

function renderLinks(host, headerList, platform, framework) {
const gitLink = html`
<a
class="TDesign-header-nav__git"
href="${gitPath(platform, framework)}"
id="${platform}"
target="_blank"
>
<span
class="TDesign-header-nav__git-icon"
innerHTML="${isIntranet() ? gitIcon : githubIcon}"
></span>
<a class="TDesign-header-nav__git" href="${gitPath(platform, framework)}" id="${platform}" target="_blank">
<span class="TDesign-header-nav__git-icon" innerHTML="${githubIcon}"></span>
</a>
`;

function handleTranslate() {
const lang = getLang();
const nextLang = lang === "zh" ? "en" : "zh";
document.dispatchEvent(
new CustomEvent("tdesign_site_lang", { detail: nextLang })
);
const nextLang = lang === 'zh' ? 'en' : 'zh';
document.dispatchEvent(new CustomEvent('tdesign_site_lang', { detail: nextLang }));
}

const translateLink = host.enabledLocale
? html`
<div class="TDesign-header-nav__translate" onclick="${handleTranslate}">
<span
class="TDesign-header-nav__translate-icon"
innerHTML="${translateIcon}"
></span>
<span class="TDesign-header-nav__translate-icon" innerHTML="${translateIcon}"></span>
</div>
`
: html``;

const isBaseActive = () => {
const [, basePath] = location.pathname.split("/");
const [, basePath] = location.pathname.split('/');
return baseComponentPrefix.includes(basePath);
};

return headerList
.map((item) => {
if (item.type === "base") {
if (item.type === 'base') {
const trigger = html`
<span
class="TDesign-header-nav__link ${isBaseActive() ? "active" : ""}"
>
<span class="TDesign-header-nav__link ${isBaseActive() ? 'active' : ''}">
${item.name} <i class="icon" innerHTML="${fakeArrowIcon}"></i>
</span>
`;
return renderLinksPopup(host, trigger);
}
return html`
<a
class="TDesign-header-nav__link ${isActive(item.path)
? "active"
: ""}"
class="TDesign-header-nav__link ${isActive(item.path) ? 'active' : ''}"
href="${item.path}"
target="${item.target}"
>${item.name}</a
Expand All @@ -261,15 +212,15 @@ function renderLinks(host, headerList, platform, framework) {
}

export default define({
tag: "td-header",
platform: "web",
framework: "vue",
tag: 'td-header',
platform: 'web',
framework: 'vue',
disabledTheme: false,
enabledLocale: true,
notice: {
get: (_host, lastValue) => lastValue || {},
set: (_host, value) => value,
connect: (host, key) => {
connect: (host) => {
fetch(import.meta.env.VITE_SITE_NOTICE_URL)
.then((res) => res.json())
.then((res) => {
Expand All @@ -281,12 +232,12 @@ export default define({
npmVersions: {
get: (_host, lastValue) => lastValue || {},
set: (_host, value) => value,
connect: (host, key) => {
connect: (host) => {
allComponentsNpmUrl.forEach((item) => {
fetch(`https://mirrors.tencent.com/npm/${item}`)
.then((res) => res.json())
.then((res) => {
const latestVersion = res?.["dist-tags"]?.["latest"];
const latestVersion = res?.['dist-tags']?.['latest'];
host.npmVersions = {
...host.npmVersions,
[item]: latestVersion,
Expand All @@ -307,10 +258,10 @@ export default define({

requestAnimationFrame(() => handleResize());

window.addEventListener("resize", handleResize);
window.addEventListener('resize', handleResize);

return () => {
window.removeEventListener("resize", handleResize);
window.removeEventListener('resize', handleResize);
};
},
},
Expand Down Expand Up @@ -341,9 +292,7 @@ export default define({
<slot name="search"></slot>
</div>
${renderLinks(host, headerList, platform, framework)}
${disabledTheme
? html``
: html`<td-theme-tabs></td-theme-tabs>`}
${disabledTheme ? html`` : html`<td-theme-tabs></td-theme-tabs>`}
`}
</div>
</div>
Expand Down

0 comments on commit f8a5b9c

Please sign in to comment.