Skip to content

Commit b7b9ec0

Browse files
SueSmithSueSmith
committed
Updates
0 parents  commit b7b9ec0

File tree

9 files changed

+521
-0
lines changed

9 files changed

+521
-0
lines changed

‎.devcontainer/devcontainer.json‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
2+
// README at: https://github.com/devcontainers/templates/tree/main/src/ubuntu
3+
{
4+
"name": "Ubuntu",
5+
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
6+
"image": "mcr.microsoft.com/devcontainers/base:noble",
7+
"features": {
8+
"ghcr.io/devcontainers/features/node:1": {},
9+
"ghcr.io/devcontainers/features/github-cli:1": {}
10+
},
11+
"portsAttributes": {
12+
"3000": {
13+
"label": "🚧 Origin",
14+
"onAutoForward": "openPreview"
15+
},
16+
"7676": {
17+
"label": "🌎 Compute",
18+
"onAutoForward": "openPreview"
19+
}
20+
},
21+
"updateContentCommand": {
22+
"cinstall": "npm install",
23+
"vinstall": "cd origin && npm install"
24+
},
25+
"postAttachCommand": {
26+
"inform": "bash helpers/welcome.sh",
27+
"build": "npm run start",
28+
"origin": "cd origin && npx --yes serve --no-port-switching=true"
29+
},
30+
"waitFor": "updateContentCommand",
31+
"customizations": {
32+
"vscode": {
33+
"extensions": [
34+
"jkearins.action-buttons-ext@0.1.1",
35+
"dbaeumer.vscode-eslint"
36+
],
37+
"settings": {
38+
"files.exclude": {
39+
"package-lock.json": true,
40+
".gitignore": true,
41+
"node_modules/": true
42+
},
43+
"editor.minimap.enabled": false,
44+
"chat.sendElementsToChat.enabled": false,
45+
"actionButtons": {
46+
"commands": [
47+
{
48+
"name": "🌈 Prettify",
49+
"singleInstance": true,
50+
"useVsCodeApi": true,
51+
"command": "editor.action.formatDocument",
52+
"tooltip": "Tidy up your code"
53+
},
54+
{
55+
"name": "💻 Terminal",
56+
"singleInstance": true,
57+
"useVsCodeApi": true,
58+
"command": "workbench.action.terminal.toggleTerminal",
59+
"tooltip": "Open a terminal"
60+
},
61+
{
62+
"name": "🔎 Split",
63+
"singleInstance": true,
64+
"useVsCodeApi": true,
65+
"command": "workbench.action.moveEditorToNextGroup",
66+
"tooltip": "Move your active tab to the side"
67+
},
68+
{
69+
"name": "🔗 Share",
70+
"singleInstance": true,
71+
"command": "bash helpers/share.sh",
72+
"tooltip": "Grab a link to share your draft app"
73+
},
74+
{
75+
"name": "🚀 Publish",
76+
"singleInstance": true,
77+
"command": "bash helpers/publish.sh",
78+
"tooltip": "Publish your content to Fastly Compute"
79+
}
80+
],
81+
"defaultColor": "none",
82+
"reloadButton": null
83+
}
84+
}
85+
}
86+
}
87+
}

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
package-lock.json
3+
origin/node_modules
4+
bin
5+
pkg

‎construction-site.svg‎

Lines changed: 118 additions & 0 deletions
Loading

‎data.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"information": "This data comes back as JSON"
3+
}

‎edge.css‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
/******************************************************************************
2+
The style rules in this sheet apply to the edge version of the published site
3+
******************************************************************************/
4+
5+
/* Our default values set as CSS variables */
6+
:root {
7+
--color-bg: #25201e;
8+
--color-bg-alt: #d0ff00;
9+
--color-text-main: #f4eeec;
10+
--wrapper-height: 100vh;
11+
--image-max-width: 300px;
12+
--image-margin: 3rem;
13+
--font-family: sans-serif;
14+
--color-header: #d0ff00;
15+
}
16+
17+
/* Basic page style resets */
18+
* {
19+
box-sizing: border-box;
20+
}
21+
[hidden] {
22+
display: none !important;
23+
}
24+
25+
body {
26+
font-family: var(--font-family);
27+
background-color: var(--color-bg);
28+
margin:auto;
29+
color: var(--color-text-main);
30+
font-size:large;
31+
padding:1rem;
32+
max-width:800px;
33+
text-align:center;
34+
}
35+
36+
/* Very light scaling for our illustration */
37+
.title, h1 {
38+
color: var(--color-header);
39+
font-family: var(--font-family);
40+
font-size: 2.6rem;
41+
font-weight:600;
42+
margin:1rem;
43+
}
44+
45+
/* ⚠️ Location indicator ⚠️ */
46+
location-indicator {
47+
font-weight:bold;
48+
}
49+
50+
/* 🚨 Hide content with "origin" class name at the edge 🚨 */
51+
.origin {
52+
display:none;
53+
}
54+
55+
p {
56+
margin-top:0.5em;
57+
margin-bottom:0.5em;
58+
}
59+
60+
a:link,
61+
a:visited {
62+
text-decoration:none;
63+
color:var(--color-header);
64+
}
65+
a:hover {
66+
color:black;
67+
background-color:var(--color-bg-alt);
68+
text-decoration:underline;
69+
}
70+
71+
p, ul {
72+
max-width:700px;
73+
margin:1rem auto;
74+
}
75+
76+
.avatar {
77+
width: 10rem;
78+
height: 10rem;
79+
margin:auto;
80+
background-image: url("production-site.svg");
81+
background-repeat:no-repeat;
82+
background-size:contain;
83+
}
84+
85+
.footer {
86+
display: flex;
87+
justify-content: space-between;
88+
margin: 1rem auto 0;
89+
padding: 1.5rem;
90+
width: 100%;
91+
flex-wrap: wrap;
92+
display: flex;
93+
justify-content: flex-end;
94+
}
95+
a.remix {
96+
background-color: var(--color-bg-alt);
97+
border: 2px solid var(--color-text-main);
98+
border-radius: 5px;
99+
padding:0.5rem;
100+
font-weight:bold;
101+
color: var(--color-bg);
102+
text-decoration:none;
103+
}
104+
a.remix:hover {
105+
background: var(--color-text-main);
106+
color:var(--color-bg);
107+
}

