Split nginx config; added start of gateway routing

.editorconfig

@@ -1,7 +0,0 @@
- root = true
-
-[*]
-end_of_line = lf
-insert_final_newline = false
-indent_style = space
-indent_size = 2

.eslintrc.yml

@@ -1,15 +0,0 @@
-env:
-  browser: true
-  es2021: true
-  vue/setup-compiler-macros: true
-extends:
-  - 'plugin:vue/vue3-recommended'
-  - standard
-parserOptions:
-  ecmaVersion: 13
-  parser: '@typescript-eslint/parser'
-  sourceType: module
-plugins:
-  - vue
-  - '@typescript-eslint'
-rules: {}

.gitignore

@@ -1,5 +1,15 @@
-node_modules
-.DS_Store
+# build output
 dist
-dist-ssr
-*.local
+
+# dependencies
+node_modules/
+.snowpack/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# environment variables
+.env
+.env.production

.woodpecker.yml

@@ -1,19 +0,0 @@
-pipeline:
-  install:
-    image: 'node:17.3.0'
-    commands:
-      - yarn install
-  
-  # This step makes sure the project properly builds.
-  build:
-    image: 'node:17.3.0'
-    group: test
-    commands:
-      - yarn run build
-
-  lint:
-    image: 'node:17.3.0'
-    group: test
-    commands:
-      - yarn run lint
-

Dockerfile

@@ -1,5 +1,5 @@
 # ======Building the project=====
-FROM node:17.3.0 AS builder
+FROM node:17.2.0 AS builder
 
 WORKDIR /usr/src/app
 
@@ -8,14 +8,13 @@ COPY package.json yarn.lock ./
 RUN yarn install
 
 # Copy over source code & build project
-COPY vite.config.ts tsconfig.json index.html ./
+COPY astro.config.mjs tsconfig.json ./
 COPY src/ ./src
-COPY public/ ./public
 RUN yarn run build
 
 
 # =====Packaging inside an Nginx container=====
-FROM nginx:1.21.5-alpine
+FROM nginx:1.21.4-alpine
 
 # Copy over the Nginx config files
 COPY nginx/nginx.conf /etc/nginx/nginx.conf

README.md

@@ -1,11 +1,3 @@
-# Vue 3 + Typescript + Vite
+# web
 
-This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
-
-## Recommended IDE Setup
-
-- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
-
-## Type Support For `.vue` Imports in TS
-
-Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.
+Frontend microservice for the Rusty Bever blogging software.

astro.config.mjs

@@ -0,0 +1,13 @@
+// Full Astro Configuration API Documentation:
+// https://docs.astro.build/reference/configuration-reference
+
+// @type-check enabled!
+// VSCode and other TypeScript-enabled text editors will provide auto-completion,
+// helpful tooltips, and warnings if your exported object is invalid.
+// You can disable this by removing "@ts-check" and `@type` comments below.
+
+// @ts-check
+export default /** @type {import('astro').AstroUserConfig} */ ({
+    // Enable the Vue renderer to support Vue components.
+    renderers: ['@astrojs/renderer-vue'],
+});

default.conf.template

