Sections

Post summary

The post summary component summarizes various content and associated meta data into a highly configurable component.

Classes

Section titled Classes
Class Parent Description
.s-post-summary N/A Base parent container for a post summary
.s-post-summary--stats .s-post-summary Container for the post summary stats
.s-post-summary--stats-item .s-post-summary--stats Individual stat item within the stats container
.has-answers .s-post-summary--stats-item Adds the styling necessary for a question with answers
.has-accepted-answer .s-post-summary--stats-item Adds the styling necessary for a question with accepted answers
.has-bounty .s-post-summary--stats-item Styles the stats item appropriately to display a bounty
.is-warm .s-post-summary--stats-item Styles post stats with a warm color
.is-hot .s-post-summary--stats-item Warmer still, for more popular posts
.is-supernova .s-post-summary--stats-item Paired with a fire icon, these are the most popular stats
.s-post-summary--content .s-post-summary Container for the post summary content
.s-post-summary--content-type .s-post-summary--content A container for various content types, eg. How-to guide on Articles
.s-post-summary--content-title .s-post-summary--content Post title styling
.s-post-summary--content-excerpt .s-post-summary--content An optional content excerpt truncated at 2 lines.
.s-post-summary--answer .s-post-summary--content Adds blockquote styling and spacing for answer previews
.s-post-summary--answer-excerpt .s-post-summary--content Provides padding, and truncation to 4 lines.
.s-post-summary--content-menu-button .s-post-summary--content An optional button for displaying a post-specific menu.
.s-post-summary--meta .s-post-summary--content A container for post meta data, things like tags and user cards.
.s-post-summary--meta-tags .s-post-summary--meta A container for tags and other taxonomy.

Layout Examples

Section titled Layout Examples

Post summaries are a flexible component capable of previewing various content types—questions or articles. Post summaries are meant to be flexible, allowing for each individual piece to be removed. Let’s start with a full example of a few questions and an article interleaved.

Full

Section titled Full

At their most complete, post summaries are presented in two columns and can contain:

  • Title
  • Excerpt
  • Tags & other categorization
  • Author & creation date
  • Stats & various states
  • Contextual menu

At the smallest breakpoint, the layout will switch to a single column.

<div class="s-post-summary">
    <div class="s-post-summary--stats">
        <div class="s-post-summary--stats-item has-answers has-accepted-answer">
            @Svg.CheckmarkSm
            … answers
        </div>
        <div class="s-post-summary--stats-item">
            … votes
        </div>
        <div class="s-post-summary--stats-item is-supernova">
            @Svg.FireSm.With("va-text-bottom mrn2")
            … views
        </div>
    </div>
    <div class="s-post-summary--content">
        <div class="s-post-summary--content-type">
            <a href="…" class="s-link s-link__grayscale">
                @Svg… …
            </a>
        </div>
        <a href="…" class="s-post-summary--content-title s-link">…</a>
        <p class="s-post-summary--content-excerpt">…</p>
        <div class="s-post-summary--meta">
            <div class="s-post-summary--meta-tags">
                <a class="s-tag" href="…">…</a>
            </div>

            <div class="s-user-card s-user-card__minimal">
                <a href="…" class="s-avatar s-user-card--avatar">
                    <img class="s-avatar--image" src="…" />
                </a>
                <a href="…" class="s-user-card--link">…</a>
                <ul class="s-user-card--awards">
                    <li class="s-user-card--rep">…</li>
                </ul>
                <time class="s-user-card--time">…</time>
            </div>
        </div>
        <a href="…" class="s-btn s-btn__muted s-post-summary--content-menu-button">
            @Svg.EllipsisVertical
        </a>
    </div>
</div>
5 answers
95 votes
104k views
How to generate the JPA entity Metamodel?

In the spirit of type safety associated with the CriteriaQuery JPA 2.0 also has an API to support Metamodel representation of entities.

java hibernate jpa annotation-processing metamodel
Paul Wright
  • 1350
