Skip to content

Commit 4d337df

Browse files
akyriakoakyriako
authored
added category specific icons, revamped the layout #289 (#291)
1 parent c0b5e9b commit 4d337df

File tree

4 files changed

+96
-89
lines changed

4 files changed

+96
-89
lines changed

‎docs/best-practices/containers/cloud-container-engine/backup-kubernetes-objects.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ tags: [cce, migration, velero, obs]
66

77
# Backing Up Kubernetes Objects of other Clusters
88

9-
1. To back up a WordPress application with PV data, add an `annotation`
10-
to the corresponding pod. If you do not need to back up the PV data, skip this step.
9+
1. To back up a WordPress application with PV data, add an `annotation` to the corresponding pod. If you do not need to back up the PV data, skip this step.
1110

1211
```
1312
# kubectl -n YOUR_POD_NAMESPACE annotate pod/YOUR_POD_NAME backup.velero.io/backup-volumes=YOUR_VOLUME_NAME_1,YOUR_VOLUME_NAME_2,...

‎docs/best-practices/containers/cloud-container-engine/prepare-cce-for-external-workloads.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
id: prepare-cce-for-external-workloads
33
title: Prepare CCE to Expose Workloads
4-
tags: [cce, elb, externaldns, dns, nginx, acme]
4+
tags: [cce, elb, externaldns, dns, nginx, acme, ingress, cert-manager]
55
---
66

77
# Prepare CCE to Expose Workloads

‎src/theme/DocTagDocListPage/index.tsx‎

Lines changed: 47 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import clsx from 'clsx';
1+
// index.tsx
2+
23
import Link from '@docusaurus/Link';
34
import {
45
PageMetadata,
@@ -10,10 +11,10 @@ import Translate, {translate} from '@docusaurus/Translate';
1011
import SearchMetadata from '@theme/SearchMetadata';
1112
import type {Props} from '@theme/DocTagDocListPage';
1213
import Heading from '@theme/Heading';
14+
import {File, FlaskConical, Factory, FileCheck} from 'lucide-react';
1315
import styles from './styles.module.css';
14-
import useBaseUrl from '@docusaurus/useBaseUrl';
1516

16-
// Very simple pluralization: probably good enough for now
17+
// Custom pluralization hook
1718
function useNDocsTaggedPlural() {
1819
const {selectMessage} = usePluralForm();
1920
return (count: number) =>
@@ -22,63 +23,58 @@ function useNDocsTaggedPlural() {
2223
translate(
2324
{
2425
id: 'theme.docs.tagDocListPageTitle.nDocsTagged',
25-
description:
26-
'Pluralized label for "{count} docs tagged". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',
26+
description: 'Pluralized label for "{count} docs tagged"',
2727
message: 'We found one article tagged|We found {count} articles tagged',
2828
},
2929
{count},
3030
),
3131
);
3232
}
3333

34+
// Compose the page title
3435
function usePageTitle(props: Props): string {
35-
const nDocsTaggedPlural = useNDocsTaggedPlural();
36+
const nDocsTagged = useNDocsTaggedPlural()(props.tag.count);
3637
return translate(
3738
{
3839
id: 'theme.docs.tagDocListPageTitle',
39-
description: 'The title of the page for a docs tag',
40+
description: 'Title of the docs tag list page',
4041
message: '{nDocsTagged} with "{tagName}"',
4142
},
42-
{nDocsTagged: nDocsTaggedPlural(props.tag.count), tagName: props.tag.label},
43+
{nDocsTagged, tagName: props.tag.label},
4344
);
4445
}
4546

47+
// Single document item
4648
function DocItem({doc}: {doc: Props['tag']['items'][number]}): JSX.Element {
47-
return (
48-
<article className="margin-vert--lg">
49-
<div className={clsx("row row--no-gutters", styles.item)}>
50-
51-
{/* Image Content */}
52-
<div className="col col--1" aria-hidden="true">
53-
<img
54-
src={doc.image || useBaseUrl("img/open-telekom-cloud-social-card.png")}
55-
alt={doc.title}
56-
className={styles.item__image}
57-
/>
58-
</div>
49+
const url = doc.permalink;
50+
const IconComponent = url.includes('best-practices')
51+
? FileCheck
52+
: url.includes('by-industry')
53+
? Factory
54+
: url.includes('blueprints')
55+
? FlaskConical
56+
: File;
5957

60-
{/* Title content */}
61-
<div className={clsx("col col--11", styles.item__inner)}>
62-
<div style={{ paddingTop: '4px', paddingLeft: '15px' }}>
63-
<Link to={doc.permalink}>
64-
<Heading as="h2">{doc.title}</Heading>
65-
</Link>
66-
{/* {doc.description && <p className={styles.item__description}>{doc.description}</p>} */}
67-
</div>
58+
return (
59+
<article className={styles.article}>
60+
<div className={styles.itemRow}>
61+
<div className={styles.icon}>
62+
<IconComponent size={24} />
6863
</div>
69-
70-
{/* Description content */}
71-
<div className={clsx("col col--12", styles.item__inner)}>
72-
<div>
73-
{doc.description && <p className={styles.item__description}>{doc.description}</p>}
74-
</div>
64+
<div className={styles.content}>
65+
<Link to={doc.permalink} className={styles.title}>
66+
{doc.title}
67+
</Link>
68+
{doc.description && (
69+
<p className={styles.description}>{doc.description}</p>
70+
)}
7571
</div>
76-
7772
</div>
7873
</article>
7974
);
8075
}
8176

77+
// Metadata component
8278
function DocTagDocListPageMetadata({
8379
title,
8480
tag,
@@ -91,22 +87,21 @@ function DocTagDocListPageMetadata({
9187
);
9288
}
9389

90+
// Main content component
9491
function DocTagDocListPageContent({
9592
tag,
9693
title,
9794
}: Props & {title: string}): JSX.Element {
9895
return (
9996
<HtmlClassNameProvider
100-
className={clsx(ThemeClassNames.page.docsTagDocListPage)}>
101-
<div className="container margin-vert--lg">
102-
<div className="row">
103-
<main className="col col--8 col--offset-2">
104-
{tag.unlisted && <Unlisted />}
105-
<header className="margin-bottom--xl">
106-
<Heading as="h1">{title}</Heading>
107-
{tag.description && <p>{tag.description}</p>}
108-
109-
<scale-button size="small" variant="secondary" href={tag.allTagsPath}>
97+
className={ThemeClassNames.page.docsTagDocListPage}
98+
>
99+
<div className={styles.page}>
100+
{tag.unlisted && <Unlisted />}
101+
<header className={styles.header}>
102+
<Heading as="h1">{title}</Heading>
103+
{tag.description && <p>{tag.description}</p>}
104+
<scale-button size="small" variant="secondary" href={tag.allTagsPath}>
110105
<scale-icon-action-backward></scale-icon-action-backward>
111106
<Translate
112107
id="theme.tags.tagsPageLink"
@@ -115,19 +110,18 @@ function DocTagDocListPageContent({
115110
</Translate>
116111
</scale-button>
117112

118-
</header>
119-
<section className="margin-vert--lg">
120-
{tag.items.map((doc) => (
121-
<DocItem key={doc.id} doc={doc} />
122-
))}
123-
</section>
124-
</main>
125-
</div>
113+
</header>
114+
<section>
115+
{tag.items.map((doc) => (
116+
<DocItem key={doc.id} doc={doc} />
117+
))}
118+
</section>
126119
</div>
127120
</HtmlClassNameProvider>
128121
);
129122
}
130123

124+
// Exported page component
131125
export default function DocTagDocListPage(props: Props): JSX.Element {
132126
const title = usePageTitle(props);
133127
return (

‎src/theme/DocTagDocListPage/styles.module.css‎

Lines changed: 47 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,64 @@
1+
/* styles.module.css */
12

2-
.item {
3-
/* box-shadow: 0 1px 3px gray;
4-
background-color: var(--ifm-background-color);
5-
border-radius: 0.5rem;
6-
color: black;
7-
overflow: hidden; */
3+
.article {
4+
/* border-bottom: 1px solid #e0e0e0; */
5+
padding: 16px 0;
86
}
97

10-
html[data-theme='dark'] .item {
11-
/* box-shadow: 0px 1px 3px var(--ifm-color-primary);
12-
background-color: var(--ifm-background-color);
13-
border-radius: 0.5rem;
14-
color: white;
15-
overflow: hidden; */
8+
.itemRow {
9+
display: flex;
10+
align-items: flex-start;
1611
}
1712

18-
.item__inner {
19-
align-items: center;
20-
display: flex;
13+
.icon {
14+
margin-right: 16px;
15+
margin-top: 6px
16+
}
17+
18+
.content {
19+
flex: 1;
2120
}
2221

23-
.item__inner div {
24-
/* padding: 1.5rem; */
25-
/* padding-top: 5px; */
26-
/* padding-left: -25px; */
22+
.title {
23+
font-size: 1.20rem;
24+
font-weight: 600;
25+
color: var(--text-base, var(--ifm-font-color-base));
26+
text-decoration: none;
2727
}
2828

29-
.item__title {
30-
display: block;
31-
font-size: 1.25rem;
29+
.title:hover {
30+
color: #e20074;
3231
}
3332

34-
.item__image {
35-
width: 100%;
36-
max-width: 80px; /* Adjust as needed */
37-
height: auto;
38-
border-radius: 8px; /* Optional: Rounded corners */
33+
html[data-theme='dark'] .title:hover {
34+
color: #e20074;
3935
}
4036

41-
.item__description {
37+
html[data-theme='dark'] .title {
38+
color: var(--ifm-font-color-base);
39+
}
40+
41+
.description {
42+
margin-top: 0px;
43+
font-size: 0.8rem;
44+
line-height: 1.3rem; /* match your theme’s line-height */
4245
display: -webkit-box;
43-
-webkit-line-clamp: 3; /* Limit to 3 lines */
4446
-webkit-box-orient: vertical;
45-
line-clamp: 3;
47+
-webkit-line-clamp: 3;
4648
overflow: hidden;
47-
text-overflow: ellipsis; /* Add '...' at the end */
48-
max-height: 4.5em; /* Adjust based on your line height */
49-
line-height: 1.5em; /* Ensures proper line spacing */
49+
word-break: break-word;
50+
}
51+
52+
.page {
53+
max-width: 900px;
54+
margin: 0 auto;
55+
padding: 2rem 1rem;
56+
}
57+
58+
.header {
59+
margin-bottom: 2rem;
60+
}
61+
62+
.viewAll {
63+
5064
}

0 commit comments

Comments
 (0)