Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
5 changes: 1 addition & 4 deletions components/landing/ArticleList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,7 @@ export const ArticleList = ({
{articles.map((link) => {
return (
<li key={link.href} className={cx(variant === 'compact' && 'border-top')}>
<Link
href={link.href}
className="link-with-intro Bump-link--hover no-underline d-block py-3"
>
<Link href={link.href} className="Bump-link--hover no-underline d-block py-3">
<h4 className="link-with-intro-title">
<span dangerouslySetInnerHTML={{ __html: link.title }} />
<span className="Bump-link-symbol">→</span>
Expand Down
14 changes: 0 additions & 14 deletions includes/liquid-tags/link-as-article-card.html

This file was deleted.

1 change: 0 additions & 1 deletion includes/liquid-tags/link-in-list.html

This file was deleted.

4 changes: 0 additions & 4 deletions includes/liquid-tags/link-with-intro.html

This file was deleted.

1 change: 0 additions & 1 deletion includes/liquid-tags/link.html

This file was deleted.

1 change: 0 additions & 1 deletion includes/liquid-tags/topic-link-in-list.html

This file was deleted.

39 changes: 1 addition & 38 deletions lib/liquid-tags/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ See also [contributing/liquid-helpers.md](../../contributing/liquid-helpers.md)
This directory contains custom Liquid tags for outputting dynamic content. These custom tags exist for a few reasons:

- Content and styling should be separated. Writers should not be concerned with writing or maintaining stylistic markup.
- Writers should be able to create links by specifying the minimum amount of identifying information (an article href) and leave it to the site to dynamically inject that page's metadata like `title`, `intro`, etc.
- Content should be localized to match the current language.
- Styling and markup should be DRY and reusable.

Expand All @@ -19,49 +18,13 @@ Tags can be used in:
Tags always expect a single argument, a language agnostic href:

```html
{% link_with_intro /getting-started-with-github-desktop %}
{% data variables.product.product_name %}
```

where the reference must be in the parent file, `content/desktop/index.md`, as it points to `content/desktop/getting-started-with-github-desktop`.

The href can also be an absolute path:

```html
{% link_with_intro /desktop/getting-started-with-github-desktop %}
```

where the reference can be in any file.

**Note:** Every href, whether relative or absolute, must start with a slash (`/`). Do not include `content` in the href.

The tag above will output this HTML for English pages:

```html
<a class="link-with-intro Bump-link--hover no-underline" href="/en/desktop/getting-started-with-github-desktop">
<h4 class="link-with-intro-title">Getting started with GitHub Desktop<span class="Bump-link-symbol">→</span></h4>
</a>
<p class="link-with-intro-intro">Get GitHub Desktop set up to manage your project work. Authenticate to GitHub.com or GitHub Enterprise Server, keep the app up-to-date, and review your preferred settings.</p>
```

and this HTML for Spanish pages:

```html
<a class="link-with-intro Bump-link--hover no-underline" href="/es/desktop/getting-started-with-github-desktop">
<h4 class="link-with-intro-title">Comenzar con GitHub Desktop<span class="Bump-link-symbol">→</span></h4></a>
<p class="link-with-intro-intro">Configura GitHub Desktop para administrar tu proyecto de trabajo. Autentícate en GitHub.com o en el Servidor de GitHub Enterprise, mantén la app actualizada y revisa tu configuración preferida.</p>
```

Note that link tags will only render links that are available in the current page version (i.e. GitHub.com vs Enterprise), so it's not necessary to add Liquid conditionals around them.

## Supported tags

| Markup | Renders |
| -- | -- |
| `{% link /href %}` | The linked page's title, with no special styling.
| `{% link_with_intro /href %}` | The linked page's title and intro.
| `{% homepage_link_with_intro /href %}` | The linked page's title and intro, with homepage-specific styling.
| `{% link_in_list /href %}` | The linked page's title in a list item.
| `{% topic_link_in_list /href %}` | The linked map topic's title in a list item (used in category TOCs).
| `{% indented_data_reference foo.bar spaces=NUMBER %}` | A data reference with the specified number of spaces prepended to each line. Defaults to 2 spaces if no spaces included. For example: `{% indented_data_reference reusables.pages.wildcard-dns-warning spaces=3 %}`

## Creating tags
Expand Down
3 changes: 0 additions & 3 deletions lib/liquid-tags/homepage-link-with-intro.js

This file was deleted.

16 changes: 0 additions & 16 deletions lib/liquid-tags/link-as-article-card.js

This file was deleted.

2 changes: 0 additions & 2 deletions lib/liquid-tags/link-in-list.js

This file was deleted.

3 changes: 0 additions & 3 deletions lib/liquid-tags/link-with-intro.js

This file was deleted.

113 changes: 0 additions & 113 deletions lib/liquid-tags/link.js

This file was deleted.

2 changes: 0 additions & 2 deletions lib/liquid-tags/topic-link-in-list.js

This file was deleted.

11 changes: 0 additions & 11 deletions lib/render-content/index.js
Original file line number Diff line number Diff line change
@@ -1,25 +1,14 @@
import GithubSlugger from 'github-slugger'
import renderContent from './renderContent.js'
import { ExtendedMarkdown, tags } from '../liquid-tags/extended-markdown.js'
import Link from '../liquid-tags/link.js'
import LinkWithIntro from '../liquid-tags/link-with-intro.js'
import LinkInList from '../liquid-tags/link-in-list.js'
import TopicLinkInList from '../liquid-tags/topic-link-in-list.js'
import IndentedDataReference from '../liquid-tags/indented-data-reference.js'
import Data from '../liquid-tags/data.js'
import Octicon from '../liquid-tags/octicon.js'
import LinkAsArticleCard from '../liquid-tags/link-as-article-card.js'
import Ifversion from '../liquid-tags/ifversion.js'

// Include custom tags like {% link_with_intro /article/foo %}
renderContent.liquid.registerTag('link', Link('link'))
renderContent.liquid.registerTag('link_with_intro', LinkWithIntro)
renderContent.liquid.registerTag('link_in_list', LinkInList)
renderContent.liquid.registerTag('topic_link_in_list', TopicLinkInList)
renderContent.liquid.registerTag('indented_data_reference', IndentedDataReference)
renderContent.liquid.registerTag('data', Data)
renderContent.liquid.registerTag('octicon', Octicon)
renderContent.liquid.registerTag('link_as_article_card', LinkAsArticleCard)
renderContent.liquid.registerTag('ifversion', Ifversion)

for (const tag in tags) {
Expand Down
4 changes: 2 additions & 2 deletions tests/rendering/curated-homepage-links.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ describe('curated homepage links', () => {

test('English', async () => {
const $ = await getDOM('/en')
const $links = $('a.link-with-intro')
const $links = $('a.Bump-link--hover')
expect($links.length).toBeGreaterThanOrEqual(8)

// Check that each link is localized and includes a title and intro
Expand All @@ -32,7 +32,7 @@ describe('curated homepage links', () => {

test('Japanese', async () => {
const $ = await getDOM('/ja')
const $links = $('a.link-with-intro')
const $links = $('a.Bump-link--hover')
expect($links.length).toBeGreaterThanOrEqual(8)

// Check that each link is localized and includes a title and intro
Expand Down
71 changes: 0 additions & 71 deletions tests/unit/liquid-helpers.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import { jest } from '@jest/globals'
import { liquid } from '../../lib/render-content/index.js'
import { loadPageMap } from '../../lib/page-data.js'
import htmlEntities from 'html-entities'
import nonEnterpriseDefaultVersion from '../../lib/non-enterprise-default-version.js'
const entities = new htmlEntities.XmlEntities()

describe('liquid helper tags', () => {
jest.setTimeout(60 * 1000)
Expand Down Expand Up @@ -33,75 +31,6 @@ describe('liquid helper tags', () => {
}
})

test('link tag with relative path (English)', async () => {
const template = '{% link /contributing-and-collaborating-using-github-desktop %}'
const expected =
'<a class="link-title Bump-link--hover no-underline" href="/en/desktop/contributing-and-collaborating-using-github-desktop">Contributing and collaborating using GitHub Desktop</a>'
const output = await liquid.parseAndRender(template, context)
expect(output).toBe(expected)
})

test('link tag with relative path (translated)', async () => {
context.currentLanguage = 'ja'
const template = '{% link /contributing-and-collaborating-using-github-desktop %}'
const expected =
'<a class="link-title Bump-link--hover no-underline" href="/ja/desktop/contributing-and-collaborating-using-github-desktop">'
const output = await liquid.parseAndRender(template, context)
expect(output.includes(expected)).toBe(true)
// set this back to english
context.currentLanguage = 'en'
})

test('link tag with local variable', async () => {
const template = `{% assign href = "/contributing-and-collaborating-using-github-desktop" %}
{% link {{ href }} %}`
const expected =
'<a class="link-title Bump-link--hover no-underline" href="/en/desktop/contributing-and-collaborating-using-github-desktop">'
const output = await liquid.parseAndRender(template, context)
expect(output.includes(expected)).toBe(true)
})

test('link tag with absolute path', async () => {
context.currentLanguage = 'en'
const template =
'{% link /desktop/contributing-and-collaborating-using-github-desktop/adding-and-cloning-repositories %}'
const expected =
'<a class="link-title Bump-link--hover no-underline" href="/en/desktop/contributing-and-collaborating-using-github-desktop/adding-and-cloning-repositories">Adding and cloning repositories</a>'
const output = await liquid.parseAndRender(template, context)
expect(output).toBe(expected)
})

test('link_with_intro tag', async () => {
const template = '{% link_with_intro /contributing-and-collaborating-using-github-desktop %}'
const page = pageMap['/en/desktop/contributing-and-collaborating-using-github-desktop']
const expected = `<a class="link-with-intro Bump-link--hover no-underline" href="/en/desktop/contributing-and-collaborating-using-github-desktop">
<h2 class="link-with-intro-title f4">${page.title}<span class="Bump-link-symbol">→</span></h2>
</a>
<p class="link-with-intro-intro">${page.intro}</p>`
const output = entities.decode(await liquid.parseAndRender(template, context))
expect(output).toBe(expected)
})

test('link_in_list tag', async () => {
const template = '{% link_in_list /contributing-and-collaborating-using-github-desktop %}'
const expected =
'- <a class="article-link link Bump-link--hover no-underline" href="/en/desktop/contributing-and-collaborating-using-github-desktop">Contributing and collaborating using GitHub Desktop</a>'
const output = await liquid.parseAndRender(template, context)
expect(output).toBe(expected)
})

test('link_as_article_card', async () => {
const template =
'{% link_as_article_card /contributing-and-collaborating-using-github-desktop %}'
const expected = `<div class="d-flex col-12 col-md-4 pr-0 pr-md-6 pr-lg-8 <display condition> js-filter-card" data-type="" data-topics="">
<a class="no-underline d-flex flex-column py-3 border-bottom" href="/en/desktop/contributing-and-collaborating-using-github-desktop">
<h4 class="h4 color-text-primary mb-1">Contributing and collaborating using GitHub Desktop</h4>
<div class="h6 text-uppercase"></div>
<p class="color-text-secondary my-3">Use GitHub Desktop to manage your projects, create meaningful commits, and track the project&apos;s history in an app instead of on the command line.</p>`
const output = await liquid.parseAndRender(template, context)
expect(output.includes(expected)).toBe(true)
})

describe('indented_data_reference tag', () => {
test('without any number of spaces specified', async () => {
const template = '{% indented_data_reference reusables.example %}'
Expand Down