Three content areas: Tips, News, Modules
This commit is contained in:
1 parent
e577e52a08
commit
309cd7a381
5 files changed
+48
-77
No files matched your search
@@ -23,8 +23,8 @@
|
|||||||
<a class="wordmark" href="../index.html">The OC Guy</a>
|
<a class="wordmark" href="../index.html">The OC Guy</a>
|
||||||
<nav class="nav" aria-label="Sections">
|
<nav class="nav" aria-label="Sections">
|
||||||
<a href="../index.html#tips">Tips</a>
|
<a href="../index.html#tips">Tips</a>
|
||||||
<a href="../index.html#blog">Blog</a>
|
<a href="../index.html#news">News</a>
|
||||||
<a href="../index.html#featured">Modules</a>
|
<a href="../index.html#modules">Modules</a>
|
||||||
<a href="../index.html#ask">About</a>
|
<a href="../index.html#ask">About</a>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
+2
-2
@@ -23,8 +23,8 @@
|
|||||||
<a class="wordmark" href="../index.html">The OC Guy</a>
|
<a class="wordmark" href="../index.html">The OC Guy</a>
|
||||||
<nav class="nav" aria-label="Sections">
|
<nav class="nav" aria-label="Sections">
|
||||||
<a href="../index.html#tips">Tips</a>
|
<a href="../index.html#tips">Tips</a>
|
||||||
<a href="../index.html#blog">Blog</a>
|
<a href="../index.html#news">News</a>
|
||||||
<a href="../index.html#featured">Modules</a>
|
<a href="../index.html#modules">Modules</a>
|
||||||
<a href="../index.html#ask">About</a>
|
<a href="../index.html#ask">About</a>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
+14
-21
@@ -27,8 +27,8 @@
|
|||||||
<nav class="nav" aria-label="Sections">
|
<nav class="nav" aria-label="Sections">
|
||||||
<a href="#welcome">Welcome</a>
|
<a href="#welcome">Welcome</a>
|
||||||
<a href="#tips">Tips</a>
|
<a href="#tips">Tips</a>
|
||||||
<a href="#blog">Blog</a>
|
<a href="#news">News</a>
|
||||||
<a href="#featured">Modules</a>
|
<a href="#modules">Modules</a>
|
||||||
<a href="#ask">About</a>
|
<a href="#ask">About</a>
|
||||||
</nav>
|
</nav>
|
||||||
<a class="nav-cta" href="#ask">Ask a question</a>
|
<a class="nav-cta" href="#ask">Ask a question</a>
|
||||||
@@ -84,26 +84,26 @@
|
|||||||
<div class="cards" id="tipsGrid" data-feed="tips"></div>
|
<div class="cards" id="tipsGrid" data-feed="tips"></div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="section" id="blog" aria-labelledby="blog-title">
|
<section class="section" id="news" aria-labelledby="news-title">
|
||||||
<header class="section-head">
|
<header class="section-head">
|
||||||
<span class="initial" aria-hidden="true">B</span>
|
<span class="initial" aria-hidden="true">B</span>
|
||||||
<h2 class="section-title" id="blog-title"><span class="kicker">Everything</span> <em>The OC Guy blog</em></h2>
|
<h2 class="section-title" id="news-title"><span class="kicker">The latest in</span> <em>News</em></h2>
|
||||||
<a class="more" href="#featured">Featured module</a>
|
<a class="more" href="#modules">Modules</a>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="feed-tools">
|
<div class="feed-tools">
|
||||||
<label class="sr-only" for="blogSearch">Search the blog</label>
|
<label class="sr-only" for="newsSearch">Search the news</label>
|
||||||
<input id="blogSearch" class="feed-search" type="search" placeholder="Search every post…" autocomplete="off">
|
<input id="newsSearch" class="feed-search" type="search" placeholder="Search every post…" autocomplete="off">
|
||||||
<span class="feed-count"><span id="blogCount">0</span> posts</span>
|
<span class="feed-count"><span id="newsCount">0</span> posts</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="cards" id="blogGrid" data-feed="blog"></div>
|
<div class="cards" id="newsGrid" data-feed="news"></div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="section oca" id="oca" aria-labelledby="oca-title">
|
<section class="section" id="modules" aria-labelledby="modules-title">
|
||||||
<header class="section-head">
|
<header class="section-head">
|
||||||
<span class="initial" aria-hidden="true">O</span>
|
<span class="initial" aria-hidden="true">M</span>
|
||||||
<h2 class="section-title" id="oca-title"><span class="kicker">The latest in</span> <em>OCA modules</em></h2>
|
<h2 class="section-title" id="modules-title"><span class="kicker">The latest in</span> <em>Modules</em></h2>
|
||||||
<a class="more" href="https://github.com/OCA" target="_blank" rel="noopener">All OCA modules</a>
|
<a class="more" href="https://github.com/OCA" target="_blank" rel="noopener">All OCA modules</a>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
@@ -163,15 +163,6 @@
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section featured" id="featured" aria-labelledby="featured-title">
|
|
||||||
<header class="section-head">
|
|
||||||
<span class="initial" aria-hidden="true">F</span>
|
|
||||||
<h2 class="section-title" id="featured-title"><span class="kicker">The latest in</span> <em>Featured module</em></h2>
|
|
||||||
<a class="more" href="https://github.com/OCA" target="_blank" rel="noopener">All OCA modules</a>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<article class="featured-card">
|
<article class="featured-card">
|
||||||
<p class="featured-kicker" id="featured-area">Utilities</p>
|
<p class="featured-kicker" id="featured-area">Utilities</p>
|
||||||
<h3 class="featured-name"><a id="featured-link" href="https://github.com/OCA/mail/tree/18.0/mail_tracking" target="_blank" rel="noopener">Mail Tracker</a></h3>
|
<h3 class="featured-name"><a id="featured-link" href="https://github.com/OCA/mail/tree/18.0/mail_tracking" target="_blank" rel="noopener">Mail Tracker</a></h3>
|
||||||
@@ -181,6 +172,8 @@
|
|||||||
<span class="branch">20.0</span>
|
<span class="branch">20.0</span>
|
||||||
</p>
|
</p>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
<div class="cards" id="modulesGrid" data-feed="modules"></div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="ask" id="ask" aria-labelledby="ask-title">
|
<section class="ask" id="ask" aria-labelledby="ask-title">
|
||||||
|
|||||||
+21
-47
@@ -1,13 +1,12 @@
|
|||||||
/* The OC Guy — post feed.
|
/* The OC Guy — post feed.
|
||||||
One manifest (data/posts.json) written by scripts/sync_posts.py, three views:
|
One manifest (data/posts.json) written by scripts/sync_posts.py, three views that are also
|
||||||
Tips & Tricks, Community news and the Blog. Search is client-side over
|
the three categories: Tips & Tricks, News, Modules. A post appears in exactly one of them,
|
||||||
headline + teaser + category, the same technique as blog/index.json on
|
because the category is the area. No JS, no feed: the sections say so instead of lying. */
|
||||||
odoo4projects.com. No JS, no feed: the sections say so instead of lying. */
|
|
||||||
(function () {
|
(function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var SOURCE = 'data/posts.json';
|
var SOURCE = 'data/posts.json';
|
||||||
var BADGE = { tips: 'Tips & Tricks', news: 'Community news', blog: 'Blog' };
|
var BADGE = { tips: 'Tips & Tricks', news: 'News', modules: 'Modules' };
|
||||||
|
|
||||||
function el(tag, cls, text) {
|
function el(tag, cls, text) {
|
||||||
var n = document.createElement(tag);
|
var n = document.createElement(tag);
|
||||||
@@ -32,8 +31,10 @@
|
|||||||
function emptyState(node, kind) {
|
function emptyState(node, kind) {
|
||||||
node.textContent = '';
|
node.textContent = '';
|
||||||
var box = el('p', 'feed-empty');
|
var box = el('p', 'feed-empty');
|
||||||
box.textContent = kind === 'news'
|
box.textContent = kind === 'modules'
|
||||||
? 'No community news published yet. Posts from the daily feed land here.'
|
? 'No module write-ups yet. Posts in the Modules category land here.'
|
||||||
|
: kind === 'news'
|
||||||
|
? 'No news published yet. Posts from the daily feed land here.'
|
||||||
: 'Nothing published in this section yet.';
|
: 'Nothing published in this section yet.';
|
||||||
node.appendChild(box);
|
node.appendChild(box);
|
||||||
}
|
}
|
||||||
@@ -57,31 +58,9 @@
|
|||||||
return a;
|
return a;
|
||||||
}
|
}
|
||||||
|
|
||||||
function newsRow(p) {
|
|
||||||
var li = el('li');
|
|
||||||
var when = el('span', 'news-date');
|
|
||||||
var t = el('time');
|
|
||||||
t.dateTime = p.date;
|
|
||||||
t.textContent = fmtDate(p.date);
|
|
||||||
when.appendChild(t);
|
|
||||||
|
|
||||||
var body = el('div', 'news-body');
|
|
||||||
var h3 = el('h3');
|
|
||||||
var a = el('a', null, p.headline);
|
|
||||||
a.href = p.link;
|
|
||||||
h3.appendChild(a);
|
|
||||||
body.appendChild(h3);
|
|
||||||
body.appendChild(el('p', null, p.teaser));
|
|
||||||
|
|
||||||
li.appendChild(when);
|
|
||||||
li.appendChild(body);
|
|
||||||
li.appendChild(el('span', 'news-source', p.category === 'tips' ? 'Tips & Tricks' : 'Community'));
|
|
||||||
return li;
|
|
||||||
}
|
|
||||||
|
|
||||||
function render(view, posts, term) {
|
function render(view, posts, term) {
|
||||||
var list = posts.filter(function (p) {
|
var list = posts.filter(function (p) {
|
||||||
return (view.all || p.category === view.category) && matches(p, term);
|
return p.category === view.category && matches(p, term);
|
||||||
});
|
});
|
||||||
var node = view.node;
|
var node = view.node;
|
||||||
if (view.countBox) {
|
if (view.countBox) {
|
||||||
@@ -92,17 +71,12 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
node.textContent = '';
|
node.textContent = '';
|
||||||
if (view.kind === 'news') {
|
|
||||||
list.slice(0, view.limit || 5).forEach(function (p) { node.appendChild(newsRow(p)); });
|
|
||||||
} else {
|
|
||||||
list.slice(0, view.limit || 50).forEach(function (p) { node.appendChild(card(p)); });
|
list.slice(0, view.limit || 50).forEach(function (p) { node.appendChild(card(p)); });
|
||||||
}
|
}
|
||||||
if (view.count) view.count.textContent = String(list.length);
|
|
||||||
}
|
|
||||||
|
|
||||||
function pickCategory(p) {
|
function pickCategory(p) {
|
||||||
var c = (p.category || 'blog').toLowerCase();
|
var c = (p.category || 'news').toLowerCase();
|
||||||
return BADGE[c] ? c : 'blog';
|
return BADGE[c] ? c : 'news';
|
||||||
}
|
}
|
||||||
|
|
||||||
fetch(SOURCE + '?_=' + Date.now())
|
fetch(SOURCE + '?_=' + Date.now())
|
||||||
@@ -117,12 +91,14 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
var views = [
|
var views = [
|
||||||
{ node: document.getElementById('tipsGrid'), category: 'tips', kind: 'cards',
|
{ node: document.getElementById('tipsGrid'), category: 'tips', kind: 'tips',
|
||||||
search: document.getElementById('tipsSearch'), count: document.getElementById('tipsCount'), limit: 3 },
|
search: document.getElementById('tipsSearch'),
|
||||||
{ node: document.getElementById('newsList'), category: 'news', kind: 'news',
|
count: document.getElementById('tipsCount'), limit: 3 },
|
||||||
search: document.getElementById('newsSearch'), count: document.getElementById('newsCount'), limit: 6 },
|
{ node: document.getElementById('newsGrid'), category: 'news', kind: 'news',
|
||||||
{ node: document.getElementById('blogGrid'), category: 'blog', kind: 'cards', all: true,
|
search: document.getElementById('newsSearch'),
|
||||||
search: document.getElementById('blogSearch'), count: document.getElementById('blogCount'), limit: 60 }
|
count: document.getElementById('newsCount'), limit: 60 },
|
||||||
|
{ node: document.getElementById('modulesGrid'), category: 'modules', kind: 'modules',
|
||||||
|
search: null, count: null, limit: 6 }
|
||||||
].filter(function (v) { return v.node; });
|
].filter(function (v) { return v.node; });
|
||||||
|
|
||||||
views.forEach(function (v) {
|
views.forEach(function (v) {
|
||||||
@@ -137,15 +113,13 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
/* posts tagged both tips and blog are listed twice on purpose:
|
|
||||||
the sections are channels, not storage. */
|
|
||||||
var total = document.getElementById('feedTotal');
|
var total = document.getElementById('feedTotal');
|
||||||
if (total) total.textContent = String(posts.length);
|
if (total) total.textContent = String(posts.length);
|
||||||
})
|
})
|
||||||
.catch(function () {
|
.catch(function () {
|
||||||
['tipsGrid', 'newsList', 'blogGrid'].forEach(function (id) {
|
['tipsGrid', 'newsGrid', 'modulesGrid'].forEach(function (id) {
|
||||||
var n = document.getElementById(id);
|
var n = document.getElementById(id);
|
||||||
if (n) emptyState(n, id === 'newsList' ? 'news' : 'cards');
|
if (n) emptyState(n, id.replace('Grid', '').toLowerCase());
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
@@ -49,9 +49,13 @@ CATEGORY_KEYS = ("category", "area", "tags", "tag", "section", "type")
|
|||||||
DATE_KEYS = ("scheduled", "date", "published", "pubDate", "created", "timestamp")
|
DATE_KEYS = ("scheduled", "date", "published", "pubDate", "created", "timestamp")
|
||||||
ID_KEYS = ("id", "slug", "uuid", "_id")
|
ID_KEYS = ("id", "slug", "uuid", "_id")
|
||||||
|
|
||||||
|
# The three categories are the three areas of the homepage. Nothing else exists:
|
||||||
|
# tips -> /#tips news -> /#news modules -> /#modules
|
||||||
KNOWN_CATEGORIES = {"tips": "tips", "tip": "tips", "tricks": "tips",
|
KNOWN_CATEGORIES = {"tips": "tips", "tip": "tips", "tricks": "tips",
|
||||||
"news": "news", "community": "news", "oca": "news",
|
"news": "news", "community": "news", "blog": "news",
|
||||||
"blog": "blog", "article": "blog", "post": "blog"}
|
"article": "news", "post": "news", "release": "news",
|
||||||
|
"modules": "modules", "module": "modules", "oca": "modules",
|
||||||
|
"featured": "modules", "integration": "modules"}
|
||||||
|
|
||||||
|
|
||||||
def log(msg: str) -> None:
|
def log(msg: str) -> None:
|
||||||
@@ -127,7 +131,7 @@ def normalise_category(value: object) -> str:
|
|||||||
for tag in raw:
|
for tag in raw:
|
||||||
if tag in KNOWN_CATEGORIES:
|
if tag in KNOWN_CATEGORIES:
|
||||||
return KNOWN_CATEGORIES[tag]
|
return KNOWN_CATEGORIES[tag]
|
||||||
return "blog"
|
return "news"
|
||||||
|
|
||||||
|
|
||||||
def image_urls(value: object) -> list[str]:
|
def image_urls(value: object) -> list[str]:
|
||||||
@@ -221,8 +225,8 @@ POST_PAGE = """<!DOCTYPE html>
|
|||||||
<a class="wordmark" href="../index.html">The OC Guy</a>
|
<a class="wordmark" href="../index.html">The OC Guy</a>
|
||||||
<nav class="nav" aria-label="Sections">
|
<nav class="nav" aria-label="Sections">
|
||||||
<a href="../index.html#tips">Tips</a>
|
<a href="../index.html#tips">Tips</a>
|
||||||
<a href="../index.html#blog">Blog</a>
|
<a href="../index.html#news">News</a>
|
||||||
<a href="../index.html#featured">Modules</a>
|
<a href="../index.html#modules">Modules</a>
|
||||||
<a href="../index.html#ask">About</a>
|
<a href="../index.html#ask">About</a>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
Reference in new issue
Block a user