Skip to content

Commit bea4474

Browse files
committed
fix(docs): noserialize icons
1 parent c474a8b commit bea4474

File tree

2 files changed

+68
-56
lines changed

2 files changed

+68
-56
lines changed
Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { component$, noSerialize } from '@qwik.dev/core';
2+
import { EditIcon } from '../svgs/edit-icon';
3+
import { AlertIcon } from '../svgs/alert-icon';
4+
import { ChatIcon } from '../svgs/chat-icon';
5+
import { GithubLogo } from '../svgs/github-logo';
6+
import { TwitterLogo } from '../svgs/twitter-logo';
7+
8+
type OnThisPageMoreProps = {
9+
theme: 'light' | 'dark' | 'auto';
10+
editUrl: string;
11+
};
12+
13+
export const OnThisPageMore = component$<OnThisPageMoreProps>(({ theme, editUrl }) => {
14+
const OnThisPageMore = [
15+
{
16+
href: editUrl,
17+
text: 'Edit this Page',
18+
// TODO: fix serializing the icon
19+
icon: noSerialize(EditIcon),
20+
},
21+
{
22+
href: 'https://github.com/QwikDev/qwik/issues/new/choose',
23+
text: 'Create an issue',
24+
icon: noSerialize(AlertIcon),
25+
},
26+
{
27+
href: 'https://qwik.dev/chat',
28+
text: 'Join our community',
29+
icon: noSerialize(ChatIcon),
30+
},
31+
{
32+
href: 'https://github.com/QwikDev/qwik',
33+
text: 'GitHub',
34+
icon: noSerialize(GithubLogo),
35+
},
36+
{
37+
href: 'https://twitter.com/QwikDev',
38+
text: '@QwikDev',
39+
icon: noSerialize(TwitterLogo),
40+
},
41+
];
42+
return (
43+
<>
44+
<h6>More</h6>
45+
<ul class="px-2 font-medium text-[var(--interactive-text-color)]">
46+
{OnThisPageMore.map((el, index) => {
47+
return (
48+
<li
49+
class={`${
50+
theme === 'light'
51+
? 'hover:bg-[var(--qwik-light-blue)]'
52+
: 'hover:bg-[var(--on-this-page-hover-bg-color)]'
53+
} rounded-lg`}
54+
key={`more-items-on-this-page-${index}`}
55+
>
56+
<a class="more-item" href={el.href} rel="noopener" target="_blank">
57+
{el.icon && <el.icon width={20} height={20} />}
58+
<span>{el.text}</span>
59+
</a>
60+
</li>
61+
);
62+
})}
63+
</ul>
64+
</>
65+
);
66+
});

packages/docs/src/components/on-this-page/on-this-page.tsx

Lines changed: 2 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
import { $, component$, useContext, useOnDocument, useSignal, useStyles$ } from '@qwik.dev/core';
22
import { useContent, useLocation } from '@qwik.dev/router';
33
import { GlobalStore } from '../../context';
4-
import { AlertIcon } from '../svgs/alert-icon';
5-
import { ChatIcon } from '../svgs/chat-icon';
6-
import { EditIcon } from '../svgs/edit-icon';
7-
import { GithubLogo } from '../svgs/github-logo';
8-
import { TwitterLogo } from '../svgs/twitter-logo';
94
import styles from './on-this-page.css?inline';
5+
import { OnThisPageMore } from './on-this-page-more';
106

117
const QWIK_GROUP = [
128
'components',
@@ -117,39 +113,9 @@ export const OnThisPage = component$(() => {
117113
const contentHeadings = headings?.filter((h) => h.level <= 3) || [];
118114

119115
const { url } = useLocation();
120-
121116
const githubEditRoute = makeEditPageUrl(url.pathname);
122-
123117
const editUrl = `https://github.com/QwikDev/qwik/edit/main/packages/docs/src/routes/${githubEditRoute}/index.mdx`;
124118

125-
const OnThisPageMore = [
126-
{
127-
href: editUrl,
128-
text: 'Edit this Page',
129-
icon: EditIcon,
130-
},
131-
{
132-
href: 'https://github.com/QwikDev/qwik/issues/new/choose',
133-
text: 'Create an issue',
134-
icon: AlertIcon,
135-
},
136-
{
137-
href: 'https://qwik.dev/chat',
138-
text: 'Join our community',
139-
icon: ChatIcon,
140-
},
141-
{
142-
href: 'https://github.com/QwikDev/qwik',
143-
text: 'GitHub',
144-
icon: GithubLogo,
145-
},
146-
{
147-
href: 'https://twitter.com/QwikDev',
148-
text: '@QwikDev',
149-
icon: TwitterLogo,
150-
},
151-
];
152-
153119
const useActiveItem = (itemIds: string[]) => {
154120
const activeId = useSignal<string | null>(null);
155121
useOnDocument(
@@ -214,29 +180,9 @@ export const OnThisPage = component$(() => {
214180
</li>
215181
))}
216182
</ul>
183+
<OnThisPageMore theme={theme.theme} editUrl={editUrl} />
217184
</>
218185
) : null}
219-
220-
<h6>More</h6>
221-
<ul class="px-2 font-medium text-[var(--interactive-text-color)]">
222-
{OnThisPageMore.map((el, index) => {
223-
return (
224-
<li
225-
class={`${
226-
theme.theme === 'light'
227-
? 'hover:bg-[var(--qwik-light-blue)]'
228-
: 'hover:bg-[var(--on-this-page-hover-bg-color)]'
229-
} rounded-lg`}
230-
key={`more-items-on-this-page-${index}`}
231-
>
232-
<a class="more-item" href={el.href} rel="noopener" target="_blank">
233-
<el.icon width={20} height={20} />
234-
<span>{el.text}</span>
235-
</a>
236-
</li>
237-
);
238-
})}
239-
</ul>
240186
</aside>
241187
);
242188
});

0 commit comments

Comments
 (0)