Merge pull request #947 from btat/integrations-tile-layout

Added integrations page with a tile layout
This commit is contained in:
Billy Tat
2023-10-19 10:55:17 -07:00
committed by GitHub
15 changed files with 2841 additions and 2081 deletions
+3
View File
@@ -1,5 +1,7 @@
/** @type {import('@docusaurus/types').DocusaurusConfig} */
const tailwindPlugin = require('./plugins/tailwind-plugin.cjs');
module.exports = {
title: 'Rancher',
tagline: '',
@@ -184,6 +186,7 @@ module.exports = {
],
],
plugins: [
tailwindPlugin,
[
'@docusaurus/plugin-client-redirects',
{
+8 -2
View File
@@ -17,17 +17,23 @@
"@docusaurus/core": "^2.3.1",
"@docusaurus/plugin-client-redirects": "^2.3.1",
"@docusaurus/preset-classic": "^2.3.1",
"@fluentui/react-icons": "^2.0.204",
"@mdx-js/react": "^1.6.22",
"@swc/core": "^1.3.62",
"clsx": "^1.1.1",
"autoprefixer": "^10.4.15",
"clsx": "^1.2.1",
"postcss": "^8.4.28",
"param-case": "^3.0.4",
"prism-react-renderer": "^1.3.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.10.1",
"redocusaurus": "^1.6.3",
"remark-cli": "^11.0.0",
"remark-lint-no-dead-urls": "^1.1.0",
"remark-validate-links": "^12.1.0",
"swc-loader": "^0.2.3"
"swc-loader": "^0.2.3",
"tailwindcss": "^3.3.3"
},
"devDependencies": {
"@docusaurus/module-type-aliases": "^2.3.1"
+15
View File
@@ -0,0 +1,15 @@
function tailwindPlugin(context, options) {
return {
name: 'tailwind-plugin',
configurePostCss(postcssOptions) {
postcssOptions.plugins = [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
];
return postcssOptions;
},
};
}
module.exports = tailwindPlugin;
+64
View File
@@ -0,0 +1,64 @@
import React, { ReactNode } from 'react';
import { paramCase } from 'param-case';
import Link from '@docusaurus/Link';
import clsx from 'clsx';
export function CardSection({
id,
title,
icon,
children,
description,
className,
hasSubSections = false,
HeadingTag = 'h1',
}: {
id?: string;
title?: string;
icon?: JSX.Element;
children: ReactNode;
description?: ReactNode;
hasSubSections?: boolean;
HeadingTag?: any;
className?: string;
}) {
return (
<div
className={clsx(
'homepage-section',
hasSubSections && 'has-sub-sections',
className
)}
>
{title && <span><HeadingTag id={id ?? paramCase(title)}>{title}</HeadingTag></span>}
{description && <p className="section-description">{description}</p>}
<div className="section-content">{children}</div>
</div>
);
}
export function Card({
id,
icon,
title,
description,
to,
}: {
id?: string;
icon?: JSX.Element;
title?: string;
description?: string;
to: string;
}) {
return (
<Link to={to} className="homepage-card">
{icon && <div className="icon">{icon}</div>}
<div className="card-content">
<div className="title" id={id && paramCase(title)}>
{title}
</div>
{description && <div className="description">{description}</div>}
</div>
</Link>
);
}
@@ -0,0 +1,79 @@
import React from 'react';
import clsx from 'clsx';
import styles from './styles.module.css';
import {Card, CardSection} from '../CardComponents';
import {
ReadingModeMobileRegular,
QuestionRegular,
ArrowUpRegular,
PlayRegular,
FlowchartRegular,
RocketRegular
} from '@fluentui/react-icons';
import { FaAws, FaGoogle, FaCloud } from "react-icons/fa";
export default function HomepageFeatures(): JSX.Element {
return (
<section className={styles.features}>
<div className="container">
<br></br>
<CardSection
id="Gettingstarted"
icon={<RocketRegular />}
title="Getting Started"
>
<Card
title="What is Rancher?"
icon={<QuestionRegular />}
to="/intro"
description="Understand what Rancher is and is not"
/>
<Card
title="Overview"
icon={<ReadingModeMobileRegular />}
to="/getting-started/overview"
description="Learn about the core capabilities"
/>
<Card
title="Rancher Concepts"
icon={<FlowchartRegular />}
to="/pages-for-subheaders/rancher-manager-architecture"
description="Learn about high level concepts, architectural elements of Rancher"
/>
<Card
title="Install Rancher"
icon={<ArrowUpRegular />}
to="/getting-started/quick-start-guides/deploy-rancher-manager/helm-cli"
description="Quick way to helm install Rancher in a Kubernetes cluster"
/>
<Card
title="Deploy Workloads"
icon={<PlayRegular />}
to="/pages-for-subheaders/deploy-rancher-workloads"
description="Deploy a sample workload"
/>
</CardSection>
<CardSection
id="CloudDeployments"
title="Cloud Deployment"
>
<Card
icon={<FaAws />}
to="/getting-started/installation-and-upgrade/install-upgrade-on-a-kubernetes-cluster/rancher-on-amazon-eks"
description="Deploy Rancher on an Amazon EKS cluster"
/>
<Card
icon={<FaCloud />}
to="/getting-started/installation-and-upgrade/install-upgrade-on-a-kubernetes-cluster/rancher-on-aks"
description="Deploy Rancher on Microsoft's Azure Kubernetes Service (AKS)"
/>
<Card
icon={<FaGoogle />}
to="/getting-started/installation-and-upgrade/install-upgrade-on-a-kubernetes-cluster/rancher-on-gke"
description="Deploy Rancher on Google Kubernetes Engine"
/>
</CardSection>
</div>
</section>
);
}
@@ -0,0 +1,11 @@
.features {
display: flex;
align-items: center;
padding: 2rem 0;
width: 100%;
}
.featureSvg {
height: 200px;
width: 200px;
}
+228 -2
View File
@@ -35,7 +35,61 @@
url('../fonts/lato/lato-regular.woff') format('woff2'), /* Super Modern Browsers */
url('../fonts/lato/lato-regular.woff2') format('woff'), /* Modern Browsers */
}
/* You can override the default Infima variables here. */
@tailwind base;
@layer base {
:root {
--docs-color-primary-100: 26 144 255;
--docs-color-primary-200: 33 96 253;
--docs-color-secondary-700: 232 232 236;
--docs-color-secondary-800: 245 245 247;
--docs-color-secondary-900: 251 251 251;
--docs-color-secondary-1000: 255 255 255;
--docs-color-text-400: 71 71 71;
}
html[data-theme='dark'] {
--docs-color-text-400: 153 153 153;
--docs-color-secondary-700: 71 71 71;
--docs-color-secondary-800: 38 38 38;
--docs-color-secondary-900: 25 25 25;
--docs-color-secondary-1000: 0 0 0;
}
body {
@apply font-sans antialiased;
}
.homepage a {
--ifm-link-hover-color: currentColor;
}
.no-underline-links {
--ifm-link-hover-decoration: none;
}
a {
@apply cursor-pointer;
}
h1,
h2,
h3,
h4,
h5 {
@apply font-jakarta;
}
.homepage section,
.homepage section * {
@apply box-border;
}
}
:root {
--ifm-color-primary-lightest: #80bbe2;
--ifm-color-primary-lighter: #5eaadb;
@@ -45,7 +99,18 @@
--ifm-color-primary-darker: #2b83bc;
--ifm-color-primary-darkest: #236c9b;
--ifm-code-font-size: 95%;
--docs-color-border: #dadde1;
--docs-color-text: #000000;
--docs-color-text-100: #646464;
--docs-color-background: #ffffff;
--docs-color-background-100: #f8f8f8;
--docs-color-background-200: #efefef;
--docs-color-background-300: #dcdcdc;
}
@media (max-width: 768px) {
#theme-main h1 {
font-size: 50px !important;
@@ -160,4 +225,165 @@ a.btn.navbar__github::before {
height: 100%;
width: 100%;
position: absolute;
}
}
img[src$='#terminal'] {
display: block;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.pad {
padding: 0 1rem;
}
.center {
width: 100%;
max-width: 1080px;
margin: 1rem auto;
min-height: 400px;
}
.homepage-content {
padding-bottom: 6rem;
}
#hero {
padding: 2rem 0 1.5rem 0;
margin-bottom: 4rem;
border-bottom: 1px solid var(--docs-color-border);
}
#hero h2 {
font-size: 36px;
}
#hero p {
color: var(--docs-color-text-100);
}
.section-content {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.two-cols .section-content {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.has-sub-sections > h3 {
margin-bottom: 1.5rem;
}
.has-sub-sections > .section-content {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.has-sub-sections > .section-content > .homepage-section {
margin-bottom: 1rem;
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.homepage-section {
margin-bottom: 3rem;
}
.homepage-section h3 {
font-weight: 600;
}
.section-description {
color: var(--docs-color-text-100);
margin: 0rem 0 1.25rem 0;
margin-top: -0.5rem;
}
.has-sub-sections > .section-content .section-description {
font-size: 14px;
}
.homepage-card {
align-items: flex-start;
gap: 10px;
padding: 0.75rem;
text-decoration: none;
color: var(--docs-color-text);
--ifm-link-hover-decoration: none;
--ifm-link-hover-color: inherit;
cursor: pointer;
@apply flex flex-row items-center;
@apply border-secondary-800 bg-secondary-900 hover:bg-secondary-800;
border-width: 1px;
transition-property: background-color, color;
border-radius: 8px;
}
.homepage-card.row {
flex-direction: row;
}
.icon svg {
width: auto;
height: 100%;
}
.homepage-card .icon {
width: 48px;
height: 48px;
@apply mx-1;
/* background-color: #262626;
border-radius: 8px; */
}
.card-content {
display: flex;
flex-direction: column;
gap: 4px;
}
.card-content .title {
font-size: 16px;
letter-spacing: -0.5px;
font-weight: 600;
}
.card-content .description {
font-size: 14px;
color: var(--docs-color-text-100);
line-height: 1.5;
}
.homepage-card details {
font-size: 14px;
font-weight: 500;
color: var(--docs-color-text-100) !important;
background: var(--docs-color-background-100) !important;
border: solid 2px var(--docs-color-code-background) !important;
}
details code {
background-color: var(--docs-color-background);
}
details p {
font-weight: 300;
}
@media screen and (max-width: 1160px) {
/* Hide icons when header UI breaks */
.pseudo-icon {
display: none;
}
}
@media screen and (max-width: 768px) {
.section-content {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.two-cols .section-content {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
+23
View File
@@ -0,0 +1,23 @@
/**
* CSS files with the .module.css suffix will be treated as CSS modules
* and scoped locally.
*/
.heroBanner {
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
@media screen and (max-width: 996px) {
.heroBanner {
padding: 2rem;
}
}
.buttons {
display: flex;
align-items: center;
justify-content: center;
}
+41
View File
@@ -0,0 +1,41 @@
import React from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
// import HomepageFeatures from '@site/src/components/HomepageFeatures';
import styles from './index.module.css';
function HomepageHeader() {
const {siteConfig} = useDocusaurusContext();
return (
<header className={clsx('hero hero--primary', styles.heroBanner)}>
<div className="container">
<h1 className="hero__title">{siteConfig.title}</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p>
<div className={styles.buttons}>
<Link
className="button button--secondary button--lg"
to="/intro">
Full Documentation 📖
</Link>
</div>
</div>
</header>
);
}
export default function Home(): JSX.Element {
const {siteConfig} = useDocusaurusContext();
return (
<Layout
title={`Rancher Docs`}
description="Guides, Tutorials, References about Rancher Kubernetes Management Platform">
<HomepageHeader />
<main>
<HomepageFeatures />
</main>
</Layout>
);
}
+18
View File
@@ -0,0 +1,18 @@
// Import the original mapper
import MDXComponents from '@theme-original/MDXComponents';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { CardSection, Card } from '../components/CardComponents';
export default {
// Re-use the default mapping
...MDXComponents,
Tabs,
TabItem,
CardSection,
Card,
};
+47
View File
@@ -0,0 +1,47 @@
const { fontFamily } = require('tailwindcss/defaultTheme');
/** @type {import('tailwindcss').Config} */
module.exports = {
corePlugins: {
preflight: false,
container: false,
},
darkMode: ['class', '[data-theme="dark"]'],
content: ['./src/**/*.{jsx,tsx,html}'],
theme: {
extend: {
fontFamily: {
sans: ['"Inter"', ...fontFamily.sans],
jakarta: ['"Plus Jakarta Sans"', ...fontFamily.sans],
mono: ['"Fira Code"', ...fontFamily.mono],
},
borderRadius: {
sm: '4px',
},
screens: {
sm: '0px',
lg: '997px',
},
colors: {
primary: {
DEFAULT:
'rgb(var(--docs-color-primary-200, 33 96 253) / <alpha-value>)',
100: 'rgb(var(--docs-color-primary-100, 26 144 255) / <alpha-value>)',
200: 'rgb(var(--docs-color-primary-200, 33 96 253) / <alpha-value>)',
},
secondary: {
DEFAULT:
'rgb(var(--docs-color-secondary-1000, 0 0 0) / <alpha-value>)',
1000: 'rgb(var(--docs-color-secondary-1000, 0 0 0) / <alpha-value>)',
900: 'rgb(var(--docs-color-secondary-900, 25 25 25) / <alpha-value>)',
800: 'rgb(var(--docs-color-secondary-800, 38 38 38) / <alpha-value>)',
700: 'rgb(var(--docs-color-secondary-700, 71 71 71) / <alpha-value>)',
},
text: {
400: 'rgb(var(--docs-color-text-400, 153 153 153) / <alpha-value>)',
},
},
},
},
plugins: [],
};
@@ -2,6 +2,8 @@
title: Rancher Prime
---
Rancher v2.7 introduces Rancher Prime, an evolution of the Rancher enterprise offering. Rancher Prime is a new edition of the commercial, enterprise offering built on the the same source code. Rancher’s product will therefore continue to be 100% open source with additional value coming in from security assurances, extended lifecycles, access to focused architectures and Kubernetes advisories. Rancher Prime will also offer options to get production support for innovative Rancher projects. With Rancher Prime, installation assets are hosted on a trusted registry owned and managed by Rancher.
Prime is the Rancher ecosystem’s enterprise offering, with additional security, extended lifecycles, and access to Prime-exclusive documentation. Rancher Prime installation assets are hosted on a trusted SUSE registry, owned and managed by Rancher. The trusted Prime registry includes only stable releases that have been community-tested.
To get started with Rancher Prime, [go to this page](https://www.rancher.com/quick-start) and fill out the form.
Prime also offers options for production support, as well as add-ons to your subscription that tailor to your commercial needs.
To learn more and get started with Rancher Prime, please visit [this page](https://www.rancher.com/quick-start).
@@ -0,0 +1,62 @@
---
title: Integrations in Rancher
---
import {Card, CardSection} from '@site/src/components/CardComponents';
import {
ReadingModeMobileRegular,
QuestionRegular,
ArrowUpRegular,
PlayRegular,
FlowchartRegular,
RocketRegular
} from '@fluentui/react-icons';
import { FaAws, FaGoogle, FaCloud, FaServer, faGear } from "react-icons/fa6";
import HarvesterIcon from '@site/static/img/harvester_logo_horizontal.svg';
Prime is the Rancher ecosystem’s enterprise offering, with additional security, extended lifecycles, and access to Prime-exclusive documentation. Rancher Prime installation assets are hosted on a trusted SUSE registry, owned and managed by Rancher. The trusted Prime registry includes only stable releases that have been community-tested.
Prime also offers options for production support, as well as add-ons to your subscription that tailor to your commercial needs.
To learn more and get started with Rancher Prime, please visit [this page](https://www.rancher.com/quick-start).
<CardSection
id="Gettingstarted"
icon={<RocketRegular />}
>
<Card
title="Virtualization on Kubernetes with Harvester"
to="/integrations-in-rancher/harvester"
/>
<Card
title="Cloud Native Storage with Longhorn"
to="/integrations-in-rancher/longhorn"
/>
<Card
title="Container Security with NeuVector"
to="/integrations-in-rancher/neuvector"
/>
<Card
title="Advanced Policy Management with Kubewarden"
to="/integrations-in-rancher/kubewarden"
/>
<Card
title="Operating System Management with Elemental"
to="/integrations-in-rancher/elemental"
/>
<Card
title="Observability with Opni"
to="/integrations-in-rancher/opni"
/>
<Card
title="Continuous Delivery with Fleet"
to="/integrations-in-rancher/fleet"
/>
<Card
title="Kubernetes on the Desktop"
to="/integrations-in-rancher/rancher-desktop"
/>
<Card
title="Application Development Engine with Epinio"
to="/integrations-in-rancher/epinio"
/>
</CardSection>
@@ -1085,6 +1085,10 @@
{
"type": "category",
"label": "Integrations in Rancher",
"link": {
"type": "doc",
"id": "integrations-in-rancher/integrations-in-rancher"
},
"items": [
{
"type": "category",
+2234 -2075
View File
File diff suppressed because it is too large Load Diff