Sections

Link previews

Link previews add rich previews to links included in questions and answers on Stack Overflow. They’re also known as oneboxes or link unfurls.

Classes

Section titled Classes

Class	Parent	Description
`.s-link-preview`	`N/A`	Base parent container for link previews
`.s-link-preview--header`	`.s-link-preview`	Top section containing the title and details
`.s-link-preview--icon`	`.s-link-preview--header`	Logo of the third party link. Use the @Svg.Helper.
`.s-link-preview--title`	`.s-link-preview--header`	Title of the linked file
`.s-link-preview--details`	`.s-link-preview--header`	Details and meta data of the linked file
`.s-link-preview--body`	`.s-link-preview`	Middle section containing the body of the linked file whose expected content is rich text or markdown
`.s-link-preview--code`	`.s-link-preview`	Middle section containing the body of the linked file whose expected content is code
`.s-link-preview--footer`	`.s-link-preview`	Bottom section containing URL details
`.s-link-preview--url`	`.s-link-preview--footer`	URL of the linked file
`.s-link-preview--misc`	`.s-link-preview--footer`	(optional) A small catch-all for anything you might need. This page contains a few use cases.
`.linenums`	`.s-link-preview--code`	Added to the `pre` of the preview block to properly display line numbers

Examples

Section titled Examples

Link previews automatically appear when you pasting a link into a post, providing a glimpse of what’s been linked to. This approach has been popularized by Slack, Twitter, Facebook, etc. Link previews should be tailored to fit the content received from each third party. It might be appropriate to use atomic utility classes for further customization, but Stacks provides a few reusable patterns:

Base style

Section titled Base style

Use for links whose expected body is rich text or markdown like Jira issues or Slack messages. Wherever possible, it’s best practice to support basic markdown formatting (bold, italics, line breaks, lists, etc.)

<div class="s-link-preview">
    <div class="s-link-preview--header">
        <div class="s-link-preview--icon">@Svg.Icon</div>
        <div>
            <a href="#" class="s-link-preview--title">…</a>
            <div class="s-link-preview--details">…</div>
        </div>
    </div>
    <div class="s-link-preview--body">…</div>
    <div class="s-link-preview--footer">
        <a href="#" class="s-link-preview--url">…</a>
        <a href="#" class="s-link-preview--misc">Privacy notice</a>
    </div>
</div>

I'm trying to create a simple fetch with hooks from an AWS database. At the moment it errors out and the only reason I can see is because it breaks the rules of hooks but I'm not sure how. It's at the top level of this functional component and it's not called inside an event handler.

The result of this call (an array of user data), needs to be exported as a function and called in another file.

If anyone can spot something I have missed and can highlighted how I'm breaking the rules of hooks I'd be grateful!

Thanks!

Code blocks

Section titled Code blocks

Use for links whose expected body is code like code files or GitHub Gists. In these scenarios, replace s-link-preview--body class with s-link-preview--code.

Add a s-code-block class to the <pre> tag if you’d like to apply highlight.js’s syntax highlighting on Stack Exchange sites with this option enabled.

<div class="s-link-preview">
    <div class="s-link-preview--header">
        <div class="s-link-preview--icon">@Svg.Icon</div>
        <div>
            <a href="#" class="s-link-preview--title">…</a>
            <div class="s-link-preview--details">…</div>
        </div>
    </div>
    <div class="s-link-preview--code">
        <pre class="s-code-block">
            <code>…</code>
        </pre>
    </div>
    <div class="s-link-preview--footer">
        <a href="#" class="s-link-preview--url">…</a>
        <div class="s-link-preview--misc">(truncated)</div>
    </div>
</div>

'use strict';

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        version: '<%= pkg.version %>',

        // Shell commands for use in Grunt tasks
        shell: {
            eleventyBuild: {
                command: 'npx @11ty/eleventy',
                options: {
                    stderr: false,
                    execOptions: {
                        cwd: 'docs'
                    }
                }

Code blocks with line numbers

Section titled Code blocks with line numbers

You can further configure highlight.js’s syntax highlighting to include line numbers by adding the class linenums to the prettified <pre> tag containing the code.

Class	Description
`linenums`	Count starts at line 1
`linenums:<n>`	Count starts at line `<n>`

<div class="s-link-preview">
    <div class="s-link-preview--header">
        <div class="s-link-preview--icon">@Svg.Icon</div>
        <div>
            <a href="#" class="s-link-preview--title">…</a>
            <div class="s-link-preview--details">…</div>
        </div>
    </div>
    <div class="s-link-preview--code">
        <pre class="s-code-block linenums">
            <code>…</code>
        </pre>
    </div>
    <div class="s-link-preview--footer">
        <a href="#" class="s-link-preview--url">…</a>
        <div class="s-link-preview--misc">(truncated)</div>
    </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17'use strict';

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        version: '<%= pkg.version %>',

        // Shell commands for use in Grunt tasks
        shell: {
            eleventyBuild: {
                command: 'npx @11ty/eleventy',
                options: {
                    stderr: false,
                    execOptions: {
                        cwd: 'docs'
                    }
                }

Edit on GitHub