.

Author: fmalcher

.github/workflows/build-blog-data.yml

@@ -0,0 +1,32 @@
+name: Build blog data
+
+on:
+  push:
+    branches:
+      - build
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js 22.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.x
+
+      - name: Build
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          cd build
+          npm install
+
+
+      - name: Deploy to branch
+        env:
+            GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: npx angular-cli-ghpages --no-nojekyll --dir=../dist --branch=blogdata --no-silent --name="Ferdinand Malcher" --email="[email protected]"

.github/workflows/purge-cache.yml

@@ -0,0 +1,19 @@
+name: Purge Cloudflare Cache
+
+on: [page_build]
+
+jobs:
+  checkout-and-purge:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+
+    - name: Purge Everything
+      env:
+        PURGE_API_TOKEN: ${{ secrets.PURGE_API_TOKEN }}
+        PURGE_ZONE: ${{ secrets.PURGE_ZONE }}
+      run: |
+        sh .github/workflows/purge-cache.sh
+

.gitignore

@@ -1,2 +1,4 @@
 .DS_Store
 Thumbs.db
+_site
+dist

_config.yml

@@ -2,3 +2,4 @@ name: Angular.Schule
 author: Angular.Schule
 author_link: https://angular.schule
 github_link: https://github.com/angular-schule/website-articles
+exclude: [build]

build/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

build/blog.service.ts

@@ -0,0 +1,119 @@
+import axios from 'axios';
+import * as emoji from 'node-emoji'
+import { JekyllMarkdownParser } from './jekyll-markdown-parser';
+import { readdir, readFile } from 'fs/promises';
+
+import { BlogEntry } from './types';
+
+export class BlogService {
+
+  private blogListFetched = this.getBlogListFromAPI();
+
+  constructor(private settings: {
+    headers: {
+      'User-Agent': string,
+      'Authorization': string
+    },
+    contentsRepo: string,
+    branch: string,
+    markdownBaseUrl: string
+  }) {}
+
+  getBlogList() {
+    return this.blogListFetched;
+  }
+
+  async getBlogEntry(slug: string): Promise<BlogEntry> {
+    const blogList = await this.getBlogList();
+    const entry = blogList.find(e => e.slug === slug);
+    if (!entry) {
+      throw new Error(`No entry found for "${slug}"`);
+    }
+    return entry;
+  }
+
+  private sortBy<T extends { [key: string]: string }, K extends keyof T>(a: T, b: T, prop: K) {
+    return a[prop].localeCompare(b[prop]);
+  }
+
+  // dead simple way to sort things: create a sort key that can be easily sorted
+  private getSortKey(entry: BlogEntry) {
+    return (entry.meta.sticky ? 'Z' : 'A') + '---' + (+entry.meta.published) + '---' + entry.slug;
+  }
+
+  private async readBlogFolders() {
+    const folderContents = await readdir('../blog', { withFileTypes: true });
+    return folderContents
+      .filter(dirent => dirent.isDirectory())
+      .map(dirent => dirent.name);
+  }
+
+  private async readBlogFileFromFolder(folder: string) {
+    const path = `../blog/${folder}/README.md`;
+    return readFile(path, 'utf8');
+  }
+
+  private async getBlogListFromAPI() {
+    const blogDirs = await this.readBlogFolders();
+    const blogEntries: BlogEntry[] = [];
+
+    for (const blogDir of blogDirs) {
+
+      try {
+        const readme = await this.readBlogFileFromFolder(blogDir);
+        const blogEntry = this.readmeToBlogEntry(readme, blogDir);
+        blogEntries.push(blogEntry);
+
+      } catch (e: any) {
+          const errorBlogEntry = {
+            slug: this.slugifyPath(blogDir),
+            html_url: '',
+            error: e.message || 'Error',
+            meta: {
+              title: 'A minor error occurred while reading: ' + blogDir,
+              hidden: true
+            }
+          } as BlogEntry;
+          blogEntries.push(errorBlogEntry);
+
+      }
+    }
+
+    return blogEntries.sort((a, b) => this.getSortKey(b).localeCompare(this.getSortKey(a)));
+  }
+
+
+  private readmeToBlogEntry(readme: string, folder: string) {
+    const parser = new JekyllMarkdownParser(this.settings.markdownBaseUrl + folder);
+    const parsedJekyllMarkdown = parser.parse(readme);
+
+    const meta = parsedJekyllMarkdown.parsedYaml || {};
+
+    if (meta.thumbnail &&
+      !meta.thumbnail.startsWith('http') &&
+      !meta.thumbnail.startsWith('//')) {
+      meta.thumbnail
+        = this.settings.markdownBaseUrl + folder + meta.thumbnail;
+    }
+
+    return {
+      slug: this.slugifyPath(folder),
+      html: emoji.emojify(parsedJekyllMarkdown.html),
+      meta: meta
+    } as BlogEntry;
+  }
+
+  private slugifyPath(path: string): string {
+    if (!path) {
+      return 'error - no path??';
+    }
+
+    return path
+      .replace(/README\.md$/, '')
+      .replace('blog/', '')
+      .replace(/\/$/, '')
+      .replace('/', '|');
+  }
+}
+
+

