-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add custom icon arxiv; NamedIcon that selects built-in or local icons…
… based on name
- Loading branch information
1 parent
8a4f679
commit 46018ad
Showing
8 changed files
with
2,532 additions
and
2,042 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| --- | ||
| import { LocalIcons } from './LocalIcons'; | ||
| interface Props { | ||
| name: keyof typeof LocalIcons; | ||
| label?: string; | ||
| color?: string; | ||
| size?: string; | ||
| class?: string; | ||
| } | ||
| const { name, label, size = '1em', color } = Astro.props; | ||
| const a11yAttrs = label ? ({ 'aria-label': label } as const) : ({ 'aria-hidden': 'true' } as const); | ||
| --- | ||
|
|
||
| <svg | ||
| {...a11yAttrs} | ||
| class={Astro.props.class} | ||
| width="16" | ||
| height="16" | ||
| viewBox="0 0 24 24" | ||
| fill="currentColor" | ||
| set:html={LocalIcons[name]} | ||
| /> | ||
|
|
||
| <style define:vars={{ 'sl-icon-color': color, 'sl-icon-size': size }}> | ||
| svg { | ||
| color: var(--sl-icon-color); | ||
| font-size: var(--sl-icon-size, 1em); | ||
| width: 1em; | ||
| height: 1em; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| --- | ||
| import type { HTMLAttributes } from 'astro/types'; | ||
| import NamedIcon, { type IconNames } from './NamedIcon.astro'; | ||
| interface Props extends Omit<HTMLAttributes<'a'>, 'href'> { | ||
| href: string | URL; | ||
| icon?: IconNames | undefined; | ||
| iconPlacement?: 'start' | 'end' | undefined; | ||
| variant?: 'primary' | 'secondary' | 'minimal'; | ||
| } | ||
| const { | ||
| class: className, | ||
| icon, | ||
| iconPlacement = 'start', | ||
| variant = 'primary', | ||
| ...attrs | ||
| } = Astro.props; | ||
| --- | ||
|
|
||
| <a class:list={['gr-link-span not-content', variant, className]} {...attrs}> | ||
|
|
||
| {icon && iconPlacement === 'start' && <NamedIcon size="2.0rem" name={icon}/>} | ||
| <slot /> | ||
| {icon && iconPlacement === 'end' && <NamedIcon size="2.0rem" name={icon}/>} | ||
| </a> | ||
|
|
||
| <style> | ||
| .gr-link-span { | ||
| align-items: center; | ||
| border: 1px solid transparent; | ||
| display: inline-flex; | ||
| font-size: var(--sl-text-sm); | ||
| gap: 0.5em; | ||
| line-height: 1.1875; | ||
| outline-offset: 0.25rem; | ||
| padding: 0.4375rem 1.125rem; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .gr-link-span.primary { | ||
| background: var(--sl-color-text-accent); | ||
| border-color: var(--sl-color-text-accent); | ||
| color: var(--sl-color-black); | ||
| } | ||
| .gr-link-span.primary:hover { | ||
| color: var(--sl-color-black); | ||
| } | ||
| .gr-link-span.secondary { | ||
| border-color: inherit; | ||
| color: var(--sl-color-white); | ||
| } | ||
| .gr-link-span.minimal { | ||
| color: var(--sl-color-white); | ||
| padding-inline: 0; | ||
| } | ||
|
|
||
| .gr-link-span :global(svg) { | ||
| flex-shrink: 0; | ||
| } | ||
|
|
||
| @media (min-width: 50rem) { | ||
| .gr-link-span { | ||
| font-size: var(--sl-text-base); | ||
| padding: 0.9375rem 1.25rem; | ||
| } | ||
| } | ||
|
|
||
| :global(.sl-markdown-content) .gr-link-span { | ||
| margin-inline-end: 1rem; | ||
| } | ||
| :global(.sl-markdown-content) .gr-link-span:not(:where(p *)) { | ||
| margin-block: 1rem; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
|
|
||
| export const LocalIcons = { | ||
| 'arxiv': | ||
| `<path d="M3.8423 0a1.0037 1.0037 0 0 0 -0.922 0.6078c-0.1536 0.3687 -0.0438 0.6275 0.2938 1.1113l6.9185 8.3597 -1.0223 1.1058a1.0393 1.0393 0 0 0 0.003 1.4229l1.2292 1.3135 -5.4391 6.4444c-0.2803 0.299 -0.4538 0.823 -0.2971 1.1986a1.0253 1.0253 0 0 0 0.9585 0.635 0.9133 0.9133 0 0 0 0.6891 -0.3405l5.783 -6.126 7.4902 8.0051a0.8527 0.8527 0 0 0 0.6835 0.2597 0.9575 0.9575 0 0 0 0.8777 -0.6138c0.1577 -0.377 -0.017 -0.7502 -0.306 -1.1407l-7.0518 -8.3418 1.0632 -1.13a0.9626 0.9626 0 0 0 0.0089 -1.3165L4.6336 0.4639s-0.3733 -0.4535 -0.768 -0.463zm0 0.272h0.0166c0.2179 0.0052 0.4874 0.2715 0.5644 0.3639l0.005 0.006 0.0052 0.0055 10.169 10.9905a0.6915 0.6915 0 0 1 -0.0072 0.945l-1.0666 1.133 -1.4982 -1.7724 -8.5994 -10.39c-0.3286 -0.472 -0.352 -0.6183 -0.2592 -0.841a0.7307 0.7307 0 0 1 0.6704 -0.4401Zm14.341 1.5701a0.877 0.877 0 0 0 -0.6554 0.2418l-5.6962 6.1584 1.6944 1.8319 5.3089 -6.5138c0.3251 -0.4335 0.479 -0.6603 0.3247 -1.0292a1.1205 1.1205 0 0 0 -0.9763 -0.689zm-7.6557 12.2823 1.3186 1.4135 -5.7864 6.1295a0.6494 0.6494 0 0 1 -0.4959 0.26 0.7516 0.7516 0 0 1 -0.706 -0.4669c-0.1119 -0.2682 0.0359 -0.6864 0.2442 -0.9083l0.0051 -0.0055 0.0047 -0.0055z" fill="#000000" stroke-width="1"></path>` | ||
| }; | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| --- | ||
| import { Icon as SlIcon } from '@astrojs/starlight/components' | ||
| import GrIcon from './GrIcon.astro' | ||
| import { LocalIcons } from './LocalIcons'; | ||
| const localIconNames = Object.keys(LocalIcons) | ||
| type IconParams = Parameters<typeof SlIcon> | ||
| type SlIconNames = IconParams[0]['name'] | ||
| type LocalIconNames = keyof typeof LocalIcons | ||
| export type IconNames = LocalIconNames | SlIconNames | ||
| interface Props { | ||
| name: IconNames; | ||
| label?: string; | ||
| color?: string; | ||
| size?: string; | ||
| class?: string; | ||
| } | ||
| const { name, label, size = '1em', color } = Astro.props; | ||
| const a11yAttrs = label ? ({ 'aria-label': label } as const) : ({ 'aria-hidden': 'true' } as const); | ||
| --- | ||
|
|
||
| {localIconNames.includes(name) ? (<GrIcon name={name as LocalIconNames} />) : (<SlIcon name={name as SlIconNames}/>)} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters