Add static files, guidelines etc

.gitattributes

@@ -0,0 +1,8 @@
+src/docs/* linguist-documentation
+scripts/* linguist-documentation
+gatsby-browser.js linguist-documentation
+gatsby-config.js linguist-documentation
+gatsby-node.js linguist-documentation
+gatsby-ssr.js linguist-documentation
+.travis/* linguist-documentation
+config.js linguist-documentation

.travis.yml

@@ -1,16 +1,12 @@
 language: node_js
-node_js:
-  - node
-install:
-  - npm install
-script:
-  - npm run build
-after_script:
-  - test $TRAVIS_EVENT_TYPE = cron
-    && echo -e "\e[95mDeploying to Repository"
-    && chmod +x .travis/push.sh
-    && ./.travis/push.sh
-  - chmod +x .travis/forcepush.sh && ./.travis/forcepush.sh
 cache:
   directories:
-    - node_modules
+    - node_modules
+node_js:
+- lts/*
+script:
+- npm run extractor
+- npm run builder
+after_success:
+- chmod +x .travis/push.sh
+- .travis/push.sh

.travis/forcepush.sh

@@ -1,3 +0,0 @@
-if [[ $TRAVIS_COMMIT_MESSAGE == *"--force-build"* ]]; 
-  then echo -e "\e[95mFORCE-DEPLOY: Deploying to Repository" && chmod +x .travis/push.sh && ./.travis/push.sh; 
-fi

.travis/push.sh

@@ -12,8 +12,10 @@ commit_website_files() {
       git add *
       if [ $TRAVIS_EVENT_TYPE == "cron" ]; then
         git commit --message "Travis build: $TRAVIS_BUILD_NUMBER [cron]"
+      elif [ $TRAVIS_EVENT_TYPE == "api" ]; then
+        git commit --message "Travis build: $TRAVIS_BUILD_NUMBER [custom]"
       else
-        git commit --message "Travis build: $TRAVIS_BUILD_NUMBER [FORCED]"
+        git commit --message "Travis build: $TRAVIS_BUILD_NUMBER"
       fi
     fi
   fi

CONTRIBUTING.md

@@ -1,34 +1,43 @@
-### Snippet name
+# Contribution guidelines
 
-Brief description
+**30 seconds of CSS** is a community effort, so feel free to contribute in any way you can. Every contribution helps!
 
-#### HTML
+Here's what you can do to help:
 
-```html
+- Submit [pull requests](https://github.com/30-seconds/30-seconds-of-css/pulls) with snippets and tests that you have created (see below for guidelines).
+- [Open issues](https://github.com/30-seconds/30-seconds-of-css/issues/new) for things you want to see added or modified.
+- Be part of the discussion by helping out with [existing issues](https://github.com/30-seconds/30-seconds-of-css/issues).
+- Tag uncategorized snippets by adding the appropriate in the snippet's frontmatter in `tags`.
+- Fix typos in existing snippets, improve snippet descriptions and explanations or provide better examples.
 
-```
+### Snippet submission and Pull request guidelines
 
-#### CSS
+- **DO NOT MODIFY THE README.md FILE!** Make changes to individual snippet files. **Travis CI** will automatically build the `README.md` file when your pull request is merged.
-
+- **Snippet filenames** must correspond to the title of the snippet. For example, if your snippet is titled `awesomeSnippet` the filename should be `awesomeSnippet.md`.
-```css
+  - Use `camelCase` or `kebab-case`, not `snake_case`.
-```
+  - Avoid capitalization of words, except if the whole word is capitalized (e.g. `URL` should be capitalized in the filename and the snippet title).
-
+- **Snippet metadata** must be included in all snippets in the form of frontmatter.
-#### Demo
+  - All snippets must contain a title.
-
+  - All snippets must contain tags, prefixed with `tags:` and separated by commas (optional spaces in-between).
-<!-- Leave this blank, the build script will generate the demo for you. -->
+  - Make sure the first tag in your snippet's tags is one of the main categories, as seen in the `README.md` file or the website.
-
+  - Snippet tags must include a difficulty setting (`begginer`, `intermediate` or `advanced`), preferrably at the end of the list.
-#### Explanation
+- **Snippet titles** should be the same as the name of the function that is present in the snippet.
-
+  - All snippet titles must be prefixed with `title:` and be at the very first line of your snippet's frontmatter.
-<!-- Use a step-by-step (ordered) list if possible. Keep it concise. -->
+  - Snippet titles must be unique (although if you cannot find a better title, just add some placeholder at the end of the filename and title and we will figure it out).
-
+  - Follow snippet titles with an empty line.
-#### Browser support
+- **Snippet descriptions** must be short and to the point. Try to explain *what* the snippet does and *how* the snippet works and what Javascript features are used. Remember to include what functions you are using and why.
-
+  - Follow snippet descriptions with an empty line.
-<!-- Use the checkmark or the warning emoji, see the existing snippets. -->
+- **Snippet code** must be enclosed inside ` ```html `, ` ```css ` or ` ```js ` and ` ``` `.
-
+  - Remember to start your snippet's code on a new line below the opening backticks.
-<span class="snippet__support-note">⚠️ Caveat?</span>
+  - Please use Javascript [Semi-Standard Style](https://github.com/Flet/semistandard).
-
+  - Try to keep your snippet's code short and to the point. Use modern techniques and features. Make sure to test your code before submitting.
-<!-- Whenever possible, link a `caniuse` feature which allows the browser support percentage to be displayed. -->
+  - Try to make your snippet's name unique, so that it does not conflict with existing snippets.
-
+- **Snippet explanations** should be written as lists of points, describing the implemented functionality.
-- https://caniuse.com/#feat=some-feature
+  - Use unordered lists if you have a few points, otherwise use an ordered list.
-
+  - If you have JavaScript functionality in your snippet, it might be worthwhile separating the explanation with it, by adding a new list or a horizontal line break (`---`).
-<!-- tags: (separate each by a comma) -->
+- **Snippet browser support** should be specified as a list of links to https://www.caniuse.com/ features.
+  - Use the `#` next to the feature that you want in the website to get a link to it.
+- Snippets should be short. If your snippet is long, you can still submit it, and we can help you shorten it or figure out ways to improve it.
+- Snippets *should* solve real-world problems, no matter how simple.
+- Snippets *should* be abstract enough to be applied to different scenarios.
+- You can start creating a new snippet, by using the [snippet template](snippet-template.md) to format your snippets.

_headers

@@ -0,0 +1,4 @@
+[[headers]]
+for = "/static/*"
+[headers.values]
+Cache-Control = "public, max-age=360000"

advanced.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="78" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect height="20" rx="3" fill="#fff" width="64"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h65v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110"><text x="325" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="530">advanced</text><text x="325" y="140" transform="scale(.1)" textLength="530">advanced</text></g> </svg>

gatsby-browser.js

@@ -0,0 +1,8 @@
+/**
+ * Implement Gatsby's Browser APIs in this file.
+ *
+ * See: https://www.gatsbyjs.org/docs/browser-apis/
+ */
+
+// You can delete this file if you're not using it
+export { default as wrapRootElement } from './src/docs/state/ReduxWrapper';

