")
diff --git a/project.el.sig b/project.el.sig
index feeccee..bcfda94 100644
Binary files a/project.el.sig and b/project.el.sig differ
diff --git a/src/archive.org b/src/archive.org
index 41f8e76..c5d31c9 100644
--- a/src/archive.org
+++ b/src/archive.org
@@ -2,7 +2,7 @@
#+AUTHOR: Yann Esposito
#+EMAIL: yann@esposito.host
#+DESCRIPTION: Articles
-- [2019-09-14] *[[file:/Users/esposito/dev/her.esy.fun/src/posts/how-i-internet.org][How I Internet]]* @@html:
@@@@html:@@#blog@@html:@@ @@html:@@#minimalism@@html:@@ @@html:@@#self-hosting@@html:@@ @@html:@@#web@@html:@@ @@html:@@#zen@@html:@@@@html:
@@@@html:
@@How I protect myself against attention grabbers and many social media anti-patterns.@@html:
@@
-- [2019-08-18] *[[file:/Users/esposito/dev/her.esy.fun/src/posts/project-el/index.org][Autoload Script by project]]* @@html:
@@@@html:@@#blog@@html:@@ @@html:@@#org-mode@@html:@@ @@html:@@#programming@@html:@@@@html:
@@@@html:
@@A script I use to load safely an eLISP file when entering a new project directory.@@html:
@@
-- [2019-08-17] *[[file:/Users/esposito/dev/her.esy.fun/src/posts/troll-2/index.org][Troll 2]]* @@html:
@@@@html:@@#movie@@html:@@@@html:
@@@@html:
@@I watched what may be the worse movie of all time and I still enjoyed greatly the show.@@html:
@@
-- [2019-08-17] *[[file:/Users/esposito/dev/her.esy.fun/src/posts/new-blog.org][New Blog]]* @@html:
@@@@html:@@#blog@@html:@@ @@html:@@#css@@html:@@ @@html:@@#org-mode@@html:@@ @@html:@@#programming@@html:@@ @@html:@@#web@@html:@@@@html:
@@@@html:
@@Meta article about how I generate this blog.@@html:
@@
\ No newline at end of file
+- [2019-09-23] *[[file:/Users/yaesposi/y/her.esy.fun/src/posts/how-i-internet.org][How I Internet]]* @@html:
@@@@html:@@#blog@@html:@@ @@html:@@#minimalism@@html:@@ @@html:@@#self-hosting@@html:@@ @@html:@@#web@@html:@@ @@html:@@#zen@@html:@@@@html:
@@@@html:
@@How I protect myself against attention grabbers and many social media anti-patterns.@@html:
@@
+- [2019-08-18] *[[file:/Users/yaesposi/y/her.esy.fun/src/posts/project-el/index.org][Autoload Script by project]]* @@html:
@@@@html:@@#blog@@html:@@ @@html:@@#org-mode@@html:@@ @@html:@@#programming@@html:@@@@html:
@@@@html:
@@A script I use to load safely an eLISP file when entering a new project directory.@@html:
@@
+- [2019-08-17] *[[file:/Users/yaesposi/y/her.esy.fun/src/posts/troll-2/index.org][Troll 2]]* @@html:
@@@@html:@@#movie@@html:@@@@html:
@@@@html:
@@I watched what may be the worse movie of all time and I still enjoyed greatly the show.@@html:
@@
+- [2019-08-17] *[[file:/Users/yaesposi/y/her.esy.fun/src/posts/new-blog.org][New Blog]]* @@html:
@@@@html:@@#blog@@html:@@ @@html:@@#css@@html:@@ @@html:@@#org-mode@@html:@@ @@html:@@#programming@@html:@@ @@html:@@#web@@html:@@@@html:
@@@@html:
@@Meta article about how I generate this blog.@@html:
@@
\ No newline at end of file
diff --git a/src/css/minimalist.css b/src/css/minimalist.css
index 59718de..a2d26e3 100644
--- a/src/css/minimalist.css
+++ b/src/css/minimalist.css
@@ -214,6 +214,9 @@ navigation > a {
#content:first-child {
margin-top: 0;
}
+#postamble {
+ margin-top: 1em;
+}
.timestamp-wrapper {
font-size: 12px;
}
@@ -312,6 +315,7 @@ navigation > a {
}
/* Light theme selected */
+input#light:checked ~ .main ,
input#light:target ~ .main {
--main-background: #fefaf0; /* 0.5 lighter than #fdf6e3 */
--main-foreground: var(--base01);
@@ -322,12 +326,14 @@ input#light:target ~ .main {
--border-color: var(--base2);
--todo-txt: #FFF;
}
+input#light:checked ~ #labels ,
input#light:target ~ #labels {
background: #fefaf0;
color: var(--base00);
}
/* Dark theme selected */
+input#dark:checked ~ .main ,
input#dark:target ~ .main {
--main-background: var(--base03);
--main-foreground: var(--base0);
@@ -338,13 +344,15 @@ input#dark:target ~ .main {
--border-color: var(--base02);
--todo-txt: #000;
}
+input#dark:checked ~ #labels ,
input#dark:target ~ #labels {
background: var(--base03);
color: var(--base0);
}
-/* Light raw theme selected */
-input#raw:target ~ .main {
+/* Light simple theme selected */
+input#simple:checked ~ .main ,
+input#simple:target ~ .main {
--main-background: #fff;
--main-foreground: #333;
--second-foreground: #333;
@@ -360,18 +368,34 @@ input#raw:target ~ .main {
--color-h5: #333;
--color-h6: #333;
--color-link: var(--magenta);
- font-family: monospace;
+ font-family: "Helvetica Neue";
+ font-size: 16px;
+ line-height: 1.5em;
}
-input#raw:target ~ #labels {
+input#simple:checked ~ .main .content,
+input#simple:target ~ .main .content,
+input#simple:checked ~ .main #content ,
+input#simple:target ~ .main #content {
+ margin: 0 auto;
+}
+input#simple:checked ~ #labels ,
+input#simple:target ~ #labels {
background: #fff;
color: #333;
+ font-family: "Helvetica Neue";
+ font-size: 16px;
+ line-height: 1.5em;
}
-input#raw:target ~ .main code,
-input#raw:target ~ .main pre
+input#simple:checked ~ .main code,
+input#simple:target ~ .main code,
+input#simple:checked ~ .main pre
+,
+input#simple:target ~ .main pre
{
font-family: monospace;
}
/* Light modern theme selected */
+input#modern:checked ~ .main ,
input#modern:target ~ .main {
--main-background: #fff;
--main-foreground: #444;
@@ -388,16 +412,21 @@ input#modern:target ~ .main {
line-height: 1.5em;
}
+input#modern:checked ~ #labels a ,
input#modern:target ~ #labels a {
color: #fff;
}
+input#modern:checked ~ .main .content,
input#modern:target ~ .main .content,
+input#modern:checked ~ .main #content ,
input#modern:target ~ .main #content {
margin: 0 auto;
}
+input#modern:checked ~ .main blockquote:after ,
input#modern:target ~ .main blockquote:after {
display: none;
}
+input#modern:checked ~ .main blockquote ,
input#modern:target ~ .main blockquote {
font-family: "Hoefler Text", Georgia, serif;
font-style: italic;
@@ -405,7 +434,9 @@ input#modern:target ~ .main blockquote {
line-height: 30px;
border-left: solid 10px;
}
+input#modern:checked ~ .main h1,
input#modern:target ~ .main h1,
+input#modern:checked ~ .main h2 ,
input#modern:target ~ .main h2 {
font-family: "Hoefler Text", Georgia, serif;
font-style: italic;
@@ -414,72 +445,98 @@ input#modern:target ~ .main h2 {
margin: 1em 0;
}
+input#modern:checked ~ .main h3,
input#modern:target ~ .main h3,
+input#modern:checked ~ .main h4,
input#modern:target ~ .main h4,
+input#modern:checked ~ .main h5,
input#modern:target ~ .main h5,
+input#modern:checked ~ .main h6 ,
input#modern:target ~ .main h6 {
font-weight: 200;
font-size: 1.5em;
line-height: 1.5em;
margin: 1em 0;
}
+input#modern:checked ~ .main #preamble ,
input#modern:target ~ .main #preamble {
border-bottom: solid 1px rgba(0,0,0,0.2);
}
+input#modern:checked ~ .main #postamble ,
input#modern:target ~ .main #postamble {
border-top: solid 1px rgba(0,0,0,0.2);
}
+input#modern:checked ~ .main #preamble h1 ,
input#modern:target ~ .main #preamble h1 {
font-size: 4em;
line-height: 1.5em;
margin: .5em 0;
}
+input#modern:checked ~ .main h1::before,
input#modern:target ~ .main h1::before,
+input#modern:checked ~ .main h2::before,
input#modern:target ~ .main h2::before,
+input#modern:checked ~ .main h3::before,
input#modern:target ~ .main h3::before,
+input#modern:checked ~ .main h4::before,
input#modern:target ~ .main h4::before,
+input#modern:checked ~ .main h5::before,
input#modern:target ~ .main h5::before,
+input#modern:checked ~ .main h6::before ,
input#modern:target ~ .main h6::before {
content: "";
}
+input#modern:checked ~ .main pre ,
input#modern:target ~ .main pre {
font-size: 14px;
line-height: 1em;
border-left: solid 4px var(--soft-foreground);
padding-left: 1em;
}
+input#modern:checked ~ .main pre::before,
input#modern:target ~ .main pre::before,
+input#modern:checked ~ .main pre::after ,
input#modern:target ~ .main pre::after {
content: "";
}
+input#modern:checked ~ .main #preamble,
input#modern:target ~ .main #preamble,
+input#modern:checked ~ .main #postamble ,
input#modern:target ~ .main #postamble {
background-color: var(--cyan);
padding: 1em 0;
}
+input#modern:checked ~ .main #preamble ,
input#modern:target ~ .main #preamble {
margin-bottom: 2em;
}
+input#modern:checked ~ .main #postamble ,
input#modern:target ~ .main #postamble {
margin-top: 2em;
}
+input#modern:checked ~ .main #postamble code ,
input#modern:target ~ .main #postamble code {
background-color: transparent;
}
+input#modern:checked ~ .main #preamble *,
input#modern:target ~ .main #preamble *,
+input#modern:checked ~ .main #postamble * ,
input#modern:target ~ .main #postamble * {
color: #fff;
}
+input#modern:checked ~ #labels ,
input#modern:target ~ #labels {
background: var(--cyan);
color: #fff;
}
+input#modern:checked ~ #labels .content ,
input#modern:target ~ #labels .content {
margin: 0 auto;
}
-/* Dark raw theme selected */
-input#darkraw:target ~ .main {
+/* Dark simple theme selected */
+input#darksimple:checked ~ .main ,
+input#darksimple:target ~ .main {
--main-background: #000;
--main-foreground: #ccc;
--second-foreground: #ccc;
@@ -495,18 +552,35 @@ input#darkraw:target ~ .main {
--color-h5: #ccc;
--color-h6: #ccc;
--color-link: var(--yellow);
- font-family: monospace;
+ font-family: "Helvetica Neue", sans-serif;
+ font-weight: 300;
+ font-size: 16px;
+ line-height: 1.5em;
}
-input#darkraw:target ~ #labels {
+input#darksimple:checked ~ #labels ,
+input#darksimple:target ~ #labels {
background: #000;
color: #ccc;
+ font-family: "Helvetica Neue", sans-serif;
+ font-weight: 300;
+ font-size: 16px;
+ line-height: 1.5em;
}
-input#darkraw:target ~ .main code,
-input#darkraw:target ~ .main pre {
+input#darksimple:checked ~ .main code,
+input#darksimple:target ~ .main code,
+input#darksimple:checked ~ .main pre ,
+input#darksimple:target ~ .main pre {
font-family: monospace;
}
+input#darksimple:checked ~ .main .content,
+input#darksimple:target ~ .main .content,
+input#darksimple:checked ~ .main #content ,
+input#darksimple:target ~ .main #content {
+ margin: 0 auto;
+}
/* Dark matrix theme selected */
+input#matrix:checked ~ .main ,
input#matrix:target ~ .main {
--main-background: #000;
--main-foreground: #0b0;
@@ -525,11 +599,14 @@ input#matrix:target ~ .main {
--color-link: white;
font-family: monospace;
}
+input#matrix:checked ~ #labels ,
input#matrix:target ~ #labels {
background: #000;
color: #0b0;
}
+input#matrix:checked ~ .main code,
input#matrix:target ~ .main code,
+input#matrix:checked ~ .main pre ,
input#matrix:target ~ .main pre {
font-family: monospace;
}
@@ -557,11 +634,9 @@ body > input { display:none; }
.keywords {
color: var(--second-foreground);
- float: right;
}
-.keyword:hover {
- cursor: pointer;
- color: var(--yellow);
+li .keywords {
+ float: right;
}
.main ol > li:before, ol > li:before {
diff --git a/src/posts/how-i-internet.org b/src/posts/how-i-internet.org
index 79ab60f..28dbece 100644
--- a/src/posts/how-i-internet.org
+++ b/src/posts/how-i-internet.org
@@ -1,32 +1,141 @@
#+TITLE: How I Internet
-#+SUBTITLE: (POSSE) Relaxing the Internet experience
+#+SUBTITLE: Self hosting other advantages
#+AUTHOR: Yann Esposito
#+EMAIL: yann@esposito.host
-#+DATE: [2019-09-14 Sat]
+#+DATE: [2019-09-23 Mon]
#+KEYWORDS: blog, self-hosting, web, zen, minimalism
#+DESCRIPTION: How I protect myself against attention grabbers and many social media anti-patterns.
#+OPTIONS: auto-id:t
#+begin_notes
-TL;DR:
+TL;DR: Self-hosting is not only about controlling your data, it also influences
+how you consume Internet for the best.
- I /POSSE[fn:posse]/; Publish Own Site, Syndicate Elsewhere:
+ I own my data I self host my blog, notes, my repositories, my bookmarks, etc...
+ I use espial[fn:espial] for self-hosted bookmarks and notes
+ I use note-red[fn:node-red] to publish my blogs, bookmarks and notes to
twitter, sync bookmarks with pinboard[fn:pinboard]
-- read Digital Minimalism[fn:dm]
-- Control notifications
-- Control real-time interactions
+- Enhance not only publishing experience but consumption of Internet
+ + read Digital Minimalism[fn:dm]
+ + Control notifications
+ + Control real-time interactions
#+end_notes
+The way I and most people use Internet as changed drastically in a few years.
+It started with social networks and smartphones.
+More recently, applications started to introduce "features" targetting our
+"lower brain" or "social brain".
+It is not unusual to stay a lot longer on our smartphone than what we
+expected.
+
+One solution whould be to get rid of those applications, platform.
+But they provide a real benefit.
+Another solution is to better control our relation with them by minimizing
+our exposition to the worst features, while taking advantage of the really
+useful ones.
+
+I describe how I try to do that myself.
+It start with how I produce info, then what are the consequences on how I
+consume the Internet now.
+
[fn:posse] https://indieweb.org/POSSE
[fn:dm] http://www.calnewport.com/books/digital-minimalism/
[fn:espial] https://github.com/jonschoning/espial
[fn:node-red] https://nodered.org
[fn:pinboard] https://pinboard.in
-* Intro
+* Producing
+:PROPERTIES:
+:CUSTOM_ID: producing
+:END:
+
+This is how I produce most information.
+Mostly have a self hosted service on which I keep my data, then syndicate
+what I want on different platforms.
+
+** Articles: Self hosted blog
+:PROPERTIES:
+:CUSTOM_ID: self-hosting
+:END:
+I wrote an [[file:new-blog.org][article]] sharing the details about my currentl blog platform.
+I also describe how I intend to provide a respectful blog.
+
+Technically, this is not the simplest path, still it is really efficient.
+In the end there are a lot of solutions for generating static websites.
+
+The harder part is about self-hosting it.
+You need to buy a domain name, and configure you DNS correctly.
+
+This is not something tremendously hard, but don't expect to do that as
+easily as registering to a private service.
+
+** Code: Git Broadcast
+:PROPERTIES:
+:CUSTOM_ID: git-broadcast
+:END:
+
+Self hosting is not reserverd for my writing but also for the code I write
+on my free time projects.
+
+All my public repositories push to both on my self-hosted Gitlab instance
+and GitHub.
+That way I host my own content, while still using to my advantages the
+social feature of Github.
+
+Here is how you can configure your git repositories to push to multiple
+urls:
+
+#+begin_src
+git remote set-url origin --push --add
+git remote set-url origin --push --add
+#+end_src
+
+** Bookmarks: Espial
+:PROPERTIES:
+:CUSTOM_ID: espial
+:END:
+[[https://github.com/jonschoning/espial][espial]] is an open-source, web-based bookmarking server.
+It is a very easy to install single binary.
+This is perfect if you want to keep a lot of bookmarks some private some
+publics.
+
+** Notes: Espial
+:PROPERTIES:
+:CUSTOM_ID: notes--espial
+:END:
+
+Notes, are simply text you save, you can make them public or private. I
+tend to use it as my "micro-blogging". For the time when I just want to
+write a short remark and not a full blog post article.
+
+
+** RSS for articles, bookmarks, notes
+:PROPERTIES:
+:CUSTOM_ID: rss
+:END:
+It is important for me to provide an RSS feed.
+People should know when I update my blog.
+
+I am not fully satifisfied with the state of my curren RSS feed.
+It does not contain my full articles content, nor an eay mean to filter by
+keyword or category yet.
+
+Still this is good enough for my current usage.
+
+[[https://github.com/jonschoning/espial][espial]] is written in Haskell, and I made a few pull requests to add RSS
+feeds of my public bookmarks as well as an RSS feed for my public notes.
+
+** Syndicate Elsewhere: node-red
+:PROPERTIES:
+:CUSTOM_ID: node-red
+:END:
+[[https://nodered.org][node-red]] is a tool that make it easy to write /flows/.
+I use it to syndicate my self-hosted content to social media platforms.
+
+Each time I save a new public bookmark, a new blog post, a new note, I
+tweet it.
+* Introduction
:PROPERTIES:
:CUSTOM_ID: intro
:END:
@@ -63,7 +172,6 @@ If people react to this on some social media, I'll get a mail that will be
put in a "social" folder.
I forbid myself to constantly check this social folder.
-
I do not have any social media application on my phone.
Everything goes through my email, filtered in some folder.
I only check those notifications in my email once or two times a day.
@@ -166,80 +274,6 @@ But only email and web notifications, not desktop notifications.
So even for Github, I can take a few days to react.
-* Producing
-:PROPERTIES:
-:CUSTOM_ID: producing
-:END:
-
-Another very important aspect of Internet and the Web is the ability to
-produce an output and give it to someone else far away.
-
-For now I only have two circles, myself and fully public.
-
-I will certainly endup with strategies to put intermediate circles of
-publications in the future.
-It is good enough for now.
-
-** Self Hosting
-:PROPERTIES:
-:CUSTOM_ID: self-hosting
-:END:
-A first important step for me was to self host most of my data.
-
-I wrote an [[file:new-blog.org][article]] sharing the details about my currentl blog platform.
-I also describe how I intend to provide a respectful blog.
-
-** RSS
-:PROPERTIES:
-:CUSTOM_ID: rss
-:END:
-It was important for me to provide an RSS feed.
-So people can know when I update my blog.
-For now, I am not fully satisfied with it because my current system only
-provide links but not the full content in the RSS feed.
-
-But this is good enough for my current usage.
-
-** Git Broadcast
-:PROPERTIES:
-:CUSTOM_ID: git-broadcast
-:END:
-I configured all my public repositories to be pushed both on my self-hosted
-Gitlab instance and GitHub.
-
-That way I host my own content, while still using to my advantages the
-social feature of Github.
-
-You can configure your git repositories to push to multiple url by:
-
-#+begin_src
-git remote set-url origin --push --add
-git remote set-url origin --push --add
-#+end_src
-
-** Espial
-:PROPERTIES:
-:CUSTOM_ID: espial
-:END:
-[[https://github.com/jonschoning/espial][espial]] is an open-source, web-based bookmarking server.
-It is a very easy to install single binary.
-This is perfect if you want to self-host your bookmarks while having some publics.
-
-This tool is written in Haskell, and I made a few pull requests to add RSS
-feeds of my public bookmarks as well as an RSS feed for my public notes.
-
-Notes, are simply text you save, you can make them public or private. I
-tend to use it as my "micro-blogging". For the time when I just want to
-write a short remark and not a full blog post article.
-** node-red
-:PROPERTIES:
-:CUSTOM_ID: node-red
-:END:
-[[https://nodered.org][node-red]] is a tool that make it easy to write /flows/.
-I use it to syndicate my self-hosted content to social media platforms.
-
-Each time I save a new public bookmark, a new blog post, a new note, I
-tweet it.
* Conclusion
:PROPERTIES:
:CUSTOM_ID: conclusion