Commit c3cd3bec authored by Zach Krall's avatar Zach Krall

updated index page and new content

parent 67574d1f
Pipeline #129748782 passed with stages
in 1 minute and 29 seconds
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CopyWebpackPlugin = require("copy-webpack-plugin");
const Settings = require("../global_settings.js");
module.exports = {
title: 'LiveCode.NYC',
description: '',
title: "LiveCode.NYC",
description: "",
dest: './public/',
dest: "./public/",
themeConfig: {
repo: 'https://gitlab.com/livecodenyc/livecodenyc.gitlab.io',
mailingList: 'https://groups.google.com/forum/#!forum/livecodenyc',
social: [
{ url: 'https://twitter.com/livecodenyc', title: 'Twitter' },
{ url: 'https://instagram.com/livecodenyc', title: 'Instagram' },
{ url: 'https://www.facebook.com/livecodenyc', title: 'Facebook'},
{ url: 'https://gitlab.com/livecodenyc', title: 'GitLab' }
],
footerLinks: [
{ path: '/how-to-edit', title: 'How to Submit Edits' },
{ path: '/design', title: 'Design Assets' },
{ path: '/coc', title: 'Code of Conduct' }
]
},
themeConfig: {
repo: "https://gitlab.com/livecodenyc/livecodenyc.gitlab.io",
mailingList: Settings.mailingList,
discord: Settings.discord,
social: Settings.social,
navLinks: Settings.navLinks,
footerLinks: Settings.footerLinks
},
markdown: {
anchor: {
permalink: true,
permalinkBefore: false,
permalinkSymbol: ''
}
},
configureWebpack: (config, isServer) => {
return {
plugins: [
new CopyWebpackPlugin([
{ from: 'image', to: 'image' }
])
]
}
markdown: {
anchor: {
permalink: true,
permalinkBefore: false,
permalinkSymbol: ""
}
}
\ No newline at end of file
},
configureWebpack: (config, isServer) => {
return {
plugins: [new CopyWebpackPlugin([{ from: "image", to: "image" }])]
};
}
};
<template>
<div class="theme-container">
<Nav/>
<HeroVideo v-if="this.$page.path == '/'"/>
<div class="theme-container">
<Nav />
<div class="container">
<component :is="layout"/>
<Footer/>
<!-- If Index Page, show Index page Component -->
<div v-if="this.$page.path == '/'">
<Index />
</div>
<!-- Otherwise -->
<div v-else>
<component :is="layout" />
</div>
<Footer />
</div>
</div>
</div>
</template>
<script>
import HeroVideo from './components/HeroVideo.vue';
import Nav from './components/Nav.vue';
import Footer from './components/Footer.vue';
import Nav from "./components/Nav.vue";
import Footer from "./components/Footer.vue";
import EventList from './views/EventList.vue';
import EventPage from './views/EventPage.vue';
import ToolList from './views/ToolList.vue';
import MemberList from './views/MemberList.vue';
import MemberPage from './views/MemberPage.vue';
import EventList from "./views/EventList.vue";
import EventPage from "./views/EventPage.vue";
import ToolList from "./views/ToolList.vue";
import MemberList from "./views/MemberList.vue";
import MemberPage from "./views/MemberPage.vue";
import Page from './views/Page.vue';
import Page from "./views/Page.vue";
import Index from "./views/Index.vue";
export default {
name: 'layout',
components: {
Nav,
Footer,
Page,
MemberList,
MemberPage,
ToolList,
HeroVideo,
EventList,
EventPage
},
computed: {
layout(){
// This is where routing happens
const path = this.$page.path;
if (path.includes('/members')){
return 'MemberList';
} else if (path.includes('/member')){
return 'MemberPage';
} else if (path.includes('/events')){
return 'EventList';
} else if (path.includes('/event')){
return 'EventPage';
} else if (path.includes('/tools')){
return 'ToolList';
} else if (path.includes('/act')){
return 'MemberPage';
}
return 'Page';
}
name: "layout",
components: {
Index,
Nav,
Footer,
Page,
MemberList,
MemberPage,
ToolList,
EventList,
EventPage
},
computed: {
layout() {
// This is where routing happens
const path = this.$page.path;
if (path.includes("/members")) {
return "MemberList";
} else if (path.includes("/member")) {
return "MemberPage";
} else if (path.includes("/events")) {
return "EventList";
} else if (path.includes("/event")) {
return "EventPage";
} else if (path.includes("/tools")) {
return "ToolList";
} else if (path.includes("/act")) {
return "MemberPage";
}
return "Page";
}
}
}
};
</script>
<style>
@import './style/main.styl';
</style>
\ No newline at end of file
@import "./style/main.css";
body {
/*
I know this looks bad but it apparently helps
with an iOS view height resizing issue
*/
overflow: none;
}
@media screen and (min-width: 700px) {
body {
padding-left: 20vw;
}
}
@media screen and (max-width: 700px) {
.container::before {
content: " ";
display: block;
padding-top: calc(var(--padding) * 2);
height: 2.6em;
}
}
</style>
<template>
<footer>
<footer>
<div>
<h3>Information</h3>
<ul>
<li><a v-bind:href="data.mailingList">Mailing List</a></li>
<li v-for="link in data.footerLinks">
<a v-bind:href="link.path">{{ link.title }}</a>
</li>
</ul>
</div>
<div>
<h3>Information</h3>
<ul>
<li><a v-bind:href="data.mailingList">Mailing List</a></li>
<li v-for="link in data.footerLinks">
<a v-bind:href="link.path">{{link.title}}</a>
</li>
</ul>
</div>
<div>
<h3>Social</h3>
<ul>
<li v-for="link in data.social">
<a :href="link.url">{{ link.title }}</a>
</li>
</ul>
</div>
<div>
<h3>Social</h3>
<ul>
<li v-for="link in data.social"><a :href="link.url">{{link.title}}</a></li>
</ul>
</div>
<div>
<h3>Site</h3>
<ul>
<li>
<a v-bind:href="data.repo + '/issues'">Report Issue with Site</a>
</li>
<li><a href="https://vuepress.vuejs.org">Built with VuePress</a></li>
<li><a href="https://zachkrall.com">Theme by Zach Krall</a></li>
</ul>
</div>
<div>
<h3>Site</h3>
<ul>
<li><a v-bind:href="data.repo + '/issues'">Report Issue with Site</a></li>
<li><a href="https://vuepress.vuejs.org">Built with VuePress</a></li>
<li><a href="https://zachkrall.com">Theme by Zach Krall</a></li>
</ul>
</div>
<div class="full">
&copy; Copyright {{ data.year }} LiveCode.NYC
</div>
</footer>
<div class="full">&copy; Copyright {{ data.year }} LiveCode.NYC</div>
</footer>
</template>
<script>
export default {
name: "Footer",
computed: {
data() {
let theme = this.$site.themeConfig;
name: "Footer",
computed: {
data() {
let theme = this.$site.themeConfig;
return {
year: (new Date()).getFullYear(),
repo: theme.repo,
social: theme.social,
mailingList: theme.mailingList,
footerLinks: theme.footerLinks
};
}
return {
year: new Date().getFullYear(),
repo: theme.repo,
social: theme.social,
mailingList: theme.mailingList,
footerLinks: theme.footerLinks
};
}
}
}
};
</script>
<style>
footer{
margin-top:3rem;
padding-bottom: 2rem;
}
footer > div {
padding:var(--padding);
display:inline-block;
vertical-align:top;
}
footer > div.full{
display:block;
max-width:100%;
}
footer h3{
font-size:inherit;
opacity:0.4;
font-weight:normal;
}
footer ul{
list-style:none;
margin:0;
}
footer ul li a {
color:var(--text);
}
footer ul li a:hover{
color:var(--color);
}
</style>
\ No newline at end of file
<style scoped>
footer {
margin-top: 1.5rem;
padding-bottom: 2rem;
}
footer > div {
padding: var(--padding);
display: inline-block;
vertical-align: top;
}
footer > div.full {
display: block;
max-width: 100%;
}
footer h3 {
font-size: inherit;
opacity: 0.4;
font-weight: normal;
}
footer ul {
list-style: none;
margin: 0;
}
footer ul li a {
color: var(--text);
}
footer ul li a:hover {
color: var(--color);
}
</style>
<template>
<div v-if="data.show" class="herovideo">
<div class="container">
<h1 v-if="data.title">{{data.title}}</h1>
<h2 v-if="data.subtitle">{{data.subtitle}}</h2>
</div>
<video id="header-video"
v-bind:src="$withBase(data.video)"
playsinline=""
muted="true"
autoplay="true"
loop="true">
</video>
</div>
<div id="hero-container">
<video
id="hero-video"
v-bind:src="$withBase(data.video)"
playsinline=""
muted="true"
autoplay="true"
loop="true"
controls
></video>
</div>
</template>
<script>
export default {
name: "HeroVideo",
computed: {
data () {
let page = this.$page.frontmatter.hero;
let display = this.$page.frontmatter.hero ? true : false;
return {
show: display,
title: page.title,
subtitle: page.subtitle,
video: page.video_src
}
}
}
}
name: "HeroVideo",
computed: {
data() {
let page = this.$page.frontmatter.hero;
let display = this.$page.frontmatter.hero ? true : false;
return {
show: display,
title: page.title,
subtitle: page.subtitle,
video: page.video_src
};
}
}
};
</script>
<style>
.herovideo{
width:100%;height:100%;
overflow:hidden;
position:relative;
margin-bottom: 1rem;
}
.herovideo video{
position:absolute;
top:0;left:0;
width:100%;height:auto;
z-index:-1;
}
.herovideo .container{
height:100%;width:100%;
min-height: calc(100vw * 9 / 16);
padding:var(--padding);
display:flex;
align-items:left;
justify-content:center;
flex-direction:column;
flex-wrap:wrap;
}
.herovideo h1,
.herovideo h2{
transition: 0.4s ease all;
}
.herovideo h1{
display:inline-block;
color:var(--text);
font-weight:bold;
line-height:0.9;
}
.herovideo h2{
font-weight:normal;
}
@media screen and (min-width: 1200px){
.herovideo h1{
transform: translate(0px, -10vh);
font-size: 3rem;
}
.herovideo h2{
transform: translate(0px, -10vh);
font-size: 2.5rem;
}
}
@media screen and (max-width: 800px){
.herovideo h1{
font-size: 1.6rem;
}
.herovideo h2{
font-size: 1.2rem;
}
}
.herovideo h1,.herovideo h2{
text-shadow: 0px 0px 10px rgba(0,0,0,1.0);
}
</style>
\ No newline at end of file
<style scoped>
#hero-container {
position: relative;
width: 100%;
height: 0px;
overflow: hidden;
padding-bottom: 56%;
margin-bottom: calc(var(--padding) * 2);
}
#hero-video {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<template>
<nav>
<a href="/" class="nostyle"><img id="logo" :src="$withBase('/media/logo-white.svg')" alt="LiveCode.NYC Logo" height="100"/></a>
<ul class="reset">
<li><a href="/events.html">Events</a></li>
<li><a href="/members.html">Members</a></li>
<li><a href="/tools.html">Tools</a></li>
<li><a href="/contact.html">Contact</a></li>
<nav :class="{ closed, open }" tabindex="1">
<ul>
<li id="logo" ref="logo">
<a href="/" class="nostyle"
><img
:src="$withBase('/media/logo-white.svg')"
alt="LiveCode.NYC Logo"
/></a>
</li>
<li class="link" v-for="(link, key) in navLinks" :key="link + key">
<a :href="link.path">{{ link.title }}</a>
</li>
<li class="link" style="margin-top:1em;">
<Pill color="#7289DA" :src="this.$themeConfig.discord"
>Join Discord</Pill
>
</li>
</ul>
</nav>
<button
id="mobile-menu"
ref="mobilemenu"
v-on:click="toggleNav"
tabindex="2"
>
<div></div>
</button>
</nav>
</template>
<script>
import Pill from "../ui/Pill.vue";
export default {
name: "Nav",
components: { Pill },
data() {
return {
closed: true,
open: false
};
},
computed: {
navLinks() {
let links = this.$themeConfig.navLinks;
return links;
}
},
methods: {
toggleNav() {
this.closed = !this.closed;
this.open = !this.open;
}
if (this.open) {
console.log(this.$refs.mobilemenu);
this.$refs.mobilemenu.focus();
}
}
}
};
</script>
<style>
nav{
padding: var(--padding);
display:flex;
justify-content:space-between;
align-items:center;
<style scoped>
nav {
padding: var(--padding);
background: var(--background);
background:var(--background);
position: fixed;
top: 0;
left: 0;