Resource dashboard MVP

.github/ISSUE_TEMPLATE/suggest_resource.yaml

@@ -0,0 +1,63 @@
+name: Suggest a resource
+description: Suggest a new resource to list on ethereum.org/resources
+title: Suggest a resource
+labels: ["resource 📚"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Before suggesting a resource, make sure you've read [our listing policy](https://www.ethereum.org/en/contributing/adding-resources/).
+  - type: markdown
+    attributes:
+      value: Only continue with the issue if your resource meets the criteria listed there.
+  - type: markdown
+    attributes:
+      value: If it does, complete the following information which we need to accurately list the resource.
+  - type: markdown
+    id: resource_info
+    attributes:
+      value: "## Resource info"
+  - type: input
+    id: resource_name
+    attributes:
+      label: Name
+      description: Please provide the official name of the resource
+    validations:
+      required: true
+  - type: input
+    id: resource_url
+    attributes:
+      label: Resource URL
+      description: Please provide a URL to the resource
+    validations:
+      required: true
+  - type: textarea
+    id: resource_description
+    attributes:
+      label: Description
+      description: Please provide a short 1-2 sentence description of the resource
+    validations:
+      required: true
+  - type: textarea
+    id: resource_logo
+    attributes:
+      label: Logo
+      description: |
+        Please provide an SVG or transparent PNG
+        Tip: You can attach images by clicking this area to highlight it and then dragging files in.
+  - type: input
+    id: resource_category
+    attributes:
+      label: Category
+      description: Please specify a best fit to categorize the resource (e.g., DeFi, NFT, Scaling, etc.)
+  - type: checkboxes
+    id: resource_work_on
+    attributes:
+      label: Would you like to work on this issue?
+      options:
+        - label: "Yes"
+          required: false
+        - label: "No"
+          required: false
+    validations:
+      required: true

public/_redirects

@@ -177,3 +177,7 @@
 /*/deprecated-software /:splat/dapps/ 301!
 
 /*/enterprise/private-ethereum/ /:splat/enterprise/ 301!
+
+/dashboards /en/resources 301!
+
+/*/dashboards /:splat/resources 301!

public/content/contributing/adding-resources/index.md

@@ -0,0 +1,53 @@
+---
+title: Adding Resources
+description: The policy we use when adding resources to ethereum.org
+lang: en
+---
+
+# Adding Resources {#adding-resources}
+
+We want to make sure we list the best resources possible while keeping users safe and confident.
+
+Anyone is free to suggest new resources to add to the resource dashboard on ethereum.org, currently found at [ethereum.org/resources](/resources/).
+
+Although we welcome new additions, the current resources were chosen based on an experience we're trying to create for our users. These are based on some of our design principles:
+
+- _Inspirational_: anything on ethereum.org should offer something new to users
+- _A good story_: what's listed should provide an "aha" moment
+- _Credible_: everything should be legitimate businesses/projects to minimize risk to users
+
+Overall **ethereum.org aims to provide a seamless onboarding experience for new users**. For that reason, we add resources based on their:
+
+- ease of use
+- accuracy
+- maintenance
+
+## The decision framework {#decision-framework}
+
+### Criteria {#criteria}
+
+- **Honest and accurate listing information** - Any suggested listings must come with honest and accurate information. Products that falsify information will be removed.
+- **Active project** – The resource should be maintained by an active team to ensure quality and support for users. Outdated resources are subject to removal.
+
+### Product Ordering {#product-ordering}
+
+We reserve the right to order products based on their impact. New products will generally be added to the bottom of the list unless otherwise specified.
+
+## Maintenance {#maintenance}
+
+As the Ethereum ecosystem evolves, we will routinely check our content to:
+
+- Ensure that all resources listed still fulfill our criteria
+- Verify there aren't products that have been suggested that meet more of our criteria than the ones currently listed
+
+You can help with this by checking and letting us know. [Create an issue](https://github.com/ethereum/ethereum-org-website/issues/new?template=bug_report.yaml) or send an email to [website@ethereum.org](mailto:website@ethereum.org).
+
+---
+
+## Add your resource {#add-your-resource}
+
+If you want to add a resource to ethereum.org and it meets the criteria, create an issue on GitHub.
+
+<ButtonLink href="https://github.com/ethereum/ethereum-org-website/issues/new?assignees=&labels=resource+📚&template=suggest_resource.yaml">
+  Create an issue
+</ButtonLink>

src/components/AreaChart/index.tsx

@@ -0,0 +1,138 @@
+"use client"
+
+import { FaArrowTrendUp } from "react-icons/fa6"
+import {
+  Area,
+  AreaChart as RechartsAreaChart,
+  CartesianGrid,
+  XAxis,
+} from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart"
+
+type AreaChartDataPoint = { xValue: string; yValue: number }
+
+/**
+ * AreaChartProps defines the properties for the AreaChart component.
+ *
+ * @property {AreaChartDataPoint[]} data - The data to be displayed in the chart. Each object should have an `xValue` and `yValue` property.
+ * @property {string} [title] - The title of the chart.
+ * @property {string} [description] - The description of the chart.
+ * @property {string} [footerText] - The footer text of the chart.
+ * @property {string} [footerSubText] - The footer subtext of the chart.
+ */
+type AreaChartProps = {
+  data: AreaChartDataPoint[]
+  title?: string
+  description?: string
+  footerText?: string
+  footerSubText?: string
+}
+
+const defaultChartConfig = {
+  value: {
+    label: "Value",
+    color: "hsl(var(--accent-a))",
+  },
+} satisfies ChartConfig
+
+/**
+ * AreaChart component renders an area chart with the provided data and optional title, description, footer text, and footer subtext.
+ *
+ * @param {AreaChartProps} props - The properties for the AreaChart component.
+ * @returns {JSX.Element} The rendered AreaChart component.
+ */
+export function AreaChart({
+  data,
+  title,
+  description,
+  footerText,
+  footerSubText,
+}: AreaChartProps) {
+  return (
+    <Card>
+      <CardHeader>
+        {title && <CardTitle>{title}</CardTitle>}
+        {description && <CardDescription>{description}</CardDescription>}
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={defaultChartConfig}>
+          <RechartsAreaChart
+            accessibilityLayer
+            data={data}
+            margin={{
+              left: 12,
+              right: 12,
+              top: 12,
+              bottom: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="xValue"
+              tickLine={false}
+              axisLine={false}
+              tick={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <defs>
+              <linearGradient id="fillValue" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="hsl(var(--accent-a))"
+                  stopOpacity={1}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="hsl(var(--accent-a))"
+                  stopOpacity={0.5}
+                />
+              </linearGradient>
+            </defs>
+            <Area
+              dataKey="yValue"
+              type="natural"
+              fill="url(#fillValue)"
+              fillOpacity={0.4}
+              stroke="var(--color-value)"
+              stackId="a"
+            />
+          </RechartsAreaChart>
+        </ChartContainer>
+      </CardContent>
+      {(footerText || footerSubText) && (
+        <CardFooter>
+          <div className="flex w-full items-start gap-2 text-sm">
+            <div className="grid gap-2">
+              {footerText && (
+                <div className="flex items-center gap-2 font-medium leading-none">
+                  {footerText} <FaArrowTrendUp className="h-4 w-4" />
+                </div>
+              )}
+              {footerSubText && (
+                <div className="text-muted-foreground flex items-center gap-2 leading-none">
+                  {footerSubText}
+                </div>
+              )}
+            </div>
+          </div>
+        </CardFooter>
+      )}
+    </Card>
+  )
+}

src/components/BarChart/index.tsx

@@ -0,0 +1,120 @@
+"use client"
+
+import { FaArrowTrendUp } from "react-icons/fa6"
+import {
+  Bar,
+  BarChart as RechartsBarChart,
+  CartesianGrid,
+  XAxis,
+} from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart"
+
+type BarChartDataPoint = { category: string; value: number }
+
+/**
+ * BarChartProps defines the properties for the BarChart component.
+ *
+ * @property {BarChartItem[]} data - The data to be displayed in the chart. Each object should have a `category` and `value` property.
+ * @property {string} [title] - The title of the chart.
+ * @property {string} [description] - The description of the chart.
+ * @property {string} [footerText] - The footer text of the chart.
+ * @property {string} [footerSubText] - The footer subtext of the chart.
+ */
+type BarChartProps = {
+  data: BarChartDataPoint[]
+  title?: string
+  description?: string
+  footerText?: string
+  footerSubText?: string
+}
+
+const defaultChartConfig = {
+  value: {
+    label: "Value",
+    color: "hsl(var(--accent-a))",
+  },
+} satisfies ChartConfig
+
+/**
+ * BarChart component renders a bar chart with the provided data and optional title, description, footer text, and footer subtext.
+ *
+ * @param {BarChartProps} props - The properties for the BarChart component.
+ * @returns {JSX.Element} The rendered BarChart component.
+ */
+export function BarChart({
+  data,
+  title,
+  description,
+  footerText,
+  footerSubText,
+}: BarChartProps) {
+  return (
+    <Card>
+      <CardHeader>
+        {title && <CardTitle>{title}</CardTitle>}
+        {description && <CardDescription>{description}</CardDescription>}
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={defaultChartConfig}>
+          <RechartsBarChart
+            accessibilityLayer
+            data={data}
+            margin={{
+              left: 12,
+              right: 12,
+              top: 12,
+              bottom: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="category"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <Bar
+              dataKey="value"
+              fill="hsl(var(--accent-a))"
+              barSize={16}
+              radius={[8, 8, 0, 0]}
+            />
+          </RechartsBarChart>
+        </ChartContainer>
+      </CardContent>
+      {(footerText || footerSubText) && (
+        <CardFooter>
+          <div className="flex w-full items-start gap-2 text-sm">
+            <div className="grid gap-2">
+              {footerText && (
+                <div className="flex items-center gap-2 font-medium leading-none">
+                  {footerText} <FaArrowTrendUp className="h-4 w-4" />
+                </div>
+              )}
+              {footerSubText && (
+                <div className="text-muted-foreground flex items-center gap-2 leading-none">
+                  {footerSubText}
+                </div>
+              )}
+            </div>
+          </div>
+        </CardFooter>
+      )}
+    </Card>
+  )
+}