Git Product home page Git Product logo

travisbriggs.com's Introduction

Digital Garden of Travis Briggs

This is the static site generator that creates the digital gardens at:

https://travisbriggs.com

gemini://gem.travisbriggs.com

Background

A Digital Garden is like a blog, as it's a place to share personal thoughts, projects and other things on the web (or on Gemini). However it differs in that it is setup more as a graph of nodes that are connected and evergreen instead of a dreaded reverse chronological ordering of "posts". For more information on Digital Gardens, see the post that inspired me by Maggie Appleton.

This static site generator is built off the awesome template Eleventy Garden by Binyamin Aron Green. That in turn uses the awesome Eleventy static site generator, which is more or less a clone of Jekyll in Javascript that winds up being more flexibile and more easily extensible.

Developing

npm install
npm start

Deploying

www

First, build the site. Warning: this will create a Mastodon post for every new garden node, assuming you have a MASTODON_API_KEY entry in a top-level .env file.

npm run build

Next deploy to Netlify (--prod to skip the preview step):

netlify deploy --prod -d _site

Finally, commit the code and push to Github (left to the reader). It's important that this step is last, because the comments.sqlite3 (where the Mastodon ids for node comments live) database is commited as part of the repo, and will be out of date if the repo is pushed before deploying.

Gemini

The Gemini capsule is hosted from a server on Digital Ocean using the excellent Twins server and certificates from Let's Encrypt. To deploy the Gemini site, run:

GEM_USER=username GEM_HOST=some.site.garden.example.com npm run deploy-gemini

This will run Eleventy in Gemini mode, create a tarball, upload it to the remote host, and extract it to the necessary directory.

Recreating the comments database

If you're in this section, I'm sad for you. You probably want to first delete all existing comments. Then run:

node create_comments_db.js

Finally, follow the build and deploy steps above.

travisbriggs.com's People

Contributors

audiodude avatar

Stargazers

 avatar

Watchers

 avatar  avatar

travisbriggs.com's Issues

Custom styling

While black on white, 400px columns are great and all, I should really consider some custom styling to make my garden visually distinct. Maybe some custom typography too.

I'm thinking of using the calming yellow from https://travisbriggs.com, maybe the blue on yellow color scheme from that website?

Replace homepage links with garden home pages

Okay this one's not as well thought out but bear with me.

A lot of times, I mention a person, technology or website, and I just link to thier homepage. It's nice to have some link or context, but it would be even nicer if I could eventually replace this with a page that describes my opinions/experiences/etc with that entity.

So for example, I started changing DistroKid links from being to https://distrokid.com/ and instead going to a page that I just called [[DistroKid]]. But then I didn't really immediately have anything to write about the service, so I created the page (distrokid.md) and just dumped the homepage link in there. A simple one hop, but probably annoying for visitors.

What would be great is if I could specify a "fallback" link for a [[topic]], so that if the page exists in the garden, it goes there first, but if it doesn't it falls back to the homepage or other link I provided.

