Skip to main content

Post summary

Razor

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

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.

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.

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.

java hibernate jpa annotation-processing metamodel
placeholder avatar Paul Wright Paul Wright
  • 1350
menu
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
placeholder avatar Aaron Shekey Aaron Shekey
  • 205
menu
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
placeholder avatar Mithila Fox Mithila Fox
  • 323
menu
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
placeholder avatar dantey89 dantey89
  • 1,315
menu

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>

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
placeholder avatar Paul Wright Paul Wright
  • 1350
menu
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
placeholder avatar Paul Wright Paul Wright
  • 1350
menu
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
placeholder avatar Paul Wright Paul Wright
  • 1350
menu
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
placeholder avatar Paul Wright Paul Wright
  • 1350
menu
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
placeholder avatar Paul Wright Paul Wright
  • 1350
menu

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
placeholder avatar karel karel
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
placeholder avatar Aaron Shekey 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
placeholder avatar 4c74356b41 4c74356b41

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

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

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
placeholder avatar Aaron Shekey Aaron Shekey
  • 1,025
menu
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
placeholder avatar Nimantha Nimantha
  • 5,337
menu
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
placeholder avatar Jase Wolf Jase Wolf
  • 93
menu
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
placeholder avatar Joy Joy
  • 3,622
menu
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
placeholder avatar gabidavila gabidavila
  • 874
menu
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
placeholder avatar Frank van Puffelen Frank van Puffelen
  • 464.3k
menu
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
placeholder avatar Frank van Puffelen
  • 464.3k
menu
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
placeholder avatar Frank van Puffelen thomasmaclean
  • 165
menu
Deploys by Netlify