diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 466d0ba332..7b57392ca3 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,17 +1,29 @@ +> [!NOTE] +> You may find that there are errors for the `vale/lint` job that are unrelated to your change. Our prose linter checks the whole file when a change is made so if there are existing issues on the page they will be flagged. You can just leave these errors and the CircleCI docs team will address them for you. Our prose linter is advisory to help all contributors create content that conforms to our style guide. The linter feedback is advisory only and will not prevent changes from being published. + # Description What did you change? + # Reasons -Why did you make these changes? +Why did you make these changes? What problem does this solve? + + +# Content checks +Please follow our style when contributing to CircleCI docs. View our [style guide](https://circleci.com/docs/style/style-guide-overview) or check out our [CONTRIBUTING.md](../CONTRIBUTING.md) for more information. -# Content Checklist -Please follow our style when contributing to CircleCI docs. Our style guide is here: [https://circleci.com/docs/style/style-guide-overview](https://circleci.com/docs/style/style-guide-overview). +**Preview your changes:** +- To view the Vale linter results, select the `ci/circleci: lint` job at the bottom of your PR. You will be redirected to the `vale/lint` job output in CircleCI. +- To preview your changes, select the `ci/circleci: build` job at the bottom of your PR, then select the Artifacts tab and select `index.html` to open a preview version of the docs site built for your latest commit. -Please take a moment to check through the following items when submitting your PR (this is just a guide so will not be relevant for all PRs): +Take a moment to check through the following items when submitting your PR (this is just a guide so will not be relevant for all PRs): +**Content structure:** - [ ] Break up walls of text by adding paragraph breaks. - [ ] Consider if the content could benefit from more structure, such as lists or tables, to make it easier to consume. -- [ ] Keep the title between 20 and 70 characters. - [ ] Consider whether the content would benefit from more subsections (h2-h6 headings) to make it easier to consume. -- [ ] Check all headings h1-h6 are in sentence case (only first letter is capitalized). - [ ] Include relevant backlinks to other CircleCI docs/pages. + +**Formatting:** +- [ ] Keep the title between 20 and 70 characters. +- [ ] Check all headings h1-h6 are in sentence case (only first letter is capitalized). diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md index 53d894e4a5..3244a35fdd 100644 --- a/ARCHITECTURE.md +++ b/ARCHITECTURE.md @@ -1,6 +1,6 @@ -# CircleCI Docs Static Site: Architecture +# CircleCI docs site: Architecture -This document provides an in-depth look at the architecture of the CircleCI Docs Static Site project. +This document provides an in-depth look at the architecture of the CircleCI docs site project. ## Table of Contents - [Overview](#overview) @@ -12,7 +12,7 @@ This document provides an in-depth look at the architecture of the CircleCI Docs ## Overview -The CircleCI Docs Static Site is built using [Antora](https://antora.org/), a multi-repository documentation site generator. The project is structured as a collection of components, each represented by a directory in the `docs/` folder. +The CircleCI docs site is built using [Antora](https://antora.org/), a multi-repository documentation site generator. The project is structured as a collection of components, each represented by a directory in the `docs/` folder. ### Key Architectural Principles diff --git a/CONTENT_AUTHORING.md b/CONTENT_AUTHORING.md index 50c1d6d4a8..5ca3c922cc 100644 --- a/CONTENT_AUTHORING.md +++ b/CONTENT_AUTHORING.md @@ -1,6 +1,6 @@ -# CircleCI Docs Static Site: Content Authoring Guide +# CircleCI docs content authoring guide -This guide provides comprehensive information for authors contributing content to the CircleCI Docs Static Site. +This guide provides comprehensive information for authors contributing content to the CircleCI docs site. ## Table of Contents - [Content Organization](#content-organization) @@ -19,7 +19,7 @@ The CircleCI documentation is organized into logical components, each focusing o | Component | Description | Path | |-----------|-------------|------| | `root` | Home and landing pages | `docs/root/` | -| `guides` | How-to guides and tutorials | `docs/guides/` | +| `guides` | Feature and usage docs, how-to guides and tutorials | `docs/guides/` | | `reference` | API and configuration references | `docs/reference/` | | `orbs` | CircleCI orbs documentation | `docs/orbs/` | | `server-admin` | Server administration guides | `docs/server-admin-4.*/` | @@ -47,265 +47,12 @@ component/ ## AsciiDoc Essentials -The CircleCI Docs Static Site uses [AsciiDoc](https://asciidoc.org/) for content authoring. Here's how to use it effectively: +The CircleCI docs site uses [AsciiDoc](https://asciidoc.org/) for content authoring. For a guide to using AsciiDoc and writing to follow the CircleCI docs style, see the following pages: -### Basic Syntax +* [Style guide](https://circleci.com/docs/contributors/docs-style/) +* [Template pages](https://github.com/circleci/circleci-docs/tree/main/docs/contributors/modules/templates/pages) -```asciidoc -= Page Title -:description: A brief description of the page content -:page-toclevels: 3 - -== Section Heading -This is a paragraph of text. - -=== Subsection Heading -Another paragraph with *bold text* and _italic text_. - -* Bulleted list item 1 -* Bulleted list item 2 -** Nested list item - -. Numbered list item 1 -. Numbered list item 2 -.. Nested numbered item -``` - -### Document Attributes - -Document attributes control various aspects of rendering: - -```asciidoc -= Page Title -:description: Used for SEO and meta description -:page-toclevels: 3 # Controls table of contents depth -:page-layout: default # Page layout template -:experimental: # Enables experimental features -:icons: font # Uses font icons -``` - -### Page Title Badges - -Add visual badges next to page titles to indicate content status (e.g., Preview, Beta, Deprecated): - -#### Basic Usage - -```asciidoc -= Page Title -:page-badge: Preview -``` - -This displays a simple badge with default styling (black text, border, no background). - -#### Custom Styling with Tailwind Classes - -```asciidoc -= Page Title -:page-badge: Preview -:page-badge-classes: text-white bg-orange-500 border border-orange-600 -``` - -#### Custom Colors with Hex Values - -```asciidoc -= Page Title -:page-badge: Preview -:page-badge-bg: #FF6B35 -:page-badge-border: #C44D2C -:page-badge-classes: text-white -``` - -#### Common Badge Styles - -**Preview (Orange):** -```asciidoc -:page-badge: Preview -:page-badge-classes: text-white bg-orange-500 border border-orange-600 -``` - -**New (Green):** -```asciidoc -:page-badge: New -:page-badge-classes: text-white bg-green-500 border border-green-600 -``` - -**Deprecated (Red):** -```asciidoc -:page-badge: Deprecated -:page-badge-classes: text-white bg-red-500 border border-red-600 -``` - -#### Badge Attributes Reference - -- **`:page-badge:`** - The text to display in the badge (required) -- **`:page-badge-classes:`** - Tailwind CSS classes for styling (optional, defaults to `text-terminal-black border`) -- **`:page-badge-bg:`** - Hex color code for background (optional, overrides classes) -- **`:page-badge-border:`** - Hex color code for border (optional, requires `page-badge-bg`) - -### Admonitions - -Use admonitions to call attention to important information: - -```asciidoc -NOTE: This is a note admonition. - -TIP: This provides helpful advice. - -IMPORTANT: This is important information. - -WARNING: This is a warning. - -CAUTION: This requires special attention. -``` - -## Document Structure - -### Page Structure Template - -Use this template as a starting point for new pages: - -```asciidoc -= Page Title -:description: Concise description of the page content -:page-toclevels: 3 - -[abstract] --- -A brief introduction to what this page covers and why it's important. --- - -== First Major Section -Introduction to this section. - -=== Subsection -Content for the subsection. - -== Second Major Section -Content for the second major section. - -== Related Information -* xref:related-page.adoc[Related Page] -* xref:another-related-page.adoc[Another Related Page] -``` - -### Headings - -Use hierarchical headings to structure your content: - -```asciidoc -= Level 0 (Page Title) -== Level 1 -=== Level 2 -==== Level 3 -===== Level 4 -``` - -Avoid skipping levels, and don't go deeper than level 4 unless absolutely necessary. - -## Advanced Formatting - -### Code Blocks - -For code blocks with syntax highlighting: - -```asciidoc -[source,yaml] ----- -version: 2.1 -jobs: - build: - docker: - - image: cimg/node:18.0 - steps: - - checkout - - run: npm install - - run: npm test ----- -``` - -### Tables - -Create formatted tables: - -```asciidoc -.Table Title -[cols="1,1,2", options="header"] -|=== -|Column 1 |Column 2 |Column 3 - -|Row 1, Cell 1 -|Row 1, Cell 2 -|Row 1, Cell 3 - -|Row 2, Cell 1 -|Row 2, Cell 2 -|Row 2, Cell 3 -|=== -``` - -### Tabs - -Use tabs for showing different options: - -```asciidoc -[tabs] -==== -Tab A:: -+ --- -Content for Tab A --- -Tab B:: -+ --- -Content for Tab B --- -==== -``` - -### Collapsible Sections - -For long content that might be hidden initially: - -```asciidoc -.Click to expand -[%collapsible] -==== -This content is initially collapsed but can be expanded by clicking. -==== -``` - -## Navigation and Cross-References - -### Internal Cross-References - -Link to other pages within the documentation: - -```asciidoc -xref:page-name.adoc[Link Text] -``` - -To link to another component: - -```asciidoc -xref:component-name:page-name.adoc[Link Text] -``` - -To link to a specific section: - -```asciidoc -xref:page-name.adoc#section-id[Link Text] -``` - -### External Links - -Link to external resources: - -```asciidoc -link:https://circleci.com[CircleCI Website] -``` - -### Navigation Files +## Navigation Files The `nav.adoc` file defines the sidebar navigation structure: @@ -317,43 +64,6 @@ The `nav.adoc` file defines the sidebar navigation structure: * xref:advanced.adoc[Advanced Topics] ``` -## Working with Media - -### Images - -Include images with optional attributes: - -```asciidoc -image::filename.png[Alt Text,width=500,role=center] -``` - -Place image files in the `modules/ROOT/assets/images/` directory. - -### Videos - -Embed videos using the block image macro with a link: - -```asciidoc -.Video Title -video::video-id[youtube,width=640,height=360] -``` - -### Diagrams - -For complex diagrams, use image files created with diagramming software. - -For simple diagrams, you can use AsciiDoc's built-in diagramming through extensions like Asciidoctor Diagram. - -## Semantic Guidelines - -### Writing Style - -- Use clear, concise language -- Address the reader directly using "you" -- Use present tense whenever possible -- Break complex ideas into simple steps -- Use active voice instead of passive voice - ### Documentation Types Structure your content based on its purpose: @@ -365,11 +75,11 @@ Structure your content based on its purpose: ### Versioning Content -For version-specific content, use conditional statements: +For version-specific content, use negative conditional statements ([ifndef directive](https://docs.asciidoctor.org/asciidoc/latest/directives/ifdef-ifndef/)) : ```asciidoc -ifeval::["{serverversion}" == "4.0"] -This content is only visible for server version 4.0. +ifndef::aws +This content is only visible for non-AWS pages and sections endif::[] ``` @@ -391,18 +101,8 @@ Before submitting content for review, check that: All content should go through peer review: -1. Create a pull request with your changes -2. Request review from subject matter experts -3. Address any feedback or suggestions -4. Update based on technical accuracy review -5. Final editorial review for consistency and style - -### Common Feedback Points - -- Technical accuracy and completeness -- Structure and organization -- Language clarity -- Cross-referencing correctness -- Code sample functionality -- Image quality and relevance -- Navigation placement +1. Create a pull request with your changes. Code ownders will be pinged for review automatically (docs team and PM team). +2. Request review from subject matter experts, for most changes we will want a review from an engineer in the relevant team or the PM for the feature. The docs team can manage this process for you. +3. Address any feedback or suggestions. +4. Update based on technical accuracy review. +5. Final editorial review for consistency and style. \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 476081a99b..76a7975114 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,6 +1,6 @@ -# CircleCI Docs Static Site: Contributing Guide +# CircleCI docs site: Contributing Guide -This guide provides comprehensive information for contributors to the CircleCI Docs Static Site project. +This guide provides comprehensive information for contributors to the CircleCI docs project. ## Table of Contents - [Ways to Contribute](#ways-to-contribute) @@ -14,19 +14,18 @@ This guide provides comprehensive information for contributors to the CircleCI D ## Ways to Contribute -There are several ways to contribute to the CircleCI Docs Static Site: +There are several ways to contribute to the CircleCI docs project: 1. **Documentation content**: Add or improve documentation pages 2. **Technical improvements**: Enhance the site's functionality 3. **UI improvements**: Improve the user interface and experience 4. **Bug fixes**: Fix issues with the site or content -5. **Feature requests**: Suggest new features or improvements +5. **Feature requests**: Suggest new features or improvements. You can do this by submitting a [GitHub issue](https://github.com/circleci/circleci-docs/issues) or using the feedback form on the docs site itself. ### Types of Contributions Needed - Writing tutorials and how-to guides - Improving API and reference documentation -- Translating content - Fixing typos and clarifying explanations - Developing new UI components - Improving build performance @@ -45,7 +44,7 @@ There are several ways to contribute to the CircleCI Docs Static Site: 1. **Fork the repository**: - Visit [https://github.com/circleci/circleci-docs](https://github.com/circleci/circleci-docs) - - Click the "Fork" button to create your own copy + - Click the "Fork" button to create your own copy. If you are a CircleCI employee you can simply clone the repo rather than creating a fork. 2. **Clone your fork**: ```bash @@ -109,12 +108,12 @@ Example: `docs/add-kubernetes-guide` or `fix/broken-navigation` git commit -m "Your commit message" ``` - Commit message format: + Commit message format: ``` type(scope): Brief description - + Longer description if needed - + Fixes #123 ``` @@ -194,9 +193,10 @@ function performTask(input) { ### Types of Tests -- **Content validation**: Ensuring documentation is accurate -- **Link checking**: Verifying all links work correctly -- **UI testing**: Checking for visual and interactive issues +- **Content validation**: This is a manual text. As far as reasonably possible all docs changes and additions should be manually tested. A member of the CircleCI docs team (or other team) should run through the documented task following any steps outlined in the doc closely to check they are both correct and complete, no missing steps where users could get stuck. Changes to technical content should be reviewed by a member of the engineering team that owns the feature. +- **Content style checking**: We use [Vale](https://vale.sh/) for content linting. We have vale rules set up to enforce style. You can take a look at these rules in the `/styles` folder. Vale runs in our CI/CD pipeline so you can check for error and warnings when pushing your changes to GitHub. You can also install vale locally on your machine and run vale on the file you are editing or even using an [extension in your IDE](https://marketplace.visualstudio.com/items?itemName=chrischinchilla.vale-vscode). +- **Link checking**: Verifying all links work correctly. Links are checked as part of our CI build +- **UI testing**: Checking for visual and interactive issues (we do not currently have any UI testing set up) - **Build testing**: Ensuring the site builds correctly ### Running Tests @@ -208,7 +208,7 @@ function performTask(input) { Review the site locally for content issues. - **Link checking**: - The CI pipeline includes automatic link checking. + The CI pipeline includes automatic link checking. Check the outcome of the `Validate` job for issues. ## Documentation Guidelines @@ -251,31 +251,29 @@ All contributions go through a review process: - Are there adequate tests? - Does it follow project conventions? -### After Approval +During the review process further discussion might be needed. This will happen in comments in the PR. The docs team review might push changes to your branch to fix style and formatting issues but larger issues will be discussed first. + +The speed at which we can process changes will depend on the scope of the change and the existing workload that the docs team has at that time. We would try to respond to contributions within two days of submission. -Once your PR is approved: +### After Approval -1. It will be merged by a maintainer -2. Your contribution will be included in the next release -3. You'll be credited as a contributor +Once your PR is approved it will be merged by a maintainer. Your contribution will be published immediately (well, around 4 minutes for the pipeline to build!) ## Release Process ### Release Schedule -The CircleCI Docs Static Site follows a continuous delivery model: +The CircleCI docs site follows a continuous delivery model: - Documentation changes: Released as soon as they're approved -- Technical changes: Released on a scheduled basis +- Technical changes: Released as and when ready - Emergency fixes: Released as needed ### Release Process 1. Changes are merged to `main` 2. CI pipeline builds and tests the site -3. Automatic deployment to staging environment -4. Review and testing in staging -5. Deployment to production +3. Deployment to production ### Versioning @@ -295,12 +293,4 @@ If you need help with your contribution: - **Discussions**: Use GitHub Discussions for questions - **Documentation**: Refer to the technical docs -## Recognition - -Contributors are recognized in several ways: - -- Attribution in commit history -- Inclusion in the contributors list -- Recognition in release notes for significant contributions - -Thank you for contributing to the CircleCI Docs Static Site! +Thank you for contributing to the CircleCI docs site! diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md index 3807f3c73e..36b0bfb047 100644 --- a/DEVELOPMENT.md +++ b/DEVELOPMENT.md @@ -1,6 +1,6 @@ -# CircleCI Docs Static Site: Development Guide +# CircleCI docs site: Development Guide -This document provides comprehensive guidance for developers working on the CircleCI Docs Static Site. +This document provides comprehensive guidance for developers working on the CircleCI docs site. ## Table of Contents - [Development Environment Setup](#development-environment-setup) diff --git a/README.md b/README.md index d1ffcf89a9..dd45f7252c 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,9 @@ -# CircleCI Docs Static Site: Technical Documentation +# CircleCI docs site: technical documentation -Welcome to the comprehensive technical documentation for the CircleCI Docs Static Site project. This documentation is designed to help developers, content authors, and contributors understand the project's architecture, workflow, and best practices. +Welcome to the comprehensive technical documentation for the CircleCI docs project. This documentation is designed to help developers, content authors, and contributors understand the project's architecture, workflow, and best practices. + +## Table of contents -## Table of Contents - [Overview](#overview) - [Documentation Files](#documentation-files) - [Getting Started](#getting-started) @@ -10,7 +11,7 @@ Welcome to the comprehensive technical documentation for the CircleCI Docs Stati ## Overview -The CircleCI Docs Static Site is a documentation platform built using [Antora](https://antora.org/), a static site generator designed for multi-repository documentation. This project combines: +The CircleCI docs site is a documentation platform built using [Antora](https://antora.org/), a static site generator designed for technical documentation. This project combines: - **Component-based architecture**: Organized documentation into logical sections - **AsciiDoc content**: Powerful markup language for technical documentation @@ -41,47 +42,25 @@ This technical documentation consists of several specialized files: cd circleci-docs npm ci ``` -2. **Make sure you've cloned server-4* branches (Server Administration Docs)** - -```bash - npm run fetch-server-branches - ``` -3. **Start the development server**: +2. **Start the development server**: ```bash npm run start:dev ``` -4. **Test the setup** (optional): - ```bash - ./scripts/test-setup.sh - ``` - ### For API Documentation -This project includes integrated API documentation built with Redocly: +This project includes integrated API documentation built with Redocly. See [API_DOCS_INTEGRATION.md](API_DOCS_INTEGRATION.md) for details. -1. **Test the integration**: - ```bash - ./scripts/test-setup.sh - ``` - -2. **Build API docs**: - ```bash - npm run build:api-docs - ``` - -3. **Customize API docs**: - - Replace `api-spec.yaml` with your OpenAPI specification - - Edit `redocly.yaml` for styling and configuration - - See [API_DOCS_INTEGRATION.md](API_DOCS_INTEGRATION.md) for details +The API docs are built along with the docs site. ### Technical Reference -3. **Review the architecture**: - - Read [ARCHITECTURE.md](ARCHITECTURE.md) for system design - - Review [DEVELOPMENT.md](DEVELOPMENT.md) for development workflow - - Consult [TECHNICAL_REFERENCE.md](TECHNICAL_REFERENCE.md) for detailed specs +You can review the CircleCI docs site architechture in the following documents: + +* [ARCHITECTURE.md](ARCHITECTURE.md) for system design +* [DEVELOPMENT.md](DEVELOPMENT.md) for development workflow +* [TECHNICAL_REFERENCE.md](TECHNICAL_REFERENCE.md) for detailed specs ### For Content Authors @@ -94,9 +73,11 @@ This project includes integrated API documentation built with Redocly: - Start the development server to preview changes 3. **Create or edit content**: + - Check whether the content you want to add or edit already exists. Consider whether you need to add a new page or edit existing material + - Check the CircleCI docs style guide and templates [here](https://circleci.com/docs/contributors/docs-style/) - Follow the AsciiDoc formatting guidelines - Use the appropriate component structure - - Test your content locally + - Test your content locally. You can also preview a change by checking the [CircleCI build assets](https://app.circleci.com/pipelines/github/circleci/circleci-docs) ## Contributing diff --git a/TECHNICAL_REFERENCE.md b/TECHNICAL_REFERENCE.md index ee09c5b09f..0342a5b183 100644 --- a/TECHNICAL_REFERENCE.md +++ b/TECHNICAL_REFERENCE.md @@ -1,6 +1,6 @@ -# CircleCI Docs Static Site: Technical Reference +# CircleCI docs site: Technical Reference -This technical reference provides detailed information about the CircleCI Docs Static Site's components, configuration options, and integration points. +This technical reference provides detailed information about the CircleCI docs site's components, configuration options, and integration points. ## Table of Contents - [Antora Configuration](#antora-configuration) diff --git a/docs/contributors/modules/ROOT/nav.adoc b/docs/contributors/modules/ROOT/nav.adoc index d5cb1b1858..e700fcc521 100644 --- a/docs/contributors/modules/ROOT/nav.adoc +++ b/docs/contributors/modules/ROOT/nav.adoc @@ -8,6 +8,7 @@ ** xref:docs-style:using-images.adoc[Using images] ** xref:docs-style:using-tables.adoc[Using tables] ** xref:docs-style:using-code-samples.adoc[Using code samples] +** xref:docs-style:title-badges.adoc[Page title badges] * Content templates ** xref:templates:template-conceptual.adoc[Template for a conceptual page] ** xref:templates:template-how-to.adoc[Template for a how-to page] diff --git a/docs/contributors/modules/docs-style/pages/formatting.adoc b/docs/contributors/modules/docs-style/pages/formatting.adoc index 312f6e0bb2..012abc6c40 100644 --- a/docs/contributors/modules/docs-style/pages/formatting.adoc +++ b/docs/contributors/modules/docs-style/pages/formatting.adoc @@ -97,4 +97,41 @@ This is a longer admonition with an ordered list: . Step 3 **** +== Using tabs + +Use tabs for showing different options: + +[source,adoc] +---- +[tabs] +==== +Tab A:: ++ +-- +Content for Tab A +-- +Tab B:: ++ +-- +Content for Tab B +-- +==== +---- + +Looks like: + +[tabs] +==== +Tab A:: ++ +-- +Content for Tab A +-- +Tab B:: ++ +-- +Content for Tab B +-- +==== + pass:[] diff --git a/docs/contributors/modules/docs-style/pages/title-badges.adoc b/docs/contributors/modules/docs-style/pages/title-badges.adoc new file mode 100644 index 0000000000..840de609f1 --- /dev/null +++ b/docs/contributors/modules/docs-style/pages/title-badges.adoc @@ -0,0 +1,49 @@ += Page title badges + +Add visual badges next to page titles to indicate content status. Currently we are using a `Preview` badge to indicate when a page is for a feature in open or closed preview. + +A page is closed preview will display the `Preview` badge and **will not be** listed in the navigation. +A page in open preview will display the `Preview` badge and **will be** listed in the navigation. + +== Basic usage + +```asciidoc += Page Title +:page-badge: Preview +``` + +This displays a simple badge with default styling (black text, border, no background). + +== Custom styling with Tailwind classes + +```asciidoc += Page Title +:page-badge: Preview +:page-badge-classes: text-white bg-orange-500 border border-orange-600 +``` + +== Custom colors with hex values + +```asciidoc += Page Title +:page-badge: Preview +:page-badge-bg: #FF6B35 +:page-badge-border: #C44D2C +:page-badge-classes: text-white +``` + +== Common badge styles + +**Preview:** +```asciidoc +:page-badge: Preview +``` + +Currently we are not adding styling to these badges but this may change in future. + +== Badge attributes reference + +- **`:page-badge:`** - The text to display in the badge (required) +- **`:page-badge-classes:`** - Tailwind CSS classes for styling (optional, defaults to `text-terminal-black border`) +- **`:page-badge-bg:`** - Hex color code for background (optional, overrides classes) +- **`:page-badge-border:`** - Hex color code for border (optional, requires `page-badge-bg`) \ No newline at end of file