Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

icons wip #17

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

icons wip #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions app/_components/header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { Logo } from '../logo'
import { ThemeSettingsFragment } from '../theme-provider/server'

import s from './header.module.scss'
import { Icon } from '../icon'

export const Header = () => {
return (
Expand Down Expand Up @@ -78,6 +79,7 @@ export const Header = () => {
<Box ml="3">
<DialogTriggerMobile />
</Box>
<Icon name={'accessibility-icon'} />
</Flex>

<TopRightNav
Expand Down
130 changes: 130 additions & 0 deletions app/_components/icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
/* eslint-disable @next/next/no-img-element */
import { pascalCase } from 'change-case'
import * as RadixIcons from '@radix-ui/react-icons'

type StandardProps = Partial<{
width: string
height: string
className: string
alt: string
}>

const iconRecord: Record<
string,
| {
type: 'radix-icon'
value: string
}
| {
type: 'lucide-icon'
value: string
}
| {
type: 'inline'
value: (_props: StandardProps) => JSX.Element | Promise<JSX.Element>
}
| {
type: 'url'
value: string
}
| {
type: 'alias'
value: string
}
> = {
next: {
type: 'inline',
value: (props) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 180 180"
width="18"
{...props}
>
<mask
height="180"
id=":r8:mask0_408_134"
maskUnits="userSpaceOnUse"
width="180"
x="0"
y="0"
style={{ maskType: 'alpha' }}
>
<circle cx="90" cy="90" fill="black" r="90" />
</mask>
<g mask="url(#:r8:mask0_408_134)">
<circle cx="90" cy="90" data-circle="true" fill="black" r="90" />
<path
d="M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.845C143.333 162.614 146.509 160.165 149.508 157.52Z"
fill="url(#:r8:paint0_linear_408_134)"
/>
<rect
fill="url(#:r8:paint1_linear_408_134)"
height="72"
width="12"
x="115"
y="54"
/>
</g>
<defs>
<linearGradient
gradientUnits="userSpaceOnUse"
id=":r8:paint0_linear_408_134"
x1="109"
x2="144.5"
y1="116.5"
y2="160.5"
>
<stop stopColor="white" />
<stop offset="1" stopColor="white" stopOpacity="0" />
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
id=":r8:paint1_linear_408_134"
x1="121"
x2="120.799"
y1="54"
y2="106.875"
>
<stop stopColor="white" />
<stop offset="1" stopColor="white" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
),
},
nextjs: {
type: 'alias',
value: 'next',
},
}

export async function Icon({
name,
...props
}: {
name: string
} & StandardProps): Promise<JSX.Element> {
const icon = iconRecord[name]
if (!icon) return <></>

switch (icon?.type) {
case 'inline':
return icon.value(props)
case 'alias':
return <Icon name={icon.value} {...props} />
case 'radix-icon': {
const pascal = pascalCase(name)
// @ts-ignore
const Comp = RadixIcons[pascal]

console.log('pascal', pascal)
return <Comp {...props} />
}
case 'url':
// eslint-disable-next-line jsx-a11y/alt-text
return <img src={icon.value} {...props} />
default:
return <></>
}
}
Empty file added app/_components/sidebar/client.tsx
View file
Open in desktop
Empty file.
4 changes: 4 additions & 0 deletions app/_components/sidebar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
VisuallyHidden,
} from '@radix-ui/themes'
import { ChevronRightIcon } from '@radix-ui/react-icons'
// import { Icon } from '../icon'

import s from './sidebar.module.scss'

Expand Down Expand Up @@ -139,6 +140,9 @@ export const Sidebar = ({ data, level, category }: SidebarProps) => {
size="3"
onClick={toggleSidebar}
>
{/* {activeSidebarItem?.sidebarIcon && (
<Icon name={activeSidebarItem.sidebarIcon} />
)} */}
<Text weight="medium">
{activeSidebarItem?._title ?? 'Untitled article'}
</Text>
Expand Down
8 changes: 6 additions & 2 deletions basehub-helpers/fragments.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@ import { fragmentOn, fragmentOnRecursiveCollection } from '@/.basehub'
import { AccordionGroupFragment } from '@/app/_components/article/accordion'
import { CalloutFragment } from '@/app/_components/article/callout'
import { CardsGridFragment } from '@/app/_components/article/cards-grid'
import { CodeGroupFragment, CodeSnippetFragmentRecursive } from '@/app/_components/article/code-snippet'
import {
CodeGroupFragment,
CodeSnippetFragmentRecursive,
} from '@/app/_components/article/code-snippet'
import { StepperFragment } from '@/app/_components/article/stepper'

/* -------------------------------------------------------------------------------------------------
Expand All @@ -18,6 +21,7 @@ export const ArticleMetaFragment = fragmentOn('ArticleComponent', {
},
excerpt: true,
titleSidebarOverride: true,
sidebarIcon: true,
body: {
__typename: true,
},
Expand All @@ -41,7 +45,6 @@ export const ArticleBodyFragment = fragmentOn('BodyRichText', {

export type ArticleBodyFragment = fragmentOn.infer<typeof ArticleBodyFragment>


export const ArticleFragment = fragmentOn('ArticleComponent', {
...ArticleMetaFragment,
children: {
Expand Down Expand Up @@ -113,6 +116,7 @@ const SidebarArticleFragment = fragmentOn('ArticleComponent', {
_sys: { lastModifiedAt: true },
excerpt: true,
titleSidebarOverride: true,
sidebarIcon: true,
body: { __typename: true },
})

Expand Down
9 changes: 5 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,22 +17,23 @@
"@radix-ui/themes": "^3.0.2",
"@shikijs/transformers": "^1.3.0",
"basehub": "4.0.16-canary.16",
"change-case": "5.4.4",
"clsx": "^2.1.1",
"geist": "^1.3.0",
"hast-util-to-jsx-runtime": "^2.3.0",
"next": "14.2.3",
"next-themes": "^0.3.0",
"react": "^18",
"react-dom": "^18",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-medium-image-zoom": "^5.2.0",
"sass": "^1.74.1",
"sharp": "^0.33.3",
"shiki": "^1.3.0"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"@types/react": "^18.3.2",
"@types/react-dom": "^18.3.0",
"eslint": "^8",
"eslint-config-next": "14.1.4",
"postcss": "^8",
Expand Down
Loading