code style implementation

.eslintignore

@@ -0,0 +1,19 @@
+# Yarn
+.yarn
+.pnp.*
+.yarnrc.yml
+yarn-error.log
+
+# Github
+.github
+
+# VSCode user-specific settings
+.vscode
+
+# Build artifacts
+dist
+
+# Misc
+.dccache
+.parcel-cache
+.gitpod.yml

.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "env": {
+    "node": true,
+    "browser": true,
+    "es2021": true
+  },
+  "extends": ["google"],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "rules": {
+    "linebreak-style": ["error", "unix"],
+    "quote-props": ["error", "as-needed"],
+    "quotes": [
+      "error",
+      "single",
+      { "avoidEscape": true, "allowTemplateLiterals": true }
+    ],
+    "object-curly-spacing": ["error", "always"],
+    "indent": ["error", 2, { "SwitchCase": 1 }],
+    "comma-dangle": ["error", "only-multiline"],
+    "no-mixed-spaces-and-tabs": "error"
+  }
+}

.github/workflows/ci.yml

@@ -0,0 +1,23 @@
+name: CI
+
+on: [push, pull_request]
+
+jobs:
+  lint:
+    name: Check for codestyle issues
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Setup node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Check codestyle
+        run: yarn run check

.gitignore

@@ -15,3 +15,6 @@ yarn-error.log
 
 # parceljs
 .parcel-cache
+
+# VSCode user-specific settings
+.vscode

.prettierignore

@@ -0,0 +1,19 @@
+# Yarn
+.yarn
+.pnp.*
+.yarnrc.yml
+yarn-error.log
+
+# Github
+.github
+
+# VSCode user-specific settings
+.vscode
+
+# Build artifacts
+dist
+
+# Misc
+.dccache
+.parcel-cache
+.gitpod.yml

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "endOfLine": "lf"
+}

.yarn/sdks/eslint/bin/eslint.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require eslint/bin/eslint.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real eslint/bin/eslint.js your application uses
+module.exports = absRequire(`eslint/bin/eslint.js`);

.yarn/sdks/eslint/lib/api.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require eslint
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real eslint your application uses
+module.exports = absRequire(`eslint`);

.yarn/sdks/eslint/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "eslint",
+  "version": "8.3.0-sdk",
+  "main": "./lib/api.js",
+  "type": "commonjs"
+}

.yarn/sdks/integrations.yml

@@ -0,0 +1,5 @@
+# This file is automatically generated by @yarnpkg/sdks.
+# Manual changes might be lost!
+
+integrations:
+  - vscode

.yarn/sdks/prettier/index.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require prettier/index.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real prettier/index.js your application uses
+module.exports = absRequire(`prettier/index.js`);

.yarn/sdks/prettier/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "prettier",
+  "version": "2.5.0-sdk",
+  "main": "./index.js",
+  "type": "commonjs"
+}

CODE_OF_CONDUCT.md

@@ -10,19 +10,19 @@ We pledge to act and interact in ways that contribute to an open, welcoming, div
 
 Examples of behavior that contributes to a positive environment for our community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the overall community
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a professional setting
+- The use of sexualized language or imagery, and sexual attention or advances of any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email address, without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting
 
 ## Enforcement Responsibilities
 
@@ -64,20 +64,20 @@ Community leaders will follow these Community Impact Guidelines in determining t
 
 ### 4. Permanent Ban
 
-**Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior,  harassment of an individual, or aggression toward or disparagement of classes of individuals.
+**Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within the community.
 
 ## Attribution
 
 This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0, available at [https://www.contributor-covenant.org/version/2/0/code_of_conduct.html][v2.0].
 
-Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder][Mozilla CoC].
+Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder][mozilla coc].
 
