Added files

.github/workflows/npm-publish.yml

@@ -0,0 +1,32 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: Publish
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: npm ci
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+/node_modules

.npmrc

@@ -0,0 +1 @@
+@arash-11:registry=https://npm.pkg.github.com

README.md

@@ -0,0 +1,18 @@
+# vite-starter
+
+A CLI tool to create boilerplate for vanilla TS projects using Vite.
+
+To get started, just run `npx vite-starter <your-project-name>`!
+
+Ensure that your Node environment meets Vite's requirements. As mentioned [here](https://vitejs.dev/guide/#scaffolding-your-first-vite-project):
+
+>Vite requires Node.js version 14.18+, 16+. However, some templates require a higher Node.js version to work, please upgrade if your package manager warns about it.
+
+<br>
+
+The tool currently does the following:
+
+- Uses Vite to generate a vanilla TypeScript project.
+- Installs Sass and other required dependencies.
+- Removes some extra files to clean up.
+- Adds a `styles` directory in `src` which includes the SCSS boilerplate to build upon.

bin/index.js

@@ -0,0 +1,96 @@
+#!/usr/bin/env node
+
+import { spawnSync } from 'child_process';
+import { dirname, join } from 'path';
+import { chdir } from 'process';
+import { fileURLToPath } from 'url';
+import fsExtraPkg from 'fs-extra';
+const { realpathSync, readdirSync, rm, copySync } = fsExtraPkg;
+
+const npm = process.platform === 'win32' ? 'npm.cmd' : 'npm';
+const projectName = process.argv[2];
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+function removeFilesInDir(isMsgShown, directory, filesToIgnore = []) {
+  const files = readdirSync(directory);
+
+  if (files.length > 0) {
+    if (!isMsgShown.state) {
+      isMsgShown.state = true;
+      console.log('Removing unneeded files...');
+    }
+
+    files.forEach(file => {
+      if (!filesToIgnore.includes(file)) {
+        rm(join(directory, file), err => {
+          if (err) throw err;
+        });
+      }
+    });
+  }
+}
+
+function removeExtraFiles() {
+  const projectPublicDirPath = join(dirname(realpathSync(projectName)), projectName, 'public');
+  const projectSrcDirPath = join(dirname(realpathSync(projectName)), projectName, 'src');
+
+  const isMsgShown = { state: false };
+
+  removeFilesInDir(isMsgShown, projectPublicDirPath);
+  removeFilesInDir(isMsgShown, projectSrcDirPath, ['main.ts', 'vite-env.d.ts']);
+}
+
+function addStylesDir() {
+  const srcDir = join(__dirname, 'styles');
+  const targetDir = join(dirname(realpathSync(projectName)), projectName, 'src', 'styles');
+
+  copySync(srcDir, targetDir, { overwrite: true }, err => {
+    if (err) {
+      console.error(err);
+    } else {
+      console.log('Adding styles directory...');
+    }
+  });
+}
+
+function addDependencies() {
+  try {
+    const newDir = join(dirname(realpathSync(projectName)), projectName);
+    chdir(newDir);
+
+    console.log('Installing dependencies...');
+    const cmd = spawnSync(npm, ['add', '-D', 'sass']);
+    const stderr = cmd.output[2];
+
+    if (stderr.length > 0) throw stderr;
+  } catch (error) {
+    console.error(error, error.toString());
+  }
+}
+
+function runViteCmd() {
+  const cmd = spawnSync(npm, ['create', 'vite@latest', projectName, '--', '--template', 'vanilla-ts']);
+  const stdout = cmd.output[1];
+  const stderr = cmd.output[2];
+
+  if (stderr.length === 0) {
+    console.log(stdout.toString().split('\n')[1]);
+    removeExtraFiles();
+    addStylesDir();
+    addDependencies();
+    console.log("You're good to go! You can now run:\n");
+    console.log(`  cd ${projectName}\n  npm run dev`);
+  } else {
+    console.error(stderr.toString());
+  }
+}
+
+function init() {
+  if (process.argv.length < 3) {
+    return console.log("It looks like you didn't pass in the name for your project.");
+  }
+
+  runViteCmd();
+}
+
+init();

bin/styles/base/_reset.scss

@@ -0,0 +1,85 @@
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  color-scheme: dark light;
+  color: var(--clr-white-1);
+  background-color: var(--clr-black-2);
+}
+
+/* Allow percentage-based heights in the application */
+html,
+body {
+  min-height: 100%;
+}
+
+/* https://css-tricks.com/fixing-smooth-scrolling-with-find-on-page/ */
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+body {
+  line-height: 1.5;
+  min-height: 100vh;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  font-weight: 400;
+}
+
+img,
+picture {
+  /* ensures that images shrink as the viewport or their space gets narrower */
+  max-width: 100%;
+  display: block;
+}
+
+input,
+button,
+textarea,
+select {
+  /* unlike many other elements, these elements don't inherit the font properties */
+  font: inherit;
+}
+
+button {
+  appearance: none;
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+}
+
+a {
+  text-decoration: none;
+}
+
+/* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

bin/styles/layouts/_body.scss

@@ -0,0 +1 @@
+

bin/styles/mixins/_breakpoints.scss

@@ -0,0 +1,13 @@
+$breakpoints: (
+  small: 480px,
+  medium: 720px,
+  large: 1024px
+);
+
+@mixin media($key, $default: max) {
+  $size: map-get($breakpoints, $key);
+
+  @media only screen and (#{$default}-width: $size) {
+    @content;
+  }
+}

bin/styles/style.scss

@@ -0,0 +1,16 @@
+/* Mixins */
+@import './mixins/breakpoints';
+
+/* Tokens */
+@import './tokens/tokens';
+
+/* Base */
+@import './base/reset';
+
+/* Components */
+
+/* Layouts */
+@import './layouts/body';
+
+/* Util */
+@import './utils/utils';

bin/styles/tokens/_tokens.scss

@@ -0,0 +1,23 @@
+@font-face {
+  font-family: '';
+  src: url() format('');
+}
+
+:root {
+  // Fonts
+  font-size: 100%;
+  --font-scale-ratio: 1.2;
+
+  --font-size-0: 1rem;
+  --font-size-1: calc(var(--font-size-0) * var(--font-scale-ratio));
+  --font-size-2: calc(var(--font-size-1) * var(--font-scale-ratio));
+  --font-size-3: calc(var(--font-size-2) * var(--font-scale-ratio));
+  --font-size-4: calc(var(--font-size-3) * var(--font-scale-ratio));
+  --font-size-5: calc(var(--font-size-4) * var(--font-scale-ratio));
+  --font-size-6: calc(var(--font-size-5) * var(--font-scale-ratio));
+  --font-size-7: calc(var(--font-size-6) * var(--font-scale-ratio));
+
+  // Colors
+
+  // Spacing
+}

bin/styles/utils/_utils.scss

@@ -0,0 +1,36 @@
+.hidden {
+  display: none !important;
+}
+
+.visible {
+  display: block !important;
+}
+
+.desktop-only {
+  @include media(medium) {
+    & {
+      display: none !important;
+    }
+  }
+}
+
+.mobile-only {
+  @include media(medium, min) {
+    & {
+      display: none !important;
+    }
+  }
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}