diff --git a/packages/website/data/news/hello-world/index.md b/packages/website/data/news/hello-world/index.md new file mode 100644 index 00000000..e30ec3c5 --- /dev/null +++ b/packages/website/data/news/hello-world/index.md @@ -0,0 +1,231 @@ +--- +title: Hello World +date: "2015-05-01T22:12:03.284Z" +description: "Hello World" +--- + +This is my first post on my new fake blog! How exciting! + +I'm sure I'll write a lot more interesting things in the future. + +Oh, and here's a great quote from this Wikipedia on +[salted duck eggs](https://en.wikipedia.org/wiki/Salted_duck_egg). + +> A salted duck egg is a Chinese preserved food product made by soaking duck +> eggs in brine, or packing each egg in damp, salted charcoal. In Asian +> supermarkets, these eggs are sometimes sold covered in a thick layer of salted +> charcoal paste. The eggs may also be sold with the salted paste removed, +> wrapped in plastic, and vacuum packed. From the salt curing process, the +> salted duck eggs have a briny aroma, a gelatin-like egg white and a +> firm-textured, round yolk that is bright orange-red in color. + +![Chinese Salty Egg](./salty_egg.jpg) + +You can also write code blocks here! + +```js +const saltyDuckEgg = "chinese preserved food product" +``` + +| Number | Title | Year | +| :----- | :--------------------------------------- | ---: | +| 1 | Harry Potter and the Philosopher’s Stone | 2001 | +| 2 | Harry Potter and the Chamber of Secrets | 2002 | +| 3 | Harry Potter and the Prisoner of Azkaban | 2004 | + +[View raw (TEST.md)](https://raw.github.com/adamschwartz/github-markdown-kitchen-sink/master/README.md) + +This is a paragraph. + + This is a paragraph. + +# Header 1 + +## Header 2 + + Header 1 + ======== + + Header 2 + -------- + +# Header 1 + +## Header 2 + +### Header 3 + +#### Header 4 + +##### Header 5 + +###### Header 6 + + # Header 1 + ## Header 2 + ### Header 3 + #### Header 4 + ##### Header 5 + ###### Header 6 + +# Header 1 + +## Header 2 + +### Header 3 + +#### Header 4 + +##### Header 5 + +###### Header 6 + + # Header 1 # + ## Header 2 ## + ### Header 3 ### + #### Header 4 #### + ##### Header 5 ##### + ###### Header 6 ###### + +> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. + + > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. + +> ## This is a header. +> +> 1. This is the first list item. +> 2. This is the second list item. +> +> Here's some example code: +> +> Markdown.generate(); + + > ## This is a header. + > 1. This is the first list item. + > 2. This is the second list item. + > + > Here's some example code: + > + > Markdown.generate(); + +- Red +- Green +- Blue + +* Red +* Green +* Blue + +- Red +- Green +- Blue + +```markdown +- Red +- Green +- Blue + +* Red +* Green +* Blue + +- Red +- Green +- Blue +``` + +- `code goes` here in this line +- **bold** goes here + +```markdown +- `code goes` here in this line +- **bold** goes here +``` + +1. Buy flour and salt +1. Mix together with water +1. Bake + +```markdown +1. Buy flour and salt +1. Mix together with water +1. Bake +``` + +1. `code goes` here in this line +1. **bold** goes here + +```markdown +1. `code goes` here in this line +1. **bold** goes here +``` + +Paragraph: + + Code + + + + Paragraph: + + Code + +--- + +--- + +--- + +--- + +--- + + * * * + + *** + + ***** + + - - - + + --------------------------------------- + +This is [an example](http://example.com "Example") link. + +[This link](http://example.com) has no title attr. + +This is [an example][id] reference-style link. + +[id]: http://example.com "Optional Title" + + This is [an example](http://example.com "Example") link. + + [This link](http://example.com) has no title attr. + + This is [an example] [id] reference-style link. + + [id]: http://example.com "Optional Title" + +_single asterisks_ + +_single underscores_ + +**double asterisks** + +**double underscores** + + *single asterisks* + + _single underscores_ + + **double asterisks** + + __double underscores__ + +This paragraph has some `code` in it. + + This paragraph has some `code` in it. + +![Alt Text](https://placehold.it/200x50 "Image Title") + + ![Alt Text](https://placehold.it/200x50 "Image Title") diff --git a/packages/website/data/news/hello-world/salty_egg.jpg b/packages/website/data/news/hello-world/salty_egg.jpg new file mode 100644 index 00000000..653fe7e8 Binary files /dev/null and b/packages/website/data/news/hello-world/salty_egg.jpg differ diff --git a/packages/website/data/news/my-second-post/index.md b/packages/website/data/news/my-second-post/index.md new file mode 100644 index 00000000..196dc57b --- /dev/null +++ b/packages/website/data/news/my-second-post/index.md @@ -0,0 +1,13 @@ +--- +title: My Second Post! +date: "2015-05-06T23:46:37.121Z" +--- + +Wow! I love blogging so much already. + +Did you know that "despite its name, salted duck eggs can also be made from +chicken eggs, though the taste and texture will be somewhat different, and the +egg yolk will be less rich."? +([Wikipedia Link](https://en.wikipedia.org/wiki/Salted_duck_egg)) + +Yeah, I didn't either. diff --git a/packages/website/data/news/new-beginnings/index.md b/packages/website/data/news/new-beginnings/index.md new file mode 100644 index 00000000..86012ecc --- /dev/null +++ b/packages/website/data/news/new-beginnings/index.md @@ -0,0 +1,108 @@ +--- +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. +--- + +Far far away, behind the word mountains, far from the countries Vokalia and +Consonantia, there live the blind texts. Separated they live in Bookmarksgrove +right at the coast of the Semantics, a large language ocean. A small river named +Duden flows by their place and supplies it with the necessary regelialia. + +## On deer horse aboard tritely yikes and much + +The Big Oxmox advised her not to do so, because there were thousands of bad +Commas, wild Question Marks and devious Semikoli, but the Little Blind Text +didn’t listen. She packed her seven versalia, put her initial into the belt and +made herself on the way. + +- This however showed weasel +- Well uncritical so misled + - this is very interesting +- Goodness much until that fluid owl + +When she reached the first hills of the **Italic Mountains**, she had a last +view back on the skyline of her hometown _Bookmarksgrove_, the headline of +[Alphabet Village](http://google.com) and the subline of her own road, the Line +Lane. Pityful a rhetoric question ran over her cheek, then she continued her +way. On her way she met a copy. + +### Overlaid the jeepers uselessly much excluding + +But nothing the copy said could convince her and so it didn’t take long until a +few insidious Copy Writers ambushed her, made her drunk with +[Longe and Parole](http://google.com) and dragged her into their agency, where +they abused her for their projects again and again. And if she hasn’t been +rewritten, then they are still using her. + +> Far far away, behind the word mountains, far from the countries Vokalia and +> Consonantia, there live the blind texts. Separated they live in Bookmarksgrove +> right at the coast of the Semantics, a large language ocean. + +It is a paradisematic country, in which roasted parts of sentences fly into your +mouth. Even the all-powerful Pointing has no control about the blind texts it is +an almost unorthographic life One day however a small line of blind text by the +name of Lorem Ipsum decided to leave for the far World of Grammar. + +### According a funnily until pre-set or arrogant well cheerful + +The Big Oxmox advised her not to do so, because there were thousands of bad +Commas, wild Question Marks and devious Semikoli, but the Little Blind Text +didn’t listen. She packed her seven versalia, put her initial into the belt and +made herself on the way. + +1. So baboon this +2. Mounted militant weasel gregariously admonishingly straightly hey +3. Dear foresaw hungry and much some overhung +4. Rash opossum less because less some amid besides yikes jeepers frenetic + impassive fruitlessly shut + +When she reached the first hills of the Italic Mountains, she had a last view +back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet +Village and the subline of her own road, the Line Lane. Pityful a rhetoric +question ran over her cheek, then she continued her way. On her way she met a +copy. + +> The copy warned the Little Blind Text, that where it came from it would have +> been rewritten a thousand times and everything that was left from its origin +> would be the word "and" and the Little Blind Text should turn around and +> return to its own, safe country. + +But nothing the copy said could convince her and so it didn’t take long until a +few insidious Copy Writers ambushed her, made her drunk with Longe and Parole +and dragged her into their agency, where they abused her for their projects +again and again. And if she hasn’t been rewritten, then they are still using +her. Far far away, behind the word mountains, far from the countries Vokalia and +Consonantia, there live the blind texts. + +#### Silent delightfully including because before one up barring chameleon + +Separated they live in Bookmarksgrove right at the coast of the Semantics, a +large language ocean. A small river named Duden flows by their place and +supplies it with the necessary regelialia. It is a paradisematic country, in +which roasted parts of sentences fly into your mouth. + +Even the all-powerful Pointing has no control about the blind texts it is an +almost unorthographic life One day however a small line of blind text by the +name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox +advised her not to do so, because there were thousands of bad Commas, wild +Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. + +##### Wherever far wow thus a squirrel raccoon jeez jaguar this from along + +She packed her seven versalia, put her initial into the belt and made herself on +the way. When she reached the first hills of the Italic Mountains, she had a +last view back on the skyline of her hometown Bookmarksgrove, the headline of +Alphabet Village and the subline of her own road, the Line Lane. Pityful a +rhetoric question ran over her cheek, then she continued her way. On her way she +met a copy. + +###### Slapped cozy a that lightheartedly and far + +The copy warned the Little Blind Text, that where it came from it would have +been rewritten a thousand times and everything that was left from its origin +would be the word "and" and the Little Blind Text should turn around and return +to its own, safe country. But nothing the copy said could convince her and so it +didn’t take long until a few insidious Copy Writers ambushed her, made her drunk +with Longe and Parole and dragged her into their agency, where they abused her +for their projects again and again. diff --git a/packages/website/data/news/premium-accounts/index.md b/packages/website/data/news/premium-accounts/index.md new file mode 100644 index 00000000..43d17bcc --- /dev/null +++ b/packages/website/data/news/premium-accounts/index.md @@ -0,0 +1,24 @@ +--- +title: Skynet Introduces Premium Accounts, Sets the Foundation for New Creator Economies +date: "2021-04-01T22:12:03.284Z" +description: "Premium accounts support creators while giving users up to 20 TB of data storage per month and other perks." +--- + +**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. + +Soon, creators will be able to set the price per view or download of their work and earn directly from their blogs, photos, and videos in real time. In this way, recursive content monetization reduces artists’ dependency on traditional advertising to make ends meet. When users pay for premium accounts in fiat, they provide a steady revenue stream from which to pay out content creators. + +Application developers will also benefit from content monetization. Like content creators, developers can attach price tags to their applications. Per David Vorick, Skynet Labs CEO and Lead Developer, “We believe that developers and content creators alike should be able to earn income off of their hard work so long as they have users that appreciate what they do.” + +Skynet Labs has always been committed to the freedom of expression, information, and importantly, access. Therefore, Skynet’s Free account tier supporting up to 100 GB of data, seeks to ensure that financial barriers never prohibit users and developers from participating in the Skynet ecosystem. Once a user meets their data cap, service on Skynet will continue but at reduced speeds, in a way similar to data plans for smartphones. + +Overall, users can opt for one of three paid tiers: $5/month with 1 TB, $20/month with 4 TB, or $80/month with 20 TB of data. Skynet Premium also comes with significant performance boosts: users will be able to pin content and browse Skynet faster, in particular any pages with monetized content. The benefits of a premium account are not purely in performance—these users are actively fueling a new creator economy, and a revolution that gives creators everywhere the power they deserve. + +## About Skynet Labs  + +Skynet Labs, formerly known as Nebulous, builds uncompromising software infrastructure for the decentralized internet. This includes Sia, the leading decentralized cloud storage platform, and Skynet, a content hosting and application development platform. + +Skynet Labs defines uncompromising infrastructure as scalable, trustless, secure, and – most importantly – fully decentralized. In a blockchain industry filled with hype but lacking substance, Skynet Labs stands out as one of the few deeply technical teams that consistently delivers real products with significant potential. + +Nebulous, Inc. was founded in 2014 and is backed by Paradigm, Bain Capital Ventures, A.Capital, Bessemer Venture Partners, Dragonfly Capital Partners, First Star Ventures, and other notable investors. +Learn more at siasky.net, join us on Discord, and email us at hello@sia.tech. diff --git a/packages/website/gatsby-browser.js b/packages/website/gatsby-browser.js index df7ef48d..e27abcd4 100644 --- a/packages/website/gatsby-browser.js +++ b/packages/website/gatsby-browser.js @@ -10,4 +10,5 @@ import "@fontsource/sora/400.css"; // normal import "@fontsource/sora/500.css"; // medium import "@fontsource/sora/600.css"; // semibold import "@fontsource/source-sans-pro/400.css"; // normal +import "@fontsource/source-sans-pro/600.css"; // semibold import "./src/styles/global.css"; diff --git a/packages/website/gatsby-config.js b/packages/website/gatsby-config.js index c837af31..4b853d55 100644 --- a/packages/website/gatsby-config.js +++ b/packages/website/gatsby-config.js @@ -30,6 +30,13 @@ module.exports = { path: `${__dirname}/data/`, }, }, + { + resolve: `gatsby-source-filesystem`, + options: { + path: `${__dirname}/data/news`, + name: `news`, + }, + }, `gatsby-plugin-postcss`, `gatsby-plugin-react-helmet`, `gatsby-plugin-image`, @@ -39,7 +46,43 @@ module.exports = { `gatsby-transformer-sharp`, `gatsby-transformer-json`, `gatsby-transformer-yaml`, - `gatsby-transformer-remark`, + { + resolve: `gatsby-transformer-remark`, + options: { + plugins: [ + { + resolve: `gatsby-remark-classes`, + options: { + classMap: { + heading: "font-semibold text-palette-600", + paragraph: "font-content text-palette-400", + strong: "font-semibold", + "heading[depth=1]": "text-4xl", + "heading[depth=2]": "text-3xl", + "paragraph + paragraph": "mt-8", + "paragraph + heading": "mt-24", + "heading + paragraph": "mt-12", + }, + }, + }, + { + resolve: `gatsby-remark-images`, + options: { + maxWidth: 630, + }, + }, + { + resolve: `gatsby-remark-responsive-iframe`, + options: { + wrapperStyle: `margin-bottom: 1.0725rem`, + }, + }, + `gatsby-remark-prismjs`, + `gatsby-remark-copy-linked-files`, + `gatsby-remark-smartypants`, + ], + }, + }, { resolve: `gatsby-plugin-manifest`, options: { diff --git a/packages/website/gatsby-node.js b/packages/website/gatsby-node.js index 5dcb9b17..1b3ec920 100644 --- a/packages/website/gatsby-node.js +++ b/packages/website/gatsby-node.js @@ -1,8 +1,5 @@ -/** - * Implement Gatsby's Node APIs in this file. - * - * See: https://www.gatsbyjs.com/docs/node-apis/ - */ +const path = require(`path`); +const { createFilePath } = require(`gatsby-source-filesystem`); exports.onCreateWebpackConfig = ({ actions }) => { actions.setWebpackConfig({ @@ -14,3 +11,105 @@ exports.onCreateWebpackConfig = ({ actions }) => { }, }); }; + +exports.createPages = async ({ graphql, actions, reporter }) => { + const { createPage } = actions; + + // Define a template for news post + const PostTemplate = path.resolve(`./src/templates/news-post.js`); + + // Get all markdown news posts sorted by date + const result = await graphql( + ` + { + allMarkdownRemark(sort: { fields: [frontmatter___date], order: ASC }, limit: 1000) { + nodes { + id + fields { + slug + } + } + } + } + ` + ); + + if (result.errors) { + reporter.panicOnBuild(`There was an error loading your news posts`, result.errors); + return; + } + + const posts = result.data.allMarkdownRemark.nodes; + + // Create news posts pages + // But only if there's at least one markdown file found at "/data/news" (defined in gatsby-config.js) + // `context` is available in the template as a prop and as a variable in GraphQL + + if (posts.length > 0) { + posts.forEach((post, index) => { + const previousPostId = index === 0 ? null : posts[index - 1].id; + const nextPostId = index === posts.length - 1 ? null : posts[index + 1].id; + + createPage({ + path: post.fields.slug, + component: PostTemplate, + context: { + id: post.id, + previousPostId, + nextPostId, + }, + }); + }); + } +}; + +exports.onCreateNode = ({ node, actions, getNode }) => { + const { createNodeField } = actions; + + if (node.internal.type === `MarkdownRemark`) { + const value = createFilePath({ node, getNode }); + + createNodeField({ + name: `slug`, + node, + value, + }); + } +}; + +exports.createSchemaCustomization = ({ actions }) => { + const { createTypes } = actions; + + // Explicitly define the siteMetadata {} object + // This way those will always be defined even if removed from gatsby-config.js + + // Also explicitly define the Markdown frontmatter + // This way the "MarkdownRemark" queries will return `null` even when no + // news posts are stored inside "/data/news" instead of returning an error + createTypes(` + type SiteSiteMetadata { + author: String + siteUrl: String + social: Social + } + type Author { + name: String + summary: String + } + type Social { + twitter: String + } + type MarkdownRemark implements Node { + frontmatter: Frontmatter + fields: Fields + } + type Frontmatter { + title: String + description: String + date: Date @dateformat + } + type Fields { + slug: String + } + `); +}; diff --git a/packages/website/package.json b/packages/website/package.json index 1b5478d8..a5600054 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -28,6 +28,12 @@ "gatsby-plugin-react-svg": "^3.0.0", "gatsby-plugin-robots-txt": "^1.5.5", "gatsby-plugin-sharp": "^3.1.2", + "gatsby-remark-classes": "^1.0.0", + "gatsby-remark-copy-linked-files": "^3.2.0", + "gatsby-remark-images": "^4.2.0", + "gatsby-remark-prismjs": "^4.2.0", + "gatsby-remark-responsive-iframe": "^3.2.0", + "gatsby-remark-smartypants": "^3.2.0", "gatsby-source-filesystem": "^3.0.0", "gatsby-transformer-json": "^3.1.0", "gatsby-transformer-remark": "^3.2.0", diff --git a/packages/website/src/components/bio.js b/packages/website/src/components/bio.js new file mode 100644 index 00000000..bba25ebd --- /dev/null +++ b/packages/website/src/components/bio.js @@ -0,0 +1,53 @@ +/** + * Bio component that queries for data + * with Gatsby's useStaticQuery component + * + * See: https://www.gatsbyjs.com/docs/use-static-query/ + */ + +import * as React from "react"; +import { useStaticQuery, graphql } from "gatsby"; +import { StaticImage } from "gatsby-plugin-image"; + +const Bio = () => { + const data = useStaticQuery(graphql` + query BioQuery { + site { + siteMetadata { + author + social { + twitter + } + } + } + } + `); + + // Set these values by editing "siteMetadata" in gatsby-config.js + const author = data.site.siteMetadata?.author; + const social = data.site.siteMetadata?.social; + + return ( +
+ + {author && ( +

+ Written by {author} + {` `} + You should follow them on Twitter +

+ )} +
+ ); +}; + +export default Bio; diff --git a/packages/website/src/images/profile-pic.png b/packages/website/src/images/profile-pic.png new file mode 100644 index 00000000..6866511d Binary files /dev/null and b/packages/website/src/images/profile-pic.png differ diff --git a/packages/website/src/pages/about.js b/packages/website/src/pages/about.js index f885d3fa..3a469aac 100644 --- a/packages/website/src/pages/about.js +++ b/packages/website/src/pages/about.js @@ -197,10 +197,12 @@ const AboutPage = ({ ...props }) => { decentralized internet -
+
+
+

Skynet is an open protocol and toolkit for creating a better web-one built on decentralized storage and diff --git a/packages/website/src/services/useBreakpoint.js b/packages/website/src/services/useBreakpoint.js new file mode 100644 index 00000000..a862225b --- /dev/null +++ b/packages/website/src/services/useBreakpoint.js @@ -0,0 +1,12 @@ +import { createBreakpoint } from "react-use"; + +export default createBreakpoint({ + sm: "640px", + tablet: "640px", + md: "768px", + lg: "1024px", + desktop: "1024px", + xl: "1280px", + hires: "1408px", + "2xl": "1536px", +}); diff --git a/packages/website/src/templates/news-post.js b/packages/website/src/templates/news-post.js new file mode 100644 index 00000000..82e1fbc6 --- /dev/null +++ b/packages/website/src/templates/news-post.js @@ -0,0 +1,68 @@ +import * as React from "react"; +import { Link, graphql } from "gatsby"; +import Bio from "../components/bio"; +import Layout, { Section, SectionTitle } from "../components/Layout"; +import SEO from "../components/seo"; + +const BlogPostTemplate = ({ data, location }) => { + const post = data.markdownRemark; + const siteTitle = data.site.siteMetadata?.title || `Title`; + // const { previous, next } = data; + + return ( + + +

+
+ + {post.frontmatter.title} + + +
+
+
+ + ); +}; + +export default BlogPostTemplate; + +export const pageQuery = graphql` + query BlogPostBySlug($id: String!, $previousPostId: String, $nextPostId: String) { + site { + siteMetadata { + title + } + } + markdownRemark(id: { eq: $id }) { + id + excerpt(pruneLength: 160) + html + frontmatter { + title + date(formatString: "MMMM DD, YYYY") + description + } + } + previous: markdownRemark(id: { eq: $previousPostId }) { + fields { + slug + } + frontmatter { + title + } + } + next: markdownRemark(id: { eq: $nextPostId }) { + fields { + slug + } + frontmatter { + title + } + } + } +`;