Skip to content
Snippets Groups Projects
Commit 2860f8e0 authored by xaralis's avatar xaralis
Browse files

More ongoing fixes

parent ffde5226
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 247 additions and 105 deletions
gulpfile.js
+ 11
− 6
View file @ 2860f8e0
......@@ -33,12 +33,17 @@ const postcssPurgecss = require("@fullhuman/postcss-purgecss")({
],
defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
whitelistPatterns: [
/^w-\d/,
/^h-\d/,
/^max-w-*/,
/^elevation-\d/,
/^text-*/,
/^ico--*/,
/(sm|md|lg|xl)?(\\:)?w-\d\d?$/, // width
/(sm|md|lg|xl)?(\\:)?h-\d\d?$/, // height
/(sm|md|lg|xl)?(\\:)m.?-\d\d?$/, // margins
/(sm|md|lg|xl)?(\\:)p.?-\d\d?$/, // paddings
/max-w-*/, // maximum width
/grid-cols-\d\d?/, // grid columns
/col-span-\d\d?/, // grid spans
/row-span-\d\d?/, // grid spans
/(sm|md|lg|xl)(\\:)text-.*/,
// /text-*/,
/^ico--[a-z]+\:before$/, // icons
],
});
......
source/_patterns/01-molecules/calendar/calendar-table-row.mustache
+ 2
− 2
View file @ 2860f8e0
......@@ -3,11 +3,11 @@
<div class="col-span-8 grid grid-cols-3 calendar-table-row__col">
<div class="col-span-3 md:col-span-1">
<strong class="block">{{ dateverbose }}</strong>
<p class="font-light text-sm mt-sm">Celý den</p>
<p class="font-light text-sm mt-1">Celý den</p>
</div>
<div class="col-span-3 md:col-span-2 mt-4 md:mt-0">
<strong class="block">{{ headline.short }}</strong>
<p class="font-light text-sm mt-sm">{{ excerpt.short }}</p>
<p class="font-light text-sm mt-1">{{ excerpt.short }}</p>
</div>
</div>
<div class="col-span-2 text-center font-light calendar-table-row__col">
......
source/_patterns/01-molecules/cards/image-card.mustache
+ 1
− 1
View file @ 2860f8e0
<div class="card {{ classes }}">
<a href="#">
<img class="w-full" src="{{ img.landscape-16x9.src }}" alt="{{ img.landscape-16x9.alt }}" />
<img class="w-full {{ imgClasses }}" src="{{ img.landscape-16x9.src }}" alt="{{ img.landscape-16x9.alt }}" />
</a>
<div class="card__body {{ bodyClasses }}">
<h1 class="card-headline mb-2"><a href="#">{{ title }}{{^ title }}{{ headline.short }}{{/ title }}</a></h1>
......
source/_patterns/01-molecules/flip-clock/flip-clock.mustache
+ 1
− 1
View file @ 2860f8e0
<div class="flip-clock __js-root">
<div class="__js-root">
<ui-flip-clock
clock-classes="{{ clockClasses }}"
slot-classes="{{ slotClasses }}"
......
source/_patterns/02-organisms/00-global/subnav.mustache
+ 53
− 53
View file @ 2860f8e0
<div class="__js-root">
<ui-app inline-template>
<ui-calendar-dummy-provider v-slot="{ events, onShowMore, hasMore }">
<ui-view-provider :initial="{regions: false, calendar: false}" v-slot="{ isCurrentView, toggleView }">
<nav class="subnav">
<div class="container container--wide">
......@@ -26,10 +27,10 @@
</div>
</button>
<a href="#" class="btn text-sm max-w-full hidden lg:block" @click="toggleView('calendar')">
<a href="#" class="btn text-sm max-w-full hidden lg:block" @click="toggleView('calendar')" v-if="events.length > 0">
<div class="btn__body bg-grey-800 text-grey-200 flex divide-x">
<span class="pr-4">{{ event.title }}</span>
<span class="pl-4">{{ event.date }}</span>
<span class="pr-4">&#123;{events[0].title}&#125;</span>
<span class="pl-4">&#123;{events[0].allDay ? 'Celý den' : events[0].startDateVerbose + ', ' + events[0].startTimeVerbose}&#125;</span>
</div>
</a>
......@@ -50,12 +51,11 @@
<div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('calendar')}">
<a @click="toggleView('calendar')" class="subnav-aside__close"><i class="ico--close"></i></a>
<div class="container container--default">
<ui-calendar-dummy-provider v-slot="{ events, onShowMore, hasMore }">
<ui-calendar-renderer :events="events" :on-show-more="onShowMore" :has-more="hasMore" :name="'Krajský kalendář'"></ui-calendar-renderer>
</ui-calendar-dummy-provider>
</div>
</div>
</aside>
</ui-view-provider>
</ui-calendar-dummy-provider>
</ui-app>
</div>
source/_patterns/03-templates/elections.mustache
+ 8
− 8
View file @ 2860f8e0
......@@ -67,14 +67,14 @@
<h1 class="head-alt-md text-center py-8 lg:pt-24 lg:pb-8">Volební program</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
{{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Smart city" )}}
{{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Řízení a organizační struktura města" )}}
{{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Rozvoj města a bydlení" )}}
{{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Doprava" )}}
{{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Veřejný prostor a zeleň" )}}
{{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Vzdělávání" )}}
{{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Kultura a volný čas" )}}
{{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", imgClasses: "h-48 object-fit", title: "Otevřenost a zapojení občanů" )}}
{{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", imgClasses: "h-48 object-fit", title: "Smart city" )}}
{{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", imgClasses: "h-48 object-fit", title: "Řízení a organizační struktura města" )}}
{{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", imgClasses: "h-48 object-fit", title: "Rozvoj města a bydlení" )}}
{{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", imgClasses: "h-48 object-fit", title: "Doprava" )}}
{{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", imgClasses: "h-48 object-fit", title: "Veřejný prostor a zeleň" )}}
{{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", imgClasses: "h-48 object-fit", title: "Vzdělávání" )}}
{{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", imgClasses: "h-48 object-fit", title: "Kultura a volný čas" )}}
</div>
</template>
......
source/css/molecules/calendar.pcss
+ 1
− 1
View file @ 2860f8e0
......@@ -11,7 +11,7 @@
}
.calendar-table-row__col {
@apply h-full border-r border-grey-125 p-2 flex justify-center items-center;
@apply h-full border-r border-grey-125 p-2 flex justify-center items-start;
&:first-child {
@apply border-l;
......
source/css/molecules/candidate-card.pcss
+ 15
− 2
View file @ 2860f8e0
......@@ -4,6 +4,8 @@
grid-template-areas: "avatar bio"
"affiliation affiliation"
"social social";
/* Needs to match .candidate-card__avatar width */
grid-template-columns: theme("width.24") 1fr;
}
.candidate-card__avatar {
......@@ -23,10 +25,11 @@
}
.candidate-card__affiliation {
@apply text-sm bg-grey-50 flex border-t border-b border-grey-125;
/* No vertical padding, proper spacing guaranteed by leading-10 - we do not expect line breaks here. */
@apply text-sm bg-grey-50 flex border-t border-b border-grey-125 leading-10;
> div {
@apply py-2 px-4 flex items-center;
@apply px-4 flex items-center;
&:not(:first-child) {
@apply border-l border-grey-125;
......@@ -69,6 +72,7 @@
@screen sm {
.candidate-card {
@apply flex flex-col h-full;
padding-top: 3rem;
}
......@@ -78,10 +82,15 @@
"bio"
"affiliation"
"social";
grid-template-columns: 1fr;
}
.candidate-card__bio {
@apply p-4;
/* This adjusts the height to keep other parts (like affiliation) uniformly
aligned one to another. Adjustment is necessary in case of longer
names/descriptions. */
min-height: 10rem;
}
.candidate-card__avatar {
......@@ -95,4 +104,8 @@
left: -0.5rem;
line-height: 2.5rem;
}
.candidate-card__social {
@apply flex-grow;
}
}
source/css/molecules/candidate-table-row.pcss
+ 5
− 1
View file @ 2860f8e0
......@@ -5,6 +5,8 @@
grid-template-areas: "position avatar name"
"position avatar bio"
"position avatar affiliation";
/* Needs to match avatar width */
grid-template-columns: auto theme("width.16") 1fr;
&:after {
content: '';
......@@ -47,8 +49,10 @@
@screen md {
.candidate-table-row {
@apply py-1 grid-cols-candidate-table-row;
@apply py-1;
grid-template-areas: "position avatar name bio affiliation";
/* Needs to match avatar width */
grid-template-columns: auto theme("width.10") 30% 20% 1fr
}
.candidate-table-row__avatar {
......
source/js/components/calendar/DummyProvider.vue
+ 33
− 22
View file @ 2860f8e0
......@@ -2,11 +2,12 @@
const initialEvents = [
{
id: 2,
start: new Date("2020-07-08T10:00:00.000Z"),
start: "2020-07-08T10:00:00.000Z",
startTimestamp: new Date("2020-07-08T10:00:00.000Z").getTime(),
startDateVerbose: "středa 8. července 2020",
startTimeVerbose: "12:00",
allDay: false,
end: new Date("2020-07-08T11:00:00.000Z"),
end: "2020-07-08T11:00:00.000Z",
title: "Pirátský oběd - Chrudim",
description:
"Pravidelné setkání pirátů při středečním obědě. Nejen o politice a s chutí.",
......@@ -15,22 +16,24 @@ const initialEvents = [
},
{
id: 15,
start: new Date("2020-07-13T19:00:00.000Z"),
start: "2020-07-13T19:00:00.000Z",
startTimestamp: new Date("2020-07-13T19:00:00.000Z").getTime(),
startDateVerbose: "pondělí 13. července 2020",
startTimeVerbose: "21:00",
allDay: false,
end: new Date("2020-07-13T19:30:00.000Z"),
end: "2020-07-13T19:30:00.000Z",
title: "Mumble - předsednictvo",
link:
"https://www.google.com/calendar/event?eid=YzVpM2FvaGc2MHAzY2I5aGM1aW1jYjlrNjBvbThiYjE2dGk2NGI5ajY4cjY0ZGhrNzVnamdjOWdjb18yMDIwMDcxM1QxOTAwMDBaIDdyNjczcmxoMjU1b2Zvcmh2M29lYjJsMGcwQGc"
},
{
id: 3,
start: new Date("2020-07-15T10:00:00.000Z"),
start: "2020-07-15T10:00:00.000Z",
startTimestamp: new Date("2020-07-15T10:00:00.000Z").getTime(),
startDateVerbose: "středa 15. července 2020",
startTimeVerbose: "12:00",
allDay: false,
end: new Date("2020-07-15T11:00:00.000Z"),
end: "2020-07-15T11:00:00.000Z",
title: "Pirátský oběd - Chrudim",
description:
"Pravidelné setkání pirátů při středečním obědě. Nejen o politice a s chutí.",
......@@ -40,22 +43,24 @@ const initialEvents = [
},
{
id: 16,
start: new Date("2020-07-20T19:00:00.000Z"),
start: "2020-07-20T19:00:00.000Z",
startTimestamp: new Date("2020-07-20T19:00:00.000Z").getTime(),
startDateVerbose: "pondělí 20. července 2020",
startTimeVerbose: "21:00",
allDay: false,
end: new Date("2020-07-20T19:30:00.000Z"),
end: "2020-07-20T19:30:00.000Z",
title: "Mumble - předsednictvo",
link:
"https://www.google.com/calendar/event?eid=YzVpM2FvaGc2MHAzY2I5aGM1aW1jYjlrNjBvbThiYjE2dGk2NGI5ajY4cjY0ZGhrNzVnamdjOWdjb18yMDIwMDcyMFQxOTAwMDBaIDdyNjczcmxoMjU1b2Zvcmh2M29lYjJsMGcwQGc"
},
{
id: 4,
start: new Date("2020-07-22T10:00:00.000Z"),
start: "2020-07-22T10:00:00.000Z",
startTimestamp: new Date("2020-07-22T10:00:00.000Z").getTime(),
startDateVerbose: "středa 22. července 2020",
startTimeVerbose: "12:00",
allDay: false,
end: new Date("2020-07-22T11:00:00.000Z"),
end: "2020-07-22T11:00:00.000Z",
title: "Pirátský oběd - Chrudim",
description:
"Pravidelné setkání pirátů při středečním obědě. Nejen o politice a s chutí.",
......@@ -64,22 +69,24 @@ const initialEvents = [
},
{
id: 17,
start: new Date("2020-07-27T19:00:00.000Z"),
start: "2020-07-27T19:00:00.000Z",
startTimestamp: new Date("2020-07-27T19:00:00.000Z").getTime(),
startDateVerbose: "pondělí 27. července 2020",
startTimeVerbose: "21:00",
allDay: false,
end: new Date("2020-07-27T19:30:00.000Z"),
end: "2020-07-27T19:30:00.000Z",
title: "Mumble - předsednictvo",
link:
"https://www.google.com/calendar/event?eid=YzVpM2FvaGc2MHAzY2I5aGM1aW1jYjlrNjBvbThiYjE2dGk2NGI5ajY4cjY0ZGhrNzVnamdjOWdjb18yMDIwMDcyN1QxOTAwMDBaIDdyNjczcmxoMjU1b2Zvcmh2M29lYjJsMGcwQGc"
},
{
id: 5,
start: new Date("2020-07-29T10:00:00.000Z"),
start: "2020-07-29T10:00:00.000Z",
startTimestamp: new Date("2020-07-29T10:00:00.000Z").getTime(),
startDateVerbose: "středa 29. července 2020",
startTimeVerbose: "12:00",
allDay: false,
end: new Date("2020-07-29T11:00:00.000Z"),
end: "2020-07-29T11:00:00.000Z",
title: "Pirátský oběd - Chrudim",
description:
"Pravidelné setkání pirátů při středečním obědě. Nejen o politice a s chutí.",
......@@ -88,22 +95,24 @@ const initialEvents = [
},
{
id: 18,
start: new Date("2020-08-03T19:00:00.000Z"),
start: "2020-08-03T19:00:00.000Z",
startTimestamp: new Date("2020-08-03T19:00:00.000Z").getTime(),
startDateVerbose: "pondělí 3. srpna 2020",
startTimeVerbose: "21:00",
allDay: false,
end: new Date("2020-08-03T19:30:00.000Z"),
end: "2020-08-03T19:30:00.000Z",
title: "Mumble - předsednictvo",
link:
"https://www.google.com/calendar/event?eid=YzVpM2FvaGc2MHAzY2I5aGM1aW1jYjlrNjBvbThiYjE2dGk2NGI5ajY4cjY0ZGhrNzVnamdjOWdjb18yMDIwMDgwM1QxOTAwMDBaIDdyNjczcmxoMjU1b2Zvcmh2M29lYjJsMGcwQGc"
},
{
id: 6,
start: new Date("2020-08-05T10:00:00.000Z"),
start: "2020-08-05T10:00:00.000Z",
startTimestamp: new Date("2020-08-05T10:00:00.000Z").getTime(),
startDateVerbose: "středa 5. srpna 2020",
startTimeVerbose: "12:00",
allDay: false,
end: new Date("2020-08-05T11:00:00.000Z"),
end: "2020-08-05T11:00:00.000Z",
title: "Pirátský oběd - Chrudim",
description:
"Pravidelné setkání pirátů při středečním obědě. Nejen o politice a s chutí.",
......@@ -115,22 +124,24 @@ const initialEvents = [
const moreEvents = [
{
id: 19,
start: new Date("2020-08-10T19:00:00.000Z"),
start: "2020-08-10T19:00:00.000Z",
startTimestamp: new Date("2020-08-10T19:00:00.000Z").getTime(),
startDateVerbose: "pondělí 10. srpna 2020",
startTimeVerbose: "21:00",
allDay: false,
end: new Date("2020-08-10T19:30:00.000Z"),
end: "2020-08-10T19:30:00.000Z",
title: "Mumble - předsednictvo",
link:
"https://www.google.com/calendar/event?eid=YzVpM2FvaGc2MHAzY2I5aGM1aW1jYjlrNjBvbThiYjE2dGk2NGI5ajY4cjY0ZGhrNzVnamdjOWdjb18yMDIwMDgxMFQxOTAwMDBaIDdyNjczcmxoMjU1b2Zvcmh2M29lYjJsMGcwQGc"
},
{
id: 7,
start: new Date("2020-08-12T10:00:00.000Z"),
start: "2020-08-12T10:00:00.000Z",
startTimestamp: new Date("2020-08-12T10:00:00.000Z").getTime(),
startDateVerbose: "středa 12. srpna 2020",
startTimeVerbose: "12:00",
allDay: false,
end: new Date("2020-08-12T11:00:00.000Z"),
end: "2020-08-12T11:00:00.000Z",
title: "Pirátský oběd - Chrudim",
description:
"Pravidelné setkání pirátů při středečním obědě. Nejen o politice a s chutí.",
......
source/js/components/calendar/GoogleProvider.vue
+ 105
− 0
View file @ 2860f8e0
<script>
const pageSize = 10;
export default {
props: {
calendarId: {
type: String,
required: true,
},
apiKey: {
type: String,
required: true,
}
},
data() {
return {
events: [],
toShow: 7,
};
},
computed: {
displayedEvents() {
return this.events.slice(0, this.toShow);
},
hasMore() {
return this.toShow < this.events.length;
},
},
methods: {
onShowMore() {
this.toShow += pageSize;
},
loadEventsFromStorage() {
if (window.sessionStorage && window.sessionStorage['__pircal_' + this.calendarId]) {
return JSON.parse(window.sessionStorage['__pircal_' + this.calendarId]);
}
},
// Store events to sessionStorage if possible to save requests.
storeEventsToStorage() {
if (window.sessionStorage) {
window.sessionStorage['__pircal_' + this.calendarId] = JSON.stringify(this.events);
}
}
},
mounted() {
const ev = this.loadEventsFromStorage();
if (! ev) {
const toIso = now => now.toISOString().split('.')[0]+"Z";
const now = new Date();
const timeMin = now.toISOString();
const timeMax = new Date(+now + (1000 * 60 * 60 * 24 * 90)).toISOString(); // 90 days ahead
const reqUrl = `https://www.googleapis.com/calendar/v3/calendars/${this.calendarId}/events?key=${encodeURIComponent(this.apiKey)}&maxResults=150&timeMin=${encodeURIComponent(timeMin)}&timeMax=${encodeURIComponent(timeMax)}&sanitizeHtml=true&singleEvents=true&maxAtendees=1`;
let counter = 0;
fetch(reqUrl)
.then(response => {
if (!response.ok) {
throw new Error("Problem loading events from google");
}
return response.json()
})
.then(resp => {
this.events = resp.items
.map(e => {
const start = new Date(e.start.dateTime || e.start.date);
const end = new Date(e.end.dateTime || e.end.date);
const startDateVerbose = start.toLocaleDateString('cs-CZ', {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'});
const startTimeVerbose = start.getHours() + ':' + start.getMinutes().toString().padStart(2, '0');
const allDay = ! e.start.dateTime;
return {
id: counter++,
start: start,
startTimestamp: start.getTime(),
startDateVerbose,
startTimeVerbose,
allDay,
end: end,
title: e.summary,
description: e.description,
link: e.htmlLink
};
})
.sort((e1, e2) => e1.start < e2.start ? -1 : 1);
this.storeEventsToStorage();
});
} else {
this.events = ev;
}
},
render() {
return this.$scopedSlots.default({
events: this.displayedEvents,
hasMore: this.hasMore,
onShowMore: this.onShowMore,
});
}
};
</script>
source/js/components/calendar/Renderer.vue
+ 5
− 5
View file @ 2860f8e0
......@@ -13,16 +13,16 @@
</div>
<div class="col-span-4 xl:col-span-3">
<div class="grid grid-cols-12 items-center calendar-table-row" v-for="event in events" v-bind:key="event.id">
<div class="col-span-2 text-orange-300 head-alt-md calendar-table-row__col"><span>{{ event.start | dateDay }}</span></div>
<div class="col-span-8 grid grid-cols-3 calendar-table-row__col" :class="{'calendar-table-row__col--norborder': !event.mapLink}">
<div class="col-span-2 text-orange-300 head-alt-md calendar-table-row__col"><span>{{ event.startTimestamp | dateDay }}</span></div>
<div class="col-span-8 grid grid-cols-3 col-gap-4 calendar-table-row__col" :class="{'calendar-table-row__col--norborder': !event.mapLink}">
<div class="col-span-3 md:col-span-1">
<strong class="block">{{ event.startDateVerbose }}</strong>
<p class="font-light text-sm mt-sm">{{ event.allDay ? "Celý den" : event.startTimeVerbose }}</p>
<p class="font-light text-sm mt-1">{{ event.allDay ? "Celý den" : event.startTimeVerbose }}</p>
</div>
<div class="col-span-3 md:col-span-2 mt-4 md:mt-0">
<a v-if="event.link" v-bind:href="event.link" class="font-bold block" target="_blank" rel="noreferrer noopener">{{ event.title }}</a>
<strong v-if="!event.link" class="block">{{ event.title }}</strong>
<p class="font-light text-sm mt-sm" v-if="event.description">{{ event.description }}</p>
<p class="font-light text-sm mt-1" v-if="event.description">{{ event.description }}</p>
</div>
</div>
<div class="col-span-2 text-center font-light calendar-table-row__col">
......@@ -58,7 +58,7 @@
},
filters: {
dateDay: (val) => {
return `${val.getDate()}.`;
return `${new Date(val).getDate()}.`;
}
}
};
......
source/js/main.js
+ 2
− 0
View file @ 2860f8e0
......@@ -4,6 +4,7 @@ import { forEachNode } from "./utils";
import Renderer from "./components/calendar/Renderer";
import DummyProvider from "./components/calendar/DummyProvider";
import GoogleProvider from "./components/calendar/GoogleProvider";
import RegionMap from "./components/RegionMap";
import ViewProvider from "./components/ViewProvider";
import Navbar from "./components/navbar/Navbar";
......@@ -13,6 +14,7 @@ import FlipClock from "./components/FlipClock";
Vue.component("ui-calendar-renderer", Renderer);
Vue.component("ui-calendar-dummy-provider", DummyProvider);
Vue.component("ui-calendar-google-provider", GoogleProvider);
Vue.component("ui-region-map", RegionMap);
Vue.component("ui-view-provider", ViewProvider);
Vue.component("ui-navbar", Navbar);
......
tailwind.config.js
+ 5
− 3
View file @ 2860f8e0
......@@ -11,9 +11,6 @@ module.exports = {
maxWidth: {
'xxs': '16rem',
},
gridTemplateColumns: {
'candidate-table-row': 'auto auto auto auto 1fr'
},
opacity: {
'85': '0.85',
},
......@@ -125,6 +122,11 @@ module.exports = {
},
variants: {
textDecorationColor: ['responsive', 'hover'],
background: ['responsive'],
appearance: ['responsive'],
space: ['responsive'],
text: ['responsive', 'hover'],
zIndex: ['responsive'],
},
plugins: [
require('tailwind-css-variables')(
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Pirátský GitLab - Home of the CopyLeft