astrov4 upgrade (#4)

* Update node version

* Update vscode settings

* Transition to pnpm

* Update packages

* Add astro-adocx package

* pnpm install

* eslint underscore unused vars

* rename to adocx

* Better gen astro code flexibility

* Use consistent root

* Fix integration type checking

* simplify lnt

* fix imports

* upgrade astro image import

* Patch opal asciidoctor

* Use compiler from vite-plugin-astro

* WIP with more testing

* Improve extensibility with hook

* convert with templates using supports_templates

* update with documentation for later

* WIP

* WIP converter templates

* WIP

* It. Just. Works

* Almost works with resoveId hacks but ugly

HMR doesn't work because resolveId is different.
Relative import of Counter doesn't work.
May be others broken too ...

* Revert "Almost works with resoveId hacks but ugly"

This reverts commit 114601a.

* Somehow not working again fileExtensionsToSSR isn't updated in vite-plugin-astro-server

* Juse use .a.mdoc extension to workaround the limited SUPPORTED_MARKDOWN_FILE_EXTENSIONS

* just use adoc

* layout support

* use asciidocNoteLayout

* rename to shorter layout name

* handle text math blocks

* rename navbar

* fix listing syntax highlight

* fix github action

* update lock file

* fix some lint

* temp disable lint in ci for deployment checking

* use wrangler v3

.github/workflows/pages-deployment.yml

@@ -10,20 +10,27 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
       - name: Setup node
         uses: actions/setup-node@v3
         with:
           node-version-file: '.nvmrc'
-          cache: 'npm'
-      - run: npm ci
-      - run: npm run lint
-      - run: npm run build
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Install linkd dependencies
+        working-directory: linkd/astro-adocx
+        run: pnpm install --frozen-lockfile
+      # - run: pnpm run lint
+      - run: pnpm run build
       - name: Publish to Cloudflare Pages
         uses: cloudflare/pages-action@v1
         with:
           apiToken: ${{ secrets.CLOUDFLARE_PAGES_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           projectName: sransara-com
           directory: dist
-          # Optional: Enable this if you want to have GitHub Deployments triggered
-          # gitHubToken: ${{ secrets.GITHUB_TOKEN }}
+          wranglerVersion: '3'

.gitignore

@@ -1,6 +1,5 @@
 # build output
 dist/
-
 # generated types
 .astro/
 
@@ -13,9 +12,15 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 
+
 # environment variables
 .env
 .env.production
 
 # macOS-specific files
 .DS_Store
+
+# jetbrains setting folder
+.idea/
+
+*.debug.astro

.nvmrc

@@ -1 +1 @@
-v19.6.0
+v22.2.0

.prettierignore

@@ -1,4 +1,2 @@
-dist/
-*.adoc.astro
-*.adocx.astro
+pnpm-lock.yaml
 public/count.js

.vscode/settings.json

@@ -1,5 +1,26 @@
 {
-  "files.associations": {
-    "*.adoc.astro": "asciidoc"
-  }
+  "prettier.documentSelectors": ["**/*.astro"],
+  "[astro]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "astro", // Enable .astro
+    "typescript", // Enable .ts
+    "typescriptreact" // Enable .tsx
+  ],
+  "asciidoc.preview.asciidoctorAttributes": {
+    "skip-front-matter": true
+  },
+  "asciidoc.antora.enableAntoraSupport": false,
 }

README copy.md

@@ -0,0 +1,47 @@
+# Astro Starter Kit: Minimal
+
+```sh
+npm create astro@latest -- --template minimal
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+├── src/
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

README.md

@@ -1,6 +1 @@
-| Command           | Action                                       |
-| :---------------- | :------------------------------------------- |
-| `npm install`     | Installs dependencies                        |
-| `npm run dev`     | Starts local dev server at `localhost:3000`  |
-| `npm run build`   | Build your production site to `./dist/`      |
-| `npm run preview` | Preview your build locally, before deploying |
+# sransara

adocx/config.ts

@@ -0,0 +1,51 @@
+import path from 'node:path';
+
+// @ts-ignore: Types are not available
+import { register as krokiPluginRegisterHandle } from 'asciidoctor-kroki';
+import type { AdocOptions, AstroAdocxOptions, Template } from 'astro-adocx/types';
+
+import { register as inlineMacroCalloutRegisterHandle } from './extensions/inlineMacroCallout';
+
+const templates = Object.fromEntries(
+  Object.entries(import.meta.glob('./templates/*.ts', { eager: true })).map(([key, value]) => [
+    path.basename(key, '.ts'),
+    value as Template,
+  ]),
+);
+
+const astroFenced = `
+// For astro-layout-args
+import { metadata } from './_meta/metadata.ts';
+import poster from './_meta/poster.jpg';
+`;
+
+export const adocxConfig = {
+  astroFenced,
+  withAsciidocEngine(asciidoctorEngine) {
+    krokiPluginRegisterHandle(asciidoctorEngine.Extensions);
+    inlineMacroCalloutRegisterHandle(asciidoctorEngine.Extensions);
+  },
+  withDocument(filePath, document) {
+    // useful for asciidoctor-diagrams/kroki
+    document.setAttribute('outdir', path.dirname(filePath));
+  },
+  templates,
+} satisfies AstroAdocxOptions;
+
+export const asciidoctorConfig = {
+  attributes: {
+    xrefstyle: 'full',
+    'listing-caption': 'Listing',
+    sectanchors: '',
+    idprefix: 'id:',
+    idseparator: '-',
+    icons: 'font',
+    stem: 'latexmath',
+    toc: 'macro',
+    imagesdir: './_assets/',
+    'kroki-fetch-diagram': true,
+    'kroki-default-format': 'png',
+    'astro-layout-path': '@/src/layouts/adocNoteLayout/AdocNoteLayout.astro',
+    'astro-layout-args': '{...{ metadata, poster, docattrs, outline }}',
+  },
+} satisfies AdocOptions;

adocx/extensions/inlineMacroCallout.ts

@@ -0,0 +1,19 @@
+import type { Extensions } from 'asciidoctor';
+
+import { isExtensionSingleton } from 'astro-adocx/types';
+
+export function register(registry: typeof Extensions | Extensions.Registry) {
+  if (isExtensionSingleton(registry)) {
+    registry.register(function () {
+      this.inlineMacro('callout', extension);
+    });
+  } else {
+    registry.inlineMacro('callout', extension);
+  }
+}
+
+function extension(this: Extensions.InlineMacroProcessorDsl) {
+  this.process(function (parent, target) {
+    return this.createInline(parent, 'callout', target);
+  });
+}

adocx/templates/inline_quoted.ts

@@ -0,0 +1,12 @@
+import type { Inline } from 'asciidoctor';
+import { UnsupportedNode, type Template } from 'astro-adocx/types.ts';
+import { addOnceToAstroFence } from 'astro-adocx/utils/astroFence.ts';
+
+export const convert: Template<Inline>['convert'] = (node: Inline, _opts?: any) => {
+  const nodeType = node.getType();
+  if (['asciimath', 'latexmath'].includes(nodeType)) {
+    addOnceToAstroFence(node, "import Mathtex from '@/src/lib/astro/mathtex/Mathtex.astro';");
+    return `<Mathtex block={false} lang="${nodeType}" is:raw={true}>${node.getText()}</Mathtex>`;
+  }
+  return UnsupportedNode;
+};

adocx/templates/listing.ts

@@ -0,0 +1,40 @@
+// Reference:
+// - https://github.com/asciidoctor/asciidoctor-backends/blob/master/erb/html5/block_math.html.erb
+
+import type { Block } from 'asciidoctor';
+import { type Template } from 'astro-adocx/types.ts';
+import { addOnceToAstroFence } from 'astro-adocx/utils/astroFence';
+import { atag } from 'astro-adocx/utils/asx.ts';
+
+export const convert: Template<Block>['convert'] = (node: Block, _opts?: any) => {
+  const id = node.getId();
+  const title = node.getCaptionedTitle();
+  const roles = node.getRoles().join(' ');
+  const content = node.getContent();
+  const lang = node.getAttribute('language');
+
+  addOnceToAstroFence(
+    node,
+    "import CodeListing from '@/src/lib/astro/codeListing/CodeListing.astro';",
+  );
+  return atag('div', {
+    id,
+    class: `listingblock ${roles}`,
+    children: [
+      title &&
+        atag('div', {
+          class: 'title',
+          children: [title],
+        }),
+      atag('div', {
+        class: 'content',
+        children: [
+          atag('CodeListing', {
+            lang,
+            children: [content],
+          }),
+        ],
+      }),
+    ],
+  });
+};