diff --git a/_config.yml b/_config.yml index 546ea28c7..46e06ad27 100644 --- a/_config.yml +++ b/_config.yml @@ -22,8 +22,12 @@ theme_config: show_projects: true # show projects as cards, add in _data/home.yml show_old_projects: true # show old projects as cards, add in _data/home.yml show_misc_list: false # show generic vertical list for misc details, add _data/home.yml + show_soopr: true # show share buttons using soopr + soopr_base_url: "https://soopr.netlify.app" +highlighter: rouge + sass: style: :compressed diff --git a/_includes/date_and_social_share.html b/_includes/date_and_social_share.html new file mode 100644 index 000000000..2271fb715 --- /dev/null +++ b/_includes/date_and_social_share.html @@ -0,0 +1,14 @@ +

+ {% if page.date %} + {{ page.date | date: "%B %Y"}} + {% endif %} + {% if site.theme_config.show_soopr %} + Share + + + {% endif %} +

diff --git a/_includes/post_list.html b/_includes/post_list.html index 0d0868177..09cda44e7 100644 --- a/_includes/post_list.html +++ b/_includes/post_list.html @@ -1,8 +1,11 @@ {% if site.posts.size > 0 %} diff --git a/_includes/toggle_theme_js.html b/_includes/toggle_theme_js.html index a88e342d3..d9dc76fe0 100644 --- a/_includes/toggle_theme_js.html +++ b/_includes/toggle_theme_js.html @@ -1,6 +1,10 @@ + {% endif %} diff --git a/_layouts/post.html b/_layouts/post.html index 84402ddfc..697b22320 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -4,4 +4,5 @@ {{ site.theme_config.back_home_text }}

{{ page.title }}

