diff options
Diffstat (limited to 'users/wpcarro/website/blog')
37 files changed, 1397 insertions, 0 deletions
diff --git a/users/wpcarro/website/blog/.envrc b/users/wpcarro/website/blog/.envrc new file mode 100644 index 000000000000..a4a62da526d3 --- /dev/null +++ b/users/wpcarro/website/blog/.envrc @@ -0,0 +1,2 @@ +source_up +use_nix diff --git a/users/wpcarro/website/blog/archetypes/default.md b/users/wpcarro/website/blog/archetypes/default.md new file mode 100644 index 000000000000..00e77bd79be4 --- /dev/null +++ b/users/wpcarro/website/blog/archetypes/default.md @@ -0,0 +1,6 @@ +--- +title: "{{ replace .Name "-" " " | title }}" +date: {{ .Date }} +draft: true +--- + diff --git a/users/wpcarro/website/blog/config.toml b/users/wpcarro/website/blog/config.toml new file mode 100644 index 000000000000..a0d65815f6a1 --- /dev/null +++ b/users/wpcarro/website/blog/config.toml @@ -0,0 +1,25 @@ +baseURL = "https://blog.wpcarro.dev" +disqusShortname = "blog-wpcarro-dev" +languageCode = "en-us" +title = "blog.wpcarro.dev" +theme = "tailwind" +pygmentsCodeFences = true +pygmentsUseClasses = true + +[taxonomies] + tag = "tags" + +[permalinks] + posts = "/posts/:year/:month/:title/" + +[params] + author = "William Carroll" + description = "Loosely structured streams of consciousness" + tagline = "Loosely structured streams of consciousness" + +[languages] + [languages.en] + contentDir = "content/english" + languageCode = "en-us" + languageName = "English" + weight = 1 \ No newline at end of file diff --git a/users/wpcarro/website/blog/content/english/caffeine.md b/users/wpcarro/website/blog/content/english/caffeine.md new file mode 100644 index 000000000000..9c3dbac0f120 --- /dev/null +++ b/users/wpcarro/website/blog/content/english/caffeine.md @@ -0,0 +1,5 @@ +--- +title: "Caffeine" +date: 2020-03-11T22:50:40Z +draft: true +--- diff --git a/users/wpcarro/website/blog/content/english/cell-phone-experiment.md b/users/wpcarro/website/blog/content/english/cell-phone-experiment.md new file mode 100644 index 000000000000..550ba4865ee0 --- /dev/null +++ b/users/wpcarro/website/blog/content/english/cell-phone-experiment.md @@ -0,0 +1,280 @@ +--- +title: "Cell Phone Experiment" +date: 2020-04-02T02:02:07Z +draft: false +--- + +### TL;DR + +I will not use my cell phone during March to learn more about how much I depend +on it. + +### Explore/Exploit + +Ever since I read Charles Duhigg's book, [The Power of Habit](poh), I try to +habituate as many aspects of my life as I can. + +Making my bed every morning is an example of a habit -- so too is flossing at +night before bed. + +The *exploit* axis of the [explore/exploit tradeoff](exp-exp) endows habits with +their power. Brian Christian and Tom Griffiths explain this concept more clearly +than I can in Chapter 2 of their exceptional book, [Algorithms to Live +By](algos). + +Habits are powerful, but if I overly exploit an activity, I may settle on a +local optimum in lieu of settling on a global optimum; these are the opportunity +costs of exploiting (i.e. habits) versus exploring (i.e. spontaneity). + +But what if it was possible to habituate exploration? + +### Monthly challenges + +Every month since October 2018, I challenge myself to try something new. In the +past, monthly challenges have been things like: +- sign up and take Brazilian Jiu Jitsu classes +- buy a guitar and learn [Freight Train](https://www.youtube.com/watch?v=IUK8emiWabU) +- study Italian +- learn a handstand + +Typically for an activity to qualify as a challenge, I must spend *at least +fifteen minutes* working on it *at least five days* each week. + +This month (i.e. March) I'm challenging myself to avoid using my cell phone. + +My parents gave me a cell phone when when I was a freshman in High School; I was +14 years old. I am now 28, so I have been using a cell phone semi-daily for over +a decade. + +While I enjoy the convenience that my cell phone provides me, I am curious to +suspend my usage to more clearly understand how much I depend on it... + +### April + +Now it is early April, and I completed March's challenge. So how was it? + +Below I outline the parts of using a cell phone that I missed and the parts that +I surprisingly did not miss. I will also mention the two times that I used my +cell phone and why. + +The first three things that I missed all relate to time. + +#### Timekeeping + +On the first day I realized that unless I was near a computer, I did not know +what time it was. + +I exclusively use my cell phone as my watch; I do not wear a watch. To adapt, I +started looking for clocks around my office and while I was taking public +transportation. Thankfully London posts the current time on the digital train +schedules. This oriented me while I was traveling, which was also when I needed +to know the time the most. + +Most of the month, however, I never precisely knew what time it was. + +#### Alarm clocks + +While I anticipated living without an alarm clock prior to the experiment, I +decided against buying a substitute. Prior to this month, I theorized that +morning alarms probably disrupt the quality of my sleep. If I'm tired, shouldn't +I keep sleeping? + +As the month progressed and my 24 hour day morphed into a 25 hour day, I learned +that I would prefer waking up at a set time every day and synchronize my +schedule with the rest of my timezone. + +I am still unsure if alarm clocks are helpful in the long-term. I would have +slept with the curtains drawn to allow the morning sun to wake me +up. Unfortunately, I live on the ground floor nearby a brightly shining street +lamp that spills into my bedroom. + +If I lived somewhere more remote (perhaps even a suburb would do) I would like +to repeat an experiment where I live for a month without an alarm clock. + +For now, I must return to the Temple of Chronology and supplicate until Father +Time restores my sanity. + +#### Timers + +Using timers motivates me to do a bunch of short tasks like cleaning my flat for +fifteen minutes, stretching, or reading before bed. Thankfully, I already owned +a physical timer that I keep in my kitchen. This replaced the timer on my phone +without disrupting my routine. + +#### Maps + +Speaking of being disoriented, what about living without maps software? On the +few occasions where I traveled somewhere that was unfamiliar to me, I had to +memorize the directions from my computer before I departed. + +At least I didn't need to visit gas stations or museums to buy trifold tourist +maps... + +I once left my office mistakenly assuming that I would download the directions +to my destination while commuting. As I awaited the office elevator, I realized +that I had no clue where I was heading. + +Thankfully I wasn't far from the safety, comfort, and familiarity of my desktop +computer -- with its fatty WiFi connection. In no time I was studying Google +Maps in my web browser and memorizing the directions. + +Overall this was hardly an inconvenience, and I think I even enjoyed +stress-testing my memory: a job that I so often outsource to hardware. + +#### Rendezvouses + +A couple of times I met friends in various parts of the city. Organizing these +particular rendezvouses was a novel (read: anachronistic) experience. For all +you young whippersnappers reading, take out your stone tablets and chisels. I'm +going to explain how this works: + +First I would tell my friends where and when to meet me. I emphasized that I +would be quite helpless to any changes they might make to the plans once I began +commuting, which made the commitments unusually more binding. + +On one occasion my friend -- who is characteristically prompt, and even chides +me for when I'm late -- was twenty minutes late for our engagement. My friend is +German, so I figured I should do my civic duty of alerting the German embassy +that my friend had broken German code, is obscenely late, and should therefore +hand-in his passport and renounce his citizenship. After awhile my conscience +advised me to reconsider. + +It was fortunate for both of us that I did not fully understand how late he was. +Remember: I didn't know what time it was. + +I decided this would be a useful opportunity to test my patience, so I loitered +for twenty minutes outside of our meeting point. He couldn't text me to tell me +that he was late. I couldn't listen to music, call family or friends, or partake +in any of the other rituals that modern-day loiterers observe to pass the +time. In the end he showed up, and it was scarcely a big deal. + +This experience made me wonder what the policy for abandoning plans is when +someone is running late. Before smart phones, how long did people wait? Maybe +the proper etiquette is to wait long enough for you to absolve yourself of the +guilt of flaking in the unlikely event that your friend arrives shortly after +you leave. + +So... thirty minutes? I'll call my grandma tomorrow and ask her. + +#### Boredom + +My phone couldn't entertain me while I queued at the grocery store. Same too +when I commuted. + +I also found myself listening to less music than I usually do. I decided to read +to occupy the void when I could; this helped me progress towards completing this +year's [GoodReads challenge][gr-annual]. + +### Cheating + +I used my phone twice during March. + +1. Once to use my bank's mobile app to internationally transfer money from my + U.K. account to my U.S. account. I could have used [TransferWise's][tw] + website, but I didn't. +2. Another time I used my phone to take pictures of an item that I wanted to + sell on [CraigsList][cl]. I could have and perhaps should have used my laptop's + webcam, but at the time, I didn't want to. I am accustomed to using my phone + to take pictures, and I wanted to sell something. + +In both of these cases, prior habits eroded my resolve to stay the course. These +are useful reminders that habits don't distinguish between helpful and hurtful; +they just exist. + +In total I would estimate that I spent somewhere around fifteen minutes using +my phone in March. While not perfect: + +> Better a diamond with a flaw than a pebble without (Confucius) + +### Substitution = Dilution + +While the explicit goal of this challenge was to avoid using my cell phone for a +month, the implicit goal was to disengage from many of the +[nonessential][essentialism] activities that compete for my attention. + +There were some activities that I didn't miss while living without a cell +phone. This wasn't because I don't value these activities, but rather because I +can adequately replace them with alternatives. + +For texting and making phone calls, I used [Telegram][wtf-telegram]. Telegram +helped me sustain a healthy relationship with my girlfriend while still honoring +the constraints of the challenge. + +While I appreciated the convenience Telegram provided, I felt that I remained +about as [available][wtf-availability] during March as I was in February. If I +ever experiment with drastically reducing my availability, I will be more +explicit about my objectives. + +### Distraction displacement (whack-a-mole) + +Because cell phones and other electronics have conditioned my behavior, I +habitually avoid boredom and seek entertainment. On its face this may not sound +like a harmful practice. My generation drills the aphorism "you only live once", +suggesting that we may want to embrace a Hedonistic lifestyle. + +Hedonism may or may not be a wise way to play the game of Life. All I know is +that living a life in which I am often stimulated but proportionately distracted +appeals increasingly less to me as time progresses. + +During March I noticed that once I freed my attention from sending/receiving +texts, my brain quickly reassigned my attention to maintaining a vigil over the +other social media outposts that I maintain. + +I should also admit that I habitually checked Telegram now that it served as my +new cell phone. Didn't see that coming... + +In another case, once I discovered that I could use Instagram in a web browser +instead of on my phone, I filled my newfound time and attention on +[Instagram.com][ig] (don't click!): displacing the time that I spent on an app +on my phone to time that I spent on a website in a web browser. + +Holy whack-a-mole! + +Halfway through the month, I wrote a [program to block websites][url-blocker] on +my computer. Surprisingly this worked and forced me to more deliberately fill +this hard-fought, foreign time with other activities. + +### Easy come, easy go? + +As the saying for making friends goes, "easy come, easy go", implying that +friendships that you easily form can just as easily be destroyed. + +Habits invert this creation/destruction relationship. In my experience "easy +come" implies "difficult to go". + +For example, I could easily form the habit of eating chocolate around 15:00 at +work; curbing this habit would require more effort. When I compare this to the +difficulty I experienced habituating a meditation practice, and how easily I +can dislodge my meditation practice, it seems to me that the laws of habits +dictate "easy come, difficult go; difficult come, easy go". + +I suspect that while my cravings for using a cell phone have temporarily ceased, +they will return shortly after I start using my cell phone. And as if nothing +happened, I return to where I was at the end of February just before I decided +to curb my cell phone usage. + +Because of this, I'm planning on keeping my cell phone in my closet where I +stored it during the month of March. As noted, enough substitutes exist for me +to live a mostly normal life: one where I am not unnecessarily straining the +relationships of my friends and my family. After all these are the people who +matter most to me and those who drive me to explore new ways to improve. + +I recognize that the "self" in self-experimentation is a misnomer. Can you truly +conduct an [N of 1 trial][nof1]? My decisions impact the people in my life, and +I want to thank everyone who tolerates my eccentric and oftentimes annoying +experimentation. + +Thank you for reading. + +[pod]: https://www.goodreads.com/book/show/12609433-the-power-of-habit +[exp-exp]: https://en.wikipedia.org/wiki/Multi-armed_bandit +[algos]: https://www.goodreads.com/book/show/25666050-algorithms-to-live-by +[gr-annual]: https://www.goodreads.com/user_challenges/19737920 +[cl]: http://craigslist.com +[tw]: https://transferwise.com +[url-blocker]: https://github.com/wpcarro/url-blocker +[wtf-telegram]: https://telegram.org +[wtf-availability]: https://landing.google.com/sre/sre-book/chapters/availability-table +[essentialism]: https://www.goodreads.com/book/show/18077875-essentialism +[ig]: https://instagram.com +[nof1]: https://en.wikipedia.org/wiki/N_of_1_trial diff --git a/users/wpcarro/website/blog/content/english/lets-learn-nix-caching.md b/users/wpcarro/website/blog/content/english/lets-learn-nix-caching.md new file mode 100644 index 000000000000..a436d4de25eb --- /dev/null +++ b/users/wpcarro/website/blog/content/english/lets-learn-nix-caching.md @@ -0,0 +1,49 @@ +--- +title: "Lets Learn Nix Caching" +date: 2020-03-17T18:05:38Z +draft: true +--- + +## TL;DR + +1. I use `NixOS/nixpkgs-channels` instead of `NixOS/nixpkgs` and avoid + `nix-channel`. + +## More information + +- By default the Nix package manager uses cache.nixos.org as a binary cache. +- Visit status.nixos.org +- `git clone git@github.com:NixOS/nixpkgs-channels` instead of + `NixOS/nixpkgs`. The former mirrors the latter and uses Git branches to track + the published channels. + +## What is a Nix channel + +If you run... + +```shell +$ git clone git@github.com:NixOS/nixpkgs ~/nixpkgs +$ export NIX_PATH="nixpkgs=$(realpath ~/nixpkgs)" +``` + +One benefit to cloning nixpkgs is that you can browse the source code on your +machine using tools like `git` and `emacs`. You can also experimentally patch +and test Nix code this way. + +If any of the above appeals to you, clone `nixpkgs-channels` instead. + +The Nix maintainers build and test the commits from `nixpkgs` using Hydra. Tests +include reproducibility tests, etc. + +Various channels have different verification phases. + +The cache at cache.nixos.org is populate the cache at cache.nixos.org. + +You want to increase the likelihood that you are hitting this cache. For +example, `google-chrome` takes hours to build. + +## What is a binary cache? + +## What is Hydra (Nix CI)? + +## What is Cachix? diff --git a/users/wpcarro/website/blog/content/english/lets-learn-nix-determinism-vs-reproducibility.md b/users/wpcarro/website/blog/content/english/lets-learn-nix-determinism-vs-reproducibility.md new file mode 100644 index 000000000000..2e12a6b06fcc --- /dev/null +++ b/users/wpcarro/website/blog/content/english/lets-learn-nix-determinism-vs-reproducibility.md @@ -0,0 +1,121 @@ +--- +title: "Lets Learn Nix: Reproducibility" +date: 2020-03-17T12:06:47Z +draft: true +--- + +I am dedicating this page to defining and disambiguating some terminology. I +think it is important to use these terms precisely, so it may be worthwhile to +memorize these definitions and ensure that you are clarifying the discourse +rather than muddying it. + +## Terms + +- repeatable build: +- reproducible build: +- deterministic build: +- pure function: +- impure function: +- idempotent function: + +TODO(wpcarro): Consistently and deliberately use reproducible and +deterministic. + +## Repeatable vs. Reproducible + +Is NixOS reproducible? Visit [@grhmc][who-grhmc]'s website, +[r13y.com](https://r13y.com), to find out. + +At the time of this writing, 1519 of 1568 (i.e. 96.9%) of the paths in the +`nixos.iso_minimal.x86_64-linux` installation image are reproducible. + +## What hinders reproducibility? + +Timestamps. + +If package A encodes a timestamp into its build artifact, then we can +demonstrate that package A is *not reproducible* simply by building it at two +different times and doing a byte-for-byte comparison of the build artifacts. + +## Does Nix protect developers against non-determinism + +Yes. But not entirely. How? + +## Deterministic Nix derivation + +```nix +{ pkgs ? import <nixpkgs> {}, ... }: + +with pkgs; + +stdenv.mkDerivation { + name = "reproducible"; + phases = [ "buildPhase" ]; + buildPhase = "echo reproducible >$out"; +} +``` + +## Non-deterministic Nix derivation + +We can introduce some non-determinism into our build using the `date` function. + +```nix +# file: /tmp/test.nix +{ pkgs ? import <nixpkgs> {}, ... }: + +with pkgs; + +stdenv.mkDerivation { + name = "non-reproducible"; + phases = [ "buildPhase" ]; + buildPhase = "date >$out"; +} +``` + +Then run... + +```shell +$ nix-build /tmp/test.nix +$ nix-build /tmp/test.nix --check --keep-failed +``` + +## How do you test reproducibility? + +We can use `cmp` to compare files byte-for-byte. The following comparison should +fail: + +```shell +$ echo foo >/tmp/a +$ echo bar >/tmp/b +$ cmp --silent /tmp/{a,b} +$ echo $? +``` + +And the following comparison should succeed: + +```shell +$ echo hello >/tmp/a +$ echo hello >/tmp/b +$ cmp --silent /tmp/{a,b} +$ echo $? +``` + +## Reproducible vs. deterministic + +Reproducible builds *are* deterministic builds and deterministic build + +## Deterministic, Reproducible, Pure, Idempotent, oh my + +- A pure function has no side-effects. + +- An idempotent function can be executed more than once with the same arguments + without altering the side-effects. + +- A deterministic function ensures that + +## Deterministic vs. Reproducible + +I can check if a build is reproducible using [these tools][wtf-repro-tools]. + +[wtf-repro-tools]: https://reproducible-builds.org/tools/ +[who-grhmc]: https://twitter.com/grhmc diff --git a/users/wpcarro/website/blog/content/english/lets-learn-nix-dotfiles.md b/users/wpcarro/website/blog/content/english/lets-learn-nix-dotfiles.md new file mode 100644 index 000000000000..084fb19e4406 --- /dev/null +++ b/users/wpcarro/website/blog/content/english/lets-learn-nix-dotfiles.md @@ -0,0 +1,401 @@ +--- +title: "Let's Learn Nix: Dotfiles" +date: 2020-03-13T22:23:02Z +draft: true +--- + +## Let's Learn Nix: Dotfiles + +### Dependencies + +Speaking of dependencies, here's what you should know before reading this tutorial. + +- Basic Nix syntax: Nix 1p + +What version of Nix are we using? What version of `<nixpkgs>` are we using? What +operating system are we using? So many variables... + +Cartesian product of all possibilities... + +TODO(wpcarro): Create a graphic of the options. + +### The problems of dotfiles + +How do you manage your dependencies? + +You can use `stow` to install the dotfiles. + +### home-manager + +What we are going to write is most likely less preferable to the following +alternatives: +- using Nix home-manager +- committing your `.gitconfig` into your + +In the next tutorial, we will use [home-manager][wtf-home-mgr] to replace the +functionality that we wrote. + +So why bother completing this? + +### Let's begin + +Welcome to the first tutorial in the [Let's Learn Nix][wtf-lln] series. Today we +are going to create a Nix derivation for one of your dotfiles. + +"Dotfiles" refers to a user's collection of configuration files. Typically these +files look like: +- `.vimrc` +- `.xsessionrc` +- `.bashrc` + +The leading "dot" at the beginning gives dotfiles their name. + +You probably have amassed a collection of dotfiles whether or not you are +aware. For example, if you use [git][wtf-git], the file `~/.gitconfig` should +exist on your machine. You can verify this with: + +```shell +$ stat ~/.gitconfig +``` + +When I was first learning `git`, I learned to configure it using commands I +found in books and tutorials that often looked like: + +```shell +$ git config user.email +``` + +The `~/.gitconfig` file on your machine may look something like this: + +```.gitconfig +[user] + name = John Cleese + email = john@flying-circus.com + username = jcleese +[core] + editor = emacs +[web] + browser = google-chrome +[rerere] + enabled = 1 + autoupdate = 1 +[push] + default = matching +[color] + ui = auto +[alias] + a = add --all + ai = add -i + b = branch + cl = clone + cp = cherry-pick + d = diff + fo = fetch origin + lg = log --oneline --graph --decorate + ps = push + pb = pull --rebase + s = status +``` + +As I ran increasingly more `git config` commands to configure my `git` +preferences, the size of my `.gitconfig` increased, and the less likely I was to +remember which options I set to which values. + +Thankfully a coworker at the time, Ryan ([@rschmukler][who-ryan]), told me that +he version-controlled his `.gitconfig` file along with his other configuration +files (e.g. `.vimrc`) in a repository he called "dotfiles". + +Version-controlling your dotfiles improves upon a workflow where you have a +variety of configuration files scattered around your machine. + +If you look at the above `.gitconfig`, can you spot the dependencies? + +We explicitly depend `emacs` and `google-chrome`. We also *implicitly* depend on +`git`: there is not much value of having a `.gitconfig` file if you also do not +have `git` installed on your machine. + +Dependencies: +- `emacs` +- `google-chrome` + +Let's use Nix to generate this `.gitconfig` file. Here is what I would like our +API to be: + +Let's create a file `gitconfig.nix` and build our function section-by-section: + +TODO(wpcarro): Link to sections here +- options.user +- options.core +- options.web +- options.rerere +- options.push +- options.color +- options.alias + +```shell +$ touch gitconfig.nix +``` + +### options.user + +```haskell +AttrSet -> String +``` + +```nix +user = { + name = "John Cleese"; + email = "john@flying-circus.com"; + username = "jcleese"; +}; +``` + +```.gitconfig +[user] + name = John Cleese + email = john@flying-circus.com + username = jcleese +``` + +### options.core + +```nix +core = { + editor = "${pkgs.emacs}/bin/emacs"; +}; +``` + +```.gitconfig +[core] + editor = /nix/store/<hash>-emacs-<version>/bin/emacs +``` + +### options.web + +```nix +web.browser = "${pkgs.google-chrome}/bin/google-chrome"; +``` + +```.gitconfig +[web] + browser = /nix/store/<hash>-google-chrome-<version>/bin/google-chrome +``` + +### options.rerere + +```nix +rerere = { + enabled = true; + autoupdate = true; +}; +``` + +```.gitconfig +[rerere] + enabled = 1 + autoupdate = 1 +``` + +### options.push + +```nix +push.default = "matching"; +``` + +```.gitconfig +[push] + default = matching +``` + +### options.color + +```nix +color.ui = "auto"; +``` + +```.gitconfig +[color] + ui = auto +``` + +We need to define a function named `gitconfig` that creates a Nix [derivation][wtf-derivation]: + +```nix +# file: gitconfig.nix +let + # Import the <nixpkgs> package repository. + pkgs = import <nixpkgs> {}; + + # Stringify the attribute set, `xs`, as a multilined string formatted as "<key> = <value>". + # See attrsets.nix for more functions that work with attribute sets. + encodeAttrSet = xs: lib.concatStringsSep "\n" (lib.mapAttrsToList (k: v: "${k} = ${v}") xs); + + # Define out function name `gitconfig` that accepts an `options` argument. + gitconfig = options: pkgs.stdenv.mkDerivation { + # The gitconfig file that Nix builds will be located /nix/store/some-hash-gitconfig. + name = "gitconfig"; + src = pkgs.writeTextFile ".gitconfig" '' + [user] + name = ${options.user.name} + email = ${options.user.email} + username = ${options.user.username} + [core] + editor = ${options.core.editor} + [web] + editor = ${options.web.browser} + [rerere] + enabled = ${if options.rerere.enabled "1" else "0"} + autoupdate = ${if options.rerere.autoupdate "1" else "0"} + [push] + default = ${options.push.default} + [color] + ui = ${options.color.ui} + [alias] + ${encodeAttrSet options.aliases} + ''; + buildPhase = '' + ${pkgs.coreutils}/bin/cp $src $out + ''; + installPhase = '' + ${pkgs.coreutils}/bin/ln -s $out ~/.gitconfig + ''; + }; +} in gitconfig { + user = { + name = "John Cleese"; + email = "john@flying-circus.com"; + username = "jcleese"; + }; + core = { + editor = "${pkgs.emacs}/bin/emacs"; + }; + web.browser = "${pkgs.google-chrome}/bin/google-chrome"; + rerere = { + enabled = true; + autoupdate = true; + }; + push.default = "matching"; + color.ui = "auto"; + aliases = { + a = "add --all"; + ai = "add -i"; + b = "branch"; + cl = "clone"; + cp = "cherry-pick"; + d = "diff"; + fo = "fetch origin"; + lg = "log --oneline --graph --decorate"; + ps = "push"; + pb = "pull --rebase"; + s = "status"; + }; +} +``` + +### options.alias + +We want to write a function that accepts an attribute set and returns a +string. While Nix is a dynamically typed programming language, thinking in types +helps me clarify what I'm trying to write. + +```haskell +encodeAttrSet :: AttrSet -> String +``` + +I prefer using a Haskell-inspired syntax for describing type signatures. Even if +you haven't written Haskell before, you may find the syntax intuitive. + +Here is a non comprehensive, but demonstrative list of example type signatures: +- `[String]`: A list of strings (i.e. `[ "cogito" "ergo" "sum" ]`) +- `AttrSet`: A nix attribute set (i.e. `{ name = "John Cleese"; age = 80; }`). +- `add :: Integer -> Integer -> Integer`: A function named `add` that accepts + two integers and returns an integer. + +Specifically, we want to make sure that when we call: + +```nix +encodeAttrSet { + a = "add --all"; + b = "branch"; +} +``` + +...it returns a string that looks like this: + +```.gitconfig +a = "add --all" +b = "branch" +``` + + +TODO(wpcarro): @tazjin's nix-1p mentions this. Link to it. +Nix has useful functions scattered all over the place: +- `lib.nix` +- `list.nix` +- `lib.attrSet` + +But I cannot recall exactly which functions we will need to write +`encodeAttrSet`. In these cases, I do the following: +1. Run `nix repl`. +2. Browse the Nix source code. + +Google "nix attribute sets" and find the Github link to `attrsets.nix`. + +You should consider repeating this search but instead of searching for +"attribute sets" search for "lists" and "strings". That is how I found the +functions needed to write `encodeAttrSet`. Let's return to our `nix repl`. + +Load the nixpkgs set: + +```nix +nix-repl> :l <nixpkgs> +Added 11484 variables. +``` + +Define a test input called `attrs`: + +```nix +nix-repl> attrs = { fname = "John"; lname = "Cleese"; } +``` + +Map the attribute set into `[String]` using `lib.mapAttrsToList`: + +```nix +nix-repl> lib.mapAttrsToList (k: v: "${k} = ${toString v}") attrs +[ "fname = John" "lname = Cleese" ] +``` + +Now join the `[String]` together using `lib.concatStringsSep`: + +```nix +nix-repl> lib.concatStringsSep "\n" (lib.mapAttrsToList (k: v: "${k} = ${v}") attrs) +"fname = John\nlname = Cleese" +``` + +Now let's use this to define our function `encodeAttrSet`: + +```nix +# file: gitconfig.nix +encodeAttrSet = xs: lib.concatStringsSep "\n" (lib.mapAttrsToList (k: v: "${k} = ${v}") xs); +``` + +### Using nixpkgs search + +[Nixpkgs search][wtf-nixpkgs-search]. + +### Conclusion + +We learned how to help ourselves. + +- Where does `emacs` exist? What about `google-chrome`? [nixpkgs search][wtf-nixpkgs-search] +- Verify that I have it? [nix REPL][using-nix-repl] + +We used Nix to create our first derivation. + +[wtf-lln]: /lets-learn-nix +[wtf-git]: https://git-scm.com/ +[wtf-derivation]: https://nixos.org/nixos/nix-pills/our-first-derivation.html +[wtf-nixpkgs-search]: https://nixos.org/nixos/packages.html?channel=nixos-19.09 +[using-nix-repl]: /using-the-nix-repl +[wtf-home-mgr]: https://github.com/rycee/home-manager +[who-ryan]: https://twitter.com/rschmukler diff --git a/users/wpcarro/website/blog/content/english/lets-learn-nix-tutorial-reproducibility.md b/users/wpcarro/website/blog/content/english/lets-learn-nix-tutorial-reproducibility.md new file mode 100644 index 000000000000..c80892164dbe --- /dev/null +++ b/users/wpcarro/website/blog/content/english/lets-learn-nix-tutorial-reproducibility.md @@ -0,0 +1,41 @@ +--- +title: "Lets Learn Nix: Tutorial Reproducibility" +date: 2020-03-17T18:34:58Z +draft: true +--- + +## Install Nix + +Link to nixos page. + +## The rest + +Start with this... + +```shell +$ mkdir ~/lets-learn-nix +$ cd ~/lets-learn-nix +``` + +...done. Copy the following and paste it into a file name `shell.nix`. + +```nix +# file: shell.nix +let + pkgs = import (builtins.fetchGit { + url = "https://github.com/NixOS/nixpkgs-channels"; + ref = "refs/heads/nixos-19.09"; + }) {} +in pkgs.mkShell { + buildInputs = with pkgs; [ + git + ]; + NIX_PATH = "nixpkgs=${pkgs}"; +}; +``` + +...then... + +```shell +$ nix-shell +``` diff --git a/users/wpcarro/website/blog/content/english/lets-learn-nix.md b/users/wpcarro/website/blog/content/english/lets-learn-nix.md new file mode 100644 index 000000000000..a7c9a22e422e --- /dev/null +++ b/users/wpcarro/website/blog/content/english/lets-learn-nix.md @@ -0,0 +1,58 @@ +--- +title: "Lets Learn Nix" +date: 2020-03-13T21:50:47Z +draft: false +--- + +## Background + +[Nix][wtf-nix] may be the most useful tool that I use. I consider it as valuable +as [Git][wtf-git] or [Emacs][wtf-emacs]. My friend, David ([@dmjio][who-dmjio]), +first introduced me to Nix when we worked together at a Haskell startup in +NYC. Before this, I had been managing my system configuration using software +that I wrote -- first in Bash, then in Python, then in Golang. + +It took me awhile to understand Nix. I left the NYC startup, joined Google, and +relocated to London. Here I met another Nix-enlightened monk, Vincent +([@tazjin][who-tazjin]), who patiently taught me enough Nix to become +self-reliant and productive. + +Many resources exist to learn Nix; the Nix community on IRC continues to help me +and others effectively use Nix. I'm creating this series to write the tutorials +that I would have found useful when I started learning Nix. If you are just +beginning your Nix journey, I hope these tutorials help you. + +## Goals + +I aim to make each tutorial in the "Let's Learn Nix" series: +- Actionable: Readers will be writing code. +- Digestible: Readers should be able to finish each tutorial in fifteen minutes. +- Reproducible: Readers should expect the output of their code to match what + these tutorials claim they should see. + +## About the author + +My name is William ([@wpcarro][who-wpcarro]). My three favorite tools are Git, +Emacs, and Nix. I am an American expat currently working at Google in +London. While during the day I primarily write Java, Python, and TypeScript, I +prefer functional programming. I use Nix to deploy software and manage the +multiple machines across which I work. + +## Let's Begin + +Before we get started, Nix is a programming language. To familiarize yourself +with the syntax, semantics, and idioms, consider reading this brief [Nix One +Pager][nix-1p]. I recommend keeping it around as a reference. + +When I was first learning Nix, I wanted to use it to manage my dotfiles. Our +first tutorial will help you get started: [Let's Learn Nix: +Dotfiles][lln-dotfiles] + +[wtf-nix]: https://nixos.org +[wtf-git]: https://git-scm.com +[wtf-emacs]: https://www.gnu.org/software/emacs +[who-dmjio]: https://twitter.com/dmjio +[who-tazjin]: https://twitter.com/tazjin +[who-wpcarro]: https://twitter.com/wpcarro +[lln-dotfiles]: /lets-learn-nix-dotfiles +[nix-1p]: https://github.com/tazjin/nix-1p diff --git a/users/wpcarro/website/blog/content/english/nix-and-hugo.md b/users/wpcarro/website/blog/content/english/nix-and-hugo.md new file mode 100644 index 000000000000..ff0fe70205da --- /dev/null +++ b/users/wpcarro/website/blog/content/english/nix-and-hugo.md @@ -0,0 +1,5 @@ +--- +title: "Deploy Hugo blog with Nix" +date: 2020-03-11T18:42:32Z +draft: true +--- diff --git a/users/wpcarro/website/blog/content/english/self-hosting.md b/users/wpcarro/website/blog/content/english/self-hosting.md new file mode 100644 index 000000000000..1705541d820c --- /dev/null +++ b/users/wpcarro/website/blog/content/english/self-hosting.md @@ -0,0 +1,6 @@ +--- +title: "Self Hosting" +date: 2020-03-11T22:53:56Z +draft: true +--- + diff --git a/users/wpcarro/website/blog/default.nix b/users/wpcarro/website/blog/default.nix new file mode 100644 index 000000000000..cea9e8706cd6 --- /dev/null +++ b/users/wpcarro/website/blog/default.nix @@ -0,0 +1,12 @@ +{ pkgs, ... }: + +pkgs.stdenv.mkDerivation { + name = "blog.wpcarro.dev"; + buildInputs = with pkgs; [ hugo ]; + src = builtins.path { path = ./.; name = "blog"; }; + buildPhase = '' + mkdir -p $out + ${pkgs.hugo}/bin/hugo --minify --destination $out + ''; + dontInstall = true; +} diff --git a/users/wpcarro/website/blog/shell.nix b/users/wpcarro/website/blog/shell.nix new file mode 100644 index 000000000000..7ca3a9713ebf --- /dev/null +++ b/users/wpcarro/website/blog/shell.nix @@ -0,0 +1,8 @@ +let + briefcase = import <briefcase> {}; + pkgs = briefcase.third_party.pkgs; +in pkgs.mkShell { + buildInputs = with pkgs; [ + hugo + ]; +} diff --git a/users/wpcarro/website/blog/themes/tailwind/.gitignore b/users/wpcarro/website/blog/themes/tailwind/.gitignore new file mode 100644 index 000000000000..eb1a2c123ccc --- /dev/null +++ b/users/wpcarro/website/blog/themes/tailwind/.gitignore @@ -0,0 +1,5 @@ +.vscode/ + +node_modules +public/build +yarn.lock diff --git a/users/wpcarro/website/blog/themes/tailwind/archetypes/default.md b/users/wpcarro/website/blog/themes/tailwind/archetypes/default.md new file mode 100644 index 000000000000..f7e5e03d9ebd --- /dev/null +++ b/users/wpcarro/website/blog/themes/tailwind/archetypes/default.md @@ -0,0 +1,7 @@ +--- +title: "{{ replace .Name "-" " " | title }}" +description: "" +date: {{ .Date }} +draft: true +tags: [] +--- diff --git a/users/wpcarro/website/blog/themes/tailwind/i18n/en.yaml b/users/wpcarro/website/blog/themes/tailwind/i18n/en.yaml new file mode 100644 index 000000000000..8326be14acf4 --- /dev/null +++ b/users/wpcarro/website/blog/themes/tailwind/i18n/en.yaml @@ -0,0 +1,5 @@ +- id: back_home + translation: "Back Home" + +- id: not_found_page_title + translation: "Whoops! The page you're looking for doesn't exist :(" diff --git a/users/wpcarro/website/blog/themes/tailwind/images/screenshot.png b/users/wpcarro/website/blog/themes/tailwind/images/screenshot.png new file mode 100644 index 000000000000..3ca0b46b2d2b --- /dev/null +++ b/users/wpcarro/website/blog/themes/tailwind/images/screenshot.png Binary files differdiff --git a/users/wpcarro/website/blog/themes/tailwind/images/tn.png b/users/wpcarro/website/blog/themes/tailwind/images/tn.png new file mode 100644 index 000000000000..785504cd0176 --- /dev/null +++ b/users/wpcarro/website/blog/themes/tailwind/images/tn.png Binary files differdiff --git a/users/wpcarro/website/blog/themes/tailwind/layouts/404.html b/users/wpcarro/website/blog/themes/tailwind/layouts/404.html new file mode 100644 index 000000000000..afa69fec743e --- /dev/null +++ b/users/wpcarro/website/blog/themes/tailwind/layouts/404.html @@ -0,0 +1,12 @@ +{{ define "heading"}} +<div> + <a class="text-lg mb-8 inline-block" href="{{ .Site.BaseURL | relLangURL }}">← {{ i18n "back_home" }}</a> + <h1 class="text-4xl font-bold">{{ i18n "not_found_page_title" }}</h1> +</div> +{{ end }} + +{{ define "content" }} +<section class="mb-24"> + <img src="{{ "images/404-background.png" | relURL }}" alt="Page Not Found"> +</section> +{{ end }} diff --git a/users/wpcarro/website/blog/themes/tailwind/layouts/_default/baseof.html b/users/wpcarro/website/blog/themes/tailwind/layouts/_default/baseof.html new file mode 100644 index 000000000000..2cc783dae038 --- /dev/null +++ b/users/wpcarro/website/blog/themes/tailwind/layouts/_default/baseof.html @@ -0,0 +1,87 @@ +<!doctype html> +<html lang="{{ .Site.Params.LanguageCode }}"> + +<head> + <meta charset="utf-8"> + {{ hugo.Generator }} + + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + + <!-- Twitter Card --> + <meta name="twitter:card" content="summary"> + <meta name="twitter:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} - {{ .Site.Title }}{{ end }}"> + <meta name="twitter:description" content="{{ if .IsHome }}{{ .Site.Params.description }}{{ else }}{{ .Summary | plainify }}{{ end }}"> + <meta name="twitter:site" content="{{ .Site.BaseURL }}"> + <meta name="twitter:creator" content="{{ .Params.Author }}"> + <meta name="twitter:image" content="{{ .Site.Params.Avatar | absURL }}"> + + <!-- Open-Graph Data --> + <meta property="og:locale" content="{{ .Site.Params.LanguageCode }}"> + <meta property="og:type" content="{{ if .IsHome }}website{{ else }}article{{ end }}"> + <meta property="og:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} - {{ .Site.Title }}{{ end }}"> + <meta property="og:description" content="{{ if .IsHome }}{{ .Site.Params.description }}{{ else }}{{ .Summary | plainify }}{{ end }}"> + <meta property="og:url" content="{{ .Permalink }}"> + <meta property="og:site_name" content="{{ .Site.Title }}"> + <meta property="og:image" content="{{ .Site.Params.Avatar | absURL }}"> + + <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} - {{ .Site.Title }}{{ end }}</title> + + <meta name="author" content="{{ .Site.Params.Author }}"> + <meta name="description" content="{{ if .IsHome }}{{ .Site.Params.description }}{{ else }}{{ .Summary | plainify }}{{ end }}"> + + <!-- RSS --> + {{ with .OutputFormats.Get "RSS" }} + <link rel="alternate" href="{{ .RelPermalink | absURL }}" type="application/rss+xml" title="{{ $.Site.Title }}"> + {{ end }} + + <!-- Translations --> + {{ if .IsTranslated }} + {{ range .Translations }} + <link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}" title="{{ .Site.Title }}"> + {{ end }} + {{ end }} + + <!-- Stylesheets --> + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Arvo:400,700"> + <link rel="stylesheet" href="{{ "css/theme.css" | absURL }}"> + <link rel="stylesheet" href="{{ "css/chroma.dracula.css" | absURL }}"> +</head> +<body class="font-serif border-t-4 border-blue-500 antialiased"> + <div class="w-full p-6 md:w-2/3 md:px-0 md:mx-auto xl:w-2/5"> + <header class="mb-6"> + <!-- All the pages must have a heading block, defaults to a link for the home page and a title. --> + <div class="mb-6 md:flex md:items-center"> + {{ block "heading" . }} + <div> + {{ partial "back-home.html" . }} + <h1 class="text-4xl font-bold">{{ .Title }}</h1> + </div> + {{ end }} + </div> + + <!-- If the blog has translation, they shoul be displayed here. --> + {{ if .IsTranslated }} + <nav> + {{ range $i, $lang := .Translations }} + {{ if $i }}/{{ end }} + <a href="{{ .Permalink }}">{{ $lang.Language.LanguageName }}</a> + {{ end}} + </nav> + {{ end }} + </header> + + <!-- The content block. --> + {{ block "content" . }}{{ end }} + + <footer> + <p> + © {{ now.Format "2006"}}. Thank you for reading. + </p> + </footer> + </div> + + {{ template "_internal/google_analytics.html" . }} + <script data-ad-client="ca-pub-6018268443649487" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> +</body> +</html> diff --git a/users/wpcarro/website/blog/themes/tailwind/layouts/_default/list.html b/users/wpcarro/website/blog/themes/tailwind/layouts/_default/list.html new file mode 100644 index 000000000000..d781ce752a4a --- /dev/null +++ b/users/wpcarro/website/blog/themes/tailwind/layouts/_default/list.html @@ -0,0 +1,7 @@ +{{ define "content" }} +<section class="mb-24"> + {{ range site.RegularPages.GroupByDate "2006" -}} + {{ partial "posts.html" . }} + {{ end }} +</section> +{{ end }} diff --git a/users/wpcarro/website/blog/themes/tailwind/layouts/_default/single.html b/users/wpcarro/website/blog/themes/tailwind/layouts/_default/single.html new file mode 100644 index 000000000000..e4485f324e9c --- /dev/null +++ b/users/wpcarro/website/blog/themes/tailwind/layouts/_default/single.html @@ -0,0 +1,28 @@ +{{ define "heading" }} +<div> + {{ partial "back-home.html" . }} + + <!-- Title and Publication Date --> + <h1 class="text-4xl font-bold">{{ .Title }}</h1> + <time datetime="{{ .Date.Format "2006-01-02 15:04:05 MST" }}">{{ .Date.Format "02 Jan 2006" }}</time> + + <!-- Tags --> + {{ with .Params.tags }} + <ol class="mt-4"> + {{ range . }} + <li class="inline-block"> + <a class="border-none text-gray-800 text-xs bg-gray-400 hover:bg-gray-600 hover:text-white rounded-sm px-3 py-1" href="{{ "tags" | absURL }}/{{ . | urlize }}">{{ . }}</a> + </li> + {{ end }} + </ol> + {{ end }} +</div> +{{ end }} + +{{ define "content" }} +<article class="mb-12"> + {{ .Content }} + + {{ template "_internal/disqus.html" . }} +</article> +{{ end }} diff --git a/users/wpcarro/website/blog/themes/tailwind/layouts/index.html b/users/wpcarro/website/blog/themes/tailwind/layouts/index.html new file mode 100644 index 000000000000..4869c466b613 --- /dev/null +++ b/users/wpcarro/website/blog/themes/tailwind/layouts/index.html @@ -0,0 +1,18 @@ +{{ define "heading" }} +{{ if .Site.Params.Avatar }} +<img class="hidden md:block w-20 rounded-full mr-6" src="{{ .Site.Params.Avatar | absURL }}" alt="{{ .Site.Params.Author }}"> +{{ end }} + +<div> + <h1 class="text-4xl font-bold">{{ .Site.Title }}</h1> + <p>{{ .Site.Params.tagline }}</p> +</div> +{{ end }} + +{{ define "content" }} +<section class="mb-24"> + {{ range site.RegularPages.GroupByDate "2006" -}} + {{ partial "posts.html" . }} + {{ end }} +</section> +{{ end }} diff --git a/users/wpcarro/website/blog/themes/tailwind/layouts/partials/back-home.html b/users/wpcarro/website/blog/themes/tailwind/layouts/partials/back-home.html new file mode 100644 index 000000000000..4064d5256137 --- /dev/null +++ b/users/wpcarro/website/blog/themes/tailwind/layouts/partials/back-home.html @@ -0,0 +1 @@ +<a class="text-lg mb-8 inline-block" href="{{ .Site.BaseURL | relLangURL }}">← {{ i18n "back_home" }}</a> diff --git a/users/wpcarro/website/blog/themes/tailwind/layouts/partials/posts.html b/users/wpcarro/website/blog/themes/tailwind/layouts/partials/posts.html new file mode 100644 index 000000000000..0ebd4ca7e9b4 --- /dev/null +++ b/users/wpcarro/website/blog/themes/tailwind/layouts/partials/posts.html @@ -0,0 +1,12 @@ +<div> + <h2 class="text-3xl font-bold mb-2">{{ .Key }}</h2> + + <ol> + {{ range .Pages -}} + <li class="mb-6 md:flex md:flex-row"> + <time class=" block md:flex-l-24" datetime="{{ .Date.Format "2006-01-02 15:04:05 MST" }}">{{ .Date.Format "Jan 02"}}</time> + <a class="text-lg md:ml-12" href="{{ .RelPermalink }}">{{ .Title }}</a> + </li> + {{- end }} + </ol> +</div> diff --git a/users/wpcarro/website/blog/themes/tailwind/layouts/taxonomy/terms.html b/users/wpcarro/website/blog/themes/tailwind/layouts/taxonomy/terms.html new file mode 100644 index 000000000000..76da49ed0a09 --- /dev/null +++ b/users/wpcarro/website/blog/themes/tailwind/layouts/taxonomy/terms.html @@ -0,0 +1,13 @@ +{{ define "content" }} +<section class="mb-24"> + <ol class="-mx-2"> + {{ range .Pages -}} + <li class="inline-block mx-2 my-2"> + <a class="border-none text-gray-800 bg-gray-400 hover:bg-gray-600 hover:text-white rounded-sm px-3 py-1" href="{{ .RelPermalink }}"> + {{ .Title }} + </a> + </li> + {{- end }} + </ol> +</section> +{{ end }} diff --git a/users/wpcarro/website/blog/themes/tailwind/license.md b/users/wpcarro/website/blog/themes/tailwind/license.md new file mode 100644 index 000000000000..196326bb0e7e --- /dev/null +++ b/users/wpcarro/website/blog/themes/tailwind/license.md @@ -0,0 +1,7 @@ +Copyright 2019 Ian Rodrigues. + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/users/wpcarro/website/blog/themes/tailwind/package.json b/users/wpcarro/website/blog/themes/tailwind/package.json new file mode 100644 index 000000000000..86bb50f9490a --- /dev/null +++ b/users/wpcarro/website/blog/themes/tailwind/package.json @@ -0,0 +1,17 @@ +{ + "scripts": { + "watch": "cross-env NODE_ENV=development postcss scss/theme.scss -o static/css/theme.css --watch", + "build": "cross-env NODE_ENV=production postcss scss/theme.scss -o static/css/theme.css" + }, + "dependencies": { + "autoprefixer": "^9.5.1", + "tailwindcss": "^1.0" + }, + "devDependencies": { + "@fullhuman/postcss-purgecss": "^1.2.0", + "concurrently": "^4.1.0", + "cross-env": "^5.2.0", + "cssnano": "^4.1.10", + "postcss-cli": "^6.1.2" + } +} diff --git a/users/wpcarro/website/blog/themes/tailwind/postcss.config.js b/users/wpcarro/website/blog/themes/tailwind/postcss.config.js new file mode 100644 index 000000000000..6efcb774fa7c --- /dev/null +++ b/users/wpcarro/website/blog/themes/tailwind/postcss.config.js @@ -0,0 +1,14 @@ +const purgecss = require('@fullhuman/postcss-purgecss')({ + content: ['./layouts/**/*.html'], + defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [] +}) + +module.exports = { + plugins: [ + require('tailwindcss'), + require('autoprefixer'), + ...process.env.NODE_ENV === 'production' + ? [purgecss, require('cssnano')] + : [] + ] +} diff --git a/users/wpcarro/website/blog/themes/tailwind/readme.md b/users/wpcarro/website/blog/themes/tailwind/readme.md new file mode 100644 index 000000000000..cdb69a619730 --- /dev/null +++ b/users/wpcarro/website/blog/themes/tailwind/readme.md @@ -0,0 +1,62 @@ +# TailwindCSS Journal + +_TailwindCSS Journal_ is a minimalist theme for [Hugo](https://gohugo.io) using [TailwindCSS](https://tailwindcss.com). + +Based on [Journal](https://dashdashzako.github.io/hugo-journal-demo/), it also focuses on improving reading experience with no fancy effect. + +It uses [Chroma](https://gohugo.io/content-management/syntax-highlighting/) for the syntaxic coloration of code snippets. + +Demo is available [here](https://ianrodrigues.github.io/hugo-tailwind-journal-demo/). + +## Installation + +Please refer to the [Hugo documentation](https://gohugo.io/themes/installing/). + +## Configuration + +A few parameters should be adjusted in the site config: + +```toml +baseURL = "https://username.github.io/" +disqusShortname = "username" +googleAnalytics = "UA-XXXXXXXXX-X" +title = "Tailwind Journal" +theme = "hugo-tailwind-journal" +pygmentsCodeFences = true +pygmentsUseClasses = true + +[taxonomies] + tag = "tags" + +[permalinks] + posts = "/posts/:year/:month/:title/" + +[params] + author = "John Doe" + avatar = "images/avatar.jpg" + description = "A minimalist journal template for Hugo using TailwindCSS." + tagline = "A minimalist journal template for Hugo using TailwindCSS." + +[languages] + [languages.en] + contentDir = "content/english" + languageCode = "en-us" + languageName = "🇺🇸 English" + weight = 1 + + [languages.pt-br] + contentDir = "content/portuguese" + description = "Um template minimalista para Hugo usando TailwindCSS." + languageCode = "pt-br" + languageName = "🇧🇷 Português" + tagline = "Um template minimalista para Hugo usando TailwindCSS." + weight = 2 + + [languages.de] + contentDir = "content/german" + description = "Eine minimalistische Journalvorlage für Hugo mit TailwindCSS." + languageCode = "de" + languageName = "🇩🇪 Deutsch" + tagline = "Eine minimalistische Journalvorlage für Hugo mit TailwindCSS." + weight = 3 +``` diff --git a/users/wpcarro/website/blog/themes/tailwind/scss/theme.scss b/users/wpcarro/website/blog/themes/tailwind/scss/theme.scss new file mode 100644 index 000000000000..9da9261b63a1 --- /dev/null +++ b/users/wpcarro/website/blog/themes/tailwind/scss/theme.scss @@ -0,0 +1,51 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +body { + @apply text-gray-800; +} + +h1, h2, h3, h4, h5, h6, strong { + @apply text-gray-900; +} + +article > p, ul, ol { + @apply text-lg tracking-wide; +} + +article > div, p, ul, ol, pre:not(:last-child) { + @apply mb-6; +} + +article > ol, ul { + @apply list-disc ml-8; +} + +article > li:not(:last-of-type) { + @apply mb-2; +} + +article p > code { + @apply p-1/2 bg-gray-400; +} + +article > h2 { + @apply text-2xl my-8 font-bold text-black; +} + +a { + @apply border-b border-black text-black; +} + +/* purgecss ignore */ +pre.chroma { + @apply p-4 overflow-x-auto font-mono text-lg; +} + +@screen md { + /* purgecss ignore */ + div.highlight { + @apply -mx-12; + } +} diff --git a/users/wpcarro/website/blog/themes/tailwind/static/css/chroma.dracula.css b/users/wpcarro/website/blog/themes/tailwind/static/css/chroma.dracula.css new file mode 100644 index 000000000000..5e903f4fd7bc --- /dev/null +++ b/users/wpcarro/website/blog/themes/tailwind/static/css/chroma.dracula.css @@ -0,0 +1 @@ +.chroma{color:#f8f8f2;background-color:#282a36}.chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma .lntable{border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block}.chroma .hl{display:block;width:100%;background-color:#ffc}.chroma .lnt{margin-right:.4em;padding:0 .4em 0 .4em;color:#7f7f7f}.chroma .ln{margin-right:.4em;padding:0 .4em 0 .4em;color:#7f7f7f}.chroma .k{color:#ff79c6}.chroma .kc{color:#ff79c6}.chroma .kd{color:#8be9fd;font-style:italic}.chroma .kn{color:#ff79c6}.chroma .kp{color:#ff79c6}.chroma .kr{color:#ff79c6}.chroma .kt{color:#8be9fd}.chroma .na{color:#50fa7b}.chroma .nb{color:#8be9fd;font-style:italic}.chroma .nc{color:#50fa7b}.chroma .nf{color:#50fa7b}.chroma .nl{color:#8be9fd;font-style:italic}.chroma .nt{color:#ff79c6}.chroma .nv{color:#8be9fd;font-style:italic}.chroma .vc{color:#8be9fd;font-style:italic}.chroma .vg{color:#8be9fd;font-style:italic}.chroma .vi{color:#8be9fd;font-style:italic}.chroma .s{color:#f1fa8c}.chroma .sa{color:#f1fa8c}.chroma .sb{color:#f1fa8c}.chroma .sc{color:#f1fa8c}.chroma .dl{color:#f1fa8c}.chroma .sd{color:#f1fa8c}.chroma .s2{color:#f1fa8c}.chroma .se{color:#f1fa8c}.chroma .sh{color:#f1fa8c}.chroma .si{color:#f1fa8c}.chroma .sx{color:#f1fa8c}.chroma .sr{color:#f1fa8c}.chroma .s1{color:#f1fa8c}.chroma .ss{color:#f1fa8c}.chroma .m{color:#bd93f9}.chroma .mb{color:#bd93f9}.chroma .mf{color:#bd93f9}.chroma .mh{color:#bd93f9}.chroma .mi{color:#bd93f9}.chroma .il{color:#bd93f9}.chroma .mo{color:#bd93f9}.chroma .o{color:#ff79c6}.chroma .ow{color:#ff79c6}.chroma .c{color:#6272a4}.chroma .ch{color:#6272a4}.chroma .cm{color:#6272a4}.chroma .c1{color:#6272a4}.chroma .cs{color:#6272a4}.chroma .cp{color:#ff79c6}.chroma .cpf{color:#ff79c6}.chroma .gd{color:#8b080b}.chroma .ge{text-decoration:underline}.chroma .gh{font-weight:700}.chroma .gi{font-weight:700}.chroma .go{color:#44475a}.chroma .gu{font-weight:700}.chroma .gl{text-decoration:underline} diff --git a/users/wpcarro/website/blog/themes/tailwind/static/css/theme.css b/users/wpcarro/website/blog/themes/tailwind/static/css/theme.css new file mode 100644 index 000000000000..4d9cc992fd36 --- /dev/null +++ b/users/wpcarro/website/blog/themes/tailwind/static/css/theme.css @@ -0,0 +1 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}a{background-color:transparent}strong{font-weight:bolder}img{border-style:none}button,input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible}button{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}legend{color:inherit;display:table;max-width:100%;white-space:normal}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}html{box-sizing:border-box;font-family:sans-serif}*,:after,:before{box-sizing:inherit}h1,h2,p{margin:0}button{background:transparent;padding:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}ol{list-style:none;margin:0;padding:0}html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{border:0 solid #e2e8f0}img{border-style:solid}input::-webkit-input-placeholder{color:#a0aec0}input::-moz-placeholder{color:#a0aec0}input:-ms-input-placeholder{color:#a0aec0}input::-ms-input-placeholder{color:#a0aec0}input::placeholder{color:#a0aec0}[role=button],button{cursor:pointer}h1,h2{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input{padding:0;line-height:inherit;color:inherit}canvas,img{display:block;vertical-align:middle}img{max-width:100%;height:auto}.bg-gray-200{background-color:#edf2f7}.bg-gray-400{background-color:#cbd5e0}.hover\:bg-gray-600:hover{background-color:#718096}.border-blue-500{border-color:#4299e1}.rounded-sm{border-radius:.125rem}.rounded-full{border-radius:9999px}.border-none{border-style:none}.border-t-4{border-top-width:4px}.block{display:block}.inline-block{display:inline-block}.hidden{display:none}.font-serif{font-family:Arvo}.font-bold{font-weight:700}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.-mx-2{margin-left:-.5rem;margin-right:-.5rem}.mb-2{margin-bottom:.5rem}.mt-4{margin-top:1rem}.mr-6{margin-right:1.5rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-12{margin-bottom:3rem}.mb-24{margin-bottom:6rem}.p-6{padding:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-3{padding-left:.75rem;padding-right:.75rem}.text-gray-800{color:#2d3748}.hover\:text-white:hover{color:#fff}.text-xs{font-size:.75rem}.text-lg{font-size:1.125rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-20{width:5rem}.w-full{width:100%}body{color:#2d3748}h1,h2,strong{color:#1a202c}article>p,ol{font-size:1.125rem;letter-spacing:.025em}article>div,ol,p{margin-bottom:1.5rem}article>ol{list-style-type:disc;margin-left:2rem}article>li:not(:last-of-type){margin-bottom:.5rem}article>h2{font-size:1.5rem;margin-top:2rem;margin-bottom:2rem;font-weight:700;color:#000}a{border-bottom-width:1px;border-color:#000;color:#000}pre.chroma{padding:1rem;overflow-x:auto;font-family:Source Code Pro;font-size:1.125rem}@media (min-width:768px){div.highlight{margin-left:-3rem;margin-right:-3rem}}@media (min-width:768px){.md\:block{display:block}.md\:flex{display:-webkit-box;display:flex}.md\:flex-row{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.md\:items-center{-webkit-box-align:center;align-items:center}.md\:flex-l-24{-webkit-box-flex:0;flex:0 0 6rem}.md\:mx-auto{margin-left:auto;margin-right:auto}.md\:ml-12{margin-left:3rem}.md\:px-0{padding-left:0;padding-right:0}.md\:w-2\/3{width:66.666667%}}@media (min-width:1280px){.xl\:w-2\/5{width:40%}} \ No newline at end of file diff --git a/users/wpcarro/website/blog/themes/tailwind/static/images/404-background.png b/users/wpcarro/website/blog/themes/tailwind/static/images/404-background.png new file mode 100644 index 000000000000..4b945386a001 --- /dev/null +++ b/users/wpcarro/website/blog/themes/tailwind/static/images/404-background.png Binary files differdiff --git a/users/wpcarro/website/blog/themes/tailwind/tailwind.config.js b/users/wpcarro/website/blog/themes/tailwind/tailwind.config.js new file mode 100644 index 000000000000..f3714704df46 --- /dev/null +++ b/users/wpcarro/website/blog/themes/tailwind/tailwind.config.js @@ -0,0 +1,18 @@ +module.exports = { + theme: { + extend: { + flex: { + 'l-24': '0 0 6rem' + }, + fontFamily: { + serif: ['Arvo'], + mono: ['Source Code Pro'] + }, + padding: { + '1/2': '0.125rem' + } + } + }, + variants: {}, + plugins: [], +} diff --git a/users/wpcarro/website/blog/themes/tailwind/theme.toml b/users/wpcarro/website/blog/themes/tailwind/theme.toml new file mode 100644 index 000000000000..bfdefa7160df --- /dev/null +++ b/users/wpcarro/website/blog/themes/tailwind/theme.toml @@ -0,0 +1,12 @@ +name = "Tailwind Journal" +license = "MIT" +licenselink = "https://github.com/ianrodrigues/hugo-tailwind-journal/blob/master/license.md" +description = "A minimalist journal template for Hugo using TailwindCSS." +homepage = "https://github.com/ianrodrigues/hugo-tailwind-journal" +tags = ["minimalist", "reading", "blog", "tailwindcss"] +features = ["blog"] +min_version = "0.54.0" + +[author] + name = "Ian Rodrigues" + homepage = "https://ianrodrigues.dev" |
