Skip to content

Commit

Permalink
visual upgrade with syntax higlighting and soopr share integration
Browse files Browse the repository at this point in the history
  • Loading branch information
abhinavs committed Jan 7, 2021
1 parent 73b8bec commit 2a70cc8
Show file tree
Hide file tree
Showing 11 changed files with 259 additions and 12 deletions.
4 changes: 4 additions & 0 deletions _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
14 changes: 14 additions & 0 deletions _includes/date_and_social_share.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<p class="text-bold text-upcase">
{% if page.date %}
<span class="post-date">{{ page.date | date: "%B %Y"}}</span>
{% endif %}
{% if site.theme_config.show_soopr %}
<span class="share">Share </span>
<span class="soopr-btn soopr-btn-sm"
data-twitter="abhinav"
data-facebook="abhinavs"
data-text="{{ page.title }}"
data-url="{{ site.url }}/{{ page.url }}">
</span>
{% endif %}
</p>
7 changes: 5 additions & 2 deletions _includes/post_list.html
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
{% if site.posts.size > 0 %}
<ul>
{% for post in site.posts %}
<li>
{{ post.date | date: site.theme_config.date_format }} <a href="{{ post.url | relative_url }}">{{ post.title | downcase }}</a>
<li class="post-list-item">
<span class="home-date">
{{ post.date | date: site.theme_config.date_format }}»
</span>
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
Expand Down
7 changes: 6 additions & 1 deletion _includes/toggle_theme_js.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.js" defer></script>
<script type="text/javascript">
document.addEventListener('turbolinks:load', themeChange);
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
if (currentTheme)
document.documentElement.setAttribute('data-theme', currentTheme);

function themeChange(){
let button = document.querySelector('.theme-toggle');

Expand All @@ -9,13 +13,14 @@
if(currentTheme === 'dark') {
transition();
document.documentElement.setAttribute('data-theme','light');
localStorage.setItem('theme', 'light');
} else {
transition();
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
}
});

// Adds the 'transition' class to <html> for CSS fun
let transition = () =>{
document.documentElement.classList.add('transition');
window.setTimeout(()=>{
Expand Down
3 changes: 3 additions & 0 deletions _layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,8 @@
{% include goat_counter.html %}
{% endif %}

{% if site.theme_config.show_soopr %}
<script src="{{ site.theme_config.soopr_base_url }}/soopr.js" ></script>
{% endif %}
</body>
</html>
1 change: 1 addition & 0 deletions _layouts/post.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,5 @@

<a href="{{ site.url }}">{{ site.theme_config.back_home_text }}</a>
<h1>{{ page.title }}</h1>
{% include date_and_social_share.html %}
{{ content }}
122 changes: 122 additions & 0 deletions _posts/2021-01-08-code.md
Original file line number Diff line number Diff line change
@@ -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;
}
```
38 changes: 29 additions & 9 deletions _sass/moonwalk.scss
Original file line number Diff line number Diff line change
@@ -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; }

Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand All @@ -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; }
Expand All @@ -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);
Expand Down Expand Up @@ -137,15 +150,16 @@ html.transition *:after {
mark {
padding: 0.4em;
background-color: var(--highlight);
font-size: 0.7em;
font-size: 0.6em;
letter-spacing: 1px;
}

.post-date {
color: var(--headings);
margin-right: 2em;
}
.share {
color: var(--text);
color: var(--share-text);
}
.home-date {
font-family: monospace;
Expand All @@ -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;
}
73 changes: 73 additions & 0 deletions _sass/syntax.scss
Original file line number Diff line number Diff line change
@@ -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 */
1 change: 1 addition & 0 deletions assets/css/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@

@import "moonwalk";
@import "list";
@import "syntax";
1 change: 1 addition & 0 deletions moonwalk.gemspec
Original file line number Diff line number Diff line change
Expand Up @@ -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

0 comments on commit 2a70cc8

Please sign in to comment.