LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

news section

This commit is contained in:
Karol Wypchlo 2021-04-01 00:37:02 +02:00
parent 767d0f4479
commit f9aa65e67a
13 changed files with 154 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/website/data/news/hello-world/index.md
View File

@ -2,6 +2,8 @@
title: Hello World
date: "2015-05-01T22:12:03.284Z"
description: "Hello World"
author: Nicole Tay
avatar: ../../team/nicole-tay.png
---
This is my first post on my new fake blog! How exciting!
@ -24,7 +26,7 @@ Oh, and here's a great quote from this Wikipedia on
You can also write code blocks here!
```js
const saltyDuckEgg = "chinese preserved food product"
const saltyDuckEgg = "chinese preserved food product";
```
| Number | Title | Year |

3
packages/website/data/news/my-second-post/index.md
View File

@ -1,6 +1,9 @@
---
title: My Second Post!
date: "2015-05-06T23:46:37.121Z"
description: Wow! I love blogging so much already.
author: Daniel Helm
avatar: ../../team/daniel-helm.png
---
Wow! I love blogging so much already.

2
packages/website/data/news/new-beginnings/index.md
View File

@ -2,6 +2,8 @@
title: New Beginnings
date: "2015-05-28T22:40:32.169Z"
description: This is a custom description for SEO and Open Graph purposes, rather than the default generated excerpt. Simply add a description field to the frontmatter.
author: Karol Wypchlo
avatar: ../../team/karol-wypchlo.png
---
Far far away, behind the word mountains, far from the countries Vokalia and

4
packages/website/data/news/premium-accounts/index.md
View File

@ -1,7 +1,9 @@
---
title: Skynet Introduces Premium Accounts, Sets the Foundation for New Creator Economies
date: "2021-04-01T22:12:03.284Z"
date: "2021-03-22"
description: "Premium accounts support creators while giving users up to 20 TB of data storage per month and other perks."
author: Manasi Vora
avatar: ../../team/manasi-vora.png
---
**BOSTON, Massachusetts, March 22, 2021** — Skynet Labs introduces new paid accounts and sets the stage for recursive content monetization. To celebrate, Skynet is giving out premium accounts to the first 100 users who sign up at siasky.net. The giveaway includes 1 TB of storage and 3 months of censorship-resistant file pinning. Skynet is a decentralized CDN and foundation for a new, decentralized internet. It is an open protocol for building decentralized applications, and is built on top of Sia, a decentralized storage network.

5
packages/website/gatsby-config.js
View File

@ -55,7 +55,7 @@ module.exports = {
options: {
classMap: {
heading: "font-semibold text-palette-600",
paragraph: "font-content text-palette-400",
paragraph: "font-content text-base text-palette-400",
strong: "font-semibold",
"heading[depth=1]": "text-4xl",
"heading[depth=2]": "text-3xl",
@ -115,4 +115,7 @@ module.exports = {
},
},
],
// mapping: {
// "MarkdownRemark.frontmatter.author": `teamYaml`,
// },
};

3
packages/website/gatsby-node.js
View File

