Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@sqs
sqs committed Dec 29, 2023
1 parent d148fae commit 415de90
Show file tree
Hide file tree
Showing 9 changed files with 86 additions and 92 deletions.
66 changes: 33 additions & 33 deletions client/web-playground/src/demo/settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,39 +18,39 @@ async function getProviders(): Promise<Record<string, ProviderSettings | boolean
// prefix: 'http://localhost:5800/docs',
// },
// } satisfies import('@opencodegraph/provider-docs').Settings,
// '../../../../provider/links/index.ts': {
// links: [
// {
// title: 'Telemetry',
// url: 'https://docs.sourcegraph.com/dev/background-information/telemetry#sourcegraph-web-app',
// type: 'docs',
// path: '**/*.ts?(x)',
// pattern: 'eventLogger\\.',
// },
// {
// title: 'CSS in client/web',
// url: 'https://docs.sourcegraph.com/dev/background-information/web/styling#styling-ui',
// type: 'docs',
// path: '**/*.ts?(x)',
// pattern: '^import styles from',
// },
// {
// title: 'Bazel at Sourcegraph',
// url: 'https://docs.sourcegraph.com/dev/background-information/bazel#bazel-at-sourcegraph',
// type: 'docs',
// path: '**/{BUILD.bazel,*.bzl,*.bazelrc,WORKSPACE}',
// },
// {
// title: 'View all Storybooks',
// url: 'https://www.chromatic.com/library?appId=5f0f381c0e50750022dc6bf7',
// description: 'On Chromatic',
// path: '**/{*.{stories,story}.ts?(x),.storybook/**}',
// },
// ],
// } satisfies import('@opencodegraph/provider-links').Settings,
// '../../../../provider/storybook/index.ts': {
// storybookUrl: 'https://<branch>--5f0f381c0e50750022dc6bf7.chromatic.com/',
// } satisfies import('@opencodegraph/provider-storybook').Settings,
'../../../../provider/links/index.ts': {
links: [
{
title: 'Telemetry',
url: 'https://docs.sourcegraph.com/dev/background-information/telemetry#sourcegraph-web-app',
type: 'docs',
path: '**/*.ts?(x)',
pattern: 'eventLogger\\.',
},
{
title: 'CSS in client/web',
url: 'https://docs.sourcegraph.com/dev/background-information/web/styling#styling-ui',
type: 'docs',
path: '**/*.ts?(x)',
pattern: '^import styles from',
},
{
title: 'Bazel at Sourcegraph',
url: 'https://docs.sourcegraph.com/dev/background-information/bazel#bazel-at-sourcegraph',
type: 'docs',
path: '**/{BUILD.bazel,*.bzl,*.bazelrc,WORKSPACE}',
},
{
title: 'View all Storybooks',
url: 'https://www.chromatic.com/library?appId=5f0f381c0e50750022dc6bf7',
description: 'On Chromatic',
path: '**/{*.{stories,story}.ts?(x),.storybook/**}',
},
],
} satisfies import('@opencodegraph/provider-links').Settings,
'../../../../provider/storybook/index.ts': {
storybookUrl: 'https://<branch>--5f0f381c0e50750022dc6bf7.chromatic.com/',
} satisfies import('@opencodegraph/provider-storybook').Settings,
}

