diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..2661515
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,20 @@
+# Specify your website URL
+# APP_SITE=https://count.getloli.com
+
+# Application port
+APP_PORT=3000
+
+# Database type: either 'sqlite' or 'mongodb'
+DB_TYPE=sqlite
+
+# If using MongoDB, provide the connection string
+# DB_URL=mongodb://127.0.0.1:27017
+
+# Database write interval in seconds (0 for real-time)
+DB_INTERVAL=60
+
+# Log level: either 'debug' | 'info' | 'warn' | 'error' | 'none'
+LOG_LEVEL=debug
+
+# Google Analytics `G-Tag` ID
+# GA_ID=G-XXXX
diff --git a/.github/ISSUE_TEMPLATE/contribute-theme.yml b/.github/ISSUE_TEMPLATE/contribute-theme.yml
new file mode 100644
index 0000000..895d131
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/contribute-theme.yml
@@ -0,0 +1,39 @@
+name: Contribute Themes
+description: Contribute themes for everyone to use.
+title: "[Theme]: "
+labels: ["theme"]
+body:
+ - type: markdown
+ attributes:
+ value: |
+ ### Contribute themes is welcome! Please read this brief tips to get started:
+
+ - Create images of numbers from *0-9*, file type can be *jpeg, png, gif, webp*,
+ - Then named these images as *0.gif, 1.gif, ..., 9.gif* (or other extension).
+ - Try to ensure that each image has an equal height, and that the image size is not too large.
+ > Online image compressor: [TinyPNG](https://tinypng.com/) [Ezgif](https://ezgif.com/optimize)
+ - Then pack these images into a ZIP file.
+
+ Additionally, please refrain from using political figures or controversial figures or characters.
+ - type: checkboxes
+ id: tips
+ attributes:
+ label: Tips
+ options:
+ - label: I have read and understood the tips above
+ required: true
+ - type: input
+ id: name
+ attributes:
+ label: Theme Name
+ description: Describe this theme with a short name that can include letters, numbers, and hyphens
+ placeholder: ex. awesome
+ validations:
+ required: true
+ - type: textarea
+ id: theme
+ attributes:
+ label: Preview and ZIP file
+ description: Upload the theme preview, and ZIP file
+ validations:
+ required: true
diff --git a/.gitignore b/.gitignore
index b329f95..b079941 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,6 +16,7 @@ count.db
# misc
.DS_Store
+.env
.env.local
.env.development.local
.env.test.local
diff --git a/README.md b/README.md
index a3d8cb3..99cf311 100644
--- a/README.md
+++ b/README.md
@@ -24,10 +24,245 @@ Multiple styles of Moe-Counters to choose from
##### gelbooru
+=======
+# *Moe Counter!*
+
+多种风格可选的萌萌计数器
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+More theme
## Demo
[https://count.getloli.com](https://count.getloli.com)
+## How to use
+
+For information on counter usage and configuration, refer to the [demo website](https://count.getloli.com).
+
## Usage
### Install
@@ -38,14 +273,25 @@ Multiple styles of Moe-Counters to choose from
- Just hit the **Fork** button
- And hit the **Run** button
+#### Run on Glitch
+
+- Open [Glitch project](https://glitch.com/~moe-counter-api)
+- Just hit the **Remix your own** button
+- That's it!
+
#### Deploying on your own server
```shell
$ git clone https://github.com/journey-ad/Moe-Counter.git
$ cd Moe-Counter
+
$ yarn install
$ yarn start
+
+$ pnpm install
+
+$ pnpm run start
```
### Configuration
@@ -72,6 +318,30 @@ Replit can use Secrets, check [documentation](https://docs.replit.com/programmin
```
DB_URL="mongodb+srv://account:passwd@***.***.***.mongodb.net/db_count"
+=======
+Set `.env` file to specify the environment variables. *[.env.example](./.env.example)*
+
+```dosini
+# Specify your website URL
+# APP_SITE=https://count.getloli.com
+
+# Application port
+APP_PORT=3000
+
+# Database type: either 'sqlite' or 'mongodb'
+DB_TYPE=sqlite
+
+# If using MongoDB, provide the connection string
+# DB_URL=mongodb://127.0.0.1:27017
+
+# Database write interval in seconds (0 for real-time)
+DB_INTERVAL=60
+
+# Log level: either 'debug' | 'info' | 'warn' | 'error' | 'none'
+LOG_LEVEL=debug
+
+# Google Analytics `G-Tag` ID
+# GA_ID=G-XXXX
```
## Credits
@@ -86,3 +356,24 @@ DB_URL="mongodb+srv://account:passwd@***.***.***.mongodb.net/db_count"
## License
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fjourney-ad%2FMoe-Counter?ref=badge_large)
+=======
+* [Glitch](https://glitch.com/)
+* [A-SOUL_Official](https://space.bilibili.com/703007996)
+* [moebooru](https://github.com/moebooru/moebooru)
+* gelbooru.com NSFW
+* [Icons8](https://icons8.com/icon/80355/star)
+* *And all booru site...*
+
+## License
+
+[MIT License](./LICENSE), excluding all themes
+
+---
+
+
+
+
+
diff --git a/assets/img/back-to-top.png b/assets/img/back-to-top.png
new file mode 100644
index 0000000..2aec0d6
Binary files /dev/null and b/assets/img/back-to-top.png differ
diff --git a/assets/img/failed.svg b/assets/img/failed.svg
new file mode 100644
index 0000000..35a9920
--- /dev/null
+++ b/assets/img/failed.svg
@@ -0,0 +1 @@
+
- Moe Count
-
- ${parts}
-
+
+
+ Moe Counter!
+
+ ${defs}
+
+ ${parts}
+
`
}
module.exports = {
+ themeList,
getCountImage
}
diff --git a/views/index.pug b/views/index.pug
index a144569..05f7b07 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -1,112 +1,156 @@
html
head
title='Moe Counter!'
- meta(name='viewport', content='width=device-width, initial-scale=1')
- link(rel='icon', type='image/png', href='favicon.png')
- link(rel='stylesheet', href='https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css')
- link(rel='stylesheet', href='style.css')
-
- script(async, src='https://www.googletagmanager.com/gtag/js?id=G-2RLWN5JXRL')
+ meta(name='viewport', content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no')
+ link(rel='icon', type='image/png', href=`${site}/favicon.png`)
+ link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/normalize.css')
+ link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/bamboo.css')
+ link(rel='stylesheet/less', href=`${site}/style.less`)
+ script(less, src='https://cdn.jsdelivr.net/npm/less')
+ if ga_id
+
+ script(async, src=`https://www.googletagmanager.com/gtag/js?id=${ga_id}`)
script.
window.dataLayer = window.dataLayer || [];
- function gtag(){dataLayer.push(arguments);}
+ function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
- gtag('config', 'G-2RLWN5JXRL');
+ gtag('config', '#{ga_id}');
- function _evt_push(type, category, label){
+ function _evt_push(type, category, label) {
gtag('event', type, {
'event_category' : category,
'event_label' : label
});
}
+ script.
+ var __global_data = { site: "#{site}" };
+
body
- h3 How to use:
+ h1#main_title
+ i Moe Counter!
+
+ h3 How to use
+ p Set a unique id for your counter, replace
+ code :name
+ | in the url, That's it!
h5 SVG address
- code #{site}/get/@:name
+ code #{site}/@:name
h5 Img tag
- code <img src="#{site}/get/@:name" alt=":name" />
+ code <img src="#{site}/@:name" alt=":name" />
h5 Markdown
- code 
+ code 
- h3 eg:
- DO NOT
- | enter personal information
-
- details
- summary(style='display: inline-block;', onclick='_evt_push("click", "normal", "more_theme")')
- h3(style='display: inline-block; cursor: pointer;') More theme
- p(style='margin: 0;') Just use the query parameters theme, like this: #{site}/get/@:name?theme=moebooru
- h5 asoul
- img(src='#{site}/get/@demo?theme=asoul', alt='A-SOUL')
- h5 moebooru
- img(src='#{site}/get/@demo?theme=moebooru', alt='Moebooru')
- h5 moebooru-h
- img(src='#{site}/get/@demo?theme=moebooru-h', alt='Moebooru-Hentai')
- h5 rule34
- img(src='#{site}/get/@demo?theme=rule34', alt='Rule34')
- h5 gelbooru
- img(src='#{site}/get/@demo?theme=gelbooru', alt='Gelbooru')
- h5 gelbooru-h
- img(src='#{site}/get/@demo?theme=gelbooru-h', alt='Gelbooru-Hentai')
+ details#themes
+ summary#more_theme(onclick='_evt_push("click", "normal", "more_theme")')
+ h3 More theme✨
+ p Just use the query parameters theme, like this: #{site}/@:name?theme=moebooru
+ each theme in Object.keys(themeList)
+ div.item(data-theme=theme)
+ h5 #{theme}
+ img(data-src=`${site}/@demo?theme=${theme}` alt=theme)
h3 Credits
ul
- li
- a(href='https://repl.it/', target='_blank', rel='nofollow') repl.it
- li
- a(href='https://space.bilibili.com/703007996', target='_blank', title='A-SOUL_Official') A-SOUL
- li
- a(href='https://github.com/moebooru/moebooru', target='_blank', rel='nofollow') moebooru
- li
- a(href='javascript:alert("!!! NSFW LINK !!!\\nPlease enter the url manually")') rule34.xxx
- | NSFW
+ li: a(href='https://glitch.com/', target='_blank', rel='nofollow') Glitch
+ li: a(href='https://space.bilibili.com/703007996', target='_blank', title='A-SOUL_Official') A-SOUL
+ li: a(href='https://github.com/moebooru/moebooru', target='_blank', rel='nofollow') moebooru
li
a(href='javascript:alert("!!! NSFW LINK !!!\\nPlease enter the url manually")') gelbooru.com
| NSFW
- li
- a(href='https://icons8.com/icons/set/star', target='_blank', rel='nofollow') Icons8
+ li: a(href='https://icons8.com/icon/80355/star', target='_blank', rel='nofollow') Icons8
+ span: i And all booru site...
h3 Tool
.tool
- code #{site}/get/@
- input#name(type='text', placeholder=':name', style='display: inline-block; width: 80px; height: 1.4em; line-height: 1.4em; margin: 0 4px; vertical-align: middle;')
- code ?theme=
- select#theme(style='display: inline-block; height: 1.6em; line-height: 1.6em; font-size: 14px; margin: 0 4px; padding: 0 4px; vertical-align: middle;')
- option(value='asoul') asoul
- option(value='moebooru') moebooru
- option(value='moebooru-h') moebooru-h
- option(value='rule34') rule34
- option(value='gelbooru') gelbooru
- option(value='gelbooru-h') gelbooru-h
- button#get(style='margin: 10px 0;', onclick='_evt_push("click", "normal", "get_counter")') Get
- img#result(style='display: block;')
+ table
+ thead
+ tr
+ th Param
+ th Description
+ th Value
+ tbody
+ tr
+ td: code name
+ td Unique counter name
+ td: input#name(type='text', placeholder=':name')
+ tr
+ td: code theme
+ td Select a counter image theme, default is
+ code moebooru
+ td
+ select#theme
+ option(value="random", selected) * random
+ each theme in Object.keys(themeList)
+ option(value=theme) #{theme}
+ tr
+ td: code padding
+ td Set the minimum length, between 1-16, default is
+ code 7
+ td: input#padding(type='number', value='7', min='1', max='32', step='1', oninput='this.value = this.value.replace(/[^0-9]/g, "")')
+ tr
+ td: code offset
+ td Set the offset pixel value, between -500-500, default is
+ code 0
+ td: input#offset(type='number', value='0', min='-500', max='500', step='1', oninput='this.value = this.value.replace(/[^0-9|\-]/g, "")')
+ tr
+ td: code scale
+ td Set the image scale, between 0.1-2, default is
+ code 1
+ td: input#scale(type='number', value='1', min='0.1', max='2', step='0.1', oninput='this.value = this.value.replace(/[^0-9|\.]/g, "")')
+ tr
+ td: code align
+ td Set the image align, Enum top/center/bottom, default is
+ code top
+ td: select#align(name="align")
+ option(value="top", selected) top
+ option(value="center") center
+ option(value="bottom") bottom
+ tr
+ td: code pixelated
+ td Enable pixelated mode, Enum 0/1, default is
+ code 1
+ td
+ input#pixelated(type='checkbox', role='switch', checked)
+ label(for='pixelated'): span
+ tr
+ td: code darkmode
+ td Enable dark mode, Enum 0/1/auto, default is
+ code auto
+ td: select#darkmode(name="darkmode")
+ option(value="auto", selected) auto
+ option(value="1") yes
+ option(value="0") no
+ tr
+ td(colspan=3)
+ h4.caption Unusual Options
+ tr
+ td: code num
+ td Set counter display number, 0 for disable, default is
+ code 0
+ td: input#num(type='number', value='0', min='0', max='1e15', step='1', oninput='this.value = this.value.replace(/[^0-9]/g, "")')
+ tr
+ td: code prefix
+ td Set the prefix number, empty for disable
+ td: input#prefix(type='number', value='', min='0', max='999999', step='1', oninput='this.value = this.value.replace(/[^0-9]/g, "")')
- script.
- var btn = document.getElementById('get'),
- img = document.getElementById('result')
+ button#get(onclick='_evt_push("click", "normal", "get_counter")') Generate
- btn.addEventListener('click', function() {
- var name = document.getElementById('name'),
- themeEl = document.getElementById('theme')
- var text = name.value ? name.value.trim() : ''
- var theme = themeEl.value || 'moebooru'
- if(!text) {
- alert('Please input counter name.')
- return
- }
+ div
+ code#code
+ img#result
- img.src = '#{site}/get/@' + text + '?theme=' + theme
- })
-
- iframe(src="https://chat.getloli.com/room/@Moe-counter?title=%E8%90%8C%E8%90%8C%E8%AE%A1%E6%95%B0%E5%99%A8%E7%9A%84%E7%95%99%E8%A8%80%E6%9D%BF", scrolling="no", frameborder="0", height="70%", width="26%", style="position: fixed;top: 2%;right: 5%;")
-
- p.copy
+ p.github
a(href='https://github.com/journey-ad/Moe-Counter', target='_blank', onclick='_evt_push("click", "normal", "go_github")') source code
+
+ div.back-to-top
+
+ script(async, src='https://cdn.jsdelivr.net/npm/party-js@2/bundle/party.min.js')
+ script(async, src=`${site}/script.js`)
+