├── .editorconfig
├── .eslintrc
├── .github
├── dependabot.yml
└── workflows
│ ├── ci.yml
│ └── dependabot-auto-merge.yml
├── .gitignore
├── .husky
└── pre-commit
├── .nvmrc
├── .prettierignore
├── .prettierrc
├── .stylelintrc
├── gatsby-browser.tsx
├── gatsby-config.ts
├── gatsby-node.ts
├── gatsby-ssr.tsx
├── netlify.toml
├── package-lock.json
├── package.json
├── readme.md
├── src
├── components
│ ├── Aside
│ │ ├── Aside.tsx
│ │ ├── aside.module.css
│ │ ├── aside.module.css.d.ts
│ │ └── index.ts
│ ├── Categories
│ │ ├── Categories.tsx
│ │ └── index.ts
│ ├── Category
│ │ ├── Category.tsx
│ │ └── index.ts
│ ├── Column
│ │ ├── Column.tsx
│ │ ├── column.module.css
│ │ ├── column.module.css.d.ts
│ │ └── index.ts
│ ├── Content
│ │ ├── Content.tsx
│ │ ├── content.module.css
│ │ ├── content.module.css.d.ts
│ │ └── index.ts
│ ├── Footer
│ │ ├── Footer.tsx
│ │ ├── footer.module.css
│ │ ├── footer.module.css.d.ts
│ │ └── index.ts
│ ├── GitHub
│ │ ├── GitHub.tsx
│ │ ├── github.module.css
│ │ ├── github.module.css.d.ts
│ │ └── index.ts
│ ├── Grid
│ │ ├── Grid.tsx
│ │ ├── grid.module.css
│ │ ├── grid.module.css.d.ts
│ │ └── index.ts
│ ├── Header
│ │ ├── Header.tsx
│ │ ├── header.module.css
│ │ ├── header.module.css.d.ts
│ │ └── index.ts
│ ├── Main
│ │ ├── Main.tsx
│ │ ├── index.ts
│ │ ├── main.module.css
│ │ └── main.module.css.d.ts
│ ├── Navigation
│ │ ├── Navigation.tsx
│ │ ├── index.ts
│ │ ├── navigation.module.css
│ │ └── navigation.module.css.d.ts
│ ├── Row
│ │ ├── Row.tsx
│ │ ├── index.ts
│ │ ├── row.module.css
│ │ └── row.module.css.d.ts
│ ├── SEO
│ │ ├── SEO.tsx
│ │ └── index.ts
│ ├── Section
│ │ ├── Section.tsx
│ │ ├── index.ts
│ │ ├── section.module.css
│ │ └── section.module.css.d.ts
│ └── index.ts
├── constants
│ ├── resources.ts
│ └── tools.ts
├── data
│ ├── anchor
│ │ ├── external-links
│ │ │ ├── bad.md
│ │ │ ├── good.md
│ │ │ └── index.md
│ │ └── title-attribute
│ │ │ ├── bad.md
│ │ │ ├── good.md
│ │ │ └── index.md
│ ├── attribute
│ │ ├── attribute-case
│ │ │ ├── bad.md
│ │ │ ├── good.md
│ │ │ └── index.md
│ │ ├── attribute-content
│ │ │ ├── bad.md
│ │ │ ├── good.md
│ │ │ └── index.md
│ │ ├── attribute-value
│ │ │ ├── bad.md
│ │ │ ├── good.md
│ │ │ └── index.md
│ │ ├── boolean-attribute
│ │ │ ├── bad.md
│ │ │ ├── good.md
│ │ │ └── index.md
│ │ └── equal-sign
│ │ │ ├── bad.md
│ │ │ ├── good.md
│ │ │ └── index.md
│ ├── comment
│ │ ├── comment-marker
│ │ │ ├── bad.md
│ │ │ ├── good.md
│ │ │ └── index.md
│ │ └── single-line-comment
│ │ │ ├── bad.md
│ │ │ ├── good.md
│ │ │ └── index.md
│ ├── css
│ │ ├── inline-styles
│ │ │ ├── bad.md
│ │ │ ├── good.md
│ │ │ └── index.md
│ │ └── type
│ │ │ ├── bad.md
│ │ │ ├── good.md
│ │ │ └── index.md
│ ├── document
│ │ ├── character-encoding
│ │ │ ├── bad.md
│ │ │ ├── good.md
│ │ │ └── index.md
│ │ └── encoding
│ │ │ ├── bad.md
│ │ │ ├── good.md
│ │ │ └── index.md
│ ├── form
│ │ └── input-type
│ │ │ ├── bad.md
│ │ │ ├── good.md
│ │ │ └── index.md
│ ├── general
│ │ └── indentation
│ │ │ ├── bad.md
│ │ │ ├── good.md
│ │ │ └── index.md
│ ├── headline
│ │ └── heading-hierarchy
│ │ │ ├── bad.md
│ │ │ ├── good.md
│ │ │ └── index.md
│ ├── image
│ │ ├── alt-attribute
│ │ │ ├── bad.md
│ │ │ ├── good.md
│ │ │ └── index.md
│ │ └── dimensions
│ │ │ ├── bad.md
│ │ │ ├── good.md
│ │ │ └── index.md
│ ├── javascript
│ │ ├── event-handlers
│ │ │ ├── bad.md
│ │ │ ├── good.md
│ │ │ └── index.md
│ │ ├── external-files
│ │ │ ├── bad.md
│ │ │ ├── good.md
│ │ │ └── index.md
│ │ └── type
│ │ │ ├── bad.md
│ │ │ ├── good.md
│ │ │ └── index.md
│ ├── link
│ │ └── protocol
│ │ │ ├── bad.md
│ │ │ ├── good.md
│ │ │ └── index.md
│ ├── selector
│ │ └── id-class
│ │ │ ├── bad.md
│ │ │ ├── good.md
│ │ │ └── index.md
│ ├── string
│ │ └── quotation-marks
│ │ │ ├── bad.md
│ │ │ ├── good.md
│ │ │ └── index.md
│ └── tag
│ │ ├── closing-tag
│ │ ├── bad.md
│ │ ├── good.md
│ │ └── index.md
│ │ ├── empty
│ │ ├── bad.md
│ │ ├── good.md
│ │ └── index.md
│ │ ├── newline
│ │ ├── bad.md
│ │ ├── good.md
│ │ └── index.md
│ │ ├── self-closing
│ │ ├── bad.md
│ │ ├── good.md
│ │ └── index.md
│ │ └── tag-case
│ │ ├── bad.md
│ │ ├── good.md
│ │ └── index.md
├── hooks
│ ├── index.tsx
│ └── site-metadata.tsx
├── images
│ └── favicon.png
├── layouts
│ ├── Default
│ │ ├── Default.tsx
│ │ └── index.ts
│ └── index.ts
├── pages
│ └── index.tsx
└── styles
│ └── main.css
├── static
├── googleb71e0a1ab44fbe42.html
├── images
│ └── html5.svg
└── robots.txt
└── tsconfig.json
/.editorconfig:
--------------------------------------------------------------------------------
1 | # editorconfig.org
2 |
3 | root = true
4 |
5 | [*]
6 | charset = utf-8
7 | end_of_line = lf
8 | indent_size = 2
9 | indent_style = space
10 | insert_final_newline = true
11 | trim_trailing_whitespace = true
12 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "browser": true,
4 | "es2021": true,
5 | "jest": true,
6 | "node": true
7 | },
8 | "extends": [
9 | "airbnb",
10 | "plugin:@typescript-eslint/recommended",
11 | "plugin:import/typescript",
12 | "plugin:react/recommended",
13 | "prettier"
14 | ],
15 | "overrides": [
16 | {
17 | "files": ["**/*.tsx"],
18 | "rules": {
19 | "react/prop-types": "off"
20 | }
21 | }
22 | ],
23 | "parserOptions": {
24 | "ecmaFeatures": {
25 | "jsx": true
26 | },
27 | "ecmaVersion": 12,
28 | "sourceType": "module"
29 | },
30 | "plugins": ["react"],
31 | "rules": {
32 | "@typescript-eslint/no-use-before-define": 0,
33 | "import/extensions": [
34 | "error",
35 | "ignorePackages",
36 | {
37 | "js": "never",
38 | "jsx": "never",
39 | "ts": "never",
40 | "tsx": "never"
41 | }
42 | ],
43 | "import/no-unresolved": 0,
44 | "no-use-before-define": 0,
45 | "react/jsx-filename-extension": [
46 | 1,
47 | {
48 | "extensions": [".js", ".jsx", ".ts", ".tsx"]
49 | }
50 | ],
51 | "react/jsx-props-no-spreading": 0
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | updates:
3 | - package-ecosystem: 'npm'
4 | directory: '/'
5 | schedule:
6 | interval: 'monthly'
7 | groups:
8 | minor-and-patch:
9 | update-types:
10 | - 'patch'
11 | - 'minor'
12 | eslint:
13 | patterns:
14 | - '@typescript-eslint/*'
15 | - 'eslint*'
16 | gatsby:
17 | patterns:
18 | - 'gatsby*'
19 | lodash:
20 | patterns:
21 | - '@types/lodash-es'
22 | - 'lodash-es'
23 | react:
24 | patterns:
25 | - '@types/react-dom'
26 | - '@types/react'
27 | - 'react-dom'
28 | - 'react'
29 | stylelint:
30 | patterns:
31 | - 'stylelint*'
32 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 |
3 | on:
4 | push:
5 | branches: [main]
6 | pull_request:
7 | branches: [main]
8 |
9 | jobs:
10 | build:
11 | runs-on: ubuntu-latest
12 |
13 | steps:
14 | - uses: marcobiedermann/actions/.github/actions/checkout@main
15 | - uses: marcobiedermann/actions/.github/actions/setup-node@main
16 |
17 | - name: 🔋 Install
18 | run: npm ci
19 |
20 | - name: 🤖 Linting
21 | run: npm run lint
22 |
23 | - name: 🛠️ Building
24 | run: npm run build
25 |
--------------------------------------------------------------------------------
/.github/workflows/dependabot-auto-merge.yml:
--------------------------------------------------------------------------------
1 | name: Dependabot auto-merge
2 |
3 | on: pull_request
4 |
5 | jobs:
6 | ci:
7 | uses: marcobiedermann/actions/.github/workflows/dependabot-auto-merge.yml@main
8 | secrets: inherit
9 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .cache
2 | node_modules
3 | public
4 | .DS_Store
5 |
--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | npx lint-staged
2 |
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | v20
2 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | .cache
2 | node_modules
3 | public
4 | src/data
5 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 120,
3 | "singleQuote": true,
4 | "trailingComma": "all"
5 | }
6 |
--------------------------------------------------------------------------------
/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["stylelint-config-standard"],
3 | "plugins": ["stylelint-selector-bem-pattern", "stylelint-order"],
4 | "rules": {
5 | "selector-class-pattern": null,
6 | "order/properties-alphabetical-order": true,
7 | "plugin/selector-bem-pattern": {
8 | "componentName": "[A-Z]+",
9 | "componentSelectors": {
10 | "initial": "^\\.{componentName}(?:-[a-z]+)?$",
11 | "combined": "^\\.combined-{componentName}-[a-z]+$"
12 | },
13 | "utilitySelectors": "^\\.util-[a-z]+$"
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/gatsby-browser.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/prefer-default-export */
2 |
3 | import { WrapPageElementBrowserArgs } from 'gatsby';
4 | import 'prismjs/themes/prism.css';
5 | import React from 'react';
6 | import { Default } from './src/layouts';
7 | import './src/styles/main.css';
8 |
9 | function wrapPageElement({ element, props }: WrapPageElementBrowserArgs): JSX.Element {
10 | return {element} ;
11 | }
12 |
13 | export { wrapPageElement };
14 |
--------------------------------------------------------------------------------
/gatsby-config.ts:
--------------------------------------------------------------------------------
1 | import type { GatsbyConfig } from 'gatsby';
2 | import { resolve } from 'node:path';
3 |
4 | const config: GatsbyConfig = {
5 | siteMetadata: {
6 | title: 'HTML Style Guide',
7 | description: 'A style guide which helps you write better, performant, structured, scalable and maintainable HTML.',
8 | author: '@BiedermannMarco',
9 | github: {
10 | url: 'https://github.com/marcobiedermann/html-style-guide',
11 | },
12 | },
13 | plugins: [
14 | {
15 | resolve: 'gatsby-plugin-manifest',
16 | options: {
17 | name: 'HTML Style Guide',
18 | short_name: 'HTMLStyleGuide',
19 | start_url: '/',
20 | background_color: '#e34f26',
21 | theme_color: '#e34f26',
22 | display: 'minimal-ui',
23 | icon: 'src/images/favicon.png',
24 | },
25 | },
26 | {
27 | resolve: 'gatsby-source-filesystem',
28 | options: {
29 | name: 'data',
30 | path: resolve('src/data'),
31 | },
32 | },
33 | {
34 | resolve: 'gatsby-transformer-remark',
35 | options: {
36 | plugins: [
37 | {
38 | resolve: 'gatsby-remark-autolink-headers',
39 | },
40 | {
41 | resolve: 'gatsby-remark-prismjs',
42 | },
43 | ],
44 | },
45 | },
46 | ],
47 | };
48 |
49 | export default config;
50 |
--------------------------------------------------------------------------------
/gatsby-node.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Implement Gatsby's Node APIs in this file.
3 | *
4 | * See: https://www.gatsbyjs.org/docs/node-apis/
5 | */
6 |
7 | // You can delete this file if you're not using it
8 |
--------------------------------------------------------------------------------
/gatsby-ssr.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/prefer-default-export */
2 |
3 | import { WrapPageElementBrowserArgs } from 'gatsby';
4 | import React from 'react';
5 | import { Default } from './src/layouts';
6 |
7 | function wrapPageElement({ element, props }: WrapPageElementBrowserArgs): JSX.Element {
8 | return {element} ;
9 | }
10 |
11 | export { wrapPageElement };
12 |
--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 | command = "npm run build"
3 | publish = "public/"
4 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "html-style-guide",
3 | "version": "1.0.0",
4 | "description": "A style guide which helps you write better, performant, structured, scalable and maintainable HTML.",
5 | "private": "true",
6 | "scripts": {
7 | "build": "gatsby build",
8 | "check": "tsc --noEmit",
9 | "clean": "gatsby clean",
10 | "develop": "gatsby develop",
11 | "fix:css": "npm run lint:css -- --fix",
12 | "fix:js": "npm run lint:js -- --fix",
13 | "fix": "npm run fix:css && npm run fix:js",
14 | "format": "prettier --write .",
15 | "lint:css": "stylelint --ignore-path .gitignore '**/*.css'",
16 | "lint:js": "eslint --ignore-path .gitignore '**/*.{js,jsx,ts,tsx}'",
17 | "lint": "npm run lint:css && npm run lint:js",
18 | "prepare": "husky",
19 | "pretty-quick": "pretty-quick --staged",
20 | "serve": "gatsby serve",
21 | "update": "npx npm-check-updates --format group --interactive"
22 | },
23 | "repository": {
24 | "type": "git",
25 | "url": "git+https://github.com/marcobiedermann/html-style-guide.git"
26 | },
27 | "bugs": {
28 | "url": "https://github.com/marcobiedermann/html-style-guide/issues"
29 | },
30 | "keywords": [
31 | "html",
32 | "style",
33 | "coding",
34 | "guide",
35 | "styleguide",
36 | "best practices",
37 | "tips"
38 | ],
39 | "author": "Marco Biedermann",
40 | "homepage": "https://www.marcobiedermann",
41 | "license": "ISC",
42 | "dependencies": {
43 | "gatsby": "^5.14.3",
44 | "gatsby-plugin-manifest": "^5.14.0",
45 | "gatsby-remark-autolink-headers": "^6.14.0",
46 | "gatsby-remark-prismjs": "^7.14.0",
47 | "gatsby-source-filesystem": "^5.14.0",
48 | "gatsby-transformer-remark": "^6.14.0",
49 | "lodash-es": "^4.17.21",
50 | "prismjs": "^1.30.0",
51 | "react": "^18.3.1",
52 | "react-dom": "^18.3.1"
53 | },
54 | "devDependencies": {
55 | "@types/lodash-es": "^4.17.12",
56 | "@typescript-eslint/eslint-plugin": "^7.11.0",
57 | "@typescript-eslint/parser": "^7.11.0",
58 | "eslint": "^8.51.0",
59 | "eslint-config-airbnb": "^19.0.4",
60 | "eslint-config-prettier": "^9.1.0",
61 | "eslint-plugin-import": "^2.31.0",
62 | "eslint-plugin-jsx-a11y": "^6.10.1",
63 | "eslint-plugin-react": "^7.37.2",
64 | "eslint-plugin-react-hooks": "^4.6.2",
65 | "husky": "^9.1.7",
66 | "lint-staged": "^15.5.1",
67 | "prettier": "^3.5.3",
68 | "stylelint": "^16.14.1",
69 | "stylelint-config-standard": "^36.0.1",
70 | "stylelint-order": "^6.0.4",
71 | "stylelint-selector-bem-pattern": "^4.0.1",
72 | "typescript": "^5.8.3"
73 | },
74 | "lint-staged": {
75 | "**/*": "npm run format"
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # HTML Style Guide
2 |
3 | 
4 | 
5 |
6 | A style guide which helps you write better, performant, structured, scalable and maintainable HTML.
7 |
--------------------------------------------------------------------------------
/src/components/Aside/Aside.tsx:
--------------------------------------------------------------------------------
1 | import React, { HTMLAttributes, ReactNode } from 'react';
2 | import { aside } from './aside.module.css';
3 |
4 | interface AsideProps extends HTMLAttributes {
5 | children: ReactNode;
6 | }
7 |
8 | function Aside(props: AsideProps): JSX.Element {
9 | return ;
10 | }
11 |
12 | export type { AsideProps };
13 | export default Aside;
14 |
--------------------------------------------------------------------------------
/src/components/Aside/aside.module.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --aside-margin-vertical: 4.5em;
3 | }
4 |
5 | .aside {
6 | margin-bottom: var(--aside-margin-vertical);
7 | margin-top: var(--aside-margin-vertical);
8 | }
9 |
10 | @media (width >= 48em) {
11 | .aside {
12 | flex-shrink: 0;
13 | width: 16.5%;
14 | }
15 | }
16 |
17 | @media (width >= 48em) {
18 | .aside {
19 | border-right: 1px solid #ddd;
20 | margin-right: 3%;
21 | order: -1;
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/Aside/aside.module.css.d.ts:
--------------------------------------------------------------------------------
1 | declare const styles: {
2 | readonly aside: string;
3 | };
4 | export = styles;
5 |
--------------------------------------------------------------------------------
/src/components/Aside/index.ts:
--------------------------------------------------------------------------------
1 | import Aside from './Aside';
2 |
3 | export default Aside;
4 | export * from './Aside';
5 |
--------------------------------------------------------------------------------
/src/components/Categories/Categories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import type { CategoryProps } from '../Category';
3 | import Category from '../Category';
4 | import Section from '../Section';
5 |
6 | interface CategoriesProps {
7 | categories: CategoryProps[];
8 | }
9 |
10 | function Categories(props: CategoriesProps): JSX.Element {
11 | const { categories } = props;
12 |
13 | return (
14 | <>
15 | {categories.map((category) => {
16 | const { fieldValue } = category;
17 |
18 | return (
19 |
22 | );
23 | })}
24 | >
25 | );
26 | }
27 |
28 | export type { CategoriesProps };
29 | export default Categories;
30 |
--------------------------------------------------------------------------------
/src/components/Categories/index.ts:
--------------------------------------------------------------------------------
1 | import Categories from './Categories';
2 |
3 | export default Categories;
4 | export * from './Categories';
5 |
--------------------------------------------------------------------------------
/src/components/Category/Category.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/no-danger */
2 |
3 | import { startCase } from 'lodash-es';
4 | import React, { ReactNode } from 'react';
5 | import Column from '../Column';
6 | import Row from '../Row';
7 |
8 | interface Edge {
9 | node: {
10 | id: string;
11 | html: string;
12 | frontmatter: {
13 | title: string;
14 | bad?: {
15 | id: string;
16 | childMarkdownRemark: {
17 | html: string;
18 | };
19 | };
20 | good?: {
21 | id: string;
22 | childMarkdownRemark: {
23 | html: string;
24 | };
25 | };
26 | };
27 | };
28 | }
29 |
30 | interface CategoryProps {
31 | edges: Edge[];
32 | fieldValue: string;
33 | }
34 |
35 | function Category(props: CategoryProps): JSX.Element {
36 | const { edges, fieldValue } = props;
37 |
38 | return (
39 | <>
40 | {startCase(fieldValue)}
41 | {edges
42 | .map((edge) => {
43 | const {
44 | node: {
45 | id,
46 | html,
47 | frontmatter: { title, bad, good },
48 | },
49 | } = edge;
50 |
51 | return (
52 |
53 |
{title}
54 |
55 |
56 |
57 | {bad && (
58 |
59 | Bad
60 |
65 |
66 | )}
67 |
68 | {good && (
69 |
70 | Good
71 |
76 |
77 | )}
78 |
79 |
80 | );
81 | })
82 | .reduce((accumulator, currentValue) => [accumulator, , currentValue])}
83 | >
84 | );
85 | }
86 |
87 | export type { CategoryProps };
88 | export default Category;
89 |
--------------------------------------------------------------------------------
/src/components/Category/index.ts:
--------------------------------------------------------------------------------
1 | import Category from './Category';
2 |
3 | export default Category;
4 | export * from './Category';
5 |
--------------------------------------------------------------------------------
/src/components/Column/Column.tsx:
--------------------------------------------------------------------------------
1 | import React, { HTMLAttributes, ReactNode } from 'react';
2 | import { column } from './column.module.css';
3 |
4 | interface ColumnProps extends HTMLAttributes {
5 | children: ReactNode;
6 | }
7 |
8 | function Column(props: ColumnProps): JSX.Element {
9 | return
;
10 | }
11 |
12 | export type { ColumnProps };
13 | export default Column;
14 |
--------------------------------------------------------------------------------
/src/components/Column/column.module.css:
--------------------------------------------------------------------------------
1 | .column {
2 | flex-grow: 1;
3 | }
4 |
5 | @media (width >= 60em) {
6 | .column {
7 | width: 50%;
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/src/components/Column/column.module.css.d.ts:
--------------------------------------------------------------------------------
1 | declare const styles: {
2 | readonly column: string;
3 | };
4 | export = styles;
5 |
--------------------------------------------------------------------------------
/src/components/Column/index.ts:
--------------------------------------------------------------------------------
1 | import Column from './Column';
2 |
3 | export default Column;
4 | export * from './Column';
5 |
--------------------------------------------------------------------------------
/src/components/Content/Content.tsx:
--------------------------------------------------------------------------------
1 | import React, { HTMLAttributes, ReactNode } from 'react';
2 | import { content } from './content.module.css';
3 |
4 | interface ContentProps extends HTMLAttributes {
5 | children: ReactNode;
6 | }
7 |
8 | function Content(props: ContentProps): JSX.Element {
9 | return
;
10 | }
11 |
12 | export type { ContentProps };
13 | export default Content;
14 |
--------------------------------------------------------------------------------
/src/components/Content/content.module.css:
--------------------------------------------------------------------------------
1 | .content {
2 | margin-left: auto;
3 | margin-right: auto;
4 | width: 95%;
5 | }
6 |
7 | @media (width >= 48em) {
8 | .content {
9 | display: flex;
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/components/Content/content.module.css.d.ts:
--------------------------------------------------------------------------------
1 | declare const styles: {
2 | readonly content: string;
3 | };
4 | export = styles;
5 |
--------------------------------------------------------------------------------
/src/components/Content/index.ts:
--------------------------------------------------------------------------------
1 | import Content from './Content';
2 |
3 | export default Content;
4 | export * from './Content';
5 |
--------------------------------------------------------------------------------
/src/components/Footer/Footer.tsx:
--------------------------------------------------------------------------------
1 | import React, { HTMLAttributes, ReactNode } from 'react';
2 | import { footer } from './footer.module.css';
3 |
4 | interface FooterProps extends HTMLAttributes {
5 | children: ReactNode;
6 | }
7 |
8 | function Footer(props: FooterProps): JSX.Element {
9 | return ;
10 | }
11 |
12 | export type { FooterProps };
13 | export default Footer;
14 |
--------------------------------------------------------------------------------
/src/components/Footer/footer.module.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --footer-padding-vertical: 1em;
3 | }
4 |
5 | .footer {
6 | border-top: 1px solid #ddd;
7 | padding-bottom: var(--footer-padding-vertical);
8 | padding-top: var(--footer-padding-vertical);
9 | }
10 |
11 | .footer p {
12 | margin: 0;
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/Footer/footer.module.css.d.ts:
--------------------------------------------------------------------------------
1 | declare const styles: {
2 | readonly footer: string;
3 | };
4 | export = styles;
5 |
--------------------------------------------------------------------------------
/src/components/Footer/index.ts:
--------------------------------------------------------------------------------
1 | import Footer from './Footer';
2 |
3 | export default Footer;
4 | export * from './Footer';
5 |
--------------------------------------------------------------------------------
/src/components/GitHub/GitHub.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable camelcase */
2 |
3 | import React from 'react';
4 | import { github, github__arm } from './github.module.css';
5 |
6 | interface GitHubProps {
7 | url: string;
8 | }
9 |
10 | function GitHub(props: GitHubProps): JSX.Element {
11 | const { url } = props;
12 |
13 | return (
14 |
15 |
16 |
17 |
21 |
22 |
23 |
24 | );
25 | }
26 |
27 | export type { GitHubProps };
28 | export default GitHub;
29 |
--------------------------------------------------------------------------------
/src/components/GitHub/github.module.css:
--------------------------------------------------------------------------------
1 | .github {
2 | height: 80px;
3 | position: absolute;
4 | right: 0;
5 | top: 0;
6 | width: 80px;
7 | }
8 |
9 | .github__arm {
10 | transform-origin: 130px 106px;
11 | }
12 |
13 | .github:hover .github__arm {
14 | animation: octocat-wave 560ms ease-in-out;
15 | }
16 |
17 | @keyframes octocat-wave {
18 | 0%,
19 | 100% {
20 | transform: rotate(0);
21 | }
22 |
23 | 20%,
24 | 60% {
25 | transform: rotate(-25deg);
26 | }
27 |
28 | 40%,
29 | 80% {
30 | transform: rotate(10deg);
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/GitHub/github.module.css.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable camelcase */
2 |
3 | declare const styles: {
4 | readonly github: string;
5 | readonly github__arm: string;
6 | readonly 'octocat-wave': string;
7 | };
8 | export = styles;
9 |
--------------------------------------------------------------------------------
/src/components/GitHub/index.ts:
--------------------------------------------------------------------------------
1 | import GitHub from './GitHub';
2 |
3 | export default GitHub;
4 | export * from './GitHub';
5 |
--------------------------------------------------------------------------------
/src/components/Grid/Grid.tsx:
--------------------------------------------------------------------------------
1 | import React, { HTMLAttributes, ReactNode } from 'react';
2 | import { grid } from './grid.module.css';
3 |
4 | interface GridProps extends HTMLAttributes {
5 | children: ReactNode;
6 | }
7 |
8 | function Grid(props: GridProps): JSX.Element {
9 | return
;
10 | }
11 |
12 | export type { GridProps };
13 | export default Grid;
14 |
--------------------------------------------------------------------------------
/src/components/Grid/grid.module.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --grid-gutter: 1.5em;
3 | --grid-width: 95%;
4 | }
5 |
6 | .grid {
7 | margin-left: auto;
8 | margin-right: auto;
9 | width: var(--grid-width);
10 | }
11 |
--------------------------------------------------------------------------------
/src/components/Grid/grid.module.css.d.ts:
--------------------------------------------------------------------------------
1 | declare const styles: {
2 | readonly grid: string;
3 | };
4 | export = styles;
5 |
--------------------------------------------------------------------------------
/src/components/Grid/index.ts:
--------------------------------------------------------------------------------
1 | import Grid from './Grid';
2 |
3 | export default Grid;
4 | export * from './Grid';
5 |
--------------------------------------------------------------------------------
/src/components/Header/Header.tsx:
--------------------------------------------------------------------------------
1 | import React, { HTMLAttributes, ReactNode } from 'react';
2 | import { header } from './header.module.css';
3 |
4 | interface HeaderProps extends HTMLAttributes {
5 | children: ReactNode;
6 | }
7 |
8 | function Header(props: HeaderProps): JSX.Element {
9 | return ;
10 | }
11 |
12 | export type { HeaderProps };
13 | export default Header;
14 |
--------------------------------------------------------------------------------
/src/components/Header/header.module.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --header-background-color: var(--primary-color);
3 | --header-color: #fff;
4 | --header-padding-vertical: 3em;
5 | }
6 |
7 | .header {
8 | align-items: center;
9 | background-color: var(--header-background-color);
10 | color: var(--header-color);
11 | display: flex;
12 | flex-direction: column;
13 | justify-content: center;
14 | min-height: 75vh;
15 | padding-bottom: var(--header-padding-vertical);
16 | padding-top: var(--header-padding-vertical);
17 | text-align: center;
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/Header/header.module.css.d.ts:
--------------------------------------------------------------------------------
1 | declare const styles: {
2 | readonly header: string;
3 | };
4 | export = styles;
5 |
--------------------------------------------------------------------------------
/src/components/Header/index.ts:
--------------------------------------------------------------------------------
1 | import Header from './Header';
2 |
3 | export default Header;
4 | export * from './Header';
5 |
--------------------------------------------------------------------------------
/src/components/Main/Main.tsx:
--------------------------------------------------------------------------------
1 | import React, { HTMLAttributes, ReactNode } from 'react';
2 | import { main } from './main.module.css';
3 |
4 | interface MainProps extends HTMLAttributes {
5 | children: ReactNode;
6 | }
7 |
8 | function Main(props: MainProps): JSX.Element {
9 | return ;
10 | }
11 |
12 | export type { MainProps };
13 | export default Main;
14 |
--------------------------------------------------------------------------------
/src/components/Main/index.ts:
--------------------------------------------------------------------------------
1 | import Main from './Main';
2 |
3 | export default Main;
4 | export * from './Main';
5 |
--------------------------------------------------------------------------------
/src/components/Main/main.module.css:
--------------------------------------------------------------------------------
1 | .main {
2 | flex-grow: 1;
3 | overflow: hidden;
4 | }
5 |
--------------------------------------------------------------------------------
/src/components/Main/main.module.css.d.ts:
--------------------------------------------------------------------------------
1 | declare const styles: {
2 | readonly main: string;
3 | };
4 | export = styles;
5 |
--------------------------------------------------------------------------------
/src/components/Navigation/Navigation.tsx:
--------------------------------------------------------------------------------
1 | import React, { HTMLAttributes } from 'react';
2 | import { navigation } from './navigation.module.css';
3 |
4 | interface Route {
5 | name: string;
6 | path: string;
7 | }
8 |
9 | interface NavigationProps extends HTMLAttributes {
10 | routes: Route[];
11 | }
12 |
13 | function Navigation(props: NavigationProps): JSX.Element {
14 | const { routes } = props;
15 |
16 | return (
17 |
18 |
19 | {routes.map((route) => {
20 | const { name, path } = route;
21 |
22 | return (
23 |
24 |
25 | {name}
26 |
27 |
28 | );
29 | })}
30 |
31 |
32 | );
33 | }
34 |
35 | export type { NavigationProps };
36 | export default Navigation;
37 |
--------------------------------------------------------------------------------
/src/components/Navigation/index.ts:
--------------------------------------------------------------------------------
1 | import Navigation from './Navigation';
2 |
3 | export default Navigation;
4 | export * from './Navigation';
5 |
--------------------------------------------------------------------------------
/src/components/Navigation/navigation.module.css:
--------------------------------------------------------------------------------
1 | .navigation {
2 | position: sticky;
3 | top: 4.5em;
4 | }
5 |
6 | .navigation ul {
7 | list-style: none;
8 | margin: 0;
9 | padding: 0;
10 | }
11 |
12 | .navigation a {
13 | color: inherit;
14 | display: block;
15 | text-decoration: none;
16 | }
17 |
18 | .navigation a:focus,
19 | .navigation a:hover {
20 | color: var(--primary-color);
21 | }
22 |
23 | .navigation .is-active {
24 | font-weight: 700;
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/Navigation/navigation.module.css.d.ts:
--------------------------------------------------------------------------------
1 | declare const styles: {
2 | readonly navigation: string;
3 | readonly 'is-active': string;
4 | };
5 | export = styles;
6 |
--------------------------------------------------------------------------------
/src/components/Row/Row.tsx:
--------------------------------------------------------------------------------
1 | import React, { HTMLAttributes, ReactNode } from 'react';
2 | import { row } from './row.module.css';
3 |
4 | interface RowProps extends HTMLAttributes {
5 | children: ReactNode;
6 | }
7 |
8 | function Row(props: RowProps): JSX.Element {
9 | return
;
10 | }
11 |
12 | export type { RowProps };
13 | export default Row;
14 |
--------------------------------------------------------------------------------
/src/components/Row/index.ts:
--------------------------------------------------------------------------------
1 | import Row from './Row';
2 |
3 | export default Row;
4 | export * from './Row';
5 |
--------------------------------------------------------------------------------
/src/components/Row/row.module.css:
--------------------------------------------------------------------------------
1 | .row {
2 | gap: var(--grid-gutter);
3 | }
4 |
5 | @media (width >= 60em) {
6 | .row {
7 | display: flex;
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/src/components/Row/row.module.css.d.ts:
--------------------------------------------------------------------------------
1 | declare const styles: {
2 | readonly row: string;
3 | };
4 | export = styles;
5 |
--------------------------------------------------------------------------------
/src/components/SEO/SEO.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/require-default-props */
2 |
3 | import React from 'react';
4 | import useSiteMetadata from '../../hooks/site-metadata';
5 |
6 | interface SEOProps {
7 | author?: string;
8 | description?: string;
9 | title?: string;
10 | }
11 |
12 | function SEO(props: SEOProps): JSX.Element {
13 | const {
14 | site: {
15 | siteMetadata: { author: defaultAuthor, description: defaultDescription, title: defaultTitle },
16 | },
17 | } = useSiteMetadata();
18 | const { author = defaultAuthor, description = defaultDescription, title = defaultTitle } = props;
19 |
20 | return (
21 | <>
22 | {title}
23 |
24 |
25 |
26 | >
27 | );
28 | }
29 |
30 | export type { SEOProps };
31 | export default SEO;
32 |
--------------------------------------------------------------------------------
/src/components/SEO/index.ts:
--------------------------------------------------------------------------------
1 | import SEO from './SEO';
2 |
3 | export default SEO;
4 | export * from './SEO';
5 |
--------------------------------------------------------------------------------
/src/components/Section/Section.tsx:
--------------------------------------------------------------------------------
1 | import React, { HTMLAttributes, ReactNode } from 'react';
2 | import { section } from './section.module.css';
3 |
4 | interface SectionProps extends HTMLAttributes {
5 | children: ReactNode;
6 | }
7 |
8 | function Section(props: SectionProps): JSX.Element {
9 | return ;
10 | }
11 |
12 | export type { SectionProps };
13 | export default Section;
14 |
--------------------------------------------------------------------------------
/src/components/Section/index.ts:
--------------------------------------------------------------------------------
1 | import Section from './Section';
2 |
3 | export default Section;
4 | export * from './Section';
5 |
--------------------------------------------------------------------------------
/src/components/Section/section.module.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --section-padding-vertical: 4.5em;
3 | }
4 |
5 | .section {
6 | padding-bottom: var(--section-padding-vertical);
7 | padding-top: var(--section-padding-vertical);
8 | }
9 |
10 | .section + .section {
11 | border-top: 1px solid #ddd;
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/Section/section.module.css.d.ts:
--------------------------------------------------------------------------------
1 | declare const styles: {
2 | readonly section: string;
3 | };
4 | export = styles;
5 |
--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Aside';
2 | export { default as Aside } from './Aside';
3 | export * from './Categories';
4 | export { default as Categories } from './Categories';
5 | export * from './Column';
6 | export { default as Column } from './Column';
7 | export * from './Content';
8 | export { default as Content } from './Content';
9 | export * from './Footer';
10 | export { default as Footer } from './Footer';
11 | export * from './GitHub';
12 | export { default as GitHub } from './GitHub';
13 | export * from './Grid';
14 | export { default as Grid } from './Grid';
15 | export * from './Header';
16 | export { default as Header } from './Header';
17 | export * from './Main';
18 | export { default as Main } from './Main';
19 | export * from './Navigation';
20 | export { default as Navigation } from './Navigation';
21 | export * from './Row';
22 | export { default as Row } from './Row';
23 | export * from './Section';
24 | export { default as Section } from './Section';
25 | export * from './SEO';
26 | export { default as SEO } from './SEO';
27 |
--------------------------------------------------------------------------------
/src/constants/resources.ts:
--------------------------------------------------------------------------------
1 | const resources = [
2 | {
3 | name: 'CodeGuide',
4 | url: 'https://codeguide.co',
5 | },
6 | {
7 | name: 'Google HTML & CSS Guide',
8 | url: 'https://google.github.io/styleguide/htmlcssguide.html',
9 | },
10 | {
11 | name: 'w3school',
12 | url: 'https://www.w3schools.com/html/html5_syntax.asp',
13 | },
14 | {
15 | name: 'HTML Best Practices',
16 | url: 'https://github.com/hail2u/html-best-practices',
17 | },
18 | ];
19 |
20 | export default resources;
21 |
--------------------------------------------------------------------------------
/src/constants/tools.ts:
--------------------------------------------------------------------------------
1 | const tools = [
2 | {
3 | name: 'w3 Validator',
4 | url: 'https://validator.w3.org/',
5 | },
6 | ];
7 |
8 | export default tools;
9 |
--------------------------------------------------------------------------------
/src/data/anchor/external-links/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 | External URL
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/anchor/external-links/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 | External URL
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/anchor/external-links/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'External links'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'anchor'
7 | ---
8 |
9 | External links must have `rel="noopener"` and `target="_blank"` attribute.
10 |
--------------------------------------------------------------------------------
/src/data/anchor/title-attribute/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 | Link
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/anchor/title-attribute/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 | Link
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/anchor/title-attribute/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Title attribute'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'anchor'
7 | ---
8 |
9 | Anchor must have `title` attribute.
10 |
--------------------------------------------------------------------------------
/src/data/attribute/attribute-case/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/attribute/attribute-case/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/attribute/attribute-case/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Attribute Case'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'attribute'
7 | ---
8 |
9 | Attribute must be written in lowercase.
10 |
--------------------------------------------------------------------------------
/src/data/attribute/attribute-content/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/attribute/attribute-content/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/attribute/attribute-content/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Attribute Content'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'attribute'
7 | ---
8 |
9 | Attribute content must be written in lowercase.
10 |
--------------------------------------------------------------------------------
/src/data/attribute/attribute-value/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/attribute/attribute-value/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/attribute/attribute-value/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Attribute value'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'attribute'
7 | ---
8 |
9 | Attribute value must be wrapped in quotation marks.
10 |
--------------------------------------------------------------------------------
/src/data/attribute/boolean-attribute/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/attribute/boolean-attribute/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/attribute/boolean-attribute/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Boolean attribute'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'attribute'
7 | ---
8 |
9 | Boolean attribute values like `checked`, disabled and `required` are redundant and must be omitted.
10 |
--------------------------------------------------------------------------------
/src/data/attribute/equal-sign/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/attribute/equal-sign/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/attribute/equal-sign/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Equal Sign'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'attribute'
7 | ---
8 |
9 | Spaces around attribute equal signs must be avoided.
10 |
--------------------------------------------------------------------------------
/src/data/comment/comment-marker/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/comment/comment-marker/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/comment/comment-marker/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Comment marker'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'comment'
7 | ---
8 |
9 | Single line comments must have space before and after comment markers.
10 |
--------------------------------------------------------------------------------
/src/data/comment/single-line-comment/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/comment/single-line-comment/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 |
4 | ```
5 |
--------------------------------------------------------------------------------
/src/data/comment/single-line-comment/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Single line comment'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'comment'
7 | ---
8 |
9 | Single line comment must be placed before tag.
10 |
--------------------------------------------------------------------------------
/src/data/css/inline-styles/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 | Button
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/css/inline-styles/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
10 |
11 | Button
12 | ```
13 |
--------------------------------------------------------------------------------
/src/data/css/inline-styles/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Inline Styles'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'css'
7 | ---
8 |
9 | Inline styles must be avoided.
10 |
--------------------------------------------------------------------------------
/src/data/css/type/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/css/type/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/css/type/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Type'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'css'
7 | ---
8 |
9 | Style `type="text/css"` attribute must be ommitted.
10 |
--------------------------------------------------------------------------------
/src/data/document/character-encoding/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | Website
4 | …
5 |
6 |
7 | ```
8 |
--------------------------------------------------------------------------------
/src/data/document/character-encoding/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 |
4 | …
5 | Website
6 |
7 | ```
8 |
--------------------------------------------------------------------------------
/src/data/document/character-encoding/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Character encoding'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'document'
7 | ---
8 |
9 | Character encoding must be within the first 1024 bytes of the document.
10 |
--------------------------------------------------------------------------------
/src/data/document/encoding/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | Website
4 |
5 |
6 | ```
7 |
--------------------------------------------------------------------------------
/src/data/document/encoding/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 |
4 | Website
5 |
6 | ```
7 |
--------------------------------------------------------------------------------
/src/data/document/encoding/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Encoding'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'document'
7 | ---
8 |
9 | Document must have `utf-8` encoding.
10 |
--------------------------------------------------------------------------------
/src/data/form/input-type/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/form/input-type/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/form/input-type/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Input type'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'form'
7 | ---
8 |
9 | Input type must be specified.
10 |
--------------------------------------------------------------------------------
/src/data/general/indentation/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | …
4 |
5 | ```
6 |
--------------------------------------------------------------------------------
/src/data/general/indentation/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | …
4 |
5 | ```
6 |
--------------------------------------------------------------------------------
/src/data/general/indentation/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Indentation'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'general'
7 | ---
8 |
9 | Tags must be indented using two spaces.
10 |
--------------------------------------------------------------------------------
/src/data/headline/heading-hierarchy/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 | Subheadline
3 | Headline
4 | ```
5 |
--------------------------------------------------------------------------------
/src/data/headline/heading-hierarchy/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 | Headline
3 | Subheadline
4 | ```
5 |
--------------------------------------------------------------------------------
/src/data/headline/heading-hierarchy/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Heading Hierarchy'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'headline'
7 | ---
8 |
9 | Headlines must be places in hierarchical order.
10 |
--------------------------------------------------------------------------------
/src/data/image/alt-attribute/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/image/alt-attribute/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/image/alt-attribute/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Alt attribute'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'image'
7 | ---
8 |
9 | Image must have `alt` attribute.
10 |
--------------------------------------------------------------------------------
/src/data/image/dimensions/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/image/dimensions/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/image/dimensions/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Dimensions'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'image'
7 | ---
8 |
9 | Image must have `width` and `height` attribute.
10 |
--------------------------------------------------------------------------------
/src/data/javascript/event-handlers/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 | Button
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/javascript/event-handlers/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 | Button
3 |
4 |
7 | ```
8 |
--------------------------------------------------------------------------------
/src/data/javascript/event-handlers/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Event Handlers'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'javascript'
7 | ---
8 |
9 | Inline event handlers must be avoided.
10 |
--------------------------------------------------------------------------------
/src/data/javascript/external-files/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 |
4 |
5 |
6 |
7 |
8 | ```
9 |
--------------------------------------------------------------------------------
/src/data/javascript/external-files/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 |
4 |
5 |
6 |
7 |
8 | ```
9 |
--------------------------------------------------------------------------------
/src/data/javascript/external-files/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'External files'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'javascript'
7 | ---
8 |
9 | External JavaScript files must be loaded before closing `` tag.
10 |
--------------------------------------------------------------------------------
/src/data/javascript/type/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/javascript/type/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/javascript/type/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Type'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'javascript'
7 | ---
8 |
9 | Script `type="text/javascript"` attribute must be ommitted
10 |
--------------------------------------------------------------------------------
/src/data/link/protocol/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/link/protocol/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/link/protocol/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Protocol'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'link'
7 | ---
8 |
9 | Links to external resources must have a protocol specified.
10 |
--------------------------------------------------------------------------------
/src/data/selector/id-class/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 | …
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/selector/id-class/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 | …
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/selector/id-class/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'ID / Class'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'selector'
7 | ---
8 |
9 | Element ID / Class must be written in lowercase seperated by dashes starting with letter.
10 |
--------------------------------------------------------------------------------
/src/data/string/quotation-marks/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 | Link
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/string/quotation-marks/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 | Link
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/string/quotation-marks/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Quotation Marks'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'string'
7 | ---
8 |
9 | Strings must be quoted using double quotes.
10 |
--------------------------------------------------------------------------------
/src/data/tag/closing-tag/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 |
4 |
5 | List Item 1
6 | List Item 2
7 | List Item 3
8 |
9 |
10 | ```
11 |
--------------------------------------------------------------------------------
/src/data/tag/closing-tag/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 |
4 |
5 | List Item 1
6 | List Item 2
7 | List Item 3
8 |
9 |
10 |
11 | ```
12 |
--------------------------------------------------------------------------------
/src/data/tag/closing-tag/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Closing tags'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'tag'
7 | ---
8 |
9 | Optional closing tags like ``, ``, `
`, `` or `` must not be ommitted.
10 |
--------------------------------------------------------------------------------
/src/data/tag/empty/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/tag/empty/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 | Home
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/tag/empty/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Empty'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'tag'
7 | ---
8 |
9 | Tags must not be empty.
10 |
--------------------------------------------------------------------------------
/src/data/tag/newline/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim magnam quas maxime harum, sint nesciunt nihil, molestiae, quos soluta inventore rem nemo sit quidem dolorum, sunt magni eos officia illum!
4 |
5 | ```
6 |
--------------------------------------------------------------------------------
/src/data/tag/newline/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim magnam quas maxime harum, sint nesciunt nihil, molestiae, quos soluta inventore rem nemo sit quidem dolorum, sunt magni eos officia illum!
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/tag/newline/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Newline'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'tag'
7 | ---
8 |
9 | Newline between tag name and content must be avoided.
10 |
--------------------------------------------------------------------------------
/src/data/tag/self-closing/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/tag/self-closing/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/tag/self-closing/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Self-closing'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'tag'
7 | ---
8 |
9 | Trailing slash in self-closing tag must be ommitted.
10 |
--------------------------------------------------------------------------------
/src/data/tag/tag-case/bad.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/tag/tag-case/good.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 | ```
4 |
--------------------------------------------------------------------------------
/src/data/tag/tag-case/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Tag Case'
3 | bad: './bad.md'
4 | good: './good.md'
5 | categories:
6 | - 'tag'
7 | ---
8 |
9 | Tags must be written in lowercase.
10 |
--------------------------------------------------------------------------------
/src/hooks/index.tsx:
--------------------------------------------------------------------------------
1 | import { graphql, useStaticQuery } from 'gatsby';
2 |
3 | type Distinct = string;
4 |
5 | interface Edge {
6 | node: {
7 | id: string;
8 | html: string;
9 | frontmatter: {
10 | title: string;
11 | bad?: {
12 | id: string;
13 | childMarkdownRemark: {
14 | html: string;
15 | };
16 | };
17 | good?: {
18 | id: string;
19 | childMarkdownRemark: {
20 | html: string;
21 | };
22 | };
23 | };
24 | };
25 | }
26 |
27 | interface Group {
28 | edges: Edge[];
29 | fieldValue: string;
30 | }
31 |
32 | interface IndexPageQuery {
33 | allMarkdownRemark: {
34 | distinct: Distinct[];
35 | group: Group[];
36 | };
37 | site: {
38 | siteMetadata: {
39 | description: string;
40 | github: {
41 | url: string;
42 | };
43 | title: string;
44 | };
45 | };
46 | }
47 |
48 | function useIndexPage(): IndexPageQuery {
49 | return useStaticQuery(graphql`
50 | query {
51 | allMarkdownRemark {
52 | distinct(field: { frontmatter: { categories: SELECT } })
53 | group(field: { frontmatter: { categories: SELECT } }) {
54 | edges {
55 | node {
56 | id
57 | html
58 | frontmatter {
59 | title
60 | bad {
61 | id
62 | childMarkdownRemark {
63 | html
64 | }
65 | }
66 | good {
67 | childMarkdownRemark {
68 | html
69 | }
70 | }
71 | }
72 | }
73 | }
74 | fieldValue
75 | }
76 | }
77 | site {
78 | siteMetadata {
79 | description
80 | github {
81 | url
82 | }
83 | title
84 | }
85 | }
86 | }
87 | `);
88 | }
89 |
90 | export default useIndexPage;
91 |
--------------------------------------------------------------------------------
/src/hooks/site-metadata.tsx:
--------------------------------------------------------------------------------
1 | import { graphql, useStaticQuery } from 'gatsby';
2 |
3 | interface SiteMetaData {
4 | site: {
5 | siteMetadata: {
6 | author: string;
7 | description: string;
8 | title: string;
9 | };
10 | };
11 | }
12 |
13 | function useSiteMetadata(): SiteMetaData {
14 | return useStaticQuery(graphql`
15 | query {
16 | site {
17 | siteMetadata {
18 | author
19 | description
20 | title
21 | }
22 | }
23 | }
24 | `);
25 | }
26 |
27 | export default useSiteMetadata;
28 |
--------------------------------------------------------------------------------
/src/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/marcobiedermann/html-style-guide/32d1b29d1595104bcbf8bf1174ca83e30928fa7e/src/images/favicon.png
--------------------------------------------------------------------------------
/src/layouts/Default/Default.tsx:
--------------------------------------------------------------------------------
1 | import { startCase } from 'lodash-es';
2 | import React, { ReactNode } from 'react';
3 | import { Aside, Content, Footer, GitHub, Grid, Header, Main, Navigation } from '../../components';
4 | import useIndexPage from '../../hooks';
5 |
6 | interface DefaultProps {
7 | children: ReactNode;
8 | }
9 |
10 | function Default(props: DefaultProps) {
11 | const { children } = props;
12 |
13 | const {
14 | allMarkdownRemark: { distinct },
15 | site: {
16 | siteMetadata: { github, title },
17 | },
18 | } = useIndexPage();
19 |
20 | return (
21 | <>
22 |
23 |
24 | {title}
25 |
26 |
27 |
28 |
29 | {children}
30 |
31 |
32 | ({
34 | name: startCase(route),
35 | path: `#${route}`,
36 | }))}
37 | />
38 |
39 |
40 |
41 |
50 | >
51 | );
52 | }
53 |
54 | export type { DefaultProps };
55 | export default Default;
56 |
--------------------------------------------------------------------------------
/src/layouts/Default/index.ts:
--------------------------------------------------------------------------------
1 | import Default from './Default';
2 |
3 | export default Default;
4 | export * from './Default';
5 |
--------------------------------------------------------------------------------
/src/layouts/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Default';
2 | export { default as Default } from './Default';
3 |
--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Categories, Section, SEO } from '../components';
3 | import resources from '../constants/resources';
4 | import tools from '../constants/tools';
5 | import useIndexPage from '../hooks';
6 |
7 | function IndexPage(): JSX.Element {
8 | const {
9 | allMarkdownRemark: { group },
10 | site: {
11 | siteMetadata: { description, title },
12 | },
13 | } = useIndexPage();
14 |
15 | return (
16 | <>
17 |
18 | {title}
19 | {description}
20 |
21 |
22 |
23 |
24 |
41 |
42 |
43 | Resources
44 |
45 |
46 | {resources.map((resource) => {
47 | const { name, url } = resource;
48 |
49 | return (
50 |
51 |
52 | {name}
53 |
54 |
55 | );
56 | })}
57 |
58 |
59 | >
60 | );
61 | }
62 |
63 | export function Head() {
64 | return ;
65 | }
66 |
67 | export default IndexPage;
68 |
--------------------------------------------------------------------------------
/src/styles/main.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --base-color: #222;
3 | --base-font-family: 'Roboto', sans-serif;
4 | --base-font-size: 1.125rem;
5 | --base-line-height: 1.75;
6 | --primary-color: #e34f26;
7 | --body-color: var(--base-color);
8 | --body-font-family: var(--base-font-family);
9 | --body-font-size: var(--base-font-size);
10 | --body-line-height: var(--base-line-height);
11 | --h1-font-size: 3.5rem;
12 | --h1-margin-bottom: 0.5em;
13 | --h1-margin-top: 0;
14 | --h2-font-size: 2.25rem;
15 | --h2-margin-bottom: 0.5em;
16 | --h2-margin-top: 0;
17 | --h3-font-size: 1.5rem;
18 | --h3-margin-bottom: 0.5em;
19 | --h3-margin-top: 1em;
20 | --h4-font-size: 1.125rem;
21 | --h4-margin-bottom: 0.5em;
22 | --h4-margin-top: 1em;
23 | --list-margin-bottom: 1.5em;
24 | --list-margin-top: 0.5em;
25 | }
26 |
27 | * {
28 | box-sizing: inherit;
29 | }
30 |
31 | a {
32 | color: inherit;
33 | text-decoration: none;
34 | }
35 |
36 | a:focus,
37 | a:hover {
38 | text-decoration: underline;
39 | }
40 |
41 | body {
42 | color: var(--body-color);
43 | font-family: var(--body-font-family);
44 | font-size: var(--body-font-size);
45 | line-height: var(--body-line-height);
46 | margin: 0;
47 | min-height: 100%;
48 | }
49 |
50 | h1 {
51 | font-size: var(--h1-font-size);
52 | margin-bottom: var(--h1-margin-bottom);
53 | margin-top: var(--h1-margin-top);
54 | }
55 |
56 | h2 {
57 | font-size: var(--h2-font-size);
58 | margin-bottom: var(--h2-margin-bottom);
59 | margin-top: var(--h2-margin-top);
60 | }
61 |
62 | h3 {
63 | font-size: var(--h3-font-size);
64 | margin-bottom: var(--h3-margin-bottom);
65 | margin-top: var(--h3-margin-top);
66 | }
67 |
68 | h4 {
69 | font-size: var(--h4-font-size);
70 | margin-bottom: var(--h4-margin-bottom);
71 | margin-top: var(--h4-margin-top);
72 | }
73 |
74 | hr {
75 | background-color: #ddd;
76 | border: 0;
77 | height: 1px;
78 | margin-bottom: 1.5em;
79 | margin-top: 1.5em;
80 | }
81 |
82 | html {
83 | box-sizing: border-box;
84 | height: 100%;
85 | }
86 |
87 | img {
88 | height: auto;
89 | max-width: 100%;
90 | vertical-align: middle;
91 | }
92 |
93 | p {
94 | margin-bottom: 1.5em;
95 | margin-top: 0.5em;
96 | max-width: 48em;
97 | }
98 |
99 | pre {
100 | margin-bottom: 1.5em;
101 | margin-top: 0.5em;
102 | overflow: auto;
103 | white-space: pre-wrap;
104 | }
105 |
106 | ul {
107 | margin-bottom: var(--list-margin-bottom);
108 | margin-top: var(--list-margin-top);
109 | padding-left: 1.5em;
110 | }
111 |
--------------------------------------------------------------------------------
/static/googleb71e0a1ab44fbe42.html:
--------------------------------------------------------------------------------
1 | google-site-verification: googleb71e0a1ab44fbe42.html
2 |
--------------------------------------------------------------------------------
/static/images/html5.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/static/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Disallow:
3 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | /* Visit https://aka.ms/tsconfig.json to read more about this file */
4 | /* Basic Options */
5 | "incremental": true /* Enable incremental compilation */,
6 | "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
7 | "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
8 | // "lib": [], /* Specify library files to be included in the compilation. */
9 | // "allowJs": true, /* Allow javascript files to be compiled. */
10 | // "checkJs": true, /* Report errors in .js files. */
11 | "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
12 | "declaration": true /* Generates corresponding '.d.ts' file. */,
13 | "declarationMap": true /* Generates a sourcemap for each corresponding '.d.ts' file. */,
14 | "sourceMap": true /* Generates corresponding '.map' file. */,
15 | // "outFile": "./", /* Concatenate and emit output to single file. */
16 | // "outDir": "./", /* Redirect output structure to the directory. */
17 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
18 | // "composite": true, /* Enable project compilation */
19 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
20 | // "removeComments": true, /* Do not emit comments to output. */
21 | // "noEmit": true, /* Do not emit outputs. */
22 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */
23 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
24 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
25 | /* Strict Type-Checking Options */
26 | "strict": true /* Enable all strict type-checking options. */,
27 | "noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */,
28 | "strictNullChecks": true /* Enable strict null checks. */,
29 | "strictFunctionTypes": true /* Enable strict checking of function types. */,
30 | "strictBindCallApply": true /* Enable strict 'bind', 'call', and 'apply' methods on functions. */,
31 | "strictPropertyInitialization": true /* Enable strict checking of property initialization in classes. */,
32 | "noImplicitThis": true /* Raise error on 'this' expressions with an implied 'any' type. */,
33 | "alwaysStrict": true /* Parse in strict mode and emit "use strict" for each source file. */,
34 | /* Additional Checks */
35 | "noUnusedLocals": true /* Report errors on unused locals. */,
36 | "noUnusedParameters": true /* Report errors on unused parameters. */,
37 | "noImplicitReturns": true /* Report error when not all code paths in function return a value. */,
38 | "noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */,
39 | /* Module Resolution Options */
40 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
41 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
42 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
43 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
44 | // "typeRoots": [], /* List of folders to include type definitions from. */
45 | // "types": [], /* Type declaration files to be included in compilation. */
46 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
47 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
48 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
49 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
50 | /* Source Map Options */
51 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
52 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
53 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
54 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
55 | /* Experimental Options */
56 | "experimentalDecorators": true /* Enables experimental support for ES7 decorators. */,
57 | "emitDecoratorMetadata": true /* Enables experimental support for emitting type metadata for decorators. */,
58 | /* Advanced Options */
59 | "skipLibCheck": true /* Skip type checking of declaration files. */
60 | // "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
61 | }
62 | }
63 |
--------------------------------------------------------------------------------