@@ -1,54 +0,0 @@
-# vim: ft=nginx
-server {
-    listen 80;
-    listen [::]:80;
-
-    # Used for server federation
-    location ~^/\.well-known/matrix/server$ {
-        charset utf-8;
-        default_type application/json;
-
-
-        if ($request_method = 'GET') {
-            add_header Access-Control-Allow-Origin '*';
-            add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
-            add_header Access-Control-Allow-Headers 'X-Requested-With, Content-Type, Authorization';
-
-            return 200 '{"m.server":"${MATRIX_SERVER}"}';
-        }
-
-        if ($request_method = 'OPTIONS') {
-            add_header Access-Control-Allow-Origin '*';
-            add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
-            add_header Access-Control-Allow-Headers 'X-Requested-With, Content-Type, Authorization';
-            add_header 'Content-Length' 0;
-            return 204;
-        }
-
-        return 405;
-    }
-
-    location ~^/\.well-known/matrix/client$ {
-        charset utf-8;
-        default_type application/json;
-
-
-        if ($request_method = 'GET') {
-            add_header Access-Control-Allow-Origin '*';
-            add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
-            add_header Access-Control-Allow-Headers 'X-Requested-With, Content-Type, Authorization';
-
-            return 200 '{"m.homeserver":{"base_url":"${MATRIX_CLIENT_SERVER}"}}';
-        }
-
-        if ($request_method = 'OPTIONS') {
-            add_header Access-Control-Allow-Origin '*';
-            add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
-            add_header Access-Control-Allow-Headers 'X-Requested-With, Content-Type, Authorization';
-            add_header 'Content-Length' 0;
-            return 204;
-        }
-
-        return 405;
-    }
-}

index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>

nginx/gateway.conf.template

@@ -3,11 +3,11 @@ server {
     listen      80;
     listen [::]:80;
 
-    location /api/v1/posts/ {
-        proxy_pass http://${RB_BLOG}/v1/posts/;
+    location ~ /api/v1/posts/ {
+        proxy_pass http://${RB_BLOG}/api/v1/posts/;
     }
 
-    location /api/v1/sections/ {
-        proxy_pass http://${RB_BLOG}/v1/sections/;
+    location ~ /api/v1/sections/ {
+        proxy_pass http://${RB_BLOG}/api/v1/sections/;
     }
 }

package.json

@@ -1,31 +1,20 @@
 {
   "name": "rb-web",
-  "version": "0.0.0",
+  "version": "0.2.0",
+  "description": "Frontend for the Rusty Bever blogging software.",
+  "repository": "https://git.rustybever.be/rusty-bever/web",
+  "author": "Jef Roosens",
+  "license": "MIT",
+  "private": true,
   "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
-    "preview": "vite preview",
-    "image": "docker build -t chewingbever/rb-blog .",
-    "lint": "eslint --ext .js,.vue,.ts src",
-    "format": "yarn run lint --fix"
-  },
-  "dependencies": {
-    "vue": "^3.2.25"
+      "dev": "astro dev",
+      "start": "astro dev",
+      "build": "astro build",
+      "preview": "astro preview",
+      "image": "docker build -t chewingbever/rb-web:0.2.0 ."
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.8.1",
-    "@typescript-eslint/parser": "^5.8.1",
-    "@vitejs/plugin-vue": "^2.0.0",
-    "eslint": "^8.0.0",
-    "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-vue": "^8.2.0",
-    "miragejs": "^0.1.43",
-    "null-loader": "^4.0.1",
-    "typescript": "^4.4.4",
-    "vite": "^2.7.2",
-    "vue-tsc": "^0.30.0"
+      "astro": "0.21.13",
+      "miragejs": "0.1.43"
   }
 }

renovate.json

@@ -1,3 +0,0 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json"
-}

src/App.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-import SectionsList from './components/SectionsList.vue'
-</script>
-
-<template>
-  <div>
-    <img
-      alt="Vue logo"
-      src="./assets/logo.png"
-    >
-    <SectionsList />
-  </div>
-</template>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>

src/api/v1.ts

@@ -1,15 +0,0 @@
-const API_PREFIX = '/api/v1'
-
-export class RbApi {
-  async get_json (path) {
-    const url = `${API_PREFIX}${path}`
-    const res = await fetch(url)
-    return await res.json()
-  }
-
-  async sections () {
-    const res = await this.get_json('/sections')
-
-    return res.sections
-  }
-}

src/components/HelloWorld.vue

