12/25/19 I created a user page in github! I found that I have to publish from the master branch and the root directory of the memalign.github.io project. I also found that an index.html file with just plaintext contents wouldn't get served for https://memalign.github.io ( I figured this out by googling and finding: https://github.community/t5/GitHub-Pages/index-html-not-working/td-p/1266 ) Testing editing the note from my iPad. I'm going to try to publish generate HTML (and an RSS feed) using some hopefully simple JavaScript I can write in the Scriptable app. I need to give Scriptable the ability to read and write files in this git repo and I'm able to do that in Scriptable's in-app settings by creating a file bookmark. I added one for the top-level directory of this repo and named it "memalign.github.io". Ok, that's working well and I seem to have the primitives I need to be able to read files and write output files. Is it possible to add the script code itself to the github repo? Ah, I think I can have the script copy its own contents over from iCloud documents directory to the github repo. Ok, I have a crude verson of this working. 12/26/19 Task list: [x] - Need a test entry [x] - Need to convert entries in the entries subdirectory into standalone html pages - Need a stylesheet that can apply to all pages [x] - Need a landing index.html page that links to all entries and might show the most recent few? Probably an Index class; should have the title of a post link to the standalone page for it - Need to flesh out the format of an entry (date, optional image(s), title, html filename, etc) - Entry HTML pages should specify the right opengraph values, such as image link - Need to generate an RSS feed - For images, I need to figure out how to strip location and any other sensitive EXIF metadata Some thoughts on entry format: - Filename like #####-post-name.txt - The file should start with "Title: " and "Date: MM/DD/YYYY" - Entry text follows I could make an Entry class for parsing these. It can have methods for outputting an HTML file, the RSS content, etc. I think I'll want to sort them based on the number the filename starts with. I think it would be good to put generated post html files into a "p" subdirectory so the root of the repo doesn't get too messy. Task list: [x] - Need a stylesheet that can apply to all pages [x] - Need to flesh out the format of an entry (date, optional image(s), title, html filename, etc) [x] - Entry HTML pages should specify the right opengraph values, such as image link - Need to generate an RSS feed [x] - For images, I need to figure out how to strip location and any other sensitive EXIF metadata - Need to refine stylesheet so the site doesn't look so plain I'll figure out images next. Here's a website that talks about removing EXIF data from an image using the Shortcuts app: https://thenextweb.com/basics/2019/06/27/how-to-remove-metadata-from-your-photos-on-ios/ That appears to work ^_^ I'm using a simple [Image:/path/img.jpg] syntax in the posts themselves. I need a stylesheet to prevent the image from being a weird size relative to the text. Ok, I pulled together a quick stylesheet based on something I'm using in a utility app for reading news feeds. Trying to work on opengraph next. Here's the documentation: https://ogp.me I think I should have these entries: These go between and Task list: - Need to generate an RSS feed [x] - Need to refine stylesheet so the site doesn't look so plain [x] - Take a look at daringfireball, ogp.me for things to try - Write unit tests for the backlog labelled with TODOs [x] - Favicon [x] - Show images with rounded corners Here's a random thought: I could eventually render notes.txt into a nicer format if I ever want to share it. I made a favicon and followed the instructions here: https://favicon.io/favicon-converter/ 12/27/19 Task list: - Need to generate an RSS feed [x] - Write unit tests for the backlog labelled with TODOs [x] - Add og description Here's a page that talks about generating UUIDs in JavaScript: https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript I couldn't use the newer implementation because Scriptable didn't understand the "crypto" variable. 12/28/19 Task list: - Need to generate an RSS feed, add user-visible links to "RSS | JSON feed" to the website I see that DaringFireball specifies two feeds in its index.html: It's annoying to have to generate two feeds... He currently publishes the most recent 48 entries spanning 11/13/19 - /12/27/19. Here's documentation about json feeds: https://jsonfeed.org/version/1 It looks like DaringFireball doesn't include 'image's for items (which I want to do). Similar to how I have an Index class, I'll probably have a JSONFeed class and an AtomFeed class which are created with the list of entries. I have the JSON feed almost done being generated though I see now that I could've probably done this with less manual string manipulation: https://stackoverflow.com/questions/24559625/javascript-escape-double-quotes I'm not sure that's a lot better unless I find that I need to do more complex character escaping. Ok, I've got the json feed generating! I confirmed that Feedly correctly sees and parses the feed! Ok, I've got the atom feed generating! Task list: [x] - Need to confirm that the XML feed looks ok in Feedly [x] - Need to add direct links ("RSS | JSON feed") to these feeds on the website [NTBF: abandoning this for now] - See if I can get the feed to open in Apple News like DaringFireball does [x] - Implement the TODO unit test backlog All done for now! 1/6/20 Happy new year! I'll eventually want to be able to style code that's in an entry. I saw an example from Jonathan Diamond's blog here: http://www.robopenguins.com.s3-website-us-west-1.amazonaws.com/aws-iot-setup/ It doesn't style very nicely on iPhone Safari (code that needs to scroll ended up with two horizontal scroll bars: one for the entire container including line numbers, one for the code itself). It seemed to style well in my news reader, though, where I don't think its original CSS was applied. Looking at the source for that entry shows some complex HTML, clearly generated by a tool. I looked at the RSS feed xml to see if it was simpler and it was not. This website also generates pretty html for code: http://hilite.me/ It looks like it creates a table, puts the line numbers in one column and the code in another column. It uses tags to apply keyword highlighting. Its layout also causes a horizontal scroll. I wonder how hard it would be to tweak so word wrap works... Probably somewhat difficult because the line numbers are just one column. Here's a blog post that talks about word wrap options for code on websites: https://abbeyjfitzgerald.com/formatting-code-and-pre-text/ My bet is that it'll be somewhat straightforward to get word-wrapped code to work. But it'll be hard to do that while also showing line numbers (that don't get selected when you try to grab the text). I think line numbers are optional for snippets on a webpage. Task list: - Support code snippets that show in a monospace font and word wrap. No other styling necessary (such as line numbers, syntax highlighting). 1/15/20 I had a thought that I can probably just use monospace font and a word-wrapping 
 to style code in the simple (but plain) way I would prefer.

