Compare commits
5 commits
e2d340f555
...
eb547c9b7f
Author | SHA1 | Date | |
---|---|---|---|
eb547c9b7f | |||
8b6cf1db9b | |||
6508182f2a | |||
bd1e0681d3 | |||
28a5ad5bf6 |
10 changed files with 369 additions and 95 deletions
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
public/
|
||||||
|
*~
|
2
site-config
Normal file
2
site-config
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
#!/bin/bash
|
||||||
|
TITLE="yukjoou's internet homepage!"
|
Binary file not shown.
Before Width: | Height: | Size: 837 B |
184
src/index.html
184
src/index.html
|
@ -1,101 +1,97 @@
|
||||||
<!DOCTYPE html>
|
<h1>about me</h1>
|
||||||
<html lang="en">
|
<p>
|
||||||
<head>
|
i'm an autistic gay trans girl who likes computers. i like old technologies
|
||||||
<meta charset="UTF-8" />
|
and other stuff that doesn't work properly.
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<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" />
|
<h2>talk to me. i dare u.</h2>
|
||||||
<meta
|
<p>
|
||||||
content="i'm yukijoou (ja: 雪女王), and i post things on the internet"
|
i'm available on matrix: @yukijoou:catgirl.cloud
|
||||||
property="og:description"
|
<br />
|
||||||
/>
|
i have a fedi account:
|
||||||
<meta content="#ADD8E6" data-react-helmet="true" name="theme-color" />
|
<a href="https://fedi.kemonomimi.gay/yukijoou"
|
||||||
|
>@yukijoou@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>
|
<noscript>
|
||||||
<link rel="stylesheet" href="style.css" />
|
<p>
|
||||||
</head>
|
<b>Please enable javascript to see my email :3</b> (only using it as
|
||||||
<body>
|
an anti-scraper thing). if you really don't want to, here is my
|
||||||
<header>
|
base64-encoded email: eXVraWpvb3VAa2Vtb25vbWltaS5nYXk=
|
||||||
<h1>yukijoou's homepage</h1>
|
</p>
|
||||||
<p class="subtitle">雪女王</p>
|
</noscript>
|
||||||
<p>
|
<script>
|
||||||
i like posting silly things on the web! you can find a bunch of
|
const email = atob("eXVraWpvb3VAa2Vtb25vbWltaS5nYXk=");
|
||||||
it here!
|
const emailDisplay = document.getElementById("email");
|
||||||
</p>
|
emailDisplay.addEventListener(
|
||||||
</header>
|
"click",
|
||||||
|
(event) => {
|
||||||
|
emailDisplay.href = "mailto:" + email;
|
||||||
|
emailDisplay.innerText = email;
|
||||||
|
event.preventDefault();
|
||||||
|
},
|
||||||
|
{ once: true },
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
</p>
|
||||||
|
|
||||||
<main>
|
<h1>silly projects</h1>
|
||||||
<h1>about me</h1>
|
<p>the things i do at my computer :3</p>
|
||||||
<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>
|
|
||||||
|
|
||||||
<h2>talk to me. i dare u.</h2>
|
<h2>site-inator</h2>
|
||||||
<p>
|
<p>
|
||||||
i'm available on matrix: @yukijoou:catgirl.cloud
|
this is a dead simple HTML pages generator that makes making dead simple
|
||||||
<br />
|
websites easy! it's written in bash, so really easy to run on all sorts of
|
||||||
i also have a temporary email, while i figure out how to host an
|
systems, and fairly simple to use. <br />learn more
|
||||||
email server:
|
<a href="/site-inator.html">over here</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<address><a href="#" id="email">[SHOW EMAIL]</a></address>
|
<h2>convertablet</h2>
|
||||||
<noscript>
|
<p>
|
||||||
Please enable javascript :3 if you really don't want to, here is
|
it's a dameon to get 2-in-1 laptop/tablet convertible devices to work well
|
||||||
my base64-encoded email: eWlraWpvb3VAbGFwb3N0ZS5uZXQ=
|
using wlroots-based compositors on linux. for now it's more or less
|
||||||
</noscript>
|
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>
|
<h2>kemonomimi.gay</h2>
|
||||||
const email = atob("eWlraWpvb3VAbGFwb3N0ZS5uZXQ=");
|
<p>
|
||||||
const emailDisplay = document.getElementById("email");
|
i do sysadmin work to keep the websites and services we host running! most
|
||||||
emailDisplay.addEventListener(
|
of my work is behind the scene, and shoudln't be noticeable (i hope). at
|
||||||
"click",
|
some point, i want to opensource most of the scripts i use to manage this
|
||||||
(event) => {
|
infrastructure so that other people can see how it all works, and be
|
||||||
emailDisplay.href = "mailto:" + email;
|
inclined to selfhost their stuff ^_^
|
||||||
emailDisplay.innerText = email;
|
</p>
|
||||||
event.preventDefault();
|
|
||||||
},
|
|
||||||
{ once: true }
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<h1>silly projects</h1>
|
<h2>reduced motion in opensource projects</h2>
|
||||||
<p>more coming soon here!</p>
|
<p>
|
||||||
<p>
|
i'm on a crusade to get as much of the software i'm using as possible to be
|
||||||
i'm working on getting more services on
|
reduced-motion friendly. as i'm quite motion-sensitive, i really don't like
|
||||||
<a href="https://kemonomimi.gay">kemonomimi.gay</a>, and
|
stuff that moves arounde everywhere, so i try to make websites and apps not
|
||||||
bringing some web things i've already done to this website!
|
have it when the "reduced motion" setting is enabled! <br />
|
||||||
</p>
|
i don't have any page where i track this sort of thing, i just mostly do
|
||||||
</main>
|
one-off contribution to projects and hope they accept it
|
||||||
|
</p>
|
||||||
<footer>
|
|
||||||
<p>
|
|
||||||
© 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>
|
|
||||||
|
|
184
src/site-inator.html
Normal file
184
src/site-inator.html
Normal 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><head></code> tag, but
|
||||||
|
also part of the <code><body></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><body></code> and <code><html></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="<your title goes here!>"
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
this 'title' isn't used by default, but whatever you set the title to will
|
||||||
|
replace any occurence of <code>[ title ]</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><head></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>
|
2
src/site-inator.html.config
Normal file
2
src/site-inator.html.config
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
#!/bin/bash
|
||||||
|
TITLE="site-inator: silly site generator - yukijoou"
|
|
@ -73,3 +73,29 @@ footer {
|
||||||
|
|
||||||
text-align: justify;
|
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
21
template/footer.html
Normal file
|
@ -0,0 +1,21 @@
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>
|
||||||
|
© 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
33
template/header.html
Normal 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>
|
10
update.sh
10
update.sh
|
@ -11,11 +11,19 @@ WEBSITES_PATH="$HOME/www"
|
||||||
|
|
||||||
BACKUP_DIR=$(mktemp -d)
|
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
|
cp -rf "$WEBSITES_PATH" $BACKUP_DIR/$WEBSITE_NAME.bak
|
||||||
echo "Made backup at $BACKUP_DIR"
|
echo "Made backup at $BACKUP_DIR"
|
||||||
|
|
||||||
rm -rf "$WEBSITES_PATH"
|
rm -rf "$WEBSITES_PATH"
|
||||||
mkdir -p "$WEBSITES_PATH"
|
mkdir -p "$WEBSITES_PATH"
|
||||||
cp -rf src/* "$WEBSITES_PATH"
|
cp -rf public/* "$WEBSITES_PATH"
|
||||||
|
|
||||||
echo "Installed $WEBSITE_NAME at $WEBSITES_PATH"
|
echo "Installed $WEBSITE_NAME at $WEBSITES_PATH"
|
||||||
|
|
Loading…
Reference in a new issue