Skip to content

Commit

Permalink
Add Credits component and refactor DocsLayout
Browse files Browse the repository at this point in the history
  • Loading branch information
fabian-hiller committed Mar 5, 2024
1 parent ce05bca commit f85c152
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 103 deletions.
108 changes: 108 additions & 0 deletions website/src/components/Credits.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
import { component$ } from '@builder.io/qwik';
import { useDocumentHead } from '@builder.io/qwik-city';
import {
AlgoliaLogo,
BuilderLogo,
HdmLogo,
NetlifyLogo,
PaceLogo,
} from '~/logos';

/**
* Displays the contributors of the current page as well as partners and
* sponsors of the project.
*/
export const Credits = component$(() => {
const head = useDocumentHead<{ contributors: string[] }>();
return (
<footer class="mx-8 mt-12 border-t-2 pt-2 md:mt-16 md:pt-4 lg:mx-10 lg:mt-20 lg:pt-6 dark:border-slate-800">
{head.frontmatter.contributors.length > 0 && (
<>
<h3 class="mt-10 text-lg font-medium text-slate-900 md:mt-12 md:text-xl lg:mt-14 lg:text-2xl dark:text-slate-200">
Contributors
</h3>
<p class="mt-3 leading-loose md:mt-4 md:text-lg md:leading-loose lg:mt-5 lg:text-xl lg:leading-loose">
Thanks to all the contributors who helped make this page better!
</p>
<ul class="mt-4 flex flex-wrap gap-2 md:mt-5 lg:mt-6 lg:gap-3">
{head.frontmatter.contributors.map((contributor) => (
<li key={contributor}>
<a
href={`https://github.com/${contributor}`}
target="_blank"
rel="noreferrer"
>
<img
width="88"
height="88"
loading="lazy"
src={`https://github.com/${contributor}.png?size=88`}
alt={`GitHub profile picture of ${contributor}`}
class="w-9 rounded-full md:w-10 lg:w-11"
/>
</a>
</li>
))}
</ul>
</>
)}

<h3 class="mt-10 text-lg font-medium text-slate-900 md:mt-12 md:text-xl lg:mt-14 lg:text-2xl dark:text-slate-200">
Partners
</h3>
<p class="mt-3 leading-loose md:mt-4 md:text-lg md:leading-loose lg:mt-5 lg:text-xl lg:leading-loose">
Thanks to our partners who support the project ideally and financially.
</p>
<ul class="mt-4 flex flex-wrap gap-x-6 gap-y-3 md:mt-5 md:gap-x-8 md:gap-y-4 lg:mt-6 lg:gap-x-10 lg:gap-y-5">
{[
{ Logo: PaceLogo, href: 'https://www.pace.edu' },
{ Logo: BuilderLogo, href: 'https://www.builder.io' },
{ Logo: HdmLogo, href: 'https://www.hdm-stuttgart.de' },
{ Logo: NetlifyLogo, href: 'https://www.netlify.com' },
{ Logo: AlgoliaLogo, href: 'https://www.algolia.com' },
].map(({ Logo, href }) => (
<li key={href}>
<a href={href} target="_blank" rel="noreferrer">
<Logo class="h-9 md:h-11 lg:h-12" />
</a>
</li>
))}
</ul>

<h3 class="mt-10 text-lg font-medium text-slate-900 md:mt-12 md:text-xl lg:mt-14 lg:text-2xl dark:text-slate-200">
Sponsors
</h3>
<p class="mt-3 leading-loose md:mt-4 md:text-lg md:leading-loose lg:mt-5 lg:text-xl lg:leading-loose">
Thanks to our GitHub sponsors who support the project financially.
</p>
<ul class="mt-4 flex flex-wrap gap-2 md:mt-5 lg:mt-6 lg:gap-3">
{[
'dailydotdev',
'ivan-mihalic',
'KATT',
'osdiab',
'Thanaen',
'hyunbinseo',
'caegdeveloper',
].map((sponsor) => (
<li key={sponsor}>
<a
href={`https://github.com/${sponsor}`}
target="_blank"
rel="noreferrer"
>
<img
width="88"
height="88"
loading="lazy"
src={`https://github.com/${sponsor}.png?size=88`}
alt={`GitHub profile picture of ${sponsor}`}
class="w-9 rounded-full md:w-10 lg:w-11"
/>
</a>
</li>
))}
</ul>
</footer>
);
});
105 changes: 2 additions & 103 deletions website/src/components/DocsLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,8 @@ import {
useLocation,
} from '@builder.io/qwik-city';
import { ArrowLeftIcon, ArrowRightIcon, GitHubIcon, PenIcon } from '~/icons';
import {
AlgoliaLogo,
BuilderLogo,
HdmLogo,
NetlifyLogo,
PaceLogo,
} from '~/logos';
import '../styles/pace.css';
import { Credits } from './Credits';
import { IconButton } from './IconButton';
import { Navigation } from './Navigation';
import { SideBar, useSideBarToggle } from './SideBar';
Expand Down Expand Up @@ -58,12 +52,6 @@ export const DocsLayout = component$(() => {
() => navItems.value[navIndex.value + 1]
);

// Compute contributors
const contributors = useComputed$<string[]>(
// eslint-disable-next-line qwik/valid-lexical-scope
() => documentHead.frontmatter.contributors || []
);

return (
<div class="flex w-full max-w-screen-xl flex-1 flex-col-reverse self-center lg:flex-row">
{/* Side bar navigation */}
Expand Down Expand Up @@ -131,96 +119,7 @@ export const DocsLayout = component$(() => {
)}

{/* Credits */}
<footer class="mx-8 mt-12 border-t-2 pt-2 md:mt-16 md:pt-4 lg:mx-10 lg:mt-20 lg:pt-6 dark:border-slate-800">
{contributors.value.length > 0 && (
<>
<h3 class="mt-10 text-lg font-medium text-slate-900 md:mt-12 md:text-xl lg:mt-14 lg:text-2xl dark:text-slate-200">
Contributors
</h3>
<p class="mt-3 leading-loose md:mt-4 md:text-lg md:leading-loose lg:mt-5 lg:text-xl lg:leading-loose">
Thanks to all the contributors who helped make this page better!
</p>
<ul class="mt-4 flex flex-wrap gap-2 md:mt-5 lg:mt-6 lg:gap-3">
{contributors.value.map((contributor) => (
<li key={contributor}>
<a
href={`https://github.com/${contributor}`}
target="_blank"
rel="noreferrer"
>
<img
width="88"
height="88"
loading="lazy"
src={`https://github.com/${contributor}.png?size=88`}
alt={`GitHub profile picture of ${contributor}`}
class="w-9 rounded-full md:w-10 lg:w-11"
/>
</a>
</li>
))}
</ul>
</>
)}

<h3 class="mt-10 text-lg font-medium text-slate-900 md:mt-12 md:text-xl lg:mt-14 lg:text-2xl dark:text-slate-200">
Partners
</h3>
<p class="mt-3 leading-loose md:mt-4 md:text-lg md:leading-loose lg:mt-5 lg:text-xl lg:leading-loose">
Thanks to our partners who support the project ideally and
financially.
</p>
<ul class="mt-4 flex flex-wrap gap-x-6 gap-y-3 md:mt-5 md:gap-x-8 md:gap-y-4 lg:mt-6 lg:gap-x-10 lg:gap-y-5">
{[
{ Logo: PaceLogo, href: 'https://www.pace.edu' },
{ Logo: BuilderLogo, href: 'https://www.builder.io' },
{ Logo: HdmLogo, href: 'https://www.hdm-stuttgart.de' },
{ Logo: NetlifyLogo, href: 'https://www.netlify.com' },
{ Logo: AlgoliaLogo, href: 'https://www.algolia.com' },
].map(({ Logo, href }) => (
<li key={href}>
<a href={href} target="_blank" rel="noreferrer">
<Logo class="h-9 md:h-11 lg:h-12" />
</a>
</li>
))}
</ul>

<h3 class="mt-10 text-lg font-medium text-slate-900 md:mt-12 md:text-xl lg:mt-14 lg:text-2xl dark:text-slate-200">
Sponsors
</h3>
<p class="mt-3 leading-loose md:mt-4 md:text-lg md:leading-loose lg:mt-5 lg:text-xl lg:leading-loose">
Thanks to our GitHub sponsors who support the project financially.
</p>
<ul class="mt-4 flex flex-wrap gap-2 md:mt-5 lg:mt-6 lg:gap-3">
{[
'dailydotdev',
'ivan-mihalic',
'KATT',
'osdiab',
'Thanaen',
'hyunbinseo',
'caegdeveloper',
].map((sponsor) => (
<li key={sponsor}>
<a
href={`https://github.com/${sponsor}`}
target="_blank"
rel="noreferrer"
>
<img
width="88"
height="88"
loading="lazy"
src={`https://github.com/${sponsor}.png?size=88`}
alt={`GitHub profile picture of ${sponsor}`}
class="w-9 rounded-full md:w-10 lg:w-11"
/>
</a>
</li>
))}
</ul>
</footer>
<Credits />
</main>
</div>
);
Expand Down
1 change: 1 addition & 0 deletions website/src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ export * from './ActionButton';
export * from './ApiList';
export * from './ButtonGroup';
export * from './CodeEditor';
export * from './Credits';
export * from './DocSearch';
export * from './DocsLayout';
export * from './Expandable';
Expand Down

0 comments on commit f85c152

Please sign in to comment.