diff --git a/.prettierignore b/.prettierignore index 000dee8bef..fa636d58d2 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,2 +1,5 @@ public/ pnpm-lock.yaml +*.mdx +!src/pages/blog/2024-04-11-announcing-new-graphql-website/index.mdx +*.jpg diff --git a/package.json b/package.json index 51babc4563..43b2b59e06 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "build": "next build && next-image-export-optimizer", "dev": "next", "format": "pnpm format:check --write", - "format:check": "prettier --cache --check \"**/*.{js,jsx,ts,tsx,cjs,mjs,json,yml,yaml,md}\"", + "format:check": "prettier --cache --check .", "lint": "eslint --ignore-path .gitignore .", "postbuild": "next-sitemap", "start": "next start", diff --git a/prettier.config.js b/prettier.config.js index a2f2899fc5..64ff8a9017 100644 --- a/prettier.config.js +++ b/prettier.config.js @@ -9,6 +9,14 @@ export default { files: "*.svg", options: { parser: "html" }, }, + { + files: "*.mdx", + options: { + proseWrap: "always", // printWidth line breaks in md/mdx + semi: false, + trailingComma: "none", + }, + }, ], plugins: [ // For sort fields in package.json diff --git a/src/codemirror.less b/src/codemirror.less index 312ba070b1..a1fc5fc0c2 100644 --- a/src/codemirror.less +++ b/src/codemirror.less @@ -2,9 +2,6 @@ /* Code Mirror */ - - - /* BASICS */ .CodeMirror { @@ -22,7 +19,8 @@ padding: 0 4px; /* Horizontal padding of content */ } -.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { +.CodeMirror-scrollbar-filler, +.CodeMirror-gutter-filler { background-color: white; /* The little square between H and V scrollbars */ } @@ -33,7 +31,8 @@ background-color: #f7f7f7; white-space: nowrap; } -.CodeMirror-linenumbers {} +.CodeMirror-linenumbers { +} .CodeMirror-linenumber { padding: 0 3px 0 5px; min-width: 20px; @@ -42,8 +41,12 @@ white-space: nowrap; } -.CodeMirror-guttermarker { color: black; } -.CodeMirror-guttermarker-subtle { color: #999; } +.CodeMirror-guttermarker { + color: black; +} +.CodeMirror-guttermarker-subtle { + color: #999; +} /* CURSOR */ @@ -74,25 +77,41 @@ background-color: #7e7; } @-moz-keyframes blink { - 0% {} - 50% { background-color: transparent; } - 100% {} + 0% { + } + 50% { + background-color: transparent; + } + 100% { + } } @-webkit-keyframes blink { - 0% {} - 50% { background-color: transparent; } - 100% {} + 0% { + } + 50% { + background-color: transparent; + } + 100% { + } } @keyframes blink { - 0% {} - 50% { background-color: transparent; } - 100% {} + 0% { + } + 50% { + background-color: transparent; + } + 100% { + } } /* Can style cursor different in overwrite (non-insert) mode */ -.CodeMirror-overwrite .CodeMirror-cursor {} +.CodeMirror-overwrite .CodeMirror-cursor { +} -.cm-tab { display: inline-block; text-decoration: inherit; } +.cm-tab { + display: inline-block; + text-decoration: inherit; +} .CodeMirror-ruler { border-left: 1px solid #ccc; @@ -101,48 +120,114 @@ /* DEFAULT THEME */ -.cm-s-default .cm-header {color: blue;} -.cm-s-default .cm-quote {color: #090;} -.cm-negative {color: #d44;} -.cm-positive {color: #292;} -.cm-header, .cm-strong {font-weight: bold;} -.cm-em {font-style: italic;} -.cm-link {text-decoration: underline;} -.cm-strikethrough {text-decoration: line-through;} - -.cm-s-default .cm-keyword {color: #708;} -.cm-s-default .cm-atom {color: #219;} -.cm-s-default .cm-number {color: #164;} -.cm-s-default .cm-def {color: #00f;} +.cm-s-default .cm-header { + color: blue; +} +.cm-s-default .cm-quote { + color: #090; +} +.cm-negative { + color: #d44; +} +.cm-positive { + color: #292; +} +.cm-header, +.cm-strong { + font-weight: bold; +} +.cm-em { + font-style: italic; +} +.cm-link { + text-decoration: underline; +} +.cm-strikethrough { + text-decoration: line-through; +} + +.cm-s-default .cm-keyword { + color: #708; +} +.cm-s-default .cm-atom { + color: #219; +} +.cm-s-default .cm-number { + color: #164; +} +.cm-s-default .cm-def { + color: #00f; +} .cm-s-default .cm-variable, .cm-s-default .cm-punctuation, .cm-s-default .cm-property, -.cm-s-default .cm-operator {} -.cm-s-default .cm-variable-2 {color: #05a;} -.cm-s-default .cm-variable-3 {color: #085;} -.cm-s-default .cm-comment {color: #a50;} -.cm-s-default .cm-string {color: #a11;} -.cm-s-default .cm-string-2 {color: #f50;} -.cm-s-default .cm-meta {color: #555;} -.cm-s-default .cm-qualifier {color: #555;} -.cm-s-default .cm-builtin {color: #30a;} -.cm-s-default .cm-bracket {color: #997;} -.cm-s-default .cm-tag {color: #170;} -.cm-s-default .cm-attribute {color: #00c;} -.cm-s-default .cm-hr {color: #999;} -.cm-s-default .cm-link {color: #00c;} - -.cm-s-default .cm-error {color: #f00;} -.cm-invalidchar {color: #f00;} - -.CodeMirror-composing { border-bottom: 2px solid; } +.cm-s-default .cm-operator { +} +.cm-s-default .cm-variable-2 { + color: #05a; +} +.cm-s-default .cm-variable-3 { + color: #085; +} +.cm-s-default .cm-comment { + color: #a50; +} +.cm-s-default .cm-string { + color: #a11; +} +.cm-s-default .cm-string-2 { + color: #f50; +} +.cm-s-default .cm-meta { + color: #555; +} +.cm-s-default .cm-qualifier { + color: #555; +} +.cm-s-default .cm-builtin { + color: #30a; +} +.cm-s-default .cm-bracket { + color: #997; +} +.cm-s-default .cm-tag { + color: #170; +} +.cm-s-default .cm-attribute { + color: #00c; +} +.cm-s-default .cm-hr { + color: #999; +} +.cm-s-default .cm-link { + color: #00c; +} + +.cm-s-default .cm-error { + color: #f00; +} +.cm-invalidchar { + color: #f00; +} + +.CodeMirror-composing { + border-bottom: 2px solid; +} /* Default styles for common addons */ -div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;} -div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} -.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); } -.CodeMirror-activeline-background {background: #e8f2ff;} +div.CodeMirror span.CodeMirror-matchingbracket { + color: #0f0; +} +div.CodeMirror span.CodeMirror-nonmatchingbracket { + color: #f22; +} +.CodeMirror-matchingtag { + background: rgba(255, 150, 0, 0.3); +} +.CodeMirror-activeline-background { + background: #e8f2ff; +} /* STOP */ @@ -159,7 +244,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} overflow: scroll !important; /* Things will break if this is overridden */ /* 30px is the magic margin used to hide the element's real scrollbars */ /* See overflow: hidden in .CodeMirror */ - margin-bottom: -30px; margin-right: -30px; + margin-bottom: -30px; + margin-right: -30px; padding-bottom: 30px; height: 100%; outline: none; /* Prevent dragging from highlighting the element */ @@ -173,7 +259,10 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} /* The fake, visible scrollbars. Used to force redraw during scrolling before actuall scrolling happens, thus preventing shaking and flickering artifacts. */ -.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { +.CodeMirror-vscrollbar, +.CodeMirror-hscrollbar, +.CodeMirror-scrollbar-filler, +.CodeMirror-gutter-filler { position: absolute; z-index: 6; display: none; @@ -182,14 +271,18 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} overflow: hidden; } .CodeMirror-scrollbar-filler { - right: 0; bottom: 0; + right: 0; + bottom: 0; } .CodeMirror-gutter-filler { - left: 0; bottom: 0; + left: 0; + bottom: 0; } .CodeMirror-gutters { - position: absolute; left: 0; top: 0; + position: absolute; + left: 0; + top: 0; z-index: 3; } .CodeMirror-gutter { @@ -198,8 +291,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} display: inline-block; margin-bottom: -30px; /* Hack to make IE7 behave */ - *zoom:1; - *display:inline; + *zoom: 1; + *display: inline; } .CodeMirror-gutter-wrapper { position: absolute; @@ -209,7 +302,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} } .CodeMirror-gutter-background { position: absolute; - top: 0; bottom: 0; + top: 0; + bottom: 0; z-index: 4; } .CodeMirror-gutter-elt { @@ -229,7 +323,9 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} } .CodeMirror pre { /* Reset some styles that the rest of the page might have set */ - -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; + -moz-border-radius: 0; + -webkit-border-radius: 0; + border-radius: 0; border-width: 0; background: transparent; font-family: inherit; @@ -252,7 +348,10 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} .CodeMirror-linebackground { position: absolute; - left: 0; right: 0; top: 0; bottom: 0; + left: 0; + right: 0; + top: 0; + bottom: 0; z-index: 0; } @@ -262,7 +361,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} overflow: auto; } -.CodeMirror-widget {} +.CodeMirror-widget { +} .CodeMirror-code { outline: none; @@ -286,8 +386,12 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} visibility: hidden; } -.CodeMirror-cursor { position: absolute; } -.CodeMirror-measure pre { position: static; } +.CodeMirror-cursor { + position: absolute; +} +.CodeMirror-measure pre { + position: static; +} div.CodeMirror-cursors { visibility: hidden; @@ -302,22 +406,40 @@ div.CodeMirror-dragcursors { visibility: visible; } -.CodeMirror-selected { background: #d9d9d9; } -.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } -.CodeMirror-crosshair { cursor: crosshair; } -.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; } -.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; } +.CodeMirror-selected { + background: #d9d9d9; +} +.CodeMirror-focused .CodeMirror-selected { + background: #d7d4f0; +} +.CodeMirror-crosshair { + cursor: crosshair; +} +.CodeMirror-line::selection, +.CodeMirror-line > span::selection, +.CodeMirror-line > span > span::selection { + background: #d7d4f0; +} +.CodeMirror-line::-moz-selection, +.CodeMirror-line > span::-moz-selection, +.CodeMirror-line > span > span::-moz-selection { + background: #d7d4f0; +} .cm-searching { background: #ffa; - background: rgba(255, 255, 0, .4); + background: rgba(255, 255, 0, 0.4); } /* IE7 hack to prevent it from returning funny offsetTops on the spans */ -.CodeMirror span { *vertical-align: text-bottom; } +.CodeMirror span { + *vertical-align: text-bottom; +} /* Used to force a border model for a node */ -.cm-force-border { padding-right: .1px; } +.cm-force-border { + padding-right: 0.1px; +} @media print { /* Hide the cursor when printing */ @@ -327,27 +449,30 @@ div.CodeMirror-dragcursors { } /* See issue #2901 */ -.cm-tab-wrap-hack:after { content: ''; } +.cm-tab-wrap-hack:after { + content: ""; +} /* Help users use markselection to safely style text background */ -span.CodeMirror-selectedtext { background: none; } - - - - - +span.CodeMirror-selectedtext { + background: none; +} /* Fold */ .CodeMirror-foldmarker { color: blue; - text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px; + text-shadow: + #b9f 1px 1px 2px, + #b9f -1px -1px 2px, + #b9f 1px -1px 2px, + #b9f -1px 1px 2px; font-family: arial; - line-height: .3; + line-height: 0.3; cursor: pointer; } .CodeMirror-foldgutter { - width: .7em; + width: 0.7em; } .CodeMirror-foldgutter-open, .CodeMirror-foldgutter-folded { @@ -360,19 +485,24 @@ span.CodeMirror-selectedtext { background: none; } content: "\25B8"; } - /* Fold override */ .CodeMirror-foldmarker { border-radius: 4px; background: #08f; - background: -webkit-linear-gradient(#43A8FF, #0F83E8); - background: linear-gradient(#43A8FF, #0F83E8); + background: -webkit-linear-gradient(#43a8ff, #0f83e8); + background: linear-gradient(#43a8ff, #0f83e8); color: white; - -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1); - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1); + -webkit-box-shadow: + 0 1px 1px rgba(0, 0, 0, 0.2), + inset 0 0 0 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: + 0 1px 1px rgba(0, 0, 0, 0.2), + inset 0 0 0 1px rgba(0, 0, 0, 0.1); + box-shadow: + 0 1px 1px rgba(0, 0, 0, 0.2), + inset 0 0 0 1px rgba(0, 0, 0, 0.1); font-family: arial; line-height: 0; padding: 0px 4px 1px; @@ -381,9 +511,6 @@ span.CodeMirror-selectedtext { background: none; } text-shadow: 0 -1px rgba(0, 0, 0, 0.1); } - - - /* Lint */ /* The lint marker gutter */ @@ -404,29 +531,29 @@ span.CodeMirror-selectedtext { background: none; } z-index: 100; max-width: 600px; opacity: 0; - transition: opacity .4s; - -moz-transition: opacity .4s; - -webkit-transition: opacity .4s; - -o-transition: opacity .4s; - -ms-transition: opacity .4s; + transition: opacity 0.4s; + -moz-transition: opacity 0.4s; + -webkit-transition: opacity 0.4s; + -o-transition: opacity 0.4s; + -ms-transition: opacity 0.4s; } -.CodeMirror-lint-mark-error, .CodeMirror-lint-mark-warning { +.CodeMirror-lint-mark-error, +.CodeMirror-lint-mark-warning { background-position: left bottom; background-repeat: repeat-x; } .CodeMirror-lint-mark-error { - background-image: - url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==") - ; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg=="); } .CodeMirror-lint-mark-warning { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII="); } -.CodeMirror-lint-marker-error, .CodeMirror-lint-marker-warning { +.CodeMirror-lint-marker-error, +.CodeMirror-lint-marker-warning { background-position: center center; background-repeat: no-repeat; cursor: pointer; @@ -437,17 +564,20 @@ span.CodeMirror-selectedtext { background: none; } position: relative; } -.CodeMirror-lint-message-error, .CodeMirror-lint-message-warning { +.CodeMirror-lint-message-error, +.CodeMirror-lint-message-warning { padding-left: 18px; background-position: top left; background-repeat: no-repeat; } -.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error { +.CodeMirror-lint-marker-error, +.CodeMirror-lint-message-error { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII="); } -.CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning { +.CodeMirror-lint-marker-warning, +.CodeMirror-lint-message-warning { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII="); } @@ -455,19 +585,17 @@ span.CodeMirror-selectedtext { background: none; } background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-position: right bottom; - width: 100%; height: 100%; + width: 100%; + height: 100%; } - - - /* Hint */ .CodeMirror-hints { background: white; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); .code-font(); list-style: none; margin: 0; @@ -483,8 +611,8 @@ span.CodeMirror-selectedtext { background: none; } .CodeMirror-hints-wrapper { background: white; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); margin-left: -6px; position: absolute; z-index: 10; @@ -492,8 +620,8 @@ span.CodeMirror-selectedtext { background: none; } .CodeMirror-hints-wrapper .CodeMirror-hints { -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; position: relative; margin-left: 0; z-index: 0; @@ -530,7 +658,6 @@ li.CodeMirror-hint-active { margin-bottom: -1px; } - /* Custom typeahead */ .CodeMirror-hint-information .content { @@ -557,8 +684,6 @@ li.CodeMirror-hint-active { display: inline; } - - /* Lint override */ div.CodeMirror-lint-tooltip { @@ -567,8 +692,8 @@ div.CodeMirror-lint-tooltip { border: 0; border-radius: 2px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); .body-font(@size: 15px); padding: 6px 10px; opacity: 0; @@ -579,14 +704,11 @@ div.CodeMirror-lint-tooltip { -ms-transition: opacity 0.15s; } -div.CodeMirror-lint-message-error, div.CodeMirror-lint-message-warning { +div.CodeMirror-lint-message-error, +div.CodeMirror-lint-message-warning { padding-left: 23px; } - - - - /* Brackets override */ div.CodeMirror span.CodeMirror-matchingbracket { @@ -598,14 +720,10 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket { color: #f00; } - - - /* Theme */ /* COLORS */ - /* Comment */ .cm-comment { color: #999; @@ -618,66 +736,64 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket { /* Keyword */ .cm-keyword { - color: #B11A04; + color: #b11a04; } /* OperationName, FragmentName */ .cm-def { - color: #D2054E; + color: #d2054e; } /* FieldName */ .cm-property { - color: #1F61A0; + color: #1f61a0; } /* FieldAlias */ .cm-qualifier { - color: #1C92A9; + color: #1c92a9; } /* ArgumentName and ObjectFieldName */ .cm-attribute { - color: #8B2BB9; + color: #8b2bb9; } /* Number */ .cm-number { - color: #2882F9; + color: #2882f9; } /* String */ .cm-string { - color: #D64292; + color: #d64292; } /* Boolean */ .cm-builtin { - color: #D47509; + color: #d47509; } /* EnumValue */ .cm-string-2 { - color: #0B7FC7; + color: #0b7fc7; } /* Variable */ .cm-variable { - color: #397D13; + color: #397d13; } /* Directive */ .cm-meta { - color: #B33086; + color: #b33086; } /* Type */ .cm-atom { - color: #CA9800; + color: #ca9800; } - - /* CM override */ .CodeMirror { @@ -689,13 +805,15 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket { color: #333; width: 100%; display: -webkit-flex; - display: flex; + display: flex; -webkit-flex-direction: row; - flex-direction: row; + flex-direction: row; position: relative; background: white; - box-shadow: inset 0 0 0 1px #EEE, inset 4px 0 0 #EEE; + box-shadow: + inset 0 0 0 1px #eee, + inset 4px 0 0 #eee; border-radius: 3px; margin-left: -4px; } @@ -732,7 +850,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket { .variable-editor::before { background: #eee; color: white; - content: 'VARIABLES'; + content: "VARIABLES"; display: block; font-size: 10px; font-weight: bold; @@ -745,7 +863,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket { .result-window { /*background: #fbfafa;*/ - box-shadow: inset 5px 0px 4px -3px rgba(0,0,0,0.2); + box-shadow: inset 5px 0px 4px -3px rgba(0, 0, 0, 0.2); position: absolute; left: 50%; @@ -754,7 +872,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket { height: 100%; right: 0; - box-shadow: inset 0 0 0 1px #EEE; + box-shadow: inset 0 0 0 1px #eee; border-radius: 3px; } diff --git a/src/components/index-page/predictable-results/index.module.css b/src/components/index-page/predictable-results/index.module.css index 44911bbcae..a25f0122be 100644 --- a/src/components/index-page/predictable-results/index.module.css +++ b/src/components/index-page/predictable-results/index.module.css @@ -1,11 +1,13 @@ .cursor { animation: cursor-blink 0.5s infinite linear both alternate; - + @keyframes cursor-blink { - 0%, 30% { + 0%, + 30% { opacity: 0; } - 70%, 100% { + 70%, + 100% { opacity: 1; } } diff --git a/src/icons/apollo.svg b/src/icons/apollo.svg index 8d7cf22e68..a7384100e3 100644 --- a/src/icons/apollo.svg +++ b/src/icons/apollo.svg @@ -1,4 +1,8 @@ - + diff --git a/src/icons/around.svg b/src/icons/around.svg index c9bb09f043..312441f195 100644 --- a/src/icons/around.svg +++ b/src/icons/around.svg @@ -1,4 +1,8 @@ - + diff --git a/src/icons/chevron-left.svg b/src/icons/chevron-left.svg index 9f9f7439b5..6127b5cecd 100644 --- a/src/icons/chevron-left.svg +++ b/src/icons/chevron-left.svg @@ -1,8 +1,4 @@ - + + + + diff --git a/src/icons/graphql-conf.svg b/src/icons/graphql-conf.svg index 062caeec3c..2b088997c7 100644 --- a/src/icons/graphql-conf.svg +++ b/src/icons/graphql-conf.svg @@ -1,4 +1,8 @@ - + diff --git a/src/icons/hamburger.svg b/src/icons/hamburger.svg index e4cff886ab..dc89112cb5 100644 --- a/src/icons/hamburger.svg +++ b/src/icons/hamburger.svg @@ -1,8 +1,4 @@ - + + diff --git a/src/icons/text.svg b/src/icons/text.svg index 6f5a2ae96a..9d8bd140d7 100644 --- a/src/icons/text.svg +++ b/src/icons/text.svg @@ -1,8 +1,4 @@ - + + diff --git a/src/pages/blog.mdx b/src/pages/blog.mdx index 8366fad07d..df349e7b40 100644 --- a/src/pages/blog.mdx +++ b/src/pages/blog.mdx @@ -5,9 +5,10 @@ import NextLink from "next/link" import { useRouter } from "next/router" import { clsx } from "clsx" -export default function Blog(props) { +export default function Blog() { const { asPath } = useRouter() - const blogs = getPagesUnderRoute("/blog").sort( + const items = getPagesUnderRoute("/blog").flatMap(item => item.children || item) + const blogs = items.sort( (a, b) => b.frontMatter.date - a.frontMatter.date, ) const currentTag = asPath.startsWith("/blog") diff --git a/src/pages/blog/2024-03-28-announcing-graphqlconf-2024.mdx b/src/pages/blog/2024-03-28-announcing-graphqlconf-2024.mdx index e95b9ed67b..3746a645b2 100644 --- a/src/pages/blog/2024-03-28-announcing-graphqlconf-2024.mdx +++ b/src/pages/blog/2024-03-28-announcing-graphqlconf-2024.mdx @@ -1,13 +1,13 @@ --- -title: "🎉 Announcing GraphQLConf 2024" -tags: ["announcements"] +title: Announcing GraphQLConf 2024 +tags: [announcements] date: 2024-03-28 byline: GraphQL Conference & Event Committee --- Inviting innovators, decision-makers, and GraphQL aficionados alike! GraphQL Foundation are thrilled to announce the return of [GraphQLConf](/conf/2024), the much-anticipated official conference for anyone working with GraphQL. After a very successful inaugural conference last year, we are setting the stage for an even bigger event, returning once again to San Francisco — but this time to the heart of this vibrant city! Mark your calendars for September 10-12, 2024, as we invite you to join us at the stunning JW Marriott in San Francisco Union Square for a three-day celebration of learning, innovation, networking, and community. -### 🌟 What To Expect? +## 🌟 What To Expect? * **Production Insights:** Gain exclusive insights into how leading companies of all sizes are leveraging GraphQL to drive innovation, streamline operations, and enhance their tech stack's efficiency. * **Access to Innovators:** GraphQLConf offers a rare opportunity to meet the visionaries and maintainers behind GraphQL's groundbreaking projects. Engage with the minds shaping the future of API technology. @@ -15,26 +15,26 @@ Inviting innovators, decision-makers, and GraphQL aficionados alike! GraphQL Fou * **Diverse Perspectives:** If GraphQL is on your radar, this is the place to sharpen your understanding, evaluate its impact, and envision its role in your organization’s future. Whether you're CTO, architect, system integrator, API developer or frontend engineer, if it's about GraphQL, we want to hear from you! * **Prime Location:** We're moving from the outskirts to the beating heart of San Francisco! We’ll have the city's dynamic vibe as our backdrop, with plenty of space for gathering, meeting, and collaborating. -### 🔭 Navigating API Innovation +## 🔭 Navigating API Innovation For technology leaders navigating the complexities of modern API architectures, GraphQLConf 2024 is more than just a conference. It's a strategic platform to foresee industry trends, meet the pioneers, and evaluate how GraphQL can fit into and enhance your technology strategy. Whether you're assessing GraphQL for your next project, looking to optimize existing infrastructures, or keen to foster innovation within your team, GraphQLConf promises a wealth of knowledge and networking opportunities to help steer your decisions in the right direction. -### 📢 Call for Proposals (CFP) is OPEN! +## 📢 Call for Proposals (CFP) is OPEN! Do you have a big idea, a transformative project, or an insightful case study? We want you on our stage! [The CFP is officially open](/conf/2024), and we’re on the lookout for speakers who can bring fresh perspectives and valuable knowledge to our community. Don't miss this chance to showcase your expertise and contribute to the collective learning of the GraphQL ecosystem. Submit your proposal now—CFP closes on May 22, 2024, at 11:59 pm PDT. -### 🎟️ Snag Your Early Bird Tickets! +## 🎟️ Snag Your Early Bird Tickets! Early birds get the worm, or in this case, the best deal on tickets! Early bird registration is open until May 22, offering you the chance to secure your spot at a special rate. Don't wait too long, though - we anticipate a sold-out event! -### 📅 Mark Your Calendars +## 📅 Mark Your Calendars * **CFP Deadline:** May 22, 2024, at 11:59 pm PDT * **Early Bird Registration Ends:** May 22, 2024 * **Schedule Announcement:** June 26, 2024 * **Event Dates:** September 10-12, 2024 -### 🤝 Get Ready to Connect and Collaborate +## 🤝 Get Ready to Connect and Collaborate [GraphQLConf 2024](/conf/2024) is not just another tech conference; it's a gathering of diverse and vibrant community members who are passionate about pushing the boundaries of GraphQL and building the future of APIs together. Whether you're a seasoned GraphQL user, or just looking to understand how GraphQL can help your business, GraphQLConf is a can’t-miss opportunity to be part of this ecosystem. diff --git a/src/pages/tags/[slug].mdx b/src/pages/tags/[slug].mdx index ada819841b..46b8d7c772 100644 --- a/src/pages/tags/[slug].mdx +++ b/src/pages/tags/[slug].mdx @@ -15,8 +15,8 @@ export async function getStaticProps({ params }) { } export function getStaticPaths() { - const result = getPagesUnderRoute("/blog") - const tags = result.flatMap(item => item.frontMatter.tags) + const items = getPagesUnderRoute("/blog").flatMap(item => item.children || item) + const tags = items.flatMap(item => item.frontMatter.tags) return { fallback: false, paths: [...new Set(tags)].map(slug => ({ params: { slug } })),