Initial commit

.env-example

@@ -0,0 +1,3 @@
+SITE_NAME='NTN Boilerplate'
+URL='https://ntn-boilerplate.netlify.app'
+GIT_LFS_ENABLED=true

.gitattributes

@@ -0,0 +1 @@
+static/img/** filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,91 @@
+# 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
+.editorconfig
+
+# Service worker
+sw.*
+
+# Mac OSX
+.DS_Store
+
+# Vim swap files
+*.swp

.prettierignore

@@ -0,0 +1 @@
+_reset.scss

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 120
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": true
+}

README.md

@@ -0,0 +1,107 @@
+# 🏗️ Boilerplate for Nuxt, Tailwind & NetlifyCMS
+
+An opinionated starter template for a quick start with the following technologies up on a site after only 5 minutes!
+
+## 🔋 Batteries included
+
+- Vue 2
+- Vuex
+- Nuxt.js (in "universal mode", where both SEO and speed is great)
+- SCSS
+- Tailwind
+- PurgeCSS (removes unused CSS-selectors)
+- Dark mode & custom ColorModePicker (Set to "dark mode first")
+- PWA (install website as standalone app)
+- Netlify CMS (no need for a separate server)
+- Git LFS (store uploaded images outside the main repo)
+- Netlify LM (Netlify’s Git LFS support)
+- Prettier
+
+## 🎉 Getting Started
+
+1. [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/knogobert/nuxt-tailwind-netlifycms-boilerplate)
+
+2. Git clone the repo
+
+3. Install git-lfs
+
+---
+
+### Personalize setup
+
+1. Copy and change the .env-file
+
+   - `cp .env-example .env`
+   - Then change the values
+
+2. Change the value on these lines
+
+   - `static/admin/config.yml:1` — `site_url`
+   - `static/admin/config.yml:2` — `logo_url`
+   - `content/site/info.json` — `sitename`, `sitedescription` & `sitelang`
+   - `package.json:1` — `name`, `description`, `author` & `repository.url`
+
+3. Change colors, content & content collections
+
+   - Colors are managed in `assets/scss/_vars.scss` & `tailwind.config.js`
+   - Content is managed mainly in [local Netlify CMS](http://localhost:3000/admin) or by hand in `assets/content`
+   - Content collections are managed in `static/admin/config.yml`, then added to vuex store in `store/index.js`
+
+### Setup Netlify
+
+#### Identity
+
+Make sure to set to registration only here:
+Then when you create your first account, _don’t_ sign up using OAuth, generate a new password and sign in that way locally, otherwise a successful login will send you to the URL you typed in instead of keeping you on localhost.
+
+---
+
+1. 📦 Install dependencies.
+
+```bash
+npm install
+```
+
+2. 🏗 Run the project for local dev. This will start a hot-reloading server at `localhost:3000`.
+
+```bash
+npm run dev
+```
+
+3. 🌌 Build the app for server-side rendered deployment. See more about **Universal SSR** in the [Nuxt.js docs](https://nuxtjs.org/guide#server-rendered-universal-ssr-).
+
+```bash
+npm run build
+
+# And to serve that deployment...
+npm run start
+```
+
+4. ⚡️ Generate a fully pre-rendered static site. See more [in the docs](https://nuxtjs.org/guide#static-generated-pre-rendering-).
+
+```bash
+npm run generate
+```
+
+> This project was bootstrapped with `create-nuxt-app`. There are more detailed explanations of how everything works in the [Nuxt.js docs](https://nuxtjs.org).
+
+---
+
+Originally based on [Henry Desroches' nuxt-netlify-cms-starter](https://github.com/xdesro/nuxt-netlify-cms-starter).
+
+Deployed easily with the same boilerplate via:
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/xdesro/nuxt-netlify-cms-starter)
+
+(Don’t forget to set the env var `GIT_LFS_ENABLED` to `true` on your netlify site for LFS to work)
+
+---
+
+## Troubleshooting
+
+1. > I added a CSS class, but it doesn't show
+
+   - It is most likely purged by PurgeCSS, make sure it is whitelisted in `purgeCSS` in `nuxt.config.js`
+
+2. > This repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting .git/hooks/pre-push.
+
+   - Install git-lfs, run `git lfs install` in project root

assets/README.md

@@ -0,0 +1,7 @@
+# ASSETS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

assets/content/blog/2020-09-08-blog-test.json

@@ -0,0 +1,6 @@
+{
+  "title": "Blog test",
+  "date": "2020-09-08T06:00:00.000Z",
+  "description": "Ipsa natus aliquid ",
+  "body": "## some Post\n\n### Some subheader\n\nLorem ipsum dolor websites amet.\n\n> A blockquote from a wise person."
+}

assets/content/projects/story-test-story-1.json

@@ -0,0 +1,7 @@
+{
+  "date": "2020-09-08T20:35:29.027Z",
+  "project_type": "story",
+  "title": "Test story 1",
+  "description": "Short descriptive text",
+  "body": "Longer **markdown**-*enabled* content text."
+}

assets/content/site/info.json

@@ -0,0 +1,5 @@
+{
+  "sitename": "NTN Boilerplate",
+  "sitedescription": "NTN Boilerplate description",
+  "sitelang": "en-US"
+}

assets/css/tailwind.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';

assets/scss/_btns.scss

@@ -0,0 +1,27 @@
+.btn {
+  @apply text-center rounded py-2 px-4 border border-white text-accent;
+  &:hover {
+    @apply border-gray-200 bg-accent-600 text-white;
+  }
+
+  &--active {
+    @apply text-white bg-accent border-accent;
+    &:hover {
+      @apply bg-primary-600;
+    }
+  }
+  &--disabled,
+  &[disabled='true'],
+  :disabled {
+    @apply text-gray-400 cursor-not-allowed;
+  }
+}
+
+.light-mode {
+  .btn {
+    @apply border-white text-accent;
+    &:hover {
+      @apply border-gray-200 bg-accent-600 text-white;
+    }
+  }
+}

assets/scss/_globals.scss

@@ -0,0 +1,13 @@
+html {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  padding: env(safe-area-inset);
+}
+
+body {
+  background-color: var(--bg);
+  color: var(--text);
+  @apply transition-colors duration-200 ease-in-out;
+}

assets/scss/_grid.scss

@@ -0,0 +1,49 @@
+.container {
+  min-height: 100vh;
+  padding-top: 56px; // header height
+  @apply my-0 mx-auto flex justify-center items-start text-center flex-col;
+}
+
+.main {
+  @apply w-full max-w-5xl mx-auto px-8 py-2 flex-auto;
+}
+
+.articles {
+  @apply text-left w-full py-4 rounded-lg;
+  .article {
+    @apply max-w-5xl mx-auto px-4 py-2 rounded border border-solid border-primary;
+
+    &.article--clickable {
+      &:hover {
+        @apply border-primary-300 bg-primary-800 bg-opacity-25;
+      }
+    }
+  }
+}
+.article {
+  @apply text-left block w-full duration-100;
+
+  .article-title {
+    @apply font-bold text-2xl;
+  }
+}
+
+.cover-image {
+  max-height: 500px;
+  @apply w-full object-cover my-4;
+}
+
+//* LIGHT MODE
+.light-mode {
+  .articles {
+    .article {
+      @apply border-primary-400;
+
+      &.article--clickable {
+        &:hover {
+          @apply border-primary-300 bg-primary-200 bg-opacity-25;
+        }
+      }
+    }
+  }
+}

assets/scss/_icons.scss

@@ -0,0 +1,23 @@
+.icon {
+  background-color: var(--bg-secondary);
+  border: 2px solid var(--border-color);
+  @apply relative m-0 p-2 top-0 cursor-pointer rounded transition-all duration-200 ease-in-out;
+
+  &:hover {
+    transform: translateY(-1px);
+    border-color: var(--border-color-secondary);
+  }
+  &.selected {
+    color: var(--color-primary);
+  }
+}
+.light-mode {
+  .icon {
+    background-color: var(--bg);
+    border-color: var(--border-color-secondary);
+
+    &:hover {
+      border-color: var(--border-color);
+    }
+  }
+}