‎index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
7+
<meta property="og:title" content="Learn edge computing" />
8+
<meta property="og:description" content="Learn how to code a compute app" />
9+
10+
<title>Hello Compute!</title>
11+
<script src="where.js" type="module"></script>
12+
<link rel="stylesheet" href="./style.css" />
13+
</head>
14+
<body>
15+
<location-indicator>This website is on the WEB 🌐</location-indicator>
16+
<h1 class="origin">Hi origin!</h1>
17+
<h1 class="edge">Hi edge!</h1>
18+
<div class="avatar"></div>
19+
<p class="origin">
20+
This is the <a href="https://glitchdotcom.github.io/hello-origin">origin</a> version of a website for learning about Fastly Compute in a GitHub Codespace.
21+
</p>
22+
<p class="edge">
23+
This is the <a href="https://hello-compute.edgecompute.app">edge</a> version of a website for learning about Fastly Compute in a GitHub Codespace.
24+
</p>
25+
<p>💡 Try a page that doesn't exist: <a href="ohno">ohno</a><br/>
26+
🧪 Try some data the origin returns as JSON: <a href="data.json">/data.json</a>
27+
</p>
28+
<footer class="footer">
29+
<div>
30+
<a class="remix" href="https://github.com/glitchdotcom/hello-compute">🚧 Get your own app</a>
31+
</div>
32+
</footer>
33+
</body>
34+
</html>

‎production-site.svg‎

Lines changed: 25 additions & 0 deletions
Loading

‎style.css‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/******************************************************************************
2+
The style rules in this sheet apply to the origin version of the site
3+
******************************************************************************/
4+
5+
/* Our default values set as CSS variables */
6+
:root {
7+
--color-bg: #f4eeec;
8+
--color-bg-alt: #e7ff7a;
9+
--color-text-main: #000000;
10+
--wrapper-height: 100vh;
11+
--image-max-width: 300px;
12+
--image-margin: 3rem;
13+
--font-family: sans-serif;
14+
--color-header: #4aa800;
15+
}
16+
17+
/* Basic page style resets */
18+
* {
19+
box-sizing: border-box;
20+
}
21+
[hidden] {
22+
display: none !important;
23+
}
24+
25+
body {
26+
font-family: var(--font-family);
27+
margin: auto;
28+
color: var(--color-text-main);
29+
font-size:large;
30+
padding:1rem;
31+
max-width:800px;
32+
text-align:center;
33+
background-color:var(--color-bg);
34+
}
35+
36+
/* Very light scaling for our illustration */
37+
.title,
38+
h1 {
39+
color: var(--color-header);
40+
font-family: var(--font-family);
41+
font-size: 2.6rem;
42+
font-weight: 600;
43+
margin:1rem;
44+
}
45+
46+
/* 🚨 Hide content with "edge" class name at the origin 🚨 */
47+
.edge {
48+
display: none;
49+
}
50+
51+
/* ⚠️ Location indicator ⚠️ */
52+
location-indicator {
53+
font-weight:bold;
54+
}
55+
56+
a:link,
57+
a:visited {
58+
text-decoration:none;
59+
color:var(--color-header);
60+
}
61+
a:hover {
62+
color:black;
63+
background-color:var(--color-bg-alt);
64+
text-decoration:underline;
65+
}
66+
p, ul {
67+
max-width:700px;
68+
margin:1rem auto;
69+
}
70+
.avatar {
71+
width: 10rem;
72+
height: 10rem;
73+
margin:auto;
74+
background-image: url("construction-site.svg");
75+
background-repeat:no-repeat;
76+
background-size:contain;
77+
}
78+
.footer {
79+
display: flex;
80+
justify-content: space-between;
81+
margin: 1rem auto 0;
82+
padding: 1.5rem;
83+
width: 100%;
84+
flex-wrap: wrap;
85+
display: flex;
86+
justify-content: flex-end;
87+
}
88+
a.remix {
89+
background-color: var(--color-bg-alt);
90+
border: 2px solid var(--color-text-main);
91+
border-radius: 5px;
92+
padding:0.5rem;
93+
font-weight:bold;
94+
color: var(--color-text-main);
95+
text-decoration:none;
96+
}
97+
a.remix:hover {
98+
background: var(--color-text-main);
99+
color:var(--color-bg-alt);
100+
}

0 commit comments

Comments
 (0)