Compare commits

...

7 Commits

57 changed files with 321 additions and 130 deletions

13
lib/generate/archive.ts Normal file
View File

@ -0,0 +1,13 @@
import * as metadata from "../metadata";
import { Page } from "../metadata";
import * as util from "../util";
import layout from "../layout";
export default async function archive(posts: Page[]) {
const page = await metadata.get("site/archive.html.ejs");
page.text = util.render(page.text, {
posts,
}, "site/archive.html.ejs");
page.text = await layout(page.text, page.metadata, page.metadata.layout!);
util.write("archive/index.html", page.text);
}

View File

@ -1,24 +0,0 @@
import { Page, PostMetadata } from "../metadata";
import generatePaginated from "./paginated";
export default async function(posts: Page[]): Promise<Map<string, Page[]>> {
const categories = new Map<string, Page[]>();
for (const post of posts) {
const category = (<PostMetadata>post.metadata).category;
if (!categories.has(category)) {
categories.set(category, []);
}
categories.get(category)!.push(post);
}
categories.forEach((categoryPosts, category) => {
generatePaginated(categoryPosts, `/${category}/`, "site/category.html.ejs", {
category
}, {
title: `${category} posts`
});
});
return categories;
}

View File

@ -1,21 +1,23 @@
import categories from "./categories";
import archive from "./archive";
import copy from "./copy";
import css from "./css";
import errors from "./errors";
import homepage from "./homepage";
import posts from "./posts";
import * as rss from "./rss";
import tags from "./tags";
import tutorials from "./tutorials";
import years from "./years";
export = {
categories,
archive,
copy,
css,
errors,
homepage,
posts,
rss,
tags,
tutorials,
years,
};

View File

