Giter Club home page Giter Club logo

nblog's Introduction

nblog

nostr-based ghost blog See a running demo at https://hello-nblog.vercel.app

Setup

Vercel (Quick and Easy)

Simply click this bright, blue button:

Deploy with Vercel

Locally

Ensure you have Node.js installed on your computer.

  1. Fork this repository
  2. Git clone you new fork to your server
  3. Inside the project root, run git checkout master to switch to the master branch for the most stable version
  4. Add a .env file to the project root. See the Configuration section
  5. Run yarn to install node packages
  6. Run yarn build to build the production server
  7. Run yarn preview to run the sever.

If you did it right, that's about it!

Configuration

Configuration is done with enviroment variables.

  • PUBLIC_PUBKEYS List of HEX pubkeys to fetch events for seperated by a ,
  • PUBLIC_RELAYS List of relay URLs to connect to seperated by a ,.
    • It's best to keep this list as small as possible. Less relays = faster blog and less room for errors (updates not being published)
  • PUBLIC_NAME A name for your blog. ex: nym's blog
  • PUBLIC_PICTURE A Picture URL for your blog, used in favicon and header.
  • PUBLIC_REACTIONS Controls if you want reactions underneath your posts. Can either be true or false.

Customization

Accent Color

If you want to change the accent color, simply open src/app.css and look for the --accent-color variable.

:root {
	--accent-color: #ea5a0c;
}

This variable will control the accent color, here you can set a hex value, or RGB, or something else. Accent color can be applied to elements using tailwind with it's color classes. For changing text color it would be text-accent, background is bg-accent and so on.

Individual Pages

nblog uses SvelteKit. SvelteKit pages use directory based routing, and these files can be found in src/routes and are addressed by +page.svelte or +layout.svelte. For example, if you wanted to change the header or footer, those could be found in src/routes/+layout.svelte. If you wanted to add info to the home page, you can edit it in src/routes/+page.svelte Keep in mind that nblog uses Tailwind CSS for styling, so there are built in classes for you to use at your disposal.

Components

Various components are used throughout the app and can be customized. They are all located in src/lib/*.svelte.

Credits

  • Karnage for giving constructive critisism of the original design, providing his own designs, and making v0.4.0 possible.
    • npub1r0rs5q2gk0e3dk3nlc7gnu378ec6cnlenqp8a3cjhyzu6f8k5sgs4sq9ac

nblog's People

Contributors

chakany avatar dependabot[bot] avatar tradewind886 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.