diff --git a/gatsby-browser.js b/gatsby-browser.js deleted file mode 100644 index 057dc2af6..000000000 --- a/gatsby-browser.js +++ /dev/null @@ -1,29 +0,0 @@ -/** - * 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 - -let locationScrollTops = []; - -const onPreRouteUpdate = ({ location, prevLocation }) => { - try { - let scrollTop = document.querySelector('.content').scrollTop; - locationScrollTops[prevLocation.pathname] = scrollTop; - } - catch (e) { } -}; - -const onRouteUpdate = ({ location, prevLocation }) => { - try { - if (locationScrollTops[location.pathname]) { - document.querySelector('.content').scrollTop = locationScrollTops[location.pathname]; - } - } - catch (e) { } -} - -export { default as wrapRootElement } from './src/docs/state/ReduxWrapper'; -export { onPreRouteUpdate, onRouteUpdate }; diff --git a/gatsby-config.js b/gatsby-config.js deleted file mode 100644 index 2e4dad6e4..000000000 --- a/gatsby-config.js +++ /dev/null @@ -1,90 +0,0 @@ -const config = require('./config'); - -module.exports = { - siteMetadata: { - title: `${config.name}`, - description: `${config.description}`, - author: `@30-seconds`, - siteUrl: `${config.siteUrl}`, - }, - plugins: [ - `gatsby-plugin-sitemap`, - { - resolve: `gatsby-source-filesystem`, - options: { - name: `snippets`, - path: `${__dirname}/${config.snippetPath}`, - }, - }, - { - resolve: `gatsby-source-filesystem`, - options: { - name: `snippets_archive`, - path: `${__dirname}/${config.snippetArchivePath}`, - }, - }, - { - 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: `UA-117141635-1`, - 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`, - ], -}; diff --git a/gatsby-node.js b/gatsby-node.js deleted file mode 100644 index 337be0261..000000000 --- a/gatsby-node.js +++ /dev/null @@ -1,262 +0,0 @@ -const path = require(`path`); -const { createFilePath } = require(`gatsby-source-filesystem`); -const config = require('./config'); - -const { getTextualContent, getCodeBlocks, optimizeAllNodes } = require(`./src/docs/util`); - -const requirables = []; - -config.requirables.forEach(fileName => { - requirables.push(require(`./snippet_data/${fileName}`)); -}); - -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.onCreateNode = ({ node, actions, getNode }) => { - const { createNodeField } = actions; - - if (node.internal.type === `MarkdownRemark`) { - const value = createFilePath({ node, getNode }); - createNodeField({ - name: `slug`, - node, - value, - }); - } -}; - -exports.sourceNodes = ({ actions, createNodeId, createContentDigest, getNodesByType }) => { - const { createTypes, createNode } = actions; - const typeDefs = ` - type Snippet implements Node { - html: HtmlData - tags: TagData - title: String - code: CodeData - id: String - slug: String - path: String - text: TextData - archived: Boolean - } - - type HtmlData @infer { - full: String - text: String - fullText: String - code: String - example: String - } - - type CodeData @infer { - src: String - example: String - } - - type TextData @infer { - full: String - short: String - } - - type TagData @infer { - primary: String - all: [String] - } - `; - createTypes(typeDefs); - - const markdownNodes = getNodesByType('MarkdownRemark'); - - const snippetNodes = requirables - .reduce((acc, sArr) => { - const archivedScope = sArr.meta.scope.indexOf('archive') !== -1; - return ({ - ...acc, - ...sArr.data.reduce((snippets, snippet) => { - return ({ - ...snippets, - [snippet.id]: { ...snippet, archived: archivedScope} - }); - }, {}) - }); - }, {}); - - Object.entries(snippetNodes).forEach(([id, sNode]) => { - let mNode = markdownNodes.find(mN => mN.frontmatter.title === id); - let nodeContent = { - id, - tags: { - all: sNode.attributes.tags, - primary: sNode.attributes.tags[0] - }, - title: mNode.frontmatter.title, - code: { - src: sNode.attributes.codeBlocks.es6, - example: sNode.attributes.codeBlocks.example - }, - slug: mNode.fields.slug, - path: mNode.fileAbsolutePath, - text: { - full: sNode.attributes.text, - short: sNode.attributes.text.slice(0, sNode.attributes.text.indexOf('\n\n')) - }, - archived: sNode.archived - }; - createNode({ - id: createNodeId(`snippet-${sNode.meta.hash}`), - parent: null, - children: [], - internal: { - type: 'Snippet', - content: JSON.stringify(nodeContent), - contentDigest: createContentDigest(nodeContent) - }, - ...nodeContent - }); - }); - -}; - -exports.createResolvers = ({ createResolvers }) => createResolvers({ - Snippet: { - html: { - resolve: async (source, _, context, info) => { - const resolver = info.schema.getType("MarkdownRemark").getFields()["html"].resolve; - const node = await context.nodeModel.nodeStore.getNodesByType('MarkdownRemark').filter(v => v.frontmatter.title === source.title)[0]; - const args = {}; // arguments passed to the resolver - const html = await resolver(node, args); - return { - full: `${html}`, - text: `${getTextualContent(html, true)}`, - fullText: `${getTextualContent(html, false)}`, - code: `${optimizeAllNodes(getCodeBlocks(html).code)}`, - example: `${optimizeAllNodes(getCodeBlocks(html).example)}` - }; - } - } - } -}); - -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( - ` - { - allSnippet(sort: {fields: id}) { - edges { - node { - id - slug - tags { - all - primary - } - text { - full - short - } - title - html { - code - example - full - text - fullText - } - code { - src - example - } - archived - } - } - } - } - `, - ).then(result => { - if (result.errors) { - throw result.errors; - } - - // Create individual snippet pages. - const snippets = result.data.allSnippet.edges; - - snippets.forEach(snippet => { - if (!snippet.node.archived) { - createPage({ - path: `/snippet${snippet.node.slug}`, - component: snippetPage, - context: { - snippet: snippet.node - } - }); - } else { - createPage({ - path: `/archive${snippet.node.slug}`, - component: snippetPage, - context: { - snippet: snippet.node - } - }); - } - }); - - // Create tag pages. - const tags = [...new Set( - snippets.map(snippet => (snippet.node.tags || {primary: null}).primary) - )] - .filter(Boolean) - .sort((a, b) => a.localeCompare(b)); - - tags.forEach(tag => { - const tagPath = `/tag/${toKebabCase(tag)}/`; - const taggedSnippets = snippets - .filter(snippet => snippet.node.tags.primary === tag) - .filter(snippet => !snippet.node.archived) - .map(({node}) => ({ - title: node.title, - html: node.html.text, - tags: node.tags.all, - id: node.slug.slice(1) - })); - createPage({ - path: tagPath, - component: tagPage, - context: { - tag, - snippets: taggedSnippets - }, - }); - }); - - const beginnerSnippets = snippets - .filter(({ node }) => node.tags.all.includes('beginner')) - .filter(snippet => !snippet.node.archived) - .map(({ node }) => ({ - title: node.title, - html: node.html.text, - tags: node.tags.all, - id: node.slug.slice(1) - })); - - createPage({ - path: `/beginner`, - component: tagPage, - context: { - tag: `beginner snippets`, - snippets: beginnerSnippets - }, - }); - - return null; - }); -}; diff --git a/gatsby-ssr.js b/gatsby-ssr.js deleted file mode 100644 index 3513ab31a..000000000 --- a/gatsby-ssr.js +++ /dev/null @@ -1,8 +0,0 @@ -/** - * 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'; diff --git a/package.json b/package.json index 4a38657fc..26f5e03c4 100644 --- a/package.json +++ b/package.json @@ -34,43 +34,13 @@ "@babel/plugin-proposal-class-properties": "^7.5.0", "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/preset-env": "^7.5.4", - "@babel/preset-react": "^7.0.0", "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2", "babel-plugin-transform-object-rest-spread": "^6.26.0", "eslint": "^5.16.0", - "front-matter": "^3.0.2", "fs-extra": "^8.1.0", - "gatsby": "^2.12.0", - "gatsby-image": "^2.2.6", - "gatsby-plugin-google-analytics": "^2.1.6", - "gatsby-plugin-manifest": "^2.2.3", - "gatsby-plugin-netlify": "^2.1.3", - "gatsby-plugin-offline": "^2.2.4", - "gatsby-plugin-page-creator": "^2.1.5", - "gatsby-plugin-react-helmet": "^3.1.2", - "gatsby-plugin-sass": "^2.1.3", - "gatsby-plugin-sharp": "^2.2.7", - "gatsby-plugin-sitemap": "^2.2.8", - "gatsby-remark-copy-linked-files": "^2.1.3", - "gatsby-remark-images": "^3.1.6", - "gatsby-remark-prismjs": "^3.3.3", - "gatsby-source-filesystem": "^2.1.5", - "gatsby-transformer-json": "^2.2.2", - "gatsby-transformer-remark": "^2.6.6", - "gatsby-transformer-sharp": "^2.2.3", "jest": "^24.9.0", "kleur": "^3.0.3", - "markdown-builder": "^0.9.0", - "node-sass": "^4.12.0", "prettier": "^1.18.2", - "prismjs": "^1.16.0", - "prop-types": "^15.7.2", - "react": "^16.8.6", - "react-copy-to-clipboard": "^5.0.1", - "react-dom": "^16.8.6", - "react-helmet": "^5.2.1", - "react-redux": "^7.1.0", - "redux": "^4.0.4", "rollup": "^0.58.2", "rollup-plugin-babel": "^4.0.3", "rollup-plugin-babel-minify": "^4.0.0" diff --git a/snippets_archive/README.md b/snippets_archive/README.md deleted file mode 100644 index 693905f26..000000000 --- a/snippets_archive/README.md +++ /dev/null @@ -1,733 +0,0 @@ -![Logo](/logo.png) -# Snippets Archive -These snippets, while useful and interesting, didn't quite make it into the repository due to either having very specific use-cases or being outdated. However we felt like they might still be useful to some readers, so here they are. -## Contents - -* [`binarySearch`](#binarysearch) -* [`celsiusToFahrenheit`](#celsiustofahrenheit) -* [`cleanObj`](#cleanobj) -* [`collatz`](#collatz) -* [`countVowels`](#countvowels) -* [`factors`](#factors) -* [`fahrenheitToCelsius`](#fahrenheittocelsius) -* [`fibonacciCountUntilNum`](#fibonaccicountuntilnum) -* [`fibonacciUntilNum`](#fibonacciuntilnum) -* [`heronArea`](#heronarea) -* [`howManyTimes`](#howmanytimes) -* [`httpDelete`](#httpdelete) -* [`httpPut`](#httpput) -* [`isArmstrongNumber`](#isarmstrongnumber) -* [`isSimilar`](#issimilar) -* [`JSONToDate`](#jsontodate) -* [`kmphToMph`](#kmphtomph) -* [`levenshteinDistance`](#levenshteindistance) -* [`mphToKmph`](#mphtokmph) -* [`pipeLog`](#pipelog) -* [`quickSort`](#quicksort) -* [`removeVowels`](#removevowels) -* [`solveRPN`](#solverpn) -* [`speechSynthesis`](#speechsynthesis) -* [`squareSum`](#squaresum) - -### binarySearch - -Use recursion. Similar to `Array.prototype.indexOf()` that finds the index of a value within an array. -The difference being this operation only works with sorted arrays which offers a major performance boost due to it's logarithmic nature when compared to a linear search or `Array.prototype.indexOf()`. - -Search a sorted array by repeatedly dividing the search interval in half. -Begin with an interval covering the whole array. -If the value of the search is less than the item in the middle of the interval, recurse into the lower half. Otherwise recurse into the upper half. -Repeatedly recurse until the value is found which is the mid or you've recursed to a point that is greater than the length which means the value doesn't exist and return `-1`. - -```js -const binarySearch = (arr, val, start = 0, end = arr.length - 1) => { - if (start > end) return -1; - const mid = Math.floor((start + end) / 2); - if (arr[mid] > val) return binarySearch(arr, val, start, mid - 1); - if (arr[mid] < val) return binarySearch(arr, val, mid + 1, end); - return mid; -}; -``` - -
-Examples - -```js -binarySearch([1, 4, 6, 7, 12, 13, 15, 18, 19, 20, 22, 24], 6); // 2 -binarySearch([1, 4, 6, 7, 12, 13, 15, 18, 19, 20, 22, 24], 21); // -1 -``` -
- -
[⬆ Back to top](#contents) - -### celsiusToFahrenheit - -Celsius to Fahrenheit temperature conversion. - -Follows the conversion formula `F = 1.8C + 32`. - -```js -const celsiusToFahrenheit = degrees => 1.8 * degrees + 32; -``` - -
-Examples - -```js -celsiusToFahrenheit(33) // 91.4 -``` -
- -
[⬆ Back to top](#contents) - -### cleanObj - -Removes any properties except the ones specified from a JSON object. - -Use `Object.keys()` method to loop over given JSON object and deleting keys that are not included in given array. -If you pass a special key,`childIndicator`, it will search deeply apply the function to inner objects, too. - -```js -const cleanObj = (obj, keysToKeep = [], childIndicator) => { - Object.keys(obj).forEach(key => { - if (key === childIndicator) { - cleanObj(obj[key], keysToKeep, childIndicator); - } else if (!keysToKeep.includes(key)) { - delete obj[key]; - } - }); - return obj; -}; -``` - -
-Examples - -```js -const testObj = { a: 1, b: 2, children: { a: 1, b: 2 } }; -cleanObj(testObj, ['a'], 'children'); // { a: 1, children : { a: 1}} -``` -
- -
[⬆ Back to top](#contents) - -### collatz - -Applies the Collatz algorithm. - -If `n` is even, return `n/2`. Otherwise, return `3n+1`. - -```js -const collatz = n => (n % 2 === 0 ? n / 2 : 3 * n + 1); -``` - -
-Examples - -```js -collatz(8); // 4 -``` -
- -
[⬆ Back to top](#contents) - -### countVowels - -Retuns `number` of vowels in provided string. - -Use a regular expression to count the number of vowels `(A, E, I, O, U)` in a `string`. - -```js -const countVowels = str => (str.match(/[aeiou]/gi) || []).length; -``` - -
-Examples - -```js -countVowels('foobar'); // 3 -countVowels('gym'); // 0 -``` -
- -
[⬆ Back to top](#contents) - -### factors - -Returns the array of factors of the given `num`. -If the second argument is set to `true` returns only the prime factors of `num`. -If `num` is `1` or `0` returns an empty array. -If `num` is less than `0` returns all the factors of `-int` together with their additive inverses. - -Use `Array.from()`, `Array.prototype.map()` and `Array.prototype.filter()` to find all the factors of `num`. -If given `num` is negative, use `Array.prototype.reduce()` to add the additive inverses to the array. -Return all results if `primes` is `false`, else determine and return only the prime factors using `isPrime` and `Array.prototype.filter()`. -Omit the second argument, `primes`, to return prime and non-prime factors by default. - -**Note**:- _Negative numbers are not considered prime._ - -```js -const factors = (num, primes = false) => { - const isPrime = num => { - const boundary = Math.floor(Math.sqrt(num)); - for (var i = 2; i <= boundary; i++) if (num % i === 0) return false; - return num >= 2; - }; - const isNeg = num < 0; - num = isNeg ? -num : num; - let array = Array.from({ length: num - 1 }) - .map((val, i) => (num % (i + 2) === 0 ? i + 2 : false)) - .filter(val => val); - if (isNeg) - array = array.reduce((acc, val) => { - acc.push(val); - acc.push(-val); - return acc; - }, []); - return primes ? array.filter(isPrime) : array; -}; -``` - -
-Examples - -```js -factors(12); // [2,3,4,6,12] -factors(12, true); // [2,3] -factors(-12); // [2, -2, 3, -3, 4, -4, 6, -6, 12, -12] -factors(-12, true); // [2,3] -``` -
- -
[⬆ Back to top](#contents) - -### fahrenheitToCelsius - -Fahrenheit to Celsius temperature conversion. - -Follows the conversion formula `C = (F - 32) * 5/9`. - -```js -const fahrenheitToCelsius = degrees => (degrees - 32) * 5/9; -``` - -
-Examples - -```js -fahrenheitToCelsius(32); // 0 -``` -
- -
[⬆ Back to top](#contents) - -### fibonacciCountUntilNum - -Returns the number of fibonnacci numbers up to `num`(`0` and `num` inclusive). - -Use a mathematical formula to calculate the number of fibonacci numbers until `num`. - -```js -const fibonacciCountUntilNum = num => - Math.ceil(Math.log(num * Math.sqrt(5) + 1 / 2) / Math.log((Math.sqrt(5) + 1) / 2)); -``` - -
-Examples - -```js -fibonacciCountUntilNum(10); // 7 -``` -
- -
[⬆ Back to top](#contents) - -### fibonacciUntilNum - -Generates an array, containing the Fibonacci sequence, up until the nth term. - -Create an empty array of the specific length, initializing the first two values (`0` and `1`). -Use `Array.prototype.reduce()` to add values into the array, using the sum of the last two values, except for the first two. -Uses a mathematical formula to calculate the length of the array required. - -```js -const fibonacciUntilNum = num => { - let n = Math.ceil(Math.log(num * Math.sqrt(5) + 1 / 2) / Math.log((Math.sqrt(5) + 1) / 2)); - return Array.from({ length: n }).reduce( - (acc, val, i) => acc.concat(i > 1 ? acc[i - 1] + acc[i - 2] : i), - [] - ); -}; -``` - -
-Examples - -```js -fibonacciUntilNum(10); // [ 0, 1, 1, 2, 3, 5, 8 ] -``` -
- -
[⬆ Back to top](#contents) - -### heronArea - -Returns the area of a triangle using only the 3 side lengths, Heron's formula. Assumes that the sides define a valid triangle. Does NOT assume it is a right triangle. - -More information on what Heron's formula is and why it works available here: https://en.wikipedia.org/wiki/Heron%27s_formula. - -Uses `Math.sqrt()` to find the square root of a value. - -```js -const heronArea = (side_a, side_b, side_c) => { - const p = (side_a + side_b + side_c) / 2 - return Math.sqrt(p * (p-side_a) * (p-side_b) * (p-side_c)) - }; -``` - -
-Examples - -```js -heronArea(3, 4, 5); // 6 -``` -
- -
[⬆ Back to top](#contents) - -### howManyTimes - -Returns the number of times `num` can be divided by `divisor` (integer or fractional) without getting a fractional answer. -Works for both negative and positive integers. - -If `divisor` is `-1` or `1` return `Infinity`. -If `divisor` is `-0` or `0` return `0`. -Otherwise, keep dividing `num` with `divisor` and incrementing `i`, while the result is an integer. -Return the number of times the loop was executed, `i`. - -```js -const howManyTimes = (num, divisor) => { - if (divisor === 1 || divisor === -1) return Infinity; - if (divisor === 0) return 0; - let i = 0; - while (Number.isInteger(num / divisor)) { - i++; - num = num / divisor; - } - return i; -}; -``` - -
-Examples - -```js -howManyTimes(100, 2); // 2 -howManyTimes(100, 2.5); // 2 -howManyTimes(100, 0); // 0 -howManyTimes(100, -1); // Infinity -``` -
- -
[⬆ Back to top](#contents) - -### httpDelete - -Makes a `DELETE` request to the passed URL. - -Use `XMLHttpRequest` web api to make a `delete` request to the given `url`. -Handle the `onload` event, by running the provided `callback` function. -Handle the `onerror` event, by running the provided `err` function. -Omit the third argument, `err` to log the request to the console's error stream by default. - -```js -const httpDelete = (url, callback, err = console.error) => { - const request = new XMLHttpRequest(); - request.open('DELETE', url, true); - request.onload = () => callback(request); - request.onerror = () => err(request); - request.send(); -}; -``` - -
-Examples - -```js -httpDelete('https://website.com/users/123', request => { - console.log(request.responseText); -}); // 'Deletes a user from the database' -``` -
- -
[⬆ Back to top](#contents) - -### httpPut - -Makes a `PUT` request to the passed URL. - -Use `XMLHttpRequest` web api to make a `put` request to the given `url`. -Set the value of an `HTTP` request header with `setRequestHeader` method. -Handle the `onload` event, by running the provided `callback` function. -Handle the `onerror` event, by running the provided `err` function. -Omit the last argument, `err` to log the request to the console's error stream by default. - -```js -const httpPut = (url, data, callback, err = console.error) => { - const request = new XMLHttpRequest(); - request.open("PUT", url, true); - request.setRequestHeader('Content-type','application/json; charset=utf-8'); - request.onload = () => callback(request); - request.onerror = () => err(request); - request.send(data); -}; -``` - -
-Examples - -```js -const password = "fooBaz"; -const data = JSON.stringify(password); -httpPut('https://website.com/users/123', data, request => { - console.log(request.responseText); -}); // 'Updates a user's password in database' -``` -
- -
[⬆ Back to top](#contents) - -### isArmstrongNumber - -Checks if the given number is an Armstrong number or not. - -Convert the given number into an array of digits. Use the exponent operator (`**`) to get the appropriate power for each digit and sum them up. If the sum is equal to the number itself, return `true` otherwise `false`. - -```js -const isArmstrongNumber = digits => - (arr => arr.reduce((a, d) => a + parseInt(d) ** arr.length, 0) == digits)( - (digits + '').split('') - ); -``` - -
-Examples - -```js -isArmstrongNumber(1634); // true -isArmstrongNumber(56); // false -``` -
- -
[⬆ Back to top](#contents) - -### isSimilar - -Determines if the `pattern` matches with `str`. - -Use `String.toLowerCase()` to convert both strings to lowercase, then loop through `str` and determine if it contains all characters of `pattern` and in the correct order. -Adapted from [here](https://github.com/forrestthewoods/lib_fts/blob/80f3f8c52db53428247e741b9efe2cde9667050c/code/fts_fuzzy_match.js#L18). - -```js -const isSimilar = (pattern, str) => - [...str].reduce( - (matchIndex, char) => - char.toLowerCase() === (pattern[matchIndex] || '').toLowerCase() - ? matchIndex + 1 - : matchIndex, - 0 - ) === pattern.length; -``` - -
-Examples - -```js -isSimilar('rt','Rohit'); // true -isSimilar('tr','Rohit'); // false -``` -
- -
[⬆ Back to top](#contents) - -### JSONToDate - -Converts a JSON object to a date. - -Use `Date()`, to convert dates in JSON format to readable format (`dd/mm/yyyy`). - -```js -const JSONToDate = arr => { - const dt = new Date(parseInt(arr.toString().substr(6))); - return `${dt.getDate()}/${dt.getMonth() + 1}/${dt.getFullYear()}`; -}; -``` - -
-Examples - -```js -JSONToDate(/Date(1489525200000)/); // "14/3/2017" -``` -
- -
[⬆ Back to top](#contents) - -### kmphToMph - -Convert kilometers/hour to miles/hour. - -Multiply the constant of proportionality with the argument. - -```js -const kmphToMph = (kmph) => 0.621371192 * kmph; -``` - -
-Examples - -```js -kmphToMph(10); // 16.09344000614692 -kmphToMph(345.4); // 138.24264965280207 -``` -
- -
[⬆ Back to top](#contents) - -### levenshteinDistance - -Calculates the [Levenshtein distance](https://en.wikipedia.org/wiki/Levenshtein_distance) between two strings. - -Calculates the number of changes (substitutions, deletions or additions) required to convert `string1` to `string2`. -Can also be used to compare two strings as shown in the second example. - -```js -const levenshteinDistance = (string1, string2) => { - if (string1.length === 0) return string2.length; - if (string2.length === 0) return string1.length; - let matrix = Array(string2.length + 1) - .fill(0) - .map((x, i) => [i]); - matrix[0] = Array(string1.length + 1) - .fill(0) - .map((x, i) => i); - for (let i = 1; i <= string2.length; i++) { - for (let j = 1; j <= string1.length; j++) { - if (string2[i - 1] === string1[j - 1]) { - matrix[i][j] = matrix[i - 1][j - 1]; - } else { - matrix[i][j] = Math.min( - matrix[i - 1][j - 1] + 1, - matrix[i][j - 1] + 1, - matrix[i - 1][j] + 1 - ); - } - } - } - return matrix[string2.length][string1.length]; -}; -``` - -
-Examples - -```js -levenshteinDistance('30-seconds-of-code','30-seconds-of-python-code'); // 7 -const compareStrings = (string1,string2) => (100 - levenshteinDistance(string1,string2) / Math.max(string1.length,string2.length)); -compareStrings('30-seconds-of-code', '30-seconds-of-python-code'); // 99.72 (%) -``` -
- -
[⬆ Back to top](#contents) - -### mphToKmph - -Convert miles/hour to kilometers/hour. - -Multiply the constant of proportionality with the argument. - -```js -const mphToKmph = (mph) => 1.6093440006146922 * mph; -``` - -
-Examples - -```js -mphToKmph(10); // 16.09344000614692 -mphToKmph(85.9); // 138.24264965280207 -``` -
- -
[⬆ Back to top](#contents) - -### pipeLog - -Logs a value and returns it. - -Use `console.log` to log the supplied value, combined with the `||` operator to return it. - -```js -const pipeLog = data => console.log(data) || data; -``` - -
-Examples - -```js -pipeLog(1); // logs `1` and returns `1` -``` -
- -
[⬆ Back to top](#contents) - -### quickSort - -QuickSort an Array (ascending sort by default). - -Use recursion. -Use `Array.prototype.filter` and spread operator (`...`) to create an array that all elements with values less than the pivot come before the pivot, and all elements with values greater than the pivot come after it. -If the parameter `desc` is truthy, return array sorts in descending order. - -```js -const quickSort = ([n, ...nums], desc) => - isNaN(n) - ? [] - : [ - ...quickSort(nums.filter(v => (desc ? v > n : v <= n)), desc), - n, - ...quickSort(nums.filter(v => (!desc ? v > n : v <= n)), desc) - ]; -``` - -
-Examples - -```js -quickSort([4, 1, 3, 2]); // [1,2,3,4] -quickSort([4, 1, 3, 2], true); // [4,3,2,1] -``` -
- -
[⬆ Back to top](#contents) - -### removeVowels - -Returns all the vowels in a `str` replaced by `repl`. - -Use `String.prototype.replace()` with a regexp to replace all vowels in `str`. -Omot `repl` to use a default value of `''`. - -```js -const removeVowels = (str, repl = '') => str.replace(/[aeiou]/gi, repl); -``` - -
-Examples - -```js -removeVowels("foobAr"); // "fbr" -removeVowels("foobAr","*"); // "f**b*r" -``` -
- -
[⬆ Back to top](#contents) - -### solveRPN - -Solves the given mathematical expression in [reverse polish notation](https://en.wikipedia.org/wiki/Reverse_Polish_notation). -Throws appropriate errors if there are unrecognized symbols or the expression is wrong. The valid operators are :- `+`,`-`,`*`,`/`,`^`,`**` (`^`&`**` are the exponential symbols and are same). This snippet does not supports any unary operators. - -Use a dictionary, `OPERATORS` to specify each operator's matching mathematical operation. -Use `String.prototype.replace()` with a regular expression to replace `^` with `**`, `String.prototype.split()` to tokenize the string and `Array.prototype.filter()` to remove empty tokens. -Use `Array.prototype.forEach()` to parse each `symbol`, evaluate it as a numeric value or operator and solve the mathematical expression. -Numeric values are converted to floating point numbers and pushed to a `stack`, while operators are evaluated using the `OPERATORS` dictionary and pop elements from the `stack` to apply operations. - -```js -const solveRPN = rpn => { - const OPERATORS = { - '*': (a, b) => a * b, - '+': (a, b) => a + b, - '-': (a, b) => a - b, - '/': (a, b) => a / b, - '**': (a, b) => a ** b - }; - const [stack, solve] = [ - [], - rpn - .replace(/\^/g, '**') - .split(/\s+/g) - .filter(el => !/\s+/.test(el) && el !== '') - ]; - solve.forEach(symbol => { - if (!isNaN(parseFloat(symbol)) && isFinite(symbol)) { - stack.push(symbol); - } else if (Object.keys(OPERATORS).includes(symbol)) { - const [a, b] = [stack.pop(), stack.pop()]; - stack.push(OPERATORS[symbol](parseFloat(b), parseFloat(a))); - } else { - throw `${symbol} is not a recognized symbol`; - } - }); - if (stack.length === 1) return stack.pop(); - else throw `${rpn} is not a proper RPN. Please check it and try again`; -}; -``` - -
-Examples - -```js -solveRPN('15 7 1 1 + - / 3 * 2 1 1 + + -'); // 5 -solveRPN('2 3 ^'); // 8 -``` -
- -
[⬆ Back to top](#contents) - -### speechSynthesis - -Performs speech synthesis (experimental). - -Use `SpeechSynthesisUtterance.voice` and `window.speechSynthesis.getVoices()` to convert a message to speech. -Use `window.speechSynthesis.speak()` to play the message. - -Learn more about the [SpeechSynthesisUtterance interface of the Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance). - -```js -const speechSynthesis = message => { - const msg = new SpeechSynthesisUtterance(message); - msg.voice = window.speechSynthesis.getVoices()[0]; - window.speechSynthesis.speak(msg); -}; -``` - -
-Examples - -```js -speechSynthesis('Hello, World'); // // plays the message -``` -
- -
[⬆ Back to top](#contents) - -### squareSum - -Squares each number in an array and then sums the results together. - -Use `Array.prototype.reduce()` in combination with `Math.pow()` to iterate over numbers and sum their squares into an accumulator. - -```js -const squareSum = (...args) => args.reduce((squareSum, number) => squareSum + Math.pow(number, 2), 0); -``` - -
-Examples - -```js -squareSum(1, 2, 2); // 9 -``` -
- -
[⬆ Back to top](#contents) diff --git a/src/docs/components/Meta.js b/src/docs/components/Meta.js deleted file mode 100644 index c79e07669..000000000 --- a/src/docs/components/Meta.js +++ /dev/null @@ -1,78 +0,0 @@ -import React from 'react'; -import Helmet from 'react-helmet'; -import { useStaticQuery, graphql } from 'gatsby'; -require('../styles/index.scss'); // Do not change this to `import`, it's not going to work, no clue why - -// =================================================== -// Page metadata (using Helmet) -// =================================================== -const Meta = ({ description = '', lang = 'en', meta = [], title }) => { - const { site, file } = useStaticQuery( - graphql` - query { - site { - siteMetadata { - title - description - author - } - } - file(relativePath: { eq: "logo.png" }) { - id - childImageSharp { - fluid(maxHeight: 400) { - src - } - } - } - } - `, - ); - - const metaDescription = description || site.siteMetadata.description; - - return ( - - ); -}; - -export default Meta; diff --git a/src/docs/components/SVGs/BackArrowIcon.js b/src/docs/components/SVGs/BackArrowIcon.js deleted file mode 100644 index 789edf859..000000000 --- a/src/docs/components/SVGs/BackArrowIcon.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; - -const BackArrowIcon = ({ className, onClick }) => ( - - - - -); - -export default BackArrowIcon; diff --git a/src/docs/components/SVGs/ClipboardIcon.js b/src/docs/components/SVGs/ClipboardIcon.js deleted file mode 100644 index e57f84b37..000000000 --- a/src/docs/components/SVGs/ClipboardIcon.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; - -const ClipboardIcon = ({ className, onClick }) => ( - - - - -); - -export default ClipboardIcon; diff --git a/src/docs/components/SVGs/CollapseClosedIcon.js b/src/docs/components/SVGs/CollapseClosedIcon.js deleted file mode 100644 index a72270988..000000000 --- a/src/docs/components/SVGs/CollapseClosedIcon.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; - -const CollapseClosedIcon = ({ className, onClick }) => ( - - - - - -); - -export default CollapseClosedIcon; diff --git a/src/docs/components/SVGs/CollapseOpenIcon.js b/src/docs/components/SVGs/CollapseOpenIcon.js deleted file mode 100644 index bcd04cb22..000000000 --- a/src/docs/components/SVGs/CollapseOpenIcon.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; - -const CollapseOpenIcon = ({ className, onClick }) => ( - - - - -); - -export default CollapseOpenIcon; diff --git a/src/docs/components/SVGs/DarkModeIcon.js b/src/docs/components/SVGs/DarkModeIcon.js deleted file mode 100644 index 318423094..000000000 --- a/src/docs/components/SVGs/DarkModeIcon.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -const DarkModeIcon = ({ className, onClick }) => ( - - - -); - -export default DarkModeIcon; diff --git a/src/docs/components/SVGs/GithubIcon.js b/src/docs/components/SVGs/GithubIcon.js deleted file mode 100644 index 5d2b2bb25..000000000 --- a/src/docs/components/SVGs/GithubIcon.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -const GithubIcon = ({ className, onClick }) => ( - - - -); - -export default GithubIcon; diff --git a/src/docs/components/SVGs/LightModeIcon.js b/src/docs/components/SVGs/LightModeIcon.js deleted file mode 100644 index bb13cb19e..000000000 --- a/src/docs/components/SVGs/LightModeIcon.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; - -const LightModeIcon = ({ className, onClick }) => ( - - - - - - - - - - - -); - -export default LightModeIcon; diff --git a/src/docs/components/SVGs/ListIcon.js b/src/docs/components/SVGs/ListIcon.js deleted file mode 100644 index 853b1a7b2..000000000 --- a/src/docs/components/SVGs/ListIcon.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; - -const ListIcon = ({ className, onClick }) => ( - - - - - - - - -); - -export default ListIcon; diff --git a/src/docs/components/SVGs/SearchIcon.js b/src/docs/components/SVGs/SearchIcon.js deleted file mode 100644 index 763ae3ea9..000000000 --- a/src/docs/components/SVGs/SearchIcon.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; - -const SearchIcon = ({ className, onClick }) => { - return ( - - - - - ); -}; - -export default SearchIcon; diff --git a/src/docs/components/SVGs/ShareIcon.js b/src/docs/components/SVGs/ShareIcon.js deleted file mode 100644 index 8e78b671e..000000000 --- a/src/docs/components/SVGs/ShareIcon.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; - -const ShareIcon = ({ className, onClick }) => ( - - - - - - - -); - -export default ShareIcon; diff --git a/src/docs/components/Search.js b/src/docs/components/Search.js deleted file mode 100644 index 5b2903d43..000000000 --- a/src/docs/components/Search.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; - -// =================================================== -// Simple, stateful search component -// =================================================== -const Search = ({ defaultValue = '', setSearchQuery, className = '' }) => { - const [value, setValue] = React.useState(defaultValue); - - React.useEffect(() => { - setSearchQuery(value); - }, [value]); - - return ( - { - setValue(e.target.value); - }} - /> - ); -}; - -export default Search; diff --git a/src/docs/components/Shell.js b/src/docs/components/Shell.js deleted file mode 100644 index c8f0cdad9..000000000 --- a/src/docs/components/Shell.js +++ /dev/null @@ -1,130 +0,0 @@ -import React from 'react'; -import { graphql, useStaticQuery, Link } from 'gatsby'; -import { connect } from 'react-redux'; -import config from '../../../config'; - -import { toggleDarkMode } from '../state/app'; - -import SearchIcon from './SVGs/SearchIcon'; -import GithubIcon from './SVGs/GithubIcon'; -import DarkModeIcon from './SVGs/DarkModeIcon'; -import LightModeIcon from './SVGs/LightModeIcon'; -import ListIcon from './SVGs/ListIcon'; - -// =================================================== -// Application-level UI component -// =================================================== -const Shell = ({ - isDarkMode, - isSearch, - isList, - dispatch, - withIcon = true, - withTitle = true, - children, -}) => { - const data = useStaticQuery(graphql` - query SiteTitleQuery { - site { - siteMetadata { - title - description - } - } - file(relativePath: { eq: "30s-icon.png" }) { - id - childImageSharp { - original { - src - } - } - } - snippetDataJson(meta: { type: { eq: "snippetListingArray" } }) { - data { - title - id - attributes { - tags - } - } - } - } - `); - - return ( -
- {/* Menu */} -
- - - - - - - {/* eslint-disable-next-line */} - - - - -
- {/* Content */} -
- {withTitle ? ( -

- {data.site.siteMetadata.title} - {withIcon ? ( - Logo - ) : ( - '' - )} -

- ) : ( - '' - )} - {children} -
-
- ); -}; - -export default connect( - state => ({ - isDarkMode: state.app.isDarkMode, - lastPageTitle: state.app.lastPageTitle, - lastPageUrl: state.app.lastPageUrl, - searchQuery: state.app.searchQuery, - }), - null, -)(Shell); diff --git a/src/docs/components/SimpleCard.js b/src/docs/components/SimpleCard.js deleted file mode 100644 index 7cbafc0a6..000000000 --- a/src/docs/components/SimpleCard.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; - -// =================================================== -// Generic card (displays textual content) -// =================================================== -const SimpleCard = ({ - title, - children -}) => ( -
-

