Initial commit

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc

@@ -0,0 +1,8 @@
+{
+  "env": {
+    "node": true
+  },
+  "extends": [
+   "galexia"
+  ]
+}

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

.gitignore

@@ -0,0 +1,102 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+# sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp
+
+# Local Netlify folder
+.netlify
+
+# Yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.nvmrc

@@ -0,0 +1 @@
+18.12.0

.stylelintignore

@@ -0,0 +1,4 @@
+# ignore all files except .scss and .vue files
+#*
+!*.scss
+!*.vue

.stylelintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-galexia"
+}

.vscode/extensions.json

@@ -0,0 +1,15 @@
+{
+    "recommendations": [
+        "stylelint.vscode-stylelint",
+        "phoenisx.cssvar",
+        "mikestead.dotenv",
+        "dbaeumer.vscode-eslint",
+        "wix.vscode-import-cost",
+        "zignd.html-css-class-completion",
+        "sburg.vscode-javascript-booster",
+        "jamesqquick.netlify-toml-snippets",
+        "gencer.html-slim-scss-css-class-completion",
+        "mrmlnc.vscode-scss",
+        "octref.vetur"
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.stylelint": true,
+    "source.fixAll.eslint": true,
+    "source.fixAll": true
+  }
+}

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-3.6.3.cjs

README.md

@@ -0,0 +1,44 @@
+# Galexia Nuxt Component Date
+
+## Install
+
+### Pre-Requisites
+
+We assume you have a Nuxt project.
+
+### You can now install this package
+
+```bash
+yarn add https://github.com/Galexia-Agency/nuxt-component-date
+```
+
+```js
+// plugins/galexia/nuxt-components/date.js
+import Vue from 'vue'
+import Galexia_NuxtComponent_Date from 'nuxt-component-date/index.vue'
+
+Vue.component('GalexiaDate', Galexia_NuxtComponent_Date)
+```
+
+```js
+// nuxt.config.js
+...
+plugins: [
+  '~plugins/galexia/components/date.js'
+],
+...
+```
+
+### And use it like so
+
+```js
+// pages/index.js
+<GalexiaDate
+  class="post__date"
+  :date="post.date"
+  day-text-color="#ffffff"
+  day-background-color="#000000"
+  month-year-text-color="#ffffff"
+  month-year-background-color="#333333"
+/>
+```

index.vue

@@ -0,0 +1,98 @@
+<style scoped>
+.date {
+  grid-row: span 3;
+  grid-column: 1;
+  margin-top: 8px;
+  text-align: center
+}
+.day {
+  display: grid;
+  width: 65px;
+  height: 40px;
+  color: var(--dayTextColor);
+  font-size: 1.5rem;
+  font-style: italic;
+  background-color: var(--dayBackgroundColor);
+  place-items: center
+}
+.monthYear {
+  width: 65px;
+  height: 48px;
+  margin-top: -1px;
+  padding-top: 4px;
+  color: var(--monthYearTextColor);
+  background-color: var(--monthYearBackgroundColor);
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%)
+}
+@media (max-width: 576px) {
+  .date {
+    margin-bottom: 1rem
+  }
+}
+</style>
+<template>
+  <div
+    class="date"
+    :style="`
+      --dayTextColor: ${dayTextColor};
+      --dayBackgroundColor: ${dayBackgroundColor};
+      --monthYearTextColor: ${monthYearTextColor};
+      --monthYearBackgroundColor: ${monthYearBackgroundColor};
+    `"
+  >
+    <div class="day" v-text="getDay(date)" />
+    <div class="monthYear" v-text="`${getMonth(date)} '${getYear(date)}`" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GalexiaNuxtComponentDate',
+  props: {
+    date: {
+      type: Date,
+      required: true
+    },
+    dayTextColor: {
+      type: String,
+      required: true
+    },
+    dayBackgroundColor: {
+      type: String,
+      required: true
+    },
+    monthYearTextColor: {
+      type: String,
+      required: true
+    },
+    monthYearBackgroundColor: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    getDay (date) {
+      return date.getDate()
+    },
+    getMonth (date) {
+      const monthArr = []
+      monthArr[0] = 'Jan'
+      monthArr[1] = 'Feb'
+      monthArr[2] = 'Mar'
+      monthArr[3] = 'Apr'
+      monthArr[4] = 'May'
+      monthArr[5] = 'Jun'
+      monthArr[6] = 'Jul'
+      monthArr[7] = 'Aug'
+      monthArr[8] = 'Sep'
+      monthArr[9] = 'Oct'
+      monthArr[10] = 'Nov'
+      monthArr[11] = 'Dec'
+      return monthArr[date.getMonth()]
+    },
+    getYear (date) {
+      return date.getFullYear().toString().substring(2)
+    }
+  }
+}
+</script>

jsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./*"],
+      "@/*": ["./*"],
+      "~~/*": ["./*"],
+      "@@/*": ["./*"]
+    }
+  },
+  "exclude": ["node_modules", ".nuxt", "dist"]
+}

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "nuxt-component-date",
+  "version": "1.0.0",
+  "description": "A Nuxt Date Component",
+  "main": "index.vue",
+  "scripts": {
+    "lint:scripts": "eslint --ext .js,.vue --ignore-path .gitignore .",
+    "fix:scripts": "eslint --ext .js,.vue --ignore-path .gitignore . --fix",
+    "lint:styles": "stylelint \"**/*.{vue,scss}\"",
+    "fix:styles": "stylelint \"**/*.{vue,scss}\" --fix"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Galexia-Agency/nuxt-component-date.git"
+  },
+  "author": "Galexia Creative Agency Ltd",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Galexia-Agency/nuxt-component-date/issues"
+  },
+  "homepage": "https://github.com/Galexia-Agency/nuxt-component-date#readme",
+  "devDependencies": {
+    "eslint": "^7.29.0",
+    "eslint-config-galexia": "https://github.com/Galexia-Agency/eslint-config",
+    "stylelint": "^15.3.0",
+    "stylelint-config-galexia": "https://github.com/Galexia-Agency/stylelint-config"
+  },
+  "engines": {
+    "yarn": "^1.10"
+  },
+  "packageManager": "[email protected]"
+}