Merge branch 'vue-3'

pull/7/head
Jef Roosens 2021-12-28 18:47:18 +01:00
commit acb115bb0c
Signed by: Jef Roosens
GPG Key ID: 955C0660072F691F
25 changed files with 3039 additions and 3 deletions

2
.dockerignore 100644
View File

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

7
.editorconfig 100644
View File

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

15
.eslintrc.yml 100644
View File

@ -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: {}

5
.gitignore vendored 100644
View File

@ -0,0 +1,5 @@
node_modules
.DS_Store
dist
dist-ssr
*.local

View File

@ -1,3 +1,26 @@
# ======Building the project=====
FROM node:17.2.0 AS builder
WORKDIR /usr/src/app
# Install Node dependencies
COPY package.json yarn.lock ./
RUN yarn install
# Copy over source code & build project
COPY vite.config.ts tsconfig.json index.html ./
COPY src/ ./src
COPY public/ ./public
RUN yarn run build
# =====Packaging inside an Nginx container=====
FROM nginx:1.21.4-alpine FROM nginx:1.21.4-alpine
COPY default.conf.template /etc/nginx/templates/default.conf.template # Copy over the Nginx config files
COPY nginx/nginx.conf /etc/nginx/nginx.conf
COPY nginx/*.conf.template /etc/nginx/templates/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
# Copy over build artifacts
COPY --from=builder /usr/src/app/dist /usr/share/nginx/html

View File

@ -1,3 +1,11 @@
# web # Vue 3 + Typescript + Vite
Frontend microservice for the Rusty Bever blogging software. 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.

13
index.html 100644
View File

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

20
nginx/default.conf 100644
View File

@ -0,0 +1,20 @@
# vim: ft=nginx
server {
listen 80;
listen [::]:80;
# =====FRONTEND HOSTING=====
location / {
root /usr/share/nginx/html;
index index.html;
}
error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}

View File

@ -0,0 +1,13 @@
# vim: ft=nginx
server {
listen 80;
listen [::]:80;
location /api/v1/posts/ {
proxy_pass http://${RB_BLOG}/v1/posts/;
}
location /api/v1/sections/ {
proxy_pass http://${RB_BLOG}/v1/sections/;
}
}

View File

@ -0,0 +1,55 @@
# vim: ft=nginx
server {
listen 80;
listen [::]:80;
# =====MATRIX WELL-KNOWN FILES=====
# 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;
}
}

33
nginx/nginx.conf 100644
View File

@ -0,0 +1,33 @@
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log notice;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
keepalive_timeout 65;
gzip on;
# This order is important, as the Matrix matches should be evaluated first
include /etc/nginx/conf.d/matrix.conf;
include /etc/nginx/conf.d/gateway.conf;
include /etc/nginx/conf.d/default.conf;
}

31
package.json 100644
View File

@ -0,0 +1,31 @@
{
"name": "rb-web",
"version": "0.0.0",
"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"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.8.1",
"@typescript-eslint/parser": "^5.8.1",
"@vitejs/plugin-vue": "^2.0.0",
"eslint": "^7.32.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.2.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"
}
}

BIN
public/favicon.ico 100644

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

26
src/App.vue 100644
View File

@ -0,0 +1,26 @@
<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'
</script>
<template>
<div>
<img
alt="Vue logo"
src="./assets/logo.png"
>
<HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</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>

BIN
src/assets/logo.png 100644

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

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

8
src/env.d.ts vendored 100644
View File

@ -0,0 +1,8 @@
/// <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
}

10
src/main.ts 100644
View File

@ -0,0 +1,10 @@
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')

View File

@ -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
}
]

37
src/mirage/v1.js 100644
View File

@ -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';
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;
}

27
src/server.js 100644
View File

@ -0,0 +1,27 @@
// 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
}

15
tsconfig.json 100644
View File

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

7
vite.config.ts 100644
View File

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

14
vue.config.js 100644
View File

@ -0,0 +1,14 @@
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")
}
},
}

2544
yarn.lock 100644

File diff suppressed because it is too large Load Diff