initial config snowpack vue

Signed-off-by: Try Ajitiono <ballinst@gmail.com>

.gitignore

@@ -0,0 +1,11 @@
+.build
+build
+web_modules
+node_modules
+.env*
+
+# Tailwind output.
+tailwind.css
+
+# OSX.
+.DS_Store

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "none",
+  "printWidth": 80,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Try Ajitiono
+
+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

@@ -0,0 +1,34 @@
+# wysiots
+
+> ✨ Bootstrapped with Create Snowpack App (CSA).
+
+What You See Is Only The Surface (WYSIOTS) is a small interactive site, built with the hope so people will consider it's not always a happy story behind every smile.
+
+## Available Scripts
+
+### npm start
+
+Runs the app in the development mode.
+Open http://localhost:8080 to view it in the browser.
+
+The page will reload if you make edits.
+You will also see any lint errors in the console.
+
+### npm test
+
+**⚠️ NOTE:** Vue 3 testing support is still in progress. This template does not ship with a test runner.
+
+### npm run build
+
+Builds the app for production to the `build/` folder.
+It correctly bundles Vue in production mode and optimizes the build for the best performance.
+
+### Q: What about Eject?
+
+No eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same.
+
+## Image sources
+
+https://www.instagram.com/p/CEgfn3JqlQc/
+https://talksport.com/football/622334/arsenal-offer-granit-xhaka-counselling-outburst-fans-kroenke/
+https://www.telegraph.co.uk/football/2019/10/27/granit-xhaka-wrong-have-standoff-fans-says-unai-emery-captain/

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "wysiots",
+  "version": "0.0.1",
+  "main": "index.js",
+  "repository": "git@github.com:Imballinst/wysiots.git",
+  "author": "Try Ajitiono <ballinst@gmail.com>",
+  "license": "MIT",
+  "scripts": {
+    "start": "snowpack dev",
+    "dev:css": "tailwindcss build tailwind-base.css -o src/tailwind.css",
+    "build": "snowpack build",
+    "test": "echo \"Vue 3.0 test support is still in progress.\" && exit 1"
+  },
+  "dependencies": {
+    "qs": "^6.9.4",
+    "tailwindcss": "^1.7.6",
+    "vue": "^3.0.0-rc.4"
+  },
+  "devDependencies": {
+    "@fullhuman/postcss-purgecss": "^2.3.0",
+    "@snowpack/app-scripts-vue": "^1.8.4",
+    "@snowpack/plugin-build-script": "^2.0.6",
+    "@snowpack/plugin-dotenv": "^2.0.1",
+    "autoprefixer": "^9.8.6",
+    "postcss-cli": "^7.1.1",
+    "snowpack": "^2.9.0"
+  }
+}

postcss.config.js

@@ -0,0 +1,30 @@
+// postcss.config.js
+// Taken from: https://tailwindcss.com/docs/installation#using-tailwind-with-postcss.
+const purgecss = require('@fullhuman/postcss-purgecss')({
+  // Specify the paths to all of the template files in your project
+  content: [
+    './src/**/*.html',
+    './src/**/*.vue',
+    './src/**/*.jsx'
+    // etc.
+  ],
+
+  // This is the function used to extract class names from your templates
+  defaultExtractor: (content) => {
+    // Capture as liberally as possible, including things like `h-(screen-1.5)`
+    const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];
+
+    // Capture classes within other delimiters like .block(class="w-1/2") in Pug
+    const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || [];
+
+    return broadMatches.concat(innerMatches);
+  }
+});
+
+module.exports = {
+  plugins: [
+    require('tailwindcss'),
+    require('autoprefixer'),
+    ...(process.env.NODE_ENV === 'production' ? [purgecss] : [])
+  ]
+};

public/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Web site created using create-snowpack-app" />
+    <title>Snowpack App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <script type="module" src="/_dist_/index.js"></script>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

snowpack.config.json

@@ -0,0 +1,13 @@
+{
+  "extends": "@snowpack/app-scripts-vue",
+  "plugins": [
+    "@snowpack/plugin-dotenv",
+    [
+      "@snowpack/plugin-build-script",
+      { "cmd": "postcss", "input": [".css"], "output": [".css"] }
+    ]
+  ],
+  "proxy": {
+    "/twitter": "https://api.twitter.com"
+  }
+}

