yogsototh/her.esy.fun
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

use radio button again to fix anchor link issue

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2019-09-23 10:01:34 +02:00
parent 347fba0d34
commit 7a2fc5971c
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
5 changed files with 223 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
project.el
View file

@ -180,23 +180,23 @@
(goto-char (point-min))
(search-forward "<body>")
(insert (mapconcat 'identity
'("<input id=\"light\">"
"<input id=\"raw\">"
"<input id=\"modern\">"
"<input id=\"dark\">"
"<input id=\"darkraw\">"
"<input id=\"matrix\">"
'("<input name=\"theme\" type=\"radio\" id=\"light\">"
"<input name=\"theme\" type=\"radio\" id=\"simple\">"
"<input name=\"theme\" type=\"radio\" id=\"modern\">"
"<input name=\"theme\" type=\"radio\" id=\"dark\">"
"<input name=\"theme\" type=\"radio\" id=\"darksimple\">"
"<input name=\"theme\" type=\"radio\" id=\"matrix\">"
"<div id=\"labels\">"
"<div class=\"content\">"
"Change theme: "
"<a href=\"#light\">light</a>"
"(<a href=\"#raw\">raw</a>,"
"<a href=\"#modern\">modern</a>)"
"<label for=\"light\">light</label>"
"(<label for=\"simple\">simple</label>,"
"<label for=\"modern\">modern</label>)"
" / "
"<a href=\"#dark\">dark</a>"
"(<a href=\"#darkraw\">raw</a>,"
"<a href=\"#matrix\">matrix</a>)"
"<label for=\"dark\">dark</label>"
"(<label for=\"darksimple\">simple</label>,"
"<label for=\"matrix\">matrix</label>)"
"</div>"
"</div>"
"<div class=\"main\">")

BIN
project.el.sig
View file

Binary file not shown.

8
src/archive.org
View file

@ -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:<div class="keywords">@@@@html:<span class="keyword">@@#blog@@html:</span>@@ @@html:<span class="keyword">@@#minimalism@@html:</span>@@ @@html:<span class="keyword">@@#self-hosting@@html:</span>@@ @@html:<span class="keyword">@@#web@@html:</span>@@ @@html:<span class="keyword">@@#zen@@html:</span>@@@@html:</div>@@@@html:<div class="description">@@How I protect myself against attention grabbers and many social media anti-patterns.@@html:</div>@@
- [2019-08-18] *[[file:/Users/esposito/dev/her.esy.fun/src/posts/project-el/index.org][Autoload Script by project]]* @@html:<div class="keywords">@@@@html:<span class="keyword">@@#blog@@html:</span>@@ @@html:<span class="keyword">@@#org-mode@@html:</span>@@ @@html:<span class="keyword">@@#programming@@html:</span>@@@@html:</div>@@@@html:<div class="description">@@A script I use to load safely an eLISP file when entering a new project directory.@@html:</div>@@
- [2019-08-17] *[[file:/Users/esposito/dev/her.esy.fun/src/posts/troll-2/index.org][Troll 2]]* @@html:<div class="keywords">@@@@html:<span class="keyword">@@#movie@@html:</span>@@@@html:</div>@@@@html:<div class="description">@@I watched what may be the worse movie of all time and I still enjoyed greatly the show.@@html:</div>@@
- [2019-08-17] *[[file:/Users/esposito/dev/her.esy.fun/src/posts/new-blog.org][New Blog]]* @@html:<div class="keywords">@@@@html:<span class="keyword">@@#blog@@html:</span>@@ @@html:<span class="keyword">@@#css@@html:</span>@@ @@html:<span class="keyword">@@#org-mode@@html:</span>@@ @@html:<span class="keyword">@@#programming@@html:</span>@@ @@html:<span class="keyword">@@#web@@html:</span>@@@@html:</div>@@@@html:<div class="description">@@Meta article about how I generate this blog.@@html:</div>@@
- [2019-09-23] *[[file:/Users/yaesposi/y/her.esy.fun/src/posts/how-i-internet.org][How I Internet]]* @@html:<div class="keywords">@@@@html:<span class="keyword">@@#blog@@html:</span>@@ @@html:<span class="keyword">@@#minimalism@@html:</span>@@ @@html:<span class="keyword">@@#self-hosting@@html:</span>@@ @@html:<span class="keyword">@@#web@@html:</span>@@ @@html:<span class="keyword">@@#zen@@html:</span>@@@@html:</div>@@@@html:<div class="description">@@How I protect myself against attention grabbers and many social media anti-patterns.@@html:</div>@@
- [2019-08-18] *[[file:/Users/yaesposi/y/her.esy.fun/src/posts/project-el/index.org][Autoload Script by project]]* @@html:<div class="keywords">@@@@html:<span class="keyword">@@#blog@@html:</span>@@ @@html:<span class="keyword">@@#org-mode@@html:</span>@@ @@html:<span class="keyword">@@#programming@@html:</span>@@@@html:</div>@@@@html:<div class="description">@@A script I use to load safely an eLISP file when entering a new project directory.@@html:</div>@@
- [2019-08-17] *[[file:/Users/yaesposi/y/her.esy.fun/src/posts/troll-2/index.org][Troll 2]]* @@html:<div class="keywords">@@@@html:<span class="keyword">@@#movie@@html:</span>@@@@html:</div>@@@@html:<div class="description">@@I watched what may be the worse movie of all time and I still enjoyed greatly the show.@@html:</div>@@
- [2019-08-17] *[[file:/Users/yaesposi/y/her.esy.fun/src/posts/new-blog.org][New Blog]]* @@html:<div class="keywords">@@@@html:<span class="keyword">@@#blog@@html:</span>@@ @@html:<span class="keyword">@@#css@@html:</span>@@ @@html:<span class="keyword">@@#org-mode@@html:</span>@@ @@html:<span class="keyword">@@#programming@@html:</span>@@ @@html:<span class="keyword">@@#web@@html:</span>@@@@html:</div>@@@@html:<div class="description">@@Meta article about how I generate this blog.@@html:</div>@@

107
src/css/minimalist.css
View file

@ -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 {

198
src/posts/how-i-internet.org
View file

@ -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 <remote-url>
git remote set-url origin --push --add <another-remote-url>
#+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 <remote-url>
git remote set-url origin --push --add <another-remote-url>
#+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