npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

restyle-reddit

v0.2.17

Published

Publish subreddit CSS from your favourite code editor

Downloads

5

Readme

Restyle for reddit is a tool for writing reddit stylesheets with your favorite code editor. It let's you write SCSS and publish it as compressed CSS straight to specified subreddit you moderate. All you need is a reddit app credentials (client id and secret), restyle config file and you're good to go!

Setting up

Requirements

Installing

Create a new folder and run

$ yarn init -y
$ yarn add restyle-reddit  

Create reddit application

In order to publish CSS with restyle, you need to have an authenticated script-like reddit app. Login to your reddit account and browse to prefs/apps/
Click the create another app... button and fill out the required fields. Remember to choose script as your application type.

create-application

Hit create app once done.

Restyle config

Open the newly created restyle folder and create a file called restyle.config.js to the root of the project folder.

Copy & paste this into the new file and fill out the properties:

const path = require('path')

// Fill out the fields
module.exports = {
  credentials: {
    username: // Your reddit username,
    password: // Your reddit password,
    clientId: // App client ID,
    clientSecret: // App client Secret
  },

  /* `input` is the project path you want to edit
     your stylesheet. `output` is the target path
     in which restyle compiles the SCSS you write
     to CSS and uses that path to publish
     the stylesheet to your target subreddit      */
  input: path.resolve(__dirname, 'src/style.scss'),
  output: path.resolve(__dirname, 'dist/index.css'),

  subreddit: // Subreddit you want to target (you need to be the moderator)
}

Remember the app you just created on reddit? Copy these values from the app page, and use them in your restyle.config.js file.

new-app

Writing SCSS

Now the fun begins! Create the input/output folders you specified in restyle.config.js. Create the *.scss file in the input folder.

Now write whatever SCSS you want.

Watch for file changes and publish to subreddit

Restyle can watch for file changes and compile/publish the results to your subreddit automatically. Run $ node_modules/.bin/restyle watch once you're ready and watch the magic happen on your specified subreddit.

Want to help make Restyle better?

you can find the Github repository here!