feat!: sphinx-in-browser and nuxt 4 version

# Conflicts:
#	public/index.html
#	src/main.js

Author: liborjelinek

.browserslistrc

@@ -1,5 +1,4 @@
-# Sample workflow for building and deploying a site to GitHub Pages
-name: Deploy web with GitHub Pages
+name: Deploy to GitHub Pages
 
 on:
   # Runs on pushes targeting the default branch
@@ -22,7 +21,6 @@ concurrency:
   cancel-in-progress: false
 
 jobs:
-  # Build job
   build:
     runs-on: ubuntu-latest
     steps:
@@ -31,27 +29,21 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          # Use the same value as package.json's engines.node
+          node-version: 22.16.0
       - name: Install Node dependencies
         run: npm ci
       - name: Build
-        run: |
-          export NODE_OPTIONS=--openssl-legacy-provider
-          export VUE_APP_API_BASE_URL=https://snippets-api.documatt.com/api/v1
-          export VUE_APP_RUNNING_ENV=prod
-          npm run build
+        run: npm run generate
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
           # Artifact name
           # name: # optional, default is github-pages
           # Path of the directory containing the static assets.
           # default is _site/
-          path: dist
-          # Duration after which artifact will expire in days.
-          # retention-days: # optional, default is 1
+          path: ./.output/public
 
-  # Deployment job
   deploy:
     environment:
       name: github-pages

.eslintrc.js

@@ -1,25 +1,24 @@
-.DS_Store
-node_modules
-/dist
-
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
 
-# local env files
-.env.local
-.env.*.local
+# Node dependencies
+node_modules
 
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
+# Logs
+logs
+*.log
 
-# Editor directories and files
+# Misc
+.DS_Store
+.fleet
 .idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
 
-todo
+# Local env files
+.env
+.env.*
+!.env.example

.github/workflows/publish.yml

@@ -0,0 +1,57 @@
+<template>
+  <div class="flex flex-col h-screen">
+    <!-- header -->
+    <div><Header /></div>
+    <!-- editor, preview, console -->
+    <div class="border-b border-t border-slate-300 h-full overflow-y-auto">
+      <splitpanes vertical class="default-theme">
+        <pane size="50" min-size="20" class="p-2">
+          <EditorPane />
+        </pane>
+        <pane size="50" min-size="20" class="p-2"><PreviewPane /></pane>
+      </splitpanes>
+    </div>
+    <!-- Footer -->
+    <div><Footer /></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Splitpanes, Pane } from "splitpanes";
+import "splitpanes/dist/splitpanes.css";
+
+// For performance, SEO meta tags will only be added during server-side rendering
+if (import.meta.server) {
+  useSeoMeta({
+    title:
+      "Documatt Snippets - Sphinx reStucturedText and Markdown online preview and editor",
+    ogTitle: "Sphinx reStucturedText and Markdown online preview and editor",
+    description:
+      "Preview and edit reStructuredText or Markdown (MyST) documents online with Sphinx and Docutils without installing it.",
+    ogDescription:
+      "Preview and edit reStructuredText or Markdown (MyST) documents online with Sphinx and Docutils without installing it.",
+    ogImage: "/images/og_image.png",
+    twitterCard: "summary_large_image",
+  });
+}
+
+// Boot Sphinx
+const previewStore = usePreviewStore();
+onMounted(() => {
+  previewStore.bootPreview();
+});
+</script>
+
+<style lang="css">
+.default-theme.splitpanes .splitpanes__pane {
+  background-color: transparent;
+}
+.default-theme.splitpanes .splitpanes__splitter:before,
+.default-theme.splitpanes .splitpanes__splitter:after {
+  background-color: var(--color-slate-400);
+}
+.default-theme.splitpanes--vertical > .splitpanes__splitter,
+.default-theme .splitpanes--vertical > .splitpanes__splitter {
+  border-left: 1px solid var(--color-slate-300);
+}
+</style>

.gitignore

@@ -0,0 +1,9 @@
+@import "./sphinx-preview.css";
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+@plugin "daisyui";
+
+:root {
+    /* No font import from Google because Nuxt Fonts will download and cache it automatically */
+    font-family: Rubik, sans-serif;
+}