diff --git a/package-lock.json b/package-lock.json index b102eea..86badbe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "react-github-permalink", - "version": "1.11.0", + "version": "1.11.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "react-github-permalink", - "version": "1.11.0", + "version": "1.11.1", "license": "MIT", "dependencies": { "react-responsive": "^10.0.0", diff --git a/src/library/GithubPermalink/GithubPermalink.stories.tsx b/src/library/GithubPermalink/GithubPermalink.stories.tsx index 3696dc2..9f52206 100644 --- a/src/library/GithubPermalink/GithubPermalink.stories.tsx +++ b/src/library/GithubPermalink/GithubPermalink.stories.tsx @@ -117,3 +117,33 @@ export const SingleLine: Story = { ), }; + +export const InitiallyCollapsed: Story = { + render: () => ( +
+

This permalink starts collapsed (minimal variant):

+ +

This permalink starts expanded (default):

+ +
+ ), +}; + +export const GlobalConfigCollapsed: Story = { + render: () => ( +
+

Using global configuration to set default to collapsed:

+ + +

Second permalink also collapsed by default:

+ + +
+ ), +}; diff --git a/src/library/GithubPermalink/GithubPermalink.tsx b/src/library/GithubPermalink/GithubPermalink.tsx index 351d46b..64f0bb2 100644 --- a/src/library/GithubPermalink/GithubPermalink.tsx +++ b/src/library/GithubPermalink/GithubPermalink.tsx @@ -9,7 +9,7 @@ export function GithubPermalink(props: GithubPermalinkProps) { const { permalink } = props; const [data, setData] = useState(null as null | GithubPermalinkDataResponse) - const { getDataFn, githubToken, onError } = useContext(GithubPermalinkContext); + const { getDataFn, githubToken, onError, initiallyExpandGithubPermalinks } = useContext(GithubPermalinkContext); const [isLoading, setIsLoading] = useState(true); useEffect(() => { @@ -27,7 +27,10 @@ export function GithubPermalink(props: GithubPermalinkProps) { } - return + return } diff --git a/src/library/GithubPermalink/GithubPermalinkBase.tsx b/src/library/GithubPermalink/GithubPermalinkBase.tsx index 7036ebc..051519a 100644 --- a/src/library/GithubPermalink/GithubPermalinkBase.tsx +++ b/src/library/GithubPermalink/GithubPermalinkBase.tsx @@ -1,12 +1,13 @@ import { GithubPermalinkDataResponse, } from "../config/GithubPermalinkContext"; import { ErrorMessages } from "../ErrorMessages/ErrorMessages"; import { GithubSvg } from "../GithubSvg/GithubSvg"; -import { PropsWithChildren } from "react"; +import { PropsWithChildren, useState } from "react"; import { SyntaxHighlight } from "../SyntaxHighlight/SyntaxHighlight"; import { formatForLineExclusions } from "./formatLineExclusions"; import { CopyButton } from "../common/CopyButton/CopyButton"; import { getLanguageFromPath } from "../utils/getLanguageFromPath"; import { AvailableLanguagesPrism } from "../SyntaxHighlight/availableLanguagesPrism"; +import { ChevronDownSvg, ChevronRightSvg } from "../images/ChevronSvg"; export type GithubPermalinkBaseProps = { className?: string; @@ -15,6 +16,12 @@ export type GithubPermalinkBaseProps = { excludeText?: string; data: GithubPermalinkDataResponse; language?: AvailableLanguagesPrism; + /** + * Whether the permalink should be initially expanded to show the full header. + * When false, only the code block is shown with a subtle GitHub icon link. + * Default is controlled by the global configuration `initiallyExpandGithubPermalinks`. + */ + isInitiallyExpanded?: boolean; } @@ -67,20 +74,27 @@ function GithubPermalinkInner(props: PropsWithChildren<{ clipboard?: string; } & GithubPermalinkBaseProps>) { - const { clipboard } = props; + const { clipboard, isInitiallyExpanded = true } = props; + const [isExpanded, setIsExpanded] = useState(isInitiallyExpanded); - - return
+ return
-
- - + +
+ {isExpanded ? : }
-
+ {isExpanded &&
{props.header ?? {props.permalink}} -
+
} - {clipboard &&
+ {clipboard && isExpanded &&
}
diff --git a/src/library/GithubPermalink/GithubPermalinkRsc.tsx b/src/library/GithubPermalink/GithubPermalinkRsc.tsx index 96e4165..e0e1289 100644 --- a/src/library/GithubPermalink/GithubPermalinkRsc.tsx +++ b/src/library/GithubPermalink/GithubPermalinkRsc.tsx @@ -12,7 +12,11 @@ export async function GithubPermalinkRsc(props: GithubPermalinkRscProps) { const dataFn = githubPermalinkRscConfig.getPermalinkFn(); const token = githubPermalinkRscConfig.getGithubToken(); const onError = githubPermalinkRscConfig.getOnError(); + const initiallyExpandGithubPermalinks = githubPermalinkRscConfig.getInitiallyExpandGithubPermalinks(); const data = await dataFn(permalink, token, onError); - return + return } diff --git a/src/library/GithubPermalink/github-permalink.css b/src/library/GithubPermalink/github-permalink.css index 41e6f25..0a55f27 100644 --- a/src/library/GithubPermalink/github-permalink.css +++ b/src/library/GithubPermalink/github-permalink.css @@ -224,6 +224,49 @@ svg.github-logo { align-items: center; } +.react-github-permalink .expand-button { + all: unset; + cursor: pointer; + display: flex; + align-items: center; + padding: 0; + margin: 0; + border: none; + background: none; + color: var(--rgp-color-text-frame); + transition: color 0.2s ease; +} + +.react-github-permalink .expand-button:hover { + color: var(--rgp-color-file-link); +} + +.react-github-permalink .expand-button svg { + fill: currentColor; +} + +.react-github-permalink.collapsed .header { + background-color: transparent; + border: none; + padding: 0; +} + +.react-github-permalink.collapsed { + border: none; + margin: 0; +} + +.react-github-permalink .github-icon-link a { + display: flex; + align-items: center; + opacity: 0.6; + transition: opacity 0.2s ease; +} + +.react-github-permalink .github-icon-link a:hover { + opacity: 1; +} + .copy-button-container { .tooltip-container { diff --git a/src/library/config/BaseConfiguration.ts b/src/library/config/BaseConfiguration.ts index f75651f..b8d9d3a 100644 --- a/src/library/config/BaseConfiguration.ts +++ b/src/library/config/BaseConfiguration.ts @@ -24,6 +24,13 @@ export type BaseConfiguration = { * @returns */ onError?: (e: unknown) => void; + + /** + * Default value for whether GitHub permalinks should be initially expanded. + * When false, permalinks will be collapsed by default showing only the code block. + * Default: true + */ + initiallyExpandGithubPermalinks?: boolean; }; diff --git a/src/library/config/GithubPermalinkContext.tsx b/src/library/config/GithubPermalinkContext.tsx index c9b7f57..041a8dd 100644 --- a/src/library/config/GithubPermalinkContext.tsx +++ b/src/library/config/GithubPermalinkContext.tsx @@ -63,6 +63,7 @@ export type GithubIssueLinkDataResponse = { export const GithubPermalinkContext = createContext({ getDataFn: defaultGetPermalinkFn, getIssueFn: defaultGetIssueFn, + initiallyExpandGithubPermalinks: true, }); export function GithubPermalinkProvider(props: PropsWithChildren>) { @@ -71,6 +72,7 @@ export function GithubPermalinkProvider(props: PropsWithChildren {props.children} diff --git a/src/library/config/GithubPermalinkRscConfig.ts b/src/library/config/GithubPermalinkRscConfig.ts index 0e66ded..c4cdd20 100644 --- a/src/library/config/GithubPermalinkRscConfig.ts +++ b/src/library/config/GithubPermalinkRscConfig.ts @@ -30,6 +30,10 @@ class GithubPermalinkRscConfig { public getOnError() { return this.baseConfiguration.onError; } + + public getInitiallyExpandGithubPermalinks() { + return this.baseConfiguration.initiallyExpandGithubPermalinks ?? true; + } } export const githubPermalinkRscConfig = new GithubPermalinkRscConfig(); diff --git a/src/library/images/ChevronSvg.tsx b/src/library/images/ChevronSvg.tsx new file mode 100644 index 0000000..007a7e6 --- /dev/null +++ b/src/library/images/ChevronSvg.tsx @@ -0,0 +1,19 @@ +export function ChevronDownSvg(props: { + size?: number +}) { + const size = props.size ?? 16; + + return +} + +export function ChevronRightSvg(props: { + size?: number +}) { + const size = props.size ?? 16; + + return +}