Convert Figma logo to code with AI

ArtalkJS logoArtalk

🌌 č‡Ē托įŽĄč¯„čŽēįŗģįģŸ | Your Self-hosted Comment System.

1,570
130
1,570
35

Top Related Projects

6,958

Gitalk is a modern comment component based on Github Issue and Preact.

4,060

A comment system based on GitHub Issues.

💅 Popular icon packs like Font Awesome, Material Design, and Octicons, available as React Styled Components

5,026

a Disqus alternative

Quick Overview

Artalk is a lightweight, self-hosted comment system for websites. It provides a simple and elegant solution for adding comments to static sites, blogs, or any web page, with features like nested replies, Markdown support, and customizable themes.

Pros

  • Easy to set up and integrate into existing websites
  • Lightweight and fast, with minimal impact on page load times
  • Supports multiple authentication methods, including guest comments
  • Customizable appearance with themes and CSS

Cons

  • Requires self-hosting, which may be challenging for non-technical users
  • Limited built-in spam protection compared to some commercial alternatives
  • Smaller community and ecosystem compared to more established comment systems

Code Examples

  1. Basic Artalk initialization:
new Artalk({
  el: '#comments',
  server: 'https://your-artalk-server.com',
  site: 'Your Site Name'
});
  1. Customizing Artalk options:
new Artalk({
  el: '#comments',
  server: 'https://your-artalk-server.com',
  site: 'Your Site Name',
  pagination: {
    pageSize: 15,
    readMore: true
  },
  defaultAvatar: 'mp'
});
  1. Using Artalk with dark mode:
new Artalk({
  el: '#comments',
  server: 'https://your-artalk-server.com',
  site: 'Your Site Name',
  darkMode: true
});

Getting Started

  1. Install Artalk server (requires Go):

    go install github.com/ArtalkJS/Artalk-go@latest
    
  2. Set up configuration file artalk.yml:

    app:
      site_name: "Your Site Name"
    db:
      type: "sqlite"
      file: "./data/artalk.db"
    
  3. Run Artalk server:

    artalk-go server
    
  4. Add Artalk to your HTML:

    <div id="comments"></div>
    <script src="https://unpkg.com/artalk"></script>
    <script>
    new Artalk({
      el: '#comments',
      server: 'http://localhost:23366',
      site: 'Your Site Name'
    });
    </script>
    

Competitor Comparisons

6,958

Gitalk is a modern comment component based on Github Issue and Preact.

Pros of Gitalk

  • Utilizes GitHub Issues for comment storage, providing a familiar interface for developers
  • Supports Markdown formatting in comments
  • Lightweight and easy to integrate into existing projects

Cons of Gitalk

  • Requires users to have a GitHub account to comment
  • Limited customization options for appearance and functionality
  • Potential rate limiting issues due to reliance on GitHub API

Code Comparison

Gitalk initialization:

const gitalk = new Gitalk({
  clientID: 'GitHub Application Client ID',
  clientSecret: 'GitHub Application Client Secret',
  repo: 'GitHub repo',
  owner: 'GitHub repo owner',
  admin: ['GitHub repo owner and collaborators']
})

Artalk initialization:

new Artalk({
  el: '#comments',
  server: 'https://artalk.example.com',
  site: 'My Site',
  pageKey: '/path/to/page'
})

Key Differences

  • Artalk offers a self-hosted solution, while Gitalk relies on GitHub infrastructure
  • Artalk provides more extensive customization options and features
  • Gitalk integrates seamlessly with GitHub workflows, making it appealing for open-source projects
  • Artalk supports multiple authentication methods, whereas Gitalk is limited to GitHub authentication

Both projects aim to provide commenting systems for websites, but they cater to different use cases and preferences. Gitalk is more suitable for GitHub-centric projects, while Artalk offers a more versatile and customizable solution for a broader range of applications.

4,060

A comment system based on GitHub Issues.

Pros of Gitment

  • Utilizes GitHub Issues for comment storage, providing a familiar interface for developers
  • Lightweight and easy to integrate into existing GitHub Pages or static sites
  • Supports Markdown formatting in comments

Cons of Gitment

  • Requires users to have a GitHub account to comment, limiting accessibility
  • Relies on GitHub API, which may lead to rate limiting issues for high-traffic sites
  • No longer actively maintained, with the last update in 2018

Code Comparison

Gitment initialization:

var gitment = new Gitment({
  id: 'Your page ID',
  owner: 'Your GitHub username',
  repo: 'The repo to store comments',
  oauth: {
    client_id: 'Your client ID',
    client_secret: 'Your client secret',
  },
})
gitment.render('comments')

Artalk initialization:

new Artalk({
  el: '#comments',
  server: 'https://your-backend-api.com',
  site: 'Your site name',
  pageKey: 'Your page identifier'
})

Key Differences

  • Artalk offers a more customizable and feature-rich commenting system
  • Artalk provides its own backend, while Gitment relies on GitHub infrastructure
  • Artalk supports multiple authentication methods, whereas Gitment is limited to GitHub accounts
  • Artalk is actively maintained and updated, offering better long-term support and improvements

💅 Popular icon packs like Font Awesome, Material Design, and Octicons, available as React Styled Components

Pros of styled-icons

  • Extensive collection of icon sets from various popular libraries
  • Seamless integration with styled-components for easy customization
  • TypeScript support for improved developer experience

Cons of styled-icons

  • Larger bundle size due to the vast number of icons included
  • May require additional setup for non-React projects
  • Limited to icon-related functionality only

Code Comparison

styled-icons:

import { Github } from '@styled-icons/boxicons-logos/Github'

const StyledGithubIcon = styled(Github)`
  color: #333;
  width: 24px;
  height: 24px;
`

