Add contribution guide

CONTRIBUTING.md

@@ -0,0 +1,32 @@
+# Thank you! 💜
+
+Thank you for contributing to our awesome resources.
+
+## Todo list
+
+1. Create a valid JSON file in the `/plugins` folder
+2. Name the file as a "kebab case" (something-like-this) version of the title
+3. Add the following keys to the JSON file:
+    1. `id`: an integer number incrementing the current higher plugin id
+    2. `title`: The plugin name followed by a very short description of what's kind of plugin is it (a few words at most)
+    3. `image`: the thumbnail file name (more infos in the next list item)
+    4. `description`: A short description about the plugin, a few keywords are welcome to help the search engine
+    5. `url_github`: Link to Github repo *(Optional as long as there is at least one url)*
+    6. `url_npm`: Link to NPM repo *(Optional as long as there is at least one url)*
+    6. `url_demo`: Link to plugin's website or a demo page *(Optional as long as there is at least one url)*
+4. Add a thumbnail picture in the `/uploads` folder 
+    - PNG, JPG and GIF formats only are authorized for now
+    - Measuring a least 616×390px
+    - Prefixed with the same id you put in the JSON file *(example: 42-mysuperplugin.png)*.
+
+## Guidelines
+
+- **One item** per Pull Request.
+
+- The resource **must** not need any external dependencies (like jQuery, React.js, Vue.js), that's the all point of a vanilla JS plugins.
+
+- The todolist bellow must have been completed.
+
+- *(optional)* Allow modification from maintener, to avoid waisting time if your pull-request only need a few fixes or if the todolist isn't completed
+
+## Thank you! 💜

package-lock.json

@@ -5,7 +5,9 @@
     "requires": true,
     "packages": {
         "": {
+            "name": "vanillalist",
             "version": "1.0.0",
+            "license": "Anti-Fascist MIT License",
             "dependencies": {
                 "@11ty/eleventy": "^0.11.1",
                 "autoprefixer": "^9.8.6",

src/_includes/add-plugin.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="contribute__icon">
+  <g id="Page-1" fill="none" fill-rule="evenodd">
+    <g id="Home" fill="currentColor">
+      <g id="Suggest-a-plugin">
+        <g id="icon">
+          <path class="contribute__iconGrid" id="grid-plugin" d="M1.47 0H20.59c.812 0 1.47.658 1.47 1.47V20.59c0 .812-.658 1.47-1.47 1.47H1.47C.66 22.06 0 21.4 0 20.59V1.47C0 .66.658 0 1.47 0zm1.47 2.94V19.12H19.12V2.94H2.94zm-1.47 25H20.59c.812 0 1.47.66 1.47 1.472V48.53c0 .812-.658 1.47-1.47 1.47H1.47C.66 50 0 49.342 0 48.53V29.41c0-.812.658-1.47 1.47-1.47zm1.47 19.12H19.12V30.88H2.94V47.06zM29.413 0H48.53C49.34 0 50 .658 50 1.47V20.59c0 .812-.658 1.47-1.47 1.47H29.41c-.812 0-1.47-.658-1.47-1.47V1.47C27.94.66 28.6 0 29.41 0zm1.47 19.118H47.06V2.94H30.88V19.12z"></path>
+          <path class="contribute__iconAdd" id="added-plugin" d="M29.412 27.94H48.53c.812 0 1.47.66 1.47 1.472V48.53c0 .812-.658 1.47-1.47 1.47H29.41c-.812 0-1.47-.658-1.47-1.47V29.41c0-.812.658-1.47 1.47-1.47zm1.47 19.12H47.06V30.88H30.88V47.06zm9.56-9.56h2.205c.812 0 1.47.658 1.47 1.47 0 .813-.658 1.47-1.47 1.47H40.44v2.207c0 .812-.657 1.47-1.47 1.47-.812 0-1.47-.658-1.47-1.47V40.44h-2.206c-.812 0-1.47-.657-1.47-1.47 0-.812.658-1.47 1.47-1.47H37.5v-2.206c0-.812.658-1.47 1.47-1.47.813 0 1.47.658 1.47 1.47V37.5z"></path>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

src/_includes/footer.njk

@@ -1,3 +1,13 @@
-<footer class="footer">
+<div class="contribute container">
+    <a class="contribute__box" href="https://github.com/GlitchFamily/vanillalist/blob/main/CONTRIBUTING.md">
+        {% include 'add-plugin.svg' %}
+        <div class="contribute__content">
+            <div class="contribute__title">Want to suggest a plugin?</div>
+            <div class="contribute__subtitle">Submit one on Github <span class="emoji">🤘</spans></div>
+        </div>
+    </a>
+</div>
+
+<footer class="footer container">
     Copyleft ∴ <a href="https://glitch.family">Glitch.Family</a> — This project is <a href="https://github.com/GlitchFamily/vanillalist" rel="noopener">open-source</a> but the plugin's visuals belong to their respective owners
 </footer>

src/sass/4-base/_09-footer.scss

@@ -3,7 +3,8 @@
 /* ----------------------------------------------------------- */
 
 .footer {
-  padding: 6rem 0;
+  padding-top: 6rem;
+  padding-bottom: 6rem;
   color: #737373;
   text-align: center;
 }

src/sass/5-modules/contribute.scss

@@ -0,0 +1,96 @@
+/* ----------------------------------------------------------- */
+/* == contribute box */
+/* ----------------------------------------------------------- */
+
+.contribute {
+  text-align: center;
+}
+
+.contribute__box,
+.contribute__box:link,
+.contribute__box:visited {
+  display: inline-flex;
+  align-items: center;
+  padding: 2.5rem 4rem;
+  color: darken($color-primary, 20);
+  text-align: left;
+  text-decoration: none;
+  background-color: lighten($color-primary, 35);
+  border: .1rem solid lighten($color-primary, 17);
+  border-radius: $btn-radius;
+  box-shadow: $btn-shadow;
+}
+
+.contribute__box:active,
+.contribute__box:focus {
+  outline: none;
+  box-shadow: $focus-ring;
+}
+
+.contribute__icon {
+  flex-shrink: 0;
+  width: 5rem;
+  height: 5rem;
+  margin-right: 3rem;
+}
+
+.contribute__iconGrid {
+  transform-origin: 0% 0%;
+  transition: transform .2s;
+}
+
+.contribute__box:hover .contribute__iconGrid {
+  transform: scale(0);
+}
+
+.contribute__iconAdd {
+  transform-origin: 100% 100%;
+  transition: transform .2s;
+}
+
+.contribute__box:hover .contribute__iconAdd {
+  transform: scale(2.25);
+}
+
+.contribute__title {
+  font-weight: bold;
+}
+
+.contribute__subtitle {
+  color: #737373;
+}
+
+.contribute__box:hover .contribute__subtitle {
+  text-decoration: underline;
+}
+
+.contribute__box:hover .contribute__content .emoji {
+  display: inline-block;
+  animation: 'emoji-shake';
+  animation-duration: 1s;
+  animation-fill-mode: both;
+}
+
+
+@keyframes emoji-shake {
+
+  from,
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translate3d(-5px, 0, 0);
+  }
+
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translate3d(5px, 0, 0);
+  }
+}

src/sass/style.scss

@@ -63,6 +63,7 @@
 
 @import '5-modules/plugin-list';
 @import '5-modules/plugin';
+@import '5-modules/contribute';
 
 
 // --------------------------------------------------------------