Skip to content

Commit

Permalink
description + prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
Mordechai Dror committed Sep 25, 2023
1 parent 55d75a5 commit 67936c1
Show file tree
Hide file tree
Showing 18 changed files with 943 additions and 242 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/ci-cd.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ name: CI/CD

on:
push:
branches: [ master ]
branches: [master]
workflow_dispatch:

permissions:
Expand Down
4 changes: 2 additions & 2 deletions astro.config.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { AstroUserConfig } from 'astro/config';
import tailwind from "@astrojs/tailwind";
import tailwind from '@astrojs/tailwind';

export default {
integrations: [tailwind()],
site: 'https://vorant94.io'
site: 'https://vorant94.io',
} satisfies AstroUserConfig;
846 changes: 743 additions & 103 deletions package-lock.json

Large diffs are not rendered by default.

13 changes: 9 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,25 @@
"build": "astro build",
"preview": "astro preview",
"astro": "astro",
"check": "astro check"
"check": "astro check",
"prettier": "prettier"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^6.4.2",
"@tailwindcss/typography": "^0.5.10",
"tailwindcss": "^3.3.3"
},
"devDependencies": {
"@astrojs/check": "^0.2.0",
"@astrojs/rss": "^3.0.0",
"@astrojs/tailwind": "^5.0.0",
"@fortawesome/fontawesome-free": "^6.4.2",
"@tailwindcss/typography": "^0.5.10",
"astro": "^3.1.1",
"autoprefixer": "^10.4.16",
"cssnano": "^6.0.1",
"postcss": "^8.4.30",
"postcss-load-config": "^4.0.1",
"tailwindcss": "^3.3.3",
"prettier": "^3.0.3",
"prettier-plugin-astro": "^0.12.0",
"typescript": "^5.2.2"
}
}
7 changes: 2 additions & 5 deletions postcss.config.cjs
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
/** @type {import('postcss-load-config').Config} */
module.exports = {
plugins: [
require('autoprefixer'),
require('cssnano')
]
}
plugins: [require('autoprefixer'), require('cssnano')],
};
15 changes: 15 additions & 0 deletions prettier.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/** @type {import("prettier").Config} */
export default {
singleQuote: true,
bracketSameLine: true,
singleAttributePerLine: true,
plugins: ['prettier-plugin-astro'],
overrides: [
{
files: '*.astro',
options: {
parser: 'astro',
},
},
],
};
7 changes: 4 additions & 3 deletions src/components/Footer.astro
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@ import '@fortawesome/fontawesome-free/css/solid.css';

<div class="flex-1"></div>