4 answers
280 votes
10.2k views
+50
Cannot read property 'startsWith' of null in npm install

I am creating my first react-native app. I am attempting to install the react-native command line interface as shown here. I keep getting an error when I type the command to initiate the react-native command line

node-js angular npm javascript
Aaron Shekey
  • 205
1 vote
15 views
1 minute read
1 comment
How-to guide
How to run a product research study

This article aims to guide you through the steps and processes you may want to consider when running research at Stack Overflow. While there are obviously many methods, this guide will focus more interview-style research. For a full list of Product Research templates, guides, and links, see this article.

ux-research
Mithila Fox
  • 323
1 answer
1 vote
7 views
EF core 3.1 - common table for entity and owned type

I’m trying to implement DDD approach in my project but realized that I have too big aggregates and trying to minimize the amount of data loaded from the database. I have an aggregate Order which

c# asp.net entity-framework domain-driven-design
dantey89
  • 1,315

Minimal

Section titled Minimal

There are compact views where it’s appropriate to reduce the amount of information within the post summary. The minimal view forces the smallest breakpoint layout in any context, stacking the meta data on top and putting everything into a single column.

<div class="s-post-summary s-post-summary__minimal">
    <div class="s-post-summary--stats">
        <div class="s-post-summary--stats-item">
            @Svg.CheckmarkSm
            … answers
        </div>
        <div class="s-post-summary--stats-item">
            … votes
        </div>
        <div class="s-post-summary--stats-item">
            … views
        </div>
    </div>
    <div class="s-post-summary--content">
        <a href="…" class="s-post-summary--content-title s-link">…</a>
        <div class="s-post-summary--meta">
            <div class="s-post-summary--meta-tags">
                <a class="s-tag" href="…">…</a>
            </div>

            <div class="s-user-card s-user-card__minimal">
                <a href="…" class="s-avatar s-user-card--avatar">
                    <img class="s-avatar--image" src="…" />
                </a>
                <a href="…" class="s-user-card--link">…</a>
                <time class="s-user-card--time">…</time>
            </div>
        </div>
    </div>
</div>
0 answers
0 votes
2 views
Clicking through a viewpager2?
android android-studio android-viewpager2
Callum Osborne
1 answers
0 votes
3 views
What permissions does github_token require for releases from a github action
github-actions
GuiFalourd
0 answers
0 votes
5 views
Parentheses is Invalid Bash
linux bash docker shell
thatkingguy_

Answers

Section titled Answers

Previews of answers can also be attached to the post summary as needed.

<div class="s-post-summary">
    …
    <div class="s-post-summary--content">
        <a href="…" class="s-post-summary--content-title s-link">…</a>
        <div class="s-post-summary--meta">…</div>

        <div class="s-post-summary--answer">
            <div class="s-post-summary--stats">
                <div class="s-post-summary--stats-item has-answers has-accepted-answer">
                    @Svg.CheckmarkSm Accepted answer
                </div>
                <div class="s-post-summary--stats-item">
                    … votes
                </div>
            </div>
            <p class="s-post-summary--answer-excerpt">
                …
            </p>
            <div class="s-post-summary--meta">
                <a class="s-link" href="…">
                    View answer
                </a>

                <div class="s-user-card s-user-card__minimal">
                    <a href="…" class="s-avatar s-user-card--avatar">
                        <img class="s-avatar--image" src="…" />
                    </a>
                    <a href="…" class="s-user-card--link">…</a>
                    <time class="s-user-card--time">…</time>
                </div>
            </div>
        </div>
    </div>
</div>
2 answers
2 votes
1k views
Azure API Management and Backend Web API

Right now, I have enabled basic authentication to the developer portal in API Management. Also, I have enabled OAuth 2.0 authentication for the back end server (user Authorization). So, if i login to the developer portal, i can see two fields - Subscription Key and Authorization. The Subscription key will be the developer's subscription to the portal and the Authorization will be the OAuth authorization which is required for the back end server.

azure asp.net-web-api oauth-2.0 azure-active-directory
karel
Accepted answer
2 votes

