and an image 
'
+versions:
+ fpt: '*'
+ ghes: '*'
+ ghec: '*'
+contentType: how-tos
+---
+
+## An emoji image
+
+Typing `:strawberry:` renders the emoji inline.
+
+## A decorative image
+
+
diff --git a/src/fixtures/fixtures/content/get-started/images/images-in-lists.md b/src/fixtures/fixtures/content/get-started/images/images-in-lists.md
index 237ad23da21c..897001107654 100644
--- a/src/fixtures/fixtures/content/get-started/images/images-in-lists.md
+++ b/src/fixtures/fixtures/content/get-started/images/images-in-lists.md
@@ -14,3 +14,10 @@ contentType: how-tos
1. French press is also great
3. Drip coffee is not so great.
+
+## A numbered list with a linked image
+
+1. Pour-over takes patience.
+1. The linked image renders like this:
+
+ [](https://github.com)
diff --git a/src/fixtures/fixtures/content/get-started/images/index.md b/src/fixtures/fixtures/content/get-started/images/index.md
index ef16588d1a04..a6b7262d8d46 100644
--- a/src/fixtures/fixtures/content/get-started/images/index.md
+++ b/src/fixtures/fixtures/content/get-started/images/index.md
@@ -10,4 +10,5 @@ children:
- /images-in-lists
- /link-to-image
- /retina-image
+ - /emoji-and-decorative-images
---
diff --git a/src/fixtures/tests/images.ts b/src/fixtures/tests/images.ts
index b9aee2601786..796d79eb2104 100644
--- a/src/fixtures/tests/images.ts
+++ b/src/fixtures/tests/images.ts
@@ -37,6 +37,7 @@ describe('render Markdown image tags', () => {
expect(src).toMatch(/^\/assets\/cb-\w+\/images\/_fixtures\/screenshot\.png$/)
const alt = imgs.attr('alt')
expect(alt).toBe('This is the alt text')
+ expect(imgs.attr('class')).toMatch(/Image/)
const res = await get(srcset!.split(' ')[0], { responseType: 'buffer' })
expect(res.statusCode).toBe(200)
@@ -69,6 +70,16 @@ describe('render Markdown image tags', () => {
expect(imageSpan.length).toBe(1)
})
+ // A div inside a paragraph is invalid HTML and breaks hydration.
+ test('linked image in a list paragraph has no wrapper', async () => {
+ const $: CheerioAPI = await getDOM('/get-started/images/images-in-lists')
+
+ const link = $('#article-contents ol > li > p > a[href="https://github.com"]')
+ expect(link.length).toBe(1)
+ expect($('div', link).length).toBe(0)
+ expect($('img', link).attr('alt')).toBe('Linked test image')
+ })
+
test("links directly to images aren't rewritten", async () => {
const $: CheerioAPI = await getDOM('/get-started/images/link-to-image')
// The fixture has one article link; header links are out of scope.
@@ -79,4 +90,34 @@ describe('render Markdown image tags', () => {
const res = await head(links.attr('href')!)
expect(res.statusCode).toBe(200)
})
+
+ test('emoji images stay plain img elements', async () => {
+ const $: CheerioAPI = await getDOM('/get-started/images/emoji-and-decorative-images')
+ const emoji = $(
+ '#article-contents img[src^="https://github.githubassets.com/images/icons/emoji"]',
+ )
+ expect(emoji.length).toBe(1)
+ expect(emoji.attr('alt')).toBe(':strawberry:')
+ expect(emoji.attr('class')).toBeUndefined()
+ })
+
+ test('images without alt text render an empty alt', async () => {
+ const $: CheerioAPI = await getDOM('/get-started/images/emoji-and-decorative-images')
+ const imgs = $('#article-contents img[src*="/images/_fixtures/screenshot.png"]')
+ expect(imgs.length).toBe(1)
+ expect(imgs.attr('alt')).toBe('')
+ expect(imgs.attr('class')).toMatch(/Image/)
+ })
+
+ test('images in RenderedHTML intros use the Brand Image component', async () => {
+ const $: CheerioAPI = await getDOM('/get-started/images/emoji-and-decorative-images')
+ const lead = $('[data-container="lead"]')
+ const image = $('img[src*="/images/_fixtures/electrocat.png"]', lead)
+ expect(image.length).toBe(1)
+ expect(image.attr('alt')).toBe('Intro image')
+ expect(image.attr('class')).toMatch(/Image/)
+ const emoji = $('img[src^="https://github.githubassets.com/images/icons/emoji"]', lead)
+ expect(emoji.length).toBe(1)
+ expect(emoji.attr('class')).toBeUndefined()
+ })
})
diff --git a/src/frame/components/article/ViewMarkdownButton.module.scss b/src/frame/components/article/ViewMarkdownButton.module.scss
index 46dbbabec6fc..1c253f3c58c1 100644
--- a/src/frame/components/article/ViewMarkdownButton.module.scss
+++ b/src/frame/components/article/ViewMarkdownButton.module.scss
@@ -23,7 +23,11 @@
// @primer/react ActionMenu.Button, so several rules here make them agree. Where
// a doubled class or !important appears, it beats a library rule; the specificity
// that forced it is noted.
-.button {
+//
+// The doubled classes beat @primer/react ButtonBase rules, which have one-class
+// specificity. Without them the winner depends on stylesheet load order, and a
+// dev hot reload or chunk reorder brings back the chevron's border and radius.
+.button.button {
display: inline-flex;
align-items: center;
justify-content: center;
@@ -75,7 +79,7 @@
// The pill's left end is rounded outside and square where it meets the chevron.
// The radius token is 624.9375rem rather than 9999px, and nothing clips it.
-.copyButton {
+.copyButton.copyButton {
border-radius: var(--brand-borderRadius-full, 624.9375rem) 0 0
var(--brand-borderRadius-full, 624.9375rem);
// Less padding on the seam side so the label sits closer to the chevron than
@@ -92,7 +96,7 @@
// The pill's right end: square at the seam, rounded outside. Width matches the
// height for an even chevron target.
-.dropdownButton {
+.dropdownButton.dropdownButton {
border-radius: 0 var(--brand-borderRadius-full, 624.9375rem)
var(--brand-borderRadius-full, 624.9375rem) 0;
width: 28px;
diff --git a/src/frame/components/hooks/useHasAccount.ts b/src/frame/components/hooks/useHasAccount.ts
index 589eaf4997b1..047e78748a0c 100644
--- a/src/frame/components/hooks/useHasAccount.ts
+++ b/src/frame/components/hooks/useHasAccount.ts
@@ -2,15 +2,9 @@ import { useState, useEffect } from 'react'
import Cookies from '@/frame/components/lib/cookies'
import { COLOR_MODE_COOKIE_NAME, PREFERRED_COLOR_MODE_COOKIE_NAME } from '@/frame/lib/constants'
-// Measure if the user has a github.com account and signed in during this session.
-// The github.com sends the color_mode cookie every request when you sign in,
-// but does not delete the color_mode cookie on sign out.
-// You do not need to change your color mode settings to get this cookie,
-// this applies to every user regardless of if they changed this setting.
-// To test this, try a private browser tab.
-// We are using the color_mode cookie because it is not HttpOnly.
-// For users that haven't changed their session cookies recently,
-// we also can check for the browser-set `preferred_color_mode` cookie.
+// github.com sends color_mode on every signed-in request and leaves it on sign-out.
+// Every account gets that client-readable cookie, regardless of color-mode settings.
+// preferred_color_mode covers sessions that still use the browser-set cookie.
export function useHasAccount() {
const [hasAccount, setHasAccount] = useState