Adding static website application

packages/playground/public/info/static_website.md

@@ -0,0 +1,5 @@
+---
+title: Static Website
+---
+
+Static Website is an application where a user provide a github repository url and it's automatically served using caddy. For more details, check [Static Website documentation](https://www.manual.grid.tf/documentation/dashboard/solutions/static_website.html).

packages/playground/src/constants/deployment_list.ts

@@ -124,6 +124,12 @@ export const deploymentListEnvironments = {
     CHAIN_ENDPOINT: "Chain Endpoint",
   },
 
+  static_website: {
+    SSH_KEY: _ssh,
+    GITHUB_URL: "HTTPS URL for git repository",
+    ROOT: "HTML Directory",
+  },
+
   taiga: {
     SSH_KEY: _ssh,
     DOMAIN_NAME: "Domain Name",

packages/playground/src/router/index.ts

@@ -341,6 +341,29 @@ function createApplicationsRoutes(): RouteRecordRaw[] {
         },
       },
     },
+
+    {
+      path: DashboardRoutes.Applications.StaticWebsite,
+      component: () => import("../views/staticwebsite_view.vue"),
+      meta: {
+        title: "Static Website",
+        info: { page: "info/static_website.md" },
+        navbarConfig: {
+          back: true,
+          path: [
+            { title: "Deploy" },
+            {
+              title: "Applications",
+              disabled: false,
+              to: DashboardRoutes.Deploy.Applications,
+            },
+            {
+              title: "Static Website",
+            },
+          ],
+        },
+      },
+    },
     // Commented for now and will be user later.
     // {
     //   path: DashboardRoutes.Applications.Freeflow,

packages/playground/src/router/routes.ts

@@ -52,6 +52,7 @@ enum OtherRoutes {
 enum ApplicationRoutes {
   BaseRoute = "/deploy/applications/",
   Peertube = "/deploy/applications/peertube/",
+  StaticWebsite = "/deploy/applications/static_website/",
   Funkwhale = "/deploy/applications/funkwhale/",
   Mattermost = "/deploy/applications/mattermost/",
   Discourse = "/deploy/applications/discourse/",

packages/playground/src/types/index.ts

@@ -114,6 +114,7 @@ export enum ProjectName {
   Qvm = "Qvm",
   Umbrel = "Umbrel",
   FreeFlow = "Freeflow",
+  StaticWebsite = "StaticWebsite",
 }
 
 export enum SolutionCode {
@@ -139,6 +140,7 @@ export enum SolutionCode {
   qvm = "qvm",
   umbrel = "um",
   wordpress = "wp",
+  staticwebsite = "sw",
 }
 
 export const solutionType: { [key: string]: string } = {
@@ -161,6 +163,7 @@ export const solutionType: { [key: string]: string } = {
   umbrel: "Umbrel",
   vm: "Micro Virtual Machine",
   wordpress: "Wordpress",
+  staticwebsite: "Static Website",
 };
 
 export interface solutionFlavor {

packages/playground/src/views/solutions_view.vue

@@ -93,6 +93,13 @@ export default {
         icon: "taiga.png",
         route: DashboardRoutes.Applications.Taiga,
       },
+      {
+        title: "Static Website",
+        excerpt:
+          "Static Website is an application where a user provides a Github repository url and it's automatically served using Caddy.",
+        icon: "static_website.png",
+        route: DashboardRoutes.Applications.StaticWebsite,
+      },
       // {
       //   title: "Owncloud",
       //   excerpt:

packages/playground/src/views/staticwebsite_view.vue

@@ -0,0 +1,26 @@
+<template>
+  <view-layout>
+    <StaticWebsite />
+
+    <template #list>
+      <TfDeploymentList title="Static Website Instances" :project-name="name" />
+    </template>
+  </view-layout>
+</template>
+
+<script lang="ts">
+import { ProjectName } from "../types";
+import TfDeploymentList from "../weblets/tf_deployment_list.vue";
+import StaticWebsite from "../weblets/tf_staticwebsite.vue";
+
+export default {
+  name: "CaddyView",
+  components: {
+    StaticWebsite,
+    TfDeploymentList,
+  },
+  setup() {
+    return { name: ProjectName.StaticWebsite };
+  },
+};
+</script>

packages/playground/src/weblets/tf_deployment_list.vue

@@ -217,6 +217,20 @@
           />
         </template>
 
+        <template #StaticWebsite-actions="{ item }">
+          <IconActionBtn
+            tooltip="Show Details"
+            icon="mdi-eye-outline"
+            @click="openDialog(tabs[activeTab].value, item)"
+          />
+          <IconActionBtn
+            tooltip="Visit"
+            icon="mdi-web"
+            color="anchor"
+            :href="'https://' + item.value.env.STATICWEBSITE_DOMAIN"
+          />
+        </template>
+
         <template #Algorand-actions="{ item }">
           <IconActionBtn
             tooltip="Show Details"
@@ -378,6 +392,7 @@ const tabs: Tab[] = [
   { title: "Umbrel", value: "Umbrel", imgPath: "images/icons/umbrel.png" },
   { title: "Freeflow", value: "Freeflow", imgPath: "images/icons/freeflow.png" },
   { title: "Wordpress", value: "Wordpress", imgPath: "images/icons/wordpress.png" },
+  { title: "Static Website", value: "StaticWebsite", imgPath: "images/icons/wordpress.png" },
 ];
 
 const layout = useLayout();