buncha progress
This commit is contained in:
@ -1,3 +1,5 @@
|
||||
import { DateTime } from "luxon";
|
||||
|
||||
export default function(eleventyConfig) {
|
||||
// Return the keys used in an object
|
||||
eleventyConfig.addFilter("getKeys", target => {
|
||||
@ -9,33 +11,44 @@ export default function(eleventyConfig) {
|
||||
let tagline;
|
||||
switch (tag) {
|
||||
case "animals and the outdoors":
|
||||
tagline = "grass touchin'";
|
||||
tagline = "touchin' grass";
|
||||
break;
|
||||
case "art and crafts":
|
||||
/* tagline = */
|
||||
tagline = "makin' stuff";
|
||||
break;
|
||||
case "food and drink":
|
||||
tagline = "good eatin'";
|
||||
break;
|
||||
case "history and science":
|
||||
/* tagline = */
|
||||
tagline = "book learnin'"
|
||||
break;
|
||||
case "home improvement and diy":
|
||||
case "repair and diy":
|
||||
tagline = "fixin' stuff";
|
||||
break;
|
||||
case "interpersonal and life":
|
||||
/* tagline = */
|
||||
tagline = "better livin'";
|
||||
break;
|
||||
case "technology":
|
||||
tagline = "computer touchin'";
|
||||
break;
|
||||
case "writing, editing, and literature":
|
||||
/* tagline = */
|
||||
case "writing editing and literature":
|
||||
tagline = "wordsmithin'";
|
||||
break;
|
||||
};
|
||||
return tagline;
|
||||
});
|
||||
|
||||
/* For <time> elements */
|
||||
eleventyConfig.addFilter("htmlDateString", (dateObj) => {
|
||||
return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat('yyyy-LL-dd');
|
||||
});
|
||||
|
||||
/* Human-readable dates */
|
||||
eleventyConfig.addFilter("readableDate", (dateObj, zone) => {
|
||||
return DateTime.fromJSDate(dateObj, { zone: zone || "utc" })
|
||||
.toLocaleString(DateTime.DATE_FULL);
|
||||
});
|
||||
|
||||
/* Filter out structural tags */
|
||||
eleventyConfig.addFilter("removeCoreTags", (tags) => {
|
||||
return tags.filter(tag => ["all"].indexOf(tag) === -1);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
export default {
|
||||
title: "Fedi Classifieds",
|
||||
title: "Fediverse Skillshare Classifieds",
|
||||
description: "Skillshares and more",
|
||||
url: "",
|
||||
author: "Lee Cattarin"
|
||||
|
||||
@ -1,2 +1,13 @@
|
||||
<footer>
|
||||
<ul>
|
||||
<li>
|
||||
maintained by <a href="https://leecat.art">lee</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://heckin.technology/inherentlee/fedi-classifieds">source code</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/submit/">submit your own</a>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
|
||||
@ -37,6 +37,8 @@
|
||||
{% include "header.njk" %}
|
||||
|
||||
<main id="main">
|
||||
<h1>{{ title }}</h1>
|
||||
|
||||
{{ content | safe }}
|
||||
</main>
|
||||
|
||||
|
||||
108
css/home.css
Normal file
108
css/home.css
Normal file
@ -0,0 +1,108 @@
|
||||
#ads {
|
||||
columns: 3;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
#ads {
|
||||
columns: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
#ads {
|
||||
columns: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* jump links */
|
||||
#jump-links {
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: solid var(--color-purple);
|
||||
}
|
||||
|
||||
#jump-links h2,
|
||||
#category-list li {
|
||||
font-family: "Bebas Neue";
|
||||
font-size: 1.3rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#jump-links * {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#category-list li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#category-list li:not(:last-child)::after {
|
||||
content: "..." / "";
|
||||
}
|
||||
|
||||
/* categories */
|
||||
|
||||
.category {
|
||||
break-inside: avoid;
|
||||
border-bottom: solid var(--color-purple);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
background-color: var(--color-gray);
|
||||
padding: .25rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
/* references highlighting */
|
||||
/* drawn from https://aarontgrogg.com/blog/2012/05/18/pure-css-highlight-for-link-target/ */
|
||||
.category-title:has(h2:target) {
|
||||
animation: hilite 2.5s;
|
||||
}
|
||||
|
||||
@keyframes hilite {
|
||||
0% {background-color: var(--color-gray);}
|
||||
10% {background-color: var(--color-cyan-flipped);}
|
||||
100% {background-color: var(--color-gray);}
|
||||
}
|
||||
|
||||
/* remove animation for reduced motion viewers */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.category-title:has(h2:target) {
|
||||
animation: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.category-title h2 {
|
||||
scroll-margin-top: 4rem;
|
||||
font-family: "Bebas Neue";
|
||||
}
|
||||
|
||||
.category-title p {
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* individual ads */
|
||||
|
||||
.ad {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.ad:not(:last-child) {
|
||||
border-bottom: thin solid var(--color-purple);
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.blurb {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
.blurb a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.listed-on {
|
||||
font-size: .85rem;
|
||||
text-align: right;
|
||||
}
|
||||
98
css/main.css
98
css/main.css
@ -1,3 +1,21 @@
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
--color-dark: #222;
|
||||
--color-light: #ddd;
|
||||
--color-cyan-dark: #134947;
|
||||
--color-cyan-light: #40c5be;
|
||||
--color-purple-dark: #6007b1;
|
||||
--color-purple-light: #ba99fe;
|
||||
|
||||
--color-text: light-dark(var(--color-dark), var(--color-light));
|
||||
--color-bg: light-dark(var(--color-light), var(--color-dark));
|
||||
--color-gray: rgb(0 0 0 / 15%);
|
||||
--color-cyan: light-dark(var(--color-cyan-dark), var(--color-cyan-light));
|
||||
--color-cyan-flipped: light-dark(var(--color-cyan-light), var(--color-cyan-dark));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -5,29 +23,87 @@
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg);
|
||||
width: 65%;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
font-family: "Fraunces";
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#ads {
|
||||
columns: 3;
|
||||
main {
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: solid var(--color-purple);
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
body {
|
||||
width: 85%
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
body {
|
||||
width: 92%;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h3 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: "Fraunces";
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
font-size: 4rem;
|
||||
margin: 3rem auto 1rem;
|
||||
font-size: 3rem;
|
||||
margin: 3rem auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: "Bebas Neue";
|
||||
background-color: lightgray;
|
||||
@media (max-width: 650px) {
|
||||
h1 {
|
||||
font-size: 2.4rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: "Fraunces";
|
||||
font-weight: 400;
|
||||
text-transform: capitalize;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-cyan);
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
|
||||
main ul {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
main li {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
footer ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
footer li {
|
||||
display: inline;
|
||||
font-family: "Bebas Neue";
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
/* iframe is on submission page */
|
||||
iframe {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import { IdAttributePlugin } from "@11ty/eleventy";
|
||||
|
||||
import pluginFilters from "./_config/filters.js";
|
||||
|
||||
export default async function(eleventyConfig) {
|
||||
@ -23,6 +25,9 @@ export default async function(eleventyConfig) {
|
||||
/* All filters from _config/filters.js */
|
||||
eleventyConfig.addPlugin(pluginFilters);
|
||||
|
||||
/* `id` attributes */
|
||||
eleventyConfig.addPlugin(IdAttributePlugin);
|
||||
|
||||
/* Shortcodes */
|
||||
eleventyConfig.addShortcode("currentBuildDate", () => {
|
||||
return (new Date()).toISOString();
|
||||
@ -44,4 +49,3 @@ export const config = {
|
||||
htmlTemplateEngine: "njk",
|
||||
templateFormats: ["html", "md", "njk"],
|
||||
};
|
||||
|
||||
|
||||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
2
node_modules/.package-lock.json
generated
vendored
2
node_modules/.package-lock.json
generated
vendored
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "Fediverse Classifieds",
|
||||
"name": "fediverse-classifieds",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
|
||||
7
package-lock.json
generated
7
package-lock.json
generated
@ -1,15 +1,16 @@
|
||||
{
|
||||
"name": "Fediverse Classifieds",
|
||||
"name": "fediverse-classifieds",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "Fediverse Classifieds",
|
||||
"name": "fediverse-classifieds",
|
||||
"version": "1.0.0",
|
||||
"license": "AGPL-3.0-only",
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^3.1.5"
|
||||
"@11ty/eleventy": "^3.1.5",
|
||||
"luxon": "^3.7.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@11ty/dependency-tree": {
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
"license": "AGPL-3.0-only",
|
||||
"type": "module",
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^3.1.5"
|
||||
"@11ty/eleventy": "^3.1.5",
|
||||
"luxon": "^3.7.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,4 +4,5 @@ handle: 00
|
||||
server: test.test
|
||||
tags: art and crafts
|
||||
blurb: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
date: 2026-04-21
|
||||
---
|
||||
|
||||
@ -4,4 +4,5 @@ handle: 01
|
||||
server: test.test
|
||||
tags: history and science
|
||||
blurb: Quisque mauris erat, tempor non egestas sollicitudin, feugiat id risus. Duis eget ornare nunc. Cras sodales, eros quis finibus luctus, enim sem dictum ante, sed sodales ipsum ante a metus.
|
||||
date: 2026-04-22
|
||||
---
|
||||
|
||||
@ -4,4 +4,5 @@ handle: 02
|
||||
server: test.test
|
||||
tags: interpersonal and life
|
||||
blurb: Fusce faucibus mauris ut metus molestie viverra. In varius erat in lectus scelerisque, vitae ornare sapien euismod. Pellentesque ornare aliquam erat, pellentesque eleifend tellus consequat ut. Donec mollis, lacus vitae bibendum hendrerit, nisi metus dignissim lacus, nec tincidunt nisl ligula vel metus.
|
||||
date: 2026-04-23
|
||||
---
|
||||
|
||||
@ -4,4 +4,5 @@ handle: 03
|
||||
server: test.test
|
||||
tags: writing editing and literature
|
||||
blurb: Sed a commodo lectus. Curabitur tincidunt, eros vel mollis dapibus, mauris dui pharetra mauris, et dapibus leo nisi vitae eros.
|
||||
date: 2026-04-24
|
||||
---
|
||||
|
||||
@ -4,4 +4,5 @@ handle: 04
|
||||
server: test.test
|
||||
tags: food and drink
|
||||
blurb: Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus vitae augue ac neque congue pellentesque vitae a enim. Donec euismod dolor sit amet dui dapibus posuere. Donec eget blandit ligula, ac tempor nunc.
|
||||
date: 2026-04-25
|
||||
---
|
||||
|
||||
@ -4,4 +4,5 @@ handle: 05
|
||||
server: test.test
|
||||
tags: animals and the outdoors
|
||||
blurb: Duis interdum purus non iaculis convallis. Nunc mi lorem, consequat sed luctus vitae, lobortis in arcu.
|
||||
date: 2026-04-26
|
||||
---
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
title: fix your sink or toilet
|
||||
handle: 06
|
||||
server: test.test
|
||||
tags: home improvement and diy
|
||||
tags: repair and diy
|
||||
blurb: Aliquam justo justo, scelerisque a ligula sed, elementum pharetra quam. Ut augue nibh, finibus vel dui nec, sagittis bibendum leo. Quisque libero diam, maximus in dui ac, sollicitudin congue enim.
|
||||
date: 2026-04-27
|
||||
---
|
||||
|
||||
8
src/ads/07-test-test.md
Normal file
8
src/ads/07-test-test.md
Normal file
@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Navigating Workplace Transition
|
||||
handle: 07
|
||||
server: test.test
|
||||
tags: interpersonal and life
|
||||
blurb: Donec nisl ligula, mollis sit amet gravida eget, aliquam vitae nibh. Fusce diam nulla, interdum a ex a, semper lacinia elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia fermentum arcu, molestie ornare purus lobortis eget. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc convallis turpis nisi, nec volutpat dui semper at.
|
||||
date: 2026-04-28
|
||||
---
|
||||
@ -1,7 +1,8 @@
|
||||
---
|
||||
title: intro web development and terminal basics
|
||||
title: introductory web development and terminal basics
|
||||
handle: inherentlee
|
||||
server: flipping.rocks
|
||||
tags: technology
|
||||
blurb: I'm happy to help you set up a personal or hobby site with HTML, CSS, and JS basics, or maybe a static site generator! Alternately, I'll talk about git and the terminal.
|
||||
date: 2026-04-29
|
||||
---
|
||||
|
||||
@ -4,4 +4,5 @@ handle:
|
||||
server:
|
||||
tags:
|
||||
blurb:
|
||||
date:
|
||||
---
|
||||
|
||||
@ -1,18 +1,40 @@
|
||||
---
|
||||
layout: base.njk
|
||||
title: Fediverse Skillshare Classifieds
|
||||
---
|
||||
{% css %}{% include "css/home.css" %}{% endcss %}
|
||||
|
||||
<h1>Fediverse Classifieds</h1>
|
||||
<div id="jump-links">
|
||||
<h2>jump to...</h2>
|
||||
<ul id="category-list">
|
||||
{% for tag in collections | getKeys | removeCoreTags | sortAlphabetically %}
|
||||
<li>
|
||||
<a href="#{{ tag | slugify }}">{{ tag }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="ads">
|
||||
{% for tag in collections | getKeys | removeCoreTags | sortAlphabetically %}
|
||||
<h2 class="category">{{ tag }}</h2>
|
||||
<p class="tagline">{{ tag | getTagline }}</p>
|
||||
{% for post in collections[tag] %}
|
||||
<h3>{{ post.data.title }}</h3>
|
||||
<a href="https://{{ post.data.server }}/@{{ post.data.handle }}"
|
||||
target="_blank">@{{ post.data.handle }}@{{ post.data.server}}</a>
|
||||
<p>{{ post.data.blurb }}</p>
|
||||
<div class="category">
|
||||
<div class="category-title">
|
||||
<h2>{{ tag }}</h2>
|
||||
<p>{{ tag | getTagline }}</p>
|
||||
</div>
|
||||
{% for ad in collections[tag] %}
|
||||
<div class="ad">
|
||||
<h3>{{ ad.data.title }}</h3>
|
||||
<p class="blurb">
|
||||
<a href="https://{{ ad.data.server }}/@{{ ad.data.handle }}"
|
||||
target="_blank">@{{ ad.data.handle }}@{{ ad.data.server}}</a>
|
||||
offers: {{ ad.data.blurb }}
|
||||
</p>
|
||||
<p class="listed-on">
|
||||
listed on <time datetime="{{ ad.date | htmlDateString }}">{{ ad.date | readableDate() }}</time>
|
||||
</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
21
src/submit.njk
Normal file
21
src/submit.njk
Normal file
@ -0,0 +1,21 @@
|
||||
---
|
||||
layout: base.njk
|
||||
title: Submit an Ad
|
||||
---
|
||||
|
||||
<p>To submit to the Skillshare Classifieds, you'll need:</p>
|
||||
|
||||
<ul>
|
||||
<li>your fediverse handle</li>
|
||||
<li>the most relevant category for your listing</li>
|
||||
<li>a title for your offering</li>
|
||||
<li>a short description</li>
|
||||
</ul>
|
||||
|
||||
<p>See <a href="/">the home page</a> for inspiration.</p>
|
||||
|
||||
<iframe class="airtable-embed"
|
||||
src="https://airtable.com/embed/appbdRJ59MLprB1iC/pagfJTOl4KPwh7trd/form"
|
||||
frameborder="0" onmousewheel="" width="100%" height="533"
|
||||
style="background: transparent; border: 1px solid #ccc;">
|
||||
</iframe>
|
||||
Reference in New Issue
Block a user