const providerModules = import.meta.glob('../../../../provider/{*/index.ts,docs/src/provider/provider.ts}', {
Expand Down
1 change: 1 addition & 0 deletions lib/ui-react/src/chip/Chip.story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export const Image: Story = {
...FIXTURE_ANN,
ui: {
detail: '<img src="https://lh3.googleusercontent.com/d_S5gxu_S1P6NR1gXeMthZeBzkrQMHdI5uvXrpn3nfJuXpCjlqhLQKH_hbOxTHxFhp5WugVOEcl4WDrv9rmKBDOMExhKU5KmmLFQVg" width=512 height=300 />',
format: 'markdown',
},
} satisfies Annotation,
},
Expand Down
2 changes: 1 addition & 1 deletion provider/links/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ interface LinkPattern {
/** URL of the link. */
url: string

/** A description of the link's destination. */
/** A description of the link's destination. Markdown is supported. */
description?: string

/** The type of link (if applicable), which may affect the appearance. */
Expand Down
20 changes: 7 additions & 13 deletions provider/links/index.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,20 +33,16 @@ describe('links', () => {
)
).toEqual<AnnotationsResult>([
{
item: {
title: '📘 Docs: Foo',
url: 'https://example.com/foo',
},
title: '📘 Docs: Foo',
url: 'https://example.com/foo',
range: {
start: { line: 0, character: 1 },
end: { line: 0, character: 4 },
},
},
{
item: {
title: '📘 Docs: Foo',
url: 'https://example.com/foo',
},
title: '📘 Docs: Foo',
url: 'https://example.com/foo',
range: {
start: { line: 3, character: 1 },
end: { line: 3, character: 4 },
Expand All @@ -71,11 +67,9 @@ describe('links', () => {
links.annotations({ file: 'file:///a/b.ts', content: 'log.Print(foo, b/a+r)' }, settingsWithCaptureGroups)
).toEqual<AnnotationsResult>([
{
item: {
title: 'Print foo $3 b/a+r',
detail: 'b/a+r',
url: 'https://example.com/search?q=b%2Fa%2Br',
},
title: 'Print foo $3 b/a+r',
url: 'https://example.com/search?q=b%2Fa%2Br',
ui: { detail: 'b/a+r', format: 'markdown' },
range: {
start: { line: 0, character: 0 },
end: { line: 0, character: 21 },
Expand Down
10 changes: 4 additions & 6 deletions provider/links/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ interface LinkPattern {
/** URL of the link. */
url: string

/** A description of the link's destination. */
/** A description of the link's destination. Markdown is supported. */
description?: string

/** The type of link (if applicable), which may affect the appearance. */
Expand Down Expand Up @@ -88,11 +88,9 @@ const links: Provider<Settings> = {
const ranges = matchResults(pattern, lines)
for (const { range, groups } of ranges) {
anns.push({
item: {
title: `${type === 'docs' ? '📘 Docs: ' : ''}${interpolate(title, groups)}`,
detail: description ? interpolate(description, groups) : undefined,
url: interpolate(url, groups),
},
title: `${type === 'docs' ? '📘 Docs: ' : ''}${interpolate(title, groups)}`,
url: interpolate(url, groups),
ui: description ? { detail: interpolate(description, groups), format: 'markdown' } : undefined,
range,
})
}
Expand Down
6 changes: 2 additions & 4 deletions provider/prometheus/index.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,8 @@ var histogram = promauto.NewHistogram(prometheus.HistogramOpts{
)
).toEqual<AnnotationsResult>([
{
item: {
title: '📟 Prometheus metric: random_numbers',
url: 'https://example.com/?q=random_numbers',
},
title: '📟 Prometheus metric: random_numbers',
url: 'https://example.com/?q=random_numbers',
range: {
start: { line: 2, character: 14 },
end: { line: 2, character: 28 },
Expand Down
6 changes: 2 additions & 4 deletions provider/prometheus/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,10 +83,8 @@ const prometheus: Provider<Settings> = {
const ranges = matchResults(pattern, params.content, positionCalculator)
for (const { range, metricName } of ranges) {
anns.push({
item: {
title: `📟 Prometheus metric: ${metricName}`,
url: urlTemplate.replaceAll('$1', metricName),
},
title: `📟 Prometheus metric: ${metricName}`,
url: urlTemplate.replaceAll('$1', metricName),
range,
})
}
Expand Down
20 changes: 7 additions & 13 deletions provider/storybook/index.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,26 +53,20 @@ export const Bar: Story = {}
)
).toEqual<AnnotationsResult>([
{
item: {
title: '🖼️ Storybook: a/b/Foo',
url: 'https://main--abc123.chromatic.com/?path=%2Fstory%2Fa-b--foo',
image: {
url: 'https://example.com/thumbnail.png',
alt: 'chromatic-oembed-image',
width: 400,
height: 300,
},
title: '🖼️ Storybook: a/b/Foo',
url: 'https://main--abc123.chromatic.com/?path=%2Fstory%2Fa-b--foo',
ui: {
detail: '<img src="https://example.com/thumbnail.png" alt="chromatic-oembed-image" width="400" height="300" />',
format: 'markdown',
},
range: {
start: { line: 5, character: 13 },
end: { line: 5, character: 16 },
},
},
{
item: {
title: '🖼️ Storybook: a/b/Bar',
url: 'https://main--abc123.chromatic.com/?path=%2Fstory%2Fa-b--bar',
},
title: '🖼️ Storybook: a/b/Bar',
url: 'https://main--abc123.chromatic.com/?path=%2Fstory%2Fa-b--bar',
range: {
start: { line: 7, character: 13 },
end: { line: 7, character: 16 },
Expand Down
47 changes: 29 additions & 18 deletions provider/storybook/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import {
type AnnotationsResult,
type CapabilitiesParams,
type CapabilitiesResult,
type ItemImage,
type Provider,
type Range,
} from '@opencodegraph/provider'
Expand Down Expand Up @@ -58,12 +57,11 @@ const storybook: Provider<Settings> = {
for (const [i, story] of matches.entries()) {
const storyName = getStoryNameAlias(story, params.content)
const storyURL = chromaticStoryURL(component, storyName, settings)
const detail = await getImagePreviewMarkdown(storyURL)
anns.push({
item: {
title: `🖼️ Storybook: ${component}/${storyName}`,
url: storyURL,
image: await getImagePreview(storyURL),
},
title: `🖼️ Storybook: ${component}/${storyName}`,
url: storyURL,
ui: detail ? { detail, format: 'markdown' } : undefined,
range: ranges[i],
})
}
Expand All @@ -81,12 +79,11 @@ const storybook: Provider<Settings> = {
if (storyTitle) {
const story = 'Default'
const storyURL = chromaticStoryURL(storyTitle, story, settings)
const detail = await getImagePreviewMarkdown(storyURL)
anns.push({
item: {
title: `🖼️ Storybook: ${storyTitle}`,
url: storyURL,
image: await getImagePreview(storyURL),
},
title: `🖼️ Storybook: ${storyTitle}`,
url: storyURL,
ui: detail ? { detail, format: 'markdown' } : undefined,
range: ranges[i],
})
}
Expand Down Expand Up @@ -155,7 +152,7 @@ function chromaticStoryURL(component: string, story: string, settings: Settings)
return url.toString()
}

async function getImagePreview(storyUrlStr: string): Promise<ItemImage | undefined> {
async function getImagePreviewMarkdown(storyUrlStr: string): Promise<string | undefined> {
const storyUrl = new URL(storyUrlStr)
if (!storyUrl.hostname.endsWith('.chromatic.com')) {
return undefined // only oEmbed for Chromatic is supported
Expand Down Expand Up @@ -195,16 +192,30 @@ async function getImagePreview(storyUrlStr: string): Promise<ItemImage | undefin

const oembedData = (await resp.json()) as OEmbedData
if (oembedData.thumbnail_url) {
return {
url: oembedData.thumbnail_url,
width: oembedData.thumbnail_width,
height: oembedData.thumbnail_height,
alt: oembedData.title,
}
const attrs = [
`src="${escapeHTMLAttributeValue(oembedData.thumbnail_url)}"`,
oembedData.title && `alt="${escapeHTMLAttributeValue(oembedData.title)}"`,
oembedData.thumbnail_width && `width="${escapeHTMLAttributeValue(oembedData.thumbnail_width.toString())}"`,
oembedData.thumbnail_height &&
`height="${escapeHTMLAttributeValue(oembedData.thumbnail_height.toString())}"`,
]
return `<img ${attrs.filter(a => a).join(' ')} />`
}
return undefined
}

const HTML_ESCAPES: { [char: string]: string } = {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
"'": '&#39;',
'"': '&quot;',
}

function escapeHTMLAttributeValue(text: string): string {
return text.replaceAll(/["&'<>]/g, tag => HTML_ESCAPES[tag])
}

/**
* Convert from CamelCase to kebab-case.
*/
Expand Down

0 comments on commit 415de90

Please sign in to comment.