Compare commits

...

5 commits

10 changed files with 369 additions and 95 deletions

2
.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
public/
*~

2
site-config Normal file
View file

@ -0,0 +1,2 @@
#!/bin/bash
TITLE="yukjoou's internet homepage!"

Binary file not shown.

Before

Width:  |  Height:  |  Size: 837 B

View file

@ -1,101 +1,97 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<h1>about me</h1>
<p>
i'm an autistic gay trans girl who likes computers. i like old technologies
and other stuff that doesn't work properly.
<br />
i'm the webmistress that runs
<a href="https://kemonomimi.gay">kemonomimi.gay</a>, with the help of my
amazing friends :3
</p>
<p>
i like spending time on the internet, and seeing what the cute people of the
fediverse post. when i'm not doing that, i like to write code and do silly
projects! <br />
i also have a
<a href="https://blog.kemonomimi.gay/yukijoou/">blog</a>, though it's quite
empty for now...
</p>
<meta content="yukijoou's web place" property="og:title" />
<meta
content="i'm yukijoou (ja: 雪女王), and i post things on the internet"
property="og:description"
/>
<meta content="#ADD8E6" data-react-helmet="true" name="theme-color" />
<h2>talk to me. i dare u.</h2>
<p>
i'm available on matrix: &commat;yukijoou:catgirl.cloud
<br />
i have a fedi account:
<a href="https://fedi.kemonomimi.gay/yukijoou"
>&commat;yukijoou&commat;fedi.kemonomimi.gay</a
>
<br />
i also have a selfhosted email:
<a href="#" id="email">[SHOW EMAIL]</a>
<title>yukijoou's internet homepage :3</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>yukijoou's homepage</h1>
<p class="subtitle">雪女王</p>
<p>
i like posting silly things on the web! you can find a bunch of
it here!
</p>
</header>
<noscript>
<p>
<b>Please enable javascript to see my email :3</b> (only using it as
an anti-scraper thing). if you really don't want to, here is my
base64-encoded email: eXVraWpvb3VAa2Vtb25vbWltaS5nYXk=
</p>
</noscript>
<script>
const email = atob("eXVraWpvb3VAa2Vtb25vbWltaS5nYXk=");
const emailDisplay = document.getElementById("email");
emailDisplay.addEventListener(
"click",
(event) => {
emailDisplay.href = "mailto:" + email;
emailDisplay.innerText = email;
event.preventDefault();
},
{ once: true },
);
</script>
</p>
<main>
<h1>about me</h1>
<p>
i'm an autistic gay trans girl who likes computers. i like old
technologies and other stuff that doesn't work properly.
<br />
i'm the webmistress that runs
<a href="https://kemonomimi.gay">kemonomimi.gay</a>, with the
help of my amazing friends :3
</p>
<p>
btw, i use
<a href="https://archlinux.org">
<img src="badges/archlinux.png" alt="archlinux"
/></a>
on my computers. just thought you should know. (i am not
flexing) (it's just for your information)
</p>
<h1>silly projects</h1>
<p>the things i do at my computer :3</p>
<h2>talk to me. i dare u.</h2>
<p>
i'm available on matrix: &commat;yukijoou:catgirl.cloud
<br />
i also have a temporary email, while i figure out how to host an
email server:
</p>
<h2>site-inator</h2>
<p>
this is a dead simple HTML pages generator that makes making dead simple
websites easy! it's written in bash, so really easy to run on all sorts of
systems, and fairly simple to use. <br />learn more
<a href="/site-inator.html">over here</a>
</p>
<address><a href="#" id="email">[SHOW EMAIL]</a></address>
<noscript>
Please enable javascript :3 if you really don't want to, here is
my base64-encoded email: eWlraWpvb3VAbGFwb3N0ZS5uZXQ=
</noscript>
<h2>convertablet</h2>
<p>
it's a dameon to get 2-in-1 laptop/tablet convertible devices to work well
using wlroots-based compositors on linux. for now it's more or less
specifically made for my own lenovo miix-320icr, but the goal is to make it
so that all laptops that can act as tablets work smoothly on linux+wlroots.
</p>
<p>
currently hosted at
<a href="https://git.kemonomimi.gay/yukijoou/convvertablet"
>yukijoou/convertablet</a
>, no proper documentation yet, but if you want to get it working on your
device, please get in touch! i'll be more than happy to make it work, and
will include support for your device once i get it in a working state!
</p>
<script>
const email = atob("eWlraWpvb3VAbGFwb3N0ZS5uZXQ=");
const emailDisplay = document.getElementById("email");
emailDisplay.addEventListener(
"click",
(event) => {
emailDisplay.href = "mailto:" + email;
emailDisplay.innerText = email;
event.preventDefault();
},
{ once: true }
);
</script>
<h2>kemonomimi.gay</h2>
<p>
i do sysadmin work to keep the websites and services we host running! most
of my work is behind the scene, and shoudln't be noticeable (i hope). at
some point, i want to opensource most of the scripts i use to manage this
infrastructure so that other people can see how it all works, and be
inclined to selfhost their stuff ^_^
</p>
<h1>silly projects</h1>
<p>more coming soon here!</p>
<p>
i'm working on getting more services on
<a href="https://kemonomimi.gay">kemonomimi.gay</a>, and
bringing some web things i've already done to this website!
</p>
</main>
<footer>
<p>
&copy; 2023 - Yuki Joou.
<br />
This website is best viewed on the Firefox browser with the
<a href="https://brailleinstitute.org/freefont">
Atkinson Hyperlegible</a
>
font. I do not care about chromium-based browser compatibility.
<br />
<em>
My content is available under the CC0 license, unless
specified otherwise. Please consider crediting me if you use
my work.
</em>
</p>
</footer>
</body>
</html>
<h2>reduced motion in opensource projects</h2>
<p>
i'm on a crusade to get as much of the software i'm using as possible to be
reduced-motion friendly. as i'm quite motion-sensitive, i really don't like
stuff that moves arounde everywhere, so i try to make websites and apps not
have it when the "reduced motion" setting is enabled! <br />
i don't have any page where i track this sort of thing, i just mostly do
one-off contribution to projects and hope they accept it
</p>

184
src/site-inator.html Normal file
View file

@ -0,0 +1,184 @@
<h1>site-inator</h1>
<p>
this is a silly webpage/websites generator i made mostly to help me make
this website. its goals are:
</p>
<ul>
<li>
<b>be as simple as possible</b>: very little code, very little
functionality, no more, no less than what i need
</li>
<li>
<b>no hidden secrets</b>: it's easy to see where the pieces of the
generated code come from
</li>
<li>
<b>generate html ahead-of-time</b>: no on-the-fly generation, cgi, or
special server software, all the content is generated ahead of time, and
can be served by any generic http server
</li>
<li>
and most importantly, <b>have a good user experience for me</b>: i
mostly made this tool to suite my purpose, while i'm happy if others
want to use it or contribute code, i don't want for it to become harder
to make my dead simple website with it!
</li>
</ul>
<h1>making a website using it!</h1>
<p>
if you want to make your own website using this tool, i recommend starting
by learning how to write html pages. for this, you can check out one of the
many tutorials about this online, like
<a
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML"
>the mdn html introduction</a
>. once you're familiar with html, come back to this page!
</p>
<h2>step zero: installing the tool</h2>
<p>
you can find the source code for it at
<a href="https://git.kemonomimi.gay/yukijoou/site-inator"
>yukijoou/site-inator</a
>. i'll assume you know how to use git and can figure out how to download
the file from there. if you don't, hit up your local ccomputer nerd on fedi,
or me, and ask them, they'll know how to help you! <br />
once you have the tool installed, run it in the <em>example/</em> folder to
check everything works. this should make a <em>public/</em> folder with 2
html files.
</p>
<p class="tip">
if you want to start experimenting with how the tool works, editing the
example is a good place to start!
</p>
<h2>step one: create the folder structure</h2>
<p>
you'll need to structure your site in a specific way for site-inator to know
what to do with all your files.
</p>
<p class="tip">
check out the
<a
href="https://git.kemonomimi.gay/yukijoou/site-inator/src/branch/master/example"
>example</a
>
if you're unsure of what goes in which folder/file!
</p>
<h3>the <em>template/</em> folder</h3>
<p>in this folder, you need to create two files:</p>
<ul>
<li>
<em>header.html</em><br />this will be your website's header. in this
file, you should not only specify the <code>&lt;head&gt;</code> tag, but
also part of the <code>&lt;body&gt;</code> that you want to keep
consistant between pages (like, for example, your site's logo, or a bar
with buttons to navigate around your website!)
</li>
<li>
<em>footer.html</em><br />this works the same way the header file does,
but for the bottom of your web page. you should add your copyright
notice, or links to your social networks there! also, don't forget to
close your <code>&lt;body&gt;</code> and <code>&lt;html&gt;</code> tags
in there
</li>
</ul>
<p>
those file will wrap around any other html file you use for your website!
speaking of other html files...
</p>
<h3>the <em>src/</em> folder</h3>
<p>
this folder will contain all the html source files for your website. any
html file you put in here will be wrapped in the header and footer defined
earlier. non-html files will (mostly, more on that later!) be ignored.
</p>
<p>
the file structure inside this folder will be replicated in your final
website, so if you create the file <em>foo/bar.html</em>, it'll correspond
to the file <em>/foo/bar.html</em> on your final website, except it'll also
have the header and footer surrounding it!
</p>
<h3>the <em>static/</em> folder</h3>
<p>
this is the simplest one of the bunch: put file in, and they'll just be
copied to your final website, exactly as you put them. no header/footer
add-on, just the raw file.<br />
this is where you put in your <em>style.css</em>, or your images and other
assets!
</p>
<p class="tip">
you don't have to create a <em>static/</em> folder! if you don't,
site-inator will just ignore it
</p>
<h2>step two: configuration files</h2>
<p>
configuration files mostly allow you to configure a page's title for now,
but will be able to do more in the future!<br />
there is a global configuration file you're required to create, and you can
optionally create one for each of your html file in <em>src/</em> if you
want to!
</p>
<p>
the main config file is located at the root, so next to the
<em>src/</em> and <em>template/</em> folders. it should be named
<em>site-config</em>, and contain the following:
</p>
<pre>
#!/bin/bash
TITLE="&lt;your title goes here!&gt;"
</pre>
<p>
this 'title' isn't used by default, but whatever you set the title to will
replace any occurence of <code>&lsqb; title &rsqb;</code> in the source or
template html files!<br />
on this website, i use it in the header to set the value of the
<code>&lt;head&gt;</code> tag in the header, but you can use it in any place
you want, or multiple times!
</p>
<p>
this title can then be overriden on a page-by-page basis by creating a
page-specific config file. you can do so by making a file with the same name
as your page, but with <em>.config</em> appended to the end.<br />
so, for example, if i want to change the title of the page
<em>src/foo/bar.html</em>, i would create a file named
<em>src/foo/bar.html.config</em>. this file should contain the exact same
thing as the global config file, except it will only be used for that one
page!
</p>
<h3>step three: generating and publishing your site!</h3>
<p>
you can now just run <code>site-inator</code> at the root of your website
(in the folder where you have your <em>template/</em> and
<em>src/</em> folders), and it will generate a <em>public/</em> folder with
all your generated website code!<br />
you can now test your website with something like
<code>python -m http.server</code>, and copy it to wherever you need to have
it shown to the internet!
</p>
<hr />
<p>
i hope this tool will be useful to some people! if you have any question or
concern, feel free to reach out to me, my contact info is on the main page
of this website!
</p>

View file

@ -0,0 +1,2 @@
#!/bin/bash
TITLE="site-inator: silly site generator - yukijoou"

View file

@ -73,3 +73,29 @@ footer {
text-align: justify;
}
#site-navigation {
width: 100%;
}
#site-navigation ul {
width: 100%;
display: flex;
flex-wrap: wrap;
list-style-type: none;
justify-content: space-evenly;
padding: 0;
}
#site-navigation li {
padding: 0 1em;
}
.tip {
font-style: italic;
}
.tip::before {
content: "TIP: ";
font-style: normal;
}

