Skip to content

Commit

Permalink
Adds cd for studio
Browse files Browse the repository at this point in the history
  • Loading branch information
peterpolman committed Sep 18, 2024
1 parent 71cdba5 commit 4bc07b1
Show file tree
Hide file tree
Showing 9 changed files with 169 additions and 47 deletions.
133 changes: 133 additions & 0 deletions .github/workflows/studio.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
name: App CI

on:
push:

jobs:
buildAndTest:
name: 'Build & Test'
runs-on: ubuntu-latest
strategy:
matrix:
node-version: ['18'] # Add other versions if needed

steps:
- name: Checkout repository
uses: actions/checkout@v3
with:
fetch-depth: 0

- name: Configure AWS credentials
uses: aws-actions/configure-aws-credentials@v1
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: us-east-1

- name: Install Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}

- name: Restore Node.js dependencies
uses: actions/cache@v3
with:
path: ./node_modules
key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-node-
- name: Install Node.js dependencies
run: yarn install --frozen-lockfile

- name: Cache Node.js dependencies
uses: actions/cache/save@v3
if: always()
with:
path: ./node_modules
key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}

- name: Build App
run: yarn nx run studio:build --prod --skip-nx-cache

autodeploy:
name: 'Auto deploy'
runs-on: ubuntu-latest
if: "(github.ref == 'refs/heads/studio' || github.ref == 'refs/heads/main')"
needs: [buildAndTest]
outputs:
newTag: ${{ steps.version-bump.outputs.newTag }}
steps:
- name: 'Checkout source code'
uses: 'actions/checkout@v3'
with:
ref: ${{ github.ref }}

- name: Install Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}

- name: Configure AWS credentials
uses: aws-actions/configure-aws-credentials@v1
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: eu-west-3

- name: Restore Node.js dependencies
uses: actions/cache@v3
with:
path: ./node_modules
key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-node-
- name: Set environment based on branch
run: |
if [[ $GITHUB_REF == 'refs/heads/studio' ]]; then
echo "S3_URL=s3://dev-stuidio.thx.network" >> $GITHUB_ENV
echo "DISTRIBUTION=${{ secrets.CLOUDFRONT_DISTRIBUTION_APP_DEV }}" >> $GITHUB_ENV
echo "BUILD_MODE=dev" >> $GITHUB_ENV
elif [[ $GITHUB_REF == 'refs/heads/main' ]]; then
echo "S3_URL=s3://studio.thx.network" >> $GITHUB_ENV
echo "DISTRIBUTION=${{ secrets.CLOUDFRONT_DISTRIBUTION_APP_PROD }}" >> $GITHUB_ENV
echo "BUILD_MODE=prod" >> $GITHUB_ENV
fi
- name: Build App
run: NODE_ENV='production' yarn nx run studio:build --configuration=production --mode $BUILD_MODE --skip-nx-cache

- name: Deploy
run: aws s3 sync ./dist/apps/studio $S3_URL --delete

- name: Invalidate CloudFront cache
run: aws cloudfront create-invalidation --distribution-id $DISTRIBUTION --paths "/*"

discord:
name: Update Discord
runs-on: ubuntu-latest
needs: [autodeploy]
steps:
- name: 'Checkout source code'
uses: 'actions/checkout@v3'
with:
ref: ${{ github.ref }}

- name: Set DISCORD_WEBHOOK based on branch
run: |
if [[ $GITHUB_REF == 'refs/heads/studio' ]]; then
echo "DISCORD_WEBHOOK=${{ secrets.DISCORD_WEBHOOK_DEV }}" >> $GITHUB_ENV
elif [[ $GITHUB_REF == 'refs/heads/main' ]]; then
echo "DISCORD_WEBHOOK=${{ secrets.DISCORD_WEBHOOK_PROD }}" >> $GITHUB_ENV
fi
- name: Get version
run: echo "VERSION=$(git rev-parse HEAD)" >> $GITHUB_ENV