@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-
-fetch('/api/v1/sections').then(res => res.json()).then(res => console.log(res))
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <p>
-    Recommended IDE setup:
-    <a
-      href="https://code.visualstudio.com/"
-      target="_blank"
-    >VSCode</a>
-    +
-    <a
-      href="https://github.com/johnsoncodehk/volar"
-      target="_blank"
-    >Volar</a>
-  </p>
-
-  <p>See <code>README.md</code> for more information.</p>
-
-  <p>
-    <a
-      href="https://vitejs.dev/guide/features.html"
-      target="_blank"
-    >
-      Vite Docs
-    </a>
-    |
-    <a
-      href="https://v3.vuejs.org/"
-      target="_blank"
-    >Vue 3 Docs</a>
-  </p>
-
-  <button
-    type="button"
-    @click="count++"
-  >
-    count is: {{ count }}
-  </button>
-  <p>
-    Edit
-    <code>components/HelloWorld.vue</code> to test hot module replacement.
-  </p>
-</template>
-
-<style scoped>
-a {
-  color: #42b983;
-}
-
-label {
-  margin: 0 0.5em;
-  font-weight: bold;
-}
-
-code {
-  background-color: #eee;
-  padding: 2px 4px;
-  border-radius: 4px;
-  color: #304455;
-}
-</style>

src/components/MenuBar.vue

@@ -0,0 +1,42 @@
+<template>
+    <ul>
+        <li v-for="section in sections">
+            {{ section.title }}
+        </li>
+    </ul>
+</template>
+
+<script setup>
+import { makeServer } from "../mirage/index.js"
+const environment = 'development'
+makeServer({ environment })
+
+/* let sections = [ */
+/*     {"title": "Loading..."} */
+/* ] */
+
+/* fetch("/api/v1/test").then( */
+/*     (res) => { */
+/*         if (res.ok()) { */
+/*             return res.json() */
+/*         }else{ */
+/*             sections = [{"title": "Error"}] */
+/*         } */
+/*     } */
+/* ).then( */
+/*     res => sections = res */
+/* ) */
+</script>
+
+<script>
+export default {
+    data() {
+        return {
+            sections: [{"title": "Loading..."}]
+        }
+    },
+    mounted() {
+        fetch("/api/v1/test").then(res => res.json()).then(res => sections = res)
+    }
+}
+</script>

src/components/SectionsList.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { RbApi } from '../api/v1'
-import { Section } from '../models'
-
-const sections = ref([])
-
-const api = new RbApi()
-await api.sections().then(res => {
-  sections.value = res
-})
-
-</script>
-
-<template>
-  <div>
-    <p>yeet</p>
-    <ul>
-      <li v-for="section in sections">
-        {{ section }}
-      </li>
-    </ul>
-  </div>
-</template>

src/env.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}

src/main.ts

@@ -1,10 +0,0 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-// @ts-ignore
-import { makeServer } from './mirage/v1'
-
-if (import.meta.env.DEV) {
-  makeServer()
-}
-
-createApp(App).mount('#app')

src/mirage/index.js

@@ -0,0 +1,12 @@
+import { createServer } from 'miragejs';
+
+export function makeServer({ environment = 'test' }) {
+    return createServer({
+        environment,
+        routes() {
+            this.namespace = "api/v1";
+
+            this.get("/test", () => "yeet");
+        }
+    })
+}

src/mirage/models.js

@@ -1,52 +0,0 @@
-export const sections = [
-  {
-    id: '837ba6a5-47ed-4682-bff5-90bc5c5f9646',
-    title: 'Section One',
-    shortname: 'one',
-    description: 'The first section.',
-    is_default: true,
-    has_titles: true,
-    is_private: false,
-    is_archived: false
-  },
-  {
-    id: '5e661b3f-61e6-4aed-a93b-8cae0896f656',
-    title: 'Section Two',
-    shortname: 'two',
-    description: 'The second section.',
-    is_default: true,
-    has_titles: false,
-    is_private: false,
-    is_archived: false
-  },
-  {
-    id: '5fcbeaca-1496-438e-ace2-18e99e11f384',
-    title: 'Section Three',
-    shortname: 'three',
-    description: 'The third section.',
-    is_default: false,
-    has_titles: true,
-    is_private: false,
-    is_archived: false
-  }
-]
-
-export const posts = [
-  {
-    id: 'af08bbcd-f6eb-446e-b355-13e0a0ef008e',
-    section_id: sections[0].id,
-    is_private: false,
-    is_archived: false
-  }
-]
-
-export const versions = [
-  {
-    id: '8c5bc2f9-e52f-4e19-bd76-119cc42ff863',
-    post_id: posts[0].id,
-    title: 'This Is A Title',
-    publish_date: '2021-12-28',
-    content: 'Hello. This is some content!',
-    is_draft: false
-  }
-]

