diff --git a/example/content/components/button.mdx b/example/content/components/button.mdx deleted file mode 100644 index 1887714..0000000 --- a/example/content/components/button.mdx +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Button -description: The Button component documentation -icon: - name: Access226 - variant: 32x32_4 -image: /Access226_32x32_4.png ---- - -# Button - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. - -Nam dictum nulla non augue posuere, et sagittis nisi ultricies. Praesent -consequat consectetur fringilla. Ut enim felis, euismod at feugiat a, -consectetur ac magna. Pellentesque vitae porta purus, et hendrerit justo. - -Nulla id lacus in lorem malesuada rutrum a eget nunc. Nulla porttitor libero in -massa volutpat interdum. Sed tristique eros sit amet libero hendrerit, eget -efficitur nisi aliquet. Fusce sagittis ut orci ut gravida. Nulla facilisi. - -Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac -turpis egestas. Duis quis mollis nibh. diff --git a/example/content/components/checkbox.mdx b/example/content/components/checkbox.mdx deleted file mode 100644 index 224b18d..0000000 --- a/example/content/components/checkbox.mdx +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Checkbox -icon: - name: Confcp107 - variant: 16x16_4 ---- - -# Checkbox - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. - -Nam dictum nulla non augue posuere, et sagittis nisi ultricies. Praesent -consequat consectetur fringilla. Ut enim felis, euismod at feugiat a, -consectetur ac magna. Pellentesque vitae porta purus, et hendrerit justo. - -Nulla id lacus in lorem malesuada rutrum a eget nunc. Nulla porttitor libero in -massa volutpat interdum. Sed tristique eros sit amet libero hendrerit, eget -efficitur nisi aliquet. Fusce sagittis ut orci ut gravida. Nulla facilisi. - -Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac -turpis egestas. Duis quis mollis nibh. diff --git a/example/content/components/index.mdx b/example/content/components/index.mdx deleted file mode 100644 index e94e5d0..0000000 --- a/example/content/components/index.mdx +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Components -icon: - name: FileIcons - variant: 32x32_4 ---- diff --git a/example/content/getting-started.mdx b/example/content/getting-started.mdx index 7404d23..63e98f7 100644 --- a/example/content/getting-started.mdx +++ b/example/content/getting-started.mdx @@ -1,21 +1,93 @@ --- title: Getting Started icon: - name: Computer + name: Awfxex32Info variant: 32x32_4 --- -# Getting Started +

+ + Gatsby + +

-Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

The React95 Gatsby theme

