From 6d04e84af8526dbd95cbd248538e0f861412f1c5 Mon Sep 17 00:00:00 2001 From: Daryna Pastushenko Date: Wed, 9 Jul 2025 15:35:47 +0300 Subject: [PATCH] chore: add cards on learn page --- pages/learning-center/cards.ts | 136 ++++++++++++++++++ .../images/api-governance-thumbnail.svg | 9 ++ .../images/api-security-thumbnail.svg | 9 ++ .../images/api-testing-thumbnail.svg | 9 ++ .../images/arazzo-thumbnail.svg | 14 ++ .../images/graphql-thumbnail.svg | 9 ++ .../images/markdoc-thumbnail.svg | 9 ++ .../images/open-api-thumbnail.svg | 9 ++ .../learning-center/images/yaml-thumbnail.svg | 9 ++ pages/learning-center/learn.page.tsx | 7 +- types/custom.d.ts | 4 + 11 files changed, 223 insertions(+), 1 deletion(-) create mode 100644 pages/learning-center/cards.ts create mode 100644 pages/learning-center/images/api-governance-thumbnail.svg create mode 100644 pages/learning-center/images/api-security-thumbnail.svg create mode 100644 pages/learning-center/images/api-testing-thumbnail.svg create mode 100644 pages/learning-center/images/arazzo-thumbnail.svg create mode 100644 pages/learning-center/images/graphql-thumbnail.svg create mode 100644 pages/learning-center/images/markdoc-thumbnail.svg create mode 100644 pages/learning-center/images/open-api-thumbnail.svg create mode 100644 pages/learning-center/images/yaml-thumbnail.svg create mode 100644 types/custom.d.ts diff --git a/pages/learning-center/cards.ts b/pages/learning-center/cards.ts new file mode 100644 index 00000000..3d7f1242 --- /dev/null +++ b/pages/learning-center/cards.ts @@ -0,0 +1,136 @@ +import openApiThumbnail from './images/open-api-thumbnail.svg'; +import markdocThumbnail from './images/markdoc-thumbnail.svg'; +import yamlThumbnail from './images/yaml-thumbnail.svg'; +import apiGovernanceThumbnail from './images/api-governance-thumbnail.svg'; +import apiTestingThumbnail from './images/api-testing-thumbnail.svg'; +import apiSecurityThumbnail from './images/api-security-thumbnail.svg'; +import graphqlThumbnail from './images/graphql-thumbnail.svg'; +import arazzoThumbnail from './images/arazzo-thumbnail.svg'; + +export const cards = [ + { + id: 1, + key: 'open-api', + title: 'OpenAPI', + description: 'Resources for learning more about OpenAPI and how to use it.', + thumbnail: openApiThumbnail, + moreItems: '40 more topics', + landingPage: '/learn/openapi/learning-openapi', + items: [ + { title: 'What is OpenAPI?', link: '/learn/openapi/learning-openapi' }, + { title: 'OpenAPI best practices', link: '/learn/openapi/openapi-decisions' }, + { title: '$ref guide', link: '/learn/openapi/ref-guide' }, + { title: 'Discriminator', link: '/learn/openapi/discriminator' }, + ], + }, + { + id: 2, + key: 'arazzo', + title: 'Arazzo', + description: + 'Learn how to use Arazzo to describe practical API workflows.', + thumbnail: arazzoThumbnail, + moreItems: '4 more topics', + landingPage: '/learn/arazzo/what-is-arazzo', + items: [ + { title: 'What is Arazzo?', link: '/learn/arazzo/what-is-arazzo' }, + { title: 'Getting Started with Arazzo', link: '/learn/arazzo/why-arazzo-matters' }, + { title: 'Arazzo walkthrough', link: '/learn/arazzo/arazzo-walkthrough' }, + { title: 'Best Practices for Arazzo Integration', link: '/learn/arazzo/arazzo-basics' }, + ], + }, + { + id: 3, + key: 'markdoc', + title: 'Markdoc', + description: 'Next-generation markup resources and detailed tag library.', + thumbnail: markdocThumbnail, + moreItems: '11 more topics', + landingPage: '/learn/markdoc', + items: [ + { title: 'What is Markdoc?', link: '/learn/markdoc' }, + { title: 'Getting started with Markdoc', link: '/learn/markdoc/write-with-markdoc' }, + { title: 'Markdoc benefits', link: '/learn/markdoc/evaluating-markdoc' }, + { title: 'Table tag', link: '/learn/markdoc/tags/table' }, + ], + }, + { + id: 4, + key: 'yaml', + title: 'YAML', + description: 'Learn how to use YAML in your API documentation and configuration.', + thumbnail: yamlThumbnail, + moreItems: '4 more topics', + landingPage: '/learn/yaml', + items: [ + { title: 'What is YAML?', link: '/learn/yaml' }, + { title: 'The basics of YAML', link: '/learn/yaml/scalars' }, + { title: 'YAML or JSON', link: '/learn/yaml/yaml-or-json' }, + { title: 'Troubleshooting YAML', link: '/learn/yaml/troubleshooting' }, + ], + }, + // { + // id: 5, + // key: 'api-governance', + // title: 'API governance', + // description: 'Use our interactive tool to build linting rules for your API.', + // thumbnail: apiGovernanceThumbnail, + // moreItems: ' more topics', + // landingPage: '/', + // items: [ + // { title: 'What is API governance?', link: '' }, + // { title: 'Setting Up Linting Rules', link: '' }, + // { title: 'Customizing API Guidelines ', link: '' }, + // { title: 'Best Practices for API Standards', link: '' }, + // ], + // }, + // { + // id: 6, + // key: 'api-testing', + // title: 'API Testing', + // description: + // 'Discover essential resources for mastering API testing, including tools, techniques, and best practices for reliable integrations.', + // thumbnail: apiTestingThumbnail, + // moreItems: ' more topics', + // landingPage: '/', + // items: [ + // { title: 'Introduction to API Testing', link: '' }, + // { title: 'Tools for API Testing', link: '' }, + // { title: 'Creating Effective Test Cases', link: '' }, + // { title: 'API Testing Best Practices ', link: '' }, + // ], + // }, + // { + // id: 7, + // key: 'api-security', + // title: 'API Security', + // description: + // 'Gain insights into securing your APIs with essential resources, tools, and best practices to protect your applications.', + // thumbnail: apiSecurityThumbnail, + // moreItems: ' more topics', + // landingPage: '/', + // items: [ + // { title: 'Introduction to API Security', link: '' }, + // { title: 'Common API Vulnerabilities', link: '' }, + // { title: 'Implementing Authentication and Authorization examples', link: '' }, + // { title: 'Best Practices for Securing APIs', link: '' }, + // ], + // }, + // { + // id: 8, + // key: 'graphql', + // title: 'GraphQL', + // description: + // 'Explore resources to deepen your understanding of GraphQL, from the basics to advanced queries and best practices.', + // thumbnail: graphqlThumbnail, + // moreItems: ' more topics', + // landingPage: '/', + // items: [ + // { title: 'What is GraphQL?', link: '' }, + // { title: 'Getting Started with GraphQL', link: '' }, + // { title: 'Advanced GraphQL Queries', link: '' }, + // { title: 'Best Practices for API Integration', link: '' }, + // ], + // }, + +]; \ No newline at end of file diff --git a/pages/learning-center/images/api-governance-thumbnail.svg b/pages/learning-center/images/api-governance-thumbnail.svg new file mode 100644 index 00000000..a37e8996 --- /dev/null +++ b/pages/learning-center/images/api-governance-thumbnail.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/pages/learning-center/images/api-security-thumbnail.svg b/pages/learning-center/images/api-security-thumbnail.svg new file mode 100644 index 00000000..40b68b36 --- /dev/null +++ b/pages/learning-center/images/api-security-thumbnail.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/pages/learning-center/images/api-testing-thumbnail.svg b/pages/learning-center/images/api-testing-thumbnail.svg new file mode 100644 index 00000000..89f4fe6d --- /dev/null +++ b/pages/learning-center/images/api-testing-thumbnail.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/pages/learning-center/images/arazzo-thumbnail.svg b/pages/learning-center/images/arazzo-thumbnail.svg new file mode 100644 index 00000000..8d46e2f8 --- /dev/null +++ b/pages/learning-center/images/arazzo-thumbnail.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/pages/learning-center/images/graphql-thumbnail.svg b/pages/learning-center/images/graphql-thumbnail.svg new file mode 100644 index 00000000..a0bd86de --- /dev/null +++ b/pages/learning-center/images/graphql-thumbnail.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/pages/learning-center/images/markdoc-thumbnail.svg b/pages/learning-center/images/markdoc-thumbnail.svg new file mode 100644 index 00000000..87e0f11b --- /dev/null +++ b/pages/learning-center/images/markdoc-thumbnail.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/pages/learning-center/images/open-api-thumbnail.svg b/pages/learning-center/images/open-api-thumbnail.svg new file mode 100644 index 00000000..2911c8ba --- /dev/null +++ b/pages/learning-center/images/open-api-thumbnail.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/pages/learning-center/images/yaml-thumbnail.svg b/pages/learning-center/images/yaml-thumbnail.svg new file mode 100644 index 00000000..cde2164a --- /dev/null +++ b/pages/learning-center/images/yaml-thumbnail.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/pages/learning-center/learn.page.tsx b/pages/learning-center/learn.page.tsx index 9dda5281..8b28bd3b 100644 --- a/pages/learning-center/learn.page.tsx +++ b/pages/learning-center/learn.page.tsx @@ -1,4 +1,7 @@ +import * as React from 'react'; + import Page from '@redocly/marketing-pages/pages/learning-center/learn.page.js'; +import { cards } from './cards'; export const frontmatter = { seo: { @@ -7,4 +10,6 @@ export const frontmatter = { slug: '/learn', }; -export default Page; \ No newline at end of file +export default function() { + return +} \ No newline at end of file diff --git a/types/custom.d.ts b/types/custom.d.ts new file mode 100644 index 00000000..8af1fb2e --- /dev/null +++ b/types/custom.d.ts @@ -0,0 +1,4 @@ +declare module '*.svg' { + const content: string; + export default content; +} \ No newline at end of file