gatsby-config.js

@@ -0,0 +1,84 @@
+const config = require('./config');
+
+module.exports = {
+  siteMetadata: {
+    title: `${config.name}`,
+    description: `${config.description}`,
+    author: `@30-seconds`,
+    siteUrl: `${config.siteUrl}`,
+  },
+  plugins: [
+    `gatsby-plugin-sitemap`,
+    `gatsby-plugin-transition-link`,
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `snippets`,
+        path: `${__dirname}/${config.snippetPath}`,
+      },
+    },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `snippet_data`,
+        path: `${__dirname}/${config.snippetDataPath}`,
+      },
+    },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `assets`,
+        path: `${__dirname}/${config.assetPath}`,
+      },
+    },
+    {
+      resolve: `gatsby-plugin-page-creator`,
+      options: {
+        path: `${__dirname}/${config.pagePath}`,
+      },
+    },
+    {
+      resolve: `gatsby-transformer-remark`,
+      options: {
+        plugins: [
+          {
+            resolve: `gatsby-remark-images`,
+            options: {
+              maxWidth: 590,
+            },
+          },
+          `gatsby-remark-prismjs`,
+          `gatsby-remark-copy-linked-files`,
+        ],
+      },
+    },
+    `gatsby-plugin-sass`,
+    `gatsby-transformer-json`,
+    `gatsby-transformer-sharp`,
+    `gatsby-plugin-sharp`,
+    {
+      resolve: `gatsby-plugin-google-analytics`,
+      options: {
+        //trackingId: `ADD YOUR TRACKING ID HERE`,
+        anonymize: true, // Always set this to true, try to comply with GDPR out of the box
+        respectDNT: true, // Always set to true, be respectful of people who ask not to be tracked
+        cookieExpires: 0, // Always set to 0, minimum tracking for your users
+      },
+    },
+    {
+      resolve: `gatsby-plugin-manifest`,
+      options: {
+        name: `${config.name}`,
+        short_name: `${config.shortName}`,
+        start_url: `/`,
+        background_color: `#1e253d`,
+        theme_color: `#1e253d`,
+        display: `standalone`,
+        icon: `assets/30s-icon.png`, // This path is relative to the root of the site.
+      },
+    },
+    `gatsby-plugin-offline`,
+    `gatsby-plugin-react-helmet`,
+    `gatsby-plugin-netlify`,
+  ],
+};