-Nam dictum nulla non augue posuere, et sagittis nisi ultricies. Praesent -consequat consectetur fringilla. Ut enim felis, euismod at feugiat a, -consectetur ac magna. Pellentesque vitae porta purus, et hendrerit justo. + -Nulla id lacus in lorem malesuada rutrum a eget nunc. Nulla porttitor libero in -massa volutpat interdum. Sed tristique eros sit amet libero hendrerit, eget -efficitur nisi aliquet. Fusce sagittis ut orci ut gravida. Nulla facilisi. +## Installation -Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac -turpis egestas. Duis quis mollis nibh. +
+ +If you're creating a new site and want to use the React95 theme, you can use the [Gatsby CLI](https://www.gatsbyjs.com/docs/reference/gatsby-cli/#new) (make sure to select styled-components as your styling system) + + + +```bash +gatsby new my-nostalgic-blog +``` + + + +Follow the CLI and when you've finished, go to the next step + +
+ +
+
+ +
+ +If you already have a site you'd like to add the React95 theme to, you can manually configure it. + +1. Install the React95 theme + + + +```bash +npm install @react95/core @react95/gatsby-theme styled-components + +# or + +yarn add @react95/core @react95/gatsby-theme styled-components +``` + + + +2. Add the configuration to your `gatsby-config.js` file + + + +```javascript +// gatsby-config.js +module.exports = { + plugins: [ + { + resolve: `@react95/gatsby-theme`, + options: { + // basePath defaults to `/` + basePath: `/site`, + }, + }, + ], +}; +``` + + + +3. Add content to your site by creating `md` or `mdx` files inside `/content` folder. + +> React95 theme will create everything for you so you might not need `src/pages`. + +> Note that if you've changed the default `contentPath` in the configuration, you'll want to add your markdown files in the directory specified by that path. + +4. Run your site using `gatsby develop` and see your content in the TaskBar. If you used the above configuration, your URL will be `http://localhost:8000/site` + +> If you have no content in the beginning, React95 theme will generate a starter for you. + +
+ diff --git a/example/content/guidelines/how-to.mdx b/example/content/guidelines/how-to.mdx deleted file mode 100644 index cc429e8..0000000 --- a/example/content/guidelines/how-to.mdx +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: How to -icon: - name: FolderExe - variant: 16x16_4 ---- - - - -# How to - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. - -Nam dictum nulla non augue posuere, et sagittis nisi ultricies. Praesent -consequat consectetur fringilla. Ut enim felis, euismod at feugiat a, -consectetur ac magna. Pellentesque vitae porta purus, et hendrerit justo. - -Nulla id lacus in lorem malesuada rutrum a eget nunc. Nulla porttitor libero in -massa volutpat interdum. Sed tristique eros sit amet libero hendrerit, eget -efficitur nisi aliquet. Fusce sagittis ut orci ut gravida. Nulla facilisi. - -Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac -turpis egestas. Duis quis mollis nibh. - - diff --git a/example/content/guidelines/index.mdx b/example/content/guidelines/index.mdx deleted file mode 100644 index b9cd2ed..0000000 --- a/example/content/guidelines/index.mdx +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Guidelines -icon: - name: FilePen - variant: 32x32_4 ---- diff --git a/example/content/settings/index.mdx b/example/content/settings/index.mdx new file mode 100644 index 0000000..145dace --- /dev/null +++ b/example/content/settings/index.mdx @@ -0,0 +1,6 @@ +--- +title: Settings +icon: + name: Settings + variant: 32x32_4 +--- diff --git a/example/content/settings/usage.mdx b/example/content/settings/usage.mdx new file mode 100644 index 0000000..d33f0d0 --- /dev/null +++ b/example/content/settings/usage.mdx @@ -0,0 +1,262 @@ +--- +title: Theme options +icon: + name: Fm20enu5 + variant: 32x32_4 +--- + + + + + +
+ +
+ + You can provide some configs to `@react95/gatsby-theme` theme.
+ They must be set in your `gatsby-config.js`, usually in project's root. + + + +Example + +```javascript +// gatsby-config.js +module.exports = { + plugins: [ + { + resolve: '@react95/gatsby-theme', + options: { + // Root url for all content + // defaults to '/' + basePath: '/blog', + // Location of your content, + // defaults to 'content' + contentPath: 'data', + }, + }, + ], +}; +``` + + + + +
+ +
+ +
+ In addition to the theme options, there are a handful of items you can + customize via the `siteMetadata` object in your site's + `gatsby-config.js`.
Our theme will get these values to handle SEO for + you. + + SEO: It's the practice of optimizing your web pages to make + them reach a high position in the search results of Google and other search + engines. In other words: People will be more likely to encounter your website + when searching online. + +
+ + + +Example + +```javascript +// gatsby-config.js +module.exports = { + siteMetadata: { + // Used for the site title and SEO + title: `Gatsby - Powered By React95`, + // Used for SEO + description: `This is a Gatsby website that uses React95`, + // Used for resolving images in social cards + siteUrl: `https://example.com`, + // Used for SEO in social cards + image: `/path-to/your/image`, + // Used for SEO + author: `@mynickname`, + }, +}; +``` + + + + + +
+ +
+ + The following are the defined content fields based on the node interface + in the schema + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FieldType
titleString
imageString
descriptionString
iconIcon
imageString
modalBoolean
+
+ +
+ +
+ + + + + + + + + + + + + + + + + +
FieldType
nameString
variantString
+
+ +
+ +Example + + +```md +--- + +title: Getting Started +description: Your awesome and nostalgic website! +modal: false +icon: + name: Computer + variant: 32x32_4 + +--- + +# Your website starts on this folder + +Feel free to add your content! +``` + + + + + + +
+ +
+
+ Content can include references to images from static folder inside + frontmatter. + + WARNING: When adding an image it will be the featured + image within the post. + +
+ + + +Example + + +```md +--- +title: Hello World (example) +image: /some-image.jpg +icon: + name: Computer + variant: 32x32_4 +--- +``` + + + + + + Inside any `mdx` file you have all React95 components and all React95 icons at + your service: + +Example +```md +--- +title: How to play Freecell +icon: + name: FolderExe + variant: 16x16_4 +--- + + + +# How to play Freecell + + + +... + + +``` + +
+ +[React95 components](https://react95.github.io/React95/) and [React95 icons](https://react95.github.io/React95/?path=/docs/icon--all) + + + diff --git a/example/gatsby-browser.js b/example/gatsby-browser.js new file mode 100644 index 0000000..4697e93 --- /dev/null +++ b/example/gatsby-browser.js @@ -0,0 +1,2 @@ +require('prismjs/plugins/command-line/prism-command-line.css'); +require('prismjs/themes/prism-okaidia.css');