update

.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

.gitignore

@@ -0,0 +1,28 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+count.db
+/.history
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+yarn.lock*

Dockerfile

@@ -0,0 +1,11 @@
+FROM node:14
+
+WORKDIR /app
+
+COPY . .
+
+RUN yarn install
+
+EXPOSE 3000
+
+CMD ["yarn", "start"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 journey-ad
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,10 +1,311 @@
----
-title: Count
-emoji: 👀
-colorFrom: red
-colorTo: green
-sdk: docker
-pinned: false
+# *Moe Counter!*
+
+多种风格可选的萌萌计数器
+
+<p align="center">
+  <a href="https://count.getloli.com" target="_blank">
+    <img alt="Moe Counter!" src="https://count.getloli.com/@Moe-counter.github?name=Moe-counter.github&theme=booru-lewd&padding=7&offset=0&align=top&scale=1&pixelated=1&darkmode=auto">
+  </a>
+</p>
+
+<p align="center">
+  <a href="https://hellogithub.com/repository/ed741b376efe46789ce9bb140ac19a52" target="_blank">
+   <picture>
+     <source media="(prefers-color-scheme: dark)" srcset="https://api.hellogithub.com/v1/widgets/recommend.svg?rid=ed741b376efe46789ce9bb140ac19a52&claim_uid=NyJh2Vejq3984f5&theme=dark" />
+     <source media="(prefers-color-scheme: light)" srcset="https://api.hellogithub.com/v1/widgets/recommend.svg?rid=ed741b376efe46789ce9bb140ac19a52&claim_uid=NyJh2Vejq3984f5&theme=neutral" />
+     <img src="https://api.hellogithub.com/v1/widgets/recommend.svg?rid=ed741b376efe46789ce9bb140ac19a52&claim_uid=NyJh2Vejq3984f5&theme=neutral" alt="Featured｜HelloGitHub" style="width: 250px; height: 54px;" width="250" height="54" />
+   </picture>
+  </a>
+</p>
+
+<details>
+<summary><h2>More theme</h2></summary>
+
+### *[Contribute themes is welcome!](https://github.com/journey-ad/Moe-Counter/issues/new?assignees=&labels=theme&projects=&template=contribute-theme.yml&title=%5BTheme%5D%3A+)*
+
+##### 3d-num
+
+![3d-num](https://count.getloli.com/@demo?theme=3d-num)
+
+##### ai-1
+
+![ai-1](https://count.getloli.com/@demo?theme=ai-1)
+
+##### asoul
+
+![asoul](https://count.getloli.com/@demo?theme=asoul)
+
+##### booru-ffsr
+
+![booru-ffsr](https://count.getloli.com/@demo?theme=booru-ffsr)
+
+##### booru-helltaker
+
+![booru-helltaker](https://count.getloli.com/@demo?theme=booru-helltaker)
+
+##### booru-huggboo
+
+![booru-huggboo](https://count.getloli.com/@demo?theme=booru-huggboo)
+
+##### booru-jaypee
+
+![booru-jaypee](https://count.getloli.com/@demo?theme=booru-jaypee)
+
+##### booru-koe
+
+![booru-koe](https://count.getloli.com/@demo?theme=booru-koe)
+
+##### booru-lewd
+
+![booru-lewd](https://count.getloli.com/@demo?theme=booru-lewd)
+
+##### booru-lisu
+
+![booru-lisu](https://count.getloli.com/@demo?theme=booru-lisu)
+
+##### booru-mjg
+
+![booru-mjg](https://count.getloli.com/@demo?theme=booru-mjg)
+
+##### booru-mof
+
+![booru-mof](https://count.getloli.com/@demo?theme=booru-mof)
+
+##### booru-nandroid
+
+![booru-nandroid](https://count.getloli.com/@demo?theme=booru-nandroid)
+
+##### booru-qualityhentais
+
+![booru-qualityhentais](https://count.getloli.com/@demo?theme=booru-qualityhentais)
+
+##### booru-r6gdrawfriends
+
+![booru-r6gdrawfriends](https://count.getloli.com/@demo?theme=booru-r6gdrawfriends)
+
+##### booru-rfck
+
+![booru-rfck](https://count.getloli.com/@demo?theme=booru-rfck)
+
+##### booru-smtg
+
+![booru-smtg](https://count.getloli.com/@demo?theme=booru-smtg)
+
+##### booru-snyde
+
+![booru-snyde](https://count.getloli.com/@demo?theme=booru-snyde)
+
+##### booru-the-collection
+
+![booru-the-collection](https://count.getloli.com/@demo?theme=booru-the-collection)
+
+##### booru-touhoulat
+
+![booru-touhoulat](https://count.getloli.com/@demo?theme=booru-touhoulat)
+
+##### booru-townofgravityfalls
+
+![booru-townofgravityfalls](https://count.getloli.com/@demo?theme=booru-townofgravityfalls)
+
+##### booru-twifanartsfw
+
+![booru-twifanartsfw](https://count.getloli.com/@demo?theme=booru-twifanartsfw)
+
+##### booru-ve
+
+![booru-ve](https://count.getloli.com/@demo?theme=booru-ve)
+
+##### booru-vivi
+
+![booru-vivi](https://count.getloli.com/@demo?theme=booru-vivi)
+
+##### booru-vp
+
+![booru-vp](https://count.getloli.com/@demo?theme=booru-vp)
+
+##### booru-yuyuyui
+
+![booru-yuyuyui](https://count.getloli.com/@demo?theme=booru-yuyuyui)
+
+##### capoo-1
+
+![capoo-1](https://count.getloli.com/@demo?theme=capoo-1)
+
+##### capoo-2
+
+![capoo-2](https://count.getloli.com/@demo?theme=capoo-2)
+
+##### e621
+
+![e621](https://count.getloli.com/@demo?theme=e621)
+
+##### food
+
+![food](https://count.getloli.com/@demo?theme=food)
+
+##### gelbooru
+
+![gelbooru](https://count.getloli.com/@demo?theme=gelbooru)
+
+##### green
+
+![green](https://count.getloli.com/@demo?theme=green)
+
+##### kasuterura-1
+
+![kasuterura-1](https://count.getloli.com/@demo?theme=kasuterura-1)
+
+##### kasuterura-2
+
+![kasuterura-2](https://count.getloli.com/@demo?theme=kasuterura-2)
+
+##### kasuterura-3
+
+![kasuterura-3](https://count.getloli.com/@demo?theme=kasuterura-3)
+
+##### kasuterura-4
+
+![kasuterura-4](https://count.getloli.com/@demo?theme=kasuterura-4)
+
+##### kyun
+
+![kyun](https://count.getloli.com/@demo?theme=kyun)
+
+##### love-and-deepspace
+
+![love-and-deepspace](https://count.getloli.com/@demo?theme=love-and-deepspace)
+
+##### miku
+
+![miku](https://count.getloli.com/@demo?theme=miku)
+
+##### minecraft
+
+![minecraft](https://count.getloli.com/@demo?theme=minecraft)
+
+##### moebooru
+
+![moebooru](https://count.getloli.com/@demo?theme=moebooru)
+
+##### morden-num
+
+![morden-num](https://count.getloli.com/@demo?theme=morden-num)
+
+##### nixietube-1
+
+![nixietube-1](https://count.getloli.com/@demo?theme=nixietube-1)
+
+##### nixietube-2
+
+![nixietube-2](https://count.getloli.com/@demo?theme=nixietube-2)
+
+##### normal-1
+
+![normal-1](https://count.getloli.com/@demo?theme=normal-1)
+
+##### normal-2
+
+![normal-2](https://count.getloli.com/@demo?theme=normal-2)
+
+##### original-new
+
+![original-new](https://count.getloli.com/@demo?theme=original-new)
+
+##### original-old
+
+![original-old](https://count.getloli.com/@demo?theme=original-old)
+
+##### rule34
+
+![rule34](https://count.getloli.com/@demo?theme=rule34)
+
+##### shimmie2
+
+![shimmie2](https://count.getloli.com/@demo?theme=shimmie2)
+
+##### sketch-1
+
+![sketch-1](https://count.getloli.com/@demo?theme=sketch-1)
+
+##### sketch-2
+
+![sketch-2](https://count.getloli.com/@demo?theme=sketch-2)
+
+</details>
+
+## 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
+
+#### 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
+$ pnpm install
+
+$ pnpm run start
+```
+
+### Configuration
+
+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
+
+* [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
+
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+<a href="https://star-history.com/?repos=journey-ad/Moe-Counter&type=Date#journey-ad/Moe-Counter&Date">
+ <picture>
+   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=journey-ad/Moe-Counter&type=Date&theme=dark" />
+   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=journey-ad/Moe-Counter&type=Date" />
+   <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=journey-ad/Moe-Counter&type=Date" />
+ </picture>
+</a>

assets/script.js

@@ -0,0 +1,208 @@
+(function () {
+  const btn = document.getElementById('get');
+  const img = document.getElementById('result');
+  const code = document.getElementById('code');
+
+  const elements = {
+    name: document.getElementById('name'),
+    theme: document.getElementById('theme'),
+    padding: document.getElementById('padding'),
+    offset: document.getElementById('offset'),
+    align: document.getElementById('align'),
+    scale: document.getElementById('scale'),
+    pixelated: document.getElementById('pixelated'),
+    darkmode: document.getElementById('darkmode'),
+    num: document.getElementById('num'),
+    prefix: document.getElementById('prefix')
+  };
+
+  btn.addEventListener('click', throttle(handleButtonClick, 500));
+  code.addEventListener('click', selectCodeText);
+
+  const mainTitle = document.querySelector('#main_title i');
+  const themes = document.querySelector('#themes');
+  const moreTheme = document.querySelector('#more_theme');
+
+  mainTitle.addEventListener('click', throttle(() => party.sparkles(document.documentElement, { count: party.variation.range(40, 100) }), 1000));
+  moreTheme.addEventListener('click', scrollToThemes);
+
+  function handleButtonClick() {
+    const { name, theme, padding, offset, scale, pixelated, darkmode, num } = elements;
+    const nameValue = name.value.trim();
+
+    if (!nameValue) {
+      alert('Please input counter name.');
+      return;
+    }
+
+    const params = {
+      name: nameValue,
+      theme: theme.value || 'moebooru',
+      padding: padding.value || '7',
+      offset: offset.value || '0',
+      align: align.value || 'top',
+      scale: scale.value || '1',
+      pixelated: pixelated.checked ? '1' : '0',
+      darkmode: darkmode.value || 'auto'
+    };
+
+    if (num.value > 0) {
+      params.num = num.value;
+    }
+    if (prefix.value !== '') {
+      params.prefix = prefix.value;
+    }
+
+    const query = new URLSearchParams(params).toString();
+    const imgSrc = `${__global_data.site}/@${nameValue}?${query}`;
+
+    img.src = `${imgSrc}&_=${Math.random()}`;
+    btn.setAttribute('disabled', '');
+
+    img.onload = () => {
+      img.scrollIntoView({ block: 'start', behavior: 'smooth' });
+      code.textContent = imgSrc;
+      code.style.visibility = 'visible';
+      party.confetti(btn, { count: party.variation.range(20, 40) });
+      btn.removeAttribute('disabled');
+    };
+
+    img.onerror = async () => {
+      try {
+        const res = await fetch(img.src);
+        if (!res.ok) {
+          const { message } = await res.json();
+          alert(message);
+        }
+      } finally {
+        btn.removeAttribute('disabled');
+      }
+    };
+  }
+
+  function selectCodeText(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const target = e.target;
+    const range = document.createRange();
+    const selection = window.getSelection();
+
+    range.selectNodeContents(target);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }
+
+  function scrollToThemes() {
+    if (!themes.hasAttribute('open')) {
+      party.sparkles(moreTheme.querySelector('h3'), { count: party.variation.range(20, 40) });
+      themes.scrollIntoView({ block: 'start', behavior: 'smooth' });
+    }
+  }
+
+  function throttle(fn, threshold = 250) {
+    let last, deferTimer;
+    return function (...args) {
+      const now = Date.now();
+      if (last && now < last + threshold) {
+        clearTimeout(deferTimer);
+        deferTimer = setTimeout(() => {
+          last = now;
+          fn.apply(this, args);
+        }, threshold);
+      } else {
+        last = now;
+        fn.apply(this, args);
+      }
+    };
+  }
+})();
+
+// Lazy Load
+(() => {
+  function lazyLoad(options = {}) {
+    const { selector = 'img[data-src]:not([src])', loading = '', failed = '', rootMargin = '200px', threshold = 0.01 } = options;
+
+    const images = document.querySelectorAll(selector);
+
+    const observer = new IntersectionObserver((entries, observer) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          const img = entry.target;
+          observer.unobserve(img);
+
+          img.onerror = failed ? () => { img.src = failed; img.setAttribute('data-failed', ''); } : null;
+          img.src = img.getAttribute('data-src');
+          img.removeAttribute('data-loading');
+        }
+      });
+    }, { rootMargin, threshold });
+
+    images.forEach(img => {
+      if (loading) {
+        img.src = loading;
+        img.setAttribute('data-loading', '');
+      }
+      observer.observe(img);
+    });
+  }
+
+  const lazyLoadOptions = {
+    selector: 'img[data-src]:not([src])',
+    loading: `${__global_data.site}/img/loading.svg`,
+    failed: `${__global_data.site}/img/failed.svg`,
+    rootMargin: '200px',
+    threshold: 0.01
+  };
+
+  document.readyState === 'loading'
+    ? document.addEventListener("DOMContentLoaded", () => lazyLoad(lazyLoadOptions))
+    : lazyLoad(lazyLoadOptions);
+})();
+
+// Back to top
+(() => {
+  let isShow = false, lock = false;
+  const btn = document.querySelector('.back-to-top');
+
+  const handleScroll = () => {
+    if (lock) return;
+    if (document.body.scrollTop >= 1000) {
+      if (!isShow) {
+        btn.classList.add('load');
+        isShow = true;
+      }
+    } else if (isShow) {
+      btn.classList.remove('load');
+      isShow = false;
+    }
+  };
+
+  const handleClick = () => {
+    lock = true;
+    btn.classList.add('ani-leave');
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+
+    setTimeout(() => {
+      btn.classList.remove('ani-leave');
+      btn.classList.add('leaved');
+    }, 390);
+
+    setTimeout(() => btn.classList.add('ending'), 120);
+    setTimeout(() => btn.classList.remove('load'), 1500);
+
+    setTimeout(() => {
+      lock = false;
+      isShow = false;
+      btn.classList.remove('leaved', 'ending');
+    }, 2000);
+  };
+
+  window.addEventListener('scroll', handleScroll);
+  btn.addEventListener('click', handleClick);
+})();
+
+// Prevent safari gesture
+(() => {
+  document.addEventListener('gesturestart', e => e.preventDefault());
+})();

assets/style.less

@@ -0,0 +1,243 @@
+html {
+  scroll-padding: 50px 0;
+}
+
+#main_title {
+  margin-top: 0.5em;
+}
+
+#themes {
+  margin-top: 2em;
+
+  & > p {
+    margin: 0;
+  }
+}
+
+#more_theme h3 {
+  display: inline-block;
+  margin: 0;
+  cursor: pointer;
+}
+
+#get {
+  margin-bottom: 1em;
+}
+
+#code {
+  visibility: hidden;
+  display: inline-block;
+  margin-bottom: 1em;
+}
+
+#result {
+  display: block;
+}
+
+.github {
+  margin-top: 2em;
+}
+
+code {
+  word-break: break-all;
+}
+
+input[type="checkbox"][role="switch"] {
+  height: 0;
+  width: 0;
+  visibility: hidden;
+
+  & + label {
+    cursor: pointer;
+    width: 3.6em;
+    height: 1.8em;
+    margin: 0;
+    background: grey;
+    display: block;
+    border-radius: 1.8em;
+    position: relative;
+    transition: 0.3s;
+
+    &:active:after {
+      width: 2.34em;
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0.1em;
+      left: 0.1em;
+      width: 1.6em;
+      height: 1.6em;
+      background: #fff;
+      border-radius: 1.6em;
+      transition: 0.3s;
+    }
+
+    span {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 12.5%;
+      font-size: 10px;
+
+      &::before,
+      &::after {
+        display: block;
+        color: #fff;
+        font-weight: bold;
+        box-sizing: border-box;
+      }
+
+      &::before {
+        content: "ON";
+      }
+
+      &::after {
+        content: "OFF";
+        color: #ccc;
+      }
+    }
+  }
+
+  &:checked + label {
+    background: var(--b-btn-bg);
+
+    &:after {
+      left: calc(100% - 0.1em);
+      transform: translateX(-100%);
+    }
+  }
+}
+
+img[data-loading],
+img[data-failed] {
+  width: 40px;
+}
+
+details > summary {
+  list-style: none;
+
+  &::-webkit-details-marker,
+  &::marker {
+    display: none;
+  }
+}
+
+summary::before {
+  border-bottom: 6px solid transparent;
+  border-left: 10px solid var(--b-txt);
+  border-top: 6px solid transparent;
+  content: "";
+  display: inline-block;
+  height: 0;
+  margin-right: 10px;
+  position: relative;
+  transition: 0.2s;
+  width: 0;
+}
+
+details[open] summary::before {
+  transform: rotate(90deg);
+}
+
+h2,
+h3,
+h4,
+h5 {
+  margin: 1.5em 0 0.6em;
+}
+
+table {
+  tr {
+    .caption {
+      margin: 1em 0 0;
+    }
+  }
+}
+
+.back-to-top {
+  position: fixed;
+  z-index: 2;
+  right: -108px;
+  bottom: 0;
+  width: 108px;
+  height: 150px;
+  background: url("./img/back-to-top.png?v=1") no-repeat 0 0;
+  background-size: 108px 450px;
+  opacity: 0.6;
+  transition: opacity 0.3s, right 0.8s;
+  cursor: pointer;
+
+  &:hover {
+    background-position: 0 -150px;
+    opacity: 1;
+  }
+
+  &::after {
+    content: "";
+    position: fixed;
+    z-index: 2;
+    right: 0;
+    bottom: 0;
+    width: 108px;
+    height: 150px;
+    background: url("./img/back-to-top.png?v=1") no-repeat 0 0;
+    background-size: 108px 450px;
+    background-position: 0 -300px;
+    transition: opacity 0.3s;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &.load {
+    right: 0;
+  }
+
+  &.ani-leave {
+    background-position: 0 -150px;
+    animation: ani-leave 390ms ease-in-out forwards;
+
+    @keyframes ani-leave {
+      0% {
+        transform: translateX(0);
+      }
+
+      100% {
+        transform: translateX(108px);
+      }
+    }
+  }
+
+  &.leaved,
+  &.ending {
+    pointer-events: none;
+  }
+
+  &.leaved {
+    background: none;
+    transition: none;
+  }
+
+  &.ending::after {
+    opacity: 1;
+    transition-delay: 0.35s;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  body {
+    max-width: ~"min(90%, 800px)";
+  }
+}
+
+@media screen and (max-width: 900px) {
+  iframe {
+    display: none;
+  }
+}