- {title} -

-
- {children} -
-
-); - -export default SimpleCard; diff --git a/src/docs/components/SnippetCard.js b/src/docs/components/SnippetCard.js deleted file mode 100644 index 5ed913734..000000000 --- a/src/docs/components/SnippetCard.js +++ /dev/null @@ -1,131 +0,0 @@ -import React from 'react'; -import { CopyToClipboard } from 'react-copy-to-clipboard'; -import config from '../../../config'; -import { Link } from 'gatsby'; - -import { getTextualContent, getCodeBlocks, optimizeAllNodes } from '../util'; -// import ClipboardIcon from './SVGs/ClipboardIcon'; -// import ShareIcon from './SVGs/ShareIcon'; -import CollapseOpenIcon from './SVGs/CollapseOpenIcon'; -import CollapseClosedIcon from './SVGs/CollapseClosedIcon'; -// import ReactCSSTransitionReplace from 'react-css-transition-replace'; - -// =================================================== -// Snippet Card HOC - check components below for more -// =================================================== -const SnippetCard = ({ short, snippetData, ...rest }) => { - let difficulty = snippetData.tags.includes('advanced') - ? 'advanced' - : snippetData.tags.includes('beginner') - ? 'beginner' - : 'intermediate'; - return short ? ( - - ) : ( - - ); -}; - -// =================================================== -// Simple card corner for difficulty display -// =================================================== -const CardCorner = ({ difficulty = 'intermediate' }) => ( -
-); - -// =================================================== -// Full snippet view (tags, code, title, description) -// =================================================== -const FullCard = ({ snippetData, difficulty, isDarkMode }) => { - const [examplesOpen, setExamplesOpen] = React.useState(false); - - return ( -
- -

