Skip to content

Commit

Permalink
Update landing page with links to codecov
Browse files Browse the repository at this point in the history
  • Loading branch information
@RulaKhaled
RulaKhaled committed Oct 3, 2024
1 parent aa1c8c1 commit 9fb0a2e
Show file tree
Hide file tree
Showing 2 changed files with 142 additions and 85 deletions.
6 changes: 4 additions & 2 deletions codecov_slack_app/settings.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,9 @@

DATABASES = {
"default": {
"ENGINE": os.environ.get("SQL_ENGINE", "django.db.backends.postgresql"),
"ENGINE": os.environ.get(
"SQL_ENGINE", "django.db.backends.postgresql"
),
"NAME": os.environ.get("POSTGRES_DB", "codecov_slack_app"),
"USER": os.environ.get("POSTGRES_USER", "user"),
"PASSWORD": os.environ.get("POSTGRES_PASSWORD", "password"),
Expand Down Expand Up @@ -134,7 +136,7 @@
"'self'",
"'sha256-XUpurJYPfudnKesBwHWGnVTMcFyg5inchJcdAppSMcY='",
"'sha256-xuBr9YVS7V3hqBkhwLDtyohNbGFdO8PSWO/QDH0orxk='",
"'sha256-G9kZzyN24irmY+hg/rWbW9P5DYILFdr63wXKRPMJlCc='",
"'sha256-ExOD6A/CQOU7d45q21u5lKTtYGch1RstdJ8N85wSbwA='",
"fonts.googleapis.com",
)

Expand Down
221 changes: 138 additions & 83 deletions core/templates/pages/slack_install.html
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,58 @@
<!DOCTYPE html>
<html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Install Codecov App for Slack</title>
<style>
body {
font-family: "Poppins", sans-serif;
background: linear-gradient(162deg,
#f8d1e8 0%,
#ece6fc 36%,
#f9f9ff 95%);

background: linear-gradient(162deg, #ece6fc 0%, #f8d1e8 95%);
text-align: center;
margin-top: 80px;
margin: 0;
padding-top: 80px;
font-weight: 300;
display: flex;
flex-direction: column;
align-items: center;
min-width: none;
background-size: cover;
min-height: 100vh;
background-size: cover;
}

h1 {
font-weight: 500;
font-size: 2rem;
margin: 0;
}

.main-body {
max-width: 900px;
font-size: 1.4em;
margin: 0;
}

h1 {
font-weight: 500;
font-size: 2rem;
margin: 0;
}

.main-body {
max-width: 900px;
font-size: 1.4em;
margin: 0;
}

button {
background: linear-gradient(162deg,
rgba(240, 31, 122, 1) 0%,
rgba(138, 18, 70, 0.5) 200%);
border: none;
color: white;
padding: 15px 60px;
font-size: 1.5em;
border-radius: 3px;
cursor: pointer;
margin: 30px 0px;
transition: 0.3s;
font-family: "Poppins", sans-serif;
}
.gradient-button {
background: linear-gradient(162deg, rgba(240, 31, 122, 1) 0%, rgba(138, 18, 70, 0.5) 200%);
border: none;
color: white;
padding: 15px 60px;
font-size: 1.5em;
border-radius: 3px;
cursor: pointer;
margin: 30px 0;
transition: 0.3s;
font-family: "Poppins", sans-serif;
}

.login-link {
color: #c91866;
text-decoration: none;
font-weight: 500;
}

.login-link:hover {
text-decoration: underline;
}

a {
Expand All @@ -61,37 +67,40 @@
footer {
width: 80%;
font-size: 13px;
color: #68737e;
color: #c91866;
display: flex;
justify-content: space-between;
align-items: center;
border-top: solid 1px rgba(216, 220, 226, 1);
border-top: solid 1px white;
padding-top: 20px;
margin-top: auto;
margin-bottom: 20px;
}

ul {
list-style: none;
padding: 0;
margin: 0;
}

li {
display: inline-block;
margin-left: 9px;
ul li {
display: inline-block;
margin-left: 9px;
}

a {
color: #0071c2;
text-decoration: none;
}
}
ul li a {
color: #c91866;
text-decoration: none;
}

.left-ul {
display: flex;
align-items: center;
}

p {
font-size: 13px;
}
.left-ul p {
font-size: 13px;
margin: 0;
}

.features {
Expand All @@ -100,47 +109,95 @@
display: flex;
flex-direction: column;
gap: 10px;
}

.features h2 {
font-size: 18px;
font-weight: 600;
margin: 0;
}

.features p {
font-size: 16px;
width: 600px;
margin: 0;
}

.features img {
width: 600px;
border-radius: 5px;
}

h2 {
font-size: 18px;
font-weight: 600;
margin: 0;
}
.note, .config-card {
font-weight: 400;
color: #333;
background-color: white;
padding: 8px 15px;
border-radius: 8px;
margin: 20px 0;
display: inline-block;
border: 2px solid #ffd1e6;
box-shadow: 0 2px 4px rgba(240, 31, 122, 0.1);
transition: all 0.3s ease;
}

.note:hover, .config-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(240, 31, 122, 0.15);
}

p {
font-size: 16px;
width: 600px;
margin: 0;
}
.config-card {
width: 600px;
padding: 20px;
text-align: left;
}

img {
width: 600px;
border-radius: 5px;
}
.config-card h2 {
margin-top: 0;
font-weight: 600;
}

.config-card ol {
padding-left: 20px;
}

.config-card li {
margin-bottom: 10px;
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>

<body>
<img src="https://storage.googleapis.com/codecov-cdn/codecov.svg" alt="Codecov Logo" width="120" />
<img src="https://storage.googleapis.com/codecov-cdn/codecov.svg" alt="Codecov Logo" width="120">
<h1>Streamline Code Coverage with Slack</h1>
<p class="main-body">
Codecov App for Slack brings the power of code coverage directly
into your Slack channels, enabling you and your team to stay informed and
proactive about your code's quality without ever leaving Slack.
</p>
<div class="note">
<p>A Codecov account is required to configure and use this app. <a href="https://codecov.io/login" target="_blank" rel="noopener noreferrer" class="login-link">Login to Codecov</a></p>
</div>
<form action="https://slack.com/oauth/v2/authorize" method="GET">
<input type="hidden" name="client_id" value="{{ client_id }}" />
<input type="hidden" name="scope" value="{{ scope }}" />
<input type="hidden" name="redirect_uri" value="{{ redirect_uri }}" />
<input type="hidden" name="state" value="{{ state }}" />
<input type="hidden" name="client_id" value="{{ client_id }}">
<input type="hidden" name="scope" value="{{ scope }}">
<input type="hidden" name="redirect_uri" value="{{ redirect_uri }}">
<input type="hidden" name="state" value="{{ state }}">
<button class="gradient-button">Add to Slack</button>
</form>
<div class="config-card">
<h2>Configuration Steps</h2>
<ol>
<li>Ensure you have a Codecov account. If not, <a href="https://codecov.io/signup" target="_blank" rel="noopener noreferrer" class="login-link">sign up here</a>.</li>
<li>Click the "Add to Slack" button to install the app to your Slack workspace.</li>
<li>Once installed, use the "/codecov login" command in Slack to link your Codecov account.</li>
<li>Follow the prompts to authorize the connection between Slack and Codecov.</li>
<li>After successful connection, you can start using Codecov commands in your Slack channels.</li>
</ol>
</div>
<div class="features">
<h2>Code Coverage Changes at a Glance</h2>
<p>
Expand All @@ -149,7 +206,7 @@ <h2>Code Coverage Changes at a Glance</h2>
Slack, allowing you to address coverage decreases or celebrate increases
without waiting around for PR calculations.
</p>
<img src="https://storage.googleapis.com/codecov-cdn/slack_onboarding.png" alt="Codecov Logo" />
<img src="https://storage.googleapis.com/codecov-cdn/slack_onboarding.png" alt="Slack onboarding screenshot">
</div>
<div class="features">
<h2>Efficiently Compare Commits</h2>
Expand All @@ -159,7 +216,7 @@ <h2>Efficiently Compare Commits</h2>
codebase's coverage. It's a direct line to understanding and improving
your project's code quality.
</p>
<img src="https://storage.googleapis.com/codecov-cdn/comparison.png" alt="Codecov Logo" />
<img src="https://storage.googleapis.com/codecov-cdn/comparison.png" alt="Commit comparison screenshot">
</div>
<div class="features">
<h2>Comprehensive PR List</h2>
Expand All @@ -169,7 +226,7 @@ <h2>Comprehensive PR List</h2>
commits, and branches for a full spectrum view on your project's health,
directly in your Slack workspace.
</p>
<img src="https://storage.googleapis.com/codecov-cdn/pulls.png" alt="Codecov Logo" />
<img src="https://storage.googleapis.com/codecov-cdn/pulls.png" alt="PR list screenshot">
</div>
<footer>
<div class="left-ul">
Expand All @@ -179,18 +236,16 @@ <h2>Comprehensive PR List</h2>
<li><a href="https://codecov.io/terms">Terms</a></li>
</ul>
</div>
<img src="https://storage.googleapis.com/codecov-cdn/codecov.svg" alt="Codecov Logo" />
<img src="https://storage.googleapis.com/codecov-cdn/codecov.svg" alt="Codecov Logo">
<ul>
<li><a href="https://codecovpro.zendesk.com/hc/en-us">Support</a></li>
<li>
<a href="https://github.com/codecov/feedback/issues/44">Feedback</a>
</li>
<li><a href="https://github.com/codecov/feedback/issues/44">Feedback</a></li>
</ul>
</footer>
<script>
const year = new Date().getFullYear();
document.getElementById("sentry-copy").innerHTML = `© ${year} Sentry`;
</script>
</body>
<script>
const year = new Date().getFullYear();
document.getElementById("sentry-copy").innerHTML = `© ${year} Sentry`;
</script>

</html>

0 comments on commit 9fb0a2e

Please sign in to comment.