housekeeping, style update

.gitattributes

@@ -0,0 +1,78 @@
+# Apply override to all files in the directory
+*.md linguist-detectable
+
+# Auto detect text files and perform LF normalization
+* text=auto eol=lf
+
+# The above will handle all files NOT found below
+# Documents
+*.doc      diff=astextplain
+*.DOC      diff=astextplain
+*.docx     diff=astextplain
+*.DOCX     diff=astextplain
+*.dot      diff=astextplain
+*.DOT      diff=astextplain
+*.pdf      diff=astextplain
+*.PDF      diff=astextplain
+*.rtf      diff=astextplain
+*.RTF      diff=astextplain
+*.md       text diff=markdown
+*.mdx      text diff=markdown
+*.tex      text diff=tex
+*.adoc     text
+*.csv      text
+*.txt      text
+*.sql      text
+*.epub     diff=astextplain
+
+# Graphics
+*.png      binary
+*.jpg      binary
+*.jpeg     binary
+*.gif      binary
+*.tif      binary
+*.tiff     binary
+*.ico      binary
+# SVG treated as text by default.
+*.svg    binary
+# If you want to treat it as binary,
+# use the following line instead.
+# *.svg      text
+*.eps      binary
+
+# Scripts
+*.bash     text eol=lf
+*.sh       text eol=lf
+# These are explicitly windows files and should use crlf
+*.bat      text eol=crlf
+*.cmd      text eol=crlf
+*.ps1      text eol=crlf
+
+# Serialisation
+*.json     text
+*.toml     text
+*.xml      text
+*.yaml     text
+*.yml      text
+
+# Archives
+*.7z       binary
+*.gz       binary
+*.tar      binary
+*.tgz      binary
+*.zip      binary
+
+# Text files where line endings should be preserved
+*.patch    -text
+
+# Lua Source files
+*.lua       text
+
+# Luadoc output
+*.html      text diff=html
+*.css       text diff=css
+
+# Exclude files from exporting
+.gitattributes export-ignore
+.gitignore     export-ignore
+.gitkeep       export-ignore

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Miguel Pimentel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -6,10 +6,20 @@
 <img src="https://img.shields.io/amo/dw/newtab-notes@semanticdata" />
 <img src="https://img.shields.io/amo/users/newtab-notes@semanticdata" />
 <!-- <img src="https://img.shields.io/github/license/semanticdata/firefox-new-tab-notes" /> -->
-<br>
-Firefox extension that transforms the New Tab into a minimalist, auto-saving text editor.
 </p>
 
+## Overview
+
+Firefox extension that transforms the New Tab into a minimalist, auto-saving text editor.
+
+## Features
+
+- Integrates Firefox Sync. Access your notes across browser instances.
+- Dark/Light themes and toggle.
+- Autosaves your content after every keystroke.
+- Uses [Bulma](https://bulma.io/) for styling.
+- Uses [Fira Code](https://github.com/tonsky/FiraCode) as default font.
+
 ## Screenshots
 
 ![screenshot light theme](screenshot.png)

manifest.json

@@ -7,7 +7,7 @@
       "strict_min_version": "100.0"
     }
   },
-  "version": "0.5.0",
+  "version": "1.0.0",
   "author": "semanticdata",
   "icons": {
     "48": "src/icon48.png"
@@ -23,12 +23,5 @@
     "browser_style": true,
     "default_title": "New Tab Notes",
     "default_popup": "src/newtab.html"
-  },
-  "commands": {
-    "_execute_browser_action": {
-      "suggested_key": {
-        "default": "Ctrl+Y"
-      }
-    }
   }
 }

src/newtab.html

@@ -1,11 +1,12 @@
 <!DOCTYPE html>
-<html data-theme="light">
+
+<html lang="en" data-theme="light">
 
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-  <title>📝 New Tab Notes</title>
+  <title>New Tab Notes</title>
   <link rel="icon" type="image/png" sizes="48x48" href="icon48.png">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
   <link rel="stylesheet" href="styles.css">
@@ -20,25 +21,24 @@
 </head>
 
 <body>
-
   <nav class="navbar container">
     <div class="navbar-brand">
-      <h1 class="title">📝 New Tab Notes</h1>
+      <h1 class="nav-title">📝 New Tab Notes</h1>
     </div>
 
     <div class="navbar-end">
-      <button class="toggle" type="button" data-theme-toggle aria-label="Change to light theme">Change to light theme
+      <button type="button" data-theme-toggle aria-label="Change to light theme">Change to light theme
       </button>
     </div>
   </nav>
 
   <main class="container">
