fake news, plus refactoring some stuffs
This commit is contained in:
James Shiffer
parent
6f33977554
commit
0a3a457539
5
package-lock.json
generated
5
package-lock.json
generated
@ -959,11 +959,6 @@
|
||||
"typedarray": "^0.0.6"
|
||||
}
|
||||
},
|
||||
"connect-flash": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/connect-flash/-/connect-flash-0.1.1.tgz",
|
||||
"integrity": "sha1-2GMPJtlaf4UfmVax6MxnMvO2qjA="
|
||||
},
|
||||
"console-browserify": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
|
||||
|
||||
@ -15,7 +15,6 @@
|
||||
"bcrypt": "^4.0.1",
|
||||
"body-parser": "^1.19.0",
|
||||
"compression": "^1.7.1",
|
||||
"connect-flash": "^0.1.1",
|
||||
"cookie-parser": "^1.4.5",
|
||||
"dotenv": "^8.2.0",
|
||||
"express": "^4.17.1",
|
||||
|
||||
95
src/components/FakeTweet.svelte
Normal file
95
src/components/FakeTweet.svelte
Normal file
@ -0,0 +1,95 @@
|
||||
<script>
|
||||
export let message;
|
||||
export let author;
|
||||
export let handle;
|
||||
export let avatar;
|
||||
export let media;
|
||||
export let likes = 100;
|
||||
export let replies = 100;
|
||||
export let verified;
|
||||
export let date = new Date();
|
||||
export let link = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
|
||||
|
||||
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
||||
const fmtDateTime = d => `${d.toLocaleTimeString().replace(/:\d+ /g, ' ')} - ${months[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
|
||||
const fmtCount = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
|
||||
const fmtMessage = msg => msg
|
||||
.replace(/#(\w+)/g, `<a href=${link} class="PrettyLink hashtag customisable" dir="ltr" rel="tag"><span class="PrettyLink-prefix">#</span><span class="PrettyLink-value">$1</span></a>`)
|
||||
.replace(/@([a-zA-Z0-9_]{1,15})/g, `<a href=${link} class="PrettyLink profile customisable h-card" dir="ltr"><span class="PrettyLink-prefix">@</span><span class="PrettyLink-value">$1</span></a>`);
|
||||
</script>
|
||||
|
||||
<div class="SandboxRoot env-bp-350">
|
||||
<div class="EmbeddedTweet EmbeddedTweet--cta js-clickToOpenTarget" id="twitter-widget-0" lang="en">
|
||||
|
||||
<div class="EmbeddedTweet-tweetContainer">
|
||||
<div class="EmbeddedTweet-tweet">
|
||||
<blockquote class="Tweet h-entry js-tweetIdInfo subject expanded" cite={link}>
|
||||
<div class="Tweet-header">
|
||||
<a class="TweetAuthor-avatar Identity-avatar u-linkBlend" href={link}><img class="Avatar" data-src-2x={avatar} alt="" data-src-1x={avatar} src={avatar}></a>
|
||||
<div class="TweetAuthor js-inViewportScribingTarget">
|
||||
<a class="TweetAuthor-link Identity u-linkBlend" href={link}>
|
||||
<div class="TweetAuthor-nameScreenNameContainer">
|
||||
<span class="TweetAuthor-decoratedName">
|
||||
<span class="TweetAuthor-name Identity-name customisable-highlight" title={author}>{author}</span>
|
||||
{#if verified}
|
||||
<span class="TweetAuthor-verifiedBadge"><div class="Icon Icon--verified" title="Verified Account" role="img"></div>
|
||||
<b class="u-hiddenVisually">✔</b></span>
|
||||
{/if}
|
||||
</span>
|
||||
<span class="TweetAuthor-screenName Identity-screenName" title={`@${handle}`} dir="ltr">@{handle}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="Tweet-brand">
|
||||
<a href={link}><span class="FollowButton-bird"><div class="Icon Icon--twitter" title="View on Twitter" role="presentation"></div>
|
||||
</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Tweet-body e-entry-content">
|
||||
|
||||
<div class="Tweet-target js-inViewportScribingTarget"></div>
|
||||
<p class="Tweet-text e-entry-title" dir="ltr" lang="en">{@html fmtMessage(message)}</p>
|
||||
|
||||
<div class="Tweet-card">
|
||||
{#if media}
|
||||
<article class="MediaCard customisable-border" dir="ltr">
|
||||
<div class="MediaCard-media">
|
||||
<div class="MediaCard-widthConstraint js-cspForcedStyle" style="max-width: 960px">
|
||||
<div class="MediaCard-mediaContainer js-cspForcedStyle MediaCard--roundedTop MediaCard--roundedBottom" style="padding-bottom: 56.3542%">
|
||||
<a href={link} class="MediaCard-mediaAsset NaturalImage">
|
||||
<img class="NaturalImage-image" title="View image on Twitter" alt="View image on Twitter" src={media} width="960" height="541">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="TweetInfo">
|
||||
<div class="TweetInfo-like">
|
||||
<a class="TweetInfo-heart" title="Like" href={link}>
|
||||
<div><div class="Icon Icon--heart" title="Like" role="img"></div>
|
||||
</div>
|
||||
<span class="TweetInfo-heartStat">{fmtCount(likes)}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="TweetInfo-timeGeo">
|
||||
<a class="u-linkBlend u-url customisable-highlight long-permalink" href={link}>
|
||||
<time class="dt-updated" datetime={date.toJSON()} pubdate="" title={`Time posted: ${date.toUTCString()}`}>{fmtDateTime(date)}</time></a></div>
|
||||
<div class="tweet-InformationCircle"><a href={link} class="Icon Icon--informationCircleWhite js-inViewportScribingTarget" title="Twitter Ads info and privacy"><span class="u-hiddenVisually">Twitter Ads info and privacy</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
<a class="CallToAction" title="View the conversation on Twitter" href={link}>
|
||||
<div class="CallToAction-icon"><div class="Icon Icon--replyCTA" title="View conversation on Twitter" role="img"></div>
|
||||
</div>
|
||||
<div class="CallToAction-text">{fmtCount(replies)} people are talking about this</div>
|
||||
<div class="CallToAction-chevron"><div class="Icon Icon--chevronRightCTA" title="View on Twitter" role="img"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,8 +1,8 @@
|
||||
import posts from './_posts.js';
|
||||
import articles from './_articles.js';
|
||||
|
||||
const lookup = new Map();
|
||||
posts.forEach(post => {
|
||||
lookup.set(post.slug, JSON.stringify(post));
|
||||
articles.forEach(article => {
|
||||
lookup.set(article.slug, JSON.stringify(article));
|
||||
});
|
||||
|
||||
export function get(req, res, next) {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
const data = await res.json();
|
||||
|
||||
if (res.status === 200) {
|
||||
return { post: data };
|
||||
return { article: data };
|
||||
} else {
|
||||
this.error(res.status, data.message);
|
||||
}
|
||||
@ -14,7 +14,7 @@
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export let post;
|
||||
export let article;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@ -22,7 +22,7 @@
|
||||
By default, CSS is locally scoped to the component,
|
||||
and any unused styles are dead-code-eliminated.
|
||||
In this page, Svelte can't know which elements are
|
||||
going to appear inside the {{{post.html}}} block,
|
||||
going to appear inside the {{{article.html}}} block,
|
||||
so we have to use the :global(...) modifier to target
|
||||
all elements inside .content
|
||||
*/
|
||||
@ -70,15 +70,15 @@
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
<title>{post.title} | HOWFEED.BIZ</title>
|
||||
<title>{article.title} | HOWFEED.BIZ</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="content">
|
||||
<figure class="article-image">
|
||||
<img alt={post.title} src={`/a/${post.slug}.jpg`}>
|
||||
<img alt={article.title} src={`/a/${article.slug}.jpg`}>
|
||||
</figure>
|
||||
<div class="article-meta">
|
||||
<h1 class="article-title">{post.title}</h1>
|
||||
<h1 class="article-title">{article.title}</h1>
|
||||
</div>
|
||||
{@html post.html}
|
||||
{@html article.html}
|
||||
</div>
|
||||
|
||||
9
src/routes/a/_articles.js
Normal file
9
src/routes/a/_articles.js
Normal file
@ -0,0 +1,9 @@
|
||||
const articles = [
|
||||
];
|
||||
|
||||
articles.forEach(article => {
|
||||
article.slug = article.title.toLowerCase().replace(/\W+/g, '-');
|
||||
article.html = article.html.replace(/^\t{3}/gm, '');
|
||||
});
|
||||
|
||||
export default articles;
|
||||
@ -1,63 +0,0 @@
|
||||
const posts = [
|
||||
{
|
||||
title: 'How To Disable ABS in Your Car',
|
||||
date: 1590908400000,
|
||||
html: `
|
||||
<p>First, you have to know what <a href='https://svelte.dev'>Svelte</a> is. Svelte is a UI framework with a bold new idea: rather than providing a library that you write code with (like React or Vue, for example), it's a compiler that turns your components into highly optimized vanilla JavaScript. If you haven't already read the <a href='https://svelte.dev/blog/frameworks-without-the-framework'>introductory blog post</a>, you should!</p>
|
||||
|
||||
<p>Sapper is a Next.js-style framework (<a href='blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>
|
||||
|
||||
<ul>
|
||||
<li>Code-splitting, dynamic imports and hot module replacement, powered by webpack</li>
|
||||
<li>Server-side rendering (SSR) with client-side hydration</li>
|
||||
<li>Service worker for offline support, and all the PWA bells and whistles</li>
|
||||
<li>The nicest development experience you've ever had, or your money back</li>
|
||||
</ul>
|
||||
|
||||
<p>It's implemented as Express middleware. Everything is set up and waiting for you to get started, but you keep complete control over the server, service worker, webpack config and everything else, so it's as flexible as you need it to be.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'How to Pay Zero in Taxes',
|
||||
date: 1590908400000,
|
||||
html: `
|
||||
<p>First, you have to know what <a href='https://svelte.dev'>Svelte</a> is. Svelte is a UI framework with a bold new idea: rather than providing a library that you write code with (like React or Vue, for example), it's a compiler that turns your components into highly optimized vanilla JavaScript. If you haven't already read the <a href='https://svelte.dev/blog/frameworks-without-the-framework'>introductory blog post</a>, you should!</p>
|
||||
|
||||
<p>Sapper is a Next.js-style framework (<a href='blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>
|
||||
|
||||
<ul>
|
||||
<li>Code-splitting, dynamic imports and hot module replacement, powered by webpack</li>
|
||||
<li>Server-side rendering (SSR) with client-side hydration</li>
|
||||
<li>Service worker for offline support, and all the PWA bells and whistles</li>
|
||||
<li>The nicest development experience you've ever had, or your money back</li>
|
||||
</ul>
|
||||
|
||||
<p>It's implemented as Express middleware. Everything is set up and waiting for you to get started, but you keep complete control over the server, service worker, webpack config and everything else, so it's as flexible as you need it to be.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'Here\'s Why Canned Water is Better',
|
||||
date: 1590908400000,
|
||||
html: `
|
||||
<p>First, you have to know what <a href='https://svelte.dev'>Svelte</a> is. Svelte is a UI framework with a bold new idea: rather than providing a library that you write code with (like React or Vue, for example), it's a compiler that turns your components into highly optimized vanilla JavaScript. If you haven't already read the <a href='https://svelte.dev/blog/frameworks-without-the-framework'>introductory blog post</a>, you should!</p>
|
||||
|
||||
<p>Sapper is a Next.js-style framework (<a href='blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>
|
||||
|
||||
<ul>
|
||||
<li>Code-splitting, dynamic imports and hot module replacement, powered by webpack</li>
|
||||
<li>Server-side rendering (SSR) with client-side hydration</li>
|
||||
<li>Service worker for offline support, and all the PWA bells and whistles</li>
|
||||
<li>The nicest development experience you've ever had, or your money back</li>
|
||||
</ul>
|
||||
|
||||
<p>It's implemented as Express middleware. Everything is set up and waiting for you to get started, but you keep complete control over the server, service worker, webpack config and everything else, so it's as flexible as you need it to be.</p>
|
||||
`
|
||||
}
|
||||
];
|
||||
|
||||
posts.forEach(post => {
|
||||
post.slug = post.title.toLowerCase().replace(/\W+/g, '-');
|
||||
post.html = post.html.replace(/^\t{3}/gm, '');
|
||||
});
|
||||
|
||||
export default posts;
|
||||
@ -1,12 +1,13 @@
|
||||
<script context="module">
|
||||
import posts from './a/_posts.js';
|
||||
import articles from './a/_articles.js';
|
||||
export async function preload()
|
||||
{
|
||||
return {articles: posts};
|
||||
return { articles };
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import FakeTweet from '../components/FakeTweet.svelte';
|
||||
export let articles;
|
||||
</script>
|
||||
|
||||
@ -103,6 +104,8 @@
|
||||
<p class="article-date">{new Date(date).toLocaleDateString()}</p>
|
||||
</div>
|
||||
</a>
|
||||
{:else}
|
||||
<FakeTweet message="No articles found. SAD!" author="Donald J. Trump" verified likes=1488 replies=6969 handle="realDonaldTrump" avatar="https://pbs.twimg.com/profile_images/874276197357596672/kUuht00m_400x400.jpg" />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -53,7 +53,6 @@ express()
|
||||
.post('/cms/login', passport.authenticate('local', {
|
||||
successRedirect: '/cms',
|
||||
failureRedirect: '/cms/login',
|
||||
failureFlash: true,
|
||||
}))
|
||||
.listen(PORT, err => {
|
||||
if (err) console.log('error', err);
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
<link rel='stylesheet' href='global.css'>
|
||||
<link rel='icon' type='image/png' href='favicon.png'>
|
||||
%sapper.styles%
|
||||
<link type='text/css' rel='stylesheet' href='https://platform.twitter.com/css/tweet.d41c1d7e4bac44f4658ca45d09564e79.light.ltr.css'>
|
||||
%sapper.head%
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user