{snippetData.title}

- {snippetData.tags.map(tag => ( - {tag} - ))} -
-
- { - let tst = document.createElement('div'); - tst.classList = 'toast'; - tst.innerHTML = 'Snippet copied to clipboard!'; - document.body.appendChild(tst); - setTimeout(function() { - tst.style.opacity = 0; - setTimeout(function() { - document.body.removeChild(tst); - }, 300); - }, 1700); - }} - > - - {examplesOpen && ( - 
-          )}
-
-
- ); -}; - -// =================================================== -// Short snippet view (title, description, code*) -// =================================================== -const ShortCard = ({ - snippetData, - archived = false, - difficulty, -}) => { - return ( - -
- -

- {snippetData.title} -

-
-
- - ); -}; - -export default SnippetCard; diff --git a/src/docs/pages/404.js b/src/docs/pages/404.js deleted file mode 100644 index 209ac9ee7..000000000 --- a/src/docs/pages/404.js +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import { Link } from 'gatsby'; - -import Shell from '../components/Shell'; -import Meta from '../components/Meta'; - -// =================================================== -// Not found page -// =================================================== -const NotFoundPage = ({ isDarkMode }) => ( - <> - - -

404

-
-

- Page not found -
-

-

- Seems like you have reached a page that does not exist. -

- - - - - -   Go home - -
- - -); - -export default connect( - state => ({ - isDarkMode: state.app.isDarkMode, - lastPageTitle: state.app.lastPageTitle, - lastPageUrl: state.app.lastPageUrl, - searchQuery: state.app.searchQuery, - }), - null, -)(NotFoundPage); diff --git a/src/docs/pages/about.js b/src/docs/pages/about.js deleted file mode 100644 index 8ef2dda1c..000000000 --- a/src/docs/pages/about.js +++ /dev/null @@ -1,104 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; - -import Shell from '../components/Shell'; -import Meta from '../components/Meta'; -import SimpleCard from '../components/SimpleCard'; - -// =================================================== -// About page -// =================================================== -const AboutPage = ({ isDarkMode }) => ( - <> - - -

About

-

- A few word about us, our goals and our projects. -

- -

- The core goal of 30 seconds is to provide a quality resource for beginner and advanced developers alike. We want to help improve the software development ecosystem, by lowering the barrier of entry for newcomers and help seasoned veterans pick up new tricks and remember old ones. -

-

- We believe that coding has to be easily accessible, and this is why we provide all of our resources for free. Meanwhile, we try to constantly engage the open source community both as a means to understand the needs of our fellow developers and as an opportunity for people to actively participate in open source software. -

- - -

- In order to help grow the open source community, we have collected hundreds of snippets that can be of use in a wide range of situations. We welcome new contributors and we like fresh ideas, as long as the code is short and easy to grasp in about 30 seconds. -

-

- The only catch, if you may, is that a few of our snippets are not perfectly optimized for large, enterprise applications and they might not be deemed production-ready. We strive, however, to keep our collections up to date and add content as often as possible to ensure we cover a wide variety of topics and techniques. -

- - -

- The 30 seconds movement started back in December, 2017, with the release of 30 seconds of code by Angelos Chalaris. Since then, hundreds of developers have contributed snippets to over 6 repositories, creating a thriving community of people willing to help each other write better code. -

-

- In late 2018, the 30 seconds organization was formed on GitHub, in order to expand upon existing projects and ensure that they will remain high-quality resources in the future. -

- - -

- The 30 seconds movement and, to some extent, the associated GitHub organization consists of all the people who have invested time and ideas to be part of this amazing community. Meanwhile, these fine folks are currently responsible for maintaining the codebases and dealing with organizational matters: -

-
-
- chalarangelo - Angelos Chalaris -
-
- fejes713 - Stefan Fejes -
-
- flxwu - Felix Wu -
-
- atomiks - atomiks -
-
-
-
- skatcat31 - Robert Mennell -
-
- petrovicstefanrs - Stefan Petrovic -
-
- kirjs - Kirill Cherkashin -
-
- sohelamin - Sohel Amin -
-
- - -

- In order for the code provided via the 30 seconds projects to be as accessible and useful as possible, all of the snippets in these collections are licensed under the CC0-1.0 License meaning they are absolutely free to use in any project you like. If you like what we do, you can always credit us, but that is not mandatory. -

-

- Logos, names and trademarks are not to be used without the explicit consent of the maintainers or owners of the 30 seconds GitHub organization. The only exception to this is the usage of the 30-seconds-of- name in open source projects, licensed under the CC0-1.0 License and hosted on GitHub, if their README and website clearly states that they are unofficial projects and in no way affiliated with the organization. -

