...
 
Commits (6)
# Blaine's World
[Personal website of Blaine Murphy](https://blaines.world/) built using
[Jekyll](https://jekyllrb.com/) and hosted using
[GitLab Pages](https://docs.gitlab.com/ee/user/project/pages/).
[Jekyll](https://jekyllrb.com/) and hosted on
[Neocities](https://neocities.org/).
## Testing
......@@ -27,7 +27,7 @@ a weird format that trips viewer implementations up. This utility requires
[Gifsicle](https://www.lcdf.org/gifsicle/) to be installed.
```shell
$ ./fixgif static/bullet.gif
$ ./_utils/fixgif static/bullet.gif
```
### vid2gif
......@@ -35,7 +35,7 @@ The `vid2gif` script is used to convert a video into an animated gif. This
utility requires [FFmpeg](https://ffmpeg.org/) to be installed.
```shell
$ ./vid2gif input.mp4 output.gif
$ ./_utils/vid2gif input.mp4 output.gif
```
......
......@@ -4,9 +4,6 @@ timezone: America/New_York
exclude:
- README.md
- LICENSE
- project.geany
- fixgif
- vid2gif
sass:
style: compressed
......
- title: NeoCities.org
filename: neocities.gif
url: https://neocities.org/
- title: TEXTFILES.COM
filename: textfiles.gif
url: http://www.textfiles.com/
- title: Internet Explorer = Shit!
filename: noie.gif
url: https://www.mozilla.org/en-US/firefox/new/
- title: Web Interoperability Pledge
filename: wip.gif
url: https://www.w3.org/Promotion/WIP/
- title: Linux Now!
filename: linux.gif
title: Blaine's World
owner: Blaine Murphy
copyright: 2020
copyright: 2018-2020
email: [email protected]
source_repo: https://gitlab.com/unixispower/blaines-world
neocities: blainesworld
cors_proxy: https://b5e8cb1de89848f8a0cf736819.herokuapp.com/
......@@ -21,6 +21,6 @@
{%- if _flair -%}
<img class="flair flair-{{ include.name }}"
src="{% include static_url.fn filename=_flair.filename %}"
src="{% include static_url.fn dirname='flair' filename=_flair.filename %}"
alt="{{ _flair.title | escape }}" />
{%- endif -%}
......@@ -2,7 +2,15 @@
Generate the root-relative path of a static site asset
Parameters:
include.filename: filename of the asset in the static directory
include.dirname: name of subdirectory in static directory
include.filename: filename of the asset in the subdirectory
{%- endcomment -%}
{{- site.baseurl }}/static/{{ include.filename -}}
{%- if include.dirname -%}
{%- assign _dir_segment = include.dirname | append: "/" -%}
{%- else -%}
{%- assign _dir_segment = "" -%}
{%- endif -%}
{{- site.baseurl }}/static/{{ _dir_segment }}{{ include.filename -}}
......@@ -8,7 +8,7 @@
{%- endcomment -%}
<div class="video video-{{ include.aspect | replace: ":", "-" }}">
<div class="video video-{{ include.aspect | replace: ':', '-' }}">
{%- if include.service == "youtube" -%}
<iframe class="video-iframe"
src="//www.youtube.com/embed/{{ include.id }}"
......
......@@ -3,7 +3,7 @@
Parameters:
page.title: page title
page.no_title: if true page title is omitted from head>title tag
Configuration:
site.data.site.title: site title placed in head>title tag
site.data.site.owner: name of site owner
......@@ -14,7 +14,12 @@
{%- endcomment -%}
{%- assign _title = site.data.site.title | prepend: " - " | prepend: page.title -%}
{%- assign _title = site.data.site.title -%}
{%- if page.title -%}
{%- unless page.no_title == true %}
{%- assign _title = _title | prepend: " - " | prepend: page.title -%}
{%- endunless -%}
{%- endif -%}
<!DOCTYPE html>
<html>
......@@ -28,7 +33,6 @@
<body class="base">
<header class="header">
<div class="header-banner">
<img class="header-banner-image" src="{% include static_url.fn filename='banner-1.gif' %}" alt="{{ site.data.site.title | escape }}"
/><img class="header-banner-image" src="{% include static_url.fn filename='banner-2.gif' %}" alt="" />
</div>
......@@ -38,7 +42,7 @@
{%- for _link in site.data.links.internal -%}
{% assign _link_count = _link_count | plus: 1 %}
<a class="header-link header-link-{{ _link_count }}" href="{% include link_url.fn link=_link %}">
<img class="header-icon" src="{% include static_url.fn filename=_link.icon %}" alt="" />
<img class="header-icon" src="{% include static_url.fn dirname='icons' filename=_link.icon %}" alt="" />
{{ _link.title | escape }}
</a>
{%- endfor -%}
......@@ -46,7 +50,7 @@
{%- for _link in site.data.links.external -%}
{% assign _link_count = _link_count | plus: 1 %}
<a class="header-link header-link-{{ _link_count }}" href="{% include link_url.fn link=_link %}">
<img class="header-icon" src="{% include static_url.fn filename=_link.icon %}" alt="" />
<img class="header-icon" src="{% include static_url.fn dirname='icons' filename=_link.icon %}" alt="" />
{{ _link.title | escape }}
</a>
{%- endfor -%}
......@@ -55,7 +59,34 @@
</header>
<div class="body">{{ content }}</div>
<footer class="footer">
<div class="footer-notice">Copyright {{ site.data.site.copyright }} {{ site.data.site.owner }}, <a href="mailto:{{ site.data.site.email }}">contact</a> for use.</div>
<div class="footer-notice">
<span class="footer-line">This site is <a href="{{ site.data.site.source_repo }}">open source software</a>.</span>
<span class="footer-line">Content is copyright {{ site.data.site.copyright }} <a href="mailto:{{ site.data.site.email }}"> {{ site.data.site.owner }}</a>.</span>
</div>
<div class="footer-badges">
{%- for _badge in site.data.badges -%}
<div class="footer-badge">
{%- if _badge.url %}<a href="{% include link_url.fn link=_badge %}">{% endif -%}
<img src="{% include static_url.fn dirname='badges' filename=_badge.filename %}" alt="{{ _badge.title | escape }}" />
{%- if _badge.url %}</a>{% endif -%}
</div>
{%- endfor -%}
</div>
<a id="counter" class="footer-counter" href="https://neocities.org/site/{{ site.data.site.neocities }}"></a>
</footer>
<script src="{% include static_url.fn filename='counter.js' %}"></script>
<script>
(function() {
var URL_TEMPLATE = '{% include static_url.fn dirname="digits" filename="{digit}.gif" %}';
function render(digit) {
var src = URL_TEMPLATE.replace('{digit}', digit);
return '<img src="' + src + '" alt="' + digit + '" />';
}
counter.init(
'#counter', render,
'{{ site.data.site.neocities }}',
'{{ site.data.site.cors_proxy }}');
})();
</script>
</body>
</html>
......@@ -41,19 +41,17 @@ layout: base
{%- endif -%}
<article class="document">
{%- unless page.no_header -%}
<header class="document-header">
<header class="document-header {% if page.no_header %}document-header-hidden{% endif %}">
<h1 class="document-title">{{ page.title | escape }}</h1>
{%- if page.flair %}
{%- if page.flair %}
<div class="document-flair">
{%- include flair.html name=page.flair -%}
{%- include flair.html name=page.flair -%}
</div>
{%- endif -%}
{%- if page.date -%}
{%- endif -%}
{%- if page.date -%}
<div class="document-date">Published {% include date.html date=page.date %}</div>
{%- endif -%}
{%- endif -%}
</header>
{%- endunless -%}
<div class="document-content">
{{- content -}}
</div>
......
......@@ -14,7 +14,7 @@
body {
color: $text-color;
background: url("bg.gif") center $bg-color;
background: url("bg.gif") top center $bg-color;
font-family: $text-font-family;
font-size: $text-font-size;
line-height: 1.0;
......
......@@ -9,10 +9,10 @@
color: $meta-color;
text-align: center;
&-banner { margin-bottom: $narrow-gap; }
&-banner { margin: $narrow-gap 0; }
&-banner-image {
max-width: 100%;
margin-bottom: $narrow-gap;
margin: $narrow-gap 0;
}
&-links { text-align: center; }
......@@ -36,12 +36,28 @@
color: $meta-color;
text-align: center;
&-notice { line-height: $text-line-height; }
&-notice {
line-height: $text-line-height;
margin-bottom: $medium-gap;
}
&-line {
display: inline-block;
}
&-badges { margin-bottom: $medium-gap; }
&-badge {
display: inline-block;
margin: $narrow-gap;
}
&-counter {
white-space: nowrap;
}
}
.header:after, .footer:before {
content: "";
display: block;
height: 19px;
background: url("divider-1.gif") no-repeat center;
background: url("divider-1.gif") repeat-x;
margin: $wide-gap 0;
}
......@@ -4,6 +4,10 @@
&-header {
margin-bottom: $medium-gap;
}
&-header-hidden {
display: none;
}
&-title {
display: inline;
margin: 0;
......
......@@ -2,6 +2,7 @@
layout: document
title: Welcome
flair: in-progress
no_title: true
no_header: true
---
{% include image.html filename="welcome.gif"
......
index/welcome.gif

43.3 KB | W: | H:

index/welcome.gif

16.5 KB | W: | H:

index/welcome.gif
index/welcome.gif
index/welcome.gif
index/welcome.gif
  • 2-up
  • Swipe
  • Onion skin
---
layout: document
title: Page Not Found
no_header: true
---
{% include image.html filename="error.gif" no_link=true pixelated=true
alt="HTTP 404 - File not found" %}
/*
* Neocities view counter
* This script requires the use of a CORS proxy to be used on Neocities pages.
*/
var counter = (function() {
var API_URL = 'https://neocities.org/api/info?sitename=';
// make an async HTTP GET request
function sendRequest(method, url, onDone) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == request.DONE && request.status === 200) {
onDone(request);
}
};
request.open(method, url, true);
request.send();
}
return {
/*
* Initialize a hit counter by fetching a the site view count from the
* Neocities API, rendering each digit using a callback, and placing
* the rendered markup in a container element.
*
* The markup template for each digit is defined in the page as a
* callback function. The following creates an IMG tag for each digit:
*
* function render(digit) {
* return '<img src="/' + digit + '.gif" alt="' + digit + '" />';
* }
*
* The proxy URL points to a server that proxies requests to an HTTP
* server and injects CORS headers into the returned responses. This
* URL will be prepended to the Neocities API URL. An example is
* 'https://example.com/'.
*
* Parameters;
* selector: CSS selector that identifies the container element
* renderFunction: function that converts a digit to an element
* neocitiesUsername: username of the neocities profile to query
* proxyUrl: URL of CORS proxy server
*/
init: function(selector, renderFunction, neocitiesUsername, proxyUrl) {
var rootElement = document.querySelector(selector);
var api_url = proxyUrl + API_URL + neocitiesUsername;
sendRequest('GET', api_url, function(request) {
var json = JSON.parse(request.responseText);
var viewCount = json.info.views;
var countDigits = viewCount.toString().split('');
var digitHtml = countDigits.map(renderFunction).join('');
rootElement.innerHTML = digitHtml;
});
}
}
})();