Skip to content

Commit c0aeadd

Browse files
amanycodessozercan
amanycodes
and
sozercan
authored
feat: Add landing page to copa docs (project-copacetic#1206)
Signed-off-by: amanycodes <amanycodes@gmail.com> Signed-off-by: Sertaç Özercan <852750+sozercan@users.noreply.github.com> Co-authored-by: Sertaç Özercan <852750+sozercan@users.noreply.github.com>
1 parent d31d44d commit c0aeadd

28 files changed

+610
-22
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<br>
1010
<br>
1111

12-
`copa` is a CLI tool written in [Go](https://golang.org) and based on [buildkit](https://github.com/moby/buildkit) that can be used to directly patch container images given the vulnerability scanning results from popular tools like [Trivy](https://github.com/aquasecurity/trivy).
12+
`copa` is a CLI tool written in [Go](https://golang.org) and based on [buildkit](https://github.com/moby/buildkit) that can be used to directly patch container images without full rebuilds. `copa` can also patch container images using the vulnerability scanning results from popular tools like [Trivy](https://github.com/aquasecurity/trivy).
1313

1414
For more details and how to get started, please refer to [full documentation](https://project-copacetic.github.io/copacetic/).
1515

‎website/docs/introduction.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
---
22
title: Introduction
3-
slug: /
43
---
54

65
# Project Copacetic: Directly patch container image vulnerabilities

‎website/docusaurus.config.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,10 @@ const config = {
5252

5353
themeConfig:
5454
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
55-
({
55+
({
56+
colorMode: {
57+
defaultMode: 'dark',
58+
},
5659
navbar: {
5760
title: 'Copacetic',
5861
logo: {
@@ -65,6 +68,12 @@ const config = {
6568
type: 'docsVersionDropdown',
6669
position: 'right',
6770
},
71+
{
72+
href: 'https://cloud-native.slack.com/archives/C071UU5QDKJ',
73+
position: 'right',
74+
className: 'header-slack-link',
75+
'aria-label': 'Slack Connection',
76+
},
6877
{
6978
href: 'https://github.com/project-copacetic/copacetic',
7079
position: 'right',

‎website/src/components/AdoptersSection.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import useBaseUrl from '@docusaurus/useBaseUrl';
3+
import { adopters } from '../data/landingPageData';
4+
5+
export default function AdoptersSection() {
6+
return (
7+
<section className="adopters-section">
8+
<h2 className="section-title">Adopted by</h2>
9+
<div className="adopters-grid">
10+
{adopters.map((adopter, index) => (
11+
<div key={index} className="adopter-card">
12+
<div className="adopter-header">
13+
<img
14+
className="adopter-logo-img"
15+
src={useBaseUrl(adopter.logo)}
16+
alt={`${adopter.name} logo`}
17+
/>
18+
</div>
19+
<p className="adopter-description">{adopter.description}</p>
20+
</div>
21+
))}
22+
</div>
23+
</section>
24+
);
25+
}

‎website/src/components/CtaSection.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
import Link from '@docusaurus/Link';
3+
import { communityButtons } from '../data/landingPageData';
4+
import useBaseUrl from '@docusaurus/useBaseUrl';
5+
import CncLogo from '@site/static/img/cncf-logo.png';
6+
7+
export default function CtaSection() {
8+
return (
9+
<>
10+
<section className="cncf-section">
11+
<p className="cncf-text">
12+
Copacetic is a{' '}
13+
<span className="cncf-highlight">Cloud Native Computing Foundation</span>{' '}
14+
Sandbox project
15+
</p>
16+
<img
17+
className="cncf-logo"
18+
alt="CNCF Logo"
19+
src={CncLogo}/>
20+
</section>
21+
<section className="community-section">
22+
<h2 className="section-title community-title">Join the Community!</h2>
23+
<div className="community-buttons">
24+
{communityButtons.map((button, index) => (
25+
<Link key={index} to={button.href} className="button community-button">
26+
<img
27+
className="community-icon"
28+
alt={`${button.title} icon`}
29+
src={useBaseUrl(button.icon)}
30+
/>
31+
<span className="community-button-text">{button.title}</span>
32+
</Link>
33+
))}
34+
</div>
35+
</section>
36+
</>
37+
)
38+
}

‎website/src/components/FeaturesSection.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import Link from '@docusaurus/Link';
3+
import useBaseUrl from '@docusaurus/useBaseUrl';
4+
import { featureCards } from '../data/landingPageData';
5+
6+
export default function FeaturesSection() {
7+
return (
8+
<section className="features-section">
9+
<div className="features-grid">
10+
{featureCards.map((card, index) => (
11+
<Link key={index} to={useBaseUrl(card.link)} className="feature-card feature-card-link">
12+
<div className="feature-card-header">
13+
{card.icon && (
14+
<img
15+
className="feature-icon"
16+
alt={`${card.title} icon`}
17+
src={useBaseUrl(card.icon)}
18+
/>
19+
)}
20+
<h3 className="feature-title">{card.title}</h3>
21+
</div>
22+
<div className="feature-content">
23+
<p className="feature-description">{card.description}</p>
24+
</div>
25+
</Link>
26+
))}
27+
</div>
28+
</section>
29+
);
30+
}

‎website/src/components/HeroSection.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from 'react';
2+
import Link from '@docusaurus/Link';
3+
import CopaLogo from '@site/static/img/copa-logo.png';
4+
import Download from '@site/static/img/icon-download.png';
5+
6+
export default function HeroSection() {
7+
return (
8+
<section className="hero-section">
9+
<div className="hero-logo-container">
10+
<img
11+
className="hero-logo"
12+
alt="Copa Logo"
13+
src={CopaLogo}
14+
/>
15+
</div>
16+
17+
<h1 className="hero-title">
18+
<span className="title-light">Directly </span>
19+
<span className="title-bold">patch</span>
20+
<span className="title-light"> container image vulnerabilities</span>
21+
</h1>
22+
23+
<p className="hero-description">
24+
copa is an <span className="desc-highlight">Open Source</span> CLI tool
25+
written in <Link to="https://go.dev/" className="desc-link">Go</Link> and
26+
based on <Link to="https://docs.docker.com/build/buildkit/" className="desc-link">buildkit</Link> that
27+
can be used to directly patch container images without full rebuilds. It can also patch
28+
container images using the vulnerability scanning results from popular tools like{' '}
29+
<Link to="https://github.com/aquasecurity/trivy" className="desc-link">Trivy</Link>.
30+
</p>
31+
32+
<div className="hero-buttons">
33+
<Link to="/introduction" className="button get-started-button">
34+
Get Started
35+
</Link>
36+
<Link to="/installation" className="button download-button">
37+
<img src={Download} alt="Download Icon" className="download-icon" />
38+
Download
39+
</Link>
40+
</div>
41+
</section>
42+
);
43+
}

‎website/src/components/TalksSection.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import { featuredTalks } from '../data/landingPageData';
3+
4+
export default function TalksSection() {
5+
return (
6+
<section className="talks-section">
7+
<h2 className="section-title">Featured Talks</h2>
8+
<div className="talks-grid">
9+
{featuredTalks.map((talk, index) => (
10+
<div key={index} className="talk-item">
11+
<div className="video-container">
12+
<iframe
13+
src={`https://www.youtube.com/embed/${talk.youtubeId}`}
14+
frameBorder="0"
15+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
16+
allowFullScreen
17+
title={talk.title}
18+
></iframe>
19+
</div>
20+
<p className="talk-description">{talk.title}</p>
21+
</div>
22+
))}
23+
</div>
24+
</section>
25+
);
26+
}

0 commit comments

Comments
 (0)