- - - -); - -export default connect( - state => ({ - isDarkMode: state.app.isDarkMode, - lastPageTitle: state.app.lastPageTitle, - lastPageUrl: state.app.lastPageUrl, - searchQuery: state.app.searchQuery, - }), - null, -)(AboutPage); diff --git a/src/docs/pages/archive.js b/src/docs/pages/archive.js deleted file mode 100644 index 12814f0bb..000000000 --- a/src/docs/pages/archive.js +++ /dev/null @@ -1,75 +0,0 @@ -import React from 'react'; -import { graphql } from 'gatsby'; -import { connect } from 'react-redux'; -import { pushNewPage } from '../state/app'; - -import Meta from '../components/Meta'; -import Shell from '../components/Shell'; -import SnippetCard from '../components/SnippetCard' - -// =================================================== -// Individual snippet category/tag page -// =================================================== -const ArchivePage = props => { - const snippets = props.data.allSnippet.edges; - - React.useEffect(() => { - props.dispatch(pushNewPage('Archived', props.path)); - }, []); - - return ( - <> - - -

Archived snippets

-

These snippets, while useful and interesting, didn't quite make it into the repository due to either having very specific use-cases or being outdated. However we felt like they might still be useful to some readers, so here they are.

-

Click on a snippet card to view the snippet.

- {snippets && - snippets.map(({ node }) => ( - - ))} - - - ); -}; - -export default connect( - state => ({ - isDarkMode: state.app.isDarkMode, - lastPageTitle: state.app.lastPageTitle, - lastPageUrl: state.app.lastPageUrl, - searchQuery: state.app.searchQuery, - }), - null, -)(ArchivePage); - -export const archivePageQuery = graphql` - query archiveListing { - allSnippet(filter: {archived: {eq: true}}) { - edges { - node { - title - html { - text - } - tags { - all - primary - } - id - } - } - } - } -`; diff --git a/src/docs/pages/glossary.js b/src/docs/pages/glossary.js deleted file mode 100644 index fc8865425..000000000 --- a/src/docs/pages/glossary.js +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import { graphql } from 'gatsby'; -import { connect } from 'react-redux'; -import { pushNewPage } from '../state/app'; - -import Meta from '../components/Meta'; -import Shell from '../components/Shell'; -import SimpleCard from '../components/SimpleCard'; - -// =================================================== -// Individual snippet category/tag page -// =================================================== -const GlossaryPage = props => { - const posts = props.data.snippetDataJson.data; - - React.useEffect(() => { - props.dispatch(pushNewPage('Glossary', props.path)); - }, []); - - return ( - <> - - -

Glossary

-

Developers use a lot of terminology daily. Every once in a while, you might find a term you do not know. We know how frustrating that can get, so we provide you with a handy glossary of frequently used web development terms.

- {posts && - posts.map(term => ( - -

{term.attributes.text}

- - ))} - - - ); -}; - -export default connect( - state => ({ - isDarkMode: state.app.isDarkMode, - lastPageTitle: state.app.lastPageTitle, - lastPageUrl: state.app.lastPageUrl, - searchQuery: state.app.searchQuery, - }), - null, -)(GlossaryPage); - -export const archivePageQuery = graphql` - query GlossaryPage { - snippetDataJson(meta: {type: {eq: "glossaryTermArray"}}) { - data { - attributes { - text - } - title - id - } - } - } -`; diff --git a/src/docs/pages/index.js b/src/docs/pages/index.js deleted file mode 100644 index c5af00f7a..000000000 --- a/src/docs/pages/index.js +++ /dev/null @@ -1,155 +0,0 @@ -import React from 'react'; -import { graphql, Link } from 'gatsby'; -import { connect } from 'react-redux'; -import { pushNewPage, pushNewQuery } from '../state/app'; - -import Shell from '../components/Shell'; -import Meta from '../components/Meta'; -import Search from '../components/Search'; -import SnippetCard from '../components/SnippetCard'; -import SimpleCard from '../components/SimpleCard'; - -// =================================================== -// Home page (splash and search) -// =================================================== -const IndexPage = props => { - const snippets = props.data.allSnippet.edges; - - const [searchQuery, setSearchQuery] = React.useState(props.searchQuery); - const [searchResults, setSearchResults] = React.useState(snippets); - - React.useEffect(() => { - props.dispatch(pushNewQuery(searchQuery)); - let q = searchQuery.toLowerCase(); - let results = snippets; - if (q.trim().length) - results = snippets.filter( - ({node}) => - node.tags.all.filter(t => t.indexOf(q) !== -1).length || - node.title.toLowerCase().indexOf(q) !== -1, - ); - setSearchResults(results); - }, [searchQuery]); - - React.useEffect(() => { - props.dispatch(pushNewPage('Search', '/search')); - }, []); - - return ( - <> - - - Logo -

{props.data.site.siteMetadata.title}

-

- {props.data.site.siteMetadata.description} -

- - {searchQuery.length === 0 ? ( - <> -

- Start typing a keyword to see matching snippets or click to view the whole list. -

-
- - ) : searchResults.length === 0 ? ( - <> -

- We couldn't find any results for the keyword{' '} - {searchQuery}. -

-
- - ) : ( - <> -

- Click on a snippet card to view the snippet. -

-

Search results

- {searchResults.map(({node}) => ( - - ))} - - )} - -

30 seconds provides high-quality learning resources for developers of all skill levels in the form of snippet collections in various programming languages since its inception in 2017. Today, 30 seconds consists of a community of over 250 contributors and more than 10 maintainers, dedicated to creating the best short-form learning resources for software developers. Our goal is to make software development more accessible and help the open-source community grow by helping people learn to code for free.

Read more...

- - -
    - { - [ - { name: '30 seconds of CSS', url: 'https://css.30secondsofcode.org/' }, - { name: '30 seconds of Python', url: 'https://python.30secondsofcode.org/' }, - { name: '30 seconds of React', url: 'https://react.30secondsofcode.org/' }, - { name: '30 seconds of PHP', url: 'https://php.30secondsofcode.org/' }, - { name: '30 seconds of Interviews', url: 'https://30secondsofinterviews.org/' }, - { name: '30 seconds of Knowledge', url: 'https://chrome.google.com/webstore/detail/30-seconds-of-knowledge/mmgplondnjekobonklacmemikcnhklla' }, - ].map(v => (
  • {v.name}
    • )) - } -
- - - - ); -}; - -export default connect( - state => ({ - isDarkMode: state.app.isDarkMode, - lastPageTitle: state.app.lastPageTitle, - lastPageUrl: state.app.lastPageUrl, - searchQuery: state.app.searchQuery, - }), - null, -)(IndexPage); - -export const indexPageQuery = graphql` - query snippetList { - site { - siteMetadata { - title - description - author - } - } - file(relativePath: { eq: "30s-icon.png" }) { - id - childImageSharp { - original { - src - } - } - } - allSnippet { - edges { - node { - title - html { - text - } - tags { - all - } - id - } - } - } - } -`; diff --git a/src/docs/pages/list.js b/src/docs/pages/list.js deleted file mode 100644 index fb7b462aa..000000000 --- a/src/docs/pages/list.js +++ /dev/null @@ -1,161 +0,0 @@ -import React from 'react'; -import { graphql, Link } from 'gatsby'; -import { connect } from 'react-redux'; -import { pushNewPage } from '../state/app'; -import { capitalize } from '../util'; -import config from '../../../config'; - -import Shell from '../components/Shell'; -import Meta from '../components/Meta'; -import SnippetCard from '../components/SnippetCard'; - -import SimpleCard from '../components/SimpleCard'; - -// =================================================== -// Snippet list page -// =================================================== -const ListPage = props => { - const snippets = props.data.allSnippet.edges; - const archivedSnippets = props.data.allArchivedSnippet.edges; - - const tags = [...new Set( - snippets.map(snippet => (snippet.node.tags || { primary: null }).primary) - )] - .filter(Boolean) - .sort((a, b) => a.localeCompare(b)); - - const staticPages = [ - { - url: 'beginner', - title: 'Beginner snippets', - description: 'Snippets aimed towards individuals at the start of their web developer journey.', - }, - { - url: 'glossary', - title: 'Glossary', - description: 'A handy glossary of web development terminology.', - }, - { - url: 'about', - title: 'About', - description: 'A few word about us, our goals and our projects.', - }, - ]; - - React.useEffect(() => { - props.dispatch(pushNewPage('Snippet List', '/list')); - }, []); - - return ( - <> - - -

Snippet List

-

- Click on a snippet card to view the snippet or a tag name to view all - snippets in that category. -

- {tags.sort((a,b) => a.localeCompare(b)).map(tag => ( - <> -

- - {capitalize(tag)} - -

- {snippets - .filter(({node}) => node.tags.primary === tag) - .map(({node}) => ( - - ))} - - ))} -

- Archived snippets -

- {archivedSnippets - .map(({node}) => ( - - ))} -
- {staticPages.map(page => ( - - -

{page.description}

- - - ))} - - - ); -}; - -export default connect( - state => ({ - isDarkMode: state.app.isDarkMode, - lastPageTitle: state.app.lastPageTitle, - lastPageUrl: state.app.lastPageUrl, - searchQuery: state.app.searchQuery, - }), - null, -)(ListPage); - -export const listPageQuery = graphql` - query snippetListing { - allSnippet(filter: {archived: {eq: false}}) { - edges { - node { - title - html { - text - } - tags { - all - primary - } - id - } - } - } - allArchivedSnippet: allSnippet(filter: {archived: {eq: true}}) { - edges { - node { - title - html { - text - } - tags { - all - } - id - } - } - } - } -`; diff --git a/src/docs/pages/search.js b/src/docs/pages/search.js deleted file mode 100644 index 7f19d78a7..000000000 --- a/src/docs/pages/search.js +++ /dev/null @@ -1,118 +0,0 @@ -import React from 'react'; -import { graphql } from 'gatsby'; -import { connect } from 'react-redux'; -import { pushNewPage, pushNewQuery } from '../state/app'; - -import Shell from '../components/Shell'; -import Meta from '../components/Meta'; -import Search from '../components/Search'; -import SnippetCard from '../components/SnippetCard'; - -// =================================================== -// Search page -// =================================================== -const SearchPage = props => { - const snippets = props.data.allSnippet.edges; - - const [searchQuery, setSearchQuery] = React.useState(props.searchQuery); - const [searchResults, setSearchResults] = React.useState(snippets); - - React.useEffect(() => { - props.dispatch(pushNewQuery(searchQuery)); - let q = searchQuery.toLowerCase(); - let results = snippets; - if (q.trim().length) - results = snippets.filter( - ({ node }) => - node.tags.all.filter(t => t.indexOf(q) !== -1).length || - node.title.toLowerCase().indexOf(q) !== -1, - ); - setSearchResults(results); - }, [searchQuery]); - - React.useEffect(() => { - props.dispatch(pushNewPage('Search', '/search')); - }, []); - - return ( - <> - - - -

Click on a snippet card to view the snippet.

