DEV Community: Santhosh Veer

PHP Supabase Comments

Santhosh Veer — Wed, 22 Jan 2025 03:59:39 +0000

Hi all! 😊

After a long year, I’m finally publishing a post on dev.to!

I’ve created a simple comment system built using PHP and Supabase. This project was inspired from Supacomments dev by @mcnaveen - Blazing fast comment system with Sveltejs and Supabase

Features

PHP (7.4 to 8.x.x) support
Supabase for storing comments in the database
Pagination for comments
Modern and responsive UI using Bulma CSS
Comprehensive security for input forms and spam prevention
Cloudflare Turnstile for additional spam protection

This project is completely free and open-source! Feel free to fork the GitHub repository and customize according it to your needs. 😊

mskian / php-supabase-comments

A Simple Comment system built using PHP and Supabase.

PHP Supabase Comments

A simple comment system built with PHP and Supabase.

Features

PHP (7.4 to 8.x.x) support
Supabase for storing comments in the database
Pagination for comments
Modern and responsive UI using Bulma CSS
Comprehensive security for input forms and spam prevention
Cloudflare Turnstile for additional spam protection

setup

Create a database in Supabase: https://supabase.com/docs/guides/database/overview

-- Create the table with necessary fields
CREATE TABLE user_comments (
    id SERIAL PRIMARY KEY,            -- Auto-incrementing primary key
    name VARCHAR(255) NOT NULL,        -- Name of the user (max length 255)
    comment TEXT NOT NULL,            -- Comment field to store user input
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP -- Timestamp with timezone
);

Also, create Cloudflare Turnstile: https://developers.cloudflare.com/turnstile/
Create a .env file to add the required API keys

## Supabase
supabaseUrl=https://example.supabase.co
apiKey=
pkey=
table=comments
## Cloudflare turnstile
secretKey=

…

View on GitHub

Happy Friendship Day Greeting image With Name - HTML Canvas

Santhosh Veer — Tue, 26 Jul 2022 04:50:00 +0000

I build a Simple Wishing Site using Vite JS Vanilla - Day by Day Tech stacks are Improved & bring more funs and Magic to development.

A few years ago I use jQuery to Build Many Fancy kinds of Stuff but in the Modern day, the scenario was Different with Help of Many Frameworks I achieve Many things without external sources and Mainly Improve web App Performance.

In my Personal time, I spend my time to building a Festival related web apps and Event Blogging somehow we have to build an Earning source in Different ways Online.

Friendship Day Wishes image with Name

Free Happy Friendship Day Wishes image with Name - Friendship Day Greeting image Generator.

This Website Concept May be Useful for People who want to Build a Wishing Greeting site.

Utilizing Vite js for Node Modules and Optimization - Bundle Everything in Single Javascript File - Build a Static Site with Javascript Magical Stuffs - Fully Static Website.

Methods Used ⚙

