diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml index 5e164aa..005162f 100644 --- a/.github/workflows/release.yaml +++ b/.github/workflows/release.yaml @@ -16,7 +16,7 @@ env: REGISTRY: docker.frappet.com IMAGE_NAME: demo/qualifying-exam-cms jobs: - # act workflow_dispatch -W .github/workflows/release.yaml --input IMAGE_VER=v0.2.3-dev -s DOCKER_USER=sorawit -s DOCKER_PASS=P@ssword -s SSH_PASSWORD=P@ssw0rd + # act workflow_dispatch -W .github/workflows/release.yaml --input IMAGE_VER=v0.2.4-dev -s DOCKER_USER=sorawit -s DOCKER_PASS=P@ssword -s SSH_PASSWORD=P@ssw0rd release: runs-on: ubuntu-latest steps: @@ -69,5 +69,6 @@ jobs: cd /home/frappet/docker/bma-ehr-recruit-qualifying-exam docker-compose pull docker-compose up -d - touch success + echo "${{ steps.gen_ver.outputs.image_ver }}"> success + diff --git a/cms/Dockerfile b/cms/Dockerfile index 19a9fa5..a325dff 100644 --- a/cms/Dockerfile +++ b/cms/Dockerfile @@ -1,4 +1,4 @@ -# docker build . -t registry.home.lan/demo/be2:latest +# docker build . -t docker.frappet.com/demo/qualifying-exam-cms:latest FROM node:18 as build WORKDIR /app COPY . . diff --git a/cms/README.md b/cms/README.md index 24b2ac4..5d5b38e 100644 --- a/cms/README.md +++ b/cms/README.md @@ -1,7 +1,9 @@ -# เวปประกาศข่าว (CMS) +# เวปประกาศข่าว (CMS TOR 6.6.4) การพัฒนาแบบที่เป็นอยู่ Vue(SPA)+dotnet(Web API) ของบริษัทไม่ได้รองรับ SEO เท่าใดนัก จำเป็นต้องใช้ Meta Framework ที่รองรับ SSR เช่น Nuxt.js เนื่องจากไม่ขึ้นกับส่วนอื่นมากนัก จะทดลองใช้เทคโนโลยีแบบใหม่ๆในการพัฒนา ที่ง่ายในการพัฒนากว่าเดิมจะ SvelteKit เป็นฐาน Daisy UI และ Daisy UI สำหรับการทำ Frontend และจะนำเครื่องมือในการ Automate ต่างๆมาร่วมด้วย - [Sveltekit](https://www.youtube.com/watch?v=uEJ-Rnm2yOE) Meta JS Framework รองรับ SSR เขียนง่าย -- [TailWindCSS]() ติดตั้งด้วย [svelte-add](https://github.com/svelte-add/tailwindcss) +- [TailWindCSS](https://tailwindcss.com/) ติดตั้งด้วย [svelte-add](https://github.com/svelte-add/tailwindcss) +- [marked](https://marked.js.org/) รองรับ Markdown สำหรับเนื้อหาที่ซับซ้อน +- - [Daisy UI ](https://daisyui.com/) UI Component ที่ใช้ TailWindCSS ใช้ได้ไม่จำกัด Framework - [PWA](https://web.dev/progressive-web-apps/) ทำให้ Web App เหมือนแอปมือถือ - [Playwright](https://playwright.dev/) เขียนโค้ดทำการทดสอบเวปแอปบน Browser @@ -9,7 +11,7 @@ - [GitHub Actions](https://github.com/features/actions) ทำ CI/CD ในระบบทดสอบ - [nektos/act](https://github.com/nektos/act) ใช้ GitHub Actions บนเครื่องของเราเอง - [Argo CD](https://argo-cd.readthedocs.io/en/stable/) deploy ขึ้นระบบ Production (K8s) -- [Keycloak](https://www.keycloak.org/) ใช้สำหรับทำระบบ Login +- [FullCalendar](https://github.com/schooltechx/youtube/blob/main/svelte/component/FullCalendar.md) รองรับพ.ศ. ใช้แค่ฟีเจอร์[ฟรีก็น่าจะพอ](https://fullcalendar.io/license#:~:text=or%20FullCalendar%20Premium.-,FullCalendar%20Standard,all%20copyright%20headers%20are%20preserved.) ## วีดีโอแสดงการทำงานทั้งหมด [![Automate Development](https://img.youtube.com/vi/7CER67WVWec/0.jpg)](https://youtu.be/7CER67WVWec "Automate Development") @@ -23,6 +25,8 @@ npm create svelte@latest cms-recruit cd cms-recruit npm install +# ติดตั้ง Mdsvex +npm i --save-dev mdsvex # ติดตั้ง Tailwindcss พร้อมเซ็ตค่าให้เรียบร้อย npx svelte-add@latest tailwindcss # เมื่อติดตั้ง daisyui ให้ดูวิธีการตั้งค่าเพิ่มจากในเวป @@ -83,21 +87,13 @@ winget install nektos.act # Install act (macOS/Linux) brew install act ``` - - [ตัวอย่างการใช้งานกับ .NET](https://youtu.be/k1w_cCzCd0o) # CD Argo CD TODO ยังไม่ได้ทำสำหรับโปรเจ็กนี้ แต่ก็ดูวิธีทำจาก [ตัวอย่างการทำ CD ด้วย Argo CD](https://youtu.be/c7sSQLuhht0) ก่อนได้ครับ - ## PWA ใน [app.html](./src/app.html) จะเรียกใช้ [manifest.json](./src/static/manifest.json) ไฟล์ [service-worker.ts](./src/service-worker.ts) จะถูก SvelteKit นำไปทำเป็น Service Worker ให้ - [ตอนนี้ใช้แบบง่ายตามนี้](https://thecodingchannel.hashnode.dev/turn-your-sveltekit-app-into-a-pwa-in-3-simple-steps) - -# Keycloak -ยังไม่แน่ใจว่าการ Authen จำเป็นสำหรับ CMS หรือเปล่า เพราะใช้แค่แสดงข้อมูล อาจจะใช้หน้า Frontend ของ eHR ในการใส่ข้อมูลทั้งหมดก็น่าจะดีกว่า ตอนนี้ใช้ Repository pattern ไปก่อน -- Frontend ใช้ [Keycloak JS](https://www.npmjs.com/package/keycloak-js) -- API จะไม่ใช้ keycloak-connect เพราะมันรองรับเฉพาะ Express จะใช้ [keycloak-backend](https://www.npmjs.com/package/keycloak-backend) หรือตัวอื่นๆแทน -- ควรใช้การก็อปปี้ public key มาเก็บไว้ แทนการ verify token แบบ online จะเร็วกว่า [How to verify a JWT token in JavaScript and Node.js?](https://www.youtube.com/watch?v=gm2PBHyjQmM) diff --git a/cms/package.json b/cms/package.json index 802598e..c175927 100644 --- a/cms/package.json +++ b/cms/package.json @@ -14,6 +14,11 @@ "format": "prettier --plugin-search-dir . --write ." }, "devDependencies": { + "@fullcalendar/common": "^5.11.4", + "@fullcalendar/core": "^6.1.5", + "@fullcalendar/daygrid": "^6.1.5", + "@fullcalendar/interaction": "^6.1.5", + "@fullcalendar/timegrid": "^6.1.5", "@playwright/test": "^1.28.1", "@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/adapter-node": "^1.2.2", @@ -32,7 +37,6 @@ "prettier-plugin-svelte": "^2.8.1", "sass": "^1.58.3", "svelte": "^3.54.0", - "svelte-calendar": "^3.1.6", "svelte-check": "^3.0.1", "svelte-preprocess": "^4.10.7", "svelte-seo": "^1.5.3", @@ -44,6 +48,8 @@ }, "type": "module", "dependencies": { - "daisyui": "^2.51.3" + "@types/marked": "^4.0.8", + "daisyui": "^2.51.3", + "marked": "^4.3.0" } } diff --git a/cms/src/app.postcss b/cms/src/app.postcss index 1a7b7cf..fbbbcdb 100644 --- a/cms/src/app.postcss +++ b/cms/src/app.postcss @@ -2,3 +2,17 @@ @tailwind base; @tailwind components; @tailwind utilities; +@layer base { + h1 { + @apply text-4xl; + } + h2 { + @apply text-2xl; + } + ul{ + @apply list-disc + } + ol{ + @apply list-decimal + } + } \ No newline at end of file diff --git a/cms/src/lib/ver.json b/cms/src/lib/ver.json index aef5175..c254881 100644 --- a/cms/src/lib/ver.json +++ b/cms/src/lib/ver.json @@ -1,5 +1,4 @@ { "version":"Auto gen version", "builddate":"2020-02-02_22:22:22" - } \ No newline at end of file diff --git a/cms/svelte.config.js b/cms/svelte.config.js index 80da8aa..3ace2d3 100644 --- a/cms/svelte.config.js +++ b/cms/svelte.config.js @@ -2,7 +2,6 @@ import adapter from '@sveltejs/adapter-node'; import preprocess from 'svelte-preprocess'; import { vitePreprocess } from '@sveltejs/kit/vite'; - /** @type {import('@sveltejs/kit').Config} */ const config = { // Consult https://kit.svelte.dev/docs/integrations#preprocessors @@ -13,7 +12,6 @@ const config = { postcss: true }) ], - kit: { // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. @@ -22,5 +20,4 @@ const config = { adapter: adapter() } }; - export default config;