I experimented and did some googling. This was helpful discussion:
https://stackoverflow.com/questions/248011/how-do-i-wrap-text-in-a-pre-tag

For now, I found that using a regular div with this CSS is what I want:
#code {
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
  white-space: pre-wrap;
  word-wrap: break-word;
  background: #EEE;
  padding: 5px;
  border-radius: 3px;
}

(This is very similar styling to what stackoverflow uses)

Now, I need to add support for [Code][/Code] (or something similar) in my SiteGenerator. I need to make sure there are no leading linebreaks after the opening 
 to avoid an undesired empty line at the top of the code.


Task list:

[x] - Support [Code] tag
[x] - Support [Link] tag

I hit a complication for the [Code] tag:
My site generator replaces all line breaks with "
\n".

With pre-wrap behavior, I end up with double line breaks in the rendered HTML. I want the HTML to be readable so I want to keep the "\n"s. The site generator is doing simple regex string replacements so I can't easily leave out the 
s just in [Code] blocks. I found that I can style br to not be displayed using CSS.

https://stackoverflow.com/questions/17588953/how-to-disable-br-tags-inside-div-by-css/17589039
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space


Task list:

[x] - Add a separator of some kind between entries on the home page
- Implement unit tests for Code and Link

Info to style separator:
https://stackoverflow.com/questions/14821087/horizontal-line-and-right-way-to-code-it-in-html-css


3/22/20

Task list:

[x] - Implement unit tests for Code
[x] - Unit test both types of Link at the beginning of the post: impact on ogDescription


10/17/20

I noticed that my JSON and RSS feeds might be malformed.

https://jsonlint.com points out errors and I tracked it down to using tab character inside of strings. It sounds like these need to be replaced with \t according to:
https://stackoverflow.com/questions/19799006/unable-to-parse-tab-in-json-files

I also realized that I wasn't escaping "\". jsonlint now sees this as valid. I need to check with the JSONFeed validator next:
https://validator.jsonfeed.org/


Task list:

