diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml index 5eff4b4..ca14f2a 100644 --- 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 new file mode 100644 index 0000000..55451ec --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "editor.codeLens": true +} \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..3b086d0 --- /dev/null +++ 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 index 98f1849..1748509 100644 --- 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) \ No newline at end of file +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) \ No newline at end of file diff --git a/src/_spec.c4 b/src/_spec.c4 index f2e95ba..68041f1 100644 --- 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 index 19d1e58..71aa1f1 100644 --- 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 index f8dfeb4..064ed5a 100644 --- 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,13 +28,15 @@ views { include *, - cloud + cloud, + aws, + cloud.ui -> aws.* style * { color secondary } - style cloud { + style cloud, aws { color muted } @@ -39,19 +44,4 @@ views { 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 index 8236457..139ca23 100644 --- 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 + } } }