Subscription keys in APIM are tied to a user and product, thus if you change (or create new one) product to not require subscription (option available at creation time or in product settings) no subscription key would be needed to call any API included into such products. The downside is that all such calls would be treated by APIM as anonymous and shown in analytics as such.

View answer
Aaron Shekey
2 votes

Yeah, you can do that (a bit of a hack). You have to use REST Api for that, specifically this call. For me it didn't work to edit the existing API (they key was still there), but when I've created new API, key wasn't there:

View answer
4c74356b41

Stats examples

Section titled Stats examples

Answered status

Section titled Answered status

Within the stats section of the post summary, posts can have various answered states. A checkmark icon is displayed in questions that have accepted answers.

  • No answers
  • Has answers
  • Has accepted answers
<!-- No answers -->
<div class="s-post-summary--stats-item">
    0 answers
</div>

<!-- Has answers -->
<div class="s-post-summary--stats-item has-answers">
    2 answers
</div>

<!-- Has accepted answers -->
<div class="s-post-summary--stats-item has-answers has-accepted-answer">
    @Svg.CheckmarkSm
    5 answers
</div>
0 answers
3 votes
32 views
2 answers
12 votes
145 views
5 answers
95 votes
380 views

Hotness

Section titled Hotness

Post stats also have various states of hotness and display in corresponding shades of orange. A fire icon is added in the supernova level of popularity.

  • Default
  • Warm
  • Hot
  • Supernova
<!-- Default views -->
<div class="s-post-summary--stats-item">
    23 views
</div>

<!-- Warm -->
<div class="s-post-summary--stats-item is-warm">
    1k views
</div>

<!-- Hot -->
<div class="s-post-summary--stats-item is-hot">
    10k views
</div>

<!-- Supernova -->
<div class="s-post-summary--stats-item is-supernova">
    @Svg.FireSm.With("mrn2")
    100k views
</div>
0 answers
3 votes
23 views
3 answers
28 votes
1k views
10 answers
92 votes
10k views
18 answers
126 votes
100k views

States

Section titled States

Post summaries change their appearance based on being watched, ignored, or deleted.

<div class="s-post-summary s-post-summary__watched">
    <div class="s-post-summary--stats">
        <div class="s-post-summary--stats-item is-watched">
            @Svg.EyeSm
            Watched
        </div>
        …
    </div>
    …
</div>

<div class="s-post-summary s-post-summary__ignored">
    <div class="s-post-summary--stats">
        <div class="s-post-summary--stats-item is-ignored">
            @Svg.EyeOffSm
            Ignored
        </div>
        …
    </div>
    …
</div>

<div class="s-post-summary s-post-summary__deleted">
    <div class="s-post-summary--stats">
        <div class="s-post-summary--stats-item is-deleted">
            @Svg.TrashSm
            Deleted
        </div>
        …
    </div>
    …
</div>
Watched
2 answers
10 votes
10k views
Could not load type 'System.Web.Optimization.StyleBundle'

Sometimes after build and launch my MVC4 web app I got this error. It can dissapear after rebuild or not. Same issue I got after publish to Windows Azure. Does anybody know how to fix this error?

asp.net asp.net-mvc
Nimantha
  • 5,337
Ignored
2 answers
205 views
PHP URL Param redirects - with wildcards/regex

I recently found this solution for doing php url variable to header location redirects. It's so much more manageable compared to htaccess for mass redirects, however one thing I want to next work out templates, guides, and links, see this article.

php regex redirect parameters wildcard
Jase Wolf
  • 93
Deleted
0 answers
0 votes
5 views
Adding authentication based on API key and API secret to APIs in Spring Boot application

I am working on a Spring Boot application with user authentication is based on Oauth2 2ith 2FA. Now, I would like to call the APIs in my application from the third-party client as well, say from another service.

spring spring-boot authentication spring-security oauth-2.0
Joy
  • 3,622
Edit on GitHub File an issue on GitHub