src/App.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="bg-green-700 main">
+    <div class="flex mb-4 h-full flex-wrap">
+      <div class="w-1/4 p-2 absolute" v-bind:class="{ clipped: isClipped }">
+        <card
+          :img="img"
+          text="Grind hard, shine hard 🏆😎💪 #GX34 #arsenal #facommunityshield20"
+        />
+      </div>
+      <div class="w-1/4 p-2 absolute" v-bind:class="{ clipped: isClipped }">
+        <card
+          :img="img"
+          text="Grind hard, shine hard 🏆😎💪 #GX34 #arsenal #facommunityshield20"
+        />
+      </div>
+      <div class="w-1/4 p-2 absolute" v-bind:class="{ clipped: isClipped }">
+        <card
+          :img="img"
+          text="Grind hard, shine hard 🏆😎💪 #GX34 #arsenal #facommunityshield20"
+        />
+      </div>
+      <div class="w-1/4 p-2 absolute" v-bind:class="{ clipped: isClipped }">
+        <card
+          :img="img"
+          text="Grind hard, shine hard 🏆😎💪 #GX34 #arsenal #facommunityshield20"
+        />
+      </div>
+      <div class="w-1/4 p-2 absolute" v-bind:class="{ clipped: isClipped }">
+        <card
+          :img="img"
+          text="Grind hard, shine hard 🏆😎💪 #GX34 #arsenal #facommunityshield20"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed, ref } from 'vue';
+import CardVue from './components/Card.vue';
+
+import XhakaImg from './images/xhaka-community-shield.jpg';
+
+export default {
+  components: {
+    card: CardVue
+  },
+  setup() {
+    const isClipped = ref(false);
+
+    function setClipped(value) {
+      isClipped.value = value;
+    }
+
+    setTimeout(() => {
+      setClipped(true);
+    }, 1000);
+
+    return {
+      isClipped: computed(() => isClipped.value)
+    };
+  },
+  data() {
+    return {
+      img: XhakaImg,
+      message: 'Learn Vue'
+    };
+  }
+};
+</script>
+
+<style>
+.main {
+  height: 100vh;
+}
+
+.tweets-raw {
+  text-align: left;
+  max-width: 100%;
+  font-size: 16px;
+  white-space: pre-wrap;
+}
+
+/* Clips. */
+.clipped:nth-child(1) > div {
+  clip-path: polygon(0 0, 29% 77%, 0 100%);
+}
+.clipped:nth-child(2) > div {
+  clip-path: polygon(2% 0%, 29% 70%, 98% 0);
+}
+.clipped:nth-child(3) > div {
+  clip-path: polygon(100% 0, 44% 57%, 100% 50%);
+}
+.clipped:nth-child(4) > div {
+  clip-path: polygon(2% 100%, 31% 77%, 100% 100%);
+}
+.clipped:nth-child(5) > div {
+  clip-path: polygon(100% 53%, 46% 60%, 31% 74%, 100% 98%);
+}
+</style>

src/components/Card.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="max-w-sm rounded overflow-hidden shadow-lg h-full">
+    <img class="w-full image" v-bind:src="img" alt="Sunset in the mountains" />
+    <div class="px-6 py-4 bg-white">
+      <p class="text-gray-700 text-base truncate">{{ text }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    img: String,
+    text: String
+  },
+  data() {
+    return {
+      img: this.img,
+      text: this.text
+    };
+  }
+};
+</script>
+
+<style>
+.image {
+  height: 300px;
+  object-fit: cover;
+}
+</style>

src/index.js

@@ -0,0 +1,15 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import './tailwind.css';
+
+const app = createApp(App);
+app.mount('#app');
+
+// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
+// Learn more: https://www.snowpack.dev/#hot-module-replacement
+if (import.meta.hot) {
+  import.meta.hot.accept();
+  import.meta.hot.dispose(() => {
+    app.unmount();
+  });
+}

tailwind-base.css

@@ -0,0 +1,5 @@
+/* purgecss start ignore */
+@tailwind base;
+@tailwind components;
+/* purgecss end ignore */
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  purge: false,
+  future: {
+    removeDeprecatedGapUtilities: true
+  },
+  theme: {
+    extend: {}
+  },
+  variants: {},
+  plugins: []
+};