build/config.ts

@@ -0,0 +1,10 @@
+export const githubConfig = {
+  headers: {
+    'User-Agent': 'No1 Fancy AngularSchule Request Handler',
+    Authorization: 'token ba1ad58d9eb880fbd128abddb0df8ffae47cd407',
+  },
+  org: 'angular-schule',
+  contentsRepo: 'website-articles',
+  branch: 'gh-pages',
+  markdownBaseUrl: 'https://angular-schule.github.io/website-articles/',
+};

build/fetch-data.ts

@@ -0,0 +1,17 @@
+import { githubConfig } from './config';
+import { BlogService } from './blog.service';
+import { writeJSON, makeLightBlogList, createFolderIfNotExists } from './utils';
+
+(async () => {
+  const blogService = new BlogService(githubConfig);
+
+  await createFolderIfNotExists('./dist/data/posts');
+
+  const blogList = await blogService.getBlogList();
+  const blogListLight = makeLightBlogList(blogList);
+  await writeJSON('bloglist.json', blogListLight);
+
+  blogList.forEach(async (entry) => {
+    await writeJSON(`posts/${entry.slug}.json`, entry);
+  });
+})();

build/jekyll-markdown-parser.ts

@@ -0,0 +1,80 @@
+import { load } from 'js-yaml';
+import { marked } from 'marked';
+import hljs from 'highlight.js';
+
+// Synchronous highlighting with highlight.js
+marked.setOptions({
+  highlight: (code) => hljs.highlightAuto(code).value
+});
+
+// original from: https://github.com/bouzuya/jekyll-markdown-parser/blob/master/src/index.ts
+export class JekyllMarkdownParser {
+
+  constructor(private baseUrl: string) {
+  }
+
+  private _imageRenderer(href, title, text) {
+    let out = `<img src="${this.baseUrl + href}" alt="${text}"`;
+    if (title) {
+      out += ' title="' + title + '"';
+    }
+    out += '>';
+    return out;
+  };
+
+  private getMarkdownRenderer() {
+    const renderer = new marked.Renderer();
+    renderer.image = this._imageRenderer.bind(this);
+    return renderer;
+  }
+
+  private separate(jekyllMarkdown: string): {
+    markdown: string;
+    yaml: string;
+  } {
+    const re = new RegExp('^---\s*$\r?\n', 'm');
+    const m1 = jekyllMarkdown.match(re); // first separator
+
+    if (m1 === null) {
+      return { markdown: jekyllMarkdown, yaml: '' };
+    }
+
+    const s1 = jekyllMarkdown.substring((m1.index ?? 0) + m1[0].length);
+    const m2 = s1.match(re); // second separator
+
+    if (m2 === null) {
+      return { markdown: jekyllMarkdown, yaml: '' };
+    }
+
+    const yaml = s1.substring(0, m2.index);
+    const markdown = s1.substring((m2.index ?? 0) + m2[0].length);
+    return { markdown, yaml };
+  }
+
+  private compileMarkdown(markdown: string): string {
+    const renderer = this.getMarkdownRenderer();
+    return marked(markdown, { renderer: renderer });
+  }
+
+  private parseYaml(yaml: string): any {
+    return load(yaml);
+  }
+
+  public parse(jekyllMarkdown: string): {
+    html: string;
+    yaml: string;
+    parsedYaml: any;
+    markdown: string;
+  } {
+    const { yaml, markdown } = this.separate(jekyllMarkdown);
+    const parsedYaml = this.parseYaml(yaml);
+    const html = this.compileMarkdown(markdown);
+
+    return {
+      html,
+      markdown,
+      parsedYaml,
+      yaml
+    };
+  }
+}