21
template/footer.html Normal file
View file

@ -0,0 +1,21 @@
</main>
<footer>
<p>
&copy; 2023 - Yuki Joou.
<br />
This website is best viewed on the Firefox browser with the
<a href="https://brailleinstitute.org/freefont">
Atkinson Hyperlegible</a
>
font. I do not care about chromium-based browser compatibility.
<br />
<em>
My content is available under the CC0 license, unless
specified otherwise. Please consider crediting me if you use
my work.
</em>
</p>
</footer>
</body>
</html>

33
template/header.html Normal file
View file

@ -0,0 +1,33 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta content="yukijoou's web place" property="og:title" />
<meta
content="i'm yukijoou (ja: 雪女王), and i post things on the internet"
property="og:description"
/>
<meta content="#bad2e0" data-react-helmet="true" name="theme-color" />
<title>[ title ]</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>yukijoou's webplace</h1>
<p class="subtitle">雪女王</p>
<p>
i like posting silly things on the web! you can find a bunch of
it here!
</p>
<nav id="site-navigation">
<ul>
<li><a href="/index.html">Home</a></li>
</ul>
</nav>
</header>
<main>

View file

@ -11,11 +11,19 @@ WEBSITES_PATH="$HOME/www"
BACKUP_DIR=$(mktemp -d)
SITE_INATOR=${SITE_INATOR:-site-inator}
echo "Generating pages..."
$SITE_INATOR;
exit;
cp -rf "$WEBSITES_PATH" $BACKUP_DIR/$WEBSITE_NAME.bak
echo "Made backup at $BACKUP_DIR"
rm -rf "$WEBSITES_PATH"
mkdir -p "$WEBSITES_PATH"
cp -rf src/* "$WEBSITES_PATH"
cp -rf public/* "$WEBSITES_PATH"
echo "Installed $WEBSITE_NAME at $WEBSITES_PATH"