[x] - Unit test escaping tabs and backslash in JSON feed
[x] - Unit test feed date format for single-digit day and month
[x] - Unit test removing  tag
[x] - Unit test Atom feed does not separate entries with a comma
[x] - Unit test Atom feed has 'updated' element
[x] - Fix RSS issues detected: https://validator.w3.org/feed/check.cgi?url=https%3A%2F%2Fmemalign.github.io%2Ffeed.xml


11/24/20

I found that Verdana breaks some emoji in Chrome. Removing that font from style.css.


11/25/20

I noticed that memalign.github.io doesn't show up on Google (I searched for: site:memalign.github.io and got no results). I did some very light research into how to get it there.

Some links:
- Tool for generating a sitemap: https://www.xml-sitemaps.com
- Google's search console: https://search.google.com/search-console/welcome?utm_source=wmx&utm_medium=deprecation-pane&utm_content=home

1. Go to Google's search console: https://search.google.com/search-console/welcome?utm_source=wmx&utm_medium=deprecation-pane&utm_content=home
2. Enter memalign.github.io
3. Since I don't own the DNS for github.io, I needed to select verify by "url prefix"
  - Entered https://memalign.github.io
4. This provides an html file to host at https://memalign.github.io/
5. I copied that into the repo
  - They note "To stay verified, don't remove the file, even after verification succeeds."
6. I pushed, checked that it was accessible, and then tapped the Verify button
7. That succeeded and it sent me to a management page: https://search.google.com/search-console?resource_id=https%3A%2F%2Fmemalign.github.io%2F

The management page is empty for now but says it will update "in a day or so".

Do I need a sitemap? Here's what Google has to say about it:
https://developers.google.com/search/docs/advanced/sitemaps/overview?hl=en&visit_id=637419515500433379-603656771&rd=1

It sounds like it might help because the site is new and has few external links to it. That said, I've intentionally made sure this site is well-linked internally and from the homepage.

I'll wait a few days and see if Google picks up the whole website. If not, I can make a sitemap generator (using the example from xml-sitemaps.com as a starting point).

This site suggests that a sitemap speeds up indexing time by almost 1 whole day:
https://blog.hubspot.com/marketing/submit-website-google


11/27/20

The site still doesn't show up on Google yet so I'll add a test sitemap.


12/1/20

The site still doesn't show up. Adding a robots.txt file.

I also loaded this URL in a browser to request that Google reindexes the sitemap:
http://www.google.com/ping?sitemap=https://memalign.github.io/sitemap.xml

(This is probably redundant because I added it in the Google search console site already)

( I found this here: https://developers.google.com/search/docs/advanced/sitemaps/build-sitemap?visit_id=637424087405675301-1909987319&rd=1#addsitemap )

This website says it can take up to 4 weeks for a site to get indexed:
https://www.seomechanic.com/why-is-my-website-not-showing-in-google-search-results/


12/8/20

Google indexed the sitemap!
I saw this info here:
https://search.google.com/search-console/sitemaps?resource_id=https%3A%2F%2Fmemalign.github.io%2F


8/28/21

I have enough posts now that instead of listing all posts at the top, I want to try organizing them based on tags.

[x]- Show the tags somewhere in the entry's page (and the post as it's represented in index.html)
[x]  - Style 'tags' the same as postdate
[ntbf]- Show the organized tags at the top of index.html
[x]- Link the tags for a post to a tags page that has all entries organized by tag
[x]- Unit test Entry class: [x]missing tags line, [x]with empty tags list, [x]with one tag, [x]with two tags
[x]- Unit test Entry class: "Interactive Fiction" as a tag, ensure it doesn't get split
[x]- Fix existing unit tests
[x]- Unit test column layout for 15 or more entries
[x]  - 32 entries led to 4 columns due to a bug. Unit test that we don't end up with more than 3 columns when not perfectly divisible by 3
[x]- Unit test TagsIndex writeHTMLDocument; ensure entries are sorted correctly


