Added code to have an initial site using doc core

.gitignore

@@ -45,3 +45,6 @@ size-plugin.json
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+.yalc
+yalc.lock

packages/site/package.json

@@ -7,13 +7,17 @@
     "generate:content": "patternfly-doc-core convert-to-mdx ../documentation-site/patternfly-docs/content/",
     "dev": "patternfly-doc-core start",
     "build": "patternfly-doc-core build",
+    "preview": "npx wrangler pages dev ./dist",
     "serve": "patternfly-doc-core serve",
     "sync": "patternfly-doc-core sync",
+    "deploy": "npx wrangler pages deploy ./dist",
     "init:docs": "patternfly-doc-core init"
   },
   "dependencies": {
-    "@patternfly/patternfly-doc-core": "^1.9.0",
-    "astro": "^5.7.13"
+    "@patternfly/patternfly-doc-core": "latest",
+    "@patternfly/react-icons": "^6.2.2",
+    "astro": "^5.7.13",
+    "wrangler": "^4.20.0"
   },
   "devDependencies": {
     "tsx": "^4.19.0"

packages/site/pf-docs.config.mjs

@@ -4,7 +4,7 @@ export const config = {
     // documentation core with a content identifier of 'content':
     {
       base: 'src/',
-      pattern: "**/*.{md,mdx}",
+      pattern: "**/*.md*",
       name: 'content'
     },
     //

packages/site/src/content/design-guidelines/charts/about/about.mdx

@@ -0,0 +1,79 @@
+---
+id: About charts
+section: charts
+sortValue: 1
+---
+
+_Charts are only available in React_
+
+A **chart** visualizes data in an application. The type of chart you use will depend on your use case and the type of data you need to display.
+
+## Elements
+<img src="./img/axis-labels.png" alt="Chart with axis labels" width="713"/> 
+
+1. **Title:** Titles should be left-aligned and appear above your chart.
+2. **Axis labels and scale values:**  We recommend using tick marks to clearly mark scale values on the y-axis. The text for axis labels and scale values should be 12px font in standard text color. All scale values should be equally distributed across the axis and the axis label should fall outside the scale values, centered with the axis line.
+3. **Legends:** We recommend using legends when charts include more than one variable and therefore use more than one color. When datasets are overlapping, an [interactive legend](#interactive-chart-legends) can be used. If space is not available to display names of horizontal and vertical axes, a legend must be added instead. The legend should list the colors that each variable obtains and the name of the variable. The text on the legend should be 14px size and standard text color. They can either be placed left-aligned to the right of the chart or centered below the chart.
+4. **Chart tooltip:** A tooltip will appear on hover over certain elements of a chart, like bars in a bar chart or segments in a donut chart. [Chart tooltips](/charts/tooltips) should display the specific values related to the element the user is hovering over. 
+
+## Chart types
+<img src="./img/chart-legend.png" alt="Image displaying what chart types to use when" width="1024"/> 
+
+- [Area chart](/charts/area-chart/design-guidelines): Use to show (potentially multiple) trends over a continuous scale (usually time).
+- [Bar chart](/charts/bar-chart/design-guidelines): Use to show and compare categories and their respective data point/value. Bar charts can be plotted vertically or horizontally. The axis that labels the bar is the category, the axis that marks the end point of the bar displays the data points/values.
+  - [Stacked bar chart](/charts/stack-chart/design-guidelines): Use to show and compare categorical data of more than one variable. Can be plotted vertically or horizontally.
+  - Vertical bar charts (category on the horizontal x axis): Use to show a progression of the categories (or sequential variables). The most common bar chart. 
+  - Horizontal bar charts (category on the vertical y axis): Use to show nominal variables. Allows for more space for category labeling.
+- [Bullet chart](/charts/bullet-chart/design-guidelines): Use as an extension to the bar chart to measure data with thresholds and static ranges.
+- [Donut chart](/charts/donut-chart/design-guidelines): Use to show the relationship of a set of values to a whole or to show progress completion as a percentage. Donut charts are best used to display data with a small number of categories (example: 2-5 categories). Use the middle of the chart to highlight a data point.
+  - [Donut utilization](/charts/donut-utilization-chart/design-guidelines): Use to show utilization for an object as a percentage.
+  - [Donut utilization with threshold](/charts/donut-utilization-chart/design-guidelines#donut-chart---utilization-with-threshold): Use to show utilization for an object as a percentage in relation to threshold values.
+- [Line chart](/charts/line-chart/design-guidelines): Use to compare several data sets or to show data changes over a period of time. Line charts work best when small changes exist within the data.
+- [Pie chart](/charts/pie-chart/design-guidelines): Use to show percentages or proportional data. Can be used to show up to five or more data points.
+- [Sparkline](/charts/sparkline-chart/design-guidelines): Use to show how values change over time for multiple sets of data. Sparkline charts offer an alternative to the line chart when multiple lines need to be plotted. Axis values are not labeled, but a tooltip can be used to display the value at a given point.
+
+## Charts in cards
+If a chart lives in a card, the title of that chart will be placed on the header of that card instead of the chart. The rest of the chart guidelines should be followed for the chart itself.
+
+<img src="./img/chart-on-a-card.png" alt="Chart on a card" width="416"/>
+
+<img src="./img/sparkline-card.png" alt="Sparkline on a card" width="482"/>
+
+## Brush and zoom
+The brush and zoom properties allow for magnification of an area, bar, line, or stack chart. If desired, more advanced features can be added through [Victory](https://formidable.com/open-source/victory/guides/brush-and-zoom/).
+
+### Example
+
+<img src="./img/brush-and-zoom.png" alt="Brush and zoom" />
+
+1. **Window:** Click and drag to create a window around the section of the chart that you want to zoom in on.
+2. **Magnified chart:** The portion selected will appear above the full chart view.
+
+## Interactive chart legends
+For charts that graph more than one data set, use interactive legends to highlight or isolate certain data sets.  This would work well for [line](#line-chart), [area](#area-chart), or [stacked](#stacked-bar-charts) charts, where data sets can overlap.
+
+### Example
+On hover
+
+<img src="./img/interaction-legend-hover.png" alt="Interactive legend on hover" />
+
+1. **Legend:** When a user hovers over a legend label, opacity lowers for all other legend labels.
+2. **Chart:** Data corresponding to the hovered legend label is highlighted since opacity lowers for all other data sets, too. 
+
+On click
+
+<img src="./img/interaction-legend-hide.png" alt="Interactive legend hidden" />
+
+1. **Legend:** When a user clicks on a legend label, it becomes disabled and the color swatch is replaced with an eye-slashed icon.
+2. **Chart:** Data corresponding to the clicked legend label is hidden from view.
+
+## Develop with charts 
+
+Default styles in the [@patternfly/react-charts package](https://www.npmjs.com/package/@patternfly/react-charts) are aligned with our light theme. Charts work with PatternFly's light theme by default&mdash;you don't need to import anything else. 
+
+To support dark-themed charts, you must:
+1. Import the [@patternfly/patternfly package](https://www.npmjs.com/package/@patternfly/patternfly), so that you can use our global tokens.
+1. Import the stylesheet that contains dark theme styles by adding this line before importing your main application component: `import '@patternfly/patternfly/patternfly-charts.css';`
+    - Once you import this file, you'll have access to [all chart variables](https://www.npmjs.com/package/@patternfly/patternfly?activeTab=code). Beyond dark theme, you could use these variables to match the style of other UI elements to your chart styles. 
+
+To display the list of all available chart tokens, filter for "charts" in [the PatternFly design tokens table](/tokens/all-patternfly-tokens). 

packages/site/src/content/design-guidelines/charts/area-chart/area-chart.mdx

@@ -0,0 +1,16 @@
+---
+id: Area chart
+section: charts
+---
+An **area chart** is used to provide metrics for a single data point. While similar to a line chart in both form and function, it offers an area fill for visual emphasis. The area fill below the line also functions to indicate cumulative data.
+
+## Usage
+The most common use case for area charts is to show trending over a continuous scale (usually time). Use this chart type when you need to provide more visual emphasis than a simple [line chart](/charts/line-chart) offers. 
+
+You may stack area charts to compare more than one continuous data sets. Stacking area charts will put more emphasis on the difference between each visualized data set. 
+
+### Example
+<img src="./img/area-chart.png" alt="Area chart" width="489"/> 
+
+1. **Data area fill:** The area fill is presented below the data line. Data area fills use colors that conform with the [colors for charts](/charts/colors-for-charts).
+2. **Chart tooltip:** Use the chart tooltip to drill into the data related to any data point provided on your area chart.

packages/site/src/content/design-guidelines/charts/bar-chart/bar-chart.mdx

@@ -0,0 +1,23 @@
+---
+id: Bar chart
+section: charts
+---
+A **bar chart** is used to easily display two variables, one on the horizontal x-axis and one on the vertical y-axis. They are helpful to visualize and compare categorical data.
+
+## Usage
+Bar charts are a great way to show and compare categorical data. Unlike donut or pie charts that differentiate by angle area, bar charts differentiate by length. Because of this clearer differentiation, we recommend using bar charts over donut or pie charts in most cases.
+
+If you want to show continuous data over time, you may consider using a [line chart](/charts/line-chart) instead. If you wish to show the percentage utilization ratio between used and available, you should check out the [donut utilization chart](/charts/donut-utilization-chart).
+
+## Horizontal vs. vertical bar charts
+
+The orientation of bar charts is dependent on the data and space at hand. Any bar chart should be able to be displayed in either direction if applicable.
+
+#### Example
+<img src="./img/horizontal-bar-chart.png" alt="Horizontal bar chart" width="737"/>
+
+<br/>
+
+<img src="./img/vertical-bar-chart.png" alt="Vertical bar chart" width="559"/>
+
+A bar's height represents its value. All bars should be the same width, and the spacing between them should be equal, mimicking the spacing between axis values. For fill color recommendations, see [colors for charts](/charts/colors-for-charts).

packages/site/src/content/design-guidelines/charts/bullet-chart/bullet-chart.mdx

@@ -0,0 +1,13 @@
+---
+id: Bullet chart
+section: charts
+---
+A **bullet chart** can be thought of as an extension to a bar chart that measures a dynamic value with thresholds and target values. While similar to [donut utilization charts](/charts/donut-utilization-chart), bullet charts can show underages and overages of data (below 0% and above 100%), visualize horizontally or vertically, and pack large amounts of information into a compact space. 
+
+## Usage
+Bullet charts are most often used to measure sets of performance data or utilization. They can be used for similar use cases as [donut utilization with threshhold charts](/charts/donut-utilization-chart#donut-utilization-threshold-examples). For example, a user can use a bullet chart to measure values of a set compared to the whole, while also illustrating related thresholds, target values, and underages or overages. 
+
+When deciding which chart to use, consider the type of data you are dealing with and the importance of tracking underages or overages in that data. Also consider the amount of space you have to visualize the data and its surrounding information. Bullet charts consolidate data and therefore take up less space than donut charts. They fit very well within text-dense areas, since they can be horizontally or visually illustrated. Bullet charts can also measure data by percentages or integer values; donut charts cannot.
+
+### Example
+<img src="./img/bullet-chart.png" alt="Bullet chart" width="633"/>

packages/site/src/content/design-guidelines/charts/donut-chart/donut-chart.mdx

@@ -0,0 +1,25 @@
+---
+id: Donut chart
+section: charts
+---
+A **donut chart** represents relative amounts that must add up to 100%.
+
+## Usage
+In donut charts, you can choose to use percentages or integer values to compare parts to the whole. When deciding which to use, consider the information that is most important to your user and what makes the most sense for your use case. For example, if a user knows they have 123 farm animals and they’re interested in knowing how many of those animals are cows, it probably makes more sense to use an integer value. If that same user is interested in knowing how much storage space they have left in their grain silo, a percentage might be better.
+
+Do not try to represent more than six categories in a donut chart. We recommend using the [colors for charts](/charts/colors-for-charts) guidelines to represent your data when thresholds are not present.
+
+The most common use cases for donut charts are:
+- Showing the relationship of a set of values to a whole.
+- Showing utilization for an object as a percentage (with or without thresholds).
+
+If you need to compare one category to another, consider using a [bar chart](/charts/bar-chart).
+
+### Example
+<img src="./img/donut-chart.png" alt="Donut chart" width="501"/>
+
+1. **Segment fill:** We recommend using [colors for charts](/charts/colors-for-charts) for different items within the donut chart.
+2. **Segment padding:**  Always provide 3px of padding between segments.
+3. **Chart tooltip:** A tooltip will appear upon hover that states the name of the segment and corresponding value. For example, if the segment represents "Bugs," and the value being represented is 25, your chart tooltip would state, "Bugs: 25."
+4. **Label:** When a donut chart is contained within a dashboard card, a label defines what the chart represents. The label may also represent the total value of the data set. If this optional representation is chosen, it should follow the format of **[total numeric value] + [data set label]** (example: "100 Issues"). The total numeric value should be rounded to two decimal places or less (14 characters max) and should be styled using 24px font in standard text color. The data set label cannot contain more than 24 characters and should be styled using 14px font in secondary text color. Center them within the donut and style as shown. If the label exceeds the max character count, place it outside of the donut and leave the center empty.
+5. **Legend:** In order to be compliant with accessibility guidelines, a legend is necessary. Each variable on the legend should report their current value.

packages/site/src/content/design-guidelines/charts/donut-utilization-chart/donut-utilization-chart.mdx

@@ -0,0 +1,32 @@
+---
+id: Donut utilization chart
+section: charts
+---
+A **donut utlization chart** is a donut chart used specifically to show utilization metrics. 
+
+## Usage
+### Donut chart - Utilization
+<img src="./img/donut-utilization.png" alt="Donut utilization" width="404"/>
+
+<img src="./img/donut-utilization-hover.png" alt="Donut utilization hover" width="404"/>
+
+<img src="./img/donut-utilization-2.png" alt="Donut utilization 2" width="404"/>
+
+1. **Unused segment fill:** The unused area of the donut chart will always remain at #EDEDED.
+2. **Used segment fill:** We recommend using #0066cc for the used area of the donut chart. See [colors for charts](/charts/colors-for-charts) for other recommended color options.
+3. **Utilization label:** Both percentages and whole numbers can be used to represent the utilization.
+4. **Chart tooltip:** Since this is a utilization donut chart, the tooltip will display the percentage of data utilized. Chart tooltips only appear on hover over the utilization segment of the chart. We recommend stating the segment name and the utilization value being captured. For example, if the user is tracking GBps utilization, the chart tooltip would state "GBps utilization: 75%."
+
+### Donut chart - Utilization with threshold
+<img src="./img/donut-utilization-with-threshold.png" alt="Donut utilization with threshold" />
+
+1. **Threshold segment fill:** The outer segments of the chart are static and represent the thresholds for your use case. The example diagrams show utilization thresholds for a database and are used to let users know when they move from a safe zone into a danger zone. For threshold segments, use incremental shades of  grey starting at #EDEDED then to #D2D2D2 then to #BBBBBB. Provide 3px of padding between each segment.
+2. **Utilization segment fill:** This dynamic chart is a concentric circle within the donut thresholds and will represent the data set. For this chart, we recommend using the following colors:
+    - #0066cc before the data set has hit a threshold
+    - #F0AB00 once the data set has hit the warning threshold
+    - #C9190B once the data set has hit the danger threshold
+3. **Legend:** The utilization segment color swatch will change in accordance to the chart.
+
+<img src="./img/donut-utilization-with-threshold-hover.png" alt="Donut utilization with threshold hover" />
+
+4. **Chart tooltip:** Chart tooltips appear on hover for both threshold segments and utilization segments. We recommend stating the threshold name, the segment name, and the value being represented. For example, if the threshold being met is "Danger," and the segment represents "Storage capacity," and the value being represented is 92%, your chart tooltip would state, "Danger: Storage capacity: 92%." We recommend stating the threshold name "at" the percentage the threshold begins, so a threshold name might read, "Warning at 60%."

packages/site/src/content/design-guidelines/charts/legend-chart/legend-chart.mdx

@@ -0,0 +1,6 @@
+---
+id: Legends
+section: charts
+---
+
+A **legend chart** is a chart with a legend next to it, showing the different data entries or values being represented, often by category. A legend can be added to any chart type.

packages/site/src/content/design-guidelines/charts/line-chart/line-chart.mdx

@@ -0,0 +1,15 @@
+---
+id: Line chart
+section: charts
+---
+A **line chart** plots a series of discrete data samples to show continuous data and trend information. Sample values on the line can be measured and extracted.
+
+## Usage
+The most common use case for line charts is to compare several data sets over a period of time. They can be used to project trends into the past or future. A best fit line is created and extended in both directions to do so, but the validity of the projection is not certain. If you want to show and compare categorical data, you may consider using a [bar chart](/charts/bar-chart).
+
+Multiple lines on the same chart allow the user to visualize relationships between varying data sets, such as correlated events, similarities or unexpected differences. We recommend displaying no more than 6 lines on a single graph to avoid confusion.
+
+### Example
+<img src="./img/line-chart.png" alt="Line chart" />
+
+Line charts can optionally represent data points as dots on the line. If so, the same interaction that occurs when hovering over one in an [area chart](/charts/area-chart) will occur in line charts. For line colors, we recommend consulting [colors for charts](/charts/colors-for-charts).