Initial commit

Author: admin-world

.do/app.yaml

@@ -0,0 +1,8 @@
+name: sample-html
+static_sites:
+- environment_slug: html
+  github:
+    branch: main
+    deploy_on_push: true
+    repo: digitalocean/sample-html
+  name: sample-html

.do/deploy.template.yaml

@@ -0,0 +1,8 @@
+spec:
+  name: sample-html
+  static_sites:
+  - environment_slug: html
+    git:
+      branch: main
+      repo_clone_url: https://github.com/digitalocean/sample-html.git
+    name: sample-html

.github/dependabot.yaml

@@ -0,0 +1,65 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+# borrowed from https://github.com/dependabot/dependabot-core/blob/main/.github/dependabot.yml
+
+version: 2
+updates:
+  - package-ecosystem: "bundler"
+    directory: "/"
+    schedule:
+      interval: "daily"
+    groups:
+      dev-dependencies:
+        dependency-type: "development"
+        update-types:
+          - "minor"
+          - "patch"
+  - package-ecosystem: "composer"
+    directory: "/"
+    schedule:
+      interval: "daily"
+    groups:
+      dev-dependencies:
+        dependency-type: "development"
+        update-types:
+          - "minor"
+          - "patch"
+  - package-ecosystem: "docker"
+    directory: "/"
+    schedule:
+      interval: "daily"
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "daily"
+  - package-ecosystem: "gomod"
+    directory: "/"
+    schedule:
+      interval: "daily"
+  - package-ecosystem: "mix"
+    directory: "/"
+    schedule:
+      interval: "daily"
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"
+    groups:
+      dev-dependencies:
+        dependency-type: "development"
+        update-types:
+          - "minor"
+          - "patch"
+    ignore:
+      - dependency-name: "npm"
+        update-types: ["version-update:semver-major"]
+  - package-ecosystem: "pip"
+    directory: "/"
+    schedule:
+      interval: "daily"
+  - package-ecosystem: "pub"
+    directory: "/"
+    schedule:
+      interval: "daily"

.npmignore

@@ -0,0 +1,2 @@
+.git
+color.gif

README.md

