diff --git a/_posts/2025-01-31-tester-pattern-react.md b/_posts/2025-01-31-tester-pattern-react.md index 90f89b6..382e6ed 100644 --- a/_posts/2025-01-31-tester-pattern-react.md +++ b/_posts/2025-01-31-tester-pattern-react.md @@ -36,7 +36,7 @@ export const HelloWorld = (props) => ( ) ``` -To test the rendering of this component, we can this test: +To test the rendering of this component, we can write a simple test: ```tsx describe('simpleComponent', () => { @@ -180,13 +180,14 @@ export function Step2Form(props: { return
- + {errors.firstname ? This field is invalid - : The firstname is valid - } + : The firstname is valid} - + The form has {Object.keys(errors).length} errors diff --git a/_sass/_syntax-highlighting.scss b/_sass/_syntax-highlighting.scss index 8fac597..e69de29 100644 --- a/_sass/_syntax-highlighting.scss +++ b/_sass/_syntax-highlighting.scss @@ -1,71 +0,0 @@ -/** - * Syntax highlighting styles - */ -.highlight { - background: #fff; - @extend %vertical-rhythm; - - .highlighter-rouge & { - background: #eef; - } - - .c { color: #998; font-style: italic } // Comment - .err { color: #a61717; background-color: #e3d2d2 } // Error - .k { font-weight: bold } // Keyword - .o { font-weight: bold } // Operator - .cm { color: #998; font-style: italic } // Comment.Multiline - .cp { color: #999; font-weight: bold } // Comment.Preproc - .c1 { color: #998; font-style: italic } // Comment.Single - .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special - .gd { color: #000; background-color: #fdd } // Generic.Deleted - .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific - .ge { font-style: italic } // Generic.Emph - .gr { color: #a00 } // Generic.Error - .gh { color: #999 } // Generic.Heading - .gi { color: #000; background-color: #dfd } // Generic.Inserted - .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific - .go { color: #888 } // Generic.Output - .gp { color: #555 } // Generic.Prompt - .gs { font-weight: bold } // Generic.Strong - .gu { color: #aaa } // Generic.Subheading - .gt { color: #a00 } // Generic.Traceback - .kc { font-weight: bold } // Keyword.Constant - .kd { font-weight: bold } // Keyword.Declaration - .kp { font-weight: bold } // Keyword.Pseudo - .kr { font-weight: bold } // Keyword.Reserved - .kt { color: #458; font-weight: bold } // Keyword.Type - .m { color: #099 } // Literal.Number - .s { color: #d14 } // Literal.String - .na { color: #008080 } // Name.Attribute - .nb { color: #0086B3 } // Name.Builtin - .nc { color: #458; font-weight: bold } // Name.Class - .no { color: #008080 } // Name.Constant - .ni { color: #800080 } // Name.Entity - .ne { color: #900; font-weight: bold } // Name.Exception - .nf { color: #900; font-weight: bold } // Name.Function - .nn { color: #555 } // Name.Namespace - .nt { color: #000080 } // Name.Tag - .nv { color: #008080 } // Name.Variable - .ow { font-weight: bold } // Operator.Word - .w { color: #bbb } // Text.Whitespace - .mf { color: #099 } // Literal.Number.Float - .mh { color: #099 } // Literal.Number.Hex - .mi { color: #099 } // Literal.Number.Integer - .mo { color: #099 } // Literal.Number.Oct - .sb { color: #d14 } // Literal.String.Backtick - .sc { color: #d14 } // Literal.String.Char - .sd { color: #d14 } // Literal.String.Doc - .s2 { color: #d14 } // Literal.String.Double - .se { color: #d14 } // Literal.String.Escape - .sh { color: #d14 } // Literal.String.Heredoc - .si { color: #d14 } // Literal.String.Interpol - .sx { color: #d14 } // Literal.String.Other - .sr { color: #009926 } // Literal.String.Regex - .s1 { color: #d14 } // Literal.String.Single - .ss { color: #990073 } // Literal.String.Symbol - .bp { color: #999 } // Name.Builtin.Pseudo - .vc { color: #008080 } // Name.Variable.Class - .vg { color: #008080 } // Name.Variable.Global - .vi { color: #008080 } // Name.Variable.Instance - .il { color: #099 } // Literal.Number.Integer.Long -} diff --git a/static/css/main.css b/static/css/main.css index ed02426..7119aee 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1,7 +1,7 @@ body { - font-family: "Roboto Condensed", Arial, sans-serif; - background: url("/static/img/subtle_dots.png"); - line-height: 1.5em; + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; + /* background: url("/static/img/subtle_dots.png"); */ + line-height: 1.5; font-weight: 300; font-size: 16px; color: #666; @@ -57,16 +57,13 @@ a:hover { /* Content */ div.content pre { - background: #333333; - padding: 10px; - color: #FFF; + /* background: #333333; */ + /* padding: 10px; */ + /* color: #FFF; overflow-x: auto; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12px; - border: none; -} -div.content .highlight { - background: #333333; + border: none; */ } footer { border-top: 1px solid #F7F1F1; @@ -187,3 +184,13 @@ div.col-sm-3 img.profile-avatar { } } + +.highlighter-rouge .highlight { + border-radius: 8px; +} + +.highlight>pre { + border-radius: 8px; + background-color: #f6f8fa; + border-color: #0000001f; +} \ No newline at end of file diff --git a/static/css/syntax.css b/static/css/syntax.css index 6424046..6eb6206 100644 --- a/static/css/syntax.css +++ b/static/css/syntax.css @@ -1,86 +1,113 @@ -/* This file was generated using `pygmentize -S nord-darker -f html -a .highlight` */ -pre { line-height: 125%; } -td.linenos .normal { color: #D8DEE9; background-color: #242933; padding-left: 5px; padding-right: 5px; } -span.linenos { color: #D8DEE9; background-color: #242933; padding-left: 5px; padding-right: 5px; } -td.linenos .special { color: #242933; background-color: #D8DEE9; padding-left: 5px; padding-right: 5px; } -span.linenos.special { color: #242933; background-color: #D8DEE9; padding-left: 5px; padding-right: 5px; } -.highlight .hll { background-color: #3B4252 } -.highlight { background: #242933; color: #d8dee9 } -.highlight .c { color: #616e87; font-style: italic } /* Comment */ -.highlight .err { color: #bf616a } /* Error */ -.highlight .esc { color: #d8dee9 } /* Escape */ -.highlight .g { color: #d8dee9 } /* Generic */ -.highlight .k { color: #81a1c1; font-weight: bold } /* Keyword */ -.highlight .l { color: #d8dee9 } /* Literal */ -.highlight .n { color: #d8dee9 } /* Name */ -.highlight .o { color: #81a1c1; font-weight: bold } /* Operator */ -.highlight .x { color: #d8dee9 } /* Other */ -.highlight .p { color: #eceff4 } /* Punctuation */ -.highlight .ch { color: #616e87; font-style: italic } /* Comment.Hashbang */ -.highlight .cm { color: #616e87; font-style: italic } /* Comment.Multiline */ -.highlight .cp { color: #5e81ac; font-style: italic } /* Comment.Preproc */ -.highlight .cpf { color: #616e87; font-style: italic } /* Comment.PreprocFile */ -.highlight .c1 { color: #616e87; font-style: italic } /* Comment.Single */ -.highlight .cs { color: #616e87; font-style: italic } /* Comment.Special */ -.highlight .gd { color: #bf616a } /* Generic.Deleted */ -.highlight .ge { color: #d8dee9; font-style: italic } /* Generic.Emph */ -.highlight .ges { color: #d8dee9 } /* Generic.EmphStrong */ -.highlight .gr { color: #bf616a } /* Generic.Error */ -.highlight .gh { color: #88c0d0; font-weight: bold } /* Generic.Heading */ -.highlight .gi { color: #a3be8c } /* Generic.Inserted */ -.highlight .go { color: #d8dee9 } /* Generic.Output */ -.highlight .gp { color: #616e88; font-weight: bold } /* Generic.Prompt */ -.highlight .gs { color: #d8dee9; font-weight: bold } /* Generic.Strong */ -.highlight .gu { color: #88c0d0; font-weight: bold } /* Generic.Subheading */ -.highlight .gt { color: #bf616a } /* Generic.Traceback */ -.highlight .kc { color: #81a1c1; font-weight: bold } /* Keyword.Constant */ -.highlight .kd { color: #81a1c1; font-weight: bold } /* Keyword.Declaration */ -.highlight .kn { color: #81a1c1; font-weight: bold } /* Keyword.Namespace */ -.highlight .kp { color: #81a1c1 } /* Keyword.Pseudo */ -.highlight .kr { color: #81a1c1; font-weight: bold } /* Keyword.Reserved */ -.highlight .kt { color: #81a1c1 } /* Keyword.Type */ -.highlight .ld { color: #d8dee9 } /* Literal.Date */ -.highlight .m { color: #b48ead } /* Literal.Number */ -.highlight .s { color: #a3be8c } /* Literal.String */ -.highlight .na { color: #8fbcbb } /* Name.Attribute */ -.highlight .nb { color: #81a1c1 } /* Name.Builtin */ -.highlight .nc { color: #8fbcbb } /* Name.Class */ -.highlight .no { color: #8fbcbb } /* Name.Constant */ -.highlight .nd { color: #d08770 } /* Name.Decorator */ -.highlight .ni { color: #d08770 } /* Name.Entity */ -.highlight .ne { color: #bf616a } /* Name.Exception */ -.highlight .nf { color: #88c0d0 } /* Name.Function */ -.highlight .nl { color: #d8dee9 } /* Name.Label */ -.highlight .nn { color: #8fbcbb } /* Name.Namespace */ -.highlight .nx { color: #d8dee9 } /* Name.Other */ -.highlight .py { color: #d8dee9 } /* Name.Property */ -.highlight .nt { color: #81a1c1 } /* Name.Tag */ -.highlight .nv { color: #d8dee9 } /* Name.Variable */ -.highlight .ow { color: #81a1c1; font-weight: bold } /* Operator.Word */ -.highlight .pm { color: #eceff4 } /* Punctuation.Marker */ -.highlight .w { color: #d8dee9 } /* Text.Whitespace */ -.highlight .mb { color: #b48ead } /* Literal.Number.Bin */ -.highlight .mf { color: #b48ead } /* Literal.Number.Float */ -.highlight .mh { color: #b48ead } /* Literal.Number.Hex */ -.highlight .mi { color: #b48ead } /* Literal.Number.Integer */ -.highlight .mo { color: #b48ead } /* Literal.Number.Oct */ -.highlight .sa { color: #a3be8c } /* Literal.String.Affix */ -.highlight .sb { color: #a3be8c } /* Literal.String.Backtick */ -.highlight .sc { color: #a3be8c } /* Literal.String.Char */ -.highlight .dl { color: #a3be8c } /* Literal.String.Delimiter */ -.highlight .sd { color: #616e87 } /* Literal.String.Doc */ -.highlight .s2 { color: #a3be8c } /* Literal.String.Double */ -.highlight .se { color: #ebcb8b } /* Literal.String.Escape */ -.highlight .sh { color: #a3be8c } /* Literal.String.Heredoc */ -.highlight .si { color: #a3be8c } /* Literal.String.Interpol */ -.highlight .sx { color: #a3be8c } /* Literal.String.Other */ -.highlight .sr { color: #ebcb8b } /* Literal.String.Regex */ -.highlight .s1 { color: #a3be8c } /* Literal.String.Single */ -.highlight .ss { color: #a3be8c } /* Literal.String.Symbol */ -.highlight .bp { color: #81a1c1 } /* Name.Builtin.Pseudo */ -.highlight .fm { color: #88c0d0 } /* Name.Function.Magic */ -.highlight .vc { color: #d8dee9 } /* Name.Variable.Class */ -.highlight .vg { color: #d8dee9 } /* Name.Variable.Global */ -.highlight .vi { color: #d8dee9 } /* Name.Variable.Instance */ -.highlight .vm { color: #d8dee9 } /* Name.Variable.Magic */ -.highlight .il { color: #b48ead } /* Literal.Number.Integer.Long */ \ No newline at end of file +/* This file was generated using `rougify style github` */ +.highlight table td { padding: 5px; } +.highlight table pre { margin: 0; } +.highlight, .highlight .w { + color: #24292f; + background-color: #f6f8fa; +} +.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv { + color: #cf222e; +} +.highlight .gr { + color: #f6f8fa; +} +.highlight .gd { + color: #82071e; + background-color: #ffebe9; +} +.highlight .nb { + color: #953800; +} +.highlight .nc { + color: #953800; +} +.highlight .no { + color: #953800; +} +.highlight .nn { + color: #953800; +} +.highlight .sr { + color: #116329; +} +.highlight .na { + color: #116329; +} +.highlight .nt { + color: #116329; +} +.highlight .gi { + color: #116329; + background-color: #dafbe1; +} +.highlight .kc { + color: #0550ae; +} +.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx { + color: #0550ae; +} +.highlight .sb { + color: #0550ae; +} +.highlight .bp { + color: #0550ae; +} +.highlight .ne { + color: #0550ae; +} +.highlight .nl { + color: #0550ae; +} +.highlight .py { + color: #0550ae; +} +.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm { + color: #0550ae; +} +.highlight .o, .highlight .ow { + color: #0550ae; +} +.highlight .gh { + color: #0550ae; + font-weight: bold; +} +.highlight .gu { + color: #0550ae; + font-weight: bold; +} +.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss { + color: #0a3069; +} +.highlight .nd { + color: #8250df; +} +.highlight .nf, .highlight .fm { + color: #8250df; +} +.highlight .err { + color: #f6f8fa; + background-color: #82071e; +} +.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs { + color: #6e7781; +} +.highlight .gl { + color: #6e7781; +} +.highlight .gt { + color: #6e7781; +} +.highlight .ni { + color: #24292f; +} +.highlight .si { + color: #24292f; +} +.highlight .ge { + color: #24292f; + font-style: italic; +} +.highlight .gs { + color: #24292f; + font-weight: bold; +} \ No newline at end of file