[x]- Investigate providing a full URL (e.g. https://memalign.github.io/m/example.jpg) for og image, json feed, and rss feed preview images
[x]  - Fix unit tests
[x]  - Unit test HTMLDocument.makeFullURLFromURL(url): already a full url, a relative URL that doesn't start with /, an absolute url that starts with /


12/6/21

I'd like to support looping mp4s as "GIF"s because their file size is so much smaller.

Here's code that Twitter uses to embed videos like this:


I pared this down and it seems to work:


I'll support this as a special case in [Image:]


[x] - Test ogDescription with SectionTitle tag in it
[x] - Test ogDescription with ParagraphTitle tag in it
[x] - Test the HTML produced for SectionTitle tag
[x] - Test the HTML produced for ParagraphTitle tag
[x] - Test HTML produced for [Link][/Link] inside of a SectionTitle, ParagraphTitle
[x] - Test HTML produced for mp4 image
[x] - Avoid using Image:mp4 as the og:image (test this: [x]a post that only has an mp4, [x]a post with an mp4 before a jpg, [x]a post with an mp4 after a jpg)


1/8/22

MP4s as Images weren't autoplaying on iPhone. I found this blog post:
https://webkit.org/blog/6784/new-video-policies-for-ios/

I fixed this by using the playsinline attribute in the video tag.


3/1/22

I'm adding a featured projects section to the top of the main page.

[x]- Port over the changes in test.html to the generator
[x]  - Don't forget to add a new div around each post (so images will be styled correctly)
[x]- Use entries/FEATURED.txt
[x] - Delete test.html
[x]- Unit test
[x]  - Creating Featured with a single item
[x]  - Creating Featured with a list of items
[x]  - Index created without featured projects doesn't add that section or section titles ( featured projects ) ; ( posts )
[x]  - Index created with featured projects shows them
[x]- Make a more favorable crop of FormulaGraph's image


5/1/22

Here's a 16x16 favicon:

http://memalign.github.io/m/pceimage/index.html?w=0&s=1&t=.:#00000000%0A@:#000000%0A%0A................%0A................%0A.@@@.......@@@@.%0A@..@@.....@....@%0A@..@@.....@@@.@@%0A@..@@.....@@.@.@%0A@.@.@.....@....@%0A@.@.@.....@@..@@%0A@.@.@.....@@..@@%0A@.@.@.....@....@%0A@@..@.....@....@%0A@@..@.@.@.@.@@.@%0A@@..@..@..@....@%0A.@@@..@.@..@@@@.%0A................%0A................


11/20/22

[x]Need to unit test Continue Reading functionality
[x]- Correctly shows up in Index page
[x]- URL is not a relative URL in Index or Feed
[x]- Correctly omitted from Entry page
[x]- Gets stripped from ogDescription


11/24/22

Adding support for multiple sites:

Required:
[x] - Refactor runScript to run on a list of repositories (currently directly calls entriesPath(), htmlPostsPath(), copyCurrentScriptToRepo())
[x] - Replace repoPath() with an array of repoPaths
[x] - Make entriesPath(), htmlPostsPath(), repoSiteGeneratorPath(), copyCurrentScriptToRepo() take repoPath as an argument

[x]- Repo config is defined as: 
[x]  - a repo path, example: FileManager.local().bookmarkedPath("memalign.github.io")
[x]  - a baseURL, example: "https://memalign.github.io"
[x]  - a title, example: "memalign.github.io" (class Index, line 163)
[x]  - A number of entriesOnIndex
[x]  - Read these last two properties from a config file in the repo path to avoid hard coding them. 

[x]- Index class should treat -1 entriesOnIndex as infinity 

Unit test:
[x]- Get existing tests passing
[x]- Test every siteConfig field
[x]  - title ([x]Entry, [x]Index, [x]TagsIndex)
[x]  - baseURL ([x]Entry, [x]Index)
[x]  - entriesOnIndex (Index)
[x]  - authorName
[x]  - authorURL
[x]- Test negative entriesOnIndex behavior

Nice to have:
[x]- Image captions
- Image grid


11/25/22

Quick implementation of image captions.

Still need to:
[x]- Audit changes to generated HTML
[x]- Make sure existing unit tests pass
[x]- Unit test captions for img and video