chore: use tabs (#46)

pull/49/head
James Ross 2 years ago committed by GitHub
parent c2ad89679f
commit 1aff065c9e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -0,0 +1,10 @@
# https://editorconfig.org
root = true
[*]
end_of_line = lf
indent_style = tab
tab_width = 2
[*.yml]
indent_style = space

@ -0,0 +1,6 @@
{
"printWidth": 120,
"singleQuote": false,
"semi": true,
"useTabs": true
}

@ -38,12 +38,15 @@ GitHub Action for creating Cloudflare Pages deployments, using the new [Direct U
1. Replace `YOUR_ACCOUNT_ID`, `YOUR_PROJECT_NAME` and `YOUR_ASSET_DIRECTORY` with the appropriate values to your Pages project. 1. Replace `YOUR_ACCOUNT_ID`, `YOUR_PROJECT_NAME` and `YOUR_ASSET_DIRECTORY` with the appropriate values to your Pages project.
### Get account ID ### Get account ID
To find your account ID, log in to the Cloudflare dashboard > select your zone in Account Home > find your account ID in Overview under **API** on the right-side menu. If you have not added a zone, add one by selecting **Add site** . You can purchase a domain from [Cloudflares registrar](https://developers.cloudflare.com/registrar/). To find your account ID, log in to the Cloudflare dashboard > select your zone in Account Home > find your account ID in Overview under **API** on the right-side menu. If you have not added a zone, add one by selecting **Add site** . You can purchase a domain from [Cloudflares registrar](https://developers.cloudflare.com/registrar/).
If you do not have a zone registered to your account, you can also get your account ID from the `pages.dev` URL. E.g: `https://dash.cloudflare.com/<ACCOUNT_ID>/pages` If you do not have a zone registered to your account, you can also get your account ID from the `pages.dev` URL. E.g: `https://dash.cloudflare.com/<ACCOUNT_ID>/pages`
### Generate an API Token ### Generate an API Token
To generate an API token: To generate an API token:
1. Log in to the Cloudflare dashboard. 1. Log in to the Cloudflare dashboard.
2. Select My Profile from the dropdown menu of your user icon on the top right of your dashboard. 2. Select My Profile from the dropdown menu of your user icon on the top right of your dashboard.
3. Select API Tokens > Create Token. 3. Select API Tokens > Create Token.
@ -55,6 +58,7 @@ To generate an API token:
More information can be found on [our guide for making Direct Upload deployments with continous integration](https://developers.cloudflare.com/pages/how-to/use-direct-upload-with-continuous-integration/#use-github-actions). More information can be found on [our guide for making Direct Upload deployments with continous integration](https://developers.cloudflare.com/pages/how-to/use-direct-upload-with-continuous-integration/#use-github-actions).
### Specifying a branch ### Specifying a branch
The branch name is used by Cloudflare Pages to determine if the deployment is production or preview. Read more about The branch name is used by Cloudflare Pages to determine if the deployment is production or preview. Read more about
[git branch build controls](https://developers.cloudflare.com/pages/platform/branch-build-controls/#branch-build-controls). [git branch build controls](https://developers.cloudflare.com/pages/platform/branch-build-controls/#branch-build-controls).
@ -62,6 +66,7 @@ If you are in a Git workspace, Wrangler will automatically pull the branch infor
manually by adding the argument `branch: YOUR_BRANCH_NAME`. manually by adding the argument `branch: YOUR_BRANCH_NAME`.
## Outputs ## Outputs
| Name | Description | | Name | Description |
| ------------- | --------------------------------------------------- | | ------------- | --------------------------------------------------- |
| `id` | The ID of the pages deployment | | `id` | The ID of the pages deployment |

@ -1,50 +1,38 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Direct Upload Demo | Cloudflare Pages</title> <title>Direct Upload Demo | Cloudflare Pages</title>
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<h3>Example project</h3> <h3>Example project</h3>
<h1>Welcome to Cloudflare Pages</h1> <h1>Welcome to Cloudflare Pages</h1>
<p> <p>
Upload your prebuilt assets directly to Pages and deploy <br /> Upload your prebuilt assets directly to Pages and deploy <br />
your project to the Cloudflare edge within seconds. your project to the Cloudflare edge within seconds.
</p> </p>
<p>Create new deployments using:</p> <p>Create new deployments using:</p>
<section class="options"> <section class="options">
<img src="assets/terminal.svg" /> <img src="assets/terminal.svg" />
<a <a href="https://dash.cloudflare.com/?to=/:account/pages/new/wrangler-guide" target="_blank"> Wrangler CLI</a>
href="https://dash.cloudflare.com/?to=/:account/pages/new/wrangler-guide" <img src="assets/cloud-upload.svg" />
target="_blank" <a href="https://dash.cloudflare.com/?to=/:account/pages/new/upload" target="_blank"> Dashboard</a>
> Wrangler CLI</a </section>
> </div>
<img src="assets/cloud-upload.svg" />
<a
href="https://dash.cloudflare.com/?to=/:account/pages/new/upload"
target="_blank"
> Dashboard</a
>
</section>
</div>
<section class="learn-more"> <section class="learn-more">
<a <a href="https://developers.cloudflare.com/pages/platform/direct-uploads">
href="https://developers.cloudflare.com/pages/platform/direct-uploads" <button>Learn more</button>
> </a>
<button>Learn more</button> </section>
</a> <div class="logo">
</section> <a href="https://pages.cloudflare.com/" target="_blank"> <img src="assets/cloudflare-pages.svg" /></a>
<div class="logo"> </div>
<a href="https://pages.cloudflare.com/" target="_blank"> </div>
<img src="assets/cloudflare-pages.svg" </body>
/></a>
</div>
</div>
</body>
</html> </html>

@ -1,159 +1,159 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif; font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial,
margin: auto; sans-serif;
margin: auto;
} }
.bg-image { .bg-image {
position: absolute; position: absolute;
bottom: -88%; bottom: -88%;
} }
.container { .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 165px 0 124px; padding: 165px 0 124px;
width: 100%; width: 100%;
margin: auto; margin: auto;
border: #fbab40; border: #fbab40;
height: 100vh; height: 100vh;
background-color: #242628; background-color: #242628;
background-image: url(./assets/world.svg); background-image: url(./assets/world.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position-x: center; background-position-x: center;
background-position-y: 70px; background-position-y: 70px;
background-origin: padding-box; background-origin: padding-box;
} }
.header h3 { .header h3 {
text-align: center; text-align: center;
color: #ff9e40; color: #ff9e40;
font-size: 24px; font-size: 24px;
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
margin: 0; margin: 0;
line-height: 36px; line-height: 36px;
} }
.header { .header {
display: flex; display: flex;
position: relative; position: relative;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0px; padding: 0px;
font-style: normal; font-style: normal;
} }
.header > h1 { .header > h1 {
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
font-size: 48px; font-size: 48px;
line-height: 150%; line-height: 150%;
display: flex; display: flex;
align-items: center; align-items: center;
text-align: center; text-align: center;
color: #ffffff; color: #ffffff;
} }
.header > p { .header > p {
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
line-height: 150%; line-height: 150%;
text-align: center; text-align: center;
color: #ffffff; color: #ffffff;
flex-grow: 0; flex-grow: 0;
margin: 16px 0px; margin: 16px 0px;
} }
.options { .options {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.options > a { .options > a {
color: #ffffff; color: #ffffff;
text-decoration: underline; text-decoration: underline;
margin: 0px 8px; margin: 0px 8px;
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
line-height: 150%; line-height: 150%;
} }
.options > a:first-of-type { .options > a:first-of-type {
margin-right: 30px; margin-right: 30px;
} }
.logo { .logo {
margin-top: 75px; margin-top: 75px;
} }
.logo > img { .logo > img {
width: 160px; width: 160px;
height: 64px; height: 64px;
} }
.learn-more > a > button { .learn-more > a > button {
background: #f6821f; background: #f6821f;
border-radius: 4px; border-radius: 4px;
border: none; border: none;
width: 180px; width: 180px;
margin-top: 78px; margin-top: 78px;
height: 55px; height: 55px;
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
line-height: 19px; line-height: 19px;
background: rgba(246, 130, 31, 1); background: rgba(246, 130, 31, 1);
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.25);
cursor: pointer; cursor: pointer;
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.container { .container {
background-size: contain; background-size: contain;
background-position-y: center; background-position-y: center;
} }
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.container {
.container{ background-size: contain;
background-size: contain; background-position-y: center;
background-position-y: center; }
} pre {
pre { font-size: 0.8rem;
font-size: 0.8rem; padding: 8px 12px;
padding: 8px 12px; width: 100%;
width: 100%; }
}
body {
body { width: 100vw;
width: 100vw; }
}
.header img {
.header img { margin-left: 0;
margin-left: 0; }
}
.installation-steps {
.installation-steps { width: 100%;
width: 100%; box-sizing: border-box;
box-sizing: border-box; }
}
h1 {
h1 { font-size: 1.6rem;
font-size: 1.6rem; }
}
ol {
ol { padding-left: 20px;
padding-left: 20px; }
}
li {
li { margin-bottom: 5px;
margin-bottom: 5px; }
}
} }

@ -22128,10 +22128,7 @@ try {
state: "success" state: "success"
}); });
}; };
const createJobSummary = async ({ const createJobSummary = async ({ deployment, aliasUrl }) => {
deployment,
aliasUrl
}) => {
const deployStage = deployment.stages.find((stage) => stage.name === "deploy"); const deployStage = deployment.stages.find((stage) => stage.name === "deploy");
let status = "\u26A1\uFE0F Deployment in progress..."; let status = "\u26A1\uFE0F Deployment in progress...";
if (deployStage?.status === "success") { if (deployStage?.status === "success") {
@ -22139,7 +22136,8 @@ try {
} else if (deployStage?.status === "failure") { } else if (deployStage?.status === "failure") {
status = "\u{1F6AB} Deployment failed"; status = "\u{1F6AB} Deployment failed";
} }
await import_core.summary.addRaw(` await import_core.summary.addRaw(
`
# Deploying with Cloudflare Pages # Deploying with Cloudflare Pages
| Name | Result | | Name | Result |
@ -22148,7 +22146,8 @@ try {
| **Status**: | ${status} | | **Status**: | ${status} |
| **Preview URL**: | ${deployment.url} | | **Preview URL**: | ${deployment.url} |
| **Branch Preview URL**: | ${aliasUrl} | | **Branch Preview URL**: | ${aliasUrl} |
`).write(); `
).write();
}; };
(async () => { (async () => {
const project = await getProject(); const project = await getProject();

2620
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -1,37 +1,38 @@
{ {
"name": "pages-action", "name": "pages-action",
"version": "1.3.0", "version": "1.3.0",
"description": "Publish to Cloudflare Pages", "description": "Publish to Cloudflare Pages",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"build": "npx esbuild src/index.ts --bundle --platform=node --target=es2021 --outfile=index.js", "build": "npx esbuild src/index.ts --bundle --platform=node --target=es2021 --outfile=index.js",
"prepare": "husky install" "prepare": "husky install",
}, "prettify": "prettier . --write --ignore-unknown"
"repository": { },
"type": "git", "repository": {
"url": "git+https://github.com/cloudflare/pages-action.git" "type": "git",
}, "url": "git+https://github.com/cloudflare/pages-action.git"
"keywords": [ },
"Cloudflare Pages", "keywords": [
"GitHub Actions" "Cloudflare Pages",
], "GitHub Actions"
"license": "MIT", ],
"bugs": { "license": "MIT",
"url": "https://github.com/cloudflare/pages-action/issues" "bugs": {
}, "url": "https://github.com/cloudflare/pages-action/issues"
"homepage": "https://github.com/cloudflare/pages-action#readme", },
"dependencies": { "homepage": "https://github.com/cloudflare/pages-action#readme",
"@actions/core": "^1.10.0", "dependencies": {
"@actions/github": "^5.1.1", "@actions/core": "^1.10.0",
"@cloudflare/types": "^6.18.16", "@actions/github": "^5.1.1",
"shellac": "^0.7.2", "@cloudflare/types": "^6.18.16",
"undici": "^5.11.0" "shellac": "^0.7.2",
}, "undici": "^5.11.0"
"devDependencies": { },
"@types/node": "^18.11.3", "devDependencies": {
"esbuild": "^0.15.12", "@types/node": "^18.11.3",
"husky": "^8.0.1", "esbuild": "^0.15.12",
"prettier": "^2.6.2", "husky": "^8.0.1",
"typescript": "^4.6.4" "prettier": "^2.8.1",
} "typescript": "^4.6.4"
}
} }

@ -1,5 +1,5 @@
import { getInput, setOutput, setFailed, summary } from "@actions/core"; import { getInput, setOutput, setFailed, summary } from "@actions/core";
import type { Project, Deployment } from '@cloudflare/types'; import type { Project, Deployment } from "@cloudflare/types";
import { context, getOctokit } from "@actions/github"; import { context, getOctokit } from "@actions/github";
import shellac from "shellac"; import shellac from "shellac";
import { fetch } from "undici"; import { fetch } from "undici";
@ -8,25 +8,25 @@ import { env } from "process";
type Octokit = ReturnType<typeof getOctokit>; type Octokit = ReturnType<typeof getOctokit>;
try { try {
const apiToken = getInput("apiToken", { required: true }); const apiToken = getInput("apiToken", { required: true });
const accountId = getInput("accountId", { required: true }); const accountId = getInput("accountId", { required: true });
const projectName = getInput("projectName", { required: true }); const projectName = getInput("projectName", { required: true });
const directory = getInput("directory", { required: true }); const directory = getInput("directory", { required: true });
const gitHubToken = getInput("gitHubToken", { required: false }); const gitHubToken = getInput("gitHubToken", { required: false });
const branch = getInput("branch", { required: false }); const branch = getInput("branch", { required: false });
const getProject = async () => { const getProject = async () => {
const response = await fetch( const response = await fetch(
`https://api.cloudflare.com/client/v4/accounts/${accountId}/pages/projects/${projectName}`, `https://api.cloudflare.com/client/v4/accounts/${accountId}/pages/projects/${projectName}`,
{ headers: { Authorization: `Bearer ${apiToken}` } } { headers: { Authorization: `Bearer ${apiToken}` } }
); );
const { result } = await response.json() as { result: Project | null }; const { result } = (await response.json()) as { result: Project | null };
return result; return result;
} };
const createPagesDeployment = async () => { const createPagesDeployment = async () => {
// TODO: Replace this with an API call to wrangler so we can get back a full deployment response object // TODO: Replace this with an API call to wrangler so we can get back a full deployment response object
await shellac` await shellac`
$ export CLOUDFLARE_API_TOKEN="${apiToken}" $ export CLOUDFLARE_API_TOKEN="${apiToken}"
if ${accountId} { if ${accountId} {
$ export CLOUDFLARE_ACCOUNT_ID="${accountId}" $ export CLOUDFLARE_ACCOUNT_ID="${accountId}"
@ -35,84 +35,76 @@ try {
$$ npx wrangler@2 pages publish "${directory}" --project-name="${projectName}" --branch="${branch}" $$ npx wrangler@2 pages publish "${directory}" --project-name="${projectName}" --branch="${branch}"
`; `;
const response = await fetch( const response = await fetch(
`https://api.cloudflare.com/client/v4/accounts/${accountId}/pages/projects/${projectName}/deployments`, `https://api.cloudflare.com/client/v4/accounts/${accountId}/pages/projects/${projectName}/deployments`,
{ headers: { Authorization: `Bearer ${apiToken}` } } { headers: { Authorization: `Bearer ${apiToken}` } }
); );
const { const {
result: [deployment], result: [deployment],
} = (await response.json()) as { result: Deployment[] }; } = (await response.json()) as { result: Deployment[] };
return deployment; return deployment;
}; };
const createGitHubDeployment = async (octokit: Octokit, productionEnvironment: boolean, environment: string) => { const createGitHubDeployment = async (octokit: Octokit, productionEnvironment: boolean, environment: string) => {
const deployment = await octokit.rest.repos.createDeployment({ const deployment = await octokit.rest.repos.createDeployment({
owner: context.repo.owner, owner: context.repo.owner,
repo: context.repo.repo, repo: context.repo.repo,
ref: context.ref, ref: context.ref,
auto_merge: false, auto_merge: false,
description: "Cloudflare Pages", description: "Cloudflare Pages",
required_contexts: [], required_contexts: [],
environment, environment,
production_environment: productionEnvironment, production_environment: productionEnvironment,
}); });
if (deployment.status === 201) { if (deployment.status === 201) {
return deployment.data; return deployment.data;
} }
}; };
const createGitHubDeploymentStatus = async ({ const createGitHubDeploymentStatus = async ({
id, id,
url, url,
deploymentId, deploymentId,
environmentName, environmentName,
productionEnvironment, productionEnvironment,
octokit, octokit,
}: { }: {
octokit: Octokit, octokit: Octokit;
id: number; id: number;
url: string; url: string;
deploymentId: string; deploymentId: string;
environmentName: string; environmentName: string;
productionEnvironment: boolean; productionEnvironment: boolean;
}) => { }) => {
await octokit.rest.repos.createDeploymentStatus({ await octokit.rest.repos.createDeploymentStatus({
owner: context.repo.owner, owner: context.repo.owner,
repo: context.repo.repo, repo: context.repo.repo,
deployment_id: id, deployment_id: id,
// @ts-ignore // @ts-ignore
environment: environmentName, environment: environmentName,
environment_url: url, environment_url: url,
production_environment: productionEnvironment, production_environment: productionEnvironment,
log_url: `https://dash.cloudflare.com/${accountId}/pages/view/${projectName}/${deploymentId}`, log_url: `https://dash.cloudflare.com/${accountId}/pages/view/${projectName}/${deploymentId}`,
description: "Cloudflare Pages", description: "Cloudflare Pages",
state: "success", state: "success",
}); });
}; };
const createJobSummary = async ( const createJobSummary = async ({ deployment, aliasUrl }: { deployment: Deployment; aliasUrl: string }) => {
{ const deployStage = deployment.stages.find((stage) => stage.name === "deploy");
deployment,
aliasUrl, let status = "⚡️ Deployment in progress...";
}: if (deployStage?.status === "success") {
{ status = "✅ Deploy successful!";
deployment: Deployment; } else if (deployStage?.status === "failure") {
aliasUrl: string; status = "🚫 Deployment failed";
} }
) => {
const deployStage = deployment.stages.find((stage) => stage.name === 'deploy'); await summary
.addRaw(
let status = '⚡️ Deployment in progress...'; `
if (deployStage?.status === 'success') {
status = '✅ Deploy successful!';
} else if (deployStage?.status === 'failure') {
status = '🚫 Deployment failed';
}
await summary
.addRaw(`
# Deploying with Cloudflare Pages # Deploying with Cloudflare Pages
| Name | Result | | Name | Result |
@ -121,51 +113,52 @@ try {
| **Status**: | ${status} | | **Status**: | ${status} |
| **Preview URL**: | ${deployment.url} | | **Preview URL**: | ${deployment.url} |
| **Branch Preview URL**: | ${aliasUrl} | | **Branch Preview URL**: | ${aliasUrl} |
`) `
.write(); )
} .write();
};
(async () => {
const project = await getProject(); (async () => {
if (!project) throw new Error('Unable to find pages project') const project = await getProject();
if (!project) throw new Error("Unable to find pages project");
const githubBranch = env.GITHUB_REF_NAME;
const productionEnvironment = githubBranch === project.production_branch; const githubBranch = env.GITHUB_REF_NAME;
const environmentName = productionEnvironment ? "Production" : `Preview: (${githubBranch})`; const productionEnvironment = githubBranch === project.production_branch;
const environmentName = productionEnvironment ? "Production" : `Preview: (${githubBranch})`;
let gitHubDeployment: Awaited<ReturnType<typeof createGitHubDeployment>>;
let gitHubDeployment: Awaited<ReturnType<typeof createGitHubDeployment>>;
if (gitHubToken && gitHubToken.length) {
const octokit = getOctokit(gitHubToken); if (gitHubToken && gitHubToken.length) {
gitHubDeployment = await createGitHubDeployment(octokit, productionEnvironment, environmentName); const octokit = getOctokit(gitHubToken);
} gitHubDeployment = await createGitHubDeployment(octokit, productionEnvironment, environmentName);
}
const pagesDeployment = await createPagesDeployment();
setOutput("id", pagesDeployment.id); const pagesDeployment = await createPagesDeployment();
setOutput("url", pagesDeployment.url); setOutput("id", pagesDeployment.id);
setOutput("environment", pagesDeployment.environment); setOutput("url", pagesDeployment.url);
setOutput("environment", pagesDeployment.environment);
let alias = pagesDeployment.url;
if (!productionEnvironment && pagesDeployment.aliases && pagesDeployment.aliases.length > 0) { let alias = pagesDeployment.url;
alias = pagesDeployment.aliases[0]; if (!productionEnvironment && pagesDeployment.aliases && pagesDeployment.aliases.length > 0) {
} alias = pagesDeployment.aliases[0];
setOutput("alias", alias); }
setOutput("alias", alias);
await createJobSummary({ deployment: pagesDeployment, aliasUrl: alias });
await createJobSummary({ deployment: pagesDeployment, aliasUrl: alias });
if (gitHubDeployment) {
const octokit = getOctokit(gitHubToken); if (gitHubDeployment) {
const octokit = getOctokit(gitHubToken);
await createGitHubDeploymentStatus({
id: gitHubDeployment.id, await createGitHubDeploymentStatus({
url: pagesDeployment.url, id: gitHubDeployment.id,
deploymentId: pagesDeployment.id, url: pagesDeployment.url,
environmentName, deploymentId: pagesDeployment.id,
productionEnvironment, environmentName,
octokit productionEnvironment,
}); octokit,
} });
})(); }
})();
} catch (thrown) { } catch (thrown) {
setFailed(thrown.message); setFailed(thrown.message);
} }

Loading…
Cancel
Save