Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yurisizuku/web-minicomment
A Mini Comment web application, using Nodejs, Vue.js, Mongodb
https://github.com/yurisizuku/web-minicomment
javascript mongodb nodejs serverless webapp
Last synced: 4 days ago
JSON representation
A Mini Comment web application, using Nodejs, Vue.js, Mongodb
- Host: GitHub
- URL: https://github.com/yurisizuku/web-minicomment
- Owner: YuriSizuku
- Created: 2020-11-05T18:28:45.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-05-17T14:18:49.000Z (over 2 years ago)
- Last Synced: 2024-09-07T15:26:30.921Z (2 months ago)
- Topics: javascript, mongodb, nodejs, serverless, webapp
- Language: JavaScript
- Homepage:
- Size: 732 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MiniComment
❄️ A Mini Comment web application, using `Nodejs`, `Vue.js`, `Mongodb`.
You can use the raw format or markdown format.
❄️ This project support for deploying in any node server, as well as vercel.
The demo is here [Yurisizuku](https://blog.schnee.moe/comments/).
## 🍀 MiniComment component
### MiniComment Server
- `minicomment_server.js`, main server of this app, the command line is as below
- `minicomment_api.js`, parse the api for get/submit the comment.
- `minicomment_model.js` the defination of the comments model and some functions to manipulate the database
- `minicomment_db.js`, some configs for connet database
## MiniComment Client
In `/public`, use `minicomment.xhtml`, `minicomment.js`, `minicomment.css` to import minicoment client. The comment web UI can
- fetch the comments by ajax and render the comments in several pages
- go forward, backward, and jump to arbitary page
- show the reference (if has) of each comment, and jump to reference
- submit the comments , with the captcha support
❄️ It has some configs as bellow:
```html
```
## 🍀 MiniComment Client Deploy
### deploy in any html page
1. input the `jquery.js`, `vue.js`, `marked.js`, `highlight.js`, `highlightjs-line-numbers.js` libraries by ``
2. use jquery load `minicomment.xhtml` into where you want to add comment view, see `/public/minicomment.html` in detail.
```html
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta article_title="Comments" api_host="http://localhost:3003"/>
<meta comment_view_limit="10" page_limit="10"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js">
$("#mini_comment").load("./minicomment.xhtml");
```
### deploy in hexo(butterfly theme)
1. In `hook_style.js`, use jQuery `load` to import the html into the comment page, something like:
```javascript
// hook_style.js
function add_mini_comment(){
$($('meta')[0]).after('');
var article_title = $('meta[property="og:title"]').attr('content');
if ($('meta[article_title]').length <= 0 ){
$($('meta')[0]).after('');
}
switch(article_title.toLowerCase()){
case "home":
case "archives":
case "tags":
case "catagories":
case "about": break;
case "comments":
$('meta[article_title]').attr('article_title', "Comments");
$('#page').append('
');
$('div#mini_comment').load("/hook/minicomment.xhtml");
break;
default:
$('meta[article_title]').attr('article_title', article_title);
$('#post').append('');
$('div#mini_comment').load("/hook/minicomment.xhtml");
break;
}
}
```
2. In `_config.butterfly.yml`, import the `Vue` and `hook_style.js`
```yml
# _config.butterfly.yml
inject:
head:
-
bottom:
-
-
-
-
```
3. put the `minicomment.xhtml`, `minicomment.js`, `minicomment.css` into `/source/hook/` directly (hexo generate html in wrong format, so rename it to xhtml). Maybe need to edit `` and delete ``, because it is set by the `hook_style.js`. Also change the path of js and css.
**❄️ Finally, do not forget to purge the cdn caches to see the changes**
```html
```
## 🍀 MiniComment Server Deploy
### deploy on any node server
1. use command below to download,
``` bash
git clone https://github.com/YuriSizuku/MiniComment.git && cd MiniComment && npm i
npm i minicomment && npm i # or just use npm to install pacakge
```
2. create a file `./secret/SECRET_DB.TXT` and put a string like `mongodb://username:password@host:port/database?authSource=admin` for connecting to your mongodb database.
3. `npm run start` or `pm2 start server.js` to run it, have fun ~
Also you can simple run the commad as below, to deploy in any node server.
``` shell
node minicomment_server.js [options]
--port=3003, or $port # you can use either secret_file or secret_url
--secret_url, or $secret_url # mongodb://username:password@host:port/database?authSource=admin
--secret_file=./secret/SECRET_DB.TXT
```
### deploy on vercel
1. create a project in vercel and fork [this](https://github.com/YuriSizuku/MiniComment) repository.
2. in vercel config `settings/environment-variables` page, set enviroment, `secret_url=mongodb://username:password@host:port/database?authSource=admin` as yours.
3. deploy and have fun ~
## 🍀 history
- v0.9, refract the code structure, support for vecel, serverless
- v0.8, add support for markdown
- v0.7, initial version, with comment view and submit function