mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-04 09:28:11 +00:00
get rid of gatsby
This commit is contained in:
Brandon Thomas committed
1 parent
a2296db2d4
commit
95ebf2bec0
43 files changed
-13466
No files matched your search
@@ -1,6 +0,0 @@
|
||||
node_modules/
|
||||
.cache/
|
||||
.vscode
|
||||
public
|
||||
dist
|
||||
src/gatsby-types.d.ts
|
||||
@@ -1 +0,0 @@
|
||||
18.18.0
|
||||
@@ -1,11 +0,0 @@
|
||||
{
|
||||
"plugins": ["prettier-plugin-tailwindcss"],
|
||||
"semi": true,
|
||||
"singleQuote": false,
|
||||
"trailingComma": "all",
|
||||
"bracketSpacing": true,
|
||||
"bracketSameLine": false,
|
||||
"arrowParens": "always",
|
||||
"useTabs": false,
|
||||
"tabWidth": 2
|
||||
}
|
||||
@@ -1,129 +0,0 @@
|
||||
# Blogger README
|
||||
|
||||
## Development
|
||||
|
||||
To run the code:
|
||||
|
||||
```bash
|
||||
yarn # to install packages
|
||||
yarn develop # run development
|
||||
```
|
||||
|
||||
To edit the code, everything is in the `src` directory.
|
||||
|
||||
!! Do not touch the `gatsby-types.d.ts` file, that is autogeneratedby **Gatsby** to help your typescript development.
|
||||
|
||||
## Post Writing Guide
|
||||
|
||||
### File Structure
|
||||
|
||||
It is important for you to put the right file in the right place so then **Gastby** can go through them to build the entire blog, please remember that our entire deployment are static files, so, the source material has to be placed correctly in order to get a proper deployment
|
||||
|
||||
```bash
|
||||
#Simply put, every post has to be included in posts
|
||||
|
||||
gatsby-blog/ # package root
|
||||
├─ node_modules/
|
||||
├─ posts/ # all posts must be put in this directory
|
||||
│ ├─ post_1.mdx # a post can be as simple as an MDX file
|
||||
│ ├─ post_2/ # if a post has multiple files, make a directory
|
||||
│ ├─ index.mdx # the MDX file contains the main write-up, it has to be named "index.mdx"
|
||||
│ ├─ image_a.png # all the images and other assets should be included in the same directory
|
||||
│ ├─ image_b.jpg
|
||||
│
|
||||
⋮
|
||||
├─ src/ # this is where the source code of the blog goes, please DO NOT TOUCH
|
||||
├─ .gitignore
|
||||
├─ package.json
|
||||
├─ README.md # this very file
|
||||
|
||||
```
|
||||
|
||||
### MDX writing
|
||||
|
||||
So, firstly, an MDX file does everything an MD file did. we assume you already know how to write in the Markdown format (.MD files), here's is a reference to the [basic syntax](https://www.markdownguide.org/basic-syntax/) just in case things slipped my memory.
|
||||
|
||||
Then secondly, the X in the MD**X**! It makes 3 things possible:-
|
||||
|
||||
1. **_Frontmatter metadata_** - **Utmost Important**, on every post you write, you **NEED** to fill this in
|
||||
2. **_JSX Injections_** - namesake of the **X** in MD**X**, it makes making extremely fancy html pages alongside the regular MD text possible, but dont worry about this it's just not a thing we want to do everyday.
|
||||
3. **_Shortcode Injections_** - Simplified version of **_pt2_**; some features such as `<Links .../>` and `<Youtube ... embeds/>, it's made possible via this feature.
|
||||
|
||||
#### Frontmatter Metadata
|
||||
|
||||
At the top of each MDX file, you fill in the metadata in between 2 breaks consists of 3 dashes `---`, like this:
|
||||
|
||||
```md
|
||||
---
|
||||
title: News Post 1
|
||||
slug: /news-1
|
||||
date: 2024-07-25
|
||||
author: wil
|
||||
category: news
|
||||
---
|
||||
|
||||
# Post Title
|
||||
|
||||
rest of doc
|
||||
⋮
|
||||
⋮
|
||||
end of doc
|
||||
```
|
||||
|
||||
There is not any limitation to what could be filled in as metadata from the MDX perspective, it depends on our blog system, in which, here are the metadata our blog needs:
|
||||
|
||||
```
|
||||
---
|
||||
title: <string> # required
|
||||
slug: <string:path> # required see slug path
|
||||
date: <string:YYYY-MM-DD> # required, eg: 2024-07-29
|
||||
category: <string:category> # required, category: see categories
|
||||
featured: <boolean> # optional, boolean: "true" / "false"
|
||||
author: <string:author/any> # optional, author: see authors
|
||||
featuredImage: <string:path> # optional, see image path
|
||||
tags: <string:csv> # optional, see tags
|
||||
---
|
||||
```
|
||||
|
||||
##### Required Field
|
||||
|
||||
if you missed an required field, this post will still be compiled, but it will not show up on any of our blog rolls
|
||||
|
||||
##### Categories
|
||||
|
||||
We have different blog-roll pages for different type of blog-posts, and this depends on the category field, the currently available categories are:
|
||||
|
||||
- blog
|
||||
- news
|
||||
|
||||
##### Featured
|
||||
|
||||
In some blog-roll pages, we have featured articles, if a post has the following field:
|
||||
|
||||
```
|
||||
featured: true
|
||||
```
|
||||
|
||||
It will should up first in its blog-roll as a featured article
|
||||
|
||||
##### Author
|
||||
|
||||
We could put any string in here, but if you provide us your author tag name and thumbnail, we can put it in the system. So then, when you use a name that is in the system, you can get a thumbnail, it is also **_potentially_** possible to click your name into _a page that consists of all your post_
|
||||
|
||||
!! author pages is yet to be implemented
|
||||
|
||||
##### Featured Image
|
||||
|
||||
The featured image will show up as the thumbnail of the posts in its blog-roll, and also as the top hero image in the blog-post-page, just refere to the image from your post's directory like the following
|
||||
|
||||
```
|
||||
featuredImage: "./2D_many_phases.png"
|
||||
```
|
||||
|
||||
If you do not provide a featured image, on its corresponding blog-rolls, a placeholder would would be shown as its thumbnail; in the post, there will be no hero image.
|
||||
|
||||
##### Tags
|
||||
|
||||
This is important for the related posts section at the end of each blog posts. Let's try to cooperated during stand-up meetings and make sure we are making new tags that we can re-use to futher categorize posts in a category.
|
||||
|
||||
Bottomline being, e.g. when you are on _post-a_, how does its _related posts_ section knows that _post-b_ should be shown? It is simply because they have the same values in their **_Tags_** field.
|
||||
@@ -1,29 +0,0 @@
|
||||
---
|
||||
title: The Best TTS Websites
|
||||
metaText: this is a test meta text.
|
||||
slug: /ai-tools/best-tts-websites
|
||||
date: 2024-07-23
|
||||
featured: true
|
||||
author: Wil
|
||||
category: ai-tools
|
||||
---
|
||||
|
||||
## Heading 2
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac neque enim. Nam eget diam sit amet elit aliquet iaculis a id magna. Etiam sit amet tortor libero. Curabitur fringilla ullamcorper magna at ultrices. Aliquam erat volutpat. Fusce sit amet libero maximus, scelerisque dui et, bibendum mi.
|
||||
|
||||
Mauris justo diam, facilisis sed consequat eu, porttitor in risus. Curabitur in
|
||||
tempor quam, sit amet pellentesque ex. Proin porta lobortis nulla, vitae tempor
|
||||
lorem accumsan vitae. Integer pulvinar aliquam mauris et tempus. Vivamus
|
||||
accumsan facilisis nisi. Aenean quam justo, finibus nec ipsum ut, porttitor
|
||||
vulputate nunc. Suspendisse a mi in odio dignissim lacinia in in risus. Nam
|
||||
ultrices nulla eget justo malesuada viverra.
|
||||
|
||||
### Heading 3
|
||||
|
||||
Quis ligula sem pellentesque ornare eleifend per curabitur quam. Est potenti augue facilisis mi diam. Cras dignissim turpis erat dictum fermentum aptent. Non proin pharetra semper turpis a ipsum mi euismod. Venenatis potenti eleifend auctor dictum neque felis. Quis purus dui lacus fringilla potenti. Ex tempus etiam mus nulla, sociosqu netus lacus ac. Nulla suspendisse fusce dolor nibh faucibus magnis. Sem habitant sed lorem per dictum.
|
||||
|
||||
|
||||
|
||||
<Youtube videoId="amPMMEAmf0Q" />
|
||||
end of doc
|
||||
@@ -1,29 +0,0 @@
|
||||
---
|
||||
title: The Best Video Lipsync AI Tools
|
||||
metaText: this is a test meta text.
|
||||
slug: /ai-tools/best-video-lipsync-ai-tools
|
||||
date: 2024-07-23
|
||||
featured: true
|
||||
author: Wil
|
||||
category: ai-tools
|
||||
---
|
||||
|
||||
## Heading 2
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac neque enim. Nam eget diam sit amet elit aliquet iaculis a id magna. Etiam sit amet tortor libero. Curabitur fringilla ullamcorper magna at ultrices. Aliquam erat volutpat. Fusce sit amet libero maximus, scelerisque dui et, bibendum mi.
|
||||
|
||||
Mauris justo diam, facilisis sed consequat eu, porttitor in risus. Curabitur in
|
||||
tempor quam, sit amet pellentesque ex. Proin porta lobortis nulla, vitae tempor
|
||||
lorem accumsan vitae. Integer pulvinar aliquam mauris et tempus. Vivamus
|
||||
accumsan facilisis nisi. Aenean quam justo, finibus nec ipsum ut, porttitor
|
||||
vulputate nunc. Suspendisse a mi in odio dignissim lacinia in in risus. Nam
|
||||
ultrices nulla eget justo malesuada viverra.
|
||||
|
||||
### Heading 3
|
||||
|
||||
Quis ligula sem pellentesque ornare eleifend per curabitur quam. Est potenti augue facilisis mi diam. Cras dignissim turpis erat dictum fermentum aptent. Non proin pharetra semper turpis a ipsum mi euismod. Venenatis potenti eleifend auctor dictum neque felis. Quis purus dui lacus fringilla potenti. Ex tempus etiam mus nulla, sociosqu netus lacus ac. Nulla suspendisse fusce dolor nibh faucibus magnis. Sem habitant sed lorem per dictum.
|
||||
|
||||
|
||||
|
||||
<Youtube videoId="amPMMEAmf0Q" />
|
||||
end of doc
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 MiB |
@@ -1,30 +0,0 @@
|
||||
---
|
||||
title: Blog Post 1
|
||||
metaText: this is a test meta text.
|
||||
slug: /blog/post-1
|
||||
date: 2024-07-23
|
||||
featured: true
|
||||
featuredImage: "./2D_many_phases.png"
|
||||
author: Wil
|
||||
category: blog
|
||||
---
|
||||
|
||||
## Heading 2
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac neque enim. Nam eget diam sit amet elit aliquet iaculis a id magna. Etiam sit amet tortor libero. Curabitur fringilla ullamcorper magna at ultrices. Aliquam erat volutpat. Fusce sit amet libero maximus, scelerisque dui et, bibendum mi.
|
||||
|
||||
Mauris justo diam, facilisis sed consequat eu, porttitor in risus. Curabitur in
|
||||
tempor quam, sit amet pellentesque ex. Proin porta lobortis nulla, vitae tempor
|
||||
lorem accumsan vitae. Integer pulvinar aliquam mauris et tempus. Vivamus
|
||||
accumsan facilisis nisi. Aenean quam justo, finibus nec ipsum ut, porttitor
|
||||
vulputate nunc. Suspendisse a mi in odio dignissim lacinia in in risus. Nam
|
||||
ultrices nulla eget justo malesuada viverra.
|
||||
|
||||
### Heading 3
|
||||
|
||||
Quis ligula sem pellentesque ornare eleifend per curabitur quam. Est potenti augue facilisis mi diam. Cras dignissim turpis erat dictum fermentum aptent. Non proin pharetra semper turpis a ipsum mi euismod. Venenatis potenti eleifend auctor dictum neque felis. Quis purus dui lacus fringilla potenti. Ex tempus etiam mus nulla, sociosqu netus lacus ac. Nulla suspendisse fusce dolor nibh faucibus magnis. Sem habitant sed lorem per dictum.
|
||||
|
||||
|
||||
|
||||
<Youtube videoId="amPMMEAmf0Q" />
|
||||
end of doc
|
||||
@@ -1,10 +0,0 @@
|
||||
---
|
||||
title: Blog Post 2
|
||||
slug: /blog/post-2
|
||||
date: 2024-07-24
|
||||
---
|
||||
|
||||
# Foobar
|
||||
|
||||
this is the 2nd post as a prove of concept
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
import "./src/styles/global.css"
|
||||
@@ -1,71 +0,0 @@
|
||||
import type { GatsbyConfig } from "gatsby";
|
||||
import path from "path";
|
||||
|
||||
const config: GatsbyConfig = {
|
||||
siteMetadata: {
|
||||
title: `Storyteller AI Blog`,
|
||||
siteUrl: `https://www.yourdomain.tld`,
|
||||
},
|
||||
//pathPrefix: `/blog`,
|
||||
// More easily incorporate content into your pages through automatic TypeScript type generation and better GraphQL IntelliSense.
|
||||
// If you use VSCode you can also use the GraphQL plugin
|
||||
// Learn more at: https://gatsby.dev/graphql-typegen
|
||||
graphqlTypegen: true,
|
||||
plugins: [
|
||||
"gatsby-plugin-postcss",
|
||||
"gatsby-plugin-image",
|
||||
"gatsby-plugin-sitemap",
|
||||
"gatsby-plugin-sharp",
|
||||
"gatsby-transformer-sharp",
|
||||
{
|
||||
resolve: "gatsby-plugin-manifest",
|
||||
options: {
|
||||
icon: `${__dirname}/src/images/icon.png`,
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-plugin-mdx`,
|
||||
options: {
|
||||
gatsbyRemarkPlugins: [
|
||||
{
|
||||
resolve: `gatsby-remark-images`,
|
||||
options: {
|
||||
maxWidth: 1200,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: "gatsby-source-filesystem",
|
||||
options: {
|
||||
name: "images",
|
||||
path: `${__dirname}/src/images/`,
|
||||
},
|
||||
__key: "images",
|
||||
},
|
||||
{
|
||||
resolve: "gatsby-source-filesystem",
|
||||
options: {
|
||||
name: "pages",
|
||||
path: `${__dirname}/src/pages/`,
|
||||
},
|
||||
__key: "pages",
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-source-filesystem`,
|
||||
options: {
|
||||
name: `posts`,
|
||||
path: `${__dirname}/articles/fakeyou`,
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: "gatsby-plugin-resolve-src",
|
||||
options: {
|
||||
srcPath: path.resolve(__dirname, "src"),
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -1,57 +0,0 @@
|
||||
const path = require("path");
|
||||
const postTemplate = path.resolve(
|
||||
`${__dirname}/src/components/postTemplate.tsx`,
|
||||
);
|
||||
|
||||
exports.createPages = async ({ graphql, actions, reporter }) => {
|
||||
const { createPage } = actions;
|
||||
|
||||
const result = await graphql(`
|
||||
query {
|
||||
allMdx {
|
||||
nodes {
|
||||
id
|
||||
frontmatter {
|
||||
title
|
||||
slug
|
||||
date(formatString: "MMMM DD, YYYY")
|
||||
}
|
||||
internal {
|
||||
contentFilePath
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
|
||||
exports.onCreateWebpackConfig = ({ actions }) => {
|
||||
actions.setWebpackConfig({
|
||||
resolve: {
|
||||
alias: {
|
||||
"@babel/runtime": require.resolve("@babel/runtime"),
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
if (result.errors) {
|
||||
reporter.panicOnBuild("Error loading MDX result", result.errors);
|
||||
}
|
||||
|
||||
// Create blog post pages.
|
||||
const posts = result.data.allMdx.nodes;
|
||||
|
||||
// you'll call `createPage` for each result
|
||||
posts.forEach((node) => {
|
||||
createPage({
|
||||
// As mentioned above you could also query something else like frontmatter.title above and use a helper function
|
||||
// like slugify to create a slug
|
||||
path: node.frontmatter.slug,
|
||||
// Provide the path to the MDX content file so webpack can pick it up and transform it into JSX
|
||||
component: `${postTemplate}?__contentFilePath=${node.internal.contentFilePath}`,
|
||||
// You can use the values in this context in
|
||||
// our page layout component
|
||||
context: { id: node.id },
|
||||
});
|
||||
});
|
||||
};
|
||||
@@ -1,53 +0,0 @@
|
||||
{
|
||||
"name": "storyteller-ai-blog",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"description": "storyteller-ai-blog",
|
||||
"author": "wil",
|
||||
"keywords": [
|
||||
"gatsby"
|
||||
],
|
||||
"scripts": {
|
||||
"develop": "gatsby develop",
|
||||
"start": "gatsby develop",
|
||||
"build": "gatsby build",
|
||||
"serve": "gatsby serve",
|
||||
"build-pp": "gatsby build --prefix-paths",
|
||||
"serve-pp": "gatsby serve --prefix-paths",
|
||||
"clean": "gatsby clean",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.25.0",
|
||||
"@fortawesome/fontawesome-svg-core": "6.2.1",
|
||||
"@fortawesome/free-brands-svg-icons": "6.2.1",
|
||||
"@fortawesome/free-solid-svg-icons": "6.2.1",
|
||||
"@fortawesome/react-fontawesome": "^0.2.2",
|
||||
"@mdx-js/react": "^3.0.1",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"gatsby": "^5.13.5",
|
||||
"gatsby-plugin-image": "^3.13.1",
|
||||
"gatsby-plugin-manifest": "^5.13.1",
|
||||
"gatsby-plugin-mdx": "^5.13.1",
|
||||
"gatsby-plugin-postcss": "^6.13.1",
|
||||
"gatsby-plugin-resolve-src": "^2.1.0",
|
||||
"gatsby-plugin-sharp": "^5.13.1",
|
||||
"gatsby-plugin-sitemap": "^6.13.1",
|
||||
"gatsby-remark-images": "^7.13.1",
|
||||
"gatsby-source-filesystem": "^5.13.1",
|
||||
"gatsby-transformer-sharp": "^5.13.1",
|
||||
"postcss": "^8.4.39",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"tailwind-merge": "^2.4.0",
|
||||
"tailwindcss": "^3.4.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.11.19",
|
||||
"@types/react": "^18.2.55",
|
||||
"@types/react-dom": "^18.2.19",
|
||||
"prettier": "^3.3.3",
|
||||
"prettier-plugin-tailwindcss": "^0.6.5",
|
||||
"typescript": "^5.3.3"
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
---
|
||||
title: News Post 1
|
||||
slug: /news-1
|
||||
date: 2024-07-25
|
||||
author: wil
|
||||
category: news
|
||||
---
|
||||
|
||||
# Breaking News
|
||||
|
||||
this is a post that has the category of `news`
|
||||
|
||||
|
||||
|
||||
|
||||
end of doc
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 MiB |
@@ -1,30 +0,0 @@
|
||||
---
|
||||
title: Blog Post 1
|
||||
metaText: this is a test meta text.
|
||||
slug: /blog-1
|
||||
date: 2024-07-23
|
||||
featured: true
|
||||
featuredImage: "./2D_many_phases.png"
|
||||
author: Wil
|
||||
category: blog
|
||||
---
|
||||
|
||||
## Heading 2
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac neque enim. Nam eget diam sit amet elit aliquet iaculis a id magna. Etiam sit amet tortor libero. Curabitur fringilla ullamcorper magna at ultrices. Aliquam erat volutpat. Fusce sit amet libero maximus, scelerisque dui et, bibendum mi.
|
||||
|
||||
Mauris justo diam, facilisis sed consequat eu, porttitor in risus. Curabitur in
|
||||
tempor quam, sit amet pellentesque ex. Proin porta lobortis nulla, vitae tempor
|
||||
lorem accumsan vitae. Integer pulvinar aliquam mauris et tempus. Vivamus
|
||||
accumsan facilisis nisi. Aenean quam justo, finibus nec ipsum ut, porttitor
|
||||
vulputate nunc. Suspendisse a mi in odio dignissim lacinia in in risus. Nam
|
||||
ultrices nulla eget justo malesuada viverra.
|
||||
|
||||
### Heading 3
|
||||
|
||||
Quis ligula sem pellentesque ornare eleifend per curabitur quam. Est potenti augue facilisis mi diam. Cras dignissim turpis erat dictum fermentum aptent. Non proin pharetra semper turpis a ipsum mi euismod. Venenatis potenti eleifend auctor dictum neque felis. Quis purus dui lacus fringilla potenti. Ex tempus etiam mus nulla, sociosqu netus lacus ac. Nulla suspendisse fusce dolor nibh faucibus magnis. Sem habitant sed lorem per dictum.
|
||||
|
||||
|
||||
|
||||
<Youtube videoId="amPMMEAmf0Q" />
|
||||
end of doc
|
||||
@@ -1,10 +0,0 @@
|
||||
---
|
||||
title: Blog Post 2
|
||||
slug: /blog-2
|
||||
date: 2024-07-24
|
||||
---
|
||||
|
||||
# Foobar
|
||||
|
||||
this is the 2nd post as a prove of concept
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
import { P } from "./MdTypography";
|
||||
import { BlogRollItem } from "./BlogRollItem";
|
||||
import { staiFrontmatter } from "../models/frontmatter";
|
||||
|
||||
export function BlogRoll({
|
||||
posts,
|
||||
}: {
|
||||
posts: Queries.IndexPageQuery["allMdx"]["nodes"];
|
||||
}) {
|
||||
if (posts.length > 0) {
|
||||
return (
|
||||
<ul className="grid grid-cols-2 gap-5 md:grid-cols-3 md:gap-6">
|
||||
{posts.map((post) => {
|
||||
return <BlogRollItem key={post.id} postFrontmatter={post.frontmatter as staiFrontmatter}/>
|
||||
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
return <P>There are no Posts!</P>;
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
import React from "react";
|
||||
import { Link } from "gatsby";
|
||||
import { GatsbyImage, getImage } from "gatsby-plugin-image";
|
||||
import { staiFrontmatter } from "../models/frontmatter";
|
||||
import { getCateogry } from "../models";
|
||||
import { H4 } from "./MdTypography";
|
||||
|
||||
export const BlogRollItem = ({postFrontmatter: pfm}:{postFrontmatter: staiFrontmatter})=> {
|
||||
const category = getCateogry(pfm.category)
|
||||
const featuredImage =
|
||||
pfm.featuredImage?.childImageSharp?.gatsbyImageData &&
|
||||
getImage(pfm.featuredImage.childImageSharp.gatsbyImageData);
|
||||
|
||||
return (
|
||||
<li className="group">
|
||||
<Link to={pfm.slug} title={pfm.title}>
|
||||
<div className="h-32 overflow-hidden rounded-lg bg-panel/5 sm:h-52">
|
||||
{featuredImage && (
|
||||
<GatsbyImage
|
||||
alt={`${pfm.title} featured image`}
|
||||
image={featuredImage}
|
||||
className="h-full w-full object-cover transition-all duration-[400ms] group-hover:scale-110"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
<div className="mt-3 flex flex-col">
|
||||
<div>
|
||||
<Link
|
||||
to={category.slug}
|
||||
className="text-sm font-bold uppercase opacity-70 transition-all hover:text-link"
|
||||
>
|
||||
{category.displayName}
|
||||
</Link>
|
||||
</div>
|
||||
<Link to={pfm.slug}>
|
||||
<H4 className="my-0 text-[16px] transition-all group-hover:text-link md:text-[18px]">
|
||||
{pfm.title}
|
||||
</H4>
|
||||
</Link>
|
||||
</div>
|
||||
{/* <p>{frontmatter.date}</p> */}
|
||||
{/* <p className="italic">by {frontmatter.author ?? "unknown"}</p> */}
|
||||
|
||||
</li>
|
||||
);
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
import { Link } from "gatsby";
|
||||
import React, { ReactNode } from "react";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
interface ButtonProps {
|
||||
onClick?: () => void;
|
||||
to?: string;
|
||||
children?: ReactNode;
|
||||
className?: string;
|
||||
variant?: "primary" | "secondary";
|
||||
}
|
||||
|
||||
const Button = ({
|
||||
onClick,
|
||||
to,
|
||||
children,
|
||||
className,
|
||||
variant = "primary",
|
||||
}: ButtonProps) => {
|
||||
const baseClasses =
|
||||
"flex w-fit px-4 py-2 rounded-lg font-semibold text-white hover:bg-primary-400 transition-colors duration-200";
|
||||
const variantClasses = variant === "primary" ? "bg-primary" : "bg-secondary";
|
||||
const btnClasses = twMerge(baseClasses, variantClasses, className);
|
||||
|
||||
return (
|
||||
<>
|
||||
{onClick ? (
|
||||
<button onClick={onClick} className={btnClasses}>
|
||||
{children}
|
||||
</button>
|
||||
) : (
|
||||
<Link to={to || "/"} className={btnClasses}>
|
||||
{children}
|
||||
</Link>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Button;
|
||||
@@ -1,54 +0,0 @@
|
||||
import React from "react";
|
||||
import { Link } from "gatsby";
|
||||
import { GatsbyImage, getImage } from "gatsby-plugin-image";
|
||||
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
import * as MdTypography from "./MdTypography";
|
||||
import { staiFrontmatter } from "../models/frontmatter";
|
||||
import { getCateogry } from "../models";
|
||||
const { P, H2 } = MdTypography;
|
||||
|
||||
export const HeroPost = ({postFrontmatter}:{postFrontmatter:staiFrontmatter})=>{
|
||||
const pfm = postFrontmatter;
|
||||
const category = getCateogry(pfm.category);
|
||||
const featuredImage =
|
||||
pfm.featuredImage?.childImageSharp?.gatsbyImageData &&
|
||||
getImage(pfm.featuredImage.childImageSharp.gatsbyImageData);
|
||||
|
||||
return(
|
||||
<Link to={pfm.slug}>
|
||||
<div className="group grid grid-cols-5 overflow-hidden rounded-lg">
|
||||
<div className="col-span-full h-52 bg-panel/20 sm:h-96 lg:col-span-3 overflow-hidden">
|
||||
{featuredImage ? (
|
||||
<GatsbyImage
|
||||
alt={`${pfm.title} featured image`}
|
||||
image={featuredImage}
|
||||
className="h-full w-full object-cover transition-all duration-[400ms] group-hover:scale-110"
|
||||
/>
|
||||
):
|
||||
<div className="flex h-full w-full items-center justify-center object-cover transition-all duration-[400ms] group-hover:scale-110">
|
||||
Featured Post Image Placeholder Here
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div className="col-span-full flex flex-col justify-center bg-panel/5 p-4 text-center lg:col-span-2 lg:p-6 lg:text-start">
|
||||
<P className="text-md font-bold uppercase opacity-70 transition-all hover:text-link">
|
||||
{category.displayName}
|
||||
</P>
|
||||
<H2 className="text-2xl transition-all group-hover:text-link md:text-3xl">
|
||||
{pfm.title}
|
||||
</H2>
|
||||
<P className="text-md mt-3 hidden w-fit items-center gap-1.5 font-semibold opacity-70 lg:flex">
|
||||
Read More
|
||||
<FontAwesomeIcon
|
||||
icon={faChevronRight}
|
||||
className="me-2 text-xs"
|
||||
/>
|
||||
</P>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
import React, { DetailedHTMLProps, HTMLAttributes } from "react";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
type HeadingProps = DetailedHTMLProps<
|
||||
HTMLAttributes<HTMLHeadingElement>,
|
||||
HTMLHeadingElement
|
||||
>;
|
||||
|
||||
export const P = ({
|
||||
children,
|
||||
className,
|
||||
...rest
|
||||
}: DetailedHTMLProps<
|
||||
HTMLAttributes<HTMLParagraphElement>,
|
||||
HTMLParagraphElement
|
||||
>) => (
|
||||
<p className={twMerge("text-[18px]", className)} {...rest}>
|
||||
{children}
|
||||
</p>
|
||||
);
|
||||
|
||||
export const H1 = ({ children, className, ...rest }: HeadingProps) => (
|
||||
<h1
|
||||
className={twMerge("text-3xl font-bold md:text-5xl", className)}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</h1>
|
||||
);
|
||||
|
||||
export const H2 = ({ children, className, ...rest }: HeadingProps) => (
|
||||
<h2
|
||||
className={twMerge("text-2xl font-bold md:text-4xl", className)}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</h2>
|
||||
);
|
||||
|
||||
export const H3 = ({ children, className, ...rest }: HeadingProps) => (
|
||||
<h3 className={twMerge("text-xl font-bold md:text-3xl", className)} {...rest}>
|
||||
{children}
|
||||
</h3>
|
||||
);
|
||||
|
||||
export const H4 = ({ children, className, ...rest }: HeadingProps) => (
|
||||
<h4 className={twMerge("text-lg font-bold", className)} {...rest}>
|
||||
{children}
|
||||
</h4>
|
||||
);
|
||||
|
||||
export const H5 = ({ children, className, ...rest }: HeadingProps) => (
|
||||
<h5 className={twMerge("text-md font-bold", className)} {...rest}>
|
||||
{children}
|
||||
</h5>
|
||||
);
|
||||
|
||||
export const H6 = ({ children, className, ...rest }: HeadingProps) => (
|
||||
<h6 className={twMerge("text-sm font-bold", className)} {...rest}>
|
||||
{children}
|
||||
</h6>
|
||||
);
|
||||
@@ -1,35 +0,0 @@
|
||||
import React from "react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import {
|
||||
// faFacebook,
|
||||
faInstagram,
|
||||
// faLinkedin,
|
||||
faTiktok,
|
||||
faTwitter,
|
||||
} from "@fortawesome/free-brands-svg-icons";
|
||||
|
||||
const socialMedia = [
|
||||
{ name: "Twitter", icon: faTwitter, link: "https://twitter.com" },
|
||||
{ name: "Instagram", icon: faInstagram, link: "https://instagram.com" },
|
||||
{ name: "Tiktok", icon: faTiktok, link: "https://tiktok.com" },
|
||||
];
|
||||
|
||||
const SocialIcons = () => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
{socialMedia.map((social, index) => (
|
||||
<a
|
||||
key={index}
|
||||
href={social.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-md flex h-9 w-9 items-center justify-center rounded-full bg-white/10 text-white transition-all hover:bg-white/20"
|
||||
>
|
||||
<FontAwesomeIcon icon={social.icon} title={social.name}/>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SocialIcons;
|
||||
@@ -1,31 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const respIframeWrapper = {
|
||||
position: "relative" as "relative",
|
||||
height: 0,
|
||||
overflow: "hidden",
|
||||
paddingBottom: "50%",
|
||||
};
|
||||
|
||||
export const Youtube = ({
|
||||
videoId,
|
||||
title,
|
||||
}: {
|
||||
videoId: string;
|
||||
title?: string;
|
||||
}) => {
|
||||
return (
|
||||
<div style={respIframeWrapper} className="youtube-video">
|
||||
<iframe
|
||||
className="absolute left-0 top-0 h-full w-full border-0"
|
||||
src={`https://www.youtube.com/embed/${videoId}`}
|
||||
title={title ?? "YouTube video player"}
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
loading="lazy"
|
||||
sandbox="allow-same-origin allow-scripts allow-popups allow-presentation"
|
||||
referrerPolicy="strict-origin-when-cross-origin"
|
||||
allowFullScreen
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,3 +0,0 @@
|
||||
export * from "./BlogRoll";
|
||||
export * from "./layout";
|
||||
export * from "./HeroPost";
|
||||
@@ -1,36 +0,0 @@
|
||||
import { StaticImage } from "gatsby-plugin-image";
|
||||
import { Link } from "gatsby";
|
||||
import React, { ReactNode } from "react";
|
||||
import SocialIcons from "./SocialIcons";
|
||||
|
||||
export function Layout({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col font-sans">
|
||||
<nav className="bg-panel">
|
||||
<div className="mx-auto flex max-w-screen-xl items-center px-4 py-3.5">
|
||||
<div className="grow">
|
||||
<Link to="/">
|
||||
<StaticImage
|
||||
alt="Logo"
|
||||
src="../images/Storyteller-Logo.png"
|
||||
height={36}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<SocialIcons />
|
||||
</div>
|
||||
</nav>
|
||||
<div className="mx-auto my-4 w-full max-w-screen-xl grow px-4 md:my-8">
|
||||
{children}
|
||||
</div>
|
||||
<footer className="bg-panel">
|
||||
<div className="mx-auto max-w-screen-xl">
|
||||
<div className="flex flex-col items-center justify-between gap-3 px-4 py-6 text-sm text-white/80 lg:flex-row lg:py-3">
|
||||
<span>© 2024 All Rights Reserved, Storyteller.ai</span>
|
||||
<SocialIcons />
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,142 +0,0 @@
|
||||
import React from "react";
|
||||
import { MDXProvider } from "@mdx-js/react";
|
||||
import { graphql, Link } from "gatsby";
|
||||
import type { HeadProps, PageProps } from "gatsby";
|
||||
import { GatsbyImage, getImage } from "gatsby-plugin-image";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
|
||||
import { Layout } from "./layout";
|
||||
import { Youtube } from "./Youtube";
|
||||
import * as MdTypography from "./MdTypography";
|
||||
import Button from "./Button";
|
||||
import { CATEGORY } from "../models";
|
||||
|
||||
const shortcodes = { Link, Youtube }; // Provide common components here
|
||||
export const Head = ({data}:HeadProps<Queries.PostTemplateQuery>) => {
|
||||
const category = data?.mdx?.frontmatter?.category ?? CATEGORY.BLOG;
|
||||
const subTitle = data?.mdx?.frontmatter?.title ? ` - ${data.mdx.frontmatter.title}` : "";
|
||||
const title = `Storyteller ${category}${subTitle}`;
|
||||
const metaText = data?.mdx?.frontmatter?.metaText ? data.mdx.frontmatter.metaText : "Blog Post of Storyteller.AI";
|
||||
return(
|
||||
<>
|
||||
<html lang="en" />
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={metaText} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default function PostTemplate({
|
||||
data,
|
||||
children,
|
||||
}: PageProps<Queries.PostTemplateQuery>) {
|
||||
const post = data.mdx;
|
||||
const featuredImage =
|
||||
post?.frontmatter?.featuredImage?.childImageSharp?.gatsbyImageData &&
|
||||
getImage(post.frontmatter.featuredImage.childImageSharp.gatsbyImageData);
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Link
|
||||
to="/"
|
||||
className="text-md flex w-fit items-center gap-1.5 font-semibold opacity-80 hover:underline"
|
||||
>
|
||||
<FontAwesomeIcon icon={faChevronLeft} className="text-sm" />
|
||||
Back to Learn
|
||||
</Link>
|
||||
<MdTypography.H1 className="mb-6 mt-6">
|
||||
{post?.frontmatter?.title}
|
||||
</MdTypography.H1>
|
||||
<div className="h-[200px] w-full overflow-hidden rounded-lg bg-panel/10 sm:h-[300px] md:h-[400px] lg:h-[500px]">
|
||||
{featuredImage && (
|
||||
<GatsbyImage
|
||||
alt={`${post.frontmatter.title} featured image`}
|
||||
image={featuredImage}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-8 flex gap-28 lg:mt-10">
|
||||
<div className="mdx-styles group mb-20 grow">
|
||||
<MDXProvider
|
||||
components={{
|
||||
h1: MdTypography.H1,
|
||||
h2: MdTypography.H2,
|
||||
h3: MdTypography.H3,
|
||||
h4: MdTypography.H4,
|
||||
h5: MdTypography.H5,
|
||||
h6: MdTypography.H6,
|
||||
p: MdTypography.P,
|
||||
...shortcodes,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</MDXProvider>
|
||||
</div>
|
||||
<div className="hidden min-w-[280px] flex-col gap-8 lg:flex">
|
||||
<div className="overflow-hidden rounded-lg bg-panel/5">
|
||||
<div className="p-4">
|
||||
<MdTypography.H2 className="mb-3 font-bold leading-5 md:text-[18px]">
|
||||
Turn your ideas into videos with ease
|
||||
</MdTypography.H2>
|
||||
<Button>Create now</Button>
|
||||
</div>
|
||||
<div className="h-40 bg-panel/5" />
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="pointer-events-none h-12 w-12 select-none overflow-hidden rounded-full border border-panel/20 bg-panel/10">
|
||||
{featuredImage && (
|
||||
<GatsbyImage
|
||||
alt={`${post.frontmatter.title} featured image`}
|
||||
image={featuredImage}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-md flex flex-col">
|
||||
<span>Written by</span>
|
||||
<span className="font-bold">
|
||||
{post?.frontmatter?.author || ""}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<hr className="w-full border-panel/15" />
|
||||
<div className="flex flex-col gap-3">
|
||||
<MdTypography.H4>Related posts</MdTypography.H4>
|
||||
<div className="flex flex-col gap-8">
|
||||
<Link to="/" className="group flex flex-col gap-2">
|
||||
<div className="h-40 overflow-hidden rounded-lg bg-panel/5">
|
||||
<div className="flex h-full w-full items-center justify-center object-cover transition-all duration-[400ms] group-hover:scale-110">
|
||||
Related Post Image Here
|
||||
</div>
|
||||
</div>
|
||||
<MdTypography.H4 className="my-0 text-[17px] transition-all group-hover:text-link">
|
||||
Title of related post
|
||||
</MdTypography.H4>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export const query = graphql`
|
||||
query PostTemplate($id: String!) {
|
||||
mdx(id: { eq: $id }) {
|
||||
frontmatter {
|
||||
title
|
||||
metaText
|
||||
author
|
||||
category
|
||||
date(formatString: "MMMM DD, YYYY")
|
||||
featuredImage {
|
||||
childImageSharp {
|
||||
gatsbyImageData(width: 800, placeholder: BLURRED)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
@@ -1,37 +0,0 @@
|
||||
export enum CATEGORY {
|
||||
NONE = "none",
|
||||
BLOG = "blog",
|
||||
NEWS = "news",
|
||||
}
|
||||
|
||||
type CategoryType = {
|
||||
name: CATEGORY,
|
||||
displayName: string,
|
||||
slug: string,
|
||||
};
|
||||
|
||||
export const Category:{[key:string]:CategoryType} = {
|
||||
NONE:{
|
||||
name: CATEGORY.NONE,
|
||||
displayName: "No Category",
|
||||
slug: "/"
|
||||
},
|
||||
BLOG: {
|
||||
name: CATEGORY.BLOG,
|
||||
displayName: "Blog",
|
||||
slug: "/"
|
||||
},
|
||||
NEWS: {
|
||||
name: CATEGORY.NEWS,
|
||||
displayName: "Press Releases",
|
||||
slug: "/news"
|
||||
}
|
||||
}
|
||||
|
||||
export const getCateogry = (cateoryName:string|undefined|null) => {
|
||||
const resultCategory = Object.values(Category).find((category)=>category.name === cateoryName);
|
||||
if(!resultCategory){
|
||||
return Category.NONE;
|
||||
}
|
||||
return resultCategory;
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import { IGatsbyImageData } from "gatsby-plugin-image";
|
||||
|
||||
export type staiFrontmatter = {
|
||||
readonly title: string;
|
||||
readonly metaText: string | null;
|
||||
readonly slug: string;
|
||||
readonly date: string;
|
||||
readonly author: string | null;
|
||||
readonly category: string | null;
|
||||
readonly featured: boolean | null;
|
||||
readonly featuredImage: {
|
||||
readonly childImageSharp: {
|
||||
readonly gatsbyImageData: IGatsbyImageData;
|
||||
} | null;
|
||||
} | null;
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export * from "./categories";
|
||||
@@ -1,49 +0,0 @@
|
||||
import * as React from "react"
|
||||
import { Link, HeadFC, PageProps } from "gatsby"
|
||||
|
||||
const pageStyles = {
|
||||
color: "#232129",
|
||||
padding: "96px",
|
||||
fontFamily: "-apple-system, Roboto, sans-serif, serif",
|
||||
}
|
||||
const headingStyles = {
|
||||
marginTop: 0,
|
||||
marginBottom: 64,
|
||||
maxWidth: 320,
|
||||
}
|
||||
|
||||
const paragraphStyles = {
|
||||
marginBottom: 48,
|
||||
}
|
||||
const codeStyles = {
|
||||
color: "#8A6534",
|
||||
padding: 4,
|
||||
backgroundColor: "#FFF4DB",
|
||||
fontSize: "1.25rem",
|
||||
borderRadius: 4,
|
||||
}
|
||||
|
||||
const NotFoundPage: React.FC<PageProps> = () => {
|
||||
return (
|
||||
<main style={pageStyles}>
|
||||
<h1 style={headingStyles}>Page not found</h1>
|
||||
<p style={paragraphStyles}>
|
||||
Sorry 😔, we couldn’t find what you were looking for.
|
||||
<br />
|
||||
{process.env.NODE_ENV === "development" ? (
|
||||
<>
|
||||
<br />
|
||||
Try creating a page in <code style={codeStyles}>src/pages/</code>.
|
||||
<br />
|
||||
</>
|
||||
) : null}
|
||||
<br />
|
||||
<Link to="/">Go home</Link>.
|
||||
</p>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
export default NotFoundPage
|
||||
|
||||
export const Head: HeadFC = () => <title>Not found</title>
|
||||
@@ -1,193 +0,0 @@
|
||||
import * as React from "react"
|
||||
import type { HeadFC, PageProps } from "gatsby"
|
||||
|
||||
const pageStyles = {
|
||||
color: "#232129",
|
||||
padding: 96,
|
||||
fontFamily: "-apple-system, Roboto, sans-serif, serif",
|
||||
}
|
||||
const headingStyles = {
|
||||
marginTop: 0,
|
||||
marginBottom: 64,
|
||||
maxWidth: 320,
|
||||
}
|
||||
const headingAccentStyles = {
|
||||
color: "#663399",
|
||||
}
|
||||
const paragraphStyles = {
|
||||
marginBottom: 48,
|
||||
}
|
||||
const codeStyles = {
|
||||
color: "#8A6534",
|
||||
padding: 4,
|
||||
backgroundColor: "#FFF4DB",
|
||||
fontSize: "1.25rem",
|
||||
borderRadius: 4,
|
||||
}
|
||||
const listStyles = {
|
||||
marginBottom: 96,
|
||||
paddingLeft: 0,
|
||||
}
|
||||
const doclistStyles = {
|
||||
paddingLeft: 0,
|
||||
}
|
||||
const listItemStyles = {
|
||||
fontWeight: 300,
|
||||
fontSize: 24,
|
||||
maxWidth: 560,
|
||||
marginBottom: 30,
|
||||
}
|
||||
|
||||
const linkStyle = {
|
||||
color: "#8954A8",
|
||||
fontWeight: "bold",
|
||||
fontSize: 16,
|
||||
verticalAlign: "5%",
|
||||
}
|
||||
|
||||
const docLinkStyle = {
|
||||
...linkStyle,
|
||||
listStyleType: "none",
|
||||
display: `inline-block`,
|
||||
marginBottom: 24,
|
||||
marginRight: 12,
|
||||
}
|
||||
|
||||
const descriptionStyle = {
|
||||
color: "#232129",
|
||||
fontSize: 14,
|
||||
marginTop: 10,
|
||||
marginBottom: 0,
|
||||
lineHeight: 1.25,
|
||||
}
|
||||
|
||||
const docLinks = [
|
||||
{
|
||||
text: "TypeScript Documentation",
|
||||
url: "https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/",
|
||||
color: "#8954A8",
|
||||
},
|
||||
{
|
||||
text: "GraphQL Typegen Documentation",
|
||||
url: "https://www.gatsbyjs.com/docs/how-to/local-development/graphql-typegen/",
|
||||
color: "#8954A8",
|
||||
}
|
||||
]
|
||||
|
||||
const badgeStyle = {
|
||||
color: "#fff",
|
||||
backgroundColor: "#088413",
|
||||
border: "1px solid #088413",
|
||||
fontSize: 11,
|
||||
fontWeight: "bold",
|
||||
letterSpacing: 1,
|
||||
borderRadius: 4,
|
||||
padding: "4px 6px",
|
||||
display: "inline-block",
|
||||
position: "relative" as "relative",
|
||||
top: -2,
|
||||
marginLeft: 10,
|
||||
lineHeight: 1,
|
||||
}
|
||||
|
||||
const links = [
|
||||
{
|
||||
text: "Tutorial",
|
||||
url: "https://www.gatsbyjs.com/docs/tutorial/getting-started/",
|
||||
description:
|
||||
"A great place to get started if you're new to web development. Designed to guide you through setting up your first Gatsby site.",
|
||||
color: "#E95800",
|
||||
},
|
||||
{
|
||||
text: "How to Guides",
|
||||
url: "https://www.gatsbyjs.com/docs/how-to/",
|
||||
description:
|
||||
"Practical step-by-step guides to help you achieve a specific goal. Most useful when you're trying to get something done.",
|
||||
color: "#1099A8",
|
||||
},
|
||||
{
|
||||
text: "Reference Guides",
|
||||
url: "https://www.gatsbyjs.com/docs/reference/",
|
||||
description:
|
||||
"Nitty-gritty technical descriptions of how Gatsby works. Most useful when you need detailed information about Gatsby's APIs.",
|
||||
color: "#BC027F",
|
||||
},
|
||||
{
|
||||
text: "Conceptual Guides",
|
||||
url: "https://www.gatsbyjs.com/docs/conceptual/",
|
||||
description:
|
||||
"Big-picture explanations of higher-level Gatsby concepts. Most useful for building understanding of a particular topic.",
|
||||
color: "#0D96F2",
|
||||
},
|
||||
{
|
||||
text: "Plugin Library",
|
||||
url: "https://www.gatsbyjs.com/plugins",
|
||||
description:
|
||||
"Add functionality and customize your Gatsby site or app with thousands of plugins built by our amazing developer community.",
|
||||
color: "#8EB814",
|
||||
},
|
||||
{
|
||||
text: "Build and Host",
|
||||
url: "https://www.gatsbyjs.com/cloud",
|
||||
badge: true,
|
||||
description:
|
||||
"Now you’re ready to show the world! Give your Gatsby site superpowers: Build and host on Gatsby Cloud. Get started for free!",
|
||||
color: "#663399",
|
||||
},
|
||||
]
|
||||
|
||||
const ExamplePage: React.FC<PageProps> = () => {
|
||||
return (
|
||||
<main style={pageStyles}>
|
||||
<h1 style={headingStyles}>
|
||||
Congratulations
|
||||
<br />
|
||||
<span style={headingAccentStyles}>— you just made a Gatsby site! 🎉🎉🎉</span>
|
||||
</h1>
|
||||
<p style={paragraphStyles}>
|
||||
Edit <code style={codeStyles}>src/pages/index.tsx</code> to see this page
|
||||
update in real-time. 😎
|
||||
</p>
|
||||
<ul style={doclistStyles}>
|
||||
{docLinks.map(doc => (
|
||||
<li key={doc.url} style={docLinkStyle}>
|
||||
<a
|
||||
style={linkStyle}
|
||||
href={`${doc.url}?utm_source=starter&utm_medium=ts-docs&utm_campaign=minimal-starter-ts`}
|
||||
>
|
||||
{doc.text}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<ul style={listStyles}>
|
||||
{links.map(link => (
|
||||
<li key={link.url} style={{ ...listItemStyles, color: link.color }}>
|
||||
<span>
|
||||
<a
|
||||
style={linkStyle}
|
||||
href={`${link.url}?utm_source=starter&utm_medium=start-page&utm_campaign=minimal-starter-ts`}
|
||||
>
|
||||
{link.text}
|
||||
</a>
|
||||
{link.badge && (
|
||||
<span style={badgeStyle} aria-label="New Badge">
|
||||
NEW!
|
||||
</span>
|
||||
)}
|
||||
<p style={descriptionStyle}>{link.description}</p>
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<img
|
||||
alt="Gatsby G Logo"
|
||||
src="data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 110 20 10 10 0 010-20zm0 2c-3.73 0-6.86 2.55-7.75 6L14 19.75c3.45-.89 6-4.02 6-7.75h-5.25v1.5h3.45a6.37 6.37 0 01-3.89 4.44L6.06 9.69C7 7.31 9.3 5.63 12 5.63c2.13 0 4 1.04 5.18 2.65l1.23-1.06A7.959 7.959 0 0012 4zm-8 8a8 8 0 008 8c.04 0 .09 0-8-8z' fill='%23639'/%3E%3C/svg%3E"
|
||||
/>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
export default ExamplePage
|
||||
|
||||
export const Head: HeadFC = () => <title>Storyteller Blog</title>
|
||||
@@ -1,76 +0,0 @@
|
||||
import React from "react";
|
||||
import { graphql } from "gatsby";
|
||||
import type { HeadFC, PageProps } from "gatsby";
|
||||
|
||||
import * as MdTypography from "../components/MdTypography";
|
||||
import { BlogRoll, HeroPost, Layout } from "../components";
|
||||
|
||||
import "../styles/global.css";
|
||||
import { staiFrontmatter } from "../models/frontmatter";
|
||||
|
||||
const { P, H1 } = MdTypography;
|
||||
|
||||
export const Head: HeadFC = () => {
|
||||
return(
|
||||
<>
|
||||
<html lang="en" />
|
||||
<title>Storyteller Blog</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Blog of Storyteller.ai, including tutorials, press releases, etc."
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const IndexPage = ({ data }: PageProps<Queries.IndexPageQuery>) => {
|
||||
const allPosts = data.allMdx.nodes;
|
||||
const heroPost = allPosts.find((post)=>post?.frontmatter?.featured);
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div>
|
||||
<H1 className="mb-1 md:mb-2">Learn</H1>
|
||||
<P className="text-[18px] font-semibold leading-6 opacity-80">
|
||||
Tutorials, tips and tricks on how to create better content.
|
||||
</P>
|
||||
</div>
|
||||
{heroPost && <HeroPost postFrontmatter={heroPost.frontmatter as staiFrontmatter} />}
|
||||
{allPosts ? (
|
||||
<BlogRoll posts={data.allMdx.nodes} />
|
||||
) : (
|
||||
<P>Failed loading blog posts</P>
|
||||
)}
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export const query = graphql`
|
||||
query IndexPage {
|
||||
allMdx {
|
||||
nodes {
|
||||
id
|
||||
frontmatter {
|
||||
title
|
||||
slug
|
||||
date(formatString: "MMMM DD, YYYY")
|
||||
author
|
||||
category
|
||||
featured
|
||||
featuredImage {
|
||||
childImageSharp {
|
||||
gatsbyImageData(width: 800, placeholder: BLURRED)
|
||||
}
|
||||
}
|
||||
}
|
||||
internal {
|
||||
contentFilePath
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
export default IndexPage;
|
||||
|
||||
@@ -1,84 +0,0 @@
|
||||
import React from "react"
|
||||
import { graphql, Link } from "gatsby"
|
||||
import type { HeadFC, PageProps } from "gatsby"
|
||||
import { GatsbyImage, getImage } from "gatsby-plugin-image"
|
||||
|
||||
import { Layout } from "../components/layout"
|
||||
|
||||
export const Head: HeadFC = () => <title>News Page</title>
|
||||
const NewsPage = ({data}:PageProps<Queries.NewsPageQuery>) =>{
|
||||
console.log(data)
|
||||
return(
|
||||
<Layout>
|
||||
<h1>Welcome to the Story Teller Blog</h1>
|
||||
<br/>
|
||||
<br/>
|
||||
<h2>Blog Posts (MDX)</h2>
|
||||
{data.allMdx.nodes
|
||||
? <NewsRoll posts={data.allMdx.nodes} />
|
||||
: <p>failed loading blog posts</p>
|
||||
}
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
function NewsRoll ({posts}:{posts:Queries.NewsPageQuery["allMdx"]["nodes"]}){
|
||||
if (posts.length > 0){
|
||||
return(
|
||||
<ul>
|
||||
{posts.map((post)=>{
|
||||
const postProps = post.frontmatter;
|
||||
if(postProps && postProps.slug && postProps.title){
|
||||
const featuredImage = postProps.featuredImage?.childImageSharp?.gatsbyImageData && getImage(postProps.featuredImage.childImageSharp.gatsbyImageData);
|
||||
return(
|
||||
<li key={post.id} className="border border-black my-2 p-2">
|
||||
<Link to={postProps.slug}>
|
||||
<div className="flex justify-between">
|
||||
<h3>{postProps.title}</h3>
|
||||
<h4>{postProps.date}</h4>
|
||||
</div>
|
||||
{featuredImage &&
|
||||
<GatsbyImage
|
||||
alt={`${postProps.title} featured image`}
|
||||
image={featuredImage}
|
||||
/>
|
||||
}
|
||||
<p className="italic">by {postProps.author ?? "unknown"}</p>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
return <p>There are no Posts!</p>
|
||||
}
|
||||
|
||||
export const query = graphql`
|
||||
query NewsPage {
|
||||
allMdx(filter: { frontmatter: { category: { eq: "news" } } }) {
|
||||
nodes {
|
||||
id
|
||||
frontmatter {
|
||||
title
|
||||
author
|
||||
slug
|
||||
date(formatString: "MMMM DD, YYYY")
|
||||
featuredImage{
|
||||
childImageSharp {
|
||||
gatsbyImageData(
|
||||
width: 800
|
||||
placeholder: BLURRED
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
internal {
|
||||
contentFilePath
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
export default NewsPage;
|
||||
@@ -1,53 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");
|
||||
|
||||
body {
|
||||
font-family: "Source Sans 3", sans-serif;
|
||||
color: #242433;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.mdx-styles {
|
||||
p {
|
||||
@apply leading-[1.7rem];
|
||||
}
|
||||
|
||||
p:not(:last-child) {
|
||||
@apply mb-6;
|
||||
}
|
||||
|
||||
h1:not(:last-child) {
|
||||
@apply mb-6;
|
||||
}
|
||||
|
||||
h1:not(:first-child) {
|
||||
@apply mt-10;
|
||||
}
|
||||
|
||||
h2:not(:last-child) {
|
||||
@apply mb-6;
|
||||
}
|
||||
|
||||
h2:not(:first-child) {
|
||||
@apply mt-10;
|
||||
}
|
||||
|
||||
h3:not(:last-child) {
|
||||
@apply mb-6;
|
||||
}
|
||||
|
||||
h3:not(:first-child) {
|
||||
@apply mt-6;
|
||||
}
|
||||
|
||||
span:not(:last-child) {
|
||||
@apply mb-6;
|
||||
}
|
||||
|
||||
.youtube-video:not(:last-child) {
|
||||
@apply mb-6;
|
||||
}
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
import colors from "tailwindcss/colors";
|
||||
|
||||
module.exports = {
|
||||
content: [
|
||||
`./src/pages/**/*.{js,jsx,ts,tsx}`,
|
||||
`./src/components/**/*.{js,jsx,ts,tsx}`,
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
"sans": ["Source Sans 3", "sans-serif"],
|
||||
},},
|
||||
colors: {
|
||||
"white": colors.white,
|
||||
"black": colors.black,
|
||||
"primary": {
|
||||
DEFAULT: "#e66462", //=500
|
||||
"50": "#fdf3f3",
|
||||
"100": "#fce4e4",
|
||||
"200": "#facfce",
|
||||
"300": "#f6acab",
|
||||
"400": "#ef7c7a",
|
||||
"500": "#e66462",
|
||||
"600": "#cf3533",
|
||||
"700": "#ae2927",
|
||||
"800": "#902624",
|
||||
"900": "#782524",
|
||||
"950": "#410f0e",
|
||||
},
|
||||
"secondary": {
|
||||
DEFAULT: "#39394c", //=950
|
||||
"50": "#f5f6f9",
|
||||
"100": "#e8eaf1",
|
||||
"200": "#d7dbe6",
|
||||
"300": "#bbc1d5",
|
||||
"400": "#9aa2c0",
|
||||
"500": "#8188b0",
|
||||
"600": "#6f74a1",
|
||||
"700": "#636492",
|
||||
"800": "#545579",
|
||||
"900": "#464762",
|
||||
"950": "#39394c",
|
||||
},
|
||||
"panel": "#242433",
|
||||
"link": "#4E4EB8"
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
@@ -1,102 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
/* Visit https://aka.ms/tsconfig.json to read more about this file */
|
||||
|
||||
/* Projects */
|
||||
// "incremental": true, /* Enable incremental compilation */
|
||||
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
|
||||
// "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */
|
||||
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */
|
||||
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
|
||||
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
|
||||
|
||||
/* Language and Environment */
|
||||
"target": "esnext", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
|
||||
"lib": ["dom", "esnext"], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
|
||||
"jsx": "react", /* Specify what JSX code is generated. */
|
||||
// "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
|
||||
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
|
||||
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
|
||||
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
|
||||
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
|
||||
// "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
|
||||
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
|
||||
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
|
||||
|
||||
/* Modules */
|
||||
"module": "esnext", /* Specify what module code is generated. */
|
||||
// "rootDir": "./", /* Specify the root folder within your source files. */
|
||||
"moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */
|
||||
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
|
||||
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
|
||||
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
|
||||
// "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */
|
||||
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
|
||||
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
|
||||
// "resolveJsonModule": true, /* Enable importing .json files */
|
||||
// "noResolve": true, /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */
|
||||
|
||||
/* JavaScript Support */
|
||||
// "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
|
||||
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
|
||||
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */
|
||||
|
||||
/* Emit */
|
||||
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
|
||||
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
|
||||
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
|
||||
// "sourceMap": true, /* Create source map files for emitted JavaScript files. */
|
||||
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
|
||||
// "outDir": "./", /* Specify an output folder for all emitted files. */
|
||||
// "removeComments": true, /* Disable emitting comments. */
|
||||
// "noEmit": true, /* Disable emitting files from a compilation. */
|
||||
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
|
||||
// "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */
|
||||
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
|
||||
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
|
||||
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
|
||||
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
|
||||
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
|
||||
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
|
||||
// "newLine": "crlf", /* Set the newline character for emitting files. */
|
||||
// "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */
|
||||
// "noEmitHelpers": true, /* Disable generating custom helper functions like `__extends` in compiled output. */
|
||||
// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
|
||||
// "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */
|
||||
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
|
||||
// "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
|
||||
|
||||
/* Interop Constraints */
|
||||
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
|
||||
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
|
||||
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
|
||||
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
|
||||
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
|
||||
|
||||
/* Type Checking */
|
||||
"strict": true, /* Enable all strict type-checking options. */
|
||||
// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */
|
||||
// "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */
|
||||
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
|
||||
// "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
|
||||
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
|
||||
// "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */
|
||||
// "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */
|
||||
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
|
||||
// "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */
|
||||
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */
|
||||
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
|
||||
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
|
||||
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
|
||||
// "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */
|
||||
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
|
||||
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */
|
||||
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
|
||||
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
|
||||
|
||||
/* Completeness */
|
||||
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
|
||||
"skipLibCheck": true /* Skip type checking all .d.ts files. */
|
||||
},
|
||||
"include": ["./src/**/*", "./gatsby-node.ts", "./gatsby-config.ts", "./plugins/**/*"]
|
||||
}
|
||||
File diff suppressed because it is too large.
Load diff
Reference in new issue
Block a user