Not sure what the syntax for this should be. Maybe something like [[DistroKid<https://distrokid.com>|on DistroKid]], where angle brackets in the wiki link indicate the fallback URL (and are stripped from the generated HTML).

Some way for people to comment/see each other's comments/reply to comments

Related to #12 and #10, part of "learning in public" is the important step of receiving and responding to feedback. For pages like blog posts and me describing side projects, this might not be totally important. But when I start writing paragraphs on random websites/subjects/entities (see #4) then it is probably necessary to allow people to critique and point out errors.

For the latest iteration of my blog (https://write.as/audiodude) I've tried to often put a "What do you think? Comment on Mastodon or send me an email" line at the bottom of posts. This is good, and I could do the same thing in the footer of the garden, but it's kind of a cop out.

At the same time there are technical hurdles. I want to preserve the status of my page as a static site. The last time I checked (which was admittedly maybe 4-5 years ago), the state of the art for comments on static sites was Disqus which I have lukewarm feelings about. It's probably easy to implement, gets the job done and provides persistent identity across comments across the web. But it can be an eyesore, with all its Web 2.0 rounded cornered-ness and being way too packed with unnecessary features.

Open to suggestions on other options.

Preview snippet for backlinks should feature the context where the link is mentioned

Currently the preview for a backlink just shows the first hundred or so characters of the entire post. Instead, it should show the context of where the forward-link was mentioned. So if I have the page Lorem with a mention of a Unicorn:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat eleifend ligula,
in posuere ligula mattis id. Morbi scelerisque vitae erat et fermentum. Nullam faucibus
aliquet turpis, and that's where I saw the [[Unicorn]]. Morbi efficitur egestas blandit.
Mauris viverra neque ac erat consectetur euismod. Aenean semper metus sed orci
bibendum sagittis at ac erat

Then the preview on Unicorn for Lorem should read:

...vitae erat et fermentum. Nullam faucibus aliquet turpis, and that's where I saw
the [[Unicorn]]. Morbi efficitur egestas blandit. Mauris viverra neque ac erat...

Use different styles for relative (garden) links and external links

The garden has (and will have) a lot of links. Some of them are internal garden nodes that create backlinks, while others are links to external blog posts or homepages for different technologies (like Jekyll on the best albums in the universe page).

It would be nice to annotate relative links with a class (class="internal" perhaps) and style them in green (green for garden) so they could be distinguished.

Update garden.html template

First thing's first, rename note.html to garden.html.

Then, always use the article title as the first <h1> (Markdown: #) on the page.

Add in dates and status from #6

(Eventually) add in comments/webmentions from #13

Figure out a way to publish to Gemini

The desired output is just a _gemini directory that I can scp to my gemini host.

Looking at https://github.com/makeworld-the-better-one/md2gemini but it's in Python while Eleventy is in Javascript.

Not sure if I want to do this within the project repo (probably) or as an external repo to isolate possible Python code. If it was in an external repo it would have to reference the current checkout of this repo anyways, so probably not worth it.

I also need to do custom handling for both turning wikilinks [[link|displayed text]] into links, and adding the backlinks. This might be easily handled by using Mistune, which is what md2gemini uses anyways.

Probably the first step is a fork of md2gemini.

RSS or Atom feed

As much as it seems shocking, a lot of people still use RSS. And it turns out those people are likely to be the ones who read a lot of blogs, share a lot of blogs, and influence others to read and share blogs. As much as digital gardening shouldn't be performative, I would like people to eventually find and read my content, otherwise why publish it? Posting new content on Mastodon will only go so far.

So I should have an RSS/Atom feed.

Add backlink from blog posts to blog index

Currently, most of the blog posts (https://garden.travisbriggs.com/notes/blog/) don't have any backlinks. I feel they should at least link back to the blog index.

Even better, since they are in a sub directory, and in a collection (blog), it would be nice if either or both of these resulted in backlinks to the index page of the sub directory or a synthetic index page for all pages in a collection. If synthetic, it would be nice if I could drop in a replacement page with the same name that would be used for the main content of the index, but would list all of the collection.

Highlight broken relative links

When previewing a page, it should show broken relative links in red so that I can remember to add a page for them and they're not just...well...broken.

This is probably related to #3, in that we can add a third class="broken".

Also related to #4, in that links that have a "fallback" should not be displayed as broken.

Add a status/date to pages (as encouraged in garden history blog post)

In the blog post that got me into this mess (https://maggieappleton.com/garden-history), the author basically requires that content in a garden have a status of how mature it is, how well-formed it is. It is also suggested that the content have created_at and updated_at timestamps.

I whole-heartedly agree and need to add these to my pages. It sounds like Eleventy suggests you use a date: front matter, or else the file creation date will be used, which is likely to be inaccurate on a CI deployment server (which I'm currently using, in Netlify).

https://www.11ty.dev/docs/dates/

Support for Mastodon federated custom emojis

Someone posted to the site from Mastodon (in a comment) with an emoji, and the emoji just simply didn't show up. That's because the emoji (:catblobthink:) was a custom emoji from a particular Mastodon server.

I know there is code in place for federated servers to fetch emoji icons from each other to display properly in posts. I wonder if I can implement something like that in Javascript for the garden so that these show up.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.