HTML/CSS and Javascript
HTML Canvas - Create Wish image
tailwindcss - Front-end Styling
Vitejs - Testing, Bundling and Local Server
Alpine.js - For Javascript Magic
Eslint - Fix the Lint Error
Prettier - Beautify the Code files
Slugify - Slugify the User input and Convert to URL
Cloudflare Pages for Free Hosting - `npx wrangler pages publish dist

Create your Wishes at - https://wish.sanweb.info/

Source Code

mskian / friendship-day-wishes

Free Happy Friendship Day Wishes image with Name - Friendship Day Greeting image Generator.

Friendship Day Wishes image with Name

⚡ Vitejs | ✨ Tailwind CSS | 📸 HTML Canvas | 🎩 Alpine.js | 🌩 Cloudflare Pages

Free Happy Friendship Day Wishes image with Name - Friendship Day Greeting image Generator.

Happy Friendship Greeting Generator

Methods Used ⚙

HTML/CSS and Javascript
HTML Canvas - Create Wish image
tailwindcss - Front-end Styling
Vitejs - Testing, Bundling and Local Server
Alpine.js - For Javascript Magic
Eslint - Fix the Lint Error
Prettier - Beautify the Code files
Slugify - Slugify the User input and Convert to URL
Cloudflare Pages for Free Hosting - npx wrangler pages publish dist --branch production

Installation 📦

Add funtions, logic's and Modules - /lib/canva.js
Edit Home page - index.html
CSS Styling - /styles/tailwind.css
Build file - main.js
Clone this repo or Download

git clone https://github.com/mskian/friendship-day-wishes
friendship-day-wishes
yarn install

Test the site

yarn dev

Build the site

yarn build

Test the production…

View on GitHub

Final Notes

This website for learning Purpose Every day I keep Practicing doing some fun stuff to Enhance My Skills.

Kick Start your Personal Write up Site using Gridsome

Santhosh Veer — Tue, 12 Jan 2021 06:03:48 +0000

If you want to create a Blog only for Personal Write up's then start with Gridsome (A Jamstack framework for Vue.js)

ZERO - Cost, plugins, Database,

~~server-side~~ - Full Static Site

Publish Content via Markdown

Let's Kick start your Personal Write up site Today at Zero Cost

Clone this Gridsome theme from Github or download it

mskian / hello-world

Share Something useful related to Life and tech.

Hello World 🙂

Share Something useful related to Life and tech.

✨ Minimal | ❤ Clean | 🚀 Faster | 📱 PWA

▶ Thanks to @alexbrown for this awesome Minimal and Light weight Gridsome Starter theme - https://github.com/alexbrown/gridsome-starter-minimal-blog

🤗 This theme is Fit for status site or Notes.

Built Using Gridsome - Static Site Generator for Vue.js

I just made some Modifications and Include Extra Features like

PWA
Social Meta tags
Optimized Meta tags
Canonical URL
Manifest
Post tags
Post Author
Create new post file via Command
Custom 404 Error Page

Usage 📦

Clone or Downlaod this repo

git clone https://github.com/mskian/hello-world.git
cd hello-world
yarn install

Test the Site

yarn develop

Add post content - /content/posts

yarn newpost

Production Build

yarn build

Production Build store the Static Files on dist Folder

Free Hosting 💯

Host it on Netlify for free

LICENSE ☑

MIT

View on GitHub

git clone https://github.com/mskian/hello-world.git

Install packages

cd hello-world
yarn install

Test the site

yarn develop

publish new content

yarn newpost

Production Build

yarn build

Production Build store the Static Files on dist Folder

you can host it Freely on Netlify and Vercel

Theme features

Markdown
PWA
Post tags
Post author
Social Meta Tags
Create a new post file via Command
Custom 404 Error Page
Optimized Meta Tags
Canonical URL

Spread your Write up's around the World with a Lightning-fast Site with PWA

SSL Expiry Reminder 🔔

Santhosh Veer — Tue, 12 Nov 2019 08:00:34 +0000

SSL Expiry Reminder - Get Notification remainder on Telegram and Gotify Push Notification Server

➡ Mostly we are all using Free Let's Encrypt SSL service but sometimes it's Failed to renew Even Sometimes we forget SSL renewal date of our Paid SSL too

➡ usually, it sends Reminder to our Register Email-id but Sometimes we forget to check the Mail

➡ I got an idea to develop a CLI for Sending SSL Expiry Date Notification Alert on Telegram (Via Bot) and Gotify Push Notification Alert

➡ it was written in Javascript and axios for Call the API
➡ Here is the Github Repository of My Script - https://github.com/mskian/ssl-expiry-reminder

➡ Install via NPM

npm install -g ssl-expiry-reminder

➡ Test the CLI

checkssl --status example.com

example.com
Certificate Valid from
Wednesday, November 28, 2018 5:30 AM
Certificate Expiry date
Wednesday, December 2, 2020 5:30 PM
Days Remaining: 386

Gotify

➡ Currently It supports

Telegram BOT Notification
Gotify Push Notification
Pushbullet - Planned
Email - Planned

Share your Feedbacks & Contribute ✌

Get your Linux or Windows System Information

Santhosh Veer — Tue, 01 Oct 2019 04:38:25 +0000

➡ I got this Idea while checking My System/Distro information 🗃 using Multiple Commands every time.

➡ plan to Write a Script to Fetch all System/Distro information in Single Command.

➡ I have a Confusion in choosing a Lang to Build this Script
Finally Got This Awesome Node Module 👉 system information - https://github.com/sebhildebrandt/systeminformation Get our System & OS Information.

➡ Here is the Github Repository of My Script - https://github.com/mskian/sys-info

➡ Install via NPM

$ npm install -g mysystem-info
$ mysysinfo

🗃 It Fetches the System/Distro

➡ Platform
➡ Distro
➡ Version
➡ Kernal Version
➡ Architecture
➡ System Memory
➡ Disk Size and
➡ TimeZone

Share your Feedbacks & Contribute ✌

Install Z-shell (Oh My Zsh) on Ubuntu 18.04 LTS

Santhosh Veer — Thu, 04 Oct 2018 14:32:38 +0000

Update the packages

sudo apt-get update
sudo apt upgrade

Install prerequisite packages (ZSH, powerline & powerline fonts)

sudo apt install zsh
sudo apt-get install powerline fonts-powerline

Clone the Oh My Zsh Respo

git clone https://github.com/robbyrussell/oh-my-zsh.git ~/.oh-my-zsh

Create a New ZSH configuration file

cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc

Set up a Fancy theme for your Terminal - Open .zshrc File using nano editor

nano .zshrc

Find the line ZSH_THEME="robbyrussell" replace robbyrussell with agnoster theme in .zshrc File (CTRL + X & Enter to Save)

ZSH_THEME="agnoster"

Change your Default Shell

chsh -s /bin/zsh

Update & Uninstallation oh-my-zsh Visit - https://github.com/robbyrussell/oh-my-zsh#manual-updates

cd .oh-my-zsh
upgrade_oh_my_zsh

Want Syntax Highlighting? install ZSH Syntax Highlighting for Oh My Zsh

Clone the ZSH Syntax Highlighting

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git "$HOME/.zsh-syntax-highlighting" --depth 1

Add syntax-highlighting in .zshrc Configuration

echo "source $HOME/.zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" >> "$HOME/.zshrc"

Revert Back to Default Shell

chsh -s /bin/bash