gatsby-node.js

@@ -0,0 +1,93 @@
+const path = require(`path`);
+const { createFilePath } = require(`gatsby-source-filesystem`);
+
+const toKebabCase = str =>
+  str &&
+  str
+    .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
+    .map(x => x.toLowerCase())
+    .join('-');
+
+exports.createPages = ({ graphql, actions }) => {
+  const { createPage } = actions;
+
+  const snippetPage = path.resolve(`./src/docs/templates/SnippetPage.js`);
+  const tagPage = path.resolve(`./src/docs/templates/TagPage.js`);
+  return graphql(
+    `
+      {
+        allMarkdownRemark(
+          sort: { fields: [frontmatter___title], order: ASC }
+          limit: 1000
+        ) {
+          edges {
+            node {
+              fields {
+                slug
+              }
+              frontmatter {
+                tags
+              }
+              fileAbsolutePath
+            }
+          }
+        }
+      }
+    `,
+  ).then(result => {
+    if (result.errors) {
+      throw result.errors;
+    }
+
+    // Create individual snippet pages.
+    const snippets = result.data.allMarkdownRemark.edges;
+
+    snippets.forEach((post, index) => {
+      if (post.node.fileAbsolutePath.indexOf('README') !== -1)
+        return;
+      createPage({
+        path: `/snippet${post.node.fields.slug}`,
+        component: snippetPage,
+        context: {
+          slug: post.node.fields.slug,
+        },
+      });
+    });
+
+    // Create tag pages.
+    const tags = snippets.reduce((acc, post) => {
+      if (!post.node.frontmatter || !post.node.frontmatter.tags) return acc;
+      const primaryTag = post.node.frontmatter.tags.split(',')[0];
+      if (!acc.includes(primaryTag)) acc.push(primaryTag);
+      return acc;
+    }, []);
+
+    tags.forEach(tag => {
+      const tagPath = `/tag/${toKebabCase(tag)}/`;
+      const tagRegex = `/^\\s*${tag}/`;
+      createPage({
+        path: tagPath,
+        component: tagPage,
+        context: {
+          tag,
+          tagRegex,
+        },
+      });
+    });
+
+    return null;
+  });
+};
+
+exports.onCreateNode = ({ node, actions, getNode }) => {
+  const { createNodeField } = actions;
+
+  if (node.internal.type === `MarkdownRemark`) {
+    const value = createFilePath({ node, getNode });
+    createNodeField({
+      name: `slug`,
+      node,
+      value,
+    });
+  }
+};

gatsby-ssr.js

@@ -0,0 +1,8 @@
+/**
+ * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
+ *
+ * See: https://www.gatsbyjs.org/docs/ssr-apis/
+ */
+
+// You can delete this file if you're not using it
+export { default as wrapRootElement } from './src/docs/state/ReduxWrapper';

netlify.toml

@@ -0,0 +1,6 @@
+[build]
+  publish = "public"
+  command = "npm run webber"
+[build.environment]
+  YARN_VERSION = "1.9.4"
+  YARN_FLAGS = "--no-ignore-optional"

snippet_template.md

@@ -0,0 +1,32 @@
+---
+title: Snippet Name
+tags: other,intermediate
+---
+
+Explain briefly what the snippet does.
+
+```html
+<div class="my-snippet"></div>
+```
+
+```css
+.my-snippet {
+  background-color: #fff;
+  border: 1px solid #000;
+  border-radius: 4px;
+}
+```
+
+```js
+console.log("This is optional, if your snippet doesn't require JavaScript, be sure to delete this block!")
+```
+
+#### Explanation
+
+- Explain briefly how the snippet works.
+- Use bullet points for your snippet's explanation.
+- Try to explain everything briefly but clearly.
+
+#### Browser support
+
+- https://www.caniuse.com/#feat=border-radius

static/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: