website·Indexed 29 days ago
https://witty-coast-024eee41e.6.azurestaticapps.netResources for managing and publishing content, featuring a library of components such as ComparisonBlock, Star Reviews, Key Features, Quote Component, and Elite Eight. Includes guides for creating blog posts, press releases, and pages using Hygraph CMS and Docusaurus.
blog/ directory using the naming convention YYYY-MM-DD-title.md.---
slug: greetings
title: Greetings!
authors:
- name: Joel Marcey
title: Co-creator of Docusaurus 1
url: https://github.com/JoelMarcey
image_url: https://github.com/JoelMarcey.png
- name: Sébastien Lorber
title: Docusaurus maintainer
url: https://sebastienlorber.com
image_url: https://github.com/slorber.png
tags: [greetings]
---
Congratulations, you have made your first post!
Feel free to play around and edit this post as much as you like.Hygraph supports the insertion of pre-built components directly into the content section of a page. Available components include:
For specialized components such as quotes or comparison tables, refer to the Beauty Playbook Components documentation.
docs directory. For example, creating docs/hello.md will make the document available at the URL path /docs/hello.# Hello
This is my **first Docusaurus document**!export const Highlight = ({children, color}) => (
<span
style={{
backgroundColor: color,
borderRadius: '20px',
color: '#fff',
padding: '10px',
cursor: 'pointer',
}}
onClick={() => {
alert(`You clicked the color ${color} with label ${children}`)
}}>
{children}
</span>
);
This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !The Star Reviews component displays a block of text containing a rating and the number of reviews. To use it, copy the component code and paste it into the content section of a BP Post in Hygraph. The component accepts a ratings array of objects, where each object defines a specific rating entry with the following properties:
rating: The numerical rating value.imgSrc: The URL source for the rating image.reviews: The number of reviews to display.height: The height of the image.width: The width of the image.imageClassName: CSS classes for styling the image (e.g., Tailwind CSS classes). <StarRating ratings={[
{
rating: 4.5,
imgSrc: "https://us-west-2.graphassets.com/AalLHDRueT6SDLkGLppQVz/cm9ivig4dpt4g07n83a2d9k5m",
reviews: 4,
height: 80,
width: 80,
imageClassName: "w-10 h-10"
},
{
rating: 4.8,
imgSrc: "https://us-west-2.graphassets.com/AalLHDRueT6SDLkGLppQVz/cm9ivig9vq2q208lfn0myyfzh",
reviews: 12,
height: 60,
width: 120,
imageClassName: "w-32 h-auto"
},
{
rating: 4.2,
imgSrc: "https://us-west-2.graphassets.com/AalLHDRueT6SDLkGLppQVz/cm9ivig4lpt4l07n86wujs5dj",
reviews: 8,
height: 70,
width: 200,
imageClassName: "w-42 h-auto"
}
]} />/admin/table-editor. To create a reusable starting point for new comparison tables, create a new table and include -template in the table name.blog/ directory. It also provides a blog index page, a tag system, and an RSS feed. To create a post, create a markdown file in the blog/ folder using a filename pattern like YYYY-MM-DD-title.md. The post's URL is determined by the slug defined in the front matter.---
slug: greetings
title: Greetings!
authors:
- name: Joel Marcey
title: Co-creator of Docusaurus 1
url: https://github.com/JoelMarcey
image_url: https://github.com/JoelMarcey.png
- name: Sébastien Lorber
title: Docusaurus maintainer
url: https://sebastienlorber.com
image_url: https://github.com/slorber.png
tags: [greetings]
---
Congratulations, you have made your first post!
Feel free to play around and edit this post as much as you like.src/pages directory. The file system path determines the URL route of the page.src/pages/index.js -> localhost:3000/
src/pages/foo.md -> localhost:3000/foo
src/pages/foo/bar.js -> localhost:3000/foo/barComparisonBlock component creates a two-column layout to compare two companies or products. It is used by pasting the component into the content section of a BP Post in Hygraph. The component accepts text or markdown content within two <div> tags: the first <div> renders in the left column (Company A) and the second <div> renders in the right column (Company B).<ComparisonBlock
companyA="VAGARO"
companyB="GLOSS GENIUS"
companyAStatus="check"
companyBStatus="x"
>
<div>
Content for Company A (Left Column). Supports markdown.
</div>
<div>
Content for Company B (Right Column). Supports markdown.
</div>
</ComparisonBlock>:::) to create themed admonitions and callouts, such as tip or danger.:::tip[My tip]
Use this awesome feature option
:::
:::danger[Take care]
This action is dangerous
:::To create a new page in Hygraph CMS, navigate to the Content section and add a new entry to the Page content type. You must configure the following fields:
After filling in the details, click 'Save' to keep the page as a draft or 'Save & Publish' to make it live. Note that new pages require a site build and may take a few hours to appear live.