<a href="/rss.xml"
target="_blank">
<i class='fa-solid fa-rss fa-lg'></i>
<a
href="/rss.xml"
target="_blank">
<i class="fa-solid fa-rss fa-lg"></i>
</a>
</footer>
25 changes: 16 additions & 9 deletions src/components/Header.astro
Original file line number Diff line number Diff line change
Expand Up @@ -12,36 +12,43 @@ interface SocialLink {
const socialLinks: SocialLink[] = [
{
icon: 'fa-github',
url: 'https://github.com/vorant94/'
url: 'https://github.com/vorant94/',
},
{
icon: 'fa-x-twitter',
url: 'https://twitter.com/vorant94'
url: 'https://twitter.com/vorant94',
},
{
icon: 'fa-medium',
url: 'https://vorant94.medium.com/'
url: 'https://vorant94.medium.com/',
},
];
---

<header class="flex gap-1 items-center p-4 border-b">
<nav>
<a href="/">
<Image src={logo} alt="Logo" height="24"/>
<Image
src={logo}
alt="Logo"
height="24"
/>
</a>
</nav>

<span class="flex-1"></span>

<ul class="flex gap-3">
{socialLinks.map(link => (
{
socialLinks.map((link) => (
<li>
<a href={link.url}
target="_blank">
<i class={`fa-brands ${link.icon} fa-lg`}></i>
<a
href={link.url}
target="_blank">
<i class={`fa-brands ${link.icon} fa-lg`} />
</a>
</li>
))}
))
}
</ul>
</header>
17 changes: 9 additions & 8 deletions src/content/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,15 @@ import { z, defineCollection } from 'astro:content';

const posts = defineCollection({
type: 'content',
schema: ({image}) => z.object({
title: z.string(),
description: z.string(),
tags: z.array(z.string()),
platforms: z.array(z.string()),
publishedAt: z.date(),
coverImage: image().optional(),
}),
schema: ({ image }) =>
z.object({
title: z.string(),
description: z.string(),
tags: z.array(z.string()),
platforms: z.array(z.string()),
publishedAt: z.date(),
coverImage: image().optional(),
}),
});

export const collections = { posts };
9 changes: 5 additions & 4 deletions src/content/posts/_what's-in-my-raspberry-pi.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
---
title:
description:
tags:
platforms:
title:
description:
tags:
platforms:
publishedAt:
---

### Section title
10 changes: 6 additions & 4 deletions src/content/posts/aws-amplify-functions-on-steroids.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ platforms:
publishedAt: 2023-07-05
coverImage: ../attachments/amplify-functions-on-steroids-cover.png
---

### What we have out of the box

When we add an API to Amplify project it out-of-the-box offers us key-value storage to store all of our data (using DynamoDB) and GraphQL-based CRUD API to access it (using AppSync) with a bunch of directives to customize the schema. The customization means we as a developers are not limited to CRUD only. For example, there are a couple of ways to implement a custom resolvers based on our business logic requirements. One of these ways is to define a Lambda function and link it in schema via `@function` directive. Those lambdas can be written in different languages, but we will focus more on Node.JS since it is nice to have the same language ecosystem both on Front-End and Back-End side. In our case there will be three custom mutation resolvers: one to mark all current todos as completed, second to delete all of the completed todos and third to toggle completion of a todo (instead of setting it to either `true` or `false` manually). The UI should look something like this:
Expand All @@ -23,13 +24,14 @@ A couple of side bonuses:

> First thing no note is that Amplify CLI offers to name the function with project name used as a prefix (e.g. `functionsonsteroids1fa063ec`). You would like to follow this pattern (maybe use some shortened version of your project name like in my case it is `fos`) since without in lambdas from different projects with the same name can cause conflicts. When it comes to different environments of the same project Amplify under-the-hood adds suffix of the environment to avoid conflicts, but for some reason it doesn't automatically add project name as prefix, so we need to to it manually.
> In case you are using WebStorm / IntelliJ in order for IDE not to scream at you about "unknown directives" and so on, you'd like to create `appsync.graphql` with content from this [Gist](https://gist.github.com/cietho/87463cfa77ffa9917d1b1425e01049bd) and mention it as a schema alongside with your actual project schema in `graphql.config.yml` at the root of the repo.
> In case you are using WebStorm / IntelliJ in order for IDE not to scream at you about "unknown directives" and so on, you'd like to create `appsync.graphql` with content from this [Gist](https://gist.github.com/cietho/87463cfa77ffa9917d1b1425e01049bd) and mention it as a schema alongside with your actual project schema in `graphql.config.yml` at the root of the repo.
So as of now we have three separate JavaScript lambda functions with all the necessary logic already implemented. Here are file structure and code of one of our three lambdas just for a reference:

![](../attachments/amplify-functions-on-steroids-3.png)

Our goals are:

- Migrate them to TypeScript
- Share common code between them
- Get types for them from Amplify CLI Codegen
Expand Down Expand Up @@ -71,23 +73,23 @@ Both those options are about sharing JavaScript code, but since we migrated to T

- Amplify CLI cannot detect lambda changes if only a shared code is changed. It doesn't matter for CI/CD since we are ignoring all `.js` files, which means it will build it each time, but locally we might need to build lambda manually from time to time so `amplify push` can catch the stuff up.

- Since `tsc` is building the whole shared folder each lambda have to include all its dependencies even though it might not use the functionality that requires those dependencies. E.g. if one of lambdas need to use `lodash` and its code is places into shared folder the lib have to be installed into all lambdas who benefit from shared code. It may lead to exceeding the lambda max size limit, but in that case we can swap TypeScript compiler with a Webpack, so lambda become bundled and the dependencies become tree-shakable.
- Since `tsc` is building the whole shared folder each lambda have to include all its dependencies even though it might not use the functionality that requires those dependencies. E.g. if one of lambdas need to use `lodash` and its code is places into shared folder the lib have to be installed into all lambdas who benefit from shared code. It may lead to exceeding the lambda max size limit, but in that case we can swap TypeScript compiler with a Webpack, so lambda become bundled and the dependencies become tree-shakable.

- Shared lambda code is not telling by itself the permissions or environment variables that lambda must have in order to successfully execute it, so we need to remember to update it accordingly.

> As a bonus in order to avoid long `../../../../` imports from shared folder, you can add a couple of path aliases into `tsconfig.json`. But if you do so, don't forget to convert shortened imports back to long ones after transpilation. It can be done by adding `tsc-alias` run (after `tsc` run) into `amplify:...` scripts, that we added as a part of Amplify "Build options" guide.

### Amplify CLI Codegen multi-target

Now that we have a good support for TS it and we placed removed repetitive code, it would be nice just like in UI to benefit from auto-generated types based on our AppSync schema. According to this GitHub [issue](https://github.com/aws-amplify/amplify-codegen/issues/49) there is no support for multiple targets in Amplify Codegen at the moment, but... Since Amplify stores Codegen config as a file in the root of our repo we can update it manually to our needs and Codegen will do what we want him to do without any problem... Just don't tell this secret to anyone😜

![](../attachments/amplify-functions-on-steroids-8.png)

> For some reason it only works if you agreed to generate all possible operations and types during adding or re-adding Codegen. Otherwise Codegen throws an exception that multiple projects are not supported.
The only problem with this approach is that the Codegen runs after the code is built and pushed to the cloud. E.g. if you change the schema you first need to do `amplify push`, then after you get updated types you need to make `amplify push` once again to re-build lambdas, that depends on those types. A possible workaround for it may be a separate push of API and lambdas (e.g. `amplify push api` at first and `amplify push function` after it). Or we can mock API (`amplify mock api`), which will trigger the build of API, which will trigger Codegen with latest changes, and then we can push everything together.

### Conclusion
### Conclusion

To sum up we achieved everything we wanted and are now ready to boost the productivity of any Amplify-based project, the trade-offs that we have as a result are:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ platforms:
- https://vorant94.medium.com/skin-replacement-in-angular-after-image-build-bfeb7d2be3f6
publishedAt: 2021-01-26
---

### The problem

When you develop an app that is meant to be hosted on customer environment and you have several customers each customer will probably request to have its own theme for the app, which consists of set of images and colors that fit these images. And we are not talking here about runtime theme switch by user like light/dark theme, we are talking about environment theme, about branding of the app.
Expand Down Expand Up @@ -49,7 +50,7 @@ So here is my proposal, which is easy not only to implement but also to scale wi
Let's say we want to replace the following image in our app

```html
<img src='./assets/theme/background.png'>
<img src="./assets/theme/background.png" />
```

In order to replace it we can we can use Docker volumes as I already mentioned before. And since images are only files and nothings more there is no bicycle to invent, the syntax of `docker-compose.yml` can be as follows. The only thing I can advise here is to create a folder to store all theme related images so there will be no need to create new volume for each new themed image
Expand All @@ -64,12 +65,11 @@ services:
context: .
dockerfile: Dockerfile
ports:
- "4200:80"
- '4200:80'
volumes:
- ng-app-theme:/usr/share/nginx/html/assets/theme

volumes:
ng-app-theme
volumes: ng-app-theme
```
**/usr/share/nginx/html** - is just a path where the app lives in order to be served by NGINX
Expand All @@ -93,27 +93,32 @@ And of course you need to provide a file where you configure all default values
```javascript
var root = document.documentElement;
root.style.setProperty('--styled-text-color', 'blue')
root.style.setProperty('--styled-text-color', 'blue');
```

and add it manually to `index.html`

```html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>SkinReplacementAfterBuild</title>
<base href='/' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<link rel='icon' type='image/x-icon' href='favicon.ico' />
</head>
<body>
<app-root></app-root>
</body>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>SkinReplacementAfterBuild</title>
<base href="/" />
<meta
name="viewport"
content="width=device-width, initial-scale=1" />
<link
rel="icon"
type="image/x-icon"
href="favicon.ico" />
</head>
<body>
<app-root></app-root>
</body>
</html>
<script src='./assets/theme/theme.js'></script>
<script src="./assets/theme/theme.js"></script>
```

So with all this set up we have our default theme in `theme.js` and what we should do here is to add a modified copy of this file into our Docker volume. Since we are storing all theme files in one directory e.g. one volume there is no need to change `docker-compose.yml`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,12 @@ platforms:
- https://vorant94.medium.com/pitfalls-with-aws-amplify-serverless-containers-ba9e2e87a6f
publishedAt: 2023-01-31
---
### Starting point

### Starting point

In order to get to the point of serverless containers let's assume we have an Angular project that is configured with AWS according to [this guide](https://docs.amplify.aws/start/q/integration/angular/). After the project is initialized it needs also to be configured to allow advanced workflows by running `aws configure project`.

### File converter API
### File converter API

The API that I chose to implement in the scope of this app is [Gotenberg](https://gotenberg.dev/). It is basically a wrapper on top of the LibreOffice API distributed as a nice stateless Docker container, what makes it a perfect candidate for our purpose.

Expand Down Expand Up @@ -54,7 +55,7 @@ services:
python:
build:
context: ./python
dockerfile: Dockerfile
dockerfile: Dockerfile
networks:
- public
- private
Expand Down Expand Up @@ -96,7 +97,7 @@ CMD [ "gotenberg" ]
Updated compose file looks like this

```yaml
version: "3"
version: "3"

services:
gotenberg:
Expand Down
Loading

0 comments on commit 67936c1

Please sign in to comment.