- name: Send message
env:
DISCORD_WEBHOOK: ${{ env.DISCORD_WEBHOOK }}
uses: Ilshidur/action-discord@master
with:
args: "${{ needs.autodeploy.result == 'success' && '✅' || '⛔' }} Released Studio `v${{ env.VERSION }}-app`"
2 changes: 1 addition & 1 deletion apps/studio/src/App.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="d-flex bg-primary h-100 overflow-auto flex-column">
<div class="d-flex bg-primary h-100 overflow-auto flex-column gradient-bg-opacity">
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
Expand Down
1 change: 1 addition & 0 deletions apps/studio/src/components/BaseCardCollectionMetadata.vue
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
centered
hide-header
hide-footer
body-class="gradient-shadow-xl"
@hidden="isModelGenerateQRCodeShown = false"
>
<BaseFormCollectionMetadataQRCodes :collection="collection" :metadata="metadata" />
Expand Down
5 changes: 2 additions & 3 deletions apps/studio/src/router/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,12 @@ const routes: Array<RouteRecordRaw> = [
{
name: 'collectioncreate',
path: '/collections/create',
component: () =>
import(/* webpackChunkName: "collectioncreate" */ '../views/studio/CollectionCreate.vue'),
component: () => import(/* webpackChunkName: "collectioncreate" */ '../views/studio/Collection.vue'),
},
{
name: 'collection',
path: '/collections/:id',
component: () => import(/* webpackChunkName: "collection" */ '../views/studio/CollectionCreate.vue'),
component: () => import(/* webpackChunkName: "collection" */ '../views/studio/Collection.vue'),
},
{
name: 'qr',
Expand Down
43 changes: 11 additions & 32 deletions apps/studio/src/scss/_gradients.scss
Original file line number Diff line number Diff line change
@@ -1,47 +1,26 @@

:root {
--thx-linear-gradient-line: linear-gradient(0deg, #5942c1, rgb(162, 0, 255),rgba(162, 0, 255,0.5), #5942c1) !important;
--thx-linear-gradient-bg: linear-gradient(140deg, #5942c1,#5942c1, rgba(162, 0, 255,0.5)) !important;
--thx-linear-gradient-bg-opacity: linear-gradient(70deg, rgb(89, 66, 193, 0.0),rgb(89, 66, 193, 0.0), rgba(162, 0, 255, 0.3)) !important;
--thx-linear-gradient-border: linear-gradient(-45deg, rgb(162, 0, 255), #5942c1, rgb(162, 0, 255)) !important;
--thx-linear-gradient-shadow: linear-gradient(-45deg, #a200ff, #5942c1, rgb(52, 17, 177)) !important;
--ts-linear-gradient-line: linear-gradient(0deg, #5942c1, rgb(162, 0, 255),rgba(162, 0, 255,0.5), #5942c1) !important;
--ts-linear-gradient-bg: linear-gradient(140deg, #5942c1,#5942c1, rgba(162, 0, 255,0.5)) !important;
--ts-linear-gradient-bg-opacity: linear-gradient(70deg, rgb(89, 66, 193, 0.0),rgb(89, 66, 193, 0.0), rgba(162, 0, 255, 0.3)) !important;
--ts-linear-gradient-border: linear-gradient(-45deg, rgb(162, 0, 255), #5942c1, rgb(162, 0, 255)) !important;
--ts-linear-gradient-shadow: linear-gradient(-45deg, #a200ff, #5942c1, rgb(52, 17, 177)) !important;
}

.gradient-bg {
background: var(--thx-linear-gradient-bg);
background: var(--ts-linear-gradient-bg);
}

.gradient-bg-opacity {
background: var(--thx-linear-gradient-bg-opacity);
background: var(--ts-linear-gradient-bg-opacity);
}

.gradient-border-xl {
$border: 5px;
color: #fff;
background: #000;
background-clip: padding-box; /* !importanté */
border: $border solid transparent; /* !importanté */

&:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
margin: -$border; /* !importanté */
border-radius: inherit; /* !importanté */
background: var(--thx-linear-gradient-border);
}
}


.gradient-shadow:before {
content: '';
position: absolute;
inset: -15px; /* control the spread */
z-index: -1; /* place the element behind */
background: var(--thx-linear-gradient-shadow);
background: var(--ts-linear-gradient-shadow);
filter: blur(15px); /* control the blur */
}

Expand All @@ -50,7 +29,7 @@
position: absolute;
inset: -35px; /* control the spread */
z-index: -1; /* place the element behind */
background: var(--thx-linear-gradient-shadow);
background: var(--ts-linear-gradient-shadow);
filter: blur(35px); /* control the blur */
opacity: 0.75;
opacity: 0.25;
}
2 changes: 1 addition & 1 deletion apps/studio/src/scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -1518,7 +1518,7 @@ $modal-title-line-height: $line-height-base !default;
$modal-content-color: null !default;
$modal-content-bg: var(--#{$prefix}body-bg) !default;
$modal-content-border-color: var(--#{$prefix}border-color-translucent) !default;
$modal-content-border-width: var(--#{$prefix}border-width) !default;
$modal-content-border-width: 0 !default;
$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs: var(--#{$prefix}box-shadow-sm) !default;
Expand Down
1 change: 1 addition & 0 deletions apps/studio/src/scss/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
@import '../../../../node_modules/bootstrap/scss/placeholders';

@import './tables';
@import './gradients';

// Helpers
@import '../../../../node_modules/bootstrap/scss/helpers';
Expand Down
6 changes: 3 additions & 3 deletions apps/studio/src/views/Studio.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@
<b-navbar-toggle target="nav-collapse" />
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item to="/collections">Collections</b-nav-item>
<b-nav-item to="/collections">My Collections</b-nav-item>
<b-nav-item to="/qr-codes">QR Codes</b-nav-item>
</b-navbar-nav>
</b-collapse>
<b-navbar-nav class="me-3">
<b-nav-item href="https://www.twinstory.io" target="_blank">FAQ</b-nav-item>
<b-nav-item href="https://www.twinstory.io" target="_blank">Support</b-nav-item>
<b-nav-item href="https://www.twinstory.io/faq" target="_blank">FAQ</b-nav-item>
<b-nav-item href="https://www.twinstory.io/support" target="_blank">Support</b-nav-item>
</b-navbar-nav>
<b-nav-item-dropdown right no-caret class="d-flex">
<template #button-content>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
centered
hide-header
hide-footer
body-class="gradient-shadow-xl"
@hidden="isModelCollectionMetadataShown = false"
>
<BaseFormCollectionMetadata :erc721="collection" @submit="isModelCollectionMetadataShown = false" />
Expand All @@ -67,6 +68,7 @@ import { defineComponent } from 'vue';
import { mapStores } from 'pinia';
import { useAuthStore, useCollectionStore, useEntryStore } from '@thxnetwork/studio/stores';
import { toast } from '@thxnetwork/studio/utils/toast';
import { ChainId } from '@thxnetwork/common/enums';
export default defineComponent({
name: 'NFT',
Expand All @@ -80,6 +82,7 @@ export default defineComponent({
description: '',
symbol: '',
address: '',
chainId: ChainId.Polygon,
};
},
computed: {
Expand All @@ -88,7 +91,12 @@ export default defineComponent({
return !this.$route.params.id;
},
blockExplorerURL() {
return '';
switch (this.chainId) {
case ChainId.Polygon:
return 'https://polygonscan.com/token/' + this.address;
case ChainId.Linea:
return 'https://lineascan.build/token/' + this.address;
}
},
collection(): TERC721 {
return this.collectionStore.collections.find(
Expand All @@ -110,6 +118,7 @@ export default defineComponent({
this.description = this.collection.description as string;
this.symbol = this.collection.symbol as string;
this.address = this.collection.address as string;
this.chainId = this.collection.chainId as ChainId;
},
methods: {
async getCollection(erc721Id: string) {
Expand Down Expand Up @@ -139,12 +148,12 @@ export default defineComponent({
async onSubmit() {
if (!this.isCreating) return;
// await this.collectionStore.create({
// name: this.name,
// chainId: this.chainId,
// symbol: this.symbol,
// description: this.description,
// });
await this.collectionStore.create({
name: this.name,
chainId: this.chainId,
symbol: this.symbol,
description: this.description,
});
// Redirect to edit page
this.$router.push(
Expand Down

0 comments on commit 4bc07b1

Please sign in to comment.