added inject

Author: gallayl

src/content/002-getting-started-with-a-boilerplate.md

@@ -2,7 +2,7 @@
 layout: post
 title: 'Getting started with the Boilerplate 🏁'
 author: [gallayl]
-tags: ['getting-started', 'boilerplate']
+tags: ['Getting Started', 'boilerplate']
 image: img/002-getting-started-with-a-boilerplate-cover.jpg
 date: '2021-06-23T08:48:20.257Z'
 draft: false

src/content/003-getting-started-with-inject.md

@@ -2,13 +2,14 @@
 layout: post
 title: 'DI / IOC with @furystack/inject 💉'
 author: [gallayl]
-tags: ['getting-started', 'inject']
+tags: ['Getting Started', 'inject']
 image: img/003-getting-started-with-inject-cover.jpg
 date: '2021-06-23T08:58:20.257Z'
 draft: false
 excerpt: Dependency injection and Inversion of control is a common practice that tries to protect you from insanity that would happen when you realize that you can't refactor and test a giant global static app structure. @furystack/inject is a simple but powerful tool that you can use in NodeJs and in the browser. 
 ---
 
+
 ## Injectable services
 An _injectable service_ is basically a class, decorated with the `@Injectable()` decorator. If you decorate a class, its injectable options (e.g. lifetime) and constructor argument types will be stored and the injector will be able to instantiate a new instance any time. Constructor arguments should be also _injectable services_ and they will be resolved recursively. Take a look at the following example and you'll get the idea:
 
@@ -54,4 +55,8 @@ The package defines four types of lifecycle:
  - **Explicit** values are not really injectables - you can call `injector.setExplicitInstance(myServiceInstance)` to set up an instance manually. Just like scoped services, explicit instances will be returned from the current scope only.
 
 ## Extension methods
-A simple injector can be easily extended by 3rd party packages with extension methods, just like the FuryStack packages. These extension methods usually provides a _shortcut_ of an instance or sets up a preconfigured explicit instance of a service. You can build clean and nice fluent API-s in that way - you can get the idea from one of the [FuryStack Injector Extensions](https://github.com/furystack/furystack/blob/develop/packages/rest-service/src/injector-extensions.ts)
+A simple injector can be easily extended by 3rd party packages with extension methods, just like the FuryStack packages. These extension methods usually provides a _shortcut_ of an instance or sets up a preconfigured explicit instance of a service. You can build clean and nice fluent API-s in that way - you can get the idea from one of the [FuryStack Injector Extensions](https://github.com/furystack/furystack/blob/develop/packages/rest-service/src/injector-extensions.ts)
+
+You find more inject-related articles [here](/tags/inject) or check out the package at NPM
+
+[![npm](https://img.shields.io/npm/v/@furystack/inject.svg?maxAge=3600)](https://www.npmjs.com/package/@furystack/inject)

src/content/img/tag-boilerplate.jpg

@@ -1,3 +1,9 @@
-- id: announcement
-  description: Generic announcements
-  image: img/furystack-logo-512.png
+- id: Getting Started
+  description: Guides about basic concepts
+  image: img/tag-getting-started.jpg
+- id: boilerplate
+  description: The Boilerplate project is your best friend if you want to get familiar with FuryStack or start a new FuryStack project
+  image: img/tag-boilerplate.jpg
+- id: inject
+  description: \@furystack/inject or other DI/IOC - related posts
+  image: img/tag-inject.jpg

src/content/img/tag-getting-started.jpg

@@ -0,0 +1,81 @@
+import React from "react"
+import { Helmet } from "react-helmet"
+import { Footer } from "../components/Footer"
+import SiteNav from "../components/header/SiteNav"
+import { PostFullContent } from "../components/PostContent"
+import { Wrapper } from "../components/Wrapper"
+import IndexLayout from "../layouts"
+import { SiteHeader, SiteArchiveHeader, outer, SiteNavMain, inner, SiteMain, NoImage } from "../styles/shared"
+import { PostFull, PostFullHeader, PostFullTitle } from "../templates/post"
+import { css } from '@emotion/react';
+import { colors } from '../styles/colors';
+
+
+
+const PageTemplate = css`
+  .site-main {
+    margin-top: 64px;
+    padding-bottom: 4vw;
+    background: #fff;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .site-main {
+      /* background: var(--darkmode); */
+      background: ${colors.darkmode};
+    }
+  }
+`;
+
+
+const PackagesPage: React.FC = () => {
+    return <IndexLayout>
+        <Helmet>
+            <title>Packages</title>
+        </Helmet>
+        <Wrapper css={PageTemplate}>
+            <header className="site-archive-header no-image" css={[SiteHeader, SiteArchiveHeader]}>
+                <div css={[outer, SiteNavMain]}>
+                    <div css={inner}>
+                        <SiteNav isHome={false} />
+                    </div>
+                </div>
+            </header>
+            <main id="site-main" className="site-main" css={[SiteMain, outer]}>
+                <div css={inner}>
+                    <article className="post page" css={[PostFull, NoImage]}>
+                        <PostFullHeader className="post-full-header">
+                            <PostFullTitle className="post-full-title">Packages</PostFullTitle>
+                        </PostFullHeader>
+
+                        <PostFullContent className="post-full-content">
+                            <div className="post-content">
+                                <h5>A List of FuryStack Packages</h5>
+
+
+                                <p>
+                                    The main goal of FuryStack is to bring enterprise-grade architecture to the NodeJS Ecosystem with a pack of separated but perfectly matched parts.
+                                    You can build a modern scalable backend service in no-time and a responsive SPA frontend without bloating your app with 3rd party
+                                    and low quality, often abandoned dependencies. Developer experience is the main focus while the framework also tries to encourage keeping the code
+                                    clean and decoupled.
+                                </p>
+                                <p>
+                                    FuryStack contains all the basic parts that you need to start with - like DI/IOC, authentication, data stores, entity authorization, logging, etc... -
+                                    If you want to use only a subset of the layers (e.g. only the the Dependency Injection) you can also pick the one you like.
+                                </p>
+                                <p>
+                                    In FuryStack, there are some concepts that are not very common nowdays - like sharing REST API definitions
+                                    with type checking between the service and the frontend in a monorepo.
+                                </p>
+
+                            </div>
+                        </PostFullContent>
+                    </article>
+                </div>
+            </main>
+            <Footer />
+        </Wrapper>
+    </IndexLayout>
+}
+
+export default PackagesPage

src/content/img/tag-inject.jpg

@@ -143,9 +143,7 @@ const PageTemplate = ({ data, pageContext, location }: PageTemplateProps) => {
         <meta property="article:published_time" content={post.frontmatter.date} />
         {/* not sure if modified time possible */}
         {/* <meta property="article:modified_time" content="2018-08-20T15:12:00.000Z" /> */}
-        {post.frontmatter.tags && (
-          <meta property="article:tag" content={post.frontmatter.tags[0]} />
-        )}
+        {post.frontmatter?.tags.map(tag => <meta key={tag} property="article:tag" content={tag} />)}
 
         {config.facebook && <meta property="article:publisher" content={config.facebook} />}
         {config.facebook && <meta property="article:author" content={config.facebook} />}