diff --git a/content/blog/analytics.md b/content/blog/analytics.md new file mode 100644 index 00000000..e8b6b73c --- /dev/null +++ b/content/blog/analytics.md @@ -0,0 +1,21 @@ +--- +title: 'Analytics' +description: 'Analytics' +published: false +publishedAt: 2021-01-01T09:00:00.000Z +updatedAt: 2021-01-01T09:00:00.000Z +tags: + - Angular +keywords: + - Analytics +series: + - slug: angular-jamstack + chapterSlug: basics + weight: 60 +authors: + - '...' +github: 'https://github.com/notiz-dev/...' +slugs: + - ___UNPUBLISHED___kjptabv5_N4rM4wLbruHkAkdUrVbIu9bDlKOoAOSz +--- + diff --git a/content/blog/angular-10-with-tailwindcss.md b/content/blog/angular-10-with-tailwindcss.md index cf082614..73abeffc 100644 --- a/content/blog/angular-10-with-tailwindcss.md +++ b/content/blog/angular-10-with-tailwindcss.md @@ -12,6 +12,10 @@ keywords: - Utility-First CSS authors: - Marc Stammerjohann +series: + - slug: angular-jamstack + chapterSlug: getting-started + weight: 10 github: https://github.com/notiz-dev/angular-tailwindcss --- diff --git a/content/blog/angular-seo.md b/content/blog/angular-seo.md new file mode 100644 index 00000000..737439a4 --- /dev/null +++ b/content/blog/angular-seo.md @@ -0,0 +1,21 @@ +--- +title: 'Angular SEO' +description: 'Improve your SEO ranking' +published: false +publishedAt: 2021-01-01T09:00:00.000Z +updatedAt: 2021-01-01T09:00:00.000Z +tags: + - Angular +keywords: + - SEO +series: + - slug: angular-jamstack + chapterSlug: basics + weight: 50 +authors: + - '...' +github: 'https://github.com/notiz-dev/...' +slugs: + - ___UNPUBLISHED___kjptabv5_N4rM4wLbruHkAkdUrVbIu9bDlKOoAOSz +--- + diff --git a/content/blog/banner-generator.md b/content/blog/banner-generator.md new file mode 100644 index 00000000..964fa09f --- /dev/null +++ b/content/blog/banner-generator.md @@ -0,0 +1,20 @@ +--- +title: 'Banner Generator' +description: 'Banner Generator' +published: false +publishedAt: 2021-01-01T09:00:00.000Z +updatedAt: 2021-01-01T09:00:00.000Z +tags: + - Scully +keywords: + - Plugins +series: + - slug: angular-jamstack + chapterSlug: advanced-concepts + weight: 60 +authors: + - '...' +github: 'https://github.com/notiz-dev/...' +slugs: + - ___UNPUBLISHED___kjptabv5_N4rM4wLbruHkAkdUrVbIu9bDlKOoAOSz +--- diff --git a/content/blog/blog-structure.md b/content/blog/blog-structure.md new file mode 100644 index 00000000..613108ff --- /dev/null +++ b/content/blog/blog-structure.md @@ -0,0 +1,26 @@ +--- +title: 'Blog Structure' +description: 'Blog Structure' +published: false +publishedAt: 2021-01-01T09:00:00.000Z +updatedAt: 2021-01-01T09:00:00.000Z +tags: + - Angular + - Scully +keywords: + - SEO +series: + - slug: angular-jamstack + chapterSlug: basics + weight: 10 +authors: + - '...' +github: 'https://github.com/notiz-dev/...' +slugs: + - ___UNPUBLISHED___kjptabv5_N4rM4wLbruHkAkdUrVbIu9bDlKOoAOSz +--- + +* Concepts for building a blog + * related posts + * overview page + * tags \ No newline at end of file diff --git a/content/blog/cms.md b/content/blog/cms.md new file mode 100644 index 00000000..7e8a4f9c --- /dev/null +++ b/content/blog/cms.md @@ -0,0 +1,22 @@ +--- +title: 'CMS' +description: 'CMS' +published: false +publishedAt: 2021-01-01T09:00:00.000Z +updatedAt: 2021-01-01T09:00:00.000Z +tags: + - Angular + - Scully +keywords: + - SEO +series: + - slug: angular-jamstack + chapterSlug: advanced-concepts + weight: 10 +authors: + - '...' +github: 'https://github.com/notiz-dev/...' +slugs: + - ___UNPUBLISHED___kjptabv5_N4rM4wLbruHkAkdUrVbIu9bDlKOoAOSz +--- + diff --git a/content/blog/create-a-component-library-for-angular-and-the-web.md b/content/blog/create-a-component-library-for-angular-and-the-web.md index 6c3ea0ca..43bd8f9f 100644 --- a/content/blog/create-a-component-library-for-angular-and-the-web.md +++ b/content/blog/create-a-component-library-for-angular-and-the-web.md @@ -10,7 +10,7 @@ tags: keywords: - Custom Elements authors: - - 'Gary Großgarten' + - Gary Großgarten github: 'https://github.com/notiz-dev/design' --- diff --git a/content/blog/create-scully-plugin.md b/content/blog/create-scully-plugin.md new file mode 100644 index 00000000..e251ef31 --- /dev/null +++ b/content/blog/create-scully-plugin.md @@ -0,0 +1,22 @@ +--- +title: 'Create a Scully Plugin' +description: 'Create a Scully Plugin' +published: false +publishedAt: 2021-01-01T09:00:00.000Z +updatedAt: 2021-01-01T09:00:00.000Z +tags: + - Angular + - Scully +keywords: + - SEO +series: + - slug: angular-jamstack + chapterSlug: basics + weight: 40 +authors: + - '...' +github: 'https://github.com/notiz-dev/...' +slugs: + - ___UNPUBLISHED___kjptabv5_N4rM4wLbruHkAkdUrVbIu9bDlKOoAOSz +--- + diff --git a/content/blog/cross-posting-with-rss.md b/content/blog/cross-posting-with-rss.md new file mode 100644 index 00000000..2ecfbba8 --- /dev/null +++ b/content/blog/cross-posting-with-rss.md @@ -0,0 +1,22 @@ +--- +title: 'Cross Post your Content' +description: 'Cross Post your Content' +published: false +publishedAt: 2021-01-01T09:00:00.000Z +updatedAt: 2021-01-01T09:00:00.000Z +tags: + - Angular + - Scully +keywords: + - SEO +series: + - slug: angular-jamstack + chapterSlug: advanced-concepts + weight: 50 +authors: + - '...' +github: 'https://github.com/notiz-dev/...' +slugs: + - ___UNPUBLISHED___kjptabv5_N4rM4wLbruHkAkdUrVbIu9bDlKOoAOSz +--- + diff --git a/content/blog/deploy-nestjs-with-prisma-to-heroku.md b/content/blog/deploy-nestjs-with-prisma-to-heroku.md index 6246343f..db31871b 100644 --- a/content/blog/deploy-nestjs-with-prisma-to-heroku.md +++ b/content/blog/deploy-nestjs-with-prisma-to-heroku.md @@ -1,5 +1,5 @@ --- -title: 'Deploy NestJS with Prisma to Heroku' +title: Deploy NestJS with Prisma to Heroku description: 'Deploy a NestJS application with Prisma 2.0 to Heroku and connect to a PostgreSQL database.' published: true publishedAt: 2020-03-12T09:11:00.000Z @@ -11,7 +11,11 @@ tags: keywords: - PostgreSQL authors: - - 'Marc Stammerjohann' + - Marc Stammerjohann +series: + - slug: nestjs-prisma + chapterSlug: deployment + weight: 10 github: 'https://github.com/notiz-dev/deploy-nestjs-prisma-heroku' --- diff --git a/content/blog/dockerizing-nestjs-with-prisma-and-postgresql.md b/content/blog/dockerizing-nestjs-with-prisma-and-postgresql.md index 08823529..d1cd7558 100644 --- a/content/blog/dockerizing-nestjs-with-prisma-and-postgresql.md +++ b/content/blog/dockerizing-nestjs-with-prisma-and-postgresql.md @@ -12,6 +12,10 @@ keywords: - PostgreSQL authors: - Marc Stammerjohann +series: + - slug: nestjs-prisma + chapterSlug: deployment + weight: 20 github: https://github.com/notiz-dev/nestjs-prisma-docker --- diff --git a/content/blog/firebase-hosting-preview-deploy.md b/content/blog/firebase-hosting-preview-deploy.md index 22519a22..8ff55052 100644 --- a/content/blog/firebase-hosting-preview-deploy.md +++ b/content/blog/firebase-hosting-preview-deploy.md @@ -16,6 +16,10 @@ keywords: - Tailwind CSS authors: - Marc Stammerjohann +series: + - slug: angular-jamstack + chapterSlug: deployment + weight: 20 github: https://github.com/notiz-dev/angular-scully-tailwindcss --- diff --git a/content/blog/graphql-code-first-with-nestjs-7.md b/content/blog/graphql-code-first-with-nestjs-7.md index f2ca0aa9..34c2b809 100644 --- a/content/blog/graphql-code-first-with-nestjs-7.md +++ b/content/blog/graphql-code-first-with-nestjs-7.md @@ -12,6 +12,10 @@ keywords: - Code-First Approach authors: - Marc Stammerjohann +series: + - slug: nestjs-prisma + chapterSlug: getting-started + weight: 30 github: https://github.com/notiz-dev/nest-graphql-code-first --- diff --git a/content/blog/how-to-connect-nestjs-with-prisma.md b/content/blog/how-to-connect-nestjs-with-prisma.md index 134b7ae2..aaf50db9 100644 --- a/content/blog/how-to-connect-nestjs-with-prisma.md +++ b/content/blog/how-to-connect-nestjs-with-prisma.md @@ -10,7 +10,11 @@ tags: keywords: - SQLite authors: - - 'Marc Stammerjohann' + - Marc Stammerjohann +series: + - slug: nestjs-prisma + chapterSlug: getting-started + weight: 10 github: 'https://github.com/notiz-dev/nestjs-prisma' versions: nestjs/cli: 7.1.2 diff --git a/content/blog/jamstack-angular-scully-tailwind-css.md b/content/blog/jamstack-angular-scully-tailwind-css.md index b412cedc..43308e16 100644 --- a/content/blog/jamstack-angular-scully-tailwind-css.md +++ b/content/blog/jamstack-angular-scully-tailwind-css.md @@ -13,6 +13,10 @@ keywords: - Utility-First CSS authors: - Marc Stammerjohann +series: + - slug: angular-jamstack + chapterSlug: getting-started + weight: 20 github: https://github.com/notiz-dev/angular-scully-tailwindcss --- diff --git a/content/blog/nestjs-prisma-schematics.md b/content/blog/nestjs-prisma-schematics.md index 8dd4d9f4..babacdac 100644 --- a/content/blog/nestjs-prisma-schematics.md +++ b/content/blog/nestjs-prisma-schematics.md @@ -11,6 +11,10 @@ keywords: - Schematics authors: - Marc Stammerjohann +series: + - slug: nestjs-prisma + chapterSlug: getting-started + weight: 20 github: https://github.com/marcjulian/nestjs-prisma --- diff --git a/content/blog/newsletter.md b/content/blog/newsletter.md new file mode 100644 index 00000000..34fc194a --- /dev/null +++ b/content/blog/newsletter.md @@ -0,0 +1,23 @@ +--- +title: 'Newsletter' +description: 'Newsletter' +published: false +publishedAt: 2021-01-01T09:00:00.000Z +updatedAt: 2021-01-01T09:00:00.000Z +tags: + - Angular + - Tailwind CSS + - Maizzle +keywords: + - Newsletter +series: + - slug: angular-jamstack + chapterSlug: advanced-concepts + weight: 30 +authors: + - '...' +github: 'https://github.com/notiz-dev/...' +slugs: + - ___UNPUBLISHED___kjptabv5_N4rM4wLbruHkAkdUrVbIu9bDlKOoAOSz +--- + diff --git a/content/blog/prisma-dbml-generator.md b/content/blog/prisma-dbml-generator.md index b7d8d4f3..c5ebd03d 100644 --- a/content/blog/prisma-dbml-generator.md +++ b/content/blog/prisma-dbml-generator.md @@ -11,6 +11,10 @@ keywords: - Entity-Relationship Diagram authors: - Marc Stammerjohann +series: + - slug: nestjs-prisma + chapterSlug: prisma + weight: 10 github: https://github.com/notiz-dev/prisma-dbml-generator --- diff --git a/content/blog/rss.md b/content/blog/rss.md new file mode 100644 index 00000000..51c432b0 --- /dev/null +++ b/content/blog/rss.md @@ -0,0 +1,20 @@ +--- +title: 'Rss' +description: 'Rss' +published: false +publishedAt: 2021-01-01T09:00:00.000Z +updatedAt: 2021-01-01T09:00:00.000Z +tags: + - Scully +keywords: + - Plugins +series: + - slug: angular-jamstack + chapterSlug: advanced-concepts + weight: 40 +authors: + - '...' +github: 'https://github.com/notiz-dev/...' +slugs: + - ___UNPUBLISHED___kjptabv5_N4rM4wLbruHkAkdUrVbIu9bDlKOoAOSz +--- diff --git a/content/blog/shortcodes-in-markdown.md b/content/blog/shortcodes-in-markdown.md new file mode 100644 index 00000000..8bfcc88d --- /dev/null +++ b/content/blog/shortcodes-in-markdown.md @@ -0,0 +1,22 @@ +--- +title: 'Shortcodes in Markdown' +description: 'Shortcodes in Markdown' +published: false +publishedAt: 2021-01-01T09:00:00.000Z +updatedAt: 2021-01-01T09:00:00.000Z +tags: + - Angular + - Scully +keywords: + - Markdown +series: + - slug: angular-jamstack + chapterSlug: advanced-concepts + weight: 20 +authors: + - '...' +github: 'https://github.com/notiz-dev/...' +slugs: + - ___UNPUBLISHED___kjptabv5_N4rM4wLbruHkAkdUrVbIu9bDlKOoAOSz +--- + diff --git a/content/blog/simple-rxjs-keyboard-shortcuts.md b/content/blog/simple-rxjs-keyboard-shortcuts.md index 2847fad4..1b5a1883 100644 --- a/content/blog/simple-rxjs-keyboard-shortcuts.md +++ b/content/blog/simple-rxjs-keyboard-shortcuts.md @@ -11,7 +11,7 @@ keywords: - Shortcuts - Angular authors: - - 'Gary Großgarten' + - Gary Großgarten github: https://github.com/garygrossgarten/rxjs-shortcuts --- diff --git a/content/blog/tailwindcss-purge-optimize-angular-for-production.md b/content/blog/tailwindcss-purge-optimize-angular-for-production.md index 6e0948f7..22d012cb 100644 --- a/content/blog/tailwindcss-purge-optimize-angular-for-production.md +++ b/content/blog/tailwindcss-purge-optimize-angular-for-production.md @@ -11,6 +11,10 @@ tags: keywords: - CSS - Utility-First CSS +series: + - slug: angular-jamstack + chapterSlug: deployment + weight: 10 authors: - Marc Stammerjohann github: https://github.com/notiz-dev/angular-scully-tailwindcss diff --git a/content/blog/toc.md b/content/blog/toc.md new file mode 100644 index 00000000..a7016cba --- /dev/null +++ b/content/blog/toc.md @@ -0,0 +1,20 @@ +--- +title: 'Table of Content' +description: 'Table of Content' +published: false +publishedAt: 2021-01-01T09:00:00.000Z +updatedAt: 2021-01-01T09:00:00.000Z +tags: + - Scully +keywords: + - Plugins +series: + - slug: angular-jamstack + chapterSlug: basics + weight: 20 +authors: + - '...' +github: 'https://github.com/notiz-dev/...' +slugs: + - ___UNPUBLISHED___kjptabv5_N4rM4wLbruHkAkdUrVbIu9bDlKOoAOSz +--- diff --git a/content/blog/useful-scully-plugins.md b/content/blog/useful-scully-plugins.md new file mode 100644 index 00000000..27c57bcf --- /dev/null +++ b/content/blog/useful-scully-plugins.md @@ -0,0 +1,29 @@ +--- +title: 'Useful Scully Plugins' +description: 'Top Scully Plugins you should use' +published: false +publishedAt: 2021-01-01T09:00:00.000Z +updatedAt: 2021-01-01T09:00:00.000Z +tags: + - Scully +keywords: + - Plugins +series: + - slug: angular-jamstack + chapterSlug: basics + weight: 30 +authors: + - '...' +github: 'https://github.com/notiz-dev/...' +slugs: + - ___UNPUBLISHED___kjptabv5_N4rM4wLbruHkAkdUrVbIu9bDlKOoAOSz +--- + +* fouc +* rss +* lazy images +* medium zoom +* sitemap +* seoHrefOptimise +* critical CSS +* ... \ No newline at end of file diff --git a/content/links/elements-in-angular-demo-github-repository.md b/content/links/elements-in-angular-demo-github-repository.md index 4224abe4..f8f786ed 100644 --- a/content/links/elements-in-angular-demo-github-repository.md +++ b/content/links/elements-in-angular-demo-github-repository.md @@ -1,6 +1,7 @@ --- title: 'Angular Elements: Demo - Using Elements In Another Angular Project.' description: 'GitHub Repository for elements-in-angular-demo. Contribute on GitHub.' +published: true publishedAt: 2020-06-04T13:28:39.082Z updatedAt: 2020-06-04T13:28:39.082Z url: https://github.com/garygrossgarten/elements-in-angular-demo diff --git a/content/series/angular-jamstack.md b/content/series/angular-jamstack.md new file mode 100644 index 00000000..9810a416 --- /dev/null +++ b/content/series/angular-jamstack.md @@ -0,0 +1,28 @@ +--- +title: Angular JAMstack from Start to Finish +description: Angular JAMstack without the tears. This series covers everything you need to know to build and deploy your JAMstack app with Angular, Scully and Tailwind CSS. +published: true +slug: angular-jamstack +tags: + - Angular + - Scully + - Tailwind CSS +chapters: + - title: Getting Started + slug: getting-started + - title: Basics + slug: basics + - title: Advanced Concepts + slug: advanced-concepts + - title: Deployment + slug: deployment +--- + +## What you will build + +... + +[Live Demo](https://angular-scully-tailwindcss.web.app) of a Scully blog styled with Tailwind CSS. Find the full [source code](https://github.com/notiz-dev/angular-scully-tailwindcss) on GitHub. + +By the way, [notiz.dev](https://github.com/notiz-dev/notiz) is a Scully application styled with Tailwind. + diff --git a/content/series/fullstack.md b/content/series/fullstack.md new file mode 100644 index 00000000..eca0f84c --- /dev/null +++ b/content/series/fullstack.md @@ -0,0 +1,23 @@ +--- +title: Fullstack +description: Fullstack +published: false +slug: fullstack +tags: + - Angular + - NestJS + - Prisma +chapters: + - {title: 'Getting Started', slug: getting-started} +slugs: + - ___UNPUBLISHED___kjbib7un_h0Iph5ugONgWCrNk1clLVN79u160Y4qp +--- + +## What will you build? + +- Mono Repo Angular + NestJS + Prisma (Build Scripts serving, ...) +- CRUD with NestJS +- Codegen REST and GraphQL +- Authentication +- Deployment/Hosting + diff --git a/content/series/nestjs-prisma.md b/content/series/nestjs-prisma.md new file mode 100644 index 00000000..7bbd02e1 --- /dev/null +++ b/content/series/nestjs-prisma.md @@ -0,0 +1,31 @@ +--- +title: NestJS + Prisma Series +description: Build backend application with NestJS and access databases via Prisma +published: true +slug: nestjs-prisma +tags: + - NestJs + - Prisma +chapters: + - title: Getting Started + slug: getting-started + - title: Prisma + slug: prisma + - title: Deployment + slug: deployment +--- + +## What is it all about? + +- Integrate Prisma with NestJS +- Build GraphQL endpoit with NestJS +- Deployment of NestJS and Prisma to Heroku +- Dockerize NestJS and Prisma application +- Swagger API Coming soon +- Prisma Migrate, Native Types Coming soon +- Authentication with PassportJS Coming soon +- Pagination Coming soon +- Subscriptions Coming soon +- Mailing Coming soon +- Cloud Run Coming soon +- more to come diff --git a/package-lock.json b/package-lock.json index 95649a9d..7dc9b82c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3995,9 +3995,9 @@ } }, "@notiz/scully-plugin-lazy-images": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/@notiz/scully-plugin-lazy-images/-/scully-plugin-lazy-images-0.3.0.tgz", - "integrity": "sha512-SY7H8Rk3qjBubzwI7S9qXYFHTUJZG09W9T3fWqWWc9coIETl+UXZk3XvzjDDwVo+RyzODAPeYA9Kpw9UcYVThQ==", + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@notiz/scully-plugin-lazy-images/-/scully-plugin-lazy-images-0.4.0.tgz", + "integrity": "sha512-NeUNX+XYSGUNVFpxE0tUMhti2hSbtrSOECPmF0cHTbOWViFpikUV/alq+zUPOjPYWV9Veg117GO700WkBHRp8A==", "dev": true, "requires": { "axios": "^0.19.2", @@ -4686,6 +4686,12 @@ "integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==", "dev": true }, + "@tailwindcss/line-clamp": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.1.0.tgz", + "integrity": "sha512-js+iq+EGiMb3LNi+Jnu9HGKJQp94d1aY/cngJ6llMfaNpXSG9olYtv0mrSNYUh5Z2PKYOdhZXZvxR6xwiJjRSg==", + "dev": true + }, "@tailwindcss/typography": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.3.1.tgz", diff --git a/package.json b/package.json index 76509016..df9517c5 100644 --- a/package.json +++ b/package.json @@ -63,9 +63,10 @@ "@gammastream/scully-plugin-sitemap": "1.0.6", "@notiz/scully-plugin-copy-static-content": "file:projects/copy-static-content", "@notiz/scully-plugin-fouc": "0.2.0", - "@notiz/scully-plugin-lazy-images": "0.3.0", + "@notiz/scully-plugin-lazy-images": "0.4.0", "@notiz/scully-plugin-medium-zoom": "0.2.4", "@notiz/scully-plugin-rss": "1.1.0", + "@tailwindcss/line-clamp": "^0.1.0", "@tailwindcss/typography": "0.3.1", "@types/jasmine": "3.5.8", "@types/jasminewd2": "2.0.3", diff --git a/projects/banner-generator/src/banner-generator.js b/projects/banner-generator/src/banner-generator.js index 6ca5beaa..d46e8602 100644 --- a/projects/banner-generator/src/banner-generator.js +++ b/projects/banner-generator/src/banner-generator.js @@ -10,6 +10,7 @@ const { const { resolve } = require('path'); const { generateImage } = require('./generate-images'); +const { log, logError } = require('@scullyio/scully'); const sizes = [ { name: 'og', width: 1200, height: 630 }, @@ -17,6 +18,19 @@ const sizes = [ ]; const bannerGeneratorPlugin = async (html, route) => { + if (!(route && route.data && route.data.published)) { + return html; + } + + if (route.route.startsWith('/series/')) { + await generateSeriesBanner(route); + } else { + await generateBlogBanner(route); + } + return html; +}; + +async function generateBlogBanner(route) { try { const outDir = './dist/static/assets/banners'; const template = readFileSync( @@ -65,10 +79,54 @@ const bannerGeneratorPlugin = async (html, route) => { unlinkSync(`${outDir}/${route.route}/styles.css`); unlinkSync(`${outDir}/${route.route}/main-es5.js`); } catch (err) { - console.error(err.message); + logError(err.message); } - return html; -}; +} + +async function generateSeriesBanner(route) { + try { + const outDir = './dist/static/assets/banners'; + const template = readFileSync( + resolve('./projects/banner-generator/template.html') + ).toString(); + const logos = route.data.tags + .map((t) => + resolve(`./src/assets/stack/${t.toLowerCase().replace(' ', '-')}.svg`) + ) + .filter((t) => existsSync(t)); + + for await (size of sizes) { + const dom = new JSDOM(template); + const document = dom.window.document; + const image = document.createElement('nizs-banner-series'); + image.title = route.data.title; + image.setAttribute('updated-at', route.data.updatedAt); + image.setAttribute('logos', logos); + image.setAttribute('width', size.width); + image.setAttribute('height', size.height); + document.body.append(image); + writeFileSyncRecursive( + `${outDir}/${route.route}/index.html`, + dom.serialize() + ); + copyFileSync( + resolve('./dist/shortcodes/styles.css'), + resolve(`${outDir}/${route.route}/styles.css`) + ); + copyFileSync( + resolve('./dist/shortcodes/main-es5.js'), + resolve(`${outDir}/${route.route}/main-es5.js`) + ); + await generateImage(route, size); + log(`Generated banner for ${route.route}`); + } + unlinkSync(`${outDir}/${route.route}/index.html`); + unlinkSync(`${outDir}/${route.route}/styles.css`); + unlinkSync(`${outDir}/${route.route}/main-es5.js`); + } catch (err) { + logError(err.message); + } +} function getYamlFromMarkdown(path) { const file = readFileSync(resolve(path)).toString(); diff --git a/projects/banner-generator/src/generate-images.js b/projects/banner-generator/src/generate-images.js index 7f20101a..46e6bd0c 100644 --- a/projects/banner-generator/src/generate-images.js +++ b/projects/banner-generator/src/generate-images.js @@ -2,15 +2,13 @@ const puppeteer = require('puppeteer'); const { resolve } = require('path'); const generateImage = async (route, size) => { - const outDir = './dist/static/assets/banners' + const outDir = './dist/static/assets/banners'; const browser = await puppeteer.launch(); const page = await browser.newPage(); - await page.goto( - `file://${resolve(`${outDir}/${route.route}/index.html`)}` - ); + await page.goto(`file://${resolve(`${outDir}/${route.route}/index.html`)}`); await page.screenshot({ path: resolve(`${outDir}/${route.route}/${size.name}.png`), - fullPage: true + fullPage: true, }); await browser.close(); diff --git a/projects/banner-generator/template.html b/projects/banner-generator/template.html index bda55438..f99fdd76 100644 --- a/projects/banner-generator/template.html +++ b/projects/banner-generator/template.html @@ -1,23 +1,17 @@ - - - + + + Document - - + + - - - - - - - \ No newline at end of file + + + diff --git a/projects/design/src/lib/banner-series/banner-series.component.html b/projects/design/src/lib/banner-series/banner-series.component.html new file mode 100644 index 00000000..4999f1e2 --- /dev/null +++ b/projects/design/src/lib/banner-series/banner-series.component.html @@ -0,0 +1,13 @@ +
+ + + notiz.dev + + {{ + title + }} + +
+ +
+
diff --git a/projects/design/src/lib/banner-series/banner-series.component.scss b/projects/design/src/lib/banner-series/banner-series.component.scss new file mode 100644 index 00000000..9e595ac7 --- /dev/null +++ b/projects/design/src/lib/banner-series/banner-series.component.scss @@ -0,0 +1,3 @@ +:host { + @apply flex flex-col bg-canvas; +} diff --git a/projects/design/src/lib/banner-series/banner-series.component.ts b/projects/design/src/lib/banner-series/banner-series.component.ts new file mode 100644 index 00000000..c7311bb7 --- /dev/null +++ b/projects/design/src/lib/banner-series/banner-series.component.ts @@ -0,0 +1,28 @@ +import { Component, Input, HostBinding } from '@angular/core'; + +@Component({ + selector: 'lib-banner-series', + templateUrl: './banner-series.component.html', + styleUrls: ['./banner-series.component.scss'], +}) +export class NizBannerSeries { + @Input() title = 'image-template'; + @Input() updatedAt = new Date().toDateString(); + @Input() logo = 'https://notiz.dev/assets/img/logo.svg'; + @Input() set logos(logos: string) { + this._logos = logos.split(','); + } + _logos = []; + @Input() height = 630; + @Input() width = 1200; + + @HostBinding('style.width') + get _width() { + return `${this.width}px`; + } + + @HostBinding('style.height') + get _height() { + return `${this.height}px`; + } +} diff --git a/projects/design/src/lib/banner-series/banner-series.module.ts b/projects/design/src/lib/banner-series/banner-series.module.ts new file mode 100644 index 00000000..481a8db6 --- /dev/null +++ b/projects/design/src/lib/banner-series/banner-series.module.ts @@ -0,0 +1,10 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { NizBannerSeries } from './banner-series.component'; + +@NgModule({ + declarations: [NizBannerSeries], + exports: [NizBannerSeries], + imports: [CommonModule], +}) +export class NizBannerSeriesModule {} diff --git a/projects/design/src/lib/banner/banner.component.scss b/projects/design/src/lib/banner/banner.component.scss index 18869972..275c7fd8 100644 --- a/projects/design/src/lib/banner/banner.component.scss +++ b/projects/design/src/lib/banner/banner.component.scss @@ -1,8 +1,5 @@ :host { - @apply flex; - @apply flex-col; - @apply bg-canvas; - @apply relative; + @apply flex flex-col bg-canvas; } .footer { diff --git a/projects/design/src/public-api.ts b/projects/design/src/public-api.ts index 9d18ead3..53951235 100644 --- a/projects/design/src/public-api.ts +++ b/projects/design/src/public-api.ts @@ -29,3 +29,5 @@ export * from './lib/menu/menu.module'; export * from './lib/menu/menu.component'; export * from './lib/banner/banner.module'; export * from './lib/banner/banner.component'; +export * from './lib/banner-series/banner-series.module'; +export * from './lib/banner-series/banner-series.component'; diff --git a/projects/shortcodes/src/app/app.module.ts b/projects/shortcodes/src/app/app.module.ts index 38084f71..3a2aa1e2 100644 --- a/projects/shortcodes/src/app/app.module.ts +++ b/projects/shortcodes/src/app/app.module.ts @@ -6,10 +6,17 @@ import { NizChipModule, NizBanner, NizBannerModule, + NizBannerSeriesModule, + NizBannerSeries, } from '@notiz/ngx-design'; @NgModule({ - imports: [BrowserModule, NizChipModule, NizBannerModule], + imports: [ + BrowserModule, + NizChipModule, + NizBannerModule, + NizBannerSeriesModule, + ], providers: [], }) export class AppModule { @@ -19,6 +26,7 @@ export class AppModule { const elements: any[] = [ [NizChip, 'nizs-chip'], [NizBanner, 'nizs-banner'], + [NizBannerSeries, 'nizs-banner-series'], ]; for (const [component, name] of elements) { diff --git a/scully.notiz.config.ts b/scully.notiz.config.ts index 4f20f4a0..79e073e2 100644 --- a/scully.notiz.config.ts +++ b/scully.notiz.config.ts @@ -49,6 +49,11 @@ const sitemapConfig: SitemapConfig = { priority: '0.9', sitemapFilename: 'sitemap-links.xml', }, + '/series/:slug': { + changeFreq: 'daily', + priority: '0.9', + sitemapFilename: 'sitemap-series.xml', + }, '/tags/:slug': { changeFreq: 'daily', priority: '0.9', @@ -84,6 +89,16 @@ export const config: ScullyConfig = { folder: './content/authors', }, }, + '/series/:slug': { + type: 'contentFolder', + slug: { + folder: './content/series', + }, + postRenderers: [ + ...defaultPostRenderers, + 'bannerGenerator', + ], + }, '/tags/:slug': { type: 'contentFolder', slug: { diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 77f9c9e0..f9dec847 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -27,6 +27,11 @@ const routes: Routes = [ loadChildren: () => import('./pages/tags/tags.module').then((m) => m.TagsModule), }, + { + path: 'series', + loadChildren: () => + import('./pages/series/series.module').then((m) => m.SeriesModule), + }, { path: 'confirm-subscription', loadChildren: () => diff --git a/src/app/app.component.html b/src/app/app.component.html index 091d8505..3b41e8d7 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -23,6 +23,17 @@ > Blog + + Series +