-For answers to common questions about this code of conduct, see the FAQ at [https://www.contributor-covenant.org/faq][FAQ]. Translations are available at [https://www.contributor-covenant.org/translations][translations].
+For answers to common questions about this code of conduct, see the FAQ at [https://www.contributor-covenant.org/faq][faq]. Translations are available at [https://www.contributor-covenant.org/translations][translations].
 
 [homepage]: https://www.contributor-covenant.org
 [v2.0]: https://www.contributor-covenant.org/version/2/0/code_of_conduct.html
-[Mozilla CoC]: https://github.com/mozilla/diversity
-[FAQ]: https://www.contributor-covenant.org/faq
+[mozilla coc]: https://github.com/mozilla/diversity
+[faq]: https://www.contributor-covenant.org/faq
 [translations]: https://www.contributor-covenant.org/translations

CONTRIBUTING.md

@@ -12,7 +12,9 @@ There are many ways to contribute to this open source project. Any contributions
 
 ### 🧬 Development
 
-If you can write a code then create a pull request to this repo and I will review your code. Please consider to submit your pull request to the ```dev``` branch. I will auto reject if you submit your pull request to the ```main``` branch.
+If you can write a code then create a pull request to this repo and I will review your code. Please consider to submit your pull request to the `dev` branch. I will auto reject if you submit your pull request to the `main` branch.
+
+Before submitting a pull request, ensure that there is no code style issues by running `yarn run check`. If there are issues found, run `yarn run stylefix`.
 
 ### 📖 Documentation
 

README.md

@@ -64,7 +64,7 @@ Meet the requirements? Click the Gitpod button below to get started!
 1. Rename your image into `bg.jpg` and make sure it is in JPG/JPEG format.
 2. Navigate to `src/img` and upload your image, just replace the existing image.
 3. Next, open `config.json` file by just clicking it, an editor will open.
-4. Edit the contents of `config.json` file to match your needs. 
+4. Edit the contents of `config.json` file to match your needs.
    - For the object `name`, this is the name of your portrait, it can be a name of your subject.
    - For the object `text`, this is the text you want to see in the portrait. It can be a lyrics, a passage from a book, or a sweet message to your subject or loved one.
 5. Navigate to `src/scss` and open the file `_vars.scss` to edit the settings.

package.json

@@ -5,6 +5,12 @@
   "source": "src/index.html",
   "scripts": {
     "clean:output": "rimraf dist",
+    "format:checkonly": "prettier . -c",
+    "format": "prettier . -w",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "check": "yarn run lint && yarn run format:checkonly",
+    "stylefix": "yarn run format && yarn run lint:fix",
     "dev": "yarn run clean:output && parcel src/index.html",
     "build": "yarn run clean:output && parcel build src/index.html",
     "serve": "parcel serve src/index.html",
@@ -31,7 +37,10 @@
   },
   "devDependencies": {
     "@parcel/transformer-sass": "^2.0.1",
+    "eslint": "^8.3.0",
+    "eslint-config-google": "^0.14.0",
     "parcel": "^2.0.1",
+    "prettier": "^2.5.0",
     "rimraf": "^3.0.2"
   },
   "packageManager": "[email protected]"

src/config.json

@@ -1,4 +1,4 @@
 {
-    "name": "Nayeon",
-    "text": "Santa, tell me if you're really there Don't make me fall in love again if he won't be here Next year Santa, tell me if he really cares 'Cause I can't give it all away if he won't be here Next year Feeling Christmas all around And I'm tryin' to play it cool But it's hard to focus when I see him walking 'cross the room 'Let It Snow' is blasting out But I won't get in the mood I'm avoiding every mistletoe until I know It's true love that he thinks of So next Christmas I'm not all alone, boy Santa, tell me if you're really there Don't make me fall in love again if he won't be here Next year Santa, tell me if he really cares 'Cause I can't give it all away if he won't be here Next year I've been down this road before Fell in love on Christmas night But on New Year's Day I woke up and he wasn't by my side Now I need someone to hold Be my fire in the cold But it's hard to tell if this is just a fling Or if it's true love that he thinks of So next Christmas I'm not all alone, boy Santa, tell me if you're really there Don't make me fall in love again if he won't be here Next year Santa, tell me if he really cares 'Cause I can't give it all away if he won't be here Next year Oh, I wanna have him beside me like oh-oh-oh On the 25th by the fireplace, oh-oh-oh But I don't want a new broken heart This year I've got to be smart Oh, baby (Santa tell me) If ya won't be, (Santa tell me) if ya won't be here! (Santa tell me) Santa, tell me if you're really there (If you're really there) Don't make me fall in love again if he won't be here Next year (He won't be here next year) Santa, tell me if he really cares (Tell me babe) 'Cause I can't give it all away if he won't be here Next year (He won't be here next year) Santa, tell me if you're really there (Tell me) (Tell me baby) Don't make me fall in love again if he won't be here Next year (If he won't be, if he won't be here) Santa, tell me if he really cares (Tell me) (Do you care) 'Cause I can't give it all away if he won't be here (He won't be here next year) Next year."
-}
+  "name": "Nayeon",
+  "text": "Santa, tell me if you're really there Don't make me fall in love again if he won't be here Next year Santa, tell me if he really cares 'Cause I can't give it all away if he won't be here Next year Feeling Christmas all around And I'm tryin' to play it cool But it's hard to focus when I see him walking 'cross the room 'Let It Snow' is blasting out But I won't get in the mood I'm avoiding every mistletoe until I know It's true love that he thinks of So next Christmas I'm not all alone, boy Santa, tell me if you're really there Don't make me fall in love again if he won't be here Next year Santa, tell me if he really cares 'Cause I can't give it all away if he won't be here Next year I've been down this road before Fell in love on Christmas night But on New Year's Day I woke up and he wasn't by my side Now I need someone to hold Be my fire in the cold But it's hard to tell if this is just a fling Or if it's true love that he thinks of So next Christmas I'm not all alone, boy Santa, tell me if you're really there Don't make me fall in love again if he won't be here Next year Santa, tell me if he really cares 'Cause I can't give it all away if he won't be here Next year Oh, I wanna have him beside me like oh-oh-oh On the 25th by the fireplace, oh-oh-oh But I don't want a new broken heart This year I've got to be smart Oh, baby (Santa tell me) If ya won't be, (Santa tell me) if ya won't be here! (Santa tell me) Santa, tell me if you're really there (If you're really there) Don't make me fall in love again if he won't be here Next year (He won't be here next year) Santa, tell me if he really cares (Tell me babe) 'Cause I can't give it all away if he won't be here Next year (He won't be here next year) Santa, tell me if you're really there (Tell me) (Tell me baby) Don't make me fall in love again if he won't be here Next year (If he won't be, if he won't be here) Santa, tell me if he really cares (Tell me) (Do you care) 'Cause I can't give it all away if he won't be here (He won't be here next year) Next year."
+}

src/index.html

@@ -1,13 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Pure CSS Text Portrait powered by CSS Text Portrait created by Waren Gonzaga.">
-</head>
-<body>
-    <p id="text" title="Powered by CSS Text Portrait Builder">Your text portrait here, check your config file.</p>
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Pure CSS Text Portrait powered by CSS Text Portrait created by Waren Gonzaga."
+    />
+  </head>
+  <body>
+    <p id="text" title="Powered by CSS Text Portrait Builder">
+      Your text portrait here, check your config file.
+    </p>
+
     <script type="module" src="./index.js"></script>
-</body>
-</html>
+  </body>
+</html>

src/index.js

@@ -11,13 +11,13 @@ const maxChar = 13500; // max chars to cover screen
 const textCount = data.text.length;
 const textPortrait = document.getElementById('text');
 
-var title = document.createElement("title");
-    title.innerHTML = `${data.name} | CSS Text Portrait`;
+const title = document.createElement('title');
+title.innerHTML = `${data.name} | CSS Text Portrait`;
 
 document.head.appendChild(title);
 
 // apply correct repeat count to text
 for (let i = 0; i * textCount <= maxChar + textCount; i++) {
-    textPortrait.innerHTML = repeatText(data.text+' ', i);
-    console.log(data.text.length * i);
+  textPortrait.innerHTML = repeatText(data.text + ' ', i);
+  console.log(data.text.length * i);
 }

src/js/main.js

@@ -3,7 +3,7 @@
  */
 
 const repeatText = (text, count) => {
-    return text.repeat(count);
-}
+  return text.repeat(count);
+};
 
-export { repeatText };
+export { repeatText };