@@ -0,0 +1,56 @@
+## Getting Started
+
+We provide a sample app using HTML that you can deploy on App Platform. These steps will get this sample application running for you using App Platform.
+
+**Note: Following these steps may result in charges for the use of DigitalOcean services.**
+
+### Requirements
+
+* You need a DigitalOcean account. If you don't already have one, you can sign up at https://cloud.digitalocean.com/registrations/new.
+
+## Deploying the App
+
+Click this button to deploy the app to the DigitalOcean App Platform. If you are not logged in, you will be prompted to log in with your DigitalOcean account.
+
+[![Deploy to DigitalOcean](https://www.deploytodo.com/do-btn-blue.svg)](https://cloud.digitalocean.com/apps/new?repo=https://github.com/digitalocean/sample-html/tree/main)
+
+Using this button disables the ability to automatically re-deploy your app when pushing to a branch or tag in your repository as you are using this repo directly.
+
+If you want to automatically re-deploy your app, [fork](https://docs.github.com/en/github/getting-started-with-github/fork-a-repo) the GitHub repository to your account so that you have a copy of it stored to the cloud. Click the **Fork** button in the GitHub repository and follow the on-screen instructions.
+
+After forking the repo, you should now be viewing this README in your own GitHub org (e.g. `https://github.com/<your-org>/sample-html`). To deploy the new repo, visit https://cloud.digitalocean.com/apps and click **Create App**. Then, click **GitHub**, select the repository you created and select the `main` branch. App Platform will inspect the code, automatically detect the kind of component to create, and use the correct buildpack to create and deploy a container.
+
+After clicking the **Deploy to DigitalOcean** button or completing the instructions above to fork the repo, follow these steps:
+
+1. Configure the app such as specifying HTTP routes, environment variables or adding a database.
+1. Provide a name for your app and select which region you want to deploy your app to and click **Next**. The closest region to you should be selected by default. All App Platform apps are routed through a global CDN. So this will not affect your app performance, unless it needs to talk to external services.
+1. On the following screen, leave all the fields as they are and click **Next**.
+1. Confirm your **Plan** settings and how many containers you want to launch and click **Launch Basic/Pro App**.
+1. You should see a "Building..." progress indicator. You can click **View Logs** to see more details of the build.
+1. It can take a few minutes for the build to finish, but you can follow the progress in the **Deployments** tab.
+1. Once the build completes successfully, click the **Live App** link in the header and you should see your running application in a new tab, displaying the home page.
+
+### Making Changes to Your App
+
+If you followed the steps to fork the repo and used your own copy when deploying the app, you can push changes to your fork and see App Platform automatically re-deploy the update to your app. During these automatic deployments, your application will never pause or stop serving request because App Platform offers zero-downtime deployments.
+
+Here's an example code change you can make for this app:
+
+1. Edit code within the repository
+1. Commit the change to the `main` branch. Normally it's a better practice to create a new branch for your change and then merge that branch to `main` after review, but for this demo you can commit to the `main` branch directly.
+1. Visit https://cloud.digitalocean.com/apps and navigate to your sample app.
+1. You should see a "Building..." progress indicator, just like when you first created the app.
+1. Once the build completes successfully, click the **Live App** link in the header and you should see your updated application running. You may need to force refresh the page in your browser (e.g. using **Shift+Reload**).
+
+### Learn More
+
+You can learn more about the App Platform and how to manage and update your application at https://www.digitalocean.com/docs/app-platform/.
+
+## Deleting the App
+
+When you no longer need this sample application running live, you can delete it by following these steps:
+1. Visit the Apps control panel at https://cloud.digitalocean.com/apps.
+2. Navigate to the sample app.
+3. In the **Settings** tab, click **Destroy**.
+
+**Note: If you do not delete your app, charges for using DigitalOcean services will continue to accrue.**

color.gif

@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>#000000</title>
+    <link type="image/x-icon" rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAHklEQVQ4T2NkYGD4z0ABYBw1gGE0DBhGw4BhWIQBAE5OEAELnjVHAAAAAElFTkSuQmCC">
+    <style>
+        :root {
+            --color: #000000;
+            --color-transparent: #00000022;
+        }
+
+        ::selection {
+            background: var(--color-transparent);
+        }
+
+        html,
+        body {
+            background: var(--color);
+            height: 100%;
+            margin: 0;
+        }
+
+        body {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+        }
+
+        #color {
+            background: white;
+            color: var(--color);
+            font-size: 2.5rem;
+            font-weight: 300;
+            padding: 2.25rem 3rem;
+            font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
+            cursor: text;
+        }
+    </style>
+</head>
+
+<body>
+    <p id="color">#000000</p>
+    <script>
+        function randomInt(min, max) {
+            return Math.floor(Math.random() * (max - min + 1) + min);
+        }
+
+        function hslToHex(h, s, l) {
+            h /= 360;
+            s /= 100;
+            l /= 100;
+            var r = void 0,
+                g = void 0,
+                b = void 0;
+            if (s === 0) {
+                r = g = b = l; // achromatic
+            } else {
+                var hue2rgb = function hue2rgb(p, q, t) {
+                    if (t < 0) t += 1;
+                    if (t > 1) t -= 1;
+                    if (t < 1 / 6) return p + (q - p) * 6 * t;
+                    if (t < 1 / 2) return q;
+                    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+                    return p;
+                };
+                var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+                var p = 2 * l - q;
+                r = hue2rgb(p, q, h + 1 / 3);
+                g = hue2rgb(p, q, h);
+                b = hue2rgb(p, q, h - 1 / 3);
+            }
+            var toHex = function toHex(x) {
+                var hex = Math.round(x * 255).toString(16);
+                return hex.length === 1 ? '0' + hex : hex;
+            };
+            return '#' + toHex(r) + toHex(g) + toHex(b);
+        }
+
+        window.onload = function () {
+            let stopProp = function (ev) {
+                ev.stopPropagation();
+            }
+
+            var colorElement = document.getElementById("color");
+            colorElement.addEventListener("click", stopProp, false);
+            colorElement.addEventListener("mousedown", stopProp, false);
+
+            var setFavicon = function (hex) {
+                var canvas = document.createElement('canvas');
+                canvas.width = 16;
+                canvas.height = 16;
+                var ctx = canvas.getContext('2d');
+                ctx.fillStyle = hex;
+                ctx.fillRect(0, 0, 16, 16);
+                document.getElementsByTagName('link')[0].href = canvas.toDataURL("image/x-icon");
+            }
+
+            var setRandomColor = function setRandomColor() {
+                var h = void 0,
+                    s = void 0,
+                    l = void 0;
+
+                h = randomInt(0, 359);
+                s = randomInt(55, 75);
+                l = randomInt(40, 60);
+
+                document.documentElement.style.setProperty('--color', 'hsl(' + h + ', ' + s + '%, ' + l + '%)');
+                var hex = hslToHex(h, s, l);
+                document.title = hex;
+                colorElement.innerHTML = hex;
+                document.documentElement.style.setProperty('--color-transparent', hex + '22');
+
+                setFavicon(hex);
+            };
+            setRandomColor();
+
+            var body = document.getElementsByTagName("body")[0];
+            body.addEventListener("mousedown", function (ev) {
+                ev.preventDefault();
+            });
+            body.addEventListener("click", function () {
+                setRandomColor();
+            }, false);
+        };
+    </script>
+</body>
+
+</html>