Merge pull request 'Update nginx Docker tag to v1.21.5' (#13) from renovate/nginx-1.x into dev

Reviewed-on: #13

.editorconfig

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

.eslintrc.yml

@@ -0,0 +1,15 @@
+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: {}

.woodpecker.yml

@@ -0,0 +1,19 @@
+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.2.0 AS builder
+FROM node:17.3.0 AS builder
 
 WORKDIR /usr/src/app
 
@@ -15,7 +15,7 @@ RUN yarn run build
 
 
 # =====Packaging inside an Nginx container=====
-FROM nginx:1.21.4-alpine
+FROM nginx:1.21.5-alpine
 
 # Copy over the Nginx config files
 COPY nginx/nginx.conf /etc/nginx/nginx.conf

package.json

@@ -5,17 +5,27 @@
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview",
-    "image": "docker build -t chewingbever/rb-blog ."
+    "image": "docker build -t chewingbever/rb-blog .",
+    "lint": "eslint --ext .js,.vue,.ts src",
+    "format": "yarn run lint --fix"
   },
   "dependencies": {
     "vue": "^3.2.25"
   },
   "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.29.8"
+    "vue-tsc": "^0.30.0"
   }
 }

renovate.json

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

src/App.vue

@@ -1,12 +1,17 @@
 <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 HelloWorld from './components/HelloWorld.vue'
+import SectionsList from './components/SectionsList.vue'
 </script>
 
 <template>
-  <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
+  <div>
+    <img
+      alt="Vue logo"
+      src="./assets/logo.png"
+    >
+    <SectionsList />
+  </div>
 </template>
 
 <style>

src/api/v1.ts

@@ -0,0 +1,15 @@
+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

@@ -5,7 +5,7 @@ defineProps<{ msg: string }>()
 
 const count = ref(0)
 
-fetch("/api/users").then(res => res.json()).then(res => console.log(res))
+fetch('/api/v1/sections').then(res => res.json()).then(res => console.log(res))
 </script>
 
 <template>
@@ -13,22 +13,39 @@ fetch("/api/users").then(res => res.json()).then(res => console.log(res))
 
   <p>
     Recommended IDE setup:
-    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    <a
+      href="https://code.visualstudio.com/"
+      target="_blank"
+    >VSCode</a>
     +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</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">
+    <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>
+    <a
+      href="https://v3.vuejs.org/"
+      target="_blank"
+    >Vue 3 Docs</a>
   </p>
 
-  <button type="button" @click="count++">count is: {{ count }}</button>
+  <button
+    type="button"
+    @click="count++"
+  >
+    count is: {{ count }}
+  </button>
   <p>
     Edit
     <code>components/HelloWorld.vue</code> to test hot module replacement.

src/components/SectionsList.vue

@@ -0,0 +1,24 @@
+<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/main.ts

@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
- // @ts-ignore
-import { makeServer } from "./server"
+// @ts-ignore
+import { makeServer } from './mirage/v1'
 
 if (import.meta.env.DEV) {
   makeServer()

src/mirage/models.js

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,25 @@
+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/server.js

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