-    <textarea class="textarea" id="notes" placeholder="Write something..."></textarea>
+    <textarea class="textarea" id="notes" rows="" placeholder="Write something..."></textarea>
   </main>
 
   <footer class="footer container">
     <p>Made with <a class="heart" href="https://github.com/semanticdata/firefox-new-tab-notes">❤</a> by <a
-        href="https://github.com/semanticdata">SemanticData</a>.
+        href="https://github.com/semanticdata">semanticdata</a>.
     </p>
   </footer>
 

src/styles.css

@@ -12,16 +12,30 @@
   --accent-color: #e0b0ff;
 }
 
+html {
+  background: inherit;
+}
+
 body {
-  box-sizing: border-box;
-  padding: 1rem;
-  height: 100vh;
   background: var(--bkg-color);
   color: var(--text-color);
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: 1rem;
+  max-width: 750px;
+  margin: 0 auto;
 }
 
 main {
-  padding-top: 1rem;
+  padding: 1rem;
+  height: 80vh;
+}
+
+button {
+  background: inherit;
+  border: none;
+  cursor: pointer;
+  font-size: 24px;
 }
 
 a {
@@ -31,36 +45,30 @@ a {
 a:hover {
   color: var(--text-color);
   text-decoration: underline;
-  filter: brightness(80%);
 }
 
-/* #notes {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-} */
-
 .textarea {
   font-family: "Fira Mono", monospace;
-  border-radius: 10px;
-  line-height: 1.75rem;
-  height: calc(100vh - 1rem);
   background: var(--alt-color);
   color: var(--text-color);
-  padding: 1rem 2rem;
+  min-height: 100%;
+  padding: 1rem;
 }
 
 .textarea::placeholder {
-  filter: opacity(0.5);
   color: var(--text-color);
 }
 
 .navbar {
   background: inherit;
+  display: flex;
+  justify-content: space-between;
 }
 
-.title {
-  color: inherit;
+.nav-title {
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.75;
 }
 
 .footer {
@@ -69,16 +77,10 @@ a:hover {
   padding-top: 1rem;
   padding-bottom: 1rem;
   text-align: right;
-}
-
-.toggle {
-  background: var(--bkg-color);
-  border: 0;
-  cursor: pointer;
-  font-size: 24px;
+  font-size: 12px;
 }
 
 .heart:hover {
   text-decoration: none;
   color: red;
-}
+}

src/tabnotes.js

@@ -33,10 +33,10 @@ function getBrowser() {
 
 function saveToDB() {
   data = {
-    tab_note: document.querySelector("#notes").value
+    tab_note: document.querySelector("#notes").value,
   };
   if (browser_type === "Chrome") {
-    chrome.storage.sync.set(data, function () { });
+    chrome.storage.sync.set(data, function () {});
   } else {
     browser_obj.storage.sync.set(data);
   }
@@ -50,7 +50,7 @@ function tabOpen(tab) {
       }
     });
   } else {
-    browser_obj.storage.sync.get(["tab_note"]).then(result => {
+    browser_obj.storage.sync.get(["tab_note"]).then((result) => {
       if (typeof result.tab_note !== "undefined") {
         document.querySelector("#notes").value = result.tab_note;
       }

src/toggle.js

@@ -1,8 +1,11 @@
 /* * Function to calculate current theme setting.
-   * Look for a local storage value.
-   * Fall back to system setting.
-   * Fall back to light mode. */
-function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) {
+ * Look for a local storage value.
+ * Fall back to system setting.
+ * Fall back to light mode. */
+function calculateSettingAsThemeString({
+  localStorageTheme,
+  systemSettingDark,
+}) {
   if (localStorageTheme !== null) {
     return localStorageTheme;
   }
@@ -36,7 +39,10 @@ const localStorageTheme = localStorage.getItem("theme");
 const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
 
 /* 2. Work out the current site settings */
-let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, systemSettingDark });
+let currentThemeSetting = calculateSettingAsThemeString({
+  localStorageTheme,
+  systemSettingDark,
+});
 
 /* 3. Update the theme setting and button text accoridng to current settings */
 updateButton({ buttonEl: button, isDark: currentThemeSetting === "dark" });
@@ -51,4 +57,4 @@ button.addEventListener("click", (event) => {
   updateThemeOnHtmlEl({ theme: newTheme });
 
   currentThemeSetting = newTheme;
-});
+});