Sections

Post summary

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

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
`.s-post-summary--stats-item-number`	`.s-post-summary--stats-item`	Container for applying styling to the number of a stat item
`.s-post-summary--stats-item-unit`	`.s-post-summary--stats-item`	Container for applying styling to the unit of a stat item
`.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--content-excerpt__sm`	`.s-post-summary--content-excerpt`	An optional content excerpt truncated at 1 line.
`.s-post-summary--content-excerpt__md`	`.s-post-summary--content-excerpt`	An optional content excerpt truncated at 3 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 s-post-summary--stats-item__emphasized">
            <span class="s-post-summary--stats-item-number">
                …
            </span>
            <span class="s-post-summary--stats-item-unit">
                votes
            </span>
        </div>
        <div class="s-post-summary--stats-item has-answers has-accepted-answer">
            @Svg.CheckmarkSm
            <span class="s-post-summary--stats-item-number">
                …
            </span>
            <span class="s-post-summary--stats-item-unit">
                answers
            </span>
        </div>
        <div class="s-post-summary--stats-item is-supernova">
            <span class="s-post-summary--stats-item-number">
                …
            </span>
            <span class="s-post-summary--stats-item-unit">
                views
            </span>
        </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>
        <h3 class="s-post-summary--content-title">
            <a href="…" class="s-link">…</a>
        </h3>
        <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="…" />
                    <span class="v-visible-sr">…</span>
                </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
            <span class="v-visible-sr">…</span>
        </a>
    </div>
</div>

95 votes

5 answers

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.

Paul Wright Paul Wright

1350

asked about 2 minutes ago

280 votes

4 answers

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 Aaron Shekey

asked about 3 minutes ago

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 Mithila Fox

created 15 days ago

1 vote

1 answer

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 dantey89

1,315

asked about 3 minutes ago

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 s-post-summary--stats-item__emphasized">
            <span class="s-post-summary--stats-item-number">
                …
            </span>
            <span class="s-post-summary--stats-item-unit">
                votes
            </span>
        </div>
        <div class="s-post-summary--stats-item">
            @Svg.CheckmarkSm
            <span class="s-post-summary--stats-item-number">
                …
            </span>
            <span class="s-post-summary--stats-item-unit">
                answers
            </span>
        </div>
        <div class="s-post-summary--stats-item">
            <span class="s-post-summary--stats-item-number">
                …
            </span>
            <span class="s-post-summary--stats-item-unit">
                views
            </span>
        </div>
    </div>
    <div class="s-post-summary--content">
        <h3 class="s-post-summary--content-title">
            <a href="…">…</a>
        </h3>
        <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="…" />
                    <span class="v-visible-sr">…</span>
                </a>
                <a href="…" class="s-user-card--link">…</a>
                <time class="s-user-card--time">…</time>
            </div>
        </div>
    </div>
</div>

0 votes

0 answers

2 views

Clicking through a viewpager2?

android android-studio android-viewpager2

Callum Osborne Callum Osborne asked about 1 minute ago

0 votes

1 answer

3 views

What permissions does github_token require for releases from a github action

github-actions

GuiFalourd GuiFalourd answered 4 minutes ago

0 votes

0 answers

5 views

Parentheses is Invalid Bash

linux bash docker shell

thatkingguy_ thatkingguy_ asked 8 minutes ago

Excerpts

Section titled Excerpts

Posts can be shown with or without excerpts. Stacks also provides various size

…
<p class="s-post-summary--content-excerpt s-post-summary--content-excerpt__sm">…</p>
<p class="s-post-summary--content-excerpt">…</p>
<p class="s-post-summary--content-excerpt s-post-summary--content-excerpt__md">…</p>
<p class="s-post-summary--content-excerpt s-post-summary--content-excerpt__lg">…</p>

95 votes

5 answers

104k views

How to generate the JPA entity Metamodel?

java hibernate jpa annotation-processing metamodel

Paul Wright Paul Wright

1350

asked about 2 minutes ago

95 votes