@ -4,7 +4,7 @@ import { Page, PostMetadata } from "../metadata";
import * as util from "../util";
import { TutorialSeries } from "./tutorials";
async function generateFeed(posts: Page[], permalink: string, category?: string) {
async function generateFeed(posts: Page[], permalink: string, tag?: string) {
posts = posts.sort((a, b) => {
const aDate = <Date>(<PostMetadata>a.metadata).date;
const bDate = <Date>(<PostMetadata>b.metadata).date;
@ -16,7 +16,7 @@ async function generateFeed(posts: Page[], permalink: string, category?: string)
let text = (await fs.readFile("site/feed.xml.ejs")).toString();
text = util.render(text, {
posts,
category,
tag,
permalink,
feedPath: dest
}, "site/feed.xml.ejs");
@ -28,9 +28,9 @@ export async function posts(posts: Page[]) {
generateFeed(posts, "/");
}
export async function categories(categories: Map<string, Page[]>) {
categories.forEach((posts, category) => {
generateFeed(posts, `/${category}/`, category);
export async function tags(tags: Map<string, Page[]>) {
tags.forEach((posts, tag) => {
generateFeed(posts, `/${tag}/`, tag);
});
}

26
lib/generate/tags.ts Normal file
View File

@ -0,0 +1,26 @@
import { Page, PostMetadata } from "../metadata";
import generatePaginated from "./paginated";
export default async function(posts: Page[]): Promise<Map<string, Page[]>> {
const taggedPosts = new Map<string, Page[]>();
for (const post of posts) {
const tags = (<PostMetadata>post.metadata).tags;
for (const tag of tags) {
if (!taggedPosts.has(tag)) {
taggedPosts.set(tag, []);
}
taggedPosts.get(tag)!.push(post);
}
}
taggedPosts.forEach((tagPosts, tag) => {
generatePaginated(tagPosts, `/${tag}/`, "site/tag.html.ejs", {
tag
}, {
title: `${tag} posts`
});
});
return taggedPosts;
}

View File

@ -22,7 +22,8 @@ async function generate(): Promise<Page[]> {
generators.homepage(posts);
generators.years(posts);
generators.rss.posts(posts)
generators.categories(posts).then(generators.rss.categories);
generators.tags(posts).then(generators.rss.tags);
generators.archive(posts);
return posts;
}

View File

@ -16,7 +16,7 @@ export interface Metadata {
export interface PostMetadata extends Metadata {
title: string;
slug: string;
category: string;
tags: string[];
date: string | Date;
readingTime?: number;
wordCount?: number;

View File

@ -71,7 +71,6 @@ export function video(metadata: Metadata, name: string, attributes: object): str
return `
<video ${attributesStr}>
<source src="${metadata.permalink}/${name}.mp4" type="video/mp4">
<source src="${metadata.permalink}/${name}.webm" type="video/webm">
</video>
`;
}

23
site/archive.html.ejs Normal file
View File

@ -0,0 +1,23 @@
```
metadata.layout = "default.html.ejs"
metadata.title = "Archive"
```
<div class="main">
<% let currentYear %>
<% for (const post of posts) { %>
<% if (post.metadata.date.getFullYear() !== currentYear) { %>
<% if (currentYear) { %>
</ul>
<% } %>
<% currentYear = post.metadata.date.getFullYear() %>
<h2><%= currentYear %></h2>
<ul>
<% } %>
<li>
<a href="<%= post.metadata.permalink %>">
<%= post.metadata.title %>
</a>
</li>
<% } %>
</div>

View File

@ -7,6 +7,9 @@
--secondary-ui-text-color: var(--dark-secondary-ui-text-color);
--content-text-color: var(--dark-content-text-color);
--aside-background: var(--dark-aside-background);
--aside-border: var(--dark-aside-border);
// Syntax highdarking
--atom-base: var(--dark-atom-base);
--atom-mono-1: var(--dark-atom-mono-1);
@ -31,6 +34,9 @@
--secondary-ui-text-color: var(--light-secondary-ui-text-color);
--content-text-color: var(--light-content-text-color);
--aside-background: var(--light-aside-background);
--aside-border: var(--light-aside-border);
// Syntax highlighting
--atom-base: var(--light-atom-base);
--atom-mono-1: var(--light-atom-mono-1);

View File

@ -7,6 +7,9 @@
--secondary-ui-text-color: var(--light-secondary-ui-text-color);
--content-text-color: var(--light-content-text-color);
--aside-background: var(--light-aside-background);
--aside-border: var(--light-aside-border);
// Syntax highlighting
--atom-base: var(--light-atom-base);
--atom-mono-1: var(--light-atom-mono-1);
@ -31,6 +34,9 @@
--secondary-ui-text-color: var(--dark-secondary-ui-text-color);
--content-text-color: var(--dark-content-text-color);
--aside-background: var(--dark-aside-background);
--aside-border: var(--dark-aside-border);
// Syntax highdarking
--atom-base: var(--dark-atom-base);
--atom-mono-1: var(--dark-atom-mono-1);

View File

@ -1,9 +1,13 @@
<%- include("normalize.css") %>
<%- include("syntax-highlighting.css") %>
$light-accent-color: #0638d0;
$dark-accent-color: #f9c72f;
:root {
--light-accent-color: #0638d0;
--dark-accent-color: #f9c72f;
// Theme colors
--light-accent-color: #{$light-accent-color};
--dark-accent-color: #{$dark-accent-color};
--light-content-background-color: white;
--dark-content-background-color: #111;
--light-shadow-color: #f7f7f7;
@ -17,6 +21,11 @@
--light-content-text-color: #222;
--dark-content-text-color: #ddd;
--light-aside-background: #{lighten($light-accent-color, 50%)};
--dark-aside-background: #{darken($dark-accent-color, 50%)};
--light-aside-border: #{darken($light-accent-color, 10%)};
--dark-aside-border: #{darken($dark-accent-color, 10%)};
// Syntax highlighting
--light-atom-base: #fafafa;
--dark-atom-base: #282c34;
@ -42,6 +51,11 @@
--dark-atom-hue-6: #d19a66;
--light-atom-hue-6-2: #c18401;
--dark-atom-hue-6-2: #e6c07b;
// Fonts
--ui-font: Avenir, Lucida Grande, Arial, sans-serif;
--content-font: Charter, Georgia, serif;
--monospace-font: SF Mono, monospace;
}
.theme-light {
--accent-color: var(--light-accent-color);
@ -52,6 +66,9 @@
--secondary-ui-text-color: var(--light-secondary-ui-text-color);
--content-text-color: var(--light-content-text-color);
--aside-background: var(--light-aside-background);
--aside-border: var(--light-aside-border);
// Syntax highlighting
--atom-base: var(--light-atom-base);
--atom-mono-1: var(--light-atom-mono-1);
@ -75,6 +92,9 @@
--secondary-ui-text-color: var(--dark-secondary-ui-text-color);
--content-text-color: var(--dark-content-text-color);
--aside-background: var(--dark-aside-background);
--aside-border: var(--dark-aside-border);
// Syntax highdarking
--atom-base: var(--dark-atom-base);
--atom-mono-1: var(--dark-atom-mono-1);
@ -90,15 +110,10 @@
--atom-hue-6-2: var(--dark-atom-hue-6-2);
}
// Fonts
$sansSerif: Avenir, Lucida Grande, Arial, sans-serif;
$serif: Charter, Georgia, serif;
$monospace: SF Mono, monospace;
// General
html {
background-color: var(--content-background-color);
font-family: $sansSerif;
font-family: var(--ui-font);
font-size: 16px;
line-height: 1.6;
color: var(--ui-text-color);
@ -145,7 +160,7 @@ article {
&::before {
content: "#";
font-family: $monospace;
font-family: var(--monospace-font);
color: var(--accent-color);
user-select: none;
}
@ -175,15 +190,16 @@ article {
}
.article-content {
font-family: $serif;
position: relative;
font-family: var(--content-font);
font-size: 1.25rem;
word-wrap: break-word;
h1, h2, h3, h4, h5, h6 {
font-family: $sansSerif;
font-family: var(--ui-font);
.header-anchor {
font-family: $monospace;
font-family: var(--monospace-font);
color: var(--accent-color);
user-select: none;
text-decoration: none;
@ -208,6 +224,22 @@ article {
word-break: break-all;
}
aside {
background-color: var(--aside-background);
border: 1px solid var(--aside-border);
padding: 15px;
font-size: 1rem;
width: 50%;
position: absolute;
left: 100%;
margin-left: 15px;
box-sizing: border-box;
transform: translateY(-50%);
p:first-child { margin-top: 0; }
p:last-child { margin-bottom: 0; }
}
// Markdown decorations
@media screen and (min-width: 768px) {
a {
@ -216,7 +248,7 @@ article {
&::after { content: "](" attr(data-link) ")"; word-wrap: break-word; }
&::before, &::after {
color: var(--secondary-ui-text-color);
font-family: $monospace;
font-family: var(--monospace-font);
font-size: 0.75em;
}
}
@ -233,7 +265,7 @@ article {
}
code::before, code::after {
content: "`";
font-family: $monospace;
font-family: var(--monospace-font);
color: var(--secondary-ui-text-color);
}
pre code::before,
@ -244,12 +276,12 @@ article {
}
strong::before, strong::after {
content: "**";
font-family: $monospace;
font-family: var(--monospace-font);
color: var(--secondary-ui-text-color);
}
em::before, em::after {
content: "_";
font-family: $monospace;
font-family: var(--monospace-font);
color: var(--secondary-ui-text-color);
}
}
@ -394,7 +426,7 @@ a {
position: absolute;
top: -0.15em;
transition: 0.3s ease all;
font-family: $monospace;
font-family: var(--monospace-font);
color: transparent;
&:first-child {
@ -430,11 +462,13 @@ pre {
tab-size: 4;
word-wrap: normal;
font-family: var(--monospace-font);
}
pre, code {
font-family: $monospace;
font-size: 1rem;
code {
font-family: var(--monospace-font);
font-size: 0.8em;
}
img {
@ -447,7 +481,7 @@ figure {
margin: 0;
figcaption {
font-family: $sansSerif;
font-family: var(--ui-font);
font-size: 1rem;
font-style: italic;
color: var(--secondary-ui-text-color);
@ -671,3 +705,12 @@ figure {
max-width: 720px;
}
}
@media (max-width: 1455px) {
article .article-content aside {
position: initial;
width: 100%;
margin: 0;
transform: unset;
}
}

View File

@ -1,13 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Shadowfacts<% if (category) { %> (<%= category %>)<% } %></title>
<title>Shadowfacts<% if (tag) { %> (<%= tag %>)<% } %></title>
<subtitle>
<% if (category) { %>
Only <%= category %> posts.
<% if (tag) { %>
Only <%= tag %> posts.
<% } else { %>
Just my various ramblings.
<% } %>
</subtitle>
<% if (tag) { %>
<category term="<%= tag %>" />
<% } %>
<link rel="alternate" type="text/html" href="https://shadowfacts.net<%= permalink %>" />
<link rel="self" href="https://shadowfacts.net<%= feedPath %>" type="application/atom+xml" />
<id>https://shadowfacts.net<%= feedPath %></id>
@ -21,12 +24,14 @@
<title><%= post.metadata.title %></title>
<updated><%= post.metadata.date.toISOString() %></updated>
<link rel="alternate" type="text/html" href="https://shadowfacts.net<%= post.metadata.permalink %>" />
<% if (post.metadata.category) { %>
<category term="<%= post.metadata.category %>" />
<% if (post.metadata.tags) { %>
<% for (const tag of post.metadata.tags) { %>
<category term="<%= tag %>" />
<% } %>
<% } %>
<content type="html"><![CDATA[
<%- post.text %>
]]></content>
</entry>
<% } %>
</feed>
</feed>

View File

@ -8,9 +8,11 @@
<% const fullFormatted = formatDate(metadata.date, "hh:mm:ss A MMM Do, YYYY") %>
<time itemprop="datePublished" datetime="<%= metadata.date.toISOString() %>" title="<%= fullFormatted %>"><%= formatted %></time>
</span>
<% if (metadata.category) { %>
<% if (metadata.tags) { %>
in
<span itemprop="articleSection"><a href="/<%= metadata.category %>/" rel="category"><%= metadata.category %></a></span>
<% for (let i = 0; i < metadata.tags.length; i++) { %>
<span itemprop="articleSection"><a href="/<%= metadata.tags[i] %>/" rel="tag"><%= metadata.tags[i] %></a></span><%= i < metadata.tags.length - 1 ? ", " : "" %>
<% } %>
<% } else if (metadata.series) { %>
in
<span itemprop="articleSection"><a href="/tutorials/<%= metadata.series %>" rel="category"><%= metadata.seriesName %></a></span>

View File

@ -48,14 +48,15 @@
</div>
<nav class="site-nav" role="navigation">
<ul>
<li><%- fancyLink("Archive", "/archive/") %></li>
<li><%- fancyLink("Tutorials", "/tutorials/") %></li>
<li><%- fancyLink("RTFM", "https://rtfm.shadowfacts.net") %></li>
<li><%- fancyLink("Type", "https://type.shadowfacts.net") %></li>
<li>
<a href="#" class="dropdown-link" aria-haspopup="true">Other <span class="arrow arrow-down" aria-hidden="true"></span></a>
<ul aria-label="other links">
<li><%- fancyLink("Gitea", "https://git.shadowfacts.net") %></li>
<li><%- fancyLink("Maven", "https://maven.shadowfacts.net") %></li>
<li><%- fancyLink("Type", "https://type.shadowfacts.net") %></li>
<li><%- fancyLink("Meme Machine", "https://mememachine.shadowfacts.net") %></li>
</ul>
</li>

View File

@ -1,9 +1,9 @@
```
metadata.title = "Hello, World!"
metadata.category = "meta"
metadata.tags = ["meta"]
metadata.date = "2016-05-06 11:13:18 -0400"
metadata.oldPermalink = ["/meta/2016/06/07/hello-world/", "/meta/2016/hello-world/"]
metadata.shortDesc = "Hello again, world! Welcome to the third iteration of my website."
```
Hello again, world! Welcome to the third iteration of my website. Originally my site was hosted on GitHub pages and only available at [shadowfacts.github.io](https://shadowfacts.github.io). I wrote a couple of tutorials on using [Forge](http://minecraftforge.net) to mod 1.6.4, but never really finished anything other than super basic setup/recipes. Later, after I got [shadowfacts.net](https://shadowfacts.net), I decided to set up a propper website using [WordPress](https://wordpress.org). I copied over all of the old tutorials from my old GitHub pages site, but never really did anything else with it. After my website being offline for almost a year, I've finally decided to switch back to GitHub for the simplicity (also I <3 [Jekyll](https://jekyllrb.com)). Using Jekyll, I've got a structure in place that I can use to easily publish tutorials in a structured format. There is one tutorial series that I'm currently writing and that is [Forge Mods in 1.9](/tutorials/forge-modding-19/), and hopefully more series will follow.
Hello again, world! Welcome to the third iteration of my website. Originally my site was hosted on GitHub pages and only available at [shadowfacts.github.io](https://shadowfacts.github.io). I wrote a couple of tutorials on using [Forge](http://minecraftforge.net) to mod 1.6.4, but never really finished anything other than super basic setup/recipes. Later, after I got [shadowfacts.net](https://shadowfacts.net), I decided to set up a propper website using [WordPress](https://wordpress.org). I copied over all of the old tutorials from my old GitHub pages site, but never really did anything else with it. After my website being offline for almost a year, I've finally decided to switch back to GitHub for the simplicity (also I <3 [Jekyll](https://jekyllrb.com)). Using Jekyll, I've got a structure in place that I can use to easily publish tutorials in a structured format. There is one tutorial series that I'm currently writing and that is [Forge Mods in 1.9](/tutorials/forge-modding-19/), and hopefully more series will follow.

View File

@ -1,6 +1,6 @@
```
metadata.title = "1.9.4 Porting Spree"
metadata.category = "minecraft"
metadata.tags = ["minecraft"]
metadata.date = "2016-05-21 17:47:18 -0400"
metadata.oldPermalink = ["/mods/2016/05/21/194-porting-spree/", "/minecraft/2016/1-9-4-porting-spree/"]
metadata.shortDesc = "Now that Forge for 1.9.4 is out, I've begun the log and arduous process of porting my mods to 1.9.4 (if by long and arduous, you mean short and trivial)."
@ -42,4 +42,4 @@ Now that Forge for 1.9.4 is [out](http://files.minecraftforge.net/maven/net/mine
<h3 class="mod-name"><a href="http://minecraft.curseforge.com/projects/shadowtweaks">ShadowTweaks</a></h3>
<span class="mod-version"><a href="http://minecraft.curseforge.com/projects/shadowtweaks/files/2302146">1.9.0</a></span>
<p class="mod-desc">A little tweaks mod with a variety of client/server tweaks.</p>
</div>
</div>

View File

@ -1,6 +1,6 @@
```
metadata.title = "Introducing RTFM"
metadata.category = "minecraft"
metadata.tags = ["minecraft"]
metadata.date = "2016-06-29 12:00:00 -0400"
metadata.oldPermalink = ["/meta/2016/06/29/introducing-rtfm/", "/minecraft/2016/introducing-rtfm/"]
metadata.shortDesc = "RTFM is the brand new website that will contain the documentation for all of my projects, currently it only contains documentation for MC mods."
@ -10,4 +10,4 @@ metadata.shortDesc = "RTFM is the brand new website that will contain the docume
<!-- excerpt-end -->
![XKCD #293 RTFM](https://imgs.xkcd.com/comics/rtfm.png)
![XKCD #293 RTFM](https://imgs.xkcd.com/comics/rtfm.png)

View File

@ -1,9 +1,9 @@
```
metadata.title = "Forge Modding Tutorials for 1.10.2"
metadata.category = "minecraft"
metadata.tags = ["minecraft"]
metadata.date = "2016-06-30 10:35:00 -0400"
metadata.oldPermalink = ["/meta/2016/06/30/forge-1102-tutorials/", "/minecraft/2016/forge-modding-tutorials-for-1-10-2"]
metadata.shortDesc = "The Forge modding tutorials have all the been updated to MC 1.10.2 as has the GitHub repo."
```
The Forge modding tutorials have all the been [updated to MC 1.10.2](/tutorials/forge-modding-1102/) as has the [GitHub repo](https://github.com/shadowfacts/TutorialMod/).
The Forge modding tutorials have all the been [updated to MC 1.10.2](/tutorials/forge-modding-1102/) as has the [GitHub repo](https://github.com/shadowfacts/TutorialMod/).

View File

@ -1,6 +1,6 @@
```
metadata.title = "Introducing Mirror"
metadata.category = "java"
metadata.tags = ["java"]
metadata.date = "2016-07-28 16:45:00 -0400"
metadata.oldPermalink = ["/java/2016/07/28/introducing-mirror/", "/java/2016/introducing-mirror/"]
metadata.shortDesc = "Allow me to introduce my latest project, Mirror. Mirror is a reflection library for Java designed to take advantage of the streams, lambdas, and optionals introduced in Java 8."
@ -148,4 +148,4 @@ Mirror.ofAllUnwrapped(Test.class, Test2.class) // create the stream of classes
[enum]: https://shadowfacts.net/Mirror/net/shadowfacts/mirror/MirrorEnum.html
[constructor]: https://shadowfacts.net/Mirror/net/shadowfacts/mirror/MirrorConstructor.html
[method]: https://shadowfacts.net/Mirror/net/shadowfacts/mirror/MirrorMethod.html
[field]: https://shadowfacts.net/Mirror/net/shadowfacts/mirror/MirrorField.html
[field]: https://shadowfacts.net/Mirror/net/shadowfacts/mirror/MirrorField.html

View File

@ -1,6 +1,6 @@
```
metadata.title = "Kotlin and Minecraft Forge"
metadata.category = "minecraft"
metadata.tags = ["minecraft"]
metadata.date = "2016-08-06 16:45:30 -0400"
metadata.oldPermalink = ["/forge/2016/08/06/kotlin-and-forge/", "/minecraft/2016/kotlin-and-minecraft-forge/"]
metadata.shortDesc = "So, you wanna use Kotlin in your Forge mod? Well there's good news, I've just released Forgelin, a fork of Emberwalker's Forgelin, a library that provides utilities for using Kotlin with Minecraft/Forge. "

View File

@ -1,6 +1,6 @@
```
metadata.title = "The Great Redesign"
metadata.category = "meta"
metadata.tags = ["meta"]
metadata.date = "2016-08-07 15:39:48 -0400"
metadata.oldPermalink = ["/meta/2016/08/07/the-great-redesign/", "/meta/2016/the-great-redesign/"]
metadata.shortDesc = "Welcome to the fourth iteration of my website."

View File

@ -1,6 +1,6 @@
```
metadata.title = "Type: A FOSS clone of typing.io"
metadata.category = "misc"
metadata.tags = ["misc"]
metadata.date = "2016-10-08 17:29:42 -0400"
metadata.oldPermalink = ["/misc/2016/10/08/type/", "/misc/2016/type/"]
metadata.shortDesc = "I made an awesome FOSS clone of typing.io that you can check out at type.shadowfacts.net."

View File

@ -1,6 +1,6 @@
```
metadata.title = "The Pretty Good Minor Update"
metadata.category = "meta"
metadata.tags = ["meta"]
metadata.date = "2017-02-17 14:30:42 -0400"
metadata.oldPermalink = ["/meta/2017/02/17/the-pretty-good-minor-update/", "/meta/2017/the-pretty-good-minor-update/"]
metadata.shortDesc = "It's been about six months since the last time I redesigned the site, and while I didn't want to redesign it yet again, I felt it could use a little update to make sure everything's still good."
@ -18,4 +18,4 @@ After reading this [blog post](http://jacquesmattheij.com/the-fastest-blog-in-th
Additionally, there's now a fallback `<noscript>` tag so that if the viewer has JavaScript disabled, the site will still look normal (JavaScript being disabled does mean the theme can't be changed, so the user will always see the light theme). And lastly, there's now a custom 404 page so if you end up at the wrong URL, you'll see something nicer than the default 404 page for GitHub Pages.
Additionally, there's now a fallback `<noscript>` tag so that if the viewer has JavaScript disabled, the site will still look normal (JavaScript being disabled does mean the theme can't be changed, so the user will always see the light theme). And lastly, there's now a custom 404 page so if you end up at the wrong URL, you'll see something nicer than the default 404 page for GitHub Pages.

View File

@ -1,6 +1,6 @@
```
metadata.title = "Comments Powered by GitHub"
metadata.category = "meta"
metadata.tags = ["meta"]
metadata.date = "2017-04-23 09:05:42 -0400"
metadata.oldPermalink = ["/meta/2017/04/23/comments-powered-by-github/", "/meta/2017/comments-powered-by-git-hub/"]
metadata.shortDesc = "I built a way of commenting on my static website using GitHub to store comments."
@ -38,4 +38,4 @@ All of the code for this is open source. The front-end JS is available [here](ht
And that's it! So, do you like this system? Hate it? Have suggestions for how it could be improved? Well now you can leave a comment.
[orig]: http://donw.io/post/github-comments/
[orig]: http://donw.io/post/github-comments/

View File

@ -1,6 +1,6 @@
```
metadata.title = "Reincarnation"
metadata.category = "meta"
metadata.tags = ["meta"]
metadata.date = "2019-09-18 10:34:42 -0400"
metadata.shortDesc = "Stand by for reincarnation."
metadata.oldPermalink = "/meta/2019/reincarnation/"

View File

@ -1,6 +1,6 @@
```
metadata.title = "ActivityPub Resources"
metadata.category = "activitypub"
metadata.tags = ["activitypub"]
metadata.date = "2019-09-22 17:50:42 -0400"
metadata.shortDesc = "A compilation of resources I found useful in learning/implementing ActivityPub."
metadata.oldPermalink = "/activitypub/2019/activity-pub-resources/"

View File

@ -1,6 +1,6 @@
```
metadata.title = "Learning Elixir"
metadata.category = "elixir"
metadata.tags = ["elixir"]
metadata.date = "2019-10-10 12:29:42 -0400"
metadata.shortDesc = "How I learned Elixir and why I love it."
metadata.oldPermalink = "/elixir/2019/learning-elixir/"

View File

@ -1,6 +1,6 @@
```
metadata.title = "Building a JavaScript-Free Slide-Over Menu"
metadata.category = "web"
metadata.tags = ["web"]
metadata.date = "2019-11-11 21:08:42 -0400"
metadata.shortDesc = "Building a slide-over hamburger menu without using JavaScript."
metadata.oldPermalink = "/web/2019/js-free-hamburger-menu/"

View File

@ -1,6 +1,6 @@
```
metadata.title = "Mocking HTTP Requests for iOS App UI Tests"
metadata.category = "swift"
metadata.tags = ["swift"]
metadata.date = "2019-12-22 19:12:42 -0400"
metadata.shortDesc = "Integrating a tiny web server into your Xcode UI test target to mock HTTP requests."
metadata.oldPermalink = "/ios/2019/mock-http-ios-ui-testing/"

View File

@ -1,6 +1,6 @@
```
metadata.title = "Faking the Mongo Eval Command"
metadata.category = "swift"
metadata.tags = ["swift"]
metadata.date = "2020-01-28 19:33:42 -0400"
metadata.shortDesc = "MongoDB 4.2 removed the eval command, which is a good security measure, but unfortunate for building database-viewing GUI."
metadata.slug = "faking-mongo-eval"
@ -81,4 +81,4 @@ let result = output.components(separatedBy: "\n").compactMap { (json) in
}
```
And there we have it, the data is finally in a form we can understand from the Swift side of things. If you want to see the whole source code for this, it's [part of MongoView](https://git.shadowfacts.net/shadowfacts/MongoView/src/commit/9488c108b693607e827ef77e5bc16f2cdd491f7c/MongoView/MongoEvaluator.swift). As far as I have come up with, that's about the best way of replicating the `eval` command of previous versions of Mongo. If you have any suggestions for how to improve this or make it more robust, let me know!
And there we have it, the data is finally in a form we can understand from the Swift side of things. If you want to see the whole source code for this, it's [part of MongoView](https://git.shadowfacts.net/shadowfacts/MongoView/src/commit/9488c108b693607e827ef77e5bc16f2cdd491f7c/MongoView/MongoEvaluator.swift). As far as I have come up with, that's about the best way of replicating the `eval` command of previous versions of Mongo. If you have any suggestions for how to improve this or make it more robust, let me know!

View File

@ -1,6 +1,6 @@
```
metadata.title = "Simple Swift Promises"
metadata.category = "swift"
metadata.tags = ["swift"]
metadata.date = "2020-02-18 22:10:42 -0400"
metadata.shortDesc = "Building a rudimentary implementation of asynchronous promises in Swift."
metadata.slug = "simple-swift-promises"

View File

@ -1,6 +1,6 @@
```
metadata.title = "Writing a JavaScript Syntax Highlighter in Swift"
metadata.category = "swift"
metadata.tags = ["swift"]
metadata.date = "2020-04-09 11:48:42 -0400"
metadata.shortDesc = "Things I learned while building a tiny syntax highlighter."
metadata.slug = "syntax-highlighting-javascript"

View File

@ -1,6 +1,6 @@
```
metadata.title = "The Sorry State of Thunderbolt 3 Docks"
metadata.category = "computers"
metadata.tags = ["computers"]
metadata.date = "2020-04-13 17:19:42 -0400"
metadata.shortDesc = "On a quest to find a Thunderbolt dock that meets my needs."
metadata.slug = "thunderbolt-3"

View File

@ -1,6 +1,6 @@
```
metadata.title = "Switching to Vim"
metadata.category = "editors"
metadata.tags = ["editors"]
metadata.date = "2020-05-21 18:22:42 -0400"
metadata.shortDesc = "How I went about joining the cult of Vim."
```

View File

@ -1,6 +1,6 @@
```
metadata.title = "Algorithmic Bias"
metadata.category = "misc"
metadata.tags = ["misc"]
metadata.date = "2020-06-05 09:55:42 -0400"
metadata.shortDesc = ""
```

View File

@ -1,6 +1,6 @@
```
metadata.title = "Replicating Safari's Link Preview Animation"
metadata.category = "swift"
metadata.tags = ["swift"]
metadata.date = "2020-07-03 16:28:42 -0400"
metadata.shortDesc = ""
metadata.slug = "uipreviewparameters-textlinerects"
@ -122,7 +122,9 @@ return UITargetedPreview(view: snapshotContainer, parameters: parameters, target
And with that, only the link text is visible in the preview animation and it expands nicely into the full preview:
<div>
<%- video(metadata, "masked", {style: "width: 50%; margin: 0 auto; display: block;", title: "Screen recording of a link being previewed and dismissed with the link text animating back to its starting position upon dismissal."}) %>
</div>
But, there's still one small detail as keen-eyed readers may have noticed. In Safari, when dismissing the full preview, it animates back into the preview view and springs back to the original position. With our implementation, however, it doesn't. The preview view controller does animate back into the preview view, however, instead of returning to the original position, it disappears off into the middle of the screen. This is because there's still one `UIContextMenuInteractionDelegate` method we need to implement: `contextMenuInteraction(_:previewForDismissingMenuWithConfiguration:)`. Similar to the `previewForHighlighting` method, this method takes the interaction and the context menu configuration, creating a `UITargetedPreview` that should be used during the dismissal animation. Since we want the preview to go back to the same location while dismissing as it came from while expanding, we can cache the targeted preview we've already constructed for the highlight method and return it from the dismissal method.
@ -145,4 +147,4 @@ Now, when dismissing the preview, it animates back into the link text where it o
<div>
<%- video(metadata, "dismiss", {style: "width: 50%; margin: 0 auto; display: block;", title: "Screen recording of a link being previewed and dismissed with the link text animating back to its starting position upon dismissal."}) %>
</div>
</div>

View File

@ -1,6 +1,6 @@
```
metadata.title = "Implement a Gemini Protocol Client Using Network.framework"
metadata.category = "swift"
metadata.tags = ["swift", "gemini"]
metadata.date = "2020-07-22 21:57:42 -0400"
metadata.shortDesc = ""
metadata.slug = "gemini-network-framework"
@ -463,4 +463,4 @@ task.resume()
Network.framework is a super is useful tool for writing custom networking code and building abstractions on top of relatively low level protocols. The example I gave here isn't a hypothetical, I'm using Network.framework and almost this exact code to build a [Gemini browser](https://git.shadowfacts.net/shadowfacts/Gemini) app for Mac and iOS.
This post has barely scratched the surface, there's even more interesting stuff the framework is capable of, such as building peer-to-peer protocols. The documentation, in particular the [Tic-Tac-Toe sample project](https://developer.apple.com/documentation/network/building_a_custom_peer-to-peer_protocol) is great resource for seeing more of what's possible.
This post has barely scratched the surface, there's even more interesting stuff the framework is capable of, such as building peer-to-peer protocols. The documentation, in particular the [Tic-Tac-Toe sample project](https://developer.apple.com/documentation/network/building_a_custom_peer-to-peer_protocol) is great resource for seeing more of what's possible.

View File

@ -0,0 +1,97 @@
```
metadata.title = "SwiftUI Auto-Expanding Text Views"
metadata.tags = ["swift"]
metadata.date = "2020-08-29 11:20:42 -0400"
metadata.shortDesc = "Building a non-scrolling UITextView for use in SwiftUI layouts."
metadata.slug = "swiftui-expanding-text-view"
```
I'm currently in the process of rewriting the Compose screen in Tusker to use SwiftUI. This has mostly been a smooth process, but there have been a few hiccups, the first of which was the main text box. The updates to SwiftUI introduced in iOS 14 included [`TextEditor`](https://developer.apple.com/documentation/swiftui/texteditor), the SwiftUI equivalent of `UITextView` to allow multi-line text editing. Unfortunately, there's no (straightforward) way of disabling scrolling, making it unsuitable for some designs where the text view is embedded in a separate scroll view. Additionally, the fact that it's not available at all on iOS 13 means layouts that require non-scrolling multi-line text editors must wrap `UITextView` themselves in order to be achievable with SwiftUI.
<!-- excerpt-end -->
You'd think this would be pretty simple: just use `UIViewRepresentable` with `UITextView` and disable scrolling. But if you try that approach, you'll find a few issues that make things a bit more complex. While setting the `isScrollEnabled` property on the text view to `false` does indeed disable scrolling and make the text view expand itself as more lines are typed, the text view does not entirely respect SwiftUI's layout system. Typing text that is larger than the available space causes the text view to expand outwards from the centerpoint, screwing up the layout, instead of wrapping the text onto the next line.
<div>
<%- video(metadata, "scroll-disabled", {style: "width: 50%; margin: 0 auto; display: block;", title: "Screen recording of a non-scrolling UITextView inside SwiftUI being edited. When the text view grows, it expands from the center point and ends up offscreen."}) %>
</div>
Enabling scrolling on the text view partially solves this, making the text wrap whenever the user types something longer than fits on a single line. Of course, this also reintroduces the problem that the text view now scrolls instead of expanding to fit the contents. The simplest solution I've come up with for this problem is to have the SwiftUI side of the layout automatically expand the text view's frame whenever the contents changes. So, even though the `UITextView` is allowed to scroll, it never will because the layout will ensure that the actual size of the view is always taller than the text's height. Additionally, with bouncing disabled, there's no indication from the user's perspective that this is anything other than a regular non-scrolling text view.
Actually implementing this is pretty simple. There's a `UIViewRepresentable` which wraps the `UITextView` and plumbs a `Binding<String>` up to the text view. It also stores a closure that receives the `UITextView` which is invoked whenever the text changes, using the `UITextViewDelegate` method. This will allow the actual SwiftUI view to listen for text view changes and update the frame of the wrapped view.
```swift
import SwiftUI
struct WrappedTextView: UIViewRepresentable {
typealias UIViewType = UITextView
@Binding var text: String
let textDidChange: (UITextView) -> Void
func makeUIView(context: Context) -> UITextView {
let view = UITextView()
view.isEditable = true
view.delegate = context.coordinator
return view
}
func updateUIView(_ uiView: UITextView, context: Context) {
uiView.text = self.text
DispatchQueue.main.async {
textDidChange(uiView)
}
}
func makeCoordinator() -> Coordinator {
return Coordinator(text: $text, textDidChange: textDidChange)
}
class Coordinator: NSObject, UITextViewDelegate {
@Binding var text: String
let textDidChange: (UITextView) -> Void
init(text: Binding<String>, textDidChange: @escaping (UITextView) -> Void) {
self._text = text
self.textDidChange = textDidChange
}
func textViewDidChange(_ textView: UITextView) {
self.text = textView.text
self.textDidChange(textView)
}
}
}
```
One key line to note is that, in the `updateUIView` method, after the text is updated, the `textDidChange` closure is called. This is necessary because the `UITextView.text` setter does not call the delegate method automatically. So, if the text was changed programatically, the delegate method wouldn't be called and, in turn, the did-change callback wouldn't execute, preventing the height from updating. `DispatchQueue.main.async` is used to defer running updating the view height until the next runloop iteration for two reasons:
1. So that we're not modifying view state during view updates, as that's undefined behavior in SwiftUI.
2. Because the UITextView doesn't recalculate its content size immediately when the text is set.
Waiting until the next runloop iteration solves both of those issues: the SwiftUI view updates will have finished and the text view will have recalculated its size.
The wrapping SwiftUI view is pretty simple. It passes the string binding through to the wrapped view and it also stores its minimum height, as well as an internal `@State` variable for the current height of the text view. The text view height is an optional, because before the text view appears, there is no height.
```swift
struct ExpandingTextView: View {
@Binding var text: String
let minHeight: CGFloat = 150
@State private var textViewHeight: CGFloat?
var body: some View {
WrappedTextView(text: $text, textDidChange: self.textDidChange)
.frame(height: height ?? minHeight)
}
private func textDidChange(_ textView: UITextView) {
self.height = max(textView.contentSize.height, minHeight)
}
}
```
Now, everything works correctly. The text view wraps text and expands to fit user input as expected, as well as updating its height when the content is altered in code.
<div>
<%- video(metadata, "custom-wrapper", {style: "width: 50%; margin: 0 auto; display: block;", title: "Screen recording of a custom text view inside SwiftUI. When the text changes, the scroll view does not overflow and the height expands to fit the content."}) %>
</div>

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 120 KiB

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -3,9 +3,9 @@ metadata.layout = "default.html.ejs"
```
<div class="main">
<h1 class="page-heading"><%= category %> posts</h1>
<h1 class="page-heading"><%= tag %> posts</h1>
<p class="rss">
Subscribe to just <%= category %> posts via <a href="/<%= category %>/feed.xml">RSS</a>.
Subscribe to just <%= tag %> posts via <a href="/<%= tag %>/feed.xml">RSS</a>.
</p>
<% for (const post of posts) { %>

View File

@ -1,5 +1,6 @@
```
metadata.layout = "default.html.ejs"
metadata.title = "Tutorials"
```
<div class="main">
@ -19,4 +20,4 @@ metadata.layout = "default.html.ejs"
</p>
</article>
<% } %>
</div>
</div>