Skip to content

Commit

Permalink
feat:support template i18n
Browse files Browse the repository at this point in the history
  • Loading branch information
zjy365 committed Nov 13, 2024
1 parent ec8fd15 commit 1f65512
Show file tree
Hide file tree
Showing 8 changed files with 70 additions and 22 deletions.
5 changes: 3 additions & 2 deletions frontend/providers/applaunchpad/src/pages/_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import '@/styles/reset.scss';
import 'nprogress/nprogress.css';
import '@sealos/driver/src/driver.css';
import { AppEditSyncedFields } from '@/types/app';
import Script from 'next/script';

//Binding events.
Router.events.on('routeChangeStart', () => NProgress.start());
Expand Down Expand Up @@ -184,7 +185,7 @@ const App = ({ Component, pageProps }: AppProps) => {
</Head>
<QueryClientProvider client={queryClient}>
<ChakraProvider theme={theme}>
<button
{/* <button
onClick={() => {
const lastLang = getLangStore();
let lang = lastLang === 'en' ? 'zh' : 'en';
Expand All @@ -196,7 +197,7 @@ const App = ({ Component, pageProps }: AppProps) => {
}}
>
changeLanguage
</button>
</button> */}
<Component {...pageProps} />
<ConfirmChild />
<Loading loading={loading} />
Expand Down
6 changes: 4 additions & 2 deletions frontend/providers/template/src/api/platform.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,10 @@ import useSessionStore from '@/store/session';

export const updateRepo = () => GET('/api/updateRepo');

export const getTemplates = () =>
GET<{ templates: TemplateType[]; menuKeys: string }>('/api/listTemplate');
export const getTemplates = (language?: string) =>
GET<{ templates: TemplateType[]; menuKeys: string }>('/api/listTemplate', {
language
});

export const getPlatformEnv = () => GET<EnvResponse>('/api/platform/getEnv');

Expand Down
2 changes: 1 addition & 1 deletion frontend/providers/template/src/pages/_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const App = ({ Component, pageProps }: AppProps) => {
const { loadUserSourcePrice } = useUserStore();

useEffect(() => {
initSystemConfig();
initSystemConfig(i18n.language);
loadUserSourcePrice();
}, []);

Expand Down
19 changes: 17 additions & 2 deletions frontend/providers/template/src/pages/api/listTemplate.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ export function replaceRawWithCDN(url: string, cdnUrl: string) {
export const readTemplates = (
jsonPath: string,
cdnUrl?: string,
blacklistedCategories?: string[]
blacklistedCategories?: string[],
language?: string
): TemplateType[] => {
const jsonData = fs.readFileSync(jsonPath, 'utf8');
const _templates: TemplateType[] = JSON.parse(jsonData);
Expand All @@ -41,12 +42,24 @@ export const readTemplates = (
item.spec.icon = replaceRawWithCDN(item.spec.icon, cdnUrl);
}
return item;
})
.filter((item) => {
if (!language) return true;

if (!item.spec.locale) return true;
console.log(item.spec.locale === language || (item.spec.i18n && item.spec.i18n[language]));
if (item.spec.locale === language || (item.spec.i18n && item.spec.i18n[language]))
return true;

return false;
});

return templates;
};

export default async function handler(req: NextApiRequest, res: NextApiResponse<ApiResp>) {
const language = req.query.language as string;

const originalPath = process.cwd();
const jsonPath = path.resolve(originalPath, 'templates.json');
const cdnUrl = process.env.CDN_URL;
Expand Down Expand Up @@ -76,7 +89,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
await fetch(`${baseurl}/api/updateRepo`);
}

const templates = readTemplates(jsonPath, cdnUrl, blacklistedCategories);
const templates = readTemplates(jsonPath, cdnUrl, blacklistedCategories, language);
console.log(language, templates.length);

const categories = templates.map((item) => (item.spec?.categories ? item.spec.categories : []));
const topKeys = findTopKeyWords(categories, menuCount);

Expand Down
30 changes: 24 additions & 6 deletions frontend/providers/template/src/pages/deploy/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const Header = ({
templateDetail: TemplateType;
cloudDomain: string;
}) => {
const { t } = useTranslation();
const { t, i18n } = useTranslation();
const { copyData } = useCopyData();
const handleExportYaml = useCallback(async () => {
const exportYamlString = yamlList?.map((i) => i.value).join('---\n');
Expand Down Expand Up @@ -127,7 +127,7 @@ const Header = ({
<Flex ml={'24px'} w="520px" flexDirection={'column'}>
<Flex alignItems={'center'} gap={'12px'}>
<Text fontSize={'24px'} fontWeight={600} color={'#24282C'}>
{templateDetail?.spec?.title}
{templateDetail?.spec?.i18n?.[i18n.language]?.title ?? templateDetail?.spec?.title}
</Text>
{DeployCountComponent}
<Flex
Expand All @@ -138,7 +138,13 @@ const Header = ({
_hover={{
background: '#F4F6F8'
}}
onClick={(e) => goGithub(e, templateDetail?.spec?.gitRepo)}
onClick={(e) =>
goGithub(
e,
templateDetail?.spec?.i18n?.[i18n.language]?.gitRepo ??
templateDetail?.spec?.gitRepo
)
}
>
<HomePageIcon />
<Text fontSize={'12px '} fontWeight={400} pl="6px">
Expand Down Expand Up @@ -224,7 +230,13 @@ const Header = ({
</Popover>
</Flex>

<Tooltip label={templateDetail?.spec?.description} closeDelay={200}>
<Tooltip
label={
templateDetail?.spec?.i18n?.[i18n.language]?.description ??
templateDetail?.spec?.description
}
closeDelay={200}
>
<Text
overflow={'hidden'}
noOfLines={1}
Expand All @@ -233,9 +245,15 @@ const Header = ({
fontSize={'12px'}
color={'5A646E'}
fontWeight={400}
onClick={() => copyData(templateDetail?.spec?.description)}
onClick={() =>
copyData(
templateDetail?.spec?.i18n?.[i18n.language]?.description ??
templateDetail?.spec?.description
)
}
>
{templateDetail?.spec?.description}
{templateDetail?.spec?.i18n?.[i18n.language]?.description ??
templateDetail?.spec?.description}
</Text>
</Tooltip>
</Flex>
Expand Down
22 changes: 16 additions & 6 deletions frontend/providers/template/src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default function AppList({ showCarousel }: { showCarousel: boolean }) {
const { setInsideCloud } = useCachedStore();
const { envs } = useSystemConfigStore();

const { data } = useQuery(['listTemplate'], getTemplates, {
const { data } = useQuery(['listTemplate', i18n.language], () => getTemplates(i18n.language), {
refetchInterval: 5 * 60 * 1000,
staleTime: 5 * 60 * 1000,
retry: 3
Expand All @@ -52,7 +52,9 @@ export default function AppList({ showCarousel }: { showCarousel: boolean }) {
});

const searchResults = typeFilteredResults?.filter((item: TemplateType) => {
return item?.metadata?.name?.toLowerCase().includes(searchValue.toLowerCase());
const nameMatches = item?.metadata?.name?.toLowerCase().includes(searchValue.toLowerCase());
const titleMatches = item?.spec?.title?.toLowerCase().includes(searchValue.toLowerCase());
return nameMatches || titleMatches;
});

return searchResults;
Expand Down Expand Up @@ -170,11 +172,11 @@ export default function AppList({ showCarousel }: { showCarousel: boolean }) {
</Box>
<Flex ml="16px" noOfLines={2} flexDirection={'column'}>
<Text fontSize={'18px'} fontWeight={600} color={'#111824'}>
{item?.spec?.title}
{item.spec.i18n?.[i18n.language]?.title ?? item.spec.title}
</Text>
{envs?.SHOW_AUTHOR === 'true' && (
<Text fontSize={'12px'} fontWeight={400} color={'#5A646E'}>
By {item?.spec?.author}
By {item.spec.i18n?.[i18n.language]?.author ?? item.spec.author}
</Text>
)}
</Flex>
Expand Down Expand Up @@ -209,7 +211,7 @@ export default function AppList({ showCarousel }: { showCarousel: boolean }) {
color={'5A646E'}
fontWeight={400}
>
{item?.spec?.description}
{item.spec.i18n?.[i18n.language]?.description ?? item.spec.description}
</Text>
<Flex
mt="auto"
Expand All @@ -232,7 +234,15 @@ export default function AppList({ showCarousel }: { showCarousel: boolean }) {
</Tag>
))}
</Flex>
<Center cursor={'pointer'} onClick={(e) => goGithub(e, item?.spec?.gitRepo)}>
<Center
cursor={'pointer'}
onClick={(e) =>
goGithub(
e,
item.spec?.i18n?.[i18n.language]?.gitRepo ?? item?.spec?.gitRepo
)
}
>
<ShareIcon color={'#667085'} />
</Center>
</Flex>
Expand Down
6 changes: 3 additions & 3 deletions frontend/providers/template/src/store/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ type State = {
systemConfig: SystemConfigType | undefined;
menuKeys: string;
sideBarMenu: SideBarMenuType[];
initSystemConfig: () => Promise<SystemConfigType>;
initSystemConfig: (language?: string) => Promise<SystemConfigType>;
initSystemEnvs: () => Promise<EnvResponse>;
setSideBarMenu: (data: SideBarMenuType[]) => void;
};
Expand All @@ -27,9 +27,9 @@ export const useSystemConfigStore = create<State>()(
value: 'SideBar.Applications'
}
],
async initSystemConfig() {
async initSystemConfig(language?: string) {
const data = await getSystemConfig();
const { menuKeys } = await getTemplates();
const { menuKeys } = await getTemplates(language);

if (get().menuKeys !== menuKeys) {
const menus = menuKeys.split(',').map((i) => ({
Expand Down
2 changes: 2 additions & 0 deletions frontend/providers/template/src/types/app.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ export type TemplateType = {
required: boolean;
}
>;
locale?: string;
i18n?: Record<string, { [key: string]: string }>;
};
};

Expand Down

0 comments on commit 1f65512

Please sign in to comment.