Social
Usage
Presentation
This is the display format for the ShSocial constructor, designed to showcase Social Media posts.
X (Twitter) embeded post
NASA
@NASA
A Progress cargo spacecraft is scheduled to lift off from Baikonur Cosmodrome in Kazakhstan this week with supplies for the @Space_Station crew. NASA+ coverage begins at 10pm ET Wednesday, Feb. 14 (0300 UTC Feb. 15): go.nasa.gov/3HVlCc6 
This is how it is constructed:
::ShSocial
---
src: "1757162766115176926"
---
::
Facebook Embeded Post
This is how it is constructed:
::ShSocial
---
src: "https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FNASA%2Fposts%2Fpfbid0KzFf9KDNS8zh4Cngx22ec2aeRHBYcQk4KkescRzoW2hUMpH6Yuc13smPmLww95qNl&show_text=true&width=500"
---
::
LinkedIn Embeded Post
This is how it is constructed:
::ShSocial
---
src: "https://www.linkedin.com/embed/feed/update/urn:li:share:7161263277866422272"
---
::
Props
These are the properties and attributes associated to the ShSocial constructor:
Properties and Attributes Description
The ShSocial constructor creates a display format showcasing a Social Media post. Below is a detailed description of the properties and attributes used in the ShSocial constructor.
| Property | Attributes | Default | Description |
|---|---|---|---|
ui |
n/a | n/a | The ui property in the ShSocial constructor is a comprehensive configuration object that allows for the customization of various styling aspects of the Social Media component. Each attribute within the ui property targets a specific part of the Social Media display, providing detailed control over its appearance and layout. Below is a detailed description of each attribute within the ui property: |
wrapper |
config.wrapper |
Defines the overall styling for the container that holds all the elements of the Social Media post. The attribute shadow-xl is used to provide a shadow effect around the wrapper. |
|
src |
n/a | n/a | The source URL of the Social Media post; Facebook, LinkedIn, X (formally Twitter) to be displayed. |
description |
n/a | n/a | Intented to be used as a help to content writter. Doesn`t render on website. |
Config
These style properties can be modified via ui and are stored in the ShSocial.ts file:
export default {
wrapper: "flex p-4 justify-center",
facebook: "bg-white dark:bg-white rounded-xl border",
linkedin: "",
twitter: "bg-white dark:bg-white",
// Default Tailwind CSS values
default: {
}
}
Class Descriptions
These style properties represent the class values utilized in the ShSocial constructor. These values are customizable and can be strengthened or override through the ui properties' attribute.
wrapper
- Value:
"flex p-4 justify-center" - Description: This defines the overall styling for the container holding the social media elements. The value
"flex p-4 justify-center"indicates that the wrapper uses a flexible box layout (flex), has padding of 4 units (p-4), and centers its content horizontally (justify-center).
- Value:
"bg-white dark:bg-white rounded-xl border" - Description: This specifies styles for the Facebook element. The value
"bg-white dark:bg-white rounded-xl border"includes a white background (bg-white) that remains white in dark mode (dark ), rounded corners with an extra-large radius (rounded-xl), and a border (border).
- Value:
"" - Description: This is an empty placeholder for additional LinkedIn styles that can be customized if needed.
- Value:
"bg-white dark:bg-white" - Description: This specifies styles for the Twitter element. The value "bg-white dark:bg-white" includes a white background (bg-white) that remains white in dark mode (dark ).
default
- Value:
{} - Description: This object is intended to hold any default Tailwind CSS values that might be used as fallback or initial styles.
These style properties ensure that the ShSocial component is visually appealing and flexible, allowing for a wide range of customization to meet specific design requirements.