@ -18,7 +18,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
// Define a template for news post
const PostTemplate = path.resolve(`./src/templates/news-post.js`);
// Get all markdown news posts sorted by date
// Get all markdown news posts sorted by date and all possible authors
const result = await graphql(
`
{
@ -107,6 +107,7 @@ exports.createSchemaCustomization = ({ actions }) => {
title: String
description: String
date: Date @dateformat
author: String
}
type Fields {
slug: String

1
packages/website/package.json
View File

@ -54,6 +54,7 @@
"react-dom": "^17.0.2",
"react-dropzone": "^11.3.2",
"react-helmet": "^6.1.0",
"react-share": "^4.4.0",
"react-svg-loader": "^3.0.3",
"react-syntax-highlighter": "^13.5.3",
"react-use": "^17.2.1",

4
packages/website/src/components/Carousel/Carousel.js
View File

@ -54,8 +54,8 @@ export const Carousel = ({ Component, items }) => {
<div className="relative overflow-hidden">
<div className="opacity-0 flex flex-row">
{items.map((item, index) => (
<div className="flex-shrink-0 w-screen">
<Component key={index} {...item} />
<div key={index} className="flex-shrink-0 w-screen">
<Component {...item} />
</div>
))}
</div>

14
packages/website/src/components/News/News.js Normal file
View File

@ -0,0 +1,14 @@
import * as React from "react";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
export function Aside({ avatar, author, date }) {
return (
<div className="flex space-x-4">
{avatar && <GatsbyImage image={getImage(avatar)} alt={author || "Skynet Labs Inc"} className="rounded-full" />}
<div className="flex flex-col text-xs justify-around h-10">
<div className="text-palette-600">{author || "Skynet Labs Inc"}</div>
{date && <div className="text-palette-400">{date}</div>}
</div>
</div>
);
}

1
packages/website/src/components/News/index.js Normal file
View File

@ -0,0 +1 @@
export * from "./News";

27
packages/website/src/components/NewsHeader/NewsHeader.js
View File

@ -1,18 +1,41 @@
import * as React from "react";
import { useStaticQuery, graphql } from "gatsby";
import Link from "../Link";
import { ArrowRight, DiscordSmallWhite } from "../Icons";
const NewsHeader = () => {
const { allMarkdownRemark } = useStaticQuery(graphql`
query LatestNewsQuery {
allMarkdownRemark(sort: { fields: frontmatter___date, order: DESC }, limit: 1) {
edges {
node {
id
frontmatter {
title
}
fields {
slug
}
}
}
}
}
`);
const [latestNews] = allMarkdownRemark.edges;
if (!latestNews) return null; // no news
return (
<div className="bg-palette-500 px-8 p-3">
<div className="max-w-layout mx-auto">
<div className="flex justify-between">
<Link
to="/news"
to={latestNews.node.fields.slug}
className="text-palette-300 font-content leading-8 flex items-center overflow-hidden text-base hover:text-primary transition-colors duration-200"
>
<ArrowRight className="mr-2 flex-shrink-0 fill-current text-primary" />
<span className="truncate">Skynet Announces SkyDB, Unlocking Fully Decentralized Internet</span>
<span className="truncate">{latestNews.node.frontmatter.title}</span>
</Link>
<div className="ml-auto items-center pl-8 hidden desktop:block">

60
packages/website/src/pages/news.js
View File

@ -1,14 +1,68 @@
import * as React from "react";
import { graphql } from "gatsby";
import Layout, { Section, SectionTitle } from "../components/Layout";
import { Aside } from "../components/News";
import Link from "../components/Link";
import SEO from "../components/seo";
const NewsPage = () => (
const NewsCard = ({ ...props }) => {
console.log(props);
return (
<div className="flex flex-col">
<img src="https://placekitten.com/320/170" />
<Link to={props.fields.slug} className="text-xl mt-6 hover:text-primary transition-colors duration-200">
{props.frontmatter.title}
</Link>
{props.frontmatter.description && (
<div className="font-content text-palette-400 mt-4">{props.frontmatter.description}</div>
)}
<div className="mt-6">
<Aside avatar={props.frontmatter.avatar} author={props.frontmatter.author} date={props.frontmatter.date} />
</div>
</div>
);
};
const NewsPage = ({ data }) => {
return (
<Layout>
<SEO title="News" />
<Section className="bg-white" first={true}>
<SectionTitle className="text-center py-48">News section coming soon!</SectionTitle>
<div className="grid grid-cols-1 desktop:grid-cols-3 gap-x-8 gap-y-24">
{data.allMarkdownRemark.edges.map(({ node }) => (
<NewsCard key={node.id} {...node} />
))}
</div>
</Section>
</Layout>
);
);
};
export const query = graphql`
query NewsQuery {
allMarkdownRemark(sort: { fields: frontmatter___date, order: DESC }) {
edges {
node {
id
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
description
author
avatar {
childImageSharp {
gatsbyImageData(width: 40, placeholder: BLURRED, formats: [AUTO, WEBP, AVIF])
}
}
}
fields {
slug
}
}
}
}
}
`;
export default NewsPage;

39
packages/website/src/templates/news-post.js
View File

@ -1,14 +1,18 @@
import * as React from "react";
import { Link, graphql } from "gatsby";
import Bio from "../components/bio";
import { graphql } from "gatsby";
import Layout, { Section, SectionTitle } from "../components/Layout";
import { Aside } from "../components/News";
import SEO from "../components/seo";
import { TwitterShareButton, LinkedinShareButton, FacebookShareButton } from "react-share";
import { TwitterSmall, LinkedinSmall, FacebookSmall } from "../components/Icons";
const BlogPostTemplate = ({ data, location }) => {
const post = data.markdownRemark;
const siteTitle = data.site.siteMetadata?.title || `Title`;
// const { previous, next } = data;
console.log(post);
return (
<Layout location={location} title={siteTitle}>
<SEO title={post.frontmatter.title} description={post.frontmatter.description || post.excerpt} />
@ -18,11 +22,26 @@ const BlogPostTemplate = ({ data, location }) => {
{post.frontmatter.title}
</SectionTitle>
<section
dangerouslySetInnerHTML={{ __html: post.html }}
itemProp="articleBody"
className="max-w-tablet ml-auto"
/>
<div className="grid grid-cols-3 gap-8">
<aside className="space-y-5">
<Aside avatar={post.frontmatter.avatar} author={post.frontmatter.author} date={post.frontmatter.date} />
<hr className="text-palette-200" />
<div className="flex items-center">
<div class="text-xs uppercase mr-4">Share</div>
<TwitterShareButton url={location.href} title={post.frontmatter.title}>
<TwitterSmall />
</TwitterShareButton>
<LinkedinShareButton url={location.href} title={post.frontmatter.title}>
<LinkedinSmall />
</LinkedinShareButton>
</div>
</aside>
<section dangerouslySetInnerHTML={{ __html: post.html }} itemProp="articleBody" className="col-span-2" />
</div>
</article>
</Section>
</Layout>
@ -46,6 +65,12 @@ export const pageQuery = graphql`
title
date(formatString: "MMMM DD, YYYY")
description
author
avatar {
childImageSharp {
gatsbyImageData(width: 40, placeholder: BLURRED, formats: [AUTO, WEBP, AVIF])
}
}
}
}
previous: markdownRemark(id: { eq: $previousPostId }) {