- {/* Display page background or results depending on state */} - {searchQuery.length === 0 ? ( - <> -
-

- Start typing a keyword to see matching snippets. -

-
- - ) : searchResults.length === 0 ? ( - <> -
-

- No results found -
-

-

- We couldn't find any results for the keyword{' '} - {searchQuery}. -

-
- - ) : ( - <> -

Search results

- {searchResults.map(({node}) => ( - - ))} - - )} - - - ); -}; - -export default connect( - state => ({ - isDarkMode: state.app.isDarkMode, - lastPageTitle: state.app.lastPageTitle, - lastPageUrl: state.app.lastPageUrl, - searchQuery: state.app.searchQuery, - }), - null, -)(SearchPage); - -export const searchPageQuery = graphql` - query searchSnippetList { - allSnippet { - edges { - node { - title - html { - text - } - tags { - all - } - id - } - } - } - } -`; diff --git a/src/docs/state/ReduxWrapper.js b/src/docs/state/ReduxWrapper.js deleted file mode 100644 index 5daacf556..000000000 --- a/src/docs/state/ReduxWrapper.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { Provider } from 'react-redux'; -import { createStore as reduxCreateStore } from 'redux'; -import rootReducer from '.'; - -const createStore = () => reduxCreateStore(rootReducer); - -// =================================================== -// Wrapper for Gatsby -// =================================================== -export default ({ element }) => ( - {element} -); diff --git a/src/docs/state/app.js b/src/docs/state/app.js deleted file mode 100644 index 546e6fde4..000000000 --- a/src/docs/state/app.js +++ /dev/null @@ -1,49 +0,0 @@ -// Defalt state -const initialState = { - isDarkMode: false, - lastPageTitle: 'Home', - lastPageUrl: '/', - searchQuery: '', -}; - -// Actions -const TOGGLE_DARKMODE = 'TOGGLE_DARKMODE'; -const PUSH_NEW_PAGE = 'PUSH_NEW_PAGE'; -const PUSH_NEW_QUERY = 'PUSH_NEW_QUERY'; -export const toggleDarkMode = isDarkMode => ({ - type: TOGGLE_DARKMODE, - isDarkMode, -}); -export const pushNewPage = (pageTitle, pageUrl) => ({ - type: PUSH_NEW_PAGE, - pageTitle, - pageUrl, -}); -export const pushNewQuery = query => ({ - type: PUSH_NEW_QUERY, - query, -}); - -// Reducer -export default (state = initialState, action) => { - switch (action.type) { - case TOGGLE_DARKMODE: - return { - ...state, - isDarkMode: action.isDarkMode, - }; - case PUSH_NEW_PAGE: - return { - ...state, - lastPageTitle: action.pageTitle, - lastPageUrl: action.pageUrl, - }; - case PUSH_NEW_QUERY: - return { - ...state, - searchQuery: action.query, - }; - default: - return state; - } -}; diff --git a/src/docs/state/index.js b/src/docs/state/index.js deleted file mode 100644 index 1ee96d387..000000000 --- a/src/docs/state/index.js +++ /dev/null @@ -1,4 +0,0 @@ -import { combineReducers } from 'redux'; -import app from './app'; - -export default combineReducers({ app }); diff --git a/src/docs/styles/_button.scss b/src/docs/styles/_button.scss deleted file mode 100644 index 42db1fe36..000000000 --- a/src/docs/styles/_button.scss +++ /dev/null @@ -1,84 +0,0 @@ -// =================================================== -// Buttons -// =================================================== -.button, a.button { - color: var(--button-fore-color); - font-weight: 500; - font-size: 1.125rem; - line-height: 1.4; - transition: 0.3s ease all; - padding: 0.625rem 0.875rem; - margin-top: 0.75rem; - border-radius: 1rem; - display: inline-block; - box-shadow: 0px 4px 8px var(--button-shadow-color); - border: none; - cursor: pointer; - &:hover, &:focus { - box-shadow: 0px 8px 16px var(--button-shadow-color); - text-decoration: none; - outline: none; - } - &.button-a { - background: var(--button-back-color-a); - } - &.button-b { - background: var(--button-back-color-b); - } - svg { - vertical-align: sub; - } - @media screen and (min-width: $layout-large-breakpoint) { - font-size: 1.375rem; - line-height: 1.35; - } -} - -// Home button (404 page) -.button.button-home { - @media screen and (min-width: $layout-large-breakpoint) { - margin-top: 1.375rem; - } -} - -// Copy and share buttons (snippet card) -.button.button-copy { - position: absolute; - top: -32px; - right: 24px; - padding: 0.5rem 0.625rem; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clipboard' %3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: center; - width: 44px; - height: 44px; -} -.button.button-social-sh { - position: absolute; - top: -32px; - right: 80px; - padding: 0.5rem 0.625rem; -} - -// Show/hide examples button (snippet card) -.button.button-example-toggler { - margin: -2rem 0px -1rem 0px; - background: var(--pre-back-color); - border-radius: 0px 0px 0.125rem 0.125rem; - width: calc(100%); - text-align: left; - display: block; - font-size: 0.875rem; - line-height: 1.35; - text-transform: uppercase; - font-weight: 300; - color: var(--button-example-toggler-fore-color); - box-shadow: none; - font-family: 'Roboto Mono', Menlo, Consolas, monospace; - &:hover, &:focus { - box-shadow: none; - } - svg { - margin-right: 0.125rem; - } -} \ No newline at end of file diff --git a/src/docs/styles/_card.scss b/src/docs/styles/_card.scss deleted file mode 100644 index 4dab5ee71..000000000 --- a/src/docs/styles/_card.scss +++ /dev/null @@ -1,158 +0,0 @@ -// =================================================== -// Cards -// =================================================== -.card { - backface-visibility: hidden; - will-change: transform; - position: relative; - transition: all 0.3s ease; - margin: 1rem 1.25rem; - background: var(--card-back-color); - color: var(--card-fore-color); - box-shadow: 0px 0px 1px var(--card-shadow-color-a), 0px 6px 12px var(--card-shadow-color-b); - border-radius: 0.125rem; - padding: 1rem; - .card-title { - font-size: 1.125rem; - line-height: 1.375; - font-weight: 500; - margin: 0px 0px 0.125rem; - a, a:link, a:visited { - font-weight: 500; - transition: 0.3s ease all; - color: var(--card-fore-color); - } - } - .card-description { - margin: 0.125rem -0.5rem 0.125rem; - font-size: 0.875rem; - color: var(--card-fore-color-light); - line-height: 1.35; - font-weight: 500; - } - .card-bottom { - position: relative; - background: blue; - margin-left: -1rem; - margin-right: -1rem; - border-radius: 0.125rem; - border-top-left-radius: 22px; - } - .card-code { - margin: 1.5rem 0px -1rem 0px; - background: var(--pre-back-color); - width: calc(100% - 36px); - border-radius: 1.375rem 0px 0.125rem 0.125rem; - line-height: 1.15; - padding: 2.25rem 1.125rem 2.25rem; - } - .card-examples { - transition: all 0.3s ease; - position: relative; - margin: 0.5rem 0px -1rem 0px; - background: var(--pre-back-color); - width: calc(100% - 52px); - border-radius: 0px 0px 0.125rem 0.125rem; - line-height: 1.15; - padding: 0.5rem 1.125rem 2.25rem 2.125rem; - &::before { - display: block; - content: ''; - position: absolute; - left: 21px; - top: 0; - width: 1px; - opacity: 0.75; - height: calc(100% - 24px); - background: var(--button-example-toggler-fore-color); - } - } - &.short { - .card-bottom { - display: none; - @media screen and (min-width: $layout-large-breakpoint) { - display: block; - } - } - } - &:not(.short) { - background: linear-gradient(to bottom, var(--card-back-color) 0px, var(--card-back-color) calc(100% - 17px), var(--pre-back-color) calc(100% - 16px)); - } -} - -// Card expertise corners -.card-corner { - box-sizing: border-box; - position: absolute; - top: 24px; - right: 16px; - width: 0.5rem; - height: 0.5rem; - border-radius: 0.5rem; - background: var(--corner-color); - &.beginner { - --corner-color: var(--beginner-color); - } - &.intermediate { - --corner-color: var(--intermediate-color); - } - &.advanced { - --corner-color: var(--advanced-color); - } - &.intermediate, &.advanced { - &::before { - display: block; - position: absolute; - content: ''; - top: 0px; - right: 12px; - width: 0.5rem; - height: 0.5rem; - border-radius: 0.5rem; - background: var(--corner-color); - } - } - &.advanced { - &::after { - display: block; - position: absolute; - content: ''; - top: 0px; - right: 24px; - width: 0.5rem; - height: 0.5rem; - border-radius: 0.5rem; - background: var(--corner-color); - } - } -} - -// Tags -:not(.token).tag { - transition: 0.3s ease all; - border: 2px solid var(--tag-border-color); - border-radius: 0.25rem; - color: var(--tag-fore-color); - text-transform: uppercase; - margin: 0px 0.375rem 0.25rem 0px; - display: inline-block; - padding: 0.125rem 0.25rem; - letter-spacing: 0.25px; - font-size: 0.625rem; - line-height: 1.4; - font-weight: 500; - &:first-of-type { - margin-top: 0.375rem; - } -} - -.clickable-card-wrapper { - &:link, &:visited { - &:hover, &:focus { - text-decoration: none; - .card { - transform: scale(1.025); - } - } - } -} diff --git a/src/docs/styles/_code.scss b/src/docs/styles/_code.scss deleted file mode 100644 index 5ceccf71e..000000000 --- a/src/docs/styles/_code.scss +++ /dev/null @@ -1,121 +0,0 @@ -// Style code -code, kbd, pre { - font-size: 0.875em; -} -code, kbd, pre, code *, pre *, kbd *, code[class*="language-"], pre[class*="language-"] { - font-family: 'Roboto Mono', Menlo, Consolas, monospace; -} - -code { - background: var(--code-back-color); - color: var(--code-fore-color); - padding: 0.125rem 0.375rem; - border-radius: 0.125rem; -} -pre { - overflow: auto; // Responsiveness - background: var(--pre-back-color); - color: var(--pre-fore-color); - padding: 0.375rem; - margin: 0.5rem; - border: 0; -} - -code[class*="language-"], pre[class*="language-"] { - color: var(--pre-fore-color); - - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.8; - - -moz-tab-size: 2; - -o-tab-size: 2; - tab-size: 2; - - -webkit-hypens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -pre[class*="language-"] { - padding: 1rem; - overflow: auto; - margin: 0.5rem 0; - white-space: pre-wrap; -} - -pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, -code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { - background: var(--pre-selected-color); -} - -pre[class*="language-"]::selection, pre[class*="language-"] ::selection, -code[class*="language-"]::selection, code[class*="language-"] ::selection { - background: var(--pre-selected-color); -} - -:not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; - white-space: normal; -} - -.namespace { - opacity: .7; -} - -.token { - &.comment, &.prolog, &.doctype, &.cdata { - color: var(--token-color-a); - } - &.punctuation { - color: var(--token-color-b); - } - &.property, &.tag, &.boolean, &.constant, &.symbol, &.deleted, &.function { - color: var(--token-color-c); - } - &.number, &.class-name { - color: var(--token-color-d); - } - &.selector, &.attr-name, &.string, &.char, &.builtin, &.inserted { - color: var(--token-color-e); - } - &.operator, &.entity, &.url, &.atrule, &.attr-value, &.keyword, &.interpolation-punctuation { - color: var(--token-color-f); - } - &.regex { - color: var(--token-color-g); - } - &.important, &.variable { - color: var(--token-color-h); - } - &.italic, &.comment { - font-style: italic; - } - &.important, &.bold { - font-weight: 500; - } - &.entity { - cursor: help; - } -} -.language-css .token.string, .style .token.string { - color: var(--token-color-f); -} - -p > code, a > code { - &, &[class*="language-"] { - color: var(--code-fore-color); - background: var(--code-back-color); - &::-moz-selection, & ::-moz-selection { - background: var(--code-selected-color); - } - &::selection, & ::selection { - background: var(--code-selected-color); - } - } -} \ No newline at end of file diff --git a/src/docs/styles/_colors.scss b/src/docs/styles/_colors.scss deleted file mode 100644 index 38ad0d519..000000000 --- a/src/docs/styles/_colors.scss +++ /dev/null @@ -1,140 +0,0 @@ -:root { - // Interface color palette - --back-color: #F5F6FA; - --back-color-dark: #D7DDF3; - --fore-color: #404454; - --fore-color-light: #575E7A; - --fore-color-lighter: #666E8F; - --fore-color-dark: #1F253D; - --fore-color-darker: #060709; - - // Scrollbar - --scrollbar-back-color: #D7DDF3; - --scrollbar-fore-color: #666E8F; - - // Menu color palette - --menu-back-color: #FFFFFF; - --menu-border-color: #E4E6EC; - --menu-fore-color: #53586A; - --menu-active-fore-color: #2747C7; - - // Card corner palette - --beginner-color: #7CB342; - --intermediate-color: #FFB300; - --advanced-color: #D66361; - - // Search color palette - --search-back-color: #FFFFFF; - --search-fore-color: #0D0E17; - --search-placeholder-color: #C5C6CD; - --search-shadow-color: rgba(0, 32, 128, 0.1); - --search-shadow-focus-color: rgba(0, 32, 128, 0.17); - - // Button color palette - --button-back-color-a: #3B3EFC; - --button-back-color-b: #DC325F; - --button-fore-color: #FFFFFF; - --button-shadow-color: rgba(0, 0, 0, 0.25); - --button-shadow-focus-color: rgba(0, 0, 0, 0.29); - --button-example-toggler-fore-color: #607d8b; - - // Card color palette - --card-back-color: #FFFFFF; - --card-fore-color: #212121; - --card-fore-color-light: #424242; - --card-shadow-color-a: rgba(240, 242, 247, 0.1); - --card-shadow-color-b: rgba(0, 32, 128, 0.1); - - // Pre & Code color palette - --pre-fore-color: #e57373; - --pre-back-color: #1e253d; - --pre-selected-color: #041248; - - // Token color palette - --token-color-a: #7f99a5; // Comments - --token-color-b: #bdbdbd; // Punctuation - --token-color-c: #64b5f6; // Functions - --token-color-d: #ff8f00; // Numbers - --token-color-e: #c5e1a5; // Strings - --token-color-f: #ce93d8; // Keywords - --token-color-g: #26c6da; // Regular expressions - --token-color-h: #e57373; // Variables - - // Tag color palette - --tag-border-color: #D7DDF3; - --tag-fore-color: #616B8F; - - // Toast color palette - --toast-back-color: #05A864; - --toast-fore-color: #FFFFFF; - --toast-shadow-color: rgba(0, 32, 128, 0.26); - - // Link color palette - --a-link-color: #0277bd; - --a-visited-color: #01579b; - - // Code color palette - --code-fore-color: #0324AB; - --code-back-color: #EDF0FC; - --code-selected-color: #BDEDFE; -} - -// Dark mode colors -.page-container.dark { - // Interface color palette - --back-color: #2A314C; - --back-color-dark: #8993BE; - --fore-color: #ABAFBF; - --fore-color-light: #858CA8; - --fore-color-lighter: #707899; - --fore-color-dark: #B4BCD9; - --fore-color-darker: #FCFCFD; - - // Scrollbar - --scrollbar-back-color: #434E76; - --scrollbar-fore-color: #707899; - - // Menu color palette - --menu-back-color: #434E76; - --menu-border-color: #13151B; - --menu-fore-color: #959AAC; - --menu-active-fore-color: #CDD4EF; - - // Card corner palette remains unchanged for consistency - - // Search color palette - --search-back-color: #434E76; - --search-fore-color: #E8E9F2; - --search-placeholder-color: #999EBD; - --search-shadow-color: rgba(1, 8, 30, 0.24); - --search-shadow-focus-color: rgba(1, 8, 30, 0.31); - - // Button color palette remains unchanged for consistency - - // Card color palette - --card-back-color: #434E76; - --card-fore-color: #F0F0F0; - --card-fore-color-light: #D6D6D6; // previously C0C0C0, careful - --card-shadow-color-b: rgba(1, 8, 30, 0.24); - - // Pre & Code color palette remains unchanged for consistency - - // Token color palette remains unchanged for consistency - - // Tag color palette - --tag-border-color: #2A3765; - --tag-fore-color: #BEC1CB; // previously 999DAD, careful - - // Toast color palette - --toast-shadow-color: rgba(1, 8, 30, 0.44); - - // Link color palette - --a-link-color: #6DC7FD; - --a-visited-color: #5DB7FE; - - // Code color palette - --code-fore-color: #d1dafe; - --code-back-color: #4f5fa0; - --code-selected-color: #0dbcfb; - -} \ No newline at end of file diff --git a/src/docs/styles/_fonts.scss b/src/docs/styles/_fonts.scss deleted file mode 100644 index a95a6c6d9..000000000 --- a/src/docs/styles/_fonts.scss +++ /dev/null @@ -1,89 +0,0 @@ -// Load external fonts - progressive loading should help alleviate performance issues -@font-face { - font-family: 'Roboto Mono'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local('Roboto Mono'), local('RobotoMono-Regular'), url(../../../assets/RobotoMono-Regular.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -@font-face { - font-family: 'Roboto Mono'; - font-style: italic; - font-weight: 400; - font-display: swap; - src: local('Roboto Mono Italic'), local('RobotoMono-Italic'), url(../../../assets/RobotoMono-Italic.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -@font-face { - font-family: 'Roboto Mono'; - font-style: normal; - font-weight: 500; - src: local('Roboto Mono Medium'), local('RobotoMono-Medium'), url(../../../assets/RobotoMono-Medium.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; - font-display: swap; -} -@font-face { - font-family: 'Noto Sans'; - font-style: normal; - font-weight: 300; - font-display: swap; - src: local('Noto Sans Light'), local('NotoSans-Light'), url(../../../assets/NotoSans-Light.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -@font-face { - font-family: 'Noto Sans'; - font-style: italic; - font-weight: 300; - font-display: swap; - src: local('Noto Sans LightItalic'), local('NotoSans-LightItalic'), url(../../../assets/NotoSans-LightItalic.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -@font-face { - font-family: 'Noto Sans'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local('Noto Sans'), local('NotoSans-Regular'), url(../../../assets/NotoSans-Regular.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -@font-face { - font-family: 'Noto Sans'; - font-style: italic; - font-weight: 400; - font-display: swap; - src: local('Noto Sans Italic'), local('NotoSans-Italic'), url(../../../assets/NotoSans-Italic.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -@font-face { - font-family: 'Noto Sans'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: local('Noto Sans Medium'), local('NotoSans-Medium'), url(../../../assets/NotoSans-Medium.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -@font-face { - font-family: 'Noto Sans'; - font-style: italic; - font-weight: 500; - font-display: swap; - src: local('Noto Sans Medium Italic'), local('NotoSans-MediumItalic'), url(../../../assets/NotoSans-MediumItalic.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -@font-face { - font-family: 'Noto Sans'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: local('Noto Sans SemiBold'), local('NotoSans-SemiBold'), url(../../../assets/NotoSans-SemiBold.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -@font-face { - font-family: 'Noto Sans'; - font-style: italic; - font-weight: 600; - font-display: swap; - src: local('Noto Sans SemiBold Italic'), local('NotoSans-SemiBoldItalic'), url(../../../assets/NotoSans-SemiBoldItalic.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} \ No newline at end of file diff --git a/src/docs/styles/_layout.scss b/src/docs/styles/_layout.scss deleted file mode 100644 index 6e4df850e..000000000 --- a/src/docs/styles/_layout.scss +++ /dev/null @@ -1,361 +0,0 @@ -// =================================================== -// Layout -// =================================================== -// Grid container -.page-container { - overflow: hidden; - transition: 0.3s ease all; - background: var(--back-color); - display: grid; - width: 100vw; - height: 100vh; - grid-template-areas: "content" "menu"; - grid-template-columns: 100%; - grid-template-rows: calc(100vh - 62px) 62px; - // Medium screen size (mobile landscape, tablet) - @media screen and (min-width: $layout-medium-breakpoint) { - grid-template-areas: "menu content"; - grid-template-columns: 62px calc(100vw - 62px); - grid-template-rows: 100%; - } - // Large screen size (desktop, laptop) - // @media screen and (min-width: $layout-large-breakpoint) { - // grid-template-areas: "menu . content ."; - // grid-template-columns: 62px calc((100vw - 830px) / 2) 768px calc((100vw - 830px) / 2); - // } -} -// Menu container -header.menu { - grid-area: menu; -} -// Content container -.content { - transition: 0.3s ease all; - grid-area: content; - overflow: auto; - overflow-x: hidden; - background: var(--back-color); - &::-webkit-scrollbar-track { - background-color: var(--scrollbar-back-color); - margin: 0.25rem 0; - border-radius: 0.1875rem; - } - &::-webkit-scrollbar { - width: 6px; - background: transparent; - } - &::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-fore-color); - border: 1px solid var(--scrollbar-fore-color-lighter); - border-radius: 0.1875rem; - } - @media screen and (min-width: calc(768px + 62px)) { - padding-left: calc((100% - 768px - 62px) / 2); - padding-right: calc((100% - 768px - 62px) / 2); - } -} - -// Website title -h1.website-title { - transition: 0.3s ease all; - font-size: 0.875rem; - font-weight: 500; - color: var(--fore-color-lighter); - line-height: 1.5; - position: relative; - top: 4px; - margin: 1.5rem 1.25rem 0.125rem; - @media screen and (min-width: $layout-large-breakpoint) { - font-size: 1rem; - line-height: 1.375; - } -} -// Website logo -img.website-logo { - transition: 0.3s ease all; - position: absolute; - top: 8px; - right: 0px; - width: 48px; - height: 48px; -} -// Homepage logo -.index-logo { - transition: 0.3s ease all; - display: block; - margin: 1.5rem 1.25rem 0.5rem; - vertical-align: middle; - @media screen and (min-width: 144px) { - max-width: 128px; - margin: 1.5rem auto 0.5rem; - } - @media screen and (min-width: $layout-medium-breakpoint) { - display: inline-block; - margin: 1.5rem 2rem 0.5rem 1.25rem; - } -} -// Homepage title -.index-title { - transition: 0.3s ease all; - font-size: 2rem; - color: var(--fore-color-dark); - @media screen and (min-width: $layout-medium-breakpoint) { - display: inline-block; - } - margin: 0.75rem 1.25rem; - text-align: center; -} -// Homepage subtitle -.index-sub-title { - transition: 0.3s ease all; - font-size: 0.875rem; - line-height: 1.5; - margin: 1rem 1.25rem 1.25rem; - color: var(--fore-color); - text-align: center; - @media screen and (min-width: $layout-medium-breakpoint) { - font-size: 1rem; - } -} -.index-spacer { - height: 2.5vh; -} -.index-light-sub { - color: var(--fore-color-darker); - font-size: 1rem; - text-align: center; - transition: 0.3s ease all; - line-height: 2; - margin: 0.125rem 1.25rem 0px; - a, a:link, a:visited { - color: inherit; - font-weight: 600; - } -} - -// Page title -.page-title { - font-size: 2.25rem; - font-weight: 400; - line-height: 1.36; - letter-spacing: 0.03em; - color: var(--fore-color-darker); - margin: 0 1.25rem; - @media screen and (min-width: $layout-large-breakpoint) { - font-size: 2.5rem; - line-height: 1.35; - } -} -// Page subtitle -.page-sub-title { - transition: 0.3s ease all; - font-size: 1.125rem; - line-height: 1.35; - margin: 1rem 1.25rem 0.5rem; - color: var(--fore-color); - @media screen and (min-width: $layout-large-breakpoint) { - font-size: 1.25rem; - } -} -// Page light subtitle -p.light-sub { - transition: 0.3s ease all; - color: var(--fore-color-light); - font-size: 0.875rem; - line-height: 1.5; - margin: 0.125rem 1.25rem 0px; - @media screen and (min-width: $layout-large-breakpoint) { - font-size: 1rem; - line-height: 1.375; - } -} -// Category/tag title -.tag-title { - transition: 0.3s ease all; - font-size: 1.5rem; - text-align: center; - color: var(-fore-color-dark); - line-height: 1.375; - a { - &, &:link, &:visited { - color: var(--fore-color-dark); - } - } - font-weight: 400; - cursor: pointer; - margin: 1.5rem 1.25rem 0.5rem; -} - -// Return to previous page link -a.link-back { - transition: 0.3s ease all; - font-size: 1.125rem; - line-height: 1.35; - display: block; - margin: 1rem 1.25rem 1.5rem; - font-weight: 500; - &, &:link, &:visited { - color: var(--fore-color-dark); - } - &:hover, &:focus { - text-decoration: none; - } - svg { - vertical-align: middle; - } -} - -// About page maintainers card -.flex-row { - display: flex; - flex: 0 1 auto; - flex-flow: row wrap; - .flex-item { - flex: 0 0 auto; - max-width: calc(50% - 24px); - flex-basis: calc(50% - 24px); - margin: 12px; - @media screen and (min-width: $layout-large-breakpoint) { - max-width: calc(25% - 24px); - flex-basis: calc(25% - 24px); - } - .media-section { - max-width: 100%; - height: auto; - border-radius: 0.5rem; - } - .button-section { - font-size: 0.875rem; - font-weight: 600; - text-align: center; - width: 100%; - display: block; - &, &:link, &:visited { - font-weight: 600; - color: var(--card-fore-color); - } - } - } -} - -// Page background graphic -.page-graphic { - position: relative; - box-sizing: border-box; - transition: all 0.3s ease; - margin-top: 100px; - width: 100%; - height: calc(50vmin); - &::before { - top: 0; - right: 27.5vmin; - position: absolute; - content: ''; - width: 45vmin; - height: 44vmin; - background-position-x: 52.5%, center; - background-position-y: 1%, top; - background-repeat: no-repeat; - background-size: 45vmin, 44vmin; - } - padding-top: 46vmin; - text-align: center; - @media screen and (orientation: landscape) and (max-height: calc(#{$layout-medium-breakpoint} - 1px)) { - margin-top: 2rem; - padding-top: 38vmin; - height: 40vmin; - &::before { - right: calc(50vw - 45vmin / 2 - 31px); - } - } - @media screen and (min-width: $layout-large-breakpoint) { - padding-top: 2vmin; - padding-right: 400px; - &::before { - background-size: 395px, 393px; - height: 400px; - width: 400px; - right: 1.125rem; - margin-top: -2vmin; - background-position-x: 95.5%, 93%; - } - } -} - -// Empty page text -.empty-page-text { - transition: color 0.3s ease, background 0.3s ease; - text-align: center; - margin: 2.25rem auto 0.75rem; - max-width: 200px; - font-size: 1rem; - line-height: 1.5; - color: var(--fore-color-darker); - font-weight: 400; - @media screen and (min-width: $layout-medium-breakpoint) { - max-width: 400px; - } - @media screen and (min-width: $layout-large-breakpoint) { - font-size: 1.75rem; - line-height: 1.35; - margin: 2.25rem auto 1.375rem 1.25rem; - &.search-page-text { - margin-top: 12vmin; - font-size: 1.375rem; - line-height: 1.375; - } - } -} -.empty-page-subtext { - transition: all 0.3s ease; - text-align: center; - font-size: 14px; - font-weight: 400; - line-height: 1.5; - max-width: 200px; - color: var(--fore-color-darker); - margin: 0.5rem auto; - @media screen and (min-width: $layout-medium-breakpoint) { - max-width: 256px; - } - @media screen and (min-width: $layout-large-breakpoint) { - font-size: 1.125rem; - line-height: 1.375; - } -} -// Background graphic styles and dark mode -.search-empty::before { - background-image: url("data:image/svg+xml,%3Csvg width='154' height='148' viewBox='0 0 154 148' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='72.7688' y1='68.1962' x2='88.5602' y2='83.9877' stroke='%23575E7A' stroke-width='2'/%3E%3Crect x='97.8234' y='75.055' width='76.9574' height='23.2664' rx='11.6332' transform='rotate(45 97.8234 75.055)' stroke='%23575E7A' stroke-width='2'/%3E%3Cpath d='M81.3085 50.7431C81.9744 47.8236 82.3261 44.7844 82.3261 41.6631C82.3261 35.0791 80.7613 28.8607 77.9834 23.3593' stroke='%23575E7A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M56.2702 3.70245C51.7367 1.95686 46.8116 1 41.663 1C19.2055 1 1 19.2055 1 41.663C1 64.1206 19.2055 82.3261 41.663 82.3261C59.2695 82.3261 74.2624 71.1364 79.9182 55.4806' stroke='%23575E7A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M62.1442 6.52702C65.6967 8.6023 68.9061 11.2009 71.6667 14.2172' stroke='%23575E7A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg width='152' height='150' viewBox='0 0 152 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M147.38 72.8499C153.437 95.1096 155.456 105.228 141.323 129.511C127.191 153.794 94.8556 149.747 72.6806 149.747C32.5402 149.747 0 117.131 0 76.8971C0 36.6632 34.5591 0 74.6995 0C114.84 0 141.323 50.5902 147.38 72.8499Z' fill='%23D7DDF3'/%3E%3C/svg%3E"); -} -.search-no-results::before { - background-image: url("data:image/svg+xml,%3Csvg width='154' height='148' viewBox='0 0 154 148' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='72.7688' y1='68.1962' x2='88.5602' y2='83.9877' stroke='%23575E7A' stroke-width='2'/%3E%3Crect x='97.8234' y='75.055' width='76.9574' height='23.2664' rx='11.6332' transform='rotate(45 97.8234 75.055)' stroke='%23575E7A' stroke-width='2'/%3E%3Cpath d='M81.3085 50.7432C81.9744 47.8236 82.3261 44.7844 82.3261 41.6631C82.3261 35.0792 80.7613 28.8607 77.9834 23.3593' stroke='%23575E7A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M56.2702 3.70245C51.7367 1.95686 46.8116 1 41.663 1C19.2055 1 1 19.2055 1 41.663C1 64.1206 19.2055 82.3261 41.663 82.3261C59.2695 82.3261 74.2624 71.1364 79.9182 55.4806' stroke='%23575E7A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M62.1442 6.52701C65.6967 8.60229 68.9061 11.2009 71.6667 14.2172' stroke='%23575E7A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M11.3086 38.2034C11.3086 38.2034 13.5167 41.5575 16.9242 41.3193C20.3318 41.081 22.0516 37.4522 22.0516 37.4522M18.1449 58.7766C18.1449 58.7766 23.8094 54.872 31.061 54.3649C38.3125 53.8578 43.9281 56.9737 43.9281 56.9737M34.2526 36.599C34.2526 36.599 36.2089 39.9708 39.8682 39.7149C43.5276 39.459 44.9956 35.8478 44.9956 35.8478' stroke='%23575E7A' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"), url("data:image/svg+xml,%3Csvg width='152' height='150' viewBox='0 0 152 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M147.38 72.8499C153.437 95.1096 155.456 105.228 141.323 129.511C127.191 153.794 94.8556 149.747 72.6806 149.747C32.5402 149.747 0 117.131 0 76.8971C0 36.6632 34.5591 0 74.6995 0C114.84 0 141.323 50.5902 147.38 72.8499Z' fill='%23D7DDF3'/%3E%3C/svg%3E"); -} -.page-not-found::before { - background-image: url("data:image/svg+xml,%3Csvg width='160' height='109' viewBox='0 0 160 109' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7.99999C1 4.134 4.13401 1 8 1H95.1429H152C155.866 1 159 4.13401 159 8V100.571C159 104.437 155.866 107.571 152 107.571H8C4.13401 107.571 1 104.437 1 100.571V7.99999Z' stroke='%23575E7A' stroke-width='2'/%3E%3Cline x1='1' y1='17.8571' x2='83.5714' y2='17.8571' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='100.429' y1='17.8571' x2='116.714' y2='17.8571' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='128.429' y1='17.8571' x2='159' y2='17.8571' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='8.57138' cy='9.7142' r='1.85714' stroke='%23575E7A' stroke-width='2'/%3E%3Ccircle cx='17.7142' cy='9.7142' r='1.85714' stroke='%23575E7A' stroke-width='2'/%3E%3Ccircle cx='26.8573' cy='9.7142' r='1.85714' stroke='%23575E7A' stroke-width='2'/%3E%3Cline x1='33.9856' y1='38.2856' x2='41.4608' y2='45.7608' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='34.4762' y1='45.761' x2='41.9513' y2='38.2858' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='105.414' y1='38.2856' x2='112.889' y2='45.7608' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='105.905' y1='45.761' x2='113.38' y2='38.2858' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M49.8545 69.0772C49.8545 69.0772 57.5257 73.6485 72.1402 73.6485C86.7117 73.6485 94.4259 69.0771 94.4259 69.0771' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M72.1526 78.5698C72.3093 86.3002 68.3437 92.6498 63.2953 92.7521C58.2469 92.8544 54.0273 86.6706 53.8707 78.9402C53.8129 76.0901 54.3155 73.4277 55.2261 71.1969' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M64.6687 73.7268C64.8334 73.1997 64.5396 72.6388 64.0125 72.4741C63.4853 72.3093 62.9245 72.6031 62.7597 73.1303L64.6687 73.7268ZM61.8707 88.7359C61.9615 89.2807 62.4768 89.6487 63.0215 89.5579C63.5663 89.4671 63.9343 88.9519 63.8435 88.4071L61.8707 88.7359ZM62.7597 73.1303C61.2791 77.8683 60.9909 83.4569 61.8707 88.7359L63.8435 88.4071C63.009 83.4002 63.2922 78.1317 64.6687 73.7268L62.7597 73.1303Z' fill='%23575E7A'/%3E%3C/svg%3E%0A"), url("data:image/svg+xml,%3Csvg width='172' height='170' viewBox='0 0 172 170' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M85.7456 16.9208C110.886 -6.48267 132.959 -4.28052 156.498 15.4794C180.037 35.2393 174.047 84.4687 153.005 119.028C128.204 159.761 84.2197 174.845 40.8539 167.344C-2.51188 159.842 -6.55002 107.678 7.88005 65.9713C22.3101 24.2642 60.6055 40.3243 85.7456 16.9208Z' fill='%23D7DDF3'/%3E%3C/svg%3E%0A"); - background-position-x: 53.5%, center; - background-position-y: 8.5%, top; - background-size: 41vmin, 44vmin; - &::before { - background-size: 395px, 393px; - height: 400px; - width: 400px; - right: 1.125rem; - margin-top: -15vmin; - background-position-x: 95.5%, 93%; - } - @media screen and (min-width: $layout-large-breakpoint) { - background-size: 367px, 393px; - background-position-x: 96.5%, 93%; - } -} -.page-container.dark { - .search-empty::before { - background-image: url("data:image/svg+xml,%3Csvg width='154' height='148' viewBox='0 0 154 148' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='72.7688' y1='68.1962' x2='88.5602' y2='83.9877' stroke='%238993BE' stroke-width='2'/%3E%3Crect x='97.8234' y='75.055' width='76.9574' height='23.2664' rx='11.6332' transform='rotate(45 97.8234 75.055)' stroke='%238993BE' stroke-width='2'/%3E%3Cpath d='M81.3085 50.7431C81.9744 47.8236 82.3261 44.7844 82.3261 41.6631C82.3261 35.0791 80.7613 28.8607 77.9834 23.3593' stroke='%238993BE' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M56.2702 3.70245C51.7367 1.95686 46.8116 1 41.663 1C19.2055 1 1 19.2055 1 41.663C1 64.1206 19.2055 82.3261 41.663 82.3261C59.2695 82.3261 74.2624 71.1364 79.9182 55.4806' stroke='%238993BE' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M62.1442 6.52702C65.6967 8.6023 68.9061 11.2009 71.6667 14.2172' stroke='%238993BE' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg width='152' height='150' viewBox='0 0 152 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M147.38 72.8499C153.437 95.1096 155.456 105.228 141.323 129.511C127.191 153.794 94.8556 149.747 72.6806 149.747C32.5402 149.747 0 117.131 0 76.8971C0 36.6632 34.5591 0 74.6995 0C114.84 0 141.323 50.5902 147.38 72.8499Z' fill='%23555C7C'/%3E%3C/svg%3E"); - } - .search-no-results::before { - background-image: url("data:image/svg+xml,%3Csvg width='154' height='148' viewBox='0 0 154 148' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='72.7688' y1='68.1962' x2='88.5602' y2='83.9877' stroke='%238993BE' stroke-width='2'/%3E%3Crect x='97.8234' y='75.055' width='76.9574' height='23.2664' rx='11.6332' transform='rotate(45 97.8234 75.055)' stroke='%238993BE' stroke-width='2'/%3E%3Cpath d='M81.3085 50.7432C81.9744 47.8236 82.3261 44.7844 82.3261 41.6631C82.3261 35.0792 80.7613 28.8607 77.9834 23.3593' stroke='%238993BE' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M56.2702 3.70245C51.7367 1.95686 46.8116 1 41.663 1C19.2055 1 1 19.2055 1 41.663C1 64.1206 19.2055 82.3261 41.663 82.3261C59.2695 82.3261 74.2624 71.1364 79.9182 55.4806' stroke='%238993BE' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M62.1442 6.52701C65.6967 8.60229 68.9061 11.2009 71.6667 14.2172' stroke='%238993BE' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M11.3086 38.2034C11.3086 38.2034 13.5167 41.5575 16.9242 41.3193C20.3318 41.081 22.0516 37.4522 22.0516 37.4522M18.1449 58.7766C18.1449 58.7766 23.8094 54.872 31.061 54.3649C38.3125 53.8578 43.9281 56.9737 43.9281 56.9737M34.2526 36.599C34.2526 36.599 36.2089 39.9708 39.8682 39.7149C43.5276 39.459 44.9956 35.8478 44.9956 35.8478' stroke='%238993BE' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"), url("data:image/svg+xml,%3Csvg width='152' height='150' viewBox='0 0 152 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M147.38 72.8499C153.437 95.1096 155.456 105.228 141.323 129.511C127.191 153.794 94.8556 149.747 72.6806 149.747C32.5402 149.747 0 117.131 0 76.8971C0 36.6632 34.5591 0 74.6995 0C114.84 0 141.323 50.5902 147.38 72.8499Z' fill='%23555C7C'/%3E%3C/svg%3E"); - } - .page-not-found::before { - background-image: url("data:image/svg+xml,%3Csvg width='160' height='109' viewBox='0 0 160 109' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7.99999C1 4.134 4.13401 1 8 1H95.1429H152C155.866 1 159 4.13401 159 8V100.571C159 104.437 155.866 107.571 152 107.571H8C4.13401 107.571 1 104.437 1 100.571V7.99999Z' stroke='%238993BE' stroke-width='2'/%3E%3Cline x1='1' y1='17.8571' x2='83.5714' y2='17.8571' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='100.429' y1='17.8571' x2='116.714' y2='17.8571' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='128.429' y1='17.8571' x2='159' y2='17.8571' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='8.57138' cy='9.7142' r='1.85714' stroke='%238993BE' stroke-width='2'/%3E%3Ccircle cx='17.7142' cy='9.7142' r='1.85714' stroke='%238993BE' stroke-width='2'/%3E%3Ccircle cx='26.8573' cy='9.7142' r='1.85714' stroke='%238993BE' stroke-width='2'/%3E%3Cline x1='33.9856' y1='38.2856' x2='41.4608' y2='45.7608' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='34.4762' y1='45.761' x2='41.9513' y2='38.2858' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='105.414' y1='38.2856' x2='112.889' y2='45.7608' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='105.905' y1='45.761' x2='113.38' y2='38.2858' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M49.8545 69.0772C49.8545 69.0772 57.5257 73.6485 72.1402 73.6485C86.7117 73.6485 94.4259 69.0771 94.4259 69.0771' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M72.1526 78.5698C72.3093 86.3002 68.3437 92.6498 63.2953 92.7521C58.2469 92.8544 54.0273 86.6706 53.8707 78.9402C53.8129 76.0901 54.3155 73.4277 55.2261 71.1969' stroke='%238993BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M64.6687 73.7268C64.8334 73.1997 64.5396 72.6388 64.0125 72.4741C63.4853 72.3093 62.9245 72.6031 62.7597 73.1303L64.6687 73.7268ZM61.8707 88.7359C61.9615 89.2807 62.4768 89.6487 63.0215 89.5579C63.5663 89.4671 63.9343 88.9519 63.8435 88.4071L61.8707 88.7359ZM62.7597 73.1303C61.2791 77.8683 60.9909 83.4569 61.8707 88.7359L63.8435 88.4071C63.009 83.4002 63.2922 78.1317 64.6687 73.7268L62.7597 73.1303Z' fill='%238993BE'/%3E%3C/svg%3E%0A"), url("data:image/svg+xml,%3Csvg width='172' height='170' viewBox='0 0 172 170' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M85.7456 16.9208C110.886 -6.48267 132.959 -4.28052 156.498 15.4794C180.037 35.2393 174.047 84.4687 153.005 119.028C128.204 159.761 84.2197 174.845 40.8539 167.344C-2.51188 159.842 -6.55002 107.678 7.88005 65.9713C22.3101 24.2642 60.6055 40.3243 85.7456 16.9208Z' fill='%23555C7C'/%3E%3C/svg%3E%0A"); - } -} diff --git a/src/docs/styles/_menu.scss b/src/docs/styles/_menu.scss deleted file mode 100644 index 0a93d93fc..000000000 --- a/src/docs/styles/_menu.scss +++ /dev/null @@ -1,65 +0,0 @@ -// =================================================== -// Menu -// =================================================== -.menu { - // z-index: 8; - transition: 0.3s ease all; - // Menu container - background: var(--menu-back-color); - border-top: 1px solid var(--menu-border-color); - @media screen and (max-width: calc(#{$layout-medium-breakpoint} - 1px)) { - position: fixed; - bottom: 0; - width: 100vw; - z-index: 1001; - } - @media screen and (min-width: $layout-medium-breakpoint) { - border-top: none; - border-right: 1px solid var(--menu-border-color); - padding-top: 17vh; - } - @media screen and (min-width: $layout-large-breakpoint) { - padding-top: 23.5vh; - } - // Menu buttons - .menu-button { - cursor: pointer; - transition: 0.3s ease all; - background: transparent; - color: var(--menu-fore-color); - display: inline-block; - width: 25%; - height: 61px; - margin: 0; - text-align: center; - margin-top: 0.5rem; - border: none; - line-height: 61px; - @media screen and (min-width: $layout-medium-breakpoint) { - height: 12.5vh; - width: 100%; - margin-top: 1vh; - margin-bottom: 4vh; - line-height: 12.5vh; - } - @media screen and (min-width: $layout-large-breakpoint) { - margin-bottom: 1vh; - } - &:hover, &:focus { - outline: 0; - color: var(--menu-active-fore-color); - } - &.active { - color: var(--menu-active-fore-color); - svg { - color: var(--menu-active-fore-color); - } - } - svg { - color: var(--menu-fore-color); - } - &:last-of-type { - vertical-align: top; - } - } -} diff --git a/src/docs/styles/_reset.scss b/src/docs/styles/_reset.scss deleted file mode 100644 index e4744fb45..000000000 --- a/src/docs/styles/_reset.scss +++ /dev/null @@ -1,135 +0,0 @@ -// Set up some basic styling for everything -html { - font-size: 16px; - scroll-behavior: smooth; -} -html, * { - font-family: 'Noto Sans', Helvetica, sans-serif; - line-height: 1.5; - // Prevent adjustments of font size after orientation changes in mobile. - -webkit-text-size-adjust: 100%; -} -* { - font-size: 1rem; - font-weight: 400; -} -// Apply fixes and defaults as necessary for modern browsers only -a, b, del, em, i, ins, q, span, strong, u { - transition: 0.3s ease all; - font-size: 1em; // Fix for elements inside headings not displaying properly. -} -body { - margin: 0; - color: var(--fore-color); - background: var(--background-color); - overflow-x: hidden; - &.card-page { - background: var(--card-page-color); - } -} -// Correct display for Edge & Firefox. -details { - display: block; -} -// Correct display in all browsers. -summary { - display: list-item; -} -// Abbreviations -abbr[title] { - border-bottom: none; // Remove bottom border in Firefox 39-. - text-decoration: underline dotted; // Opinionated style-fix for all browsers. -} -// Show overflow in Edge. -input { - overflow: visible; -} -// Correct the cursor style of increment and decrement buttons in Chrome. -[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { - height: auto; -} -// Correct style in Chrome and Safari. -[type="search"] { - -webkit-appearance: textfield; - outline-offset: -2px; -} -// Correct style in Chrome and Safari. -[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} -// Make images responsive by default. -img { - max-width: 100%; - height: auto; -} -// Style headings according to material design guidelines -h1, h2, h3, h4, h5, h6 { - line-height: 1.2; - margin: 0.75rem 0.5rem; -} -h1 { - font-size: 6rem; - &.landing-title { - font-size: 3rem; - text-align: center; - & small { - display: block; - margin-top: 0.5rem; - color: var(--secondary-fore-color); - } - margin-bottom: 4rem; - } -} -h2 { - font-size: 3.75rem; -} -h3 { - font-size: 3rem; -} -h4 { - font-size: 2.125rem; -} -h5 { - font-size: 1.5rem; -} -h6 { - font-size: 1.25rem; -} -// Style textual elements -p { - margin: 0.5rem; -} -ol, ul { - margin: 0.5rem; - padding-left: 1rem; -} -b, strong { - font-weight: 600; -} -hr { - // Fixes and defaults for styling - box-sizing: content-box; - border: 0; - // Actual styling using variables - line-height: 1.25em; - margin: 0.5rem; - height: 1px; - background: linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent); -} -sup, sub, code, kbd { - line-height: 0; - position: relative; - vertical-align: baseline; -} -a { - text-decoration: none; - &:link{ - color: var(--a-link-color); - } - &:visited { - color: var(--a-visited-color); - } - &:hover, &:focus { - text-decoration: underline; - } -} diff --git a/src/docs/styles/_search.scss b/src/docs/styles/_search.scss deleted file mode 100644 index ccdae2fb7..000000000 --- a/src/docs/styles/_search.scss +++ /dev/null @@ -1,57 +0,0 @@ -// =================================================== -// Search -// =================================================== -[type="search"].search-box { - transition: 0.3s ease all; - margin: 0.25rem 0.875rem; - width: calc(100% - 1.75rem); - background: var(--search-back-color); - box-shadow: 0px 4px 8px var(--search-shadow-color); - &:focus { - box-shadow: 0px 6px 12px var(--search-shadow-focus-color); - } - border-radius: 1.125rem; - outline: none; - box-sizing: border-box; - border: none; - padding-left: 2.5rem; - font-size: 1.125rem; - font-weight: 300; - line-height: 2; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23C5C6CD' stroke-width='1.5' stroke-linecap='round' strokelinejoin='round' className='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position-x: 10px; - background-position-y: 8px; - color: var(--search-fore-color); - &::placeholder { - color: var(--search-placeholder-color); - } - @media screen and (min-width: $layout-large-breakpoint) { - font-size: 1.375rem; - line-height: 1.8; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23C5C6CD' stroke-width='1.5' stroke-linecap='round' strokelinejoin='round' className='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); - } -} -// Dark mode -.page-container.dark [type="search"].search-box { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23999EBD' stroke-width='1.5' stroke-linecap='round' strokelinejoin='round' className='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); - @media screen and (min-width: $layout-large-breakpoint) { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23999EBD' stroke-width='1.5' stroke-linecap='round' strokelinejoin='round' className='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); - } -} - -.search-box::-webkit-input-placeholder { - font-family: 'Noto Sans', Helvetica, sans-serif; -} - -.search-box:-ms-input-placeholder { - font-family: 'Noto Sans', Helvetica, sans-serif; -} - -.search-box:-moz-placeholder { - font-family: 'Noto Sans', Helvetica, sans-serif; -} - -.search-box::-moz-placeholder { - font-family: 'Noto Sans', Helvetica, sans-serif; -} \ No newline at end of file diff --git a/src/docs/styles/_toast.scss b/src/docs/styles/_toast.scss deleted file mode 100644 index ef1de925b..000000000 --- a/src/docs/styles/_toast.scss +++ /dev/null @@ -1,33 +0,0 @@ -// =================================================== -// Toast -// =================================================== -.toast { - position: fixed; - bottom: 16px; - margin-bottom: 0; - font-size: 0.75rem; - line-height: 1.5; - left: 50%; - transform: translate(-50%, -50%); - z-index: 1111; - color: var(--toast-fore-color); - background: var(--toast-back-color); - border-radius: 2rem; - padding: 0.375rem 1.375rem 0.375rem 2.75rem; - box-shadow: 0px 0.25rem 0.5rem var(--toast-shadow-color); - transition: all 0.3s ease; - // Toast icon - &::before { - position: absolute; - content: ''; - display: block; - top: 1px; - left: 1px; - height: 28px; - background: white; - width: 28px; - border-radius: 100%; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2305A864' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); - background-position: center; - } -} \ No newline at end of file diff --git a/src/docs/styles/index.scss b/src/docs/styles/index.scss deleted file mode 100644 index 5efbdc51e..000000000 --- a/src/docs/styles/index.scss +++ /dev/null @@ -1,14 +0,0 @@ -// Layout breakpoints -$layout-medium-breakpoint: 600px; -$layout-large-breakpoint: 900px; - -@import 'fonts'; -@import 'colors'; -@import 'reset'; -@import 'layout'; -@import 'menu'; -@import 'search'; -@import 'button'; -@import 'card'; -@import 'code'; -@import 'toast'; diff --git a/src/docs/templates/SnippetPage.js b/src/docs/templates/SnippetPage.js deleted file mode 100644 index 481c57fac..000000000 --- a/src/docs/templates/SnippetPage.js +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; -import { graphql, Link } from 'gatsby'; -import { connect } from 'react-redux'; - -import Meta from '../components/Meta'; -import Shell from '../components/Shell'; -import SnippetCard from '../components/SnippetCard'; -import BackArrowIcon from '../components/SVGs/BackArrowIcon'; - -// =================================================== -// Individual snippet page template -// =================================================== -const SnippetPage = props => { - const snippet = props.pageContext.snippet; - - return ( - <> - - - - -   Back to {props.lastPageTitle} - - - - - ); -}; - -export default connect( - state => ({ - isDarkMode: state.app.isDarkMode, - lastPageTitle: state.app.lastPageTitle, - lastPageUrl: state.app.lastPageUrl, - searchQuery: state.app.searchQuery, - }), - null, -)(SnippetPage); diff --git a/src/docs/templates/TagPage.js b/src/docs/templates/TagPage.js deleted file mode 100644 index 0c7a5a802..000000000 --- a/src/docs/templates/TagPage.js +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; -import { graphql } from 'gatsby'; -import { connect } from 'react-redux'; -import { pushNewPage } from '../state/app'; - -import Meta from '../components/Meta'; -import Shell from '../components/Shell'; -import SnippetCard from '../components/SnippetCard'; - -import { capitalize, getRawCodeBlocks as getCodeBlocks } from '../util'; - -// =================================================== -// Individual snippet category/tag page -// =================================================== -const TagRoute = props => { - const tag = props.pageContext.tag; - const snippets = props.pageContext.snippets; - - React.useEffect(() => { - props.dispatch(pushNewPage(capitalize(tag), props.path)); - }, []); - - return ( - <> - - -