+{% include date_and_social_share.html %} {{ content }} diff --git a/_posts/2021-01-08-code.md b/_posts/2021-01-08-code.md new file mode 100644 index 000000000..32538a23e --- /dev/null +++ b/_posts/2021-01-08-code.md @@ -0,0 +1,122 @@ +--- +layout: post +--- + +# Language Test + +## Python +```python +import microrequests + +mr = microrequests.init() +# mr is requests' session object and you can use it in similar manner +res = mr.get("http://httpbin.org/get") +print(res.text) +``` + +## Ruby +```ruby +require 'gmail' +require 'time' +require 'yaml' +require 'erb' + +if ARGV.length != 2 + puts "Syntax: #{__FILE__} gmail-username gmail-password" + exit +end + +config = YAML.load_file("#{File.dirname(__FILE__)}/config.yaml") +body = ERB.new(config['body']) + +gmail = Gmail.connect(ARGV[0], ARGV[1]) + +# variable 'name' is important given it is used in body as well +for name, email_id in config['to'] do + puts "sending to #{email_id}" + email = gmail.compose do + to email_id + from config['from'] + subject config['subject'] + body body.result(binding) + end + email.deliver! +end + +gmail.logout +``` + +## Javascript +```javascript +const path = require('path'); +const { merge } = require('webpack-merge'); +const common = require('./webpack.common.js'); + +module.exports = merge(common, { + mode: 'development', + devtool: 'inline-source-map', + devServer: { + writeToDisk: true, + contentBase: path.join(__dirname, 'dist'), + publicPath: path.join(__dirname, 'dist'), + compress: true, + port: 8000, + }, +}); +``` + +## Elixir +```elixir +defmodule MyAppWeb.BearerAuth do + + import Plug.Conn + alias MyApp.Account + + def init(options) do + options + end + + def call(conn, _options) do + case get_bearer_auth_token(conn) do + nil -> + conn |> unauthorized() + :error -> + conn |> unauthorized() + auth_token -> + account = + Account.get_from_token(auth_token) + if account do + assign(conn, :current_account, account) + else + conn |> unauthorized() + end + end + end + + defp get_bearer_auth_token(conn) do + with ["Bearer " <> auth_token] <- get_req_header(conn, "authorization") do + auth_token + else + _ -> :error + end + end + + defp unauthorized(conn) do + conn + |> resp(401, "Unauthorized") + |> halt() + end +end + +``` + +## CSS +```css +.highlight, pre code, blockquote { + border-radius: 0.5em; +} +blockquote { + background-color: var(--bg-secondary); + border: 1px var(--border) solid; +} +``` diff --git a/_sass/moonwalk.scss b/_sass/moonwalk.scss index f868e857b..8fdcce90a 100644 --- a/_sass/moonwalk.scss +++ b/_sass/moonwalk.scss @@ -1,12 +1,19 @@ +@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); + html { height: 100%; } body { - font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; + font-family: "Inter", -apple-system, "avenir next", avenir, roboto, noto, ubuntu, "helvetica neue", helvetica, sans-serif; font-size: 1.0rem; line-height: 2; margin: 0; min-height: 100%; } +pre, code { + font-family: "Anonymous Pro", "Courier New", monospace; + font-size: 0.9rem; +} h2, h3, h4, h5 { margin-top: 1.5em; } @@ -37,7 +44,7 @@ table, th, td { padding: 0.4em; } -div.highlighter-rouge code, code.highlighter-rouge { +div.highlighter-rouge pre code, pre code.highlighter-rouge { display: block; overflow-x: auto; padding: 1em; @@ -58,12 +65,13 @@ img { } html { --bg: #FFF; - --bg-secondary: #F8F9FA; + --bg-secondary: #f8f8f8; --headings: #000; --text: #333; --links: blue; - //--highlight: #FFD19B; --highlight: #FFECB2; // light yellow + --code-text: #9D174D; + --share-text: #999; } // -------------- THEME SWITCHER -------------- // @mixin dark-appearance { @@ -74,6 +82,8 @@ html { --bg: #1f242A; --bg-secondary: #323945; --text: #adb5bd; + --code-text: #91A7FF; + --share-text: #C4C4C4; }; } html[data-theme="dark"] { @include dark-appearance; } @@ -90,12 +100,15 @@ html, body { h1, h2, h3, h4, h5, h6 { color: var(--headings); } -p, strong, b, em, small, li, hr, table, code, figcaption { +p, strong, b, em, small, li, hr, table, figcaption { color: var(--text); } -code, blockquote { +.highlight, pre code, blockquote { + border-radius: 0.5em; +} +blockquote { background-color: var(--bg-secondary); - border: 1px var(--text) solid; + border: 1px var(--border) solid; } a { color: var(--links); @@ -137,7 +150,8 @@ html.transition *:after { mark { padding: 0.4em; background-color: var(--highlight); - font-size: 0.7em; + font-size: 0.6em; + letter-spacing: 1px; } .post-date { @@ -145,7 +159,7 @@ mark { margin-right: 2em; } .share { - color: var(--text); + color: var(--share-text); } .home-date { font-family: monospace; @@ -159,3 +173,9 @@ mark { .text-upcase { text-transform: uppercase; } +p code, li code { + background-color: var(--bg-secondary); + padding: 0.2rem; + color: var(--code-text); + font-weight: bold; +} diff --git a/_sass/syntax.scss b/_sass/syntax.scss new file mode 100644 index 000000000..ec4e45740 --- /dev/null +++ b/_sass/syntax.scss @@ -0,0 +1,73 @@ +.highlight .hll { background-color: #515151 } +/*.highlight { background: #2d2d2d; color: #f2f0ec }*/ +.highlight { background: #1A1F35; color: #f2f0ec } +.highlight .c { color: #747369 } /* Comment */ +.highlight .err { color: #f2777a } /* Error */ +.highlight .k { color: #cc99cc } /* Keyword */ +.highlight .l { color: #f99157 } /* Literal */ +.highlight .n { color: #f2f0ec } /* Name */ +.highlight .o { color: #66cccc } /* Operator */ +.highlight .p { color: #f2f0ec } /* Punctuation */ +.highlight .ch { color: #747369 } /* Comment.Hashbang */ +.highlight .cm { color: #747369 } /* Comment.Multiline */ +.highlight .cp { color: #747369 } /* Comment.Preproc */ +.highlight .cpf { color: #747369 } /* Comment.PreprocFile */ +.highlight .c1 { color: #747369 } /* Comment.Single */ +.highlight .cs { color: #747369 } /* Comment.Special */ +.highlight .gd { color: #f2777a } /* Generic.Deleted */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gh { color: #f2f0ec; font-weight: bold } /* Generic.Heading */ +.highlight .gi { color: #99cc99 } /* Generic.Inserted */ +.highlight .gp { color: #747369; font-weight: bold } /* Generic.Prompt */ +.highlight .gs { font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #66cccc; font-weight: bold } /* Generic.Subheading */ +.highlight .kc { color: #cc99cc } /* Keyword.Constant */ +.highlight .kd { color: #cc99cc } /* Keyword.Declaration */ +.highlight .kn { color: #66cccc } /* Keyword.Namespace */ +.highlight .kp { color: #cc99cc } /* Keyword.Pseudo */ +.highlight .kr { color: #cc99cc } /* Keyword.Reserved */ +.highlight .kt { color: #ffcc66 } /* Keyword.Type */ +.highlight .ld { color: #99cc99 } /* Literal.Date */ +.highlight .m { color: #f99157 } /* Literal.Number */ +.highlight .s { color: #99cc99 } /* Literal.String */ +.highlight .na { color: #6699cc } /* Name.Attribute */ +.highlight .nb { color: #f2f0ec } /* Name.Builtin */ +.highlight .nc { color: #ffcc66 } /* Name.Class */ +.highlight .no { color: #f2777a } /* Name.Constant */ +.highlight .nd { color: #66cccc } /* Name.Decorator */ +.highlight .ni { color: #f2f0ec } /* Name.Entity */ +.highlight .ne { color: #f2777a } /* Name.Exception */ +.highlight .nf { color: #6699cc } /* Name.Function */ +.highlight .nl { color: #f2f0ec } /* Name.Label */ +.highlight .nn { color: #ffcc66 } /* Name.Namespace */ +.highlight .nx { color: #6699cc } /* Name.Other */ +.highlight .py { color: #f2f0ec } /* Name.Property */ +.highlight .nt { color: #66cccc } /* Name.Tag */ +.highlight .nv { color: #f2777a } /* Name.Variable */ +.highlight .ow { color: #66cccc } /* Operator.Word */ +.highlight .w { color: #f2f0ec } /* Text.Whitespace */ +.highlight .mb { color: #f99157 } /* Literal.Number.Bin */ +.highlight .mf { color: #f99157 } /* Literal.Number.Float */ +.highlight .mh { color: #f99157 } /* Literal.Number.Hex */ +.highlight .mi { color: #f99157 } /* Literal.Number.Integer */ +.highlight .mo { color: #f99157 } /* Literal.Number.Oct */ +.highlight .sa { color: #99cc99 } /* Literal.String.Affix */ +.highlight .sb { color: #99cc99 } /* Literal.String.Backtick */ +.highlight .sc { color: #f2f0ec } /* Literal.String.Char */ +.highlight .dl { color: #99cc99 } /* Literal.String.Delimiter */ +.highlight .sd { color: #747369 } /* Literal.String.Doc */ +.highlight .s2 { color: #99cc99 } /* Literal.String.Double */ +.highlight .se { color: #f99157 } /* Literal.String.Escape */ +.highlight .sh { color: #99cc99 } /* Literal.String.Heredoc */ +.highlight .si { color: #f99157 } /* Literal.String.Interpol */ +.highlight .sx { color: #99cc99 } /* Literal.String.Other */ +.highlight .sr { color: #99cc99 } /* Literal.String.Regex */ +.highlight .s1 { color: #99cc99 } /* Literal.String.Single */ +.highlight .ss { color: #99cc99 } /* Literal.String.Symbol */ +.highlight .bp { color: #f2f0ec } /* Name.Builtin.Pseudo */ +.highlight .fm { color: #6699cc } /* Name.Function.Magic */ +.highlight .vc { color: #f2777a } /* Name.Variable.Class */ +.highlight .vg { color: #f2777a } /* Name.Variable.Global */ +.highlight .vi { color: #f2777a } /* Name.Variable.Instance */ +.highlight .vm { color: #f2777a } /* Name.Variable.Magic */ +.highlight .il { color: #f99157 } /* Literal.Number.Integer.Long */ diff --git a/assets/css/main.scss b/assets/css/main.scss index 627c2f624..14ec418f2 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -3,3 +3,4 @@ @import "moonwalk"; @import "list"; +@import "syntax"; diff --git a/moonwalk.gemspec b/moonwalk.gemspec index 9e21fcd1c..2637130d5 100644 --- a/moonwalk.gemspec +++ b/moonwalk.gemspec @@ -15,4 +15,5 @@ Gem::Specification.new do |spec| spec.add_runtime_dependency "jekyll", "~> 4.1.1" spec.add_runtime_dependency "jekyll-feed", "~> 0.15.0" spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.7.1" + spec.add_runtime_dependency "rouge", "~> 3.23.0" end