update readme

likec4 · Nov 2, 2023 · 325aa56 · 325aa56
1 parent b0a7591
commit 325aa56
Show file tree

Hide file tree

Showing 8 changed files with 145 additions and 52 deletions.
diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
@@ -2,9 +2,11 @@
 name: Deploy Pages
 
 on:
-  # Runs on pushes targeting the default branch
+  # Runs on pushes targeting the default branch and c4 files
   push:
     branches: ["main"]
+    paths:
+      - "**.c4"
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -31,14 +33,13 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: 20
+          cache: 'npm'
       - name: Setup Pages
         id: pages
         uses: actions/configure-pages@v3
-      - name: Install dependencies
-        run: npm install
       - name: Build
-        run: npx likec4 build -o ./dist --base "${{ steps.pages.outputs.base_path }}"
+        run: npx likec4@latest build -o ./dist --base "${{ steps.pages.outputs.base_path }}"
       # GitHub Pages doesn't allow to configure routing for single page apps,
       # So we copy index.html to 404.html to make it work
       - name: Custom 404 page

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "editor.codeLens": true
+}
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Denis Davydkov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,3 +1,68 @@
 # LikeC4 Template
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/likec4/template?file=src%2Fmodel.c4&initialpath=%2Fview%2Findex)
+This template is a simple example of how to use LikeC4.  
+Contains:
+
+- LikeC4 sources ([`src`](./src/))
+- Workflow to deploy to github pages ([`pages.yml`](./.github/workflows/pages.yml))
+
+Demo - [https://template.likec4.dev](https://template.likec4.dev/view/cloud)
+
+Try it online:
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/likec4/template?file=src%2Fmodel.c4&initialpath=%2Fview%2Findex)
+
+> StackBlitz does not support extensions, so do not expect validation, syntax highlighting and other features in likec4 files.  
+> Try this template online with [github.dev](https://github.dev/likec4/template/blob/main/src/model.c4) and install extension.
+
+## How-to
+
+1. Create a new repository from this template
+2. Pull your repository and open in VSCode
+3. Install suggested [LikeC4 extension](https://marketplace.visualstudio.com/items?itemName=likec4.likec4)
+
+Now you can edit likec4 sources, refactor, navigate and preview diagrams.
+
+### CLI
+
+You can install globally, locally and use scripts from `package.json`, or just via `npx`  
+Check [how to install likec4](https://github.com/likec4/likec4/tree/main/packages/likec4#install)  
+
+> LikeC4 requires Node.js version 18+, 20+  
+
+To start local server with live reload (for development or quick preview)  
+Inside the project folder:
+
+```bash
+npx likec4 start
+```
+
+Export to PNG:
+
+```bash
+npx likec4 export png -o png
+```
+
+Documentation: https://likec4.dev/docs/tools/cli/
+
+### Deployment
+
+Deployment is the same as for any project built with [vite](https://vitejs.dev/).
+
+1. Build static site (export to HTML, ready for deployment):
+
+```bash
+npx likec4 build -o ./dist
+```
+> Check `npx likec4 build --help` for options and examples
+
+2. Upload `./dist` folder to your hosting
+
+#### Github Pages
+
+This template contains workflow to deploy to github pages on every push to `main` branch.  
+Check [`.github/workflows/pages.yml`](./.github/workflows/pages.yml)
+
+## License
+
+This project is released under the [MIT License](LICENSE)
diff --git a/src/_spec.c4 b/src/_spec.c4
@@ -3,10 +3,11 @@ specification {
   element actor {
     style {
       shape person
+      color secondary
     }
   }
 
-  element system
+  element system  
   element component
   element service
   element webapp {
@@ -28,5 +29,5 @@ specification {
     style {
       shape storage
     }
-  }
+  }  
 }
diff --git a/src/cloud/backend.c4 b/src/cloud/backend.c4
@@ -1,20 +1,21 @@
 model {
 
-  extend provider {
+  extend aws {
     pg = database 'PostgreSQL' {
+      technology 'AWS Aurora PostgreSQL'
       description 'Database for storing relational data'
       style {
         icon https://icons.terrastruct.com/dev%2Fpostgresql.svg
       }
 
       tbl_customers = db_table '[ customers ]' {
-        technology 'private schema'
+        technology '<< private schema >>'
       }
 
       tbl_sessions = db_table '[ sessions ]' {
-        technology 'private schema'
+        technology '<< private schema >>'
         description '
-          Active sessions
+          Active sessions of logged in customers
         '
       }
       tbl_sessions -> tbl_customers 'belongs to'
@@ -26,8 +27,9 @@ model {
     graphql = service 'GraphQL API' {
       description 'The GraphQL API of the cloud system'
 
-      -> provider.pg.tbl_sessions 'reads/writes'
-      -> provider.pg.tbl_customers 'reads/writes'
+      -> aws.pg.tbl_sessions 'reads/writes'
+      -> aws.pg.tbl_customers 'reads/writes'
+      -> aws.cognito 'authorizes'
     }
 
   }
@@ -41,15 +43,16 @@ views {
     include
       *,
       cloud,
-      provider,
-      provider.pg,
-      cloud.backend.* -> provider.pg.*
+      aws,
+      aws.pg,
+      cloud.backend -> aws.*,
+      cloud.backend -> aws.pg.*
 
     style * {
       color secondary
     }
 
-    style cloud, provider, provider.pg  {
+    style cloud, aws, aws.pg  {
       color muted
     }
 
@@ -58,21 +61,23 @@ views {
     }
   }
 
-  view provider_pg  of provider.pg {
+  view aws_pg of aws.pg {
     title 'Databases'
     include
       *,
-      cloud.* -> provider.pg.*
+      aws,
+      cloud,
+      cloud.* -> aws.pg
 
     style * {
       color secondary
     }
 
-    style cloud, provider, provider.pg  {
+    style cloud, aws, aws.pg  {
       color muted
     }
 
-    style provider.pg.* {
+    style aws.pg.* {
       color green
     }
   }

diff --git a/src/cloud/ui.c4 b/src/cloud/ui.c4
@@ -3,14 +3,17 @@ model {
   extend cloud.ui {
 
     dashboard = webapp 'Customer Dashboard' {
-      technology 'Nextjs'
+      technology 'NextJS'
       description 'Web application, that allows customers to interact with the cloud system'
       -> cloud.backend.graphql 'fetches data'
+      -> aws.cognito 'authenticates'
     }
 
     mobile = mobile 'Mobile App' {
+      technology 'Flutter'
       description 'The mobile app of the cloud system'
       -> cloud.backend.graphql 'fetches data'
+      -> aws.cognito 'authenticates'
     }
 
     customer -> dashboard 'opens in browser'
@@ -25,33 +28,20 @@ views {
 
     include
       *,
-      cloud
+      cloud,
+      aws,
+      cloud.ui -> aws.*
 
     style * {
       color secondary
     }
 
-    style cloud  {
+    style cloud, aws  {
       color muted
     }
 
     style cloud.ui, cloud.ui.* {
       color green
     }
   }
-
-  view cloud_ui_dashboard of dashboard {
-    title 'Frontend: Dashboard'
-    include *
-    style cloud.ui,cloud.ui.* {
-      color green
-    }
-  }
-  view cloud_ui_mobile of mobile {
-    title 'Frontend: Mobile'
-    include *
-    style cloud.ui,cloud.ui.* {
-      color green
-    }
-  }
 }
diff --git a/src/model.c4 b/src/model.c4
@@ -27,41 +27,48 @@ model {
   customer -> cloud 'uses and pays'
   customer -> ui 'uses web and mobile'
 
-  provider = system 'Managed Services' {
+  aws = system 'Amazon Web Services' {
     description '
-      Provider of managed services
-      and cloud hosting
+      Cloud Infrastructure and
+      Managed Services
     '
+    style {
+      color amber
+      icon https://upload.wikimedia.org/wikipedia/commons/9/93/Amazon_Web_Services_Logo.svg
+    }
+
+    cognito = component 'Cognito' {
+      description 'Provides user management and authentication'
+    }
   }
 
-  cloud -> provider 'uses services'
+  cloud -> aws 'uses services'
 }
 
 views {
 
   view index {
-    title 'Landscape'
+    title 'System Landscape'
     include *
   }
 
   view cloud of cloud {
     title 'Context: Cloud System'
     include *
-
-    style * {
-      color secondary
-    }
     style cloud, cloud.* {
       color green
     }
   }
 
-  view provider of provider {
-    title 'Context: Managed Services'
+  view aws of aws {
+    title 'Context: Amazon Web Services'
     include
       *,
       cloud,
-      cloud.* -> provider.*
+      cloud.* -> aws.*
+    style aws, cloud {
+      color muted
+    }
   }
 
 }