{capitalize(tag)}

-

Click on a snippet card to view the snippet.

- {snippets && - snippets.map(snippet => ( - - ))} - - - ); -}; - -export default connect( - state => ({ - isDarkMode: state.app.isDarkMode, - lastPageTitle: state.app.lastPageTitle, - lastPageUrl: state.app.lastPageUrl, - searchQuery: state.app.searchQuery, - }), - null, -)(TagRoute); diff --git a/src/docs/util/index.js b/src/docs/util/index.js deleted file mode 100644 index 94e585835..000000000 --- a/src/docs/util/index.js +++ /dev/null @@ -1,105 +0,0 @@ -const config = require('../../../config'); - -// Capitalizes the first letter of a string -const capitalize = (str, lowerRest = false) => - str.slice(0, 1).toUpperCase() + - (lowerRest ? str.slice(1).toLowerCase() : str.slice(1)); - -// Get the textual content in a gatsby page -const getTextualContent = (str, noExplain = false) => { - const result = str.slice(0, str.indexOf('
')); - return result; -}; - -// Gets the code blocks in a gatsby page -const getCodeBlocks = str => { - const regex = //g; - let results = []; - let m = null; - while ((m = regex.exec(str)) !== null) { - if (m.index === regex.lastIndex) regex.lastIndex += 1; - // eslint-disable-next-line - m.forEach((match, groupIndex) => { - results.push(match); - }); - } - const replacer = new RegExp( - `
([\\s\\S]*?)
`, - 'g', - ); - results = results.map(v => v.replace(replacer, '$1').trim()); - return { - code: results[0], - example: results[1], - }; -}; - -// Optimizes nodes in an HTML string -const optimizeNodes = (data, regexp, replacer) => { - let count = 0; - let output = data; - do { - output = output.replace(regexp, replacer); - count = 0; - while (regexp.exec(output) !== null) ++count; - } while (count > 0); - return output; -}; -const optimizeAllNodes = html => { - let output = html; - // Optimize punctuation nodes - output = optimizeNodes( - output, - /([^\0<]*?)<\/span>([\n\r\s]*)([^\0]*?)<\/span>/gm, - (match, p1, p2, p3) => - `${p1}${p2}${p3}`, - ); - // Optimize operator nodes - output = optimizeNodes( - output, - /([^\0<]*?)<\/span>([\n\r\s]*)([^\0]*?)<\/span>/gm, - (match, p1, p2, p3) => - `${p1}${p2}${p3}`, - ); - // Optimize keyword nodes - output = optimizeNodes( - output, - /([^\0<]*?)<\/span>([\n\r\s]*)([^\0]*?)<\/span>/gm, - (match, p1, p2, p3) => `${p1}${p2}${p3}`, - ); - return output; -}; - -// Gets the code blocks for a snippet file. -const getRawCodeBlocks = str => { - const regex = /```[.\S\s]*?```/g; - let results = []; - let m = null; - while ((m = regex.exec(str)) !== null) { - if (m.index === regex.lastIndex) regex.lastIndex += 1; - // eslint-disable-next-line - m.forEach((match, groupIndex) => { - results.push(match); - }); - } - const replacer = new RegExp( - `\`\`\`${config.language.short}([\\s\\S]*?)\`\`\``, - 'g', - ); - results = results.map(v => v.replace(replacer, '$1').trim()); - return { - code: results[0], - example: results[1], - }; -}; - -module.exports = { - capitalize, - getTextualContent, - getCodeBlocks, - optimizeNodes, - optimizeAllNodes, - getRawCodeBlocks, -}; diff --git a/src/static-parts/README-end.md b/src/static-parts/README-end.md deleted file mode 100644 index 445b4cf2e..000000000 --- a/src/static-parts/README-end.md +++ /dev/null @@ -1,11 +0,0 @@ -## Collaborators - -| [](https://github.com/Chalarangelo)
[Angelos Chalaris](https://github.com/Chalarangelo) | [](https://github.com/flxwu)
[Felix Wu](https://github.com/Pl4gue) | [](https://github.com/fejes713)
[Stefan Feješ](https://github.com/fejes713) | [](https://github.com/kingdavidmartins)
[King David Martins](https://github.com/iamsoorena) | [](https://github.com/iamsoorena)
[Soorena Soleimani](https://github.com/iamsoorena) | -| --- | --- | --- | --- | --- | -| [](https://github.com/elderhsouza)
[Elder Henrique Souza](https://github.com/elderhsouza) | [](https://github.com/skatcat31)
[Robert Mennell](https://github.com/skatcat31) | [](https://github.com/atomiks)
[atomiks](https://github.com/atomiks) | - - -## Credits - -*Logos made by [Angelos Chalaris](https://github.com/Chalarangelo) are licensed under the [MIT](https://opensource.org/licenses/MIT) license.* -*This README is built using [markdown-builder](https://github.com/30-seconds/markdown-builder).* diff --git a/src/static-parts/README-start.md b/src/static-parts/README-start.md deleted file mode 100644 index ecbaaa0dc..000000000 --- a/src/static-parts/README-start.md +++ /dev/null @@ -1,69 +0,0 @@ -[![Logo](/logo.png)](https://30secondsofcode.org/) - -# 30 seconds of code - -[![License](https://img.shields.io/badge/license-CC0--1.0-blue.svg)](https://github.com/30-seconds/30-seconds-of-code/blob/master/LICENSE) [![npm Downloads](https://img.shields.io/npm/dt/30-seconds-of-code.svg)](https://www.npmjs.com/package/30-seconds-of-code) [![npm Version](https://img.shields.io/npm/v/30-seconds-of-code.svg)](https://www.npmjs.com/package/30-seconds-of-code) [![Known Vulnerabilities](https://snyk.io/test/github/30-seconds/30-seconds-of-code/badge.svg?targetFile=package.json)](https://snyk.io/test/github/30-seconds/30-seconds-of-code?targetFile=package.json) [![Travis Build](https://travis-ci.com/30-seconds/30-seconds-of-code.svg?branch=master)](https://travis-ci.com/30-seconds/30-seconds-of-code)
-[![Awesome](https://awesome.re/badge.svg)](https://awesome.re) [![ProductHunt](https://img.shields.io/badge/producthunt-vote-orange.svg)](https://www.producthunt.com/posts/30-seconds-of-code) [![js-semistandard-style](https://img.shields.io/badge/code%20style-semistandard-brightgreen.svg)](https://github.com/Flet/semistandard) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com) - -> Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less. - -* Use Ctrl + F or command + F to search for a snippet. -* Contributions welcome, please read the [contribution guide](CONTRIBUTING.md). -* Snippets are written in ES6, use the [Babel transpiler](https://babeljs.io/) to ensure backwards-compatibility. -* You can import these snippets into VSCode, by following the instructions found [here](https://github.com/30-seconds/30-seconds-of-code/tree/master/vscode_snippets). -* You can search, view and copy these snippets from a terminal, using the CLI application from [this repo](https://github.com/sQVe/30s). -* If you want to follow 30-seconds-of-code on social media, you can find us on [Facebook](https://www.facebook.com/30secondsofcode), [Instagram](https://www.instagram.com/30secondsofcode) and [Twitter](https://twitter.com/30secondsofcode). - -#### Related projects - -* [30 Seconds of CSS](https://30-seconds.github.io/30-seconds-of-css/) -* [30 Seconds of Interviews](https://30secondsofinterviews.org/) -* [30 Seconds of React](https://github.com/30-seconds/30-seconds-of-react) -* [30 Seconds of Python](https://github.com/30-seconds/30-seconds-of-python-code) -* [30 Seconds of PHP](https://github.com/30-seconds/30-seconds-of-php-code) -* [30 Seconds of Knowledge](https://chrome.google.com/webstore/detail/30-seconds-of-knowledge/mmgplondnjekobonklacmemikcnhklla) -* [30 Seconds of Kotlin](https://github.com/IvanMwiruki/30-seconds-of-kotlin) _(unofficial)_ - -#### Package - -⚠️ **NOTICE:** A few of our snippets are not yet optimized for production (see disclaimers for individual snippet issues). - -You can find a package with all the snippets on [npm](https://www.npmjs.com/package/30-seconds-of-code). - -```bash -# With npm -npm install 30-seconds-of-code - -# With yarn -yarn add 30-seconds-of-code -``` - -[CDN link](https://unpkg.com/30-seconds-of-code/) - -
-Details - -**Browser** - -```html - - -``` - -**Node** - -```js -// CommonJS -const _30s = require('30-seconds-of-code'); -_30s.average(1, 2, 3); - -// ES Modules -import _30s from '30-seconds-of-code'; -_30s.average(1, 2, 3); -``` - -
- -## Contents diff --git a/src/static-parts/glossary_README-start.md b/src/static-parts/glossary_README-start.md deleted file mode 100644 index 1002cd79f..000000000 --- a/src/static-parts/glossary_README-start.md +++ /dev/null @@ -1,3 +0,0 @@ -# 30-seconds-of-code JavaScript Glossary - -## Contents diff --git a/src/static-parts/snippets_archive_README-start.md b/src/static-parts/snippets_archive_README-start.md deleted file mode 100644 index 49b52affa..000000000 --- a/src/static-parts/snippets_archive_README-start.md +++ /dev/null @@ -1,4 +0,0 @@ -![Logo](/logo.png) -# Snippets Archive -These snippets, while useful and interesting, didn't quite make it into the repository due to either having very specific use-cases or being outdated. However we felt like they might still be useful to some readers, so here they are. -## Contents