Features of this gatsby theme from LekoArts

bobby_dreamer

Github LinkedIn

Features of this gatsby theme from LekoArts

02.10.2020 — web-development, gatsbyjs — 1 min read

This is a demo page

Feature testing

Here will a React component go:

Here will a live code example go:

Here will a normal code block go:

1(function() {
2
3var cache = {};
4var form = $('form');
5var minified = true;
6
7var dependencies = {};
8
9var treeURL = 'https://api.github.com/repos/PrismJS/prism/git/trees/gh-pages?recursive=1';
10var treePromise = new Promise(function(resolve) {
11    $u.xhr({
12        url: treeURL,
13        callback: function(xhr) {
14            if (xhr.status < 400) {
15                resolve(JSON.parse(xhr.responseText).tree);
16            }
17        }
18    });
19});

A code block with a JSDoc comment, short, and long comment:

1/**
2 * Get value out of string (e.g. rem => px)
3 * If value is px strip the px part
4 * If the input is already a number only return that value
5 * @param {string | number} input
6 * @param {number} [rootFontSize]
7 * @return {number} Number without last three characters
8 * @example removeLastThree('6rem') => 6
9 */
10const getValue = (input, rootFontSize = 16) => {
11  if (typeof input === `number`) {
12    return input / rootFontSize;
13  }
14
15  const isPxValue = input.slice(-2) === `px`;
16
17  if (isPxValue) {
18    return parseFloat(input.slice(0, -2));
19  }
20
21  return parseFloat(input.slice(0, -3));
22};
23
24// This is a little helper function
25const helper = (a, b) => a + b;
26
27// This is also a little helper function but this time with a really long one-line comment that should show some more details
28const morehelper = (a, b) => a * b;
29
30export { getValue, helper, morehelper };

Normal block without language:

1import Test from "../components/test"
2
3const Layout = ({ children }) => (
4  <Test>
5    {children}
6  </Test>
7)
8
9export default Layout

Code block with code highlighting:

src/components/post.jsx

1import React from "react";
2
3const Post = ({ data: { post } }) => (
4  <Layout>
5    <Heading variant="h2" as="h2">
6      {post.title}
7    </Heading>
8    <p
9      sx={{
10        color: `secondary`,
11        mt: 3,
12        a: { color: `secondary` },
13        fontSize: [1, 1, 2],
14      }}
15    >
16      <span>{post.date}</span>
17      {post.tags && (
18        <React.Fragment>
19          {` — `}
20          <ItemTags tags={post.tags} />
21        </React.Fragment>
22      )}
23    </p>
24    <section
25      sx={{
26        ...CodeStyles,
27        my: 5,
28        ".gatsby-resp-image-wrapper": { my: 5, boxShadow: `lg` },
29      }}
30    >
31      <MDXRenderer>{post.body}</MDXRenderer>
32    </section>
33  </Layout>
34);
35
36export default Post;

Code block without title:

1Harry Potter and the Philosopher's Stone

Code block without lineNumbers (but lang):

Harry Potter and the Chamber of Secrets

Code block without lineNumbers (and without lang):

Harry Potter and the Chamber of Secrets

Code block with only the title:

src/utils/scream.js

1const scream = (input) => window.alert(input)

Code block with only the title but without lineNumbers:

src/utils/scream.js

const scream = (input) => window.alert(input)

Line highlighting without code title:

1const test = 3;
2const foo = "bar";
3const harry = "potter";
4const hermione = "granger";
5const ron = "weasley";

Here will inline code go, just inside the text. Wow!

Code block without line numbers but with highlighting, language, and title:

src/components/blog.tsx

import React from "react";

const Blog = ({ posts }: PostsProps) => {
  const { tagsPath, basePath } = useSiteMetadata();

  return (
    <Layout>
      <Flex sx={{ alignItems: `center`, justifyContent: `space-between` }}>
        <Heading variant="h2" as="h2">
          Blog
        </Heading>
        <Styled.a
          as={Link}
          sx={{ variant: `links.secondary` }}
          to={`/${basePath}/${tagsPath}`.replace(/\/\/+/g, `/`)}
        >
          View all tags
        </Styled.a>
      </Flex>
      <Listing posts={posts} sx={{ mt: [4, 5] }} />
    </Layout>
  );
};

export default Blog;

Table

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)

Six headers

1# Header 1
2## Header 2
3### Header 3
4#### Header 4
5##### Header 5
6###### Header 6

Blockquote

1> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Blockquote : Multiple attributes

This is a header.
This is the first list item.
This is the second list item.
Here's some example code:
1Markdown.generate();

1> ## This is a header.
2> 1. This is the first list item.
3> 2. This is the second list item.
4>
5> Here's some example code:
6>
7>     Markdown.generate();

Bullets

Red
- Green
  - Blue
    - Red
      - Green
- Blue
- Red
  - Green
Blue

1- Red
2  - Green
3    - Blue
4      * Red
5        * Green
6  * Blue
7  - Red
8    - Green
9- Blue

Formatting

code goes here in this line
bold goes here
italics goes here

1- `code goes` here in this line
2- **bold** goes here
3- *italics* goes here

Buy flour and salt
Mix together with water
Bake

11. Buy flour and salt
21. Mix together with water
31. Bake

Code block with multiple copies

Paragraph:

1Code

1Paragraph:
2
3    Code

HR : Horizontal Ruler

1* * *
2
3***
4
5*****
6
7- - -
8
9---------------------------------------

Hyperlinks

This is an example link.

This link has no title attr.

This is an example reference-style link.

1This is [an example](http://example.com "Example") link.
2
3[This link](http://example.com) has no title attr.
4
5This is [an example] [id] reference-style link.
6
7[id]: http://example.com "Optional Title"

Image

1![Alt Text](https://placehold.it/200x50 "Image Title")