Artalk:

new Artalk({
  el: '#comments',
  server: 'https://artalk.example.com',
  site: 'My Site',
  emoticons: {
    '[smile]': '😄'
  }
})

Key Differences

  • Purpose: styled-icons focuses on providing customizable icons for React projects, while Artalk is a self-hosted comment system.
  • Scope: styled-icons is limited to icon management, whereas Artalk offers a complete commenting solution.
  • Integration: styled-icons integrates well with styled-components, while Artalk can be easily added to any web page.
  • Customization: styled-icons allows for easy icon styling, while Artalk provides options for customizing the comment system's appearance and functionality.

Both projects serve different purposes and cater to distinct needs in web development. The choice between them depends on whether you need an icon library or a commenting system for your project.

5,026

a Disqus alternative

Pros of isso

  • Written in Python, which may be preferred by some developers and easier to integrate with Python-based websites
  • Supports SQLite database, making it lightweight and easy to set up without additional database requirements
  • Has a built-in moderation interface for managing comments

Cons of isso

  • Less active development compared to Artalk (last commit over a year ago)
  • Fewer customization options and features compared to Artalk's rich set of functionalities
  • Limited language support, primarily focused on English and German

Code Comparison

Isso (Python):

from isso import Isso, config
app = Isso(config.load("/path/to/isso.cfg"))

Artalk (JavaScript):

import Artalk from 'artalk'
new Artalk({
  el: '#comments',
  server: 'https://artalk.example.com'
})

Both projects aim to provide self-hosted comment systems for websites, but they differ in implementation languages and feature sets. Isso offers a simpler, Python-based solution with SQLite support, while Artalk provides a more feature-rich JavaScript-based system with extensive customization options and multi-language support. The choice between the two depends on specific project requirements, preferred programming language, and desired features.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Artalk

Artalk

npm version npm downloads Docker Pulls Go Report Card CircleCI Codecov npm bundle size

English Ãĸ€Âĸ ÃĨŽ˜ÃĻ–šçÂŊ‘çÂĢ™ Ãĸ€Âĸ ÃĻœ€ÃĻ–°ç‰ˆÃĻœÂŦ Ãĸ€Âĸ ÃĻ›´ÃĻ–°ÃĻ—ÂĨÃĨÂŋ—

Artalk ÃĻ˜¯ä¸€ÃĻÂŦžçŽ€ÃĨ•ÃĻ˜“用äÂŊ†ÃĨŠŸèƒÂŊ丰ÃĨ¯Œçš„评èŽÂēçÂŗÂģçÂģŸïÂŧΊÂŊ ÃĨ¯äÂģÂĨÃĨÂŧÂ€Ã§ÂŽÂąÃĨÂŗ用ÃĨœ°Êƒ¨çÂŊ²ÃĨšÂļçÂŊÂŽÃĨ…ÂĨäÂģÂģäÂŊ•ÃĨšÃĨÂŽÂĸÃŖ€çÂŊ‘çÂĢ™ÃŖ€Web ÃĨÂēӍӬÃŖ€‚

  • 🍃 ÃĨ‰çÂĢ¯ ~40KBïÂŧ΍Âē¯ÃĨ¤Šç„Âļ Vanilla JS
  • Ã°ÂŸÂÂą ÃĨŽçÂĢ¯ GolangïÂŧŒÊÂĢ˜ÃĻ•ˆèÂŊÂģÃŠÂ‡ÂÃ¨ÂˇÂ¨ÃĨšÂŗÃĨ°
  • ðŸÂŗ ʀšèÂŋ‡ Docker 一ʔŽÊƒ¨çÂŊÂ˛Ã¯ÂŧŒÃĻ–šäžÂŋÃĨÂŋÂĢÃĻ·
  • 🌈 ÃĨÂŧ€ÃĻÂēç¨‹ÃĨÂēïÂŧŒè‡ÂĒÃĻÂ‰Â˜Ã§ÂŽÂĄÃ¯ÂŧŒÊšç§è‡Âŗ上

牚ÃĻۤ

ÃĨŽ‰èÂŖ…

ʀšèÂŋ‡ Docker 一ʔŽÊƒ¨çÂŊÂ˛Ã¯Âŧš

docker run -d \
    --name artalk \
    -p 8080:23366 \
    -v $(pwd)/data:/data \
    -e "TZ=Asia/Shanghai" \
    -e "ATK_LOCALE=zh-CN" \
    -e "ATK_SITE_DEFAULT=Artalk 的ÃĨšÃĨÂŽÂĸ" \
    -e "ATK_SITE_URL=https://example.com" \
    artalk/artalk-go

ÃĨœ¨çÂŊÂ‘ÃŠÂĄÂĩ中ÃĨÂŧ•ÃĨ…ÂĨ Artalk:

Artalk.init({
  el:      '#Comments',
  site:    'Artalk 的ÃĨšÃĨÂŽÂĸ',
  server:  'https://artalk.example.com',
  pageKey: '/2018/10/02/hello-world.html'
})

äÂē†è§ÂŖÃĻ›´ÃĨ¤š Ãĸ†’

For Developers

Pull requests are welcome!

See Development and Contributing for information on working with the codebase, getting a local development setup, and contributing changes.

Contributors

Your contributions enrich the open-source community, fostering learning, inspiration, and innovation. We deeply value your involvement. Thank you for being a vital part of our community! ðŸÂĨ°

Supporters

Stargazers repo roster for @ArtalkJS/Artalk

Repobeats Analytics

Alt

Stargazers over time

ArtalkJS%2FArtalk | Trendshift

Stargazers over time

License

MIT

FOSSA Status

FOSSA Status

NPM DownloadsLast 30 Days