diff --git a/404.html b/404.html new file mode 100644 index 000000000..36f4ef40d --- /dev/null +++ b/404.html @@ -0,0 +1,39 @@ +--- +permalink: /404.html +layout: post +--- + + + +

404

+ +

Page not found :(

+

The requested page could not be found.

+ + + diff --git a/Gemfile b/Gemfile new file mode 100644 index 000000000..de561f1e0 --- /dev/null +++ b/Gemfile @@ -0,0 +1,31 @@ +source "https://rubygems.org" +# Hello! This is where you manage which Jekyll version is used to run. +# When you want to use a different version, change it below, save the +# file and run `bundle install`. Run Jekyll with `bundle exec`, like so: +# +# bundle exec jekyll serve +# +# This will help ensure the proper Jekyll version is running. +# Happy Jekylling! +gem "jekyll", "~> 4.0.0" +# This is the default theme for new Jekyll sites. You may change this to anything you like. +# gem "minima", "~> 2.5" +# If you want to use GitHub Pages, remove the "gem "jekyll"" above and +# uncomment the line below. To upgrade, run `bundle update github-pages`. +# gem "github-pages", group: :jekyll_plugins +# If you have any plugins, put them here! +group :jekyll_plugins do + gem "jekyll-feed", "~> 0.12" +end + +# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem +# and associated library. +install_if -> { RUBY_PLATFORM =~ %r!mingw|mswin|java! } do + gem "tzinfo", "~> 1.2" + gem "tzinfo-data" +end + +# Performance-booster for watching directories on Windows +gem "wdm", "~> 0.1.1", :install_if => Gem.win_platform? + +gem 'jekyll-sitemap' diff --git a/Gemfile.lock b/Gemfile.lock new file mode 100644 index 000000000..0df6798a8 --- /dev/null +++ b/Gemfile.lock @@ -0,0 +1,82 @@ +GEM + remote: https://rubygems.org/ + specs: + addressable (2.7.0) + public_suffix (>= 2.0.2, < 5.0) + colorator (1.1.0) + concurrent-ruby (1.1.6) + em-websocket (0.5.1) + eventmachine (>= 0.12.9) + http_parser.rb (~> 0.6.0) + eventmachine (1.2.7-x64-mingw32) + ffi (1.12.2-x64-mingw32) + forwardable-extended (2.6.0) + http_parser.rb (0.6.0) + i18n (1.8.2) + concurrent-ruby (~> 1.0) + jekyll (4.0.0) + addressable (~> 2.4) + colorator (~> 1.0) + em-websocket (~> 0.5) + i18n (>= 0.9.5, < 2) + jekyll-sass-converter (~> 2.0) + jekyll-watch (~> 2.0) + kramdown (~> 2.1) + kramdown-parser-gfm (~> 1.0) + liquid (~> 4.0) + mercenary (~> 0.3.3) + pathutil (~> 0.9) + rouge (~> 3.0) + safe_yaml (~> 1.0) + terminal-table (~> 1.8) + jekyll-feed (0.13.0) + jekyll (>= 3.7, < 5.0) + jekyll-sass-converter (2.1.0) + sassc (> 2.0.1, < 3.0) + jekyll-sitemap (1.4.0) + jekyll (>= 3.7, < 5.0) + jekyll-watch (2.2.1) + listen (~> 3.0) + kramdown (2.2.1) + rexml + kramdown-parser-gfm (1.1.0) + kramdown (~> 2.0) + liquid (4.0.3) + listen (3.2.1) + rb-fsevent (~> 0.10, >= 0.10.3) + rb-inotify (~> 0.9, >= 0.9.10) + mercenary (0.3.6) + pathutil (0.16.2) + forwardable-extended (~> 2.6) + public_suffix (4.0.4) + rb-fsevent (0.10.3) + rb-inotify (0.10.1) + ffi (~> 1.0) + rexml (3.2.4) + rouge (3.18.0) + safe_yaml (1.0.5) + sassc (2.3.0-x64-mingw32) + ffi (~> 1.9) + terminal-table (1.8.0) + unicode-display_width (~> 1.1, >= 1.1.1) + thread_safe (0.3.6) + tzinfo (1.2.7) + thread_safe (~> 0.1) + tzinfo-data (1.2020.1) + tzinfo (>= 1.0.0) + unicode-display_width (1.7.0) + wdm (0.1.1) + +PLATFORMS + x64-mingw32 + +DEPENDENCIES + jekyll (~> 4.0.0) + jekyll-feed (~> 0.12) + jekyll-sitemap + tzinfo (~> 1.2) + tzinfo-data + wdm (~> 0.1.1) + +BUNDLED WITH + 2.1.4 diff --git a/README.md b/README.md new file mode 100644 index 000000000..7722d74cc --- /dev/null +++ b/README.md @@ -0,0 +1,7 @@ +# raghuveerdotnet.github.io +Personal Website by Raghuveer S. + +Do whatever you want with it. + +PS. If you like the content or the design, please share it with others. +# simply-jekyll diff --git a/_config.yml b/_config.yml new file mode 100644 index 000000000..08956ec10 --- /dev/null +++ b/_config.yml @@ -0,0 +1,43 @@ +title: Simply Jekyll +name: Raghuveer S +baseurl: "/" # the subpath of your site, e.g. /blog +url: "https://www.raghuveer.net" # the base hostname & protocol for your site, e.g. http://example.com +encoding: utf-8 + +# Build settings +theme: null +plugins: + - jekyll-feed + - jekyll-sitemap + +markdown: kramdown + +kramdown: + input: GFM + hard_wrap: false + math_engine: mathjax + smart_quotes: ["apos", "apos", "quot", "quot"] + syntax_highlighter: rouge + +sass: + style: compressed + +collections: + notes: + output: true + permalink: /notes/:title + +defaults: + - scope: + path: "" + type: posts + values: + layout: post + permalink: /posts/:title + content-type: post + - scope: + path: "" + type: notes + values: + layout: post + content-type: notes \ No newline at end of file diff --git a/_includes/backlinks.html b/_includes/backlinks.html new file mode 100644 index 000000000..72f711435 --- /dev/null +++ b/_includes/backlinks.html @@ -0,0 +1,62 @@ + +{%- assign link_count = 0 -%} +{%- for note in site.notes -%} + {%- if note.url != page.url -%} + {%- if note.content contains page.title -%} + {%- assign link_count = link_count | plus:1 -%} + {%- endif -%} + {%- endif -%} +{%- endfor -%} +{%- for note in site.posts -%} + {%- if note.url != page.url -%} + {%- if note.content contains page.title -%} + {%- assign link_count = link_count | plus:1 -%} + {%- endif -%} + {%- endif -%} +{%- endfor -%} +{%- for note in site.pages -%} + {%- if note.url != page.url -%} + {%- if note.content contains page.title -%} + {%- assign link_count = link_count | plus:1 -%} + {%- endif -%} + {%- endif -%} +{%- endfor -%} +{%- if link_count > 0 -%} +{%- assign wiki_link_title = '[' | append: page.title | append: ']' -%} + +{%- endif -%} \ No newline at end of file diff --git a/_includes/content.html b/_includes/content.html new file mode 100644 index 000000000..f3a30264d --- /dev/null +++ b/_includes/content.html @@ -0,0 +1,136 @@ + +{%- if page.content-type == "post" -%} + +{%- endif -%} +
+ {%- assign content_array = content | split:'[[' -%} + {%- assign external_link_delimiter = '::' -%} + + {%- assign link_joiner_delimiter = '$@' -%} + {%- for item in content_array -%} + {%- if forloop.index > 1 -%} + {%- assign itemparts = item | split:']]' -%} + {%- assign internal_link = itemparts[0] -%} + {%- assign external_link = itemparts[0] | split:external_link_delimiter -%} + {%- assign sidenote = itemparts[0] | split:sidenote_delimiter -%} + + {%- if external_link[1] == nil -%} + {%- assign result_notes = site.notes | where: 'title',itemparts[0] -%} + {%- assign result_posts = site.posts | where: 'title',itemparts[0] -%} + {%- assign result_pages = site.pages | where: 'title',itemparts[0] -%} + {%- assign internal_links = internal_links | append: link_joiner_delimiter | append: internal_link -%} + {%- assign internal_urls = internal_urls | append: link_joiner_delimiter | append: result_notes[0].url | append: result_posts[0].url | append: result_pages[0].url -%} + {%- else -%} + {%- assign external_links = external_links | append: link_joiner_delimiter | append: external_link[0] -%} + {%- assign external_urls = external_urls | append: link_joiner_delimiter | append: external_link[1] -%} + {%- endif -%} + {%- endif -%} + {%- endfor -%} + + {%- assign internal_url_array = internal_urls | split:link_joiner_delimiter -%} + {%- assign internal_link_array = internal_links | split:link_joiner_delimiter -%} + + {%- assign external_url_array = external_urls | split:link_joiner_delimiter -%} + {%- assign external_link_array = external_links | split:link_joiner_delimiter -%} + + + {%- assign replaced_content = content -%} + {%- for title in internal_link_array -%} + {%- assign url = internal_url_array[forloop.index0] -%} + {%- if url == nil -%} + {%- assign link_text = '' | append: title | append: '' -%} + {%- elsif url == empty -%} + {%- assign link_text = '' | append: title | append: '' -%} + {%- else -%} + {%- assign post = site.notes | where: 'title',title -%} + {%- if post[0].title == nil -%} + {%- assign post = site.posts | where: 'title',title -%} + {%- endif -%} + {%- assign excerpt = post[0].content | markdownify | strip_html | truncate: 500 | newline_to_br -%} + {%- assign link_text = '' | append: title | append: '' | append: title | append: '
' | append: excerpt | append: '' -%} + {%- endif -%} + {%- assign bracket_link = '[[' | append: title | append: ']]' -%} + {%- assign replaced_content = replaced_content | replace: bracket_link,link_text -%} + {%- endfor -%} + + {%- assign sideNoteCounter = 0 -%} + {%- assign srsCounter = 0 -%} + {%- for title in external_link_array -%} + {%- assign url = external_url_array[forloop.index0] -%} + {%- if url contains "wikipedia.org" -%} + {%- assign link_text = '' | append: title | append: ' + ' -%} + {%- elsif url contains "archive.org" -%} + {%- assign link_text = '' | append: title | append: 'Wayback' -%} + {%- elsif url contains "gutenberg.org" -%} + {%- assign link_text = '' | append: title | append: 'Guten' -%} + {%- elsif url contains "youtube.com" or url contains "youtu.be" -%} + {%- assign link_text = '' | append: title | append: '' -%} + {%- elsif url contains "twitter.com" -%} + {%- assign link_text = '' | append: title | append: '' -%} + {%- elsif url contains "github.com" or url contains "github.io" -%} + {%- assign link_text = '' | append: title | append: '' -%} + {%- elsif url == "highlight" -%} + {%- assign link_text = '' | append: title | append: '' -%} + {%- elsif url == "wrap" -%} + {%- assign link_text = '
' | append: title | append: '
' -%} + {%- elsif url == "img" -%} + {%- assign link_text = '' -%} + {%- elsif url == "lsn" or url == "rsn" or url == "lsn-transclude" or url == "rsn-transclude" or url == "lmn" or url == "rmn" or url == "lmn-transclude" or url == "rmn-transclude" -%} + {%- assign toggleLabel = "" -%} + {%- assign sideNoteNum = "" -%} + {%- if url contains "lsn" -%} + {%- assign noteType = "sn-left" -%} + {%- assign sideNoteNum = "sidenote-number" -%} + {%- elsif url contains "rsn" -%} + {%- assign noteType = "sn-right" -%} + {%- assign sideNoteNum = "sidenote-number" -%} + {%- elsif url contains "lmn" -%} + {%- assign noteType = "mn-left" -%} + {%- assign toggleLabel = "⊕" -%} + {%- elsif url contains "rmn" -%} + {%- assign noteType = "mn-right" -%} + {%- assign toggleLabel = "⊕" -%} + {%- endif -%} + + + {%- if url contains "transclude" -%} + {%- assign post = site.notes | where: 'title',title -%} + {%- if post[0].title == nil -%} + {%- assign post = site.posts | where: 'title',title -%} + {%- endif -%} + {%- assign excerpt = post[0].content | strip_html | truncate: 280 -%} + {%- assign link_text = ' Transclusion
' | append: title | append: '
' | append: excerpt | append: '' -%} + {%- else -%} + {%- assign link_text = '' | append: title | append: '' -%} + {%- endif -%} + + {%- assign sideNoteCounter = sideNoteCounter | plus:1 -%} + {%- elsif url == "srs" -%} + {%- assign link_text = 'Flashcard
' | append: title | append: '' -%} + {%- assign srsCounter = srsCounter | plus:1 -%} + {%- elsif url == "todo" -%} + {%- assign todo_list = title | split:';' -%} + {%- assign link_text = "

::TODO::

' -%} + {%- else -%} + {%- assign link_text = '' | append: title | append: '' -%} + {%- endif -%} + {%- assign bracket_link = '[[' | append: title | append: external_link_delimiter | append: url | append: ']]' -%} + {%- assign replaced_content = replaced_content | replace: bracket_link,link_text -%} + {%- endfor -%} + + {{ replaced_content }} +
\ No newline at end of file diff --git a/_includes/contextmenu.html b/_includes/contextmenu.html new file mode 100644 index 000000000..9635a2029 --- /dev/null +++ b/_includes/contextmenu.html @@ -0,0 +1,24 @@ +{%- if page.permalink == "/" or page.permalink == "/notes" -%} + + + +{%- endif -%} \ No newline at end of file diff --git a/_includes/feed.html b/_includes/feed.html new file mode 100644 index 000000000..209a317ea --- /dev/null +++ b/_includes/feed.html @@ -0,0 +1,28 @@ +{%- if page.permalink == "/" -%} + {%- for item in site.posts -%} +
+ + {%- if item.status == "Ongoing" or item.status == "ongoing" -%} + +

{{ item.title }}

+ {%- else -%} +

{{ item.title }}

+ {%- endif -%} +

{{ item.content | strip_html | strip | escape | truncate: 200}}

+ +
+ {%- endfor -%} +{%- endif -%} + +{%- if page.permalink == "/notes" -%} + {%- for item in site.notes -%} +
+ +

{{ item.title }}

+

{{ item.content | strip_html | strip | escape | truncate: 200 }}

+ +
+ {%- endfor -%} +{%- endif -%} diff --git a/_includes/footer.html b/_includes/footer.html new file mode 100644 index 000000000..bc4d76d36 --- /dev/null +++ b/_includes/footer.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/_includes/header.html b/_includes/header.html new file mode 100644 index 000000000..43f1eaa7d --- /dev/null +++ b/_includes/header.html @@ -0,0 +1,169 @@ +{%- if page.content-type == "notes" or page.permalink == "/notes" -%} +
+
+
+

{{site.title}}

+
+ +
+

Notes and Thoughts

+

The journey from raw thoughts to blogposts

+
+
+
+ + + + +
+ + +
+ {%- if page.permalink == "/notes" -%} +
+ + + + +
+

Home

+ {%- else -%} +
+ + + + +
+

Notes

+ {%- endif -%} +
+{%- else -%} +
+
+
+

{{site.title}}

+
+
+
+

{{site.name}}

+
+
+

Programmer. (Many Interests: Philosophy & Mathematics)

+
+
+ + + + + raghuveer.net/notes +
+
+
+
+ + avatar + +
+
+
+ + + + + +

About

+ +
+
+ + + + + + + +

Tags

+ +
+
+ + + + + + +

RSS

+ +
+
+
+ + + + +
+ + + {%- if page.permalink != "/" -%} +
+
+ + + + +
+

Home

+
+ {%- endif -%} +
+{%- endif -%} \ No newline at end of file diff --git a/_includes/related.html b/_includes/related.html new file mode 100644 index 000000000..4d684f514 --- /dev/null +++ b/_includes/related.html @@ -0,0 +1,105 @@ + +{%- if page.content-type == "notes" -%} +{%- assign sameTagCount = 0 -%} +{%- assign minCommonTags = 1 -%} +{%- for note in site.notes -%} +{%- assign commonTags = '' -%} +{%- for tag in note.tags -%} + {%- if note.url != page.url -%} + {%- if page.tags contains tag -%} + {%- unless note.content contains page.title -%} + {%- assign sameTagCount = sameTagCount | plus: 1 -%} + {%- endunless -%} + {%- endif -%} + {%- endif -%} +{%- endfor -%} +{%- endfor -%} +{%- if sameTagCount >= minCommonTags-%} + +{%- endif -%} +{%- endif -%} + +{%- if page.content-type == "post" -%} +{%- assign sameTagCount = 0 -%} +{%- assign minCommonTags = 1 -%} +{%- for post in site.posts -%} +{%- for tag in post.tags -%} + {%- if post.url != page.url -%} + {%- if page.tags contains tag -%} + {%- unless post.content contains page.title -%} + {%- assign sameTagCount = sameTagCount | plus: 1 -%} + {%- endunless -%} + {%- endif -%} + {%- endif -%} +{%- endfor -%} +{%- endfor -%} +{%- if sameTagCount >= minCommonTags-%} + +{%- endif -%} +{%- endif -%} \ No newline at end of file diff --git a/_layouts/post.html b/_layouts/post.html new file mode 100644 index 000000000..a60de05a0 --- /dev/null +++ b/_layouts/post.html @@ -0,0 +1,63 @@ +--- +--- + + + + + + + + + + {%- if page.title -%} + + + + {%- else -%} + + + {%- endif -%} + + {{site.title}} + + + + + + + + + + + + + + +
+
+ {%- include header.html -%} + {%- include feed.html -%} + + {%- if page.content-type == "notes" or page.content-type == "post" -%} +
+

{{page.title}}

+ {%- include content.html -%} + {%- include backlinks.html -%} + {%- include related.html -%} +
+ {%- endif -%} + {%- include footer.html -%} +
+ +
+ + + {%- include contextmenu.html -%} + + diff --git a/_layouts/stylesheet.html b/_layouts/stylesheet.html new file mode 100644 index 000000000..edbc660a4 --- /dev/null +++ b/_layouts/stylesheet.html @@ -0,0 +1,4 @@ +--- +layout: none +--- +{{ content | scssify }} \ No newline at end of file diff --git a/_notes/Comparison based on accomplishment does not have a baseline.md b/_notes/Comparison based on accomplishment does not have a baseline.md new file mode 100644 index 000000000..600318c5a --- /dev/null +++ b/_notes/Comparison based on accomplishment does not have a baseline.md @@ -0,0 +1,14 @@ +--- +tags: virtue life +--- + +I would just note that you have an image of some "great X" that you are trying to live up to, when really, there is no frame of reference to standardize a measure for X. Point being you and your circumstances are completely unique[[Warren Buffet talks about the idea of maintaining an inner score card of principles to escape this girardian mimetic rat-race::rmn]]. Also, James Richardon, the poet, says this beautifully in his book "Vectors: Aphorisms and 10 Second Essays": + +{:.boxit .serif .medium} +> “He wants to know what the best is so he can be superior to everything at once by seeing that the best isn’t perfect”. + +One way to handle this would be to realize the fragility of the epistemic confidence acquired as a result of accomplishment based superiority. Socio-cultural structure like Humility can help with this a lot. It is to be noted that , and not the false pretension to decieve each other into playing the comparison and pseudo-superiority game, which would just defeat the purpose of seeing the uniqueness of circumstance. + +## References + +Warren Buffet. (Unknown). *[[The Inner Scorecard::https://fs.blog/2016/08/the-inner-scorecard/]]* \ No newline at end of file diff --git a/_notes/Cultural artefacts to improve the resonance and life expectancy of your writing.md b/_notes/Cultural artefacts to improve the resonance and life expectancy of your writing.md new file mode 100644 index 000000000..e67b31c3b --- /dev/null +++ b/_notes/Cultural artefacts to improve the resonance and life expectancy of your writing.md @@ -0,0 +1,42 @@ +--- +tags: writing +--- + +Cultural additions like one's philosophical inclinations, directed social interactions through common social artefacts, etc can add personal touch to the essays,which not only elevates the engagement but also the life expectancy of an essay. Take any essay by Orwell from [[As I Please::https://www.orwell.ru/library/articles/As_I_Please/english/]] during his time in The Tribune, or his other [[essays::https://www.orwell.ru/library/essays/index_en]]. + +**Example:** Apart from the quirky and chirpy attitude, what makes this this [[Application to New Yorker for a Job::https://fs.blog/2014/05/eudora-welty-to-the-new-yorker-the-best-job-application-ever/]] by Eudora Welty so memorable in my opinion is her use of common social artefacts like subtle mention of her background and its significance in how it relates to her being in this position right now; + +{:.boxit .serif .small-medium} +> ...I am 23 years old, six weeks on the loose in N.Y. However, I was a New Yorker for a whole year in 1930– 31 while attending advertising classes in Columbia’s School of Business. Actually I am a southerner, from Mississippi, the nation’s most backward state. Ramifications include Walter H. Page, who, unluckily for me, is no longer connected with Doubleday-Page, which is no longer Doubleday-Page, even. I have a B.A. (’ 29) from the University of Wisconsin, where I majored in English without a care in the world. For the last eighteen months I was languishing in my own office in a radio station in Jackson, Miss., writing continuities, dramas, mule feed advertisements, santa claus talks, and life insurance playlets; now I have given that up.... + +The witty use of what I like to call a socio-cultural confabulation in the form of a movie review and a relatable but madeup word that is also original in a sense. + +{:.boxit .serif .small-medium} +> ...As to what I might do for you— I have seen an untoward amount of picture galleries and 15¢ movies lately, and could review them with my old prosperous detachment, I think; in fact, I recently coined a general word for Matisse’s pictures after seeing his latest at the Marie Harriman: concubineapple. That shows you how my mind works—quick, and away from the point. I read simply voraciously, and can drum up an opinion afterwards... + +The mention of India print and subtle showcase of how she knows the struggles in the industry without any explicit mention. + +{:.boxit .serif .small-medium} +> ...Since I have bought an India print, and a large number of phonograph records from a Mr. Nussbaum who picks them up, and a Cezanne Bathers one inch long (that shows you I read e. e. cummings I hope), I am anxious to have an apartment, not to mention a small portable phonograph. How I would like to work for you! A little paragraph each morning— a little paragraph each night, if you can’t hire me from daylight to dark, although I would work like a slave. I can also draw like Mr. Thurber, in case he goes off the deep end. I have studied flower painting... + +And the final invocation of the extremely common social contruct i.e., ***the leprechaun throw.*** + +{:.boxit .serif .small-medium} +> There is no telling where I may apply, if you turn me down; I realize this will not phase you, but consider my other alternative: the U of N.C. offers for $12.00 to let me dance in Vachel Lindsay’s Congo. I congo on. I rest my case, repeating that I am a hard worker. + +This may not have been the best application in a formal sense, but the reason people go to it is probably because what it reminds them of --- the cultural nostalgia (the shared social artefact). + +Another type of common artefact is sincere immitation of great works, the sincere admiration can help with the remembrance. Related: [[Sincere imitation is authentic]] + +### Addendum + +Incorporation of common artefacts might also help with remebering and understanding it easily when you read them years later. To put it succintly, it help you [[Write so your future self can remember]] + + +## References + +Orwell, George. (1930s). _[[As I Please, The Tribune::https://www.orwell.ru/library/articles/As_I_Please/english/]]_ + +Virginia Woolf. (1921). _[[Monday and Tuesday::http://www.gutenberg.org/files/29220/29220-h/29220-h.htm]]_ + +Welty, Eudora. _[[Application to New Yorker for a Job::https://fs.blog/2014/05/eudora-welty-to-the-new-yorker-the-best-job-application-ever/]]_ diff --git a/_notes/Dark theme adoption as a function of cognitive exhaustion.md b/_notes/Dark theme adoption as a function of cognitive exhaustion.md new file mode 100644 index 000000000..e441229bf --- /dev/null +++ b/_notes/Dark theme adoption as a function of cognitive exhaustion.md @@ -0,0 +1,37 @@ +--- +tags: ux programming sleep cognition +--- + +Sensitivity to brightness can occur due to number of issues ranging from corneal issues like infections and abrasions, to dry eye, to concussions, to allergies; eg: Keratoconus, Uveitis, Keratitis, Preeclampsia. Google claims in its [[android developer guide that dark themes can improve visibility for people who have low vision and are sensititive to brightness::https://developer.android.com/guide/topics/ui/look-and-feel/darktheme]], but people I have spoken to on this topic (n≈20) had normal vision and normal range of sensitivity to light. + +Even people with mild eye issues[[Jason Harrison, UBC - People with astigmatism (approximately 50% of the population) find it harder to read white text on black than black text on white.::lsn]] seem to benefit from light theme than dark theme in most cases. And to top it all, even the researches that focus on the legibility[[Bauer, D., & Cavonius, C., R. (1980). *Improving the legibility of visual display units through contrast reversal.*
**See Below for more**.::rsn]] and aesthetics claim that dark on light is almost always better than dark on light. Every article I have read and referenced below vouch for dark on light, which I find to be true too at least in most occasions. + +How can what is relatively bad for legibility in most ocassions, bad in terms of expressibility of authorial aesthetics be a wide-spread preference? My hypothesis is this is primarily due to cognitive exhaustion like sleep deprivation, burn-out, stress etc (Extrapolating from n=1), which due to implicity conformity and [[preference falsification::https://en.wikipedia.org/wiki/Preference_falsification]] has become a normative social element. My experience has been that when I have had a bad last night sleep or stress due to office, I invariably am looking for less polarity, otherwise the dark on white seems more appealing to me both aesthetics wise and legibility wise. An extension of these could be that cognitive stress elevate the ocular stress like accomodative/refractive/convergence stress leading up to this, but I contest dark mode being the wide-spread personal/subjective preference. + +--- + +## References + +Bauer, D., & Cavonius, C., R. (1980). *Improving the legibility of visual display units through contrast reversal.* +(From: [[UX Stackexchange on theme and eye strain::https://ux.stackexchange.com/questions/53264/dark-or-white-color-theme-is-better-for-the-eyes]]) +> "...However, most studies have shown that dark characters on a light background are superior to light characters on a dark background (when the refresh rate is fairly high). For example, Bauer and Cavonius (1980) found that participants were 26% more accurate in reading text when they read it with dark characters on a light background..." + +Pabini Gabriel-Petit. (2007). *[[Applying color theory to digital displays::https://www.uxmatters.com/mt/archives/2007/01/applying-color-theory-to-digital-displays.php]]* +> "...While white text on a black background provides very high value contrast, it is less readable and causes greater eye fatigue than black text on a white background..." + +Jason Harrison – Post Doctoral Fellow, Imager Lab Manager – Sensory Perception and Interaction Research Group, University of British Columbia +>People with astigmatism (approximately 50% of the population) find it harder to read white text on black than black text on white. Part of this has to do with light levels: with a bright display (white background) the iris closes a bit more, decreasing the effect of the "deformed" lens; with a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye. + +Raluca Budiu. (2020). *[[Dark mode v Light Mode: Which is better::https://www.nngroup.com/articles/dark-mode/]]* +> "...Their results showed that light mode won across all dimensions: irrespective of age, the positive contrast polarity was better for both visual-acuity tasks and for proofreading tasks. However, the difference between light mode and dark mode in the visual-acuity task was smaller for older adults than for younger adults — meaning that, although light mode was better for older adults, too, they did not benefit from it as much as younger adults, at least in the visual-acuity task. +> +> When researchers looked at fatigue metrics, they concluded that there was no significant difference of contrast polarity on any of them (meaning that it wasn’t the case that dark mode made people more tired, or vice versa)..." + +Lauren V. Scharff, Albert J Ahumada. (2005). [[Why is light text harder to read than dark text::http://jov.arvojournals.org/article.aspx?articleid=2132608]] +> "...For paragraph readability and letter identification, responses to light text were slower and less accurate for a given contrast...." + + +Jim Sheedy, Kevin Larson. (2008). *[[Blink: The stress of Reading::http://www.eyemagazine.com/opinion/article/eye-strain]]* + + + diff --git a/_notes/Epistemic humility to avoid unintended ontological dust while writing.md b/_notes/Epistemic humility to avoid unintended ontological dust while writing.md new file mode 100644 index 000000000..3f75c863a --- /dev/null +++ b/_notes/Epistemic humility to avoid unintended ontological dust while writing.md @@ -0,0 +1,14 @@ +--- +tags: writing +curated: true +--- + + +When writing an essay *(applies to both opinion piece as well as factual ones)*, remember to clearly portray the epistemic humility[[**Epistemic Humility**: Recognizing the fragility of your epistemic confidence i.e., you (can) only know so much::rmn]], that is required of the subject in hand, in your writing. My observation has been that writing essays involve introduction of at least some amount of ontological dust that sprouts from past vague encounters or influences that you cannot remember. You cannot willingly avoid your perceptions and thoughts, but what you can definitely do is direct them to a more neutral ground by showing what you know is not all of it. + +See Related: [[Humility is the knowing of the epistemic gap]] + +## References + +Raghuveer S. (2018). *Journal Entry* + diff --git a/_notes/Everyone should have a project that they control 100% of.md b/_notes/Everyone should have a project that they control 100% of.md new file mode 100644 index 000000000..a7cef3485 --- /dev/null +++ b/_notes/Everyone should have a project that they control 100% of.md @@ -0,0 +1,15 @@ +--- +tags: project programming +--- + +To improve as a programmer, every programmer whether working independently or in an organization should atleast have one project that they control 100% of, and it doesn't matter if it is your main project or a side project. When you are working for an organization or working independently on a collaborative oss, the major chunk of your cognitive bandwidth gets allocated to those projects, which is not bad per-se, it does teach you how to work in a collaborative environment and to learn from people who are better at the concerned technology/concept than you. But the issue is more personal and emotional in when you are working on something bigger than you, it unwittingly causes a self-effacive effect i.e., you tend to devalue the emotional effects of being able to create something with complete autonomy, or crave for the autonomy and burnout as a result of the cognitive exhaustion. The sense of freedom and the liberating experience that comes out of the creative autonomy is just unmatched. + +Even a side-project in github that you consider to be trivial has an effect that only such kind of projects can provide, of having done everything yourself and without anyone putting constraints on what you can and what you can't. It allows you to experiment outside of what would be acceptable within a project you are doing with others. Something like what if I just re-wrote this entire engine on top of openGL would never (or almost never) make sense in a collaborative project, but it would make perfect sense if it is just you. + +The other obvious advantage is it makes you much more light-hearted because you know that if this doesn't work out the way I like it or good for me, then I can just go. When you are working on a personal project out of your own free will, it has a certain kind of air that a collaborative project won't. It is purely voluntary, and you can just up and leave at any time. That adds something to the mix. The responsibility of joy or stress that comes out of it suddenly becomes more tolerable as well as enjoyable. Note that I am not advocating that you drop everything that you don't like, it is just that having certain things in your life that you can control can help handle that which you can't. + +Related: [[Creativity is a quality without a name]] + +## References + +Andreas Kling. (2019). *[[Commute Talk: How to improve as a programmer::https://youtu.be/DY3Islql6xs]]* diff --git a/_notes/Humility is the knowing of the epistemic gap.md b/_notes/Humility is the knowing of the epistemic gap.md new file mode 100644 index 000000000..f8a8e736e --- /dev/null +++ b/_notes/Humility is the knowing of the epistemic gap.md @@ -0,0 +1,13 @@ +--- +tags: virtue +--- + +Humility is the knowing that you don't know a lot of things not a false pretension to deceive people into praising you. + +The contemporary view of humility seems to be to pretend as if one knew little instead of realizing it. Here fake it till you make it doesn't seem to work as, the more you pretend to be humble without realizing how little you know---not relatively, but absolutely----the ego grows by holding onto the relative superiority. + +Most of the issue of not understanding the fragility of one's epistemic confidence arises due to comparision, but more often than not [[Comparison based on accomplishment does not have a baseline]]. + +## Reference + +Taleb, Nicholas Nassim. (2015). *Antifragile: Things that gain from disorder* \ No newline at end of file diff --git a/_notes/Reading the material to completion over interest-based pickups-n-drops.md b/_notes/Reading the material to completion over interest-based pickups-n-drops.md new file mode 100644 index 000000000..bd77ca808 --- /dev/null +++ b/_notes/Reading the material to completion over interest-based pickups-n-drops.md @@ -0,0 +1,38 @@ +--- +tags: reading +curated: true +--- + + +It is becoming common these days among people to preach dropping and picking up a book based on interest, but if you seriously want to express your opinion on the material or the person who has written that, at least try reading it completely before letting your preconceived notions get better of you. + +1. [[I generally read everything through if I go past the abstract at all. I feel you can't really have an opinion if you haven't read the whole thing; if you don't read the whole thing, and you say anything about it, you are all too often perpetuating lies or half-truths
---Email Exchange with Gwern::rmn]]Seen one way you would be misleading people who trust your opinion and perpetrating a lie that might destroy the credibility of the original creator. +2. And in another way, this is just pure incompetence that is being rationalized as efficient mechanism to imbibe knowledge. Doesn't provide authority, doesn't allow for legitimacy, all it does is allows you to create an echo chamber for yourself where you can engage in a pseudo-random verbal-diarrhea with like minded people. + +An example would be this: + +{:.medium .serif} +> "Witness here how salaried physicists are dismissing @stephen_wolfram Wolfram's automata BEFORE even hearing him Just as Freeman Dyson publicly dismissed *A New Kind of Science* c. 2002; it turned out that he did not read the book. & pple who refused to read it referred to Dyson!"
—Tweet by Nassim Taleb + +That said, it should be noted that switching books based on interest is not wrong, caution must be applied while talking about topics that you yourself have not completely gone through. + +[[I'm convinced a lot of leprechauns or 'citogenesis' comes from people who don't read past the title or abstract but decide to cite it anyway as proof
---Email Exchange with Gwern::lsn]]Gwern describes this better than I ever can by comparing such second-hand partial information mongers to people who use leprechauns or 'citogenesis' based on reading the title/abstract of a paper. _(See Below)_ + +**_Note:_** Remember any resource that you pick up is someone's sweat and blood. If you do not wish to read it, always make sure not to form opinions on it, or at least not to promulgate any partial information on it. Always try to put yourself in such a situation and see how you'd have taken it — The Silver Rule. + +{:.boxit .serif .medium} +> “Do not do unto others as you would not have them do unto you.” + +Most of the time our inability to read to completion has to do with association of the act of reading instead of the book that we are read, context-switching can really here. Also [[Reading with fractalized mental pattern]] can be extremely useful in such situations. + +---------- + +## References + +Conversation with Gwern Branwen. (19-Dec-2019). _Email Exchange_ + +> ...I generally read everything through if I goes past the abstract at all. I feel you can't really have an opinion if you haven't read the whole thing; if you don't read the whole thing, and you say anything about it, you are all too often perpetuating lies or half-truths. I'm convinced a lot of leprechauns or 'citogenesis' comes from people who don't read past the title or abstract but decide to cite it anyway as proof.... + +Nicholas, Nassim Taleb. (2020). _Tweet_ + +> "Witness here how salaried physicists are dismissing @stephen_wolfram Wolfram's automata BEFORE even hearing him Just as Freeman Dyson publicly dismissed *A New Kind of Science* c. 2002; it turned out that he did not read the book. & pple who refused to read it referred to Dyson!" diff --git a/_notes/Reading with fractalized mental pattern.md b/_notes/Reading with fractalized mental pattern.md new file mode 100644 index 000000000..c27f51257 --- /dev/null +++ b/_notes/Reading with fractalized mental pattern.md @@ -0,0 +1,13 @@ +--- +tags: reading +--- + +Fractalize your mental patterns instead of reading as a whole (i.e., one single pattern, where the mood of the act is associated with the ego), that way you will be able to selectively associate yourself with a book instead of the act of reading. Most people stop reading when they are bored of reading, but by fractalizing your mental patterns you will be able to dissociate yourself from that particular book and move on to another book instead of stopping reading altogether. + +{:.serif .medium} +> "Be bored with a book, not with the act of reading"
+> —Nassim Nicholas Taleb, Antifragile + +## References + +Taleb, Nicholas Nassim. (2015). _Antifragile_. diff --git a/_notes/Serendipity-based outlook as a driver for large-scale personal projects.md b/_notes/Serendipity-based outlook as a driver for large-scale personal projects.md new file mode 100644 index 000000000..f5b223277 --- /dev/null +++ b/_notes/Serendipity-based outlook as a driver for large-scale personal projects.md @@ -0,0 +1,45 @@ +--- +tags: outlook project writing +--- + + Goal-oriented outlook for large-scale personal projects seem to be detrimental in a sense that in the absence of an enforcing agent it seems to be contributing to issues like will-power dissolution, decision fatigue, burn-out, guilt etc owing to the disincentives of self-enforced adherence to an idea/project for a long term. This is based on the idea by Kurzban et. al that overcommiting to a task, that is only expected to show its result in distant future, can dissolve will power to an extent of a burnout or complete unproductivity. And in my opinion, it not just affects the quantifiable components, it also affects your qualitative components like creative autonomy. + + After talking with few interesting people and trying out various different processes myself I have come to the conclusion that some of the strategies mentioned below can help in persistance of motivation in a long term personal project without any unnatural self-enforced adherence. I call it serendipity-based outlook because the diversion[[...'I bounce between projects to maintain my interest. (In Kurzban's theory, willpower seems to reflect opportunity cost and a built-in aversion to overcomitting to a task which hasn't delivered any large rewards yet, and switching regularly helps prevent burnout.) Since many of my pages are incremental, there's always little things to be done'...
---Email Exchange with Gwern::lsn]]. from the singular focus towards the main project seems to be allowing for some kind unexpected results and epiphanies as byproducts. + +Working Strategies: +- Multiple projects requiring varying degree of proficiency with the main one allowing the maintenance of a Flow State(i.e., not too difficult to deprive you of maintaining motivation, not too easy to be waded off as trivial, one that can challenge you while using your current level of understanding). And Constantly bouncing between them as an alternative to the main one. +- Stretches of idle days working on nothing or random things can lead to surprising results **See:** [[Nassim Taleb on this::https://m.facebook.com/nntaleb/posts/10152466038423375]] and [[Bertrand Russell on the praise of this::https://harpers.org/archive/1932/10/in-praise-of-idleness/]]. +- Frequent alternation between recreational projects like writing, blogging etc as an anti-dote to the side-effects of the main project. +- Undirected effort(such as researching) effort towards a sub-goal. Letting serendipity take over.[[...'Having no set goal in mind means you are not worried about completing anything. Also lately, I’m finding things are more interconnected than they seem. So whatever I learn contributes to a the whole than narrowing down to a slice of it'...
---Twitter Exchange with Prathyush::rsn]] +- [[Do Things That Don't Scale::http://paulgraham.com/ds.html]] + +**\****One thing that I have been observing is multiyear projects with smaller-side projects can help incorporate the Hybrid Routine Easily.* + + +--- + +## References + +Baumeister & Tierney. (2011). *[[Do You Suffer From Decision Fatigue::http://www.nytimes.com/2011/08/21/magazine/do-you-suffer-from-decision-fatigue.html?pagewanted=all]]* +> ...‘Good decision making is not a trait of the person, in the sense that it’s always there,’ Baumeister says. ‘It’s a state that fluctuates.’ His studies show that people with the best self-control are the ones who structure their lives so as to conserve willpower. They don’t schedule endless back-to-back meetings. They avoid temptations like all-you-can-eat buffets, and they establish habits that eliminate the mental effort of making choices. Instead of deciding every morning whether or not to force themselves to exercise, they set up regular appointments to work out with a friend. Instead of counting on willpower to remain robust all day, they conserve it so that it’s available for emergencies and important decisions….’Even the wisest people won’t make good choices when they’re not rested and their glucose is low,’ Baumeister points out. That’s why the truly wise don’t restructure the company at 4 p.m. They don’t make major commitments during the cocktail hour. And if a decision must be made late in the day, they know not to do it on an empty stomach. ‘The best decision makers,’ Baumeister says, ‘are the ones who know when not to trust themselves.’... + +Conversation with [[Gwern Branwen::https://twitter.com/gwern]]. (2019-Dec-19). *Email Exchange* +> ...'I bounce between projects to maintain my interest. (In Kurzban's theory, willpower seems to reflect opportunity cost and a built-in aversion to overcomitting to a task which hasn't delivered any large rewards yet, and switching regularly helps prevent burnout.) Since many of my pages are incremental, there's always little things to be done'... + +Conversation with [[Prathyush Pramod::https://twitter.com/prathyvsh]]. (2019-Nov-15th). *Twitter Exchange* +> ...'Having no set goal in mind means you are not worried about completing anything. Also lately, I’m finding things are more interconnected than they seem. So whatever I learn contributes to a the whole than narrowing down to a slice of it'... + +Taleb, Nicholas Nassim. (2015). *Antifragile* + +Taleb, Nicholas Nassim. (2018). *[[Twitter thread on routine::https://twitter.com/nntaleb/status/1029812693660848129]]* +> Routine is effortless. Most humans, alas, prefer to expend physical, never intellectual energy. Creating requires much, much more effort. + +Graham, Paul. (2013). [[Do Things That Don't Scale::http://paulgraham.com/ds.html]] + +My Journal Entry, Jan 6th 2019 +> Clearly, my brain has learned to ignore the Google calendar notifications. Initially, scheduling and completely the event/task used to feel rewarding, so I built up on that and kept adding trivial items in my calendar like gym, writing, journaling, etc. Although it worked for a couple of days, somehow there was a behavioral shift in how I was responding to the notifications, now it was not only the trivial ones that I was ignoring, the important ones too got side-tracked as a result of decision fatigue. +> +> Although the extremely important ones had this aging process of incremental prioritization owing to [[Parkinson's Law::https://en.wikipedia.org/wiki/Parkinson%27s_law]]. +> > ***Parkinson's Law:*** Work expands so as to fill the time available for its completion + + diff --git a/_posts/2020-01-01-Test-page-to-see-how-the-markdown-is-rendered.md b/_posts/2020-01-01-Test-page-to-see-how-the-markdown-is-rendered.md new file mode 100644 index 000000000..2617e6d32 --- /dev/null +++ b/_posts/2020-01-01-Test-page-to-see-how-the-markdown-is-rendered.md @@ -0,0 +1,384 @@ +--- +title: Test page to see how the raw markdown is rendered +tags: markdown +--- + +This is intended as a quick reference and showcase. + +**Table of Contents** +- [[Headers::#heading]] +- [[Emphasis::#emphasis]] +- [[Lists::#lists]] +- [[Links::#links]] +- [[Images::#images]] +- [[Code and Syntax Highlighting::#syntax]] +- [[Tables::#tables]] +- [[Blockquotes::#blockquotes]] +- [[Inline HTML::#inline]] +- [[Horizontal Rule::#hr]] +- [[Line Breaks::#br]] + +{:#heading} +### Headings +--- + +{:.regular-sans} +``` +# H1 +## H2 +### H3 +#### H4 +##### H5 +###### H6 +``` + +# H1 +## H2 +### H3 +#### H4 +##### H5 +###### H6 + +{:#emphasis} +### Emphasis +--- + +{:.regular-sans} +``` +Emphasis, aka italics, with *asterisks* or _underscores_. + +Strong emphasis, aka bold, with **asterisks** or __underscores__. + +Combined emphasis with **asterisks and _underscores_**. + +Strikethrough uses two tildes. ~~Scratch this.~~ +``` + +Emphasis, aka italics, with *asterisks* or _underscores_. + +Strong emphasis, aka bold, with **asterisks** or __underscores__. + +Combined emphasis with **asterisks and _underscores_**. + +Strikethrough uses two tildes. ~~Scratch this.~~ + +{:#lists} +### Lists + +{:.regular-sans} +``` +1. First ordered list item +...1. Ordered sublist +2. Another item +...* Unordered sublist +3. Actual numbers don't matter, just that it's a number +4. And another item. + +⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown). + +⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅ +⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅ +⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.) + +* Unordered list can use asterisks +- Or minuses ++ Or pluses +``` + +1. First ordered list item + 1. Ordered sublist +2. Another item + - Unordered sublist +3. Actual numbers don't matter, just that it's a number +4. And another item. + + You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown). + + To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅ + Note that this line is separate, but within the same paragraph.⋅⋅ + (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.) + +* Unordered list can use asterisks +- Or minuses ++ Or pluses + +{:#links} +### Links +--- + +{:.regular-sans} +``` +[I'm an inline-style link](https://www.google.com) + +[I'm an inline-style link with title](https://www.google.com "Google's Homepage") + +[I'm a reference-style link][Arbitrary case-insensitive reference text] + +[I'm a relative reference to a repository file](../blob/master/LICENSE) + +[You can use numbers for reference-style link definitions][1] + +Or leave it empty and use the [link text itself]. + +URLs and URLs in angle brackets will automatically get turned into links. +http://www.example.com or and sometimes +example.com (but not on Github, for example). + +Some text to show that the reference links can follow later. + +[arbitrary case-insensitive reference text]: https://www.mozilla.org +[1]: http://slashdot.org +[link text itself]: http://www.reddit.com +``` + +[I'm an inline-style link](https://www.google.com) + +[I'm an inline-style link with title](https://www.google.com "Google's Homepage") + +[I'm a reference-style link][Arbitrary case-insensitive reference text] + +[I'm a relative reference to a repository file](../blob/master/LICENSE) + +[You can use numbers for reference-style link definitions][1] + +Or leave it empty and use the [link text itself]. + +URLs and URLs in angle brackets will automatically get turned into links. +http://www.example.com or and sometimes +example.com (but not on Github, for example). + +Some text to show that the reference links can follow later. + +[arbitrary case-insensitive reference text]: https://www.mozilla.org +[1]: http://slashdot.org +[link text itself]: http://www.reddit.com + +{:#images} +### Images +--- + +{:.regular-sans} +``` +Here's our logo (hover to see the title text): + +Inline-style: +![alt text](/assets/img/profile.png "Logo Title Text 1") + +Reference-style: +![alt text][logo] + +[logo]: /assets/img/profile.png "Logo Title Text 2" +``` + +Here's our logo (hover to see the title text): + +Inline-style: +![alt text](/assets/img/profile.png "Logo Title Text 1") + +Reference-style: +![alt text][logo] + +[logo]: /assets/img/profile.png "Logo Title Text 2" + +{:#syntax} +### Code and Syntax Highlighting +--- + +Code blocks are part of the Markdown spec, but syntax highlighting isn't. However, many renderers -- like Github's and Markdown Here -- support syntax highlighting. Which languages are supported and how those language names should be written will vary from renderer to renderer. Markdown Here supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers); + +{:.regular-sans} +``` +Inline `code` has `back-ticks around` it. +``` + +Inline `code` has `back-ticks around` it. + +Blocks of code are either fenced by lines with three back-ticks ```, or are indented with four spaces. I recommend only using the fenced code blocks -- they're easier and only they support syntax highlighting. + +
 
+
+```javascript
+var s = "JavaScript syntax highlighting";
+alert(s);
+```
+ 
+```python
+s = "Python syntax highlighting"
+print s
+```
+ 
+```
+No language indicated, so no syntax highlighting. 
+But let's throw in a tag.
+```
+
+
+ +```javascript +var s = "JavaScript syntax highlighting"; +alert(s); +``` + +```python +s = "Python syntax highlighting" +print s +``` + +``` +No language indicated, so no syntax highlighting. +But let's throw in a tag. +``` + +{:#tables} +### Tables +--- + +Tables aren't part of the core Markdown spec, but they are part of GFM and Markdown Here supports them. They are an easy way of adding tables to your email -- a task that would otherwise require copy-pasting from another application. + +{:.regular-sans} +``` +Colons can be used to align columns. + +| Tables | Are | Cool | +| ------------- |:-------------:| -----:| +| col 3 is | right-aligned | $1600 | +| col 2 is | centered | $12 | +| zebra stripes | are neat | $1 | + +There must be at least 3 dashes separating each header cell. +The outer pipes (|) are optional, and you don't need to make the +raw Markdown line up prettily. You can also use inline Markdown. + +Markdown | Less | Pretty +--- | --- | --- +*Still* | `renders` | **nicely** +1 | 2 | 3 +``` + +Colons can be used to align columns. + +| Tables | Are | Cool | +| ------------- |:-------------:| -----:| +| col 3 is | right-aligned | $1600 | +| col 2 is | centered | $12 | +| zebra stripes | are neat | $1 | + +There must be at least 3 dashes separating each header cell. +The outer pipes (|) are optional, and you don't need to make the +raw Markdown line up prettily. You can also use inline Markdown. + +Markdown | Less | Pretty +--- | --- | --- +*Still* | `renders` | **nicely** +1 | 2 | 3 + +{:#blockquotes} +### Blockquotes +--- + +{:.regular-sans} +``` +> Blockquotes are very handy in email to emulate reply text. +> This line is part of the same quote. + +Quote break. + +> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. +``` + +> Blockquotes are very handy in email to emulate reply text. +> This line is part of the same quote. + +Quote break. + +> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. + +{:#inline} +Inline HTML +--- + +You can also use raw HTML in your Markdown, and it'll mostly work pretty well. + +{:.regular-sans} +``` +
+
Definition list
+
Is something people use sometimes.
+ +
Markdown in HTML
+
Does *not* work **very** well. Use HTML tags.
+
+``` + +You can also use raw HTML in your Markdown, and it'll mostly work pretty well. + +
+
Definition list
+
Is something people use sometimes.
+ +
Markdown in HTML
+
Does *not* work **very** well. Use HTML tags.
+
+ +{:#hr} +### Horizontal Rule +--- + + +{:.regular-sans} +``` +Three or more... + +--- + +Hyphens + +*** + +Asterisks + +___ + +Underscores +``` + +Three or more... + +--- + +Hyphens + +*** + +Asterisks + +___ + +Underscores + +{:#br} +### Line Breaks +--- + +My basic recommendation for learning how line breaks work is to experiment and discover -- hit once (i.e., insert one newline), then hit it twice (i.e., insert two newlines), see what happens. You'll soon learn to get what you want. "Markdown Toggle" is your friend. + +Here are some things to try out: + +{:.regular-sans} +``` +Here's a line for us to start with. + +This line is separated from the one above by two newlines, so it will be a *separate paragraph*. + +This line is also a separate paragraph, but... +This line is only separated by a single newline, so it's a separate line in the *same paragraph*. +``` + +Here's a line for us to start with. + +This line is separated from the one above by two newlines, so it will be a *separate paragraph*. + +This line is also a separate paragraph, but... +This line is only separated by a single newline, so it's a separate line in the *same paragraph*. + +License: CC-BY \ No newline at end of file diff --git a/_posts/2020-02-01-How-to-use-simply-jekyll-features-on-your-website.md b/_posts/2020-02-01-How-to-use-simply-jekyll-features-on-your-website.md new file mode 100644 index 000000000..2ec4064fe --- /dev/null +++ b/_posts/2020-02-01-How-to-use-simply-jekyll-features-on-your-website.md @@ -0,0 +1,178 @@ +--- +title: How to use Simply Jekyll features on your website +tags: jekyll theme +--- + +Welcome to this feature usage tour. This is going to be another short post that describes how to use all the fancy features we saw in [[Exploring the features of Simply Jekyll]]. So without further ado, let's get started. + +## The default features + +All the default jekyll markdown features are made available such that they don't cause any conflict with the custom features that we have implemented. To see how to the raw markdown gets generated, go to the [[Test page to see how the raw markdown is rendered]] + +## The Custom features + +### 1. Creating a wiki-style link + +**General Syntax** + +- **Internal links:** **[​[**​Some Link**]]** + +- **External links:** **[​[​**Some Text::https://address-to-the-website**]]** + +Anything text inside a double square bracket is considered as an internal link. The text has to be a valid title, if you provide a random text inside double square brackets, it will showup highlighted in yellow telling you that there is no essay/article/file with the mentioned title. + +Similarly, for external links all you have to do is add a double colon after the "Alt text" and enter the link to the website after the double colon as seen below. + +**Examples** + +Example of an internal link that points to a valid post or page, that is, a page with the title (not url) mentioned in the double brackets. + +> **Raw Syntax:** **[​[**​Comparison based on accomplishment does not have a baseline**]]** +> +> **Rendered Text:** [[Comparison based on accomplishment does not have a baseline]] + + +Example of an internal link that do not point to a valid post or page, that is, a page with the title (not url) mentioned in the double brackets. + +> **Raw Syntax:** **[​[**Title of a non-existent page**]]** +> +> **Rendered Text:** [[Title of a non-existent page]] + +### 2. Creating a sidenote or a marginnote + +**General Syntax** + +- **Sidenote:** **[​[**Some Text**::keyword-of-the-type-of-the-sidenote]]** + +- **Marginnote:** **[​[​**Some Text**::keyword-of-the-type-of-the-marginnote]]** + +> |Type of the sidenote/marginnote|keyword| + |:--|:--| + |Left Sidenote| `lsn` | + |Right Sidenote | `rsn` | + |Left Marginnote| `lmn` | + |Right Marginnote | `rmn` | + + +So, all you have to do is type in the keywords of the corresponding type of sidenote or marginnote after the double colon in the above syntax + +**Examples** + +Example of a sidenote to the right side of the page: + +> **Raw Syntax:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum tortor in pharetra vehicula. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. **[​[**Phasellus mollis lectus id efficitur mollis.**::rsn]]** Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis. +> +> **Rendered Text:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum tortor in pharetra vehicula. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. [[Phasellus mollis lectus id efficitur mollis.::rsn]] Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis. + +Same goes with `lsn`, `rmn`, `lmn` + +### 3. Highlighting a piece of text + +**General Syntax** + +- **[​[**​Some Link**::highlight]]** + +There is only one color right now in which it highlights, a light bluish color, but you can easily extend it to support multiple colors by tinkering with it in `content.html` file in `_includes` directory. + +**Examples** + +> **Raw Syntax:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum tortor in pharetra vehicula. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. **[​[**Phasellus mollis lectus id efficitur mollis.**::highlight]]** Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis. +> +> **Rendered Text:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum tortor in pharetra vehicula. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. [[Phasellus mollis lectus id efficitur mollis.::highlight]] Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis. + +### 4. Partial Transclusion + +Transclusion is just a natural extension of sidenote and marginnote feature. + +**General Syntax** + +- **Sidenote-transclusion:** **[​[**Some Text**::keyword-of-the-type-of-the-sidenote-transclusion]]** + +- **Marginnote-transclusion:** **[​[​**Some Text**::keyword-of-the-type-of-the-marginnote-transclusion]]** + +> |Type of the sidenote/marginnote transclusion|keyword| + |:--|:--| + |Left Sidenote Transclusion | `lsn-transclude` | + |Right Sidenote Transclusion | `rsn-transclude` | + |Left Marginnote Transclusion | `lmn-transclude` | + |Right Marginnote Transclusion | `rmn-transclude` | + + +So, all you have to do is type in the keywords of the corresponding type of sidenote or marginnote after the double colon in the above syntax + +**Examples** + +Example of a transclusion to the right side of the page: + +> **Raw Syntax:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum tortor in pharetra vehicula. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. **[​[**Comparison based on accomplishment does not have a baseline**::rmn-transclude]]** Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis. +> +> **Rendered Text:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum tortor in pharetra vehicula. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. [[Comparison based on accomplishment does not have a baseline::rmn-transclude]] Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis. + +Same goes with `rsn`, `lsn`, `lmn` + +### 5. Wrapping a text inside a box + +**General Syntax** + +- **[​[**Some Text**::wrap]]** + +**Examples** + +> **Raw Syntax:** **[​[**Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum tortor in pharetra vehicula. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis**::wrap]]**. +> +> **Rendered Text:** [[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum tortor in pharetra vehicula. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis.::wrap]] + +### 6. Flashcard + +**General Syntax** + +- **[​[**Some Text**::srs]]** + +**Examples** + +> **Raw Syntax:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. **[​[**Donec rutrum tortor in pharetra vehicula**::srs]]**. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis. +> +> **Rendered Text:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. [[Donec rutrum tortor in pharetra vehicula::srs]]. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis. + +### 7. Specific classes for changing font-type, font-size, and font-weight + +There are classes like very-small, medium-small, small, small-medium, medium, medium-large, large, very-large; that can be used to change the size of your text directly from markdown like this: + +> **Raw Syntax:** +> {:.regular-sans} +> ``` +> {:.large} +> Some text here that needs to be enlarged +> ``` +> +> **Rendered Text:** +> +> {:.large} +> Some text here that needs to be enlarged + + +Similarly there are classes like regular-sans, serif, bold, italic, oblique, bolder, etc for formatting the text. + +> **Raw Syntax:** +> +> ``` +> {:.medium .serif .oblique} +> Some text here that needs to be enlarged +> ``` +> +> **Rendered Text:** +> +> {:.medium .serif .oblique} +> Some text here that needs to be enlarged + +Other common classes are .boxit that is used to wrap the text, .disable-user-select to disallow users from being able to select a particular piece of text by selecting it, etc. There are more classes like these which you can see in the file `style.css`. Once you figure out which class to use, all you have to do is just add the class before the text you want inside a curl brace like this ​{:\​} + +### 8. Other implicit features. + +Features like backlinks, context menu, related posts, page preview are available by default as they are implemented using CSS and JS. So, you don't have to do anything other than write as you would normally to make use of those features. + +#### Note: +When you typeout square brackets, it can be frustrating to type out the entire file title everytime. At least it was for me, so I created a small VSCode plugin, the editor in which I write my essays to autocomplete the titles as soon as I type double squarebrackets. It has been pretty handy for me, if you are interested in using VSCode or already use it, you can find it here: [[Notecomplete::https://github.com/raghuveerdotnet/scratchpad/tree/master/note-complete]]. It is pretty simple to use, all you have to do is just download the note-complete folder and copy it to .vscode directory in your OS to start using it. :) + + +For setting up the theme on your website checkout [[How to setup Simply Jekyll]] \ No newline at end of file diff --git a/_posts/2020-03-01-How-to-setup-simply-jekyll.md b/_posts/2020-03-01-How-to-setup-simply-jekyll.md new file mode 100644 index 000000000..358e2582f --- /dev/null +++ b/_posts/2020-03-01-How-to-setup-simply-jekyll.md @@ -0,0 +1,124 @@ +--- +title: How to setup Simply Jekyll +tags: jekyll theme +--- + +This is going to be a super simple post about how to setup and use this theme for your own website. + +## Usage + +{:.boxit} +Q. What will it look like when I am done setting it up? + +> This is what it should look (minus the exact essays ofcourse): +> + + +Now without further ado, let's get started! + +### Setup Prerequisites + +For this tutorial, we’ll need to install a few things on your machine (you may have some of these already). Following the instructions on each website to install them. + +- [[Ruby::https://www.ruby-lang.org/]] +- [[RubyGems::https://rubygems.org/]] +- [[Git::https://git-scm.com/downloads]] + +You’ll also need to create accounts on the following services: + +- [[GitHub::https://www.github.com/join]] (to store the website) +- [[Netlify::https://app.netlify.com/signup]] (to serve the website so others can see) + +Once you are all set with the prerequisites, we can then get to the fun part of getting it to appear on your screen. Let's get started with that. + +### 1. Create a fork of the template repository + +To simplify things, I provide the template showed in the image above to get started. You can always tweak this template to your taste later. + +Visit the GitHub page for my template repository ([[raghuveerdotnet/jekyll-seamless::https://github.com/raghuveerdotnet/jekyll-seamless]]), and fork it to your account using the Fork button: + +> + +Once the forking process is complete, you should have a fork (essentially a copy) of my template in your own GitHub account. On the GitHub page for your repository, click on the green “Clone or download” button, and copy the URL: we’ll need it for the next step. + +### 2. Clone your repository locally + +Next, we want to download the files from your GitHub repository onto your local machine. To do this, replace in the command below with the URL you copied in the previous step, then execute this command: + +``` +$ git clone my-personal-website +``` + +As a reference point, this is how it looks like for me (the difference is likely just the GitHub username): + +``` +$ git clone git@github.com:raghuveerdotnet/jekyll-seamless.git my-personal-website +``` + +Then, navigate into the directory that was just created: + +``` +$ cd my-personal-website +``` + +### 3. Test out the site locally + +Sweet! You now have your repository’s source code on your machine. Within the my-personal-website directory, run the following command to install the necessary dependencies like Jekyll: + +``` +$ bundle +``` + +Once that’s done, ask Jekyll to start serving the site locally: + +``` +$ bundle exec jekyll serve +``` + +Then, open up [[http://localhost:4000::http://localhost:4000]] in your browser. + +If everything’s done correctly, you should now see the home page of your Personal Jekyll Website with Simply Jekyll Theme. 🎉 + +Keep in mind that this site is only available locally (notice the `localhost` part of the URL), so if we want it to be available on the Internet for everyone to enjoy, we need to deploy it to the Internet: we’ll use Netlify for that in the next step. + +### 4. Connect your GitHub repository to Netlify + +Netlify lets you automatically deploy your personal website on to the Internet when you update your GitHub repository. To do this, we need to connect your GitHub repository to Netlify: + +1. Log in to Netlify +2. Once logged in, click the “New site from Git” button +3. On the next page, select GitHub as the continuous deployment provider (you may need to authorize the connection, in which case, approve it) +4. On the next page, select your website repository from the list +5. On the next page, keep the default settings, and click on “Deploy site”. + +That was easy! We’re almost done. + +Wait a couple of minutes for the initial deploy to complete. + +Once that’s done, your website should be available on the Internet via a generic Netlify URL, which you can change to a custom domain later if you’d like. + +Now the cool thing is this: whenever you push an update to your GitHub repository, Netlify will automatically deploy your updates to the Internet. + +### 5. Start producing content with your Simply Jekyll based Website + +At this point, you can start updating the files on your machine (in the my-personal-website folder) to change your jekyll seamless based website to your liking: update the copy, add some notes, tweak the layout, customize the colors, etc. Once you have something you’re happy with, push your changes to your GitHub repository with the following commands: + +``` +$ git add --all +$ git commit -m 'Update content' +$ git push origin master +``` + +If that command succeeds and the rest of the tutorial was done correctly, in a couple of minutes, you should see your changes live on your Netlify website. 🚀 + +And we’re done! You now have your own Simply Jekyll based Personal Website . + +--- + +If you’re curious, take a look at [[my personal jekyll seamless based website here::https://www.raghuveer.net]]. + +This setup tutorial is inspired by [[Maxime Vaillancourt::https://maximevaillancourt.com]]'s Digital Garden Tutorial. + + + + diff --git a/_posts/2020-04-01-Exploring-the-features-of-simply-jekyll.md b/_posts/2020-04-01-Exploring-the-features-of-simply-jekyll.md new file mode 100644 index 000000000..831f5af4f --- /dev/null +++ b/_posts/2020-04-01-Exploring-the-features-of-simply-jekyll.md @@ -0,0 +1,170 @@ +--- +title: Exploring the features of Simply Jekyll +tags: jekyll theme +status: ongoing +--- + +Essentiality is the heart of any good software, and this theme is designed to ensure that I don't add things that I won't use on a daily basis or not have things that would be important for my personal usecase. It has been designed carefully to get rid of all the feature creeps, bloatwares, etc. i.e., no bootstrap, no semantic, no jquery, no nothing... + +That said, this is a ready made theme and I am making it public so that more number of people will use it and enjoy the experience of using it. So, pardon my bigotry there😅. + +As for the list of features, this website steals features from every website that I can think of, or more appropriately the design inspiration for this website is derived from multiple sources; Here is the tiny list for the curious: + +- Backlinks: Roam Research +- Transclusion: Tiddlywiki +- Sidenote: Edward Tufte, Gwern Branwen +- Stale Link Highlighting: Tiddlywiki +- Wiki-style links: Every wiki ever +- Text highlighting: Roam Research +- Page preview: Wikipedia +- Context menu: Google Docs +- Notes: Andy Matuschak's Evergreen Notes +- Color scheme: Github +- Feed like structure for home page: Twitter +- Omnisearch box at the top: Google +- Profile board: Twitter/Instagram + +Now that you know all my secrets let us waste more time into further exposing my true nature in its entirety and get started with tour: + +{:.boxit} +**Note:** This page only showcases the features. How to use these feature is mentioned in a separate article. + +### Backlinks + +Backlinks or as Roam Research calls it "Birdirectional Links" is a nifty little feature that allows not only users reading your essays/articles to encounter interesting related articles, this is something you as a author yourself will see how powerful it is once you start browsing around your website. Backlinks are basically a link on PostA indicating all the mentions of PostA on different Posts. + +The neat stuff is it won't show up with an empty box if a given post doesn't have any backlinks and if it is already included in backlinks, it won't show up in your related posts. :) + +Here is a screenshot of what mentions/backlinks will look like in a page: + + + +In the above example, it can be seen that there are three links, it means that all the three pages have a link to the page in which they are being displayed as a backlink. + +For eg. If you scroll all the way to the bottom, you will something similar i.e., you will see a link to the pages that has a link to this page. + +### Sidenotes and Marginnotes + +Of what use are such wide margins when you can't make efficient use of them. Fear not, we have a way to handle that too --- Marginnotes[[There are two types of people, those who have taste and those who don't. And anyone who has even a tiny bit of taste will never, never-ever use footnotes over sidenotes.
---Some random blogger who shall remain unamed::rmn]]. For what it's worth, when you stroll down a garden, you don't ever see a flower bloom 10 miles away from the plant do you? This is where sidenotes come in and replace their paper-era sibling ie., footnotes. If it is relevant you see it right there. (No scrolling = No cognitive strain). The entire idea is to allow users to have a pleasant time on your blog i.e., Not too distracting(offputting), not too mesmerizing, just the right amount of ornamentation to allow seamless reading experience[[I see it as an issue of managing & exposing the length. Some readers want to go as deep as you can take them, but others are frustrated if you block them from moving on. I deal with it by use of collapsible sections+abstracts, margin notes, and explicit topics in list items.
---Tweet by Gwern Branwen::lsn]]. The added advantage we have with this website is it has wide margins allowing us to use both sides for sidenotes. So we can use them for quotations, small snippets, and also for interactive/expository animations. + +The first one on the right is a marginnote and the second one on the left is a sidenote. You may ask what is the difference, it looks all the same to me. You are right to some extent, but if you look closely you will see that the one on left has a number attached to it while the one on the right doesn't. Yes, that is all the difference there is, at least [[Edward Tufte::https://edwardtufte.github.io/tufte-css/]] says. + + +### On-feed context menu + +Context menus are a great way to handle way to better way to improve user experience if they are done correctly. Given that our theme has a feed-link structure for the landing page, it leverages the opportunity and saves second time visitors who have already read the article and are only here to see other related articles or the backlinks by just simply right clicking on the feed. Thereby saving users the unnecessay time involved with clicking on a link and scrolling all the way down to see the backlinks or related articles. + +Here is a screenshot for people who are too lazy, while the rest of you can go back to the home page and try it out by right clicking on a particular feed entry: + + + + +### On-hover page preview + +Ever been to a blog or a tutorial site and seen links to other pages without any clue as to what that page is about apart from vague statements like "See Related" or "Click here for Part II". We all have had that experience, haven't we? Wouldn't it be nice to be able to take a cursory glance at the page just so that you could get a feel of it and decide quickly as to whether or not do you really want to read that post without having to click on the link and wait for the ginormous scroll of text to load? That is precisely what page previews are for. For eg, try to hover over this link: [[Serendipity Based outlook as a driver for large Scale personal projects]]. + +And yes, all of what you see is available right out of the box. No configuration, no sh*t, no shinola. + +### Transclusion + +Once I had sidenotes and page preview for my blog, transclusion[[Serendipity Based outlook as a driver for large Scale personal projects::rmn-transclude]] just felt like the natural next step to it. I mean there are less important pages that you can leave at the discretion of the readers to hover-over and take a peak, and then there are pages that you want to explicity show a glimpse of, but how do you do it? Obviously, putting a chunk of random text in the most of your post is just unacceptable UX, but then how else do you do it? You could just combine the nifty little preview thingy with your nice little sidenote thingy and let users get a glimpse of the important stuff without getting distracted. Amazing, isn't it? + +### Link Management + +Now the biggest of them all: the permalink curse. Most of us are never happy with the first title that we come up with, and when you excitingly write a new post embedding an old post---the title of which you always wanted to change but never got time to do so because you were busy creating content---it sometimes happens that you forget to update the relevant link all the associated places that you linked it in. And I think this is worst of them all in terms of an UX nightmare. + +Although we don't have a complete solution given that we are using a static site generator, I think we have a decent mechanism to atleast find the culprit links without clicking at them (a.k.a highlighting links that don't point anywhere, but ideally must be pointing to some location due to which they cannot be deleted). + +Here is an example of: +- A perfectly valid link: [[Comparison based on accomplishment does not have a baseline]] +- A bad link that does not point anywhere: [[Some non-existing title]] + +See how it highlights in yellow? I feel this is a game-changer that anyone who has a personal website should at least think of incorporating in their website given the number of deadlink issues we face. + +**Note**: This only works with local/internal links. + + +### Miscellaneous Features: Highlighting text, Primitive Flash Cards, and Some gimmicks + +#### Text Highlighting + +So you are writing an essay and you want to emphasize a particular portion of your essay to your audience that you think is just mindblowing. Tools like Medium provide such an easy way to do this while we still keep scratching our head with mark tags and p tag with a background color and what not.. Worry not, this theme allows you to easily highlight a portion of a text without any hassle. + +Here is an example of it: + +{:.boxit} +"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, [[quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident::highlight]], sunt in culpa qui officia deserunt mollit anim id est laborum." + +#### Primitive Flashcards + +Anki has been my friend, my well-wisher, my guardian, pretty much everything for the last one year of my intellectual life. I have a half-hour morning routine that I follow dilligently in going through the scheduled anki decks to strengthen my neuronal connection on a particular topic/subject. And I have been doing it consistently for almost a year now. This is an attempt at recreating the aspect of spaced-repetition to allow my brain to form interesting connections based on things I have already written. The plan is to extend it using local storage and somekind of firebase like service to provide a constant reminder to users using the supermemo algorithm, but as of now, this is where I stand --- a simple on-click card to keep the thing going until I build something better. + +Here is an example(click on the card): + +"Lorem ipsum dolor sit amet, [[consectetur adipiscing elit, sed do eiusmod tempor::srs]] incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." + +For all you know, this could be used for some interesting things if you have a tutorials website where you write posts on technical concepts. So that's that. + +#### The Gimmicks + +##### Profile Board for Main Site + +If you have ever used a social media with feeds you probably have stalked the profiles of people you find interesting, but the problem is as much as the mystery gets someone into look at your profile, it also makes them form opinions. If the profile reads author, you see their feed one way; and if it says scientist from Caltech, you see it the other. I mean as much as authority is a thing to form opinions about, it also alienates people from what could potentially have been a great relation if not for the credentiality and appearance. So, the idea with the profile board was to get done with this stuff right away so that people can enjoy the content instead of going profile hunting on your credibility and accomplishments and appearances to judge and validate their opinions by validating you. + +Here is the screenshot: + + + +##### Omnisearch bar + +This is inspired by the browsers like Chrome and Firefox where the searchbar is always placed at the top so that readers can easily search for the next thing without having to go back to the main page and scroll through dozens of articles. + +And I personally like this one because, it allows me as an author/writer to quickly jump between different posts while I am reading my articles to reference in my other articles. + +Here is a screenshot: + + + +**Note**: The searchbar is not implemented as a scrollspying widget that pins itself automatically is because I have a preference for distraction free content when reading, that is why the website provides a chevron to scroll to the top easily instead of pinning the search to the header. + +##### Feed-like structure + +I am a big fan of Aza Raskin's infinite scroll design and the fact that it provides such an easy way to engage users is just mind-blowing. That said, I must also confess that I am not a big fan of infinite scrolls on social media websites given their addictive nature. Blogs are fundamentally finite in nature. I mean even if you are a highly productive individual who writes a thousand page essay a day, you would have only written 365 essays and not all of them interesting to me. So having a feed-like structure on blogs I feel is fundamental to allowing users to engage in a more neutral way. + +And if you are still not sure of its utility, go join twitter or facebook or instagram, and comeback to read this again after a month or so. + +Untill then here is the screenshot: + + + +##### Auto-tagging WIP posts on the feed + +Sometimes you are writing something interesting but have not completed the entire thing, lets say like a series of posts on single, it can be helpful to show users right away on the feed/homepage the status so that when they click the post, their expectations are already managed. + +Here is a screenshot. + + + +##### Clickable tags + +If you go the posts on the homepage, and go inside any of them and try to click on the tags such as date or category, you will see that it takes you to a page with all the posts belonging to that tag or date. Just a nifty little feature. + + +And that is all! Thanks for scrolling all the way through to see all the features. Now if you'd like to know how to use this theme, head over to the post titled [[How to setup Simply Jekyll]]. And if you would like to see how to use these features, head over to [[How to use Simply Jekyll features on your website]] + + +P.S If you use VSCode like me for content creation and authoring, and are interested in autocompletion of titles when you write your notes. You can use a small VSCode plugin that I wrote for myself to ease up my writing process: [[Notecomplete::https://github.com/raghuveerdotnet/scratchpad/tree/master/note-complete]] + + + + + + + + + + + + + + diff --git a/_posts/2020-05-01-Introduction-to-simply-jekyll.md b/_posts/2020-05-01-Introduction-to-simply-jekyll.md new file mode 100644 index 000000000..1bc413c05 --- /dev/null +++ b/_posts/2020-05-01-Introduction-to-simply-jekyll.md @@ -0,0 +1,28 @@ +--- +title: Introduction to Simply Jekyll +tags: jekyll theme +--- + +Simply Jekyll is a highly functional jekyll-based theme that combines the best of different worlds (atleast tries to 😅). It is a minimal and distraction free theme that strives to provide maximum value all without holding back on any essential features that a user would benefit from or would desire for. This is an evolving project and is garanteed to be maintained at least for quite some time as I myself am a beneficiary of this theme and the project. + +The theme provides a rich set of features that include: +- Wiki-style markdown syntax for both internal as well as external links. +- Support for backlinks and related posts to exhort serendipitous encounters. +- Feed-specific context menu for instantly accessing the related posts and references. +- Auto stale-link management for internal links. +- Custom syntax for sidenotes and marginnotes on either side of the feed/post. +- Support for partial transclusion of posts. +- On hover page preview. +- Custom classes to style phrasing elements like quotes, callouts, etc by mentioning size, font-types, weight, box etc. +- Preliminary support for flashcards. +- Custom syntax to highlight your favorite part of the post (No, I am not talking about code syntax highlighting, which is already provided by Jekyll through Rouge). +- Support for external link identifier through icons. +- Finally, the most important of them all --- No bloatware or frameworks! + +Plus everything else that you can already do with jekyll like write something on a bunch of markdown files and convert it into a HTML file or sprinkle in some inline html can still be done alongside these features. + +Neat stuff, isn't it? To see the above mentioned features in action go check out the next post. :P + +Also see the sample post---[[(Sample Essay) Informational Hazard - Thinking Before Consuming]]---to get a feel for how an actual essay would look like. :) + + diff --git a/_posts/2020-06-01-informational-hazard-thinking-before-consuming.markdown b/_posts/2020-06-01-informational-hazard-thinking-before-consuming.markdown new file mode 100644 index 000000000..1f422ec88 --- /dev/null +++ b/_posts/2020-06-01-informational-hazard-thinking-before-consuming.markdown @@ -0,0 +1,25 @@ +--- +title: (Sample Essay) Informational Hazard - Thinking Before Consuming +tags: Practical +--- + +Information is probably the single most addictive substance, even more so than heroin in it can give you the kick even before you have consumed it, let alone waiting for the system to digest it. And what is more interesting is, the quality and the content(in chemist-speak, the composition, and the dosage) that is required to stimulate an individual varies for each individual. For some, the effect kicks in at “keeping up with Kardashians”; for some, when reading editorials in the economist or the new yorker; and for some, reading self-help claptrap disguised as psychology and science. Whichever end of the spectrum you are in there is not much difference in the effect it has on you – all it does is, it consumes your senses. + +The problem is no one puts up a disclaimer about whether or not it is fit for you to consume. You have to figure it out yourself. And what is all the more disconcerting is the fact that in doing so none of us are aware of the toll it has taken on us. Consider a simple case of skimming through a newspaper(or an online news app if you are tech-savvy), how much do you retain at the end of it? So, at what point is the trade war between the US and China right now? Oh, and what is happening in the US open? Who is the current world champion in blitz-chess? What happened to the bridge that was going to be built in the who-cares where region? And then top it with some political and investment news, you have successfully deceived yourself into believing that you have hoarded all the information you could and retained nothing. I emphasize nothing! + +If you were to explain the article to someone say a couple days later, I bet all you could recall is the headline. This is the plight of pretty much everyone right now. The toll taken on our attention span due to this continuous influx of information outweighs most of the benefits of consuming it. You travel up the ladder in wealth and status this becomes far graver – you can see people competing for information, meaning, one might not like politics at all but they are now forced to hold an opinion on the president and the current affairs just to be able to contribute to verbal diarrhea to be a part of the social group and to keep up the ostensible progress. + +Now consider this, you read a New York Times piece on Venezuela’s economic collapse that states socialist policies as the primary reason, the high it can give you is indescribable, you suddenly are anti-“this” and pro-“something else”. If someone asked you your political views, you are now nothing more than a parrot regurgitating a New York Times piece as a reason for your anti-socialism stance. Okay, I am sorry I understand that citing only one article can show one in a bad light, so maybe a bunch of them? + +**Note**: Before we go any further, I must clarify that anything that is not explicitly stated by me as my own view should not be extrapolated from the examples or the writing style. + +It is precisely because of this indolent nature of our brain that I ask you to be careful. At least in the case of occupational hazards, you are aware of the downsides, and when you do sign up you do it wittingly. But in the case of Informational Hazards, neither are we aware of the downsides nor did we sign up for it knowingly. + +Furthermore, the indispensable problem that is concomitant of free inflow of information is: [[preference falsification::https://en.wikipedia.org/wiki/Preference_falsification]]. For reasons I don’t understand, it seems like the more the information you accumulate the more are you prone to hiding your true preferences. One theory I have is you think you have to be broad-minded at the expense of your natural instincts but what I don’t understand is how come such smart people who learn to be broad-minded do not understand the cascading effects of the palatable lie. How difficult is it to realize that this lie if prolonged could become the new truth. Is that what we want? + +Our brains have this funny little characteristic or I should say side-effect of generating biases; and when you provide them their favorite fodder a.k.a information, it not only triggers the center of knowledge, it switches on the neighboring center for bias generation too. One that I can instantly recall is that of our collective bias due to the exposure to apparent progress in terms of iPads and iPhones, all of us are made to think that the field of science and technology is evolving at a rapid pace but if you dig deeper there hasn’t been any fundamental breakthrough in the area of pure sciences since the late 1970s, which marked the invention of semiconductors. Eric Weinstein, mathematician and economist speaks about this in great detail in one of his [[podcasts::https://www.youtube.com/watch?v=nM9f0W2KD5s]] on stagnation in science and technology with Peter Thiel. (Do check it out) + +It is not for me to tell what to read and what not to, but I what do know is, there is a mental threshold to what one can make sense of. I have spoken about this in detail in one of my previous essays on the [[branching effects of higher-order thinking::https://raghuveer.net/posts/branching-effects-of-higher-order-thinking/]]. Sometimes, the mental fatigue is real, and in such cases, unnecessary consumption can have undesired effects. So the next time you read about how quantum computers use superposition to surpass conventional computers in representing bits and their states in a newspaper column or a blog post, please try to explain it your kids before you convince yourself of the apparently profound knowledge that you just acquired. Oh yeah, and please don’t draw any conclusions before you explain it to them. + +This is a subtle topic, and there are a million ways to look at it. From why it is really important in this day and age to be updated to how you might not satisfy all the system requirements for the update. To be honest, most of us do not have spec required to hold the information and use it. And there are no good developers around to fix the bugs i.e., the biases and mental fatigue. I think it is good to have your own guiding heuristic as to what do you want to consume and what you don’t. Pick your sources, moderate your intake, and always ponder on it before jumping to conclusions. + diff --git a/about.md b/about.md new file mode 100644 index 000000000..8b24d791c --- /dev/null +++ b/about.md @@ -0,0 +1,70 @@ +--- +layout: post +title: About +permalink: /about/ +--- + +As of now, I am a programmer with expertise in System Programming (especially C++), who is also interested in Computer Graphics, Compiler Design, and Some Embedded Systems. [[Here::https://github.com/raghuveerdotnet]] is my coding scratchpad if you are interested. + +Over the course of time, I have developed interest in many things including cognitive science, mathematics, and philosophy; and my personal penchant is to one day create a software system that I call the CogShell (Short for the Cognitive Shell[[See my writeup on it: [here](/posts/cogshell)::rsn]]): A highly interconnnected software toolkit with all the essential tools to support thought continuity through tacit object permanance. + + +I have a podcast by the same name called the "[[Knowledge Continuum::https://open.spotify.com/show/5zR7IUdCZAtP0m4Ef8bMgs]]". + +--- + +## Reach out to me + +[[Twitter::https://twitter.com/raghuveerdotnet]] – Shoot me a dm or just tweet ***@raghuveerdotnet***. I will try to reply as soon as I can. Sadly, I am not available on any other social media sites. I am not really into professional social media circle but anyway here is my [[linkedin::https://www.linkedin.com/in/sraghuveer/]] just in case. + +Bangalore is pretty large, so I can’t promise but If you happen to be in Bangalore by chance and want to chat, drop an email([[raghu@raghuveer.net::mailto:raghu@raghuveer.net]]) and include [Coffee] in the subject line, and we can work something out. + +If you like anything about who I am or what I do, please do follow me or reach out to me. Don’t hesitate. + +--- + +## About the website + +[[***Changelog***
+\- 14-05-20 Context Menu
+\- 08-05-20 Trivial Spaced Repetition
+\- 04-05-20 Removed Theming.
+\- 04-05-20 Removed Curated Notes.
+\- 01-04-20 Curated Notes.
+\- 30-04-20 Transclusion.
+\- 26-04-20 Sidenote.
+\- 20-04-20 Wiki link.
+\- 16-04-20 Theme.
+\- 16-04-20 Avatar.
+\- 11-02-20 Related Posts.
+\- 12-10-19 Searchbar.
+::rmn]]Features: + +- **Page preview** (Move your mouse over the link): [[Test note to verify features on this website]] +- **Transclusion**: Allows you to see a partial view of the contents of the website to the right or the left of the margin. +- **Sidenotes** (Changelog you see on the left is an example of this). +- **Wiki-style link:** Usually wikis allow you to specify links using double bracket, I added it here using liquid. Also added bad-link highlighting + - Good link: [[Test note to verify features on this website]] + - Bad link: [[Title of a page that doesn't exist]] + + +Some Less know features: + +- Go back to the blog home or to the notes page, and try to right click on any of the entry. [Hint: Zettelkasten] + +- Click this card[[Memorize me so that you do well in your exams::srs]] looking thing to know how I use my notes. [Hint: SRS] + +Other Details: + +- Domain is registered with Google Domains +- The site lives on [[Github::https://github.com/raghuveerdotnet/raghuveerdotnet.github.io]]. +- This website is statically generated using Jekyll from a set of Markdown files. + + +### FAQ + +[[**First Design**::lmn]]Why is the website structured the way it is? + +{:.boxit} +> The design of the website is inspired by multiple sources with the intention of making the website more functional. Having said that, I am not a skilled front-end developer/UI-developer, so I could only come somewhat closer to my inital design that I sketched *(see left or click on this ⊕ icon beside the question above if you are on a mobile device)*, hopefully this will clear why it's structured the way it is. In fact, I had to remove the lab option because of my current inability to design it. That said, I can also safely say that I am improving based on the initial iterations of the website that can be seen here: [[Jan-22-2020::https://web.archive.org/web/20200122164405/raghuveer.net]], [[Apr-13-2020::https://web.archive.org/web/20200413193808/raghuveer.net]], [[Apr-20-2020::https://web.archive.org/web/20200420172058/raghuveer.net]] + diff --git a/assets/css/highlight.css b/assets/css/highlight.css new file mode 100644 index 000000000..a3ea47343 --- /dev/null +++ b/assets/css/highlight.css @@ -0,0 +1,58 @@ +.highlight .hll { background-color: #ffffcc } +.highlight .c { color: #aaaaaa; font-style: italic } /* Comment */ +.highlight .err { color: #F00000; background-color: #F0A0A0 } /* Error */ +.highlight .k { color: #0000aa } /* Keyword */ +.highlight .cm { color: #aaaaaa; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #4c8317 } /* Comment.Preproc */ +.highlight .c1 { color: #aaaaaa; font-style: italic } /* Comment.Single */ +.highlight .cs { color: #0000aa; font-style: italic } /* Comment.Special */ +.highlight .gd { color: #aa0000 } /* Generic.Deleted */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #aa0000 } /* Generic.Error */ +.highlight .gh { color: #000080; font-weight: 600 } /* Generic.Heading */ +.highlight .gi { color: #00aa00 } /* Generic.Inserted */ +.highlight .go { color: #888888 } /* Generic.Output */ +.highlight .gp { color: #555555 } /* Generic.Prompt */ +.highlight .gs { font-weight: 600 } /* Generic.Strong */ +.highlight .gu { color: #800080; font-weight: 600 } /* Generic.Subheading */ +.highlight .gt { color: #aa0000 } /* Generic.Traceback */ +.highlight .kc { color: #0000aa } /* Keyword.Constant */ +.highlight .kd { color: #0000aa } /* Keyword.Declaration */ +.highlight .kn { color: #0000aa } /* Keyword.Namespace */ +.highlight .kp { color: #0000aa } /* Keyword.Pseudo */ +.highlight .kr { color: #0000aa } /* Keyword.Reserved */ +.highlight .kt { color: #00aaaa } /* Keyword.Type */ +.highlight .m { color: #009999 } /* Literal.Number */ +.highlight .s { color: #aa5500 } /* Literal.String */ +.highlight .na { color: #1e90ff } /* Name.Attribute */ +.highlight .nb { color: #00aaaa } /* Name.Builtin */ +.highlight .nc { color: #00aa00; text-decoration: underline } /* Name.Class */ +.highlight .no { color: #aa0000 } /* Name.Constant */ +.highlight .nd { color: #888888 } /* Name.Decorator */ +.highlight .ni { color: #800000; font-weight: 600 } /* Name.Entity */ +.highlight .nf { color: #00aa00 } /* Name.Function */ +.highlight .nn { color: #00aaaa; text-decoration: underline } /* Name.Namespace */ +.highlight .nt { color: #1e90ff; font-weight: 600 } /* Name.Tag */ +.highlight .nv { color: #aa0000 } /* Name.Variable */ +.highlight .ow { color: #0000aa } /* Operator.Word */ +.highlight .w { color: #bbbbbb } /* Text.Whitespace */ +.highlight .mf { color: #009999 } /* Literal.Number.Float */ +.highlight .mh { color: #009999 } /* Literal.Number.Hex */ +.highlight .mi { color: #009999 } /* Literal.Number.Integer */ +.highlight .mo { color: #009999 } /* Literal.Number.Oct */ +.highlight .sb { color: #aa5500 } /* Literal.String.Backtick */ +.highlight .sc { color: #aa5500 } /* Literal.String.Char */ +.highlight .sd { color: #aa5500 } /* Literal.String.Doc */ +.highlight .s2 { color: #aa5500 } /* Literal.String.Double */ +.highlight .se { color: #aa5500 } /* Literal.String.Escape */ +.highlight .sh { color: #aa5500 } /* Literal.String.Heredoc */ +.highlight .si { color: #aa5500 } /* Literal.String.Interpol */ +.highlight .sx { color: #aa5500 } /* Literal.String.Other */ +.highlight .sr { color: #009999 } /* Literal.String.Regex */ +.highlight .s1 { color: #aa5500 } /* Literal.String.Single */ +.highlight .ss { color: #0000aa } /* Literal.String.Symbol */ +.highlight .bp { color: #00aaaa } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #aa0000 } /* Name.Variable.Class */ +.highlight .vg { color: #aa0000 } /* Name.Variable.Global */ +.highlight .vi { color: #aa0000 } /* Name.Variable.Instance */ +.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ diff --git a/assets/css/ie-target.css b/assets/css/ie-target.css new file mode 100644 index 000000000..9285a367a --- /dev/null +++ b/assets/css/ie-target.css @@ -0,0 +1,29 @@ +--- +--- + + +.userboard, +.avatar, +.searchbar, +.menu, +.related { + display: none !important; +} + +#scroll-head, +#disqus_thread { + display: none !important; +} +.sn-right, +.mn-right { + margin-right: -30%; + width: 25%; +} +.sn-left, +.mn-left { + margin-left: -30%; + width: 25%; +} +.box { + border: none !important; +} \ No newline at end of file diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 000000000..0d33c75c6 --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,1393 @@ +--- +layout: stylesheet +--- + +/****************************************************** + * PREDEFINE TAGS CSS * +*******************************************************/ + +@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap'); +@import "/assets/css/highlight.css"; +/* Containers: Body, Container, Box, Main, Header, Content */ + +html { + scroll-behavior: smooth; +} + +body { + counter-reset: sidenote-counter; +} + +.container { + display: flex; + position: relative; + flex-direction: column; + justify-content: center; + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + align-items: center; + max-width: 1100px; + margin-right: auto; + margin-left: auto; +} + +.box { + border-left: 1px solid #f7f7f7; + border-right: 1px solid #f7f7f7; + border-bottom: 1px solid #f7f7f7; + width: 60%; + position: absolute; + top: 0px; +} + +header { + display: flex; + flex-direction: column; +} + +main { + min-height: 300px; + margin-left: 20px; + padding-right: 10px; +} + + +/* Phrasing Style: H1, H2, H3, H4, H5, H6, P, A, UL, LI */ + +h1 { + font-size: 29px; +} + +h2 { + font-size: 25px; +} + +h3 { + font-size: 22px; +} + +h4 { + font-size: 19px; +} + +h5 { + font-size: 16px; +} + +h6 { + font-size: 13px; +} + +h1, h2, h3, h4, h5, h6 { + color: #555555; + font-family: Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; +} + +a, p, ul, li, ol, table, span, blockquote { + color: #555555; + font-family: 'IBM Plex Sans', Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + font-size: 16px; /* Let's set the font-size to something old-man friendly */ +} + +p a, +ul a, +li a, +td a, +th a, +h1 a, +h2 a, +h3 a, +h4 a, +h5 a, +h6 a, +span a, +div a, +ol a, +blockquote a, +cite a { + font-size: inherit; + font-family: inherit; + color: inherit; +} + +ul ul { + list-style-type: disc; +} + +b, strong { + font-weight: 600; +} + + +/* Figures, Images, Code, Blockquotes, Tables */ + +img { + max-width: 100%; + height: auto; +} + + +code { + font-family: Consolas, 'Courier New', Courier, monospace; + font-family: Consolas, 'Courier New', Courier, monospace; + display: inline-block; + overflow: auto !important; + white-space: pre-line !important; + word-wrap: break-word !important; + padding: 2px 2px 2px 2px; + vertical-align:middle; + padding: 2px 2px 2px 2px; + border: 1px solid #e9e9e9; + border-radius: 4px; +} + +.regular-sans code { + padding: 20px; + background-color: #f7f7f7; + border-radius: 5px; + border: none; + font-family: 'IBM Plex Sans', Inter, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important; +} + +.serif code { + padding: 20px; + background-color: #f7f7f7; + border-radius: 5px; + border: none; + font-family: 'EB Garamond', Georgia, serif !important; +} + + +pre code { + font-family: Consolas, 'Courier New', Courier, monospace; + display: inline-block; + overflow: auto !important; + white-space: pre-line !important; + word-wrap: break-word !important; + padding: 15px 15px 15px 15px; + vertical-align:middle; + width: 90%; + background-color: #f7f7f7; + border: 1px solid #e9e9e9; + border-radius: 5px; + color: #555; +} + + +blockquote:before { + display: none; +} + +blockquote { + padding: 10px; +} + +cite { + padding-left: 50px; + font-style: oblique; +} + +blockquote p { + font-family: inherit; + font-size: inherit; +} + +table { + width: 90%; + border-radius: 5px; + border-collapse: collapse; +} +th, td { + color: #555; + padding: 8px; + text-align: left; + font-size: 12px; +} + +td { + font-size: 14px; +} + +td a { + color: inherit; + text-decoration: none; +} + +.item-title { + color: #555; + font-weight: 600; +} + +.item-title span { + color: #aaa; + font-size: 12px; + font-weight: 400; +} + +table th { + font-weight: 600; +} + +tr { + border-radius: 5px; +} + +thead tr:nth-child(odd) { + background-color: #f7f7f7; +} + +tbody tr:nth-child(even) { + background-color: #f7f7f7; +} + +hr { + background-color: #ccc; + color: #ccc; + border: 0 none; + height: 1px; +} + +/* Blogposts: Post-heading, Post-subheading, Post-content, Related Posts*/ + +.site-heading { + border-bottom: 2px solid #f7f7f7; + flex: 0 0 20px; + align-self: stretch; + align-content: flex-end; +} + +.site-heading h4 { + color: #555555; + font-family: Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + font-stretch: ultra-condensed; + float: right; + margin-bottom: 10px; + margin-right: 20px; + font-weight: 500; +} + +.site-heading a { + text-decoration: none; +} + +.avatar { + position: absolute; + top: 40px; + left: 10px; +} + +.avatar-link { + background-color: #fff; + border-radius: 50%; + display: inline-block !important; + float: left; + margin: -35px 5px 0 8px; + max-width: 100%; + padding: 1px; + vertical-align: bottom; + font-family: Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; +} + +.avatar-img { + border: 2px solid #fff; + color: #fff; + border-radius: 50%; + box-sizing: border-box; + height: 80px; + width: 80px; +} + + +.dashboard { + border-bottom: 2px solid #f7f7f7; + width: 100%; + display: flex; + flex-direction: column; +} + +.userboard { + background-color: #f7f7f7; + width: 100%; +} + +.username { + padding-top: 15px; + padding-left: 20px; + font-size: 16px; + font-weight: 600; +} + +.username:hover { + text-decoration: underline; + color: #555; +} + +.userdesc { + padding-left: 20px; + margin-top: -13px; +} + +.userdesc p { + font-size: 15px; +} + +.link-to-notes { + padding-left: 20px; + margin-top: -14px; + padding-bottom: 8px; +} + +.link-to-notes a { + color: #4183c4; + text-decoration: none; + font-family: 'IBM Plex Sans', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + margin-left: -3px; +} + +.link-to-notes a:hover { + text-decoration: underline; +} + +.link-to-notes a, .link-to-notes svg { + vertical-align: middle; + display: inline-block; +} + +.anchor-link { + stroke: #A8B3BB !important; +} + +.main-site-subheader { + border-bottom: 1px solid #f7f7f7; + padding-left: 15px; +} + +.home, .categories, .rss, .projects { + padding-left: 5px; + padding-right: 10px; + padding-top: 5px; + padding-bottom: 5px; + vertical-align: middle; + display: inline-block; + justify-content: center; + border-right: 1px solid #f7f7f7; + color: #555555; +} + +.rss, .categories { + padding-left: 14px; + padding-right: 20px; +} + +.home { + padding-right: 14px; +} + +.home-p, .categories-p, .rss-p, .projects-p { + margin-top: auto; + margin-left: auto; + text-align: center; + font-weight: 600; + font-size: 0.7rem; + font-family: Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + color: #555555; +} + +.icon-home, .icon-category, .icon-projects, .icon-rss { + margin-top: 7px; + justify-content: center; + stroke: #555555; +} + + +.icon-home { + margin-left: 21%; +} + +.icon-category { + margin-left: 21%; +} + +.icon-projects { + margin-left: 30%; +} + +.icon-rss { + margin-left: 10%; +} + +/* Notes: Note-heading, Note-subheading, Notes-content, Related Notes */ + +.notes-page-subheader { + border-bottom: 1px solid #f7f7f7; + padding-left: 15px; +} + +.notes-page-site-heading a { + text-decoration: none; + font-family: Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + font-size: 13px; + font-stretch: ultra-condensed; + padding-left: 5px; +} + +.notes-page-main-heading { + margin-top: -25px; + padding-left: 5px; + font-family: Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; +} + + +.notes-page-heading { + color: #555555; + font-size: 15px; + font-weight: 600; + padding-top: 15px; + font-family: Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; +} + +.notes-page-heading a { + text-decoration: none; +} + +.notes-page-tagline { + color: #888888; + margin-top: -17px; + color: #888888; + font-size: 0.7rem; + font-weight: 550; +} + +.notes-page-tagline a { + text-decoration: none; + font-style: oblique; +} + +/* Utilities: Disable Selection, Kramdown TOC */ + +.disable-select { + user-select: none; /* supported by Chrome and Opera */ + -webkit-user-select: none; /* Safari */ + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ +} + +.very-small { + font-size: 12px !important; +} + +.medium-small { + font-size: 14px !important; +} + +.small { + font-size: 16px !important; +} + +.small-medium { + font-size: 18px !important; +} + +.medium { + font-size: 22px !important; +} + +.medium-large { + font-size: 25px !important; +} + +.default-color { + color: #555 !important; +} + +.default-background { + background-color: #f7f7f7 !important; +} + +.large { + font-size: 28px !important; +} + +.serif { + font-family: 'EB Garamond', Georgia, serif !important; +} + +.title-sans { + font-family: Inter, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important; +} + +.regular-sans { + font-family: 'IBM Plex Sans', Inter, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important; +} + +.bold { + font-weight: 600 !important; +} + +.very-bold { + font-weight: 800 !important; +} + +.bolder { + font-weight: 500 !important; +} + +.normal { + font-weight: 400 !important; +} + +.regular { + font-style: normal !important; +} + +.oblique { + font-style: oblique !important; +} + +.italic { + font-style: italic !important; +} + +.boxit { + + padding: 20px; + background-color: #f7f7f7; + border-radius: 5px; +} + +#boxit { + padding-left: 20px; + border-radius: 5px; +} + + +#markdown-toc::before { + content: "Contents"; + font-weight: bold; + text-decoration: underline; +} + + +#markdown-toc li { + margin-left: 1rem; + list-style: decimal; +} + +#markdown-toc { + border: 1px solid #aaa; + padding: 1.5em; + list-style: decimal; + display: inline-block; +} + +#markdown-toc a { + text-decoration: none; +} + +#markdown-toc a:hover { + text-decoration: underline; +} + + +/* Common custom components between Main Site and Notes: Searchbar, Backbutton, ContentBox, Related Posts/Notes, Copyright, */ + +.searchbar input[type="text"] { + position: relative; + padding-left: 50px; + box-sizing : border-box; + width: 100%; + height: 40px; + border: 0px; + font-family: Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; + color: #555; + font-size: 18px; + border-bottom: 1px solid #f7f7f7; + background-color: #f7f7f7; +} + +::placeholder { + color: #999; + font-size: 18px; + font-family: Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; +} +.searchbar i { + position: absolute; + vertical-align: middle; + margin-top: -2px; + padding-left: 20px; + color: #888; + padding-top: 12.5px; + z-index: 1; +} + +.searchbar input[type="text"]:focus { + border-color: #f7f7f7; + box-shadow: 0 0 8px 0 #A7D0EB; +} + +.searchbar input[type=text]:hover { + background-color: white; +} + +.searchbar input[type=text]:active, +.searchbar input[type=text]:focus { + background-color: white; + outline: none; +} + +.search_res { + padding-left: 10px; +} + +.search_res:hover { + background-color: #f4f4f4; +} + +.search_res:hover > a { + font-weight: 600; +} + +#results-container { + display: none; +} + +.back-icon { + background-color: white; + fill: currentColor; + color: #555555; + margin-top: 5px; + padding-left: 5px; + fill: currentColor; + cursor: pointer; +} + +.back-icon, +.back-p { + vertical-align: middle; + display: inline-block; +} + +.back-p { + color: #555555; + text-decoration: none; + cursor: pointer; + font-weight: 600; +} + + +.feed-title-excerpt-block { + width: 100%; + cursor: pointer; + border-top: 1px solid #f7f7f7; + border-bottom: 1px solid #f7f7f7; +} + +.feed-title-excerpt-block:hover { + background-color: #f7f7f7; +} + +.srccode { + position: absolute; + right: 10px; +} + +.srccode:hover > a > i{ + font-weight: 600; +} + +.feed-context { + position: absolute; + right: 10px; + margin-top: 17px; +} + +.feed-context-svg:hover { + background-color: #e9e9e9; + border-radius: 50%; +} + +.feed-title { + color: #555555; + margin-left: 20px; + margin-right: 50px; + font-size: 16px; + font-family: Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; +} + +.feed-excerpt{ + color: #555555; + margin-top: -12px; + margin-left: 20px !important; + margin-right: 30px; + font-family: 'IBM Plex Sans', Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + font-size: 15px; +} + +.tags { + list-style: none; + margin: 0; + overflow: hidden; + padding: 0; +} + +.tags li { + float: left; +} + +.tag { + color: #555555; + background: #f7f7f7; + text-decoration: none; + display: inline-block; + padding: 0 12px; + border-radius: 32px; + height: auto; + vertical-align: middle; + font-family: Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + font-weight: normal !important; + font-size: 13px; +} + +.content a { + color: #4183c4; + text-decoration: none; +} + +.content a:hover { + text-decoration: underline; +} + +.sn-right, +.mn-right { + float: right; + clear: right; + font-family: 'IBM Plex Sans', Inter, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important; + font-size: 14px; + margin-right: -45%; + width: 40%; + margin-top: 0; + margin-bottom: 0; + vertical-align: baseline; + position: relative; + padding-bottom: 5px; +} + +.sn-left, +.mn-left { + float: left; + clear: left; + font-family: 'IBM Plex Sans', Inter, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important; + font-size: 14px; + margin-left: -45%; + width: 40%; + margin-top: 0; + margin-bottom: 0; + vertical-align: baseline; + position: relative; + padding-bottom: 5px; +} + +.sidenote-number { + counter-increment: sidenote-counter; +} + +.sidenote-number:after, +.sn-left:before, +.sn-right:before { + font-family: 'IBM Plex Sans', Inter, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important; + position: relative; + vertical-align: baseline; +} + +.sidenote-number:after { + content: counter(sidenote-counter); + font-size: 12px; + top: -0.5rem; + left: 0.1rem; +} + +.sn-right:before, +.sn-left:before { + content: counter(sidenote-counter) " "; + font-size: 14px; + top: -0.5rem; +} + +blockquote .sn-left, +blockquote .mn-left, +li .sn-left, +li .mn-left { + float: left; + clear: left; + margin-left: -58%; + width: 40%; + text-align: left; +} + +blockquote .sn-right, +blockquote .mn-right, +li .sn-right, +li .mn-right { + float: right; + clear: right; + margin-right: -58%; + width: 40%; + text-align: left; +} + + +.tooltip { + display:inline; + position:relative; + text-align:left; +} + + +.tooltip bottom { + display: none; +} + +.tooltip .right { + min-width:300px; + top:50%; + left:100%; + margin-left:20px; + transform:translate(0, -50%); + padding:10px 20px; + color:#555; + background-color:#fff; + font-weight:normal; + font-size:13px; + border-radius:8px; + position:absolute; + z-index:99999999; + box-sizing:border-box; + box-shadow:0 1px 8px #ddd; + display:none; +} + +.tooltip:hover .right { + display:block; +} + +.tooltip .right i { + position:absolute; + top:50%; + right:100%; + margin-top:-12px; + width:12px; + height:24px; + overflow:hidden; +} + +.tooltip .right i::after { + content:''; + position:absolute; + width:12px; + height:12px; + left:0; + top:50%; + transform:translate(50%,-50%) rotate(-45deg); + background-color:#fff; + box-shadow:0 1px 8px #ddd; +} + +.right .tooltip-title { + font-size: 15px; + font-weight: 600; + display: inline-block; +} + +.right .tooltip-excerpt { + font-size: 12px; + display: inline-block; +} + +.right .tooltip-excerpt a { + font-size: 12px; +} + +input.margin-toggle { + display: none; +} + +.srs-svg { + stroke: #555; +} + +label.sidenote-number { + display: inline; +} + +label.margin-toggle:not(.sidenote-number) { + display: none; +} + +.spaced-rep { + display: none; +} + +input.srs-toggle { + display: none; +} + +label.srs-toggle { + display: inline; + cursor: pointer; +} + +.srs-toggle:checked + .spaced-rep{ + display: block !important; + left: 1rem; + clear: both; + margin: 1rem 2.5%; + vertical-align: baseline; + position: relative; + padding: 12px; + width: 240px; + background-color: #fff; + border: solid 1px #dfdfdf; + border-radius: 5px; + box-shadow: 1px 1px 15px #cfcfcf; + word-wrap:break-word; +} + +.related { + background-color: #f7f7f7; + width: 100%; + min-height: 100px; + border-radius: 10px; +} + +.related h4 { + color: #888888; + padding-top: 20px; + padding-left: 20px +} + +.related-wrapper { + column-count: 2 !important; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 10px; +} + +.related-group { + margin-left: 10px; + width: 90% !important; + height: 100%; + border-radius: 10px; + cursor: pointer; +} + +.related-group:hover { + background-color: #ededed !important; +} + +.related-group a { + text-decoration: none; +} + +.related-title { + padding-left: 10px; + padding-right: 10px; + font-size: 12px !important; + font-family: Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; + font-weight: 600; +} + +.related-excerpt:before { + content: "\""; +} + + +.related-excerpt:after { + content: "\""; +} + +.related-excerpt { + color: #555555 !important; + padding-left: 10px; + padding-right: 5px; + font-size: 12px !important; +} + +.scroll-to-top { + position: fixed; + bottom: 20px; + right: 20px; + border-radius: 30px; + background-color: transparent; + background-repeat: no-repeat; + cursor: pointer; + color: #555; + outline: none; + border: none; + overflow: hidden; + font-size: 18px; +} + +.context-menu-res { + display: none; + position: absolute; + z-index: 10; + padding: 12px 0; + width: 240px; + background-color: #fff; + border: solid 1px #dfdfdf; + border-radius: 5px; + box-shadow: 1px 1px 15px #cfcfcf; +} + +.context-menu-res li { + line-height: 0.8rem; + padding-left: 0.2rem; + padding-top: 0.3rem; + padding-bottom: 0.3rem; +} + +.context-menu-res--active { + display: block; +} + +.context-menu-res li:hover { + color: #555; + background-color: #f4f4f4; +} + +.context-menu-res li:hover > .context-menu-res__link { + font-weight: bold; +} + +.context-menu-res__link { + color: #555; + text-decoration: none; +} + + + +/* context-menu styling */ +.context-menu { + display: none; + position: absolute; + z-index: 10; + padding: 12px 0; + width: 177px; + background-color: #fff; + border: solid 1px #dfdfdf; + border-radius: 5px; + box-shadow: 1px 1px 15px #cfcfcf; + } + +.context-menu--active { + display: block; +} + +.context-menu__items { + list-style: none; + margin: 0; + padding-left: 6px; + padding-right: 6px; +} + +.context-menu__item { + display: block; + margin-bottom: 4px; +} + +.context-menu__item:last-child { + margin-bottom: 0; +} + +.context-menu__link { + display: block; + padding: 4px 12px; + color: #555; + text-decoration: none; + font-size: 12px; + font-family: Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; +} + +.context-menu__link:hover { + color: #555; + background-color: #f4f4f4; +} + +.popup { + position: absolute; + display: none; +} + +#copyright { + margin-left: 20px; +} + +#copyright-notice { + font-size: 0.7rem; + font-weight: 700; +} + +/* IE-SPECIFIC STYLING */ + + +.internet-explorer-heading { + display: none; +} + +/* Apparently IE10+ do not support conditionals. F*ck Me! */ +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + .userdesc, + .username, + .link-to-notes, + .avatar, + .related { + display: none !important; + } + + .dashboard, .site-heading { + display: inline-block; + } + + #scroll-head, + #disqus_thread { + display: none !important; + } + .sn-right, + .mn-right { + margin-right: -30%; + width: 25%; + } + .sn-left, + .mn-left { + margin-left: -30%; + width: 25%; + } + + blockquote .sn-left, + blockquote .mn-left, + li .sn-left, + li .mn-left { + float: left; + clear: left; + margin-left: -60%; + width: 24% !important; + text-align: left; +} + + blockquote .sn-right, + blockquote .mn-right, + li .sn-right, + li .mn-right { + float: right; + clear: right; + margin-right: -60%; + width: 24% !important; + text-align: left; +} + .box { + border: none !important; + } +} + +@media screen and (max-width: 1200px){ + .sn-right, +.mn-right { + margin-right: -35%; + width: 30%; +} + +.sn-left, +.mn-left { + margin-left: -35%; + width: 30%; +} +.related-group { + background-color: #ededed !important; + margin-left: 10px; + width: 90% !important; + height: 100%; + border-radius: 10px; + cursor: pointer; +} +} + +@media screen and (max-width: 1024px) { + .tooltip .right { + display: none; + } + + .tooltip .bottom { + min-width:300px; + top:40px; + left:50%; + transform:translate(-50%, 0); + padding:10px 20px; + color:#555; + background-color:#fff; + font-weight:normal; + font-size:13px; + border-radius:8px; + position:absolute; + z-index:99999999; + box-sizing:border-box; + box-shadow:0 1px 8px #ddd; + display:none; + } + + .tooltip:hover .bottom { + display:block; + } + + .tooltip .bottom i { + position:absolute; + bottom:100%; + left:50%; + margin-left:-12px; + width:24px; + height:12px; + overflow:hidden; + } + + .tooltip .bottom i::after { + content:''; + position:absolute; + width:12px; + height:12px; + left:50%; + transform:translate(-50%,50%) rotate(45deg); + background-color:#fff; + box-shadow:0 1px 8px #ddd; + } + + .bottom .tooltip-title { + font-size: 15px; + font-weight: 500; + display: inline-block; + } + + .bottom .tooltip-excerpt { + font-size: 12px; + display: inline-block; + } + + .bottom .tooltip-excerpt a { + font-size: 12px; + } +} + +/* smartphones, touchscreens */ +@media (pointer: coarse) { + .tooltip:hover .bottom, .tooltip:hover .right { + display: none; + } + .feed-context { + padding: 2px 10px 0px 10px; + height: 70px; + right: 0px; + margin-top: 15px; + } +} + + + +@media screen and (max-width: 800px){ + +.box { + width: 80%; +} + +label { + cursor: pointer; +} + +label.margin-toggle:not(.sidenote-number) { + display: inline; +} + +.sn-left, .sn-right, +.mn-left, .mn-right { + display: none; +} + +.margin-toggle:checked + .sn-right, +.margin-toggle:checked + .sn-left, +.margin-toggle:checked + .mn-left, +.margin-toggle:checked + .mn-right { + display: block; + float: left; + left: 1rem; + clear: both; + width: 95%; + margin: 1rem 2.5%; + vertical-align: baseline; + position: relative; +} + +.sketch-left, .sketch-right { + display: inline-block !important; + float: left !important; + left: 1rem !important; + clear: both !important; + width: 95% !important; + margin: 1rem 2.5% !important; + vertical-align: baseline !important; + position: relative !important; + padding-bottom: 10px; +} +} + +@media screen and (max-width: 500px){ +.box { + width: 100%; + max-width: 100% !important; + border-left: none !important; + border-right: none !important; +} +.related-wrapper { + grid-template-columns: repeat(1, 1fr); +} +} + +@media print { +.userboard, +.avatar, +.searchbar, +.menu, +.related { + display: none !important; +} + +#scroll-head, +#disqus_thread { + display: none !important; +} +.sn-right, +.mn-right { + margin-right: -30%; + width: 25%; +} +.sn-left, +.mn-left { + margin-left: -30%; + width: 25%; +} +.box { + border: none !important; +} +} + + +/* DISQUS THREAD MARGIN OVERRIDE FOR LEGIBILITY, DO NOT TOUCH */ +#disqus_thread { + margin-left: 10px; + margin-right: 10px; +} diff --git a/assets/img/backlinks.png b/assets/img/backlinks.png new file mode 100644 index 000000000..4c696c3a1 Binary files /dev/null and b/assets/img/backlinks.png differ diff --git a/assets/img/context_menu.png b/assets/img/context_menu.png new file mode 100644 index 000000000..24f330c9b Binary files /dev/null and b/assets/img/context_menu.png differ diff --git a/assets/img/context_menu_backlinks.png b/assets/img/context_menu_backlinks.png new file mode 100644 index 000000000..0e7682639 Binary files /dev/null and b/assets/img/context_menu_backlinks.png differ diff --git a/assets/img/end_result.JPG b/assets/img/end_result.JPG new file mode 100644 index 000000000..d566ba722 Binary files /dev/null and b/assets/img/end_result.JPG differ diff --git a/assets/img/favicon.png b/assets/img/favicon.png new file mode 100644 index 000000000..692f46c7b Binary files /dev/null and b/assets/img/favicon.png differ diff --git a/assets/img/feed.png b/assets/img/feed.png new file mode 100644 index 000000000..2f6588150 Binary files /dev/null and b/assets/img/feed.png differ diff --git a/assets/img/fork_button.jpg b/assets/img/fork_button.jpg new file mode 100644 index 000000000..3089188cf Binary files /dev/null and b/assets/img/fork_button.jpg differ diff --git a/assets/img/ongoing.png b/assets/img/ongoing.png new file mode 100644 index 000000000..7f6d051f0 Binary files /dev/null and b/assets/img/ongoing.png differ diff --git a/assets/img/profile.png b/assets/img/profile.png new file mode 100644 index 000000000..ec0416219 Binary files /dev/null and b/assets/img/profile.png differ diff --git a/assets/img/profile_board.png b/assets/img/profile_board.png new file mode 100644 index 000000000..1fb9e3aca Binary files /dev/null and b/assets/img/profile_board.png differ diff --git a/assets/img/search.png b/assets/img/search.png new file mode 100644 index 000000000..647091096 Binary files /dev/null and b/assets/img/search.png differ diff --git a/assets/js/contextmenu.js b/assets/js/contextmenu.js new file mode 100644 index 000000000..46d5b436a --- /dev/null +++ b/assets/js/contextmenu.js @@ -0,0 +1,385 @@ +(function() { + +"use strict"; + +/* Helper function to check if the click event happened + inside the specfied css element or outside */ +function clickInsideElement(e, className) { + var el = e.srsElement || e.target; + if (el.classList.contains(className)) { + return el; + } else { + while (el = el.parentNode) { + if (el.classList && el.classList.contains(className)) { + return el; + } + } + } + + return false; +} + +/* Helper function to get the position of the event */ +function getPosition(e) { + var posX = 0; + var posY = 0; + + if (!e) var e = window.event; + + if (e.pageX || e.pageY) { + posX = e.pageX; + posY = e.pageY; + } else if (e.clientX || e.clientY) { + posX = e.clientX + document.body.scrollLeft + + document.documentElement.scrollLeft; + posY = e.clientY + document.body.srollTop + + document.documentElement.scrollTop; + } + + return { + x: posX, + y: posY + } +} + +/* Variables related to main context menu */ +var contextMenuClassName = "context-menu"; +var contextMenuItemClassName = "context-menu__item"; +var contextMenuLinkClassName = "context-menu__link"; +var contextMenuActive = "context-menu--active"; + +/* Variables related to context menu results */ +var contextMenuResActive = "context-menu-res--active"; +var contextMenuResClassName = "context-menu-res" +var contextMenuResLinkClassName = "context-menu-res__link"; + + + +var feedItemClassName = "feed-title-excerpt-block"; +var feedItemInContext; + +var clickCoords; +var clickCoordsX; +var clickCoordsY; + +var menu = document.querySelector("#context-menu"); +var menuItems = menu.querySelectorAll(".context-menu__item"); +var menuState = 0; +var menuWidth; +var menuHeight; +var menuPosition; +var menuPositionX; +var menuPositionY; + +var resMenu = document.querySelector("#context-menu-res"); +var resMenuState = 0; +var resMenuWidth; +var resMenuHeight; + +var windowWidth; +var windowHeight; + +function positionMenu(e) { + clickCoords = getPosition(e); + clickCoordsX = clickCoords.x; + clickCoordsY = clickCoords.y; + + menuWidth = menu.offsetWidth + 4; + menuHeight = menu.offsetHeight + 4; + + windowWidth = window.innerWidth; + windowHeight = window.innerHeight; + + if ( (windowWidth - clickCoordsX) < menuWidth ) { + menu.style.left = windowWidth - menuWidth + "px"; + } else { + menu.style.left = clickCoordsX + "px"; + } + + + menu.style.top = clickCoordsY + "px"; +} + +function positionContextMenuRes() { + + resMenuWidth = resMenu.offsetWidth + 10; + resMenuHeight = resMenu.offsetHeight + 10; + + windowWidth = window.innerWidth; + windowHeight = window.innerHeight; + + if ( (windowWidth - clickCoordsX) < resMenuWidth ) { + resMenu.style.left = windowWidth - resMenuWidth + "px"; + } else { + resMenu.style.left = clickCoordsX + "px"; + } + + resMenu.style.top = clickCoordsY + "px"; + +} + + + +function init() { + contextListener(); + clickListener(); + contextResClickListener(); + keyupListener(); + resizeListener(); +} + +function resizeListener() { + window.onresize = function(e) { + toggleMenuOff(); + toggleContextResMenuOff(); + }; +} + + +async function getRelatedHTML(dataUrl) { + let response = await fetch(dataUrl); + let responseText = response.text(); + return responseText; +} + + +function showRelated(dataAction, dataUrl) { + getRelatedHTML(dataUrl) + .then(function (responseText) { + let parser = new DOMParser(); + let doc = parser.parseFromString(responseText, "text/html"); + var relatedItems; + var contextMenuResTitle; + if(dataAction == "backlinks") { + relatedItems = doc.getElementById("jekyll-seamless-backlinks"); + contextMenuResTitle = document.createTextNode("Linked References"); + } else { + relatedItems = doc.getElementById("jekyll-seamless-relatedposts"); + contextMenuResTitle = document.createTextNode("Related by Tag"); + } + var relatedItemHTMLTitle = document.createElement("p"); + relatedItemHTMLTitle.setAttribute("class", "feed-relatedItems"); + relatedItemHTMLTitle.style.fontSize = "14px"; + relatedItemHTMLTitle.style.color = "#777"; + relatedItemHTMLTitle.style.fontWeight = "600"; + relatedItemHTMLTitle.style.fontFamily = "Inter"; + var relatedItemHTML = document.createElement("ul"); + + if (relatedItems == null) { + contextMenuResTitle = document.createTextNode("Nothing Found "); + relatedItemHTMLTitle.appendChild(contextMenuResTitle); + } else { + var urls = relatedItems.getElementsByTagName("a"); + var titles = relatedItems.querySelectorAll(".related-title"); + relatedItemHTMLTitle.appendChild(contextMenuResTitle); + for (var i = 0; i < urls.length; i++) { + var newLink = document.createElement("li"); + newLink.style.listStyle = "none"; + + var newAnchor = document.createElement("a"); + newAnchor.setAttribute("href", urls[i].getAttribute("href")); + newAnchor.setAttribute("class", contextMenuResLinkClassName); + newAnchor.appendChild(document.createTextNode(titles[i].innerHTML)); + newAnchor.style.textDecoration = "none"; + newAnchor.style.fontSize = "12px"; + newAnchor.style.color = "#4183c4"; + + newLink.appendChild(newAnchor); + + relatedItemHTML.appendChild(newLink); + } + } + relatedItemHTML.prepend(relatedItemHTMLTitle); + relatedItemHTML.style.marginLeft = "-20px"; + relatedItemHTML.style.paddingRight = "10px"; + toggleContextResMenuOn(); + resMenu.appendChild(relatedItemHTML); + positionContextMenuRes(); + }).catch(function(err) { + console.warn("Oops, something went wrong.",err); + }); + +} + +/* No More Ajaxing +function showRelated(dataAction, dataUrl) { + var xhr = new XMLHttpRequest(); + xhr.open("GET", dataUrl, true); + xhr.onload = function () { + if (xhr.readyState === 4) { + if (xhr.status === 200) { + let parser = new DOMParser(); + let doc = parser.parseFromString(xhr.responseText, "text/html"); + var relatedItems; + var contextMenuResTitle; + if(dataAction == "backlinks") { + relatedItems = doc.getElementById("backlinks"); + contextMenuResTitle = document.createTextNode("Linked References"); + } else { + relatedItems = doc.getElementById("relatedposts"); + contextMenuResTitle = document.createTextNode("Related by Tag"); + } + + var relatedItemHTMLTitle = document.createElement("p"); + relatedItemHTMLTitle.setAttribute("class", "feed-relatedItems"); + relatedItemHTMLTitle.style.fontSize = "14px"; + relatedItemHTMLTitle.style.color = "#777"; + relatedItemHTMLTitle.style.fontWeight = "600"; + var relatedItemHTML = document.createElement("ul"); + + if (relatedItems == null) { + contextMenuResTitle = document.createTextNode("Nothing Found "); + relatedItemHTMLTitle.appendChild(contextMenuResTitle); + } else { + var urls = relatedItems.getElementsByTagName("a"); + var titles = relatedItems.querySelectorAll(".related-title"); + relatedItemHTMLTitle.appendChild(contextMenuResTitle); + for (var i = 0; i < urls.length; i++) { + var newLink = document.createElement("li"); + newLink.style.listStyle = "none"; + + var newAnchor = document.createElement("a"); + newAnchor.setAttribute("href", urls[i].getAttribute("href")); + newAnchor.setAttribute("class", contextMenuResLinkClassName); + newAnchor.appendChild(document.createTextNode(titles[i].innerHTML)); + newAnchor.style.textDecoration = "none"; + newAnchor.style.fontSize = "12px"; + newAnchor.style.color = "#4183c4"; + + newLink.appendChild(newAnchor); + + relatedItemHTML.appendChild(newLink); + } + } + relatedItemHTML.prepend(relatedItemHTMLTitle); + relatedItemHTML.style.marginLeft = "-20px"; + relatedItemHTML.style.paddingRight = "10px"; + toggleContextResMenuOn(); + resMenu.appendChild(relatedItemHTML); + positionContextMenuRes(); + } else { + console.error(xhr.statusText); + } + } + }; + xhr.onerror = function (e) { + console.error(xhr.statusText); + }; + xhr.send(null); +} +*/ + +function menuItemListener( link , e ) { + var dataUrl = feedItemInContext.getAttribute("data-url"); + var dataAction = link.getAttribute("data-action"); + switch(dataAction) { + case 'backlinks': + showRelated(dataAction, dataUrl); + break; + case 'related-posts': + showRelated(dataAction, dataUrl); + break; + case 'new-tab': + window.open(dataUrl, '_blank'); + break; + default: + break; + } + + /* */ + + toggleMenuOff(); + } + + +function contextListener() { + document.addEventListener( "contextmenu", function(e) { + feedItemInContext = clickInsideElement( e, feedItemClassName ); + if ( feedItemInContext ) { + e.preventDefault(); + toggleContextResMenuOff(); + toggleMenuOn(); + positionMenu(e); + } else { + feedItemInContext = null; + toggleContextResMenuOff(); + toggleMenuOff(); + } + }); +} + +function clickListener() { + document.addEventListener( "click", function(e) { + var clickeElIsLink = clickInsideElement( e, contextMenuLinkClassName ); + + if ( clickeElIsLink ) { + e.preventDefault(); + menuItemListener( clickeElIsLink, e ); + } else { + var button = e.which || e.button; + if ( button === 1 ) { + toggleMenuOff(); + } + } + }); + } + +function contextResClickListener() { + document.addEventListener( "click", function(e) { + var clickeElIsLink = clickInsideElement( e, contextMenuResLinkClassName ); + + if ( !clickeElIsLink ) { + var button = e.which || e.button; + if ( button === 1 ) { + toggleContextResMenuOff(); + } + } + }); + } + + function keyupListener() { + window.onkeyup = function(e) { + if ( e.keyCode === 27 ) { + toggleMenuOff(); + } + } + } + +function toggleMenuOn() { + if ( menuState !== 1 ) { + menuState = 1; + menu.classList.add(contextMenuActive); + } +} + +function toggleMenuOff() { + if ( menuState !== 0 ) { + menuState = 0; + menu.classList.remove(contextMenuActive); + } +} + +function toggleContextResMenuOn() { + if ( resMenuState !== 1 ) { + while (resMenu.firstChild) { + resMenu.removeChild(resMenu.lastChild); + } + resMenuState = 1; + resMenu.classList.add(contextMenuResActive); + } +} + +function toggleContextResMenuOff() { + if ( resMenuState !== 0 ) { + resMenuState = 0; + resMenu.classList.remove(contextMenuResActive); + while (resMenu.firstChild) { + resMenu.removeChild(resMenu.lastChild); + } + } +} + + +init(); + +})(); \ No newline at end of file diff --git a/assets/js/simple-jekyll-search.min.js b/assets/js/simple-jekyll-search.min.js new file mode 100644 index 000000000..b02ff256b --- /dev/null +++ b/assets/js/simple-jekyll-search.min.js @@ -0,0 +1,6 @@ +/*! + * Simple-Jekyll-Search v1.7.2 (https://github.com/christian-fei/Simple-Jekyll-Search) + * Copyright 2015-2018, Christian Fei + * Licensed under the MIT License. + */ + !function(){"use strict";var f={load:function w(t,e){var n=function r(){return window.XMLHttpRequest?new window.XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP")}();n.open("GET",t,!0),n.onreadystatechange=function i(e,n){return function(){if(4===e.readyState&&200===e.status)try{n(null,JSON.parse(e.responseText))}catch(t){n(t,null)}}}(n,e),n.send()}};(function y(t){if(!function e(t){return!!t&&"undefined"!=typeof t.required&&t.required instanceof Array}(t))throw new Error("-- OptionsValidator: required options missing");if(!(this instanceof y))return new y(t);var r=t.required;this.getRequiredOptions=function(){return r},this.validate=function(e){var n=[];return r.forEach(function(t){"undefined"==typeof e[t]&&n.push(t)}),n}});var n=function g(t,e){var n=e.length,r=t.length;if(n{title}',templateMiddleware:Function.prototype,sortMiddleware:function(){return 0},noResultsText:"No results found",limit:10,fuzzy:!1,exclude:[]},n=["searchInput","resultsContainer","json"],r=function y(e){if(!function n(t){return!!t&&"undefined"!=typeof t.required&&t.required instanceof Array}(e))throw new Error("-- OptionsValidator: required options missing");if(!(this instanceof y))return new y(e);var r=e.required;this.getRequiredOptions=function(){return r},this.validate=function(e){var n=[];return r.forEach(function(t){"undefined"==typeof e[t]&&n.push(t)}),n}}({required:n});function i(t){o.success(t),l.put(t),function e(){o.searchInput.addEventListener("keyup",function(t){(function e(t){return-1===[13,16,20,37,38,39,40,91].indexOf(t)})(t.which)&&(u(),c(t.target.value))})}()}function u(){o.resultsContainer.innerHTML=""}function a(t){o.resultsContainer.innerHTML+=t}function c(t){(function e(t){return t&&0 +.date-content a { + text-decoration: none; + color: #4183c4; +} + +.date-content a:hover { + text-decoration: underline; + color: #4183c4; +} + + +
+ {% assign postsByDay = + site.posts | group_by_exp:"post", "post.date | date: '%d-%B-%Y'" %} + + {% for day in postsByDay %} +

{{ day.name }}

+ {% for post in day.items %} +
  • {{ post.title }}
    • + {% endfor %} + {% endfor %} + +
    +
    +
    diff --git a/debug.yml b/debug.yml new file mode 100644 index 000000000..1b9781b94 --- /dev/null +++ b/debug.yml @@ -0,0 +1,4 @@ +name: Knowledge Continuum [DEBUG MODE] +debug: true +baseurl: "" +url: http://127.0.0.1:4000 \ No newline at end of file diff --git a/index.md b/index.md new file mode 100644 index 000000000..b34fdb79a --- /dev/null +++ b/index.md @@ -0,0 +1,7 @@ +--- +# Feel free to add content and custom Front Matter to this file. +# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults + +layout: post +permalink: / +--- diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 000000000..ac22c53b6 --- /dev/null +++ b/netlify.toml @@ -0,0 +1,12 @@ +# The following redirect is intended for use with most SPAs that handle +# routing internally. +[[redirects]] + from = "/*" + to = "/index.html" + status = 200 + +[[headers]] + # Define which paths this specific [[headers]] block will cover. + for = "/*" + [headers.values] + Access-Control-Allow-Origin = "*" \ No newline at end of file diff --git a/notes.md b/notes.md new file mode 100644 index 000000000..17c02c380 --- /dev/null +++ b/notes.md @@ -0,0 +1,4 @@ +--- +layout: post +permalink: /notes +--- \ No newline at end of file diff --git a/search.json b/search.json new file mode 100644 index 000000000..737be484d --- /dev/null +++ b/search.json @@ -0,0 +1,24 @@ +--- +--- + +[ + {% for post in site.posts %} + { + + "title" : "{{ post.title | strip_html | escape }}", + "url" : "{{ post.url }}", + "content" : {{ post.content | strip_html | strip_newline | strip | jsonify }} + + }, + {% endfor %} + + {% for post in site.notes %} + { + + "title" : "{{ post.title | strip_html | escape }}", + "url" : "{{ post.url }}", + "content" : {{ post.content | newline_to_br | strip_newlines | replace: '
    ', '' | strip | strip_html | strip | jsonify }} + + }{% unless forloop.last %},{% endunless %} + {% endfor %} +] \ No newline at end of file diff --git a/search_notes.json b/search_notes.json new file mode 100644 index 000000000..8ec2fd594 --- /dev/null +++ b/search_notes.json @@ -0,0 +1,16 @@ +--- +--- + +[ + {% for post in site.notes %} + { + + "title" : "{{ post.title | strip_html | escape }}", + "url" : "{{ post.url }}", + "category" : "{{post.categories | join: ', '}}", + "tags" : "{{ post.tags | join: ', ' }}", + "content" : {{ post.content | strip_html | strip_newline | strip | jsonify }} + + } {% unless forloop.last %},{% endunless %} + {% endfor %} +] \ No newline at end of file diff --git a/tags.md b/tags.md new file mode 100644 index 000000000..cef2ef10f --- /dev/null +++ b/tags.md @@ -0,0 +1,28 @@ +--- +layout: post +title: By Tags +permalink: /tags/ +--- + + + +
    + {% for tag in site.tags %} +

    {{ tag | first }}

    + {% for post in tag.last %} +
  • {{ post.title }}
    • + {% endfor %} + {% endfor %} +
    +
    +