src/mirage/v1.js

@@ -1,37 +0,0 @@
-import { createServer, Model } from 'miragejs'
-import { sections, posts, versions } from './models'
-
-export function makeServer ({ environment = 'development' } = {}) {
-  const server = createServer({
-    environment,
-
-    models: {
-      section: Model,
-      Post: Model,
-      version: Model
-    },
-
-    seeds (server) {
-      sections.forEach(s => server.create('section', s))
-      posts.forEach(s => server.create('post', s))
-      versions.forEach(s => server.create('version', s))
-    },
-
-    routes () {
-      this.namespace = 'api/v1'
-
-      // Offsets & limits don't need to be implemented here, as the data set isn't large enough to require this yet
-      this.get('/sections', (schema) => {
-        return schema.sections.all()
-      })
-      this.get('/posts', (schema) => {
-        return schema.posts.all()
-      })
-      this.get('/versions', (schema) => {
-        return schema.versions.all()
-      })
-    }
-  })
-
-  return server
-}

src/models.ts

@@ -1,25 +0,0 @@
-export interface Section {
-  id: str,
-  shortname: str,
-  description: str,
-  is_default: bool,
-  has_titles: bool,
-  is_private: bool,
-  is_archived: bool
-}
-
-export interface Post {
-  id: str,
-  section_id: str,
-  is_private: bool,
-  is_archived: bool
-}
-
-export interface Version {
-  id: str,
-  post_id: str,
-  title: str,
-  publish_date: Date,
-  content: str,
-  is_draft: bool
-}

src/pages/index.astro

@@ -0,0 +1,14 @@
+---
+import MenuBar from "../components/MenuBar.vue";
+---
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width" />
+    </head>
+    <body>
+        <MenuBar client:load />
+        <h1>Hi!</h1>
+    </body>
+</html>
+

src/server.js

@@ -1,27 +0,0 @@
-// src/server.js
-import { createServer, Model } from 'miragejs'
-
-export function makeServer ({ environment = 'development' } = {}) {
-  const server = createServer({
-    environment,
-
-    models: {
-      user: Model
-    },
-
-    seeds (server) {
-      server.create('user', { name: 'Bob' })
-      server.create('user', { name: 'Alice' })
-    },
-
-    routes () {
-      this.namespace = 'api'
-
-      this.get('/users', (schema) => {
-        return schema.users.all()
-      })
-    }
-  })
-
-  return server
-}

tsconfig.json

@@ -1,15 +1,3 @@
 {
-  "compilerOptions": {
-    "target": "esnext",
-    "useDefineForClassFields": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "strict": true,
-    "jsx": "preserve",
-    "sourceMap": true,
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "lib": ["esnext", "dom"]
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+    "moduleResolution": "node"
 }

vite.config.ts

@@ -1,7 +0,0 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue()]
-})

vue.config.js

@@ -1,14 +0,0 @@
-module.exports = {
-  chainWebpack: (config) => {
-    if (
-      process.env.NODE_ENV === "production" &&
-      process.env.MIRAGE_ENABLED !== "true"
-    ) {
-      config.module
-        .rule("exclude-mirage")
-        .test(/node_modules\/miragejs\//)
-        .use("null-loader")
-        .loader("null-loader")
-    }
-  },
-}