5 answers

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. Is anyone aware of a fully functional implementation of this API (to generate the Metamodel as opposed to creating the metamodel classes manually)? It would be awesome if someone also knows the steps for setting this up in Eclipse (I assume it's as simple as setting up an annotation processor, but you never know).

java hibernate jpa annotation-processing metamodel

Paul Wright Paul Wright

1350

asked about 2 minutes ago

95 votes

5 answers

104k views

How to generate the JPA entity Metamodel?

java hibernate jpa annotation-processing metamodel

Paul Wright Paul Wright

1350

asked about 2 minutes ago

95 votes

5 answers

104k views

How to generate the JPA entity Metamodel?

java hibernate jpa annotation-processing metamodel

Paul Wright Paul Wright

1350

asked about 2 minutes ago

95 votes

5 answers

104k views

How to generate the JPA entity Metamodel?

java hibernate jpa annotation-processing metamodel

Paul Wright Paul Wright

1350

asked about 2 minutes ago

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">
        <h3 class="s-post-summary--content-title">
            <a href="…">…</a>
        </h3>
        <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 s-post-summary--stats-item__emphasized">
                    <span class="s-post-summary--stats-item-number">
                        …
                    </span>
                    <span class="s-post-summary--stats-item-unit">
                        votes
                    </span>
                </div>
                <div class="s-post-summary--stats-item has-answers has-accepted-answer">
                    @Svg.CheckmarkSm Accepted answer
                </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="…" />
                        <span class="v-visible-sr">…</span>
                    </a>
                    <a href="…" class="s-user-card--link">…</a>
                    <time class="s-user-card--time">…</time>
                </div>
            </div>
        </div>
    </div>
</div>

2 votes

2 answers

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 karel asked 3 minutes ago

2 votes

Accepted answer

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 Aaron Shekey answered 1 minute ago

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 4c74356b41 answered 3 minutes ago

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">
    <span class="s-post-summary--stats-item-number">
        2
    </span>
    <span class="s-post-summary--stats-item-unit">
        answers
    </span>
</div>

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

<!-- Has accepted answers -->
<div class="s-post-summary--stats-item has-answers has-accepted-answer">
    @Svg.CheckmarkSm
    <span class="s-post-summary--stats-item-number">
        5
    </span>
    <span class="s-post-summary--stats-item-unit">
        answers
    </span>
</div>

3 votes

0 answers

32 views

12 votes

2 answers

145 views

95 votes

5 answers

380 votes

Hotness

Section titled Hotness

Post stats also have various states of hotness and display in corresponding shades of orange.

Default
Warm
Hot
Supernova

<!-- Default views -->
<div class="s-post-summary--stats-item">
    <span class="s-post-summary--stats-item-number">
        23
    </span>
    <span class="s-post-summary--stats-item-unit">
        views
    </span>
</div>

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

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

<!-- Supernova -->
<div class="s-post-summary--stats-item is-supernova">
    <span class="s-post-summary--stats-item-number">
        100k
    </span>
    <span class="s-post-summary--stats-item-unit">
        views
    </span>
</div>

3 votes

0 answers

23 views

28 votes

3 answers

1k views

92 votes

10 answers

10k views

126 votes

18 answers

100k views

States

Section titled States

Post summaries change their appearance based on being watched, ignored, or deleted. Articles can also have varying draft states.

<div class="s-post-summary s-post-summary__pinned">
    <div class="s-post-summary--stats">
        <div class="s-post-summary--stats-item s-badge s-badge__icon s-badge__muted s-badge__filled">
            @Svg.TackSm
            Pinned
        </div>
        …
    </div>
    …
 </div>

<div class="s-post-summary s-post-summary__watched">
    …
    <a class="s-tag s-tag__watched">
        …
    </a>
    …
</div>

<div class="s-post-summary s-post-summary__ignored">
    …
    <a class="s-tag s-tag__ignored">
        …
    </a>
    …
</div>

<div class="s-post-summary s-post-summary__deleted">
    <div class="s-post-summary--stats">
        <div class="s-post-summary--stats-item s-badge s-badge__icon s-badge__danger s-badge__filled">
            @Svg.TrashSm
            Deleted
        </div>
        …
    </div>
    …
 </div>

Pinned

10 votes

12 views

1 minute read

Knowledge Article

Network graph of popular tags on Stack Overflow

I wanted to see how different tags related to each other. The below graph depicts associations between popular tags on our site. Description of analysis: I started looking at the 1000 most popular tags on questions in 2021. I created a list of tags cross joined by the question ID (so if a question contains tags for both Python and Numpy, it would show up in my list). I scaled up by the number of answers each question received (noting that some tag combos had 0 answers) -and then counted each distinct combination of each tag. Due to limitations in graphing, I only displayed the top ~2500 tag combinations - which accounts for tags combos that had more than 40 answers over the entire year.

data data-insights

Aaron Shekey Aaron Shekey

1,025

posted 1 minute ago

10 votes

2 answers

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 asp.net asp.net-mvc

Nimantha Nimantha

5,337

modified 18 minutes ago

3 votes

2 answers

205 votes

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.

regex php redirect parameters wildcard

Jase Wolf Jase Wolf

modified 22 minutes ago

Deleted

0 votes

0 answers

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 Joy

3,622

asked 38 minutes ago

Draft

-3 votes

541 views

4 comments

1 min read

How-to guide

How to make sql_mode empty on Cloud SQL

Cloud SQL allows users to customize several flags that allow you to adjust options and configure and tune a database instance. In the case of the sql_mode flag, there are several options that are

google-cloud-sql sql-mode sqlmod

gabidavila gabidavila

asked 38 minutes ago

Review

26 votes

2k views

1 comment

1 min read

How-to Guide

How to make sql_mode empty on Cloud SQL

In Android apps that use Firebase Authentication, you can always get the user who is currently signed in with code like: FirebaseAuth auth = FirebaseAuth.getInstance(); FirebaseUser user = auth.get

firebase-realtime-database firebase-authentication

Frank van Puffelen Frank van Puffelen

464.3k

asked 38 minutes ago

Closed

0 votes

12 views

How-to Guide

How to make sql_mode empty on Cloud SQL

In Android apps that use Firebase Authentication, you can always get the user who is currently signed in with code like: FirebaseAuth auth = FirebaseAuth.getInstance(); FirebaseUser user = auth.get

firebase-realtime-database firebase-authentication

Frank van Puffelen

464.3k

asked 38 minutes ago

Archived

-22 votes

1k views

5 comments

1 min read

Announcement

Faster Cloud Storage transfers using the gcloud command-line

We’re pleased to announce gcloud storage, a new set of Cloud Storage commands in Cloud SDK that includes a new approach to parallelization that can accelerate both small and large data migrations.

google-cloud-storage gcloud gsutil

Frank van Puffelen thomasmaclean

asked 38 minutes ago