~m15o/ichi

1312df724f9d498baefb7ccf96a34857b78dc88a — m15o 6 months ago 4fe633e
few changes
9 files changed, 141 insertions(+), 98 deletions(-)

M assets/style.css
M storage/news.go
M web/handler/common.go
M web/handler/handler.go
R web/handler/{faq_show.go => help_show.go}
M web/handler/html.go
M web/handler/html/common/layout.html
M web/handler/html/editor.html
R web/handler/html/{manual.html => help.html}
M assets/style.css => assets/style.css +0 -1
@@ 10,7 10,6 @@ body {
}

main {
    /*margin: 1em 0;*/
    padding: 1em;
    background-color: #b9f2f2;
}

M storage/news.go => storage/news.go +1 -1
@@ 3,7 3,7 @@ package storage
import "ichi/model"

func (s *Storage) News() ([]model.News, error) {
	rows, err := s.db.Query("select title, link from news order by published_at desc")
	rows, err := s.db.Query("select title, link from news order by published_at desc limit 3")
	if err != nil {
		return nil, err
	}

M web/handler/common.go => web/handler/common.go +3 -1
@@ 16,7 16,7 @@ var TplCommonMap = map[string]string{
<body>
    <main>
        <nav class="main-nav">
            <a href="/"><img src="/logo.png" alt="ichi" style="width: 88px; height: 31px;"></a> <a href="/homepages">homepages</a> <a href="/manual">manual</a>
            <a href="/"><img src="/logo.png" alt="ichi" style="width: 88px; height: 31px;"></a> <a href="/homepages">homepages</a> <a href="/help">help</a>
            {{ if .logged }}
            <a href="/files">files</a> <a href="/logout">logout</a>
            {{ else }}


@@ 28,6 28,8 @@ var TplCommonMap = map[string]string{
    <footer>
        <p>
            <a href="/"><img src="/banner.png" alt="Ichi"/></a>
            <a target="_blank" href="https://melonking.net"><img alt="Visit Melonking.Net!" src="https://melonking.net/images/badges/MELON-BADGE-2.GIF"></a>
            <a href="/help#exchange-badge">Your badge here?</a>
        </p>
        <script src="https://yesterwebring.neocities.org/script-text.js"></script>
        <webring-css site="https://ichi.city/" style="--mylinkcolor: blue !important;"></webring-css>

M web/handler/handler.go => web/handler/handler.go +1 -1
@@ 63,7 63,7 @@ func New(cfg *config.Config, sess *session.Session, host string, data *storage.S
	router.HandleFunc("/", h.showIndexView).Methods(http.MethodGet)
	router.HandleFunc("/login", h.showLoginView).Methods(http.MethodGet)
	router.HandleFunc("/check-login", h.checkLogin).Methods(http.MethodPost)
	router.HandleFunc("/manual", h.showManualView).Methods(http.MethodGet)
	router.HandleFunc("/help", h.showHelpView).Methods(http.MethodGet)
	router.HandleFunc("/profile/{username}", h.showProfileView).Methods(http.MethodGet)
	router.HandleFunc("/register", h.handleRegister)
	router.HandleFunc("/editor", h.handleEditor)

R web/handler/faq_show.go => web/handler/help_show.go +2 -2
@@ 8,7 8,7 @@ func (h *Handler) showFAQView(w http.ResponseWriter, r *http.Request, user strin
	h.renderLayout(w, "faq", nil, user)
}

func (h *Handler) showManualView(w http.ResponseWriter, r *http.Request) {
func (h *Handler) showHelpView(w http.ResponseWriter, r *http.Request) {
	user, _ := h.getUser(r)
	h.renderLayout(w, "manual", nil, user)
	h.renderLayout(w, "help", nil, user)
}

M web/handler/html.go => web/handler/html.go +97 -77
@@ 16,7 16,7 @@ var TplMap = map[string]string{
    <script src="/mode/htmlmixed/htmlmixed.js"></script>
    <style>
        html {
            background-color: #1ecece;
            background-color: #b9f2f2;
        }
        .file {
            padding: 5px;


@@ 24,28 24,25 @@ var TplMap = map[string]string{
        .CodeMirror {
            height: 100%;
            flex-grow: 1;
            border: 4px outset;
            border: 1px solid;
        }
        form {
            display: flex;
            flex-direction: column;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            top: 1em;
            left: 1em;
            right: 1em;
            bottom: 1em;
        }
        .hidden {
            display: none;
        }
        /*.editor {*/
        /*    flex-grow: 1;*/
        /*    border: 4px outset;*/
        /*}*/
    </style>
</head>
<body>
<form>
    <nav><a href="/"><img src="/logo.png" alt="ichi" style="width: 88px; height: 31px;"></a></nav>
    <div class="file">
        <input type="hidden" name="name" value="{{ .File }}"/>
        {{ .Nav }}/<a href="//{{ .Author }}.ichi.city{{ .Dir }}/{{ .File }}">{{ .File }}</a>


@@ 203,6 200,96 @@ var TplMap = map[string]string{
    <p>{{ .Quota }}</p>
</article>
{{ end }}`,
	"help": `{{ define "content" }}
<h1>Help</h1>

<article>
    <h2>What is ichi?</h2>
    <p>Ichi is a tiny internet community where people can create their homepages for free. These pages are listed on Ichi's index, allowing everyone to explore, discover, and engage with one another.</p>
    <p><a href="/register">Sign-up now!</a></p>

    <hr>
    <ol>
        <li><a href="#what">Okay, but what's really ichi?</a></li>
        <li><a href="#index">Ichi's index</a></li>
        <li><a href="#homepage">Create your homepage</a></li>
        <ol>
            <li><a href="#title">Give a TITLE to your home</a></li>
            <li><a href="#description">Give a DESCRIPTION to your home</a></li>
            <li><a href="#favicon">Add a FAVICON to your home</a></li>
            <li><a href="#badge">Add ichi's badge</a></li>
            <li><a href="#sftp">Use SFTP to manage your files</a></li>
        </ol>
        <li><a href="#open-source">Create your own ichi</a></li>
        <li><a href="#exchange-badge">Exchange badge</a></li>
        <li><a href="#etiquette">Etiquette</a></li>
        <li><a href="#contact">Contact</a></li>
    </ol>
    <hr>

    <h2 id="what">Okay, but what's really ichi?</h2>
    <p>Didn't you like the previous definition? :) Ichi is a place to have fun learning, creating, experimenting and exchanging with simple tools that have been there for a reaaaally long time and aren't likely to go away. It's incredible what we can create with HTML, CSS and even JavaScript. However, it's much more fun with other people.</p>
    <p>It feels like the internet becomes a little less human every day. Or rather, humans interact with the web differently as time evolves. Ichi aims to be a little internet corner where anyone can share their world, personality, and help make the web more exciting. So go ahead, use ugly colors, terrible layouts, background music and animated gifs because hey, why not! We're not yet all robots, right? Right? I hope you're not a robot.</p>
    <h2 id="index">Ichi's Index</h2>
    <p>Ichi's index is the first page you see when you arrive on ichi. It lists every user's homepages. Yours as well! It's a perfect place to explore and meet users you don't already know. On the index, the most recently updated homepages are at the top.</p>
    <h2 id="homepage">Create your homepage</h2>
    <img src="/home.png" style="float: left;"/><p>Who are you? What do you like? Your homepage is like a window to your room. It's your world! Time to paint these walls, and get ready to welcome people in! Just like a home in the real world, it has an (internet) address:</p>
    <pre>https://USERNAME.ichi.city</pre>
    <p>For example, mine is <a href="//m15o.ichi.city">https://m15o.ichi.city</a></p>
    <p>Your home is made up of files: HTML, CSS, perhaps even JavaScript. Once you have <a href="/register">created your account</a>, you will be able to manage your <a href="/files">files</a> directly from the web.</p>
    <img src="/index-file.png" style="float: right;"/>
    <p>So go ahead and create your index.html file! This is a very special file. It's the one that is loaded when visitors visit your homepage.</p>
    <h3 id="title">Give a TITLE to your home</h3>
    <p>Since your homepage will be listed on <a href="/">Ichi's index</a>, let's give it an epic name. It's done using HTML's title tag. Here's how I've set up mine:</p>
    <pre>&lt;title&gt;What soup?&lt;/title&gt;</pre>
    <p>Go ahead and add yours to your index.html file!</p>
    <h3 id="description">Give a DESCRIPTION to your home</h3>
    <p>Titles are good, but a description brings your homepage listing to the next level, don't you think? We're going to use the meta tag to do that. Here's how I've set up mine:</p>
    <pre>&lt;meta name="description" content="m15o's web portal. Will you be able to answer the question and raise to the top of the leaderboard?"&gt;</pre>
    <p>So much progress. Let's continue!</p>
    <h3 id="favicon">Add a FAVICON to your home</h3>
    <p>Favicon are those little icons for homepages that your browser show. Ichi use them as well in the listing! If you don't have one yet, I'd suggest you to go and create one using <a href="//merp.ichi.city/draw.html">MERP Draw</a>. Make sure to get a 16x16 file. Save it as "favicon.ico" and upload it to your site's root directory. That's it!</p>
    <h3 id="badge">Add ichi's banner</h3>
    <p>You can add ichi's banner to the footer of your home page. Here's the banner:</p>
    <a href="https://ichi.city">
        <img src="https://ichi.city/banner.png" alt="ichi"/>
    </a>
    <p>and here is the code</p>
    <pre>&lt;a href=&quot;https://ichi.city&quot;&gt;
    &lt;img src=&quot;https://ichi.city/banner.png&quot; alt=&quot;ichi&quot;/&gt;
&lt;/a&gt;</pre>
    <h3 id="sftp">Use SFTP to manage your files</h3>
    <p>SFTP is an awesome internet protocol that allows you to edit your files locally on your computer, using any editor you'd like, and transfer them directly to ichi's server. To do that, you need an SFTP client. You could use any SFTP client, but if you don't have any I suggest to go with <a href="https://filezilla-project.org/" target="_blank">FileZilla</a>.</p>
    <p>Use the credentials you've registered with to connect to ichi's SFTP server. Use sftp://ichi.city as the host.</p>
    <p>This concludes the section on how to create your homepage. Of course, there's a lot to learn. Go ahead and explore all you can do with HTML and CSS to bring even more life to your pages!</p>
    <h2 id="open-source">Create your own ichi</h2>
    <p>Ichi is entirely free and open-source. In fact, you are more than welcome to host it on your own server, adapt it, and allow people you know to create their own homepage there.</p>
    <p><a href="https://git.sr.ht/~m15o/ichi">Source code</a></p>
    <h2 id="exchange-badge">Exchange badge</h2>
    <p>You have a home that's not hosted on ichi? Let's still exchange badge! Add the following to your site:</p>
    <textarea cols="50"><a href="https://ichi.city" target="_blank"><img src="https://ichi.city/banner-flat.png" alt="Ichi: Your homepage on the internet!"></a></textarea>
    <p>Notify me at m15o at posteo dot net.</p>
    <h2 id="etiquette">Etiquette</h2>
    <h3>Do</h3>
    <ul>
        <li>Be creative</li>
        <li>Have fun</li>
        <li>Interact with others!</li>
        <li>Be friendly</li>
    </ul>
    <h3>Don't</h3>
    <ul>
        <li>Create page for pure self promotion with no other value added</li>
        <li>Spam & phishing</li>
        <li>Hate</li>
        <li>Share anyone's private information</li>
        <li>Harmful or illegal activities</li>
        <li>Not Safe For Work (NSFW) content</li>
    </ul>
    <h2 id="contact">Contact</h2>
    <p>m15o at posteo dot net</p>
</article>
{{ end }}`,
	"homepages": `{{ define "content" }}
<h1>Homepages</h1>
<article class="directory">


@@ 300,73 387,6 @@ var TplMap = map[string]string{
    </form>
</article>
{{ end }}`,
	"manual": `{{ define "content" }}
<h1>Manual</h1>

<article>
    <h2>What is ichi?</h2>
    <p>Ichi is a tiny internet community where people can create their homepages for free. These pages are listed on Ichi's index, allowing everyone to explore, discover, and engage with one another.</p>
    <p><a href="/register">Sign-up now!</a></p>

    <hr>
    <ol>
        <li><a href="#what">Okay, but what's really ichi?</a></li>
        <li><a href="#index">Ichi's index</a></li>
        <li><a href="#homepage">Create your homepage</a></li>
        <ol>
            <li><a href="#title">Give a TITLE to your home</a></li>
            <li><a href="#description">Give a DESCRIPTION to your home</a></li>
            <li><a href="#favicon">Add a FAVICON to your home</a></li>
            <li><a href="#banner">Add ichi's banner</a></li>
            <li><a href="#sftp">Use SFTP to manage your files</a></li>
        </ol>
        <li><a href="#open-source">Create your own ichi</a></li>
        <li><a href="#contact">Contact</a></li>
    </ol>
    <hr>

    <h2 id="what">Okay, but what's really ichi?</h2>
    <p>Didn't you like the previous definition? :) Ichi is a place to have fun learning, creating, experimenting and exchanging with simple tools that have been there for a reaaaally long time and aren't likely to go away. It's incredible what we can create with HTML, CSS and even JavaScript. However, it's much more fun with other people.</p>
    <p>It feels like the internet becomes a little less human every day. Or rather, humans interact with the web differently as time evolves. Ichi aims to be a little internet corner where anyone can share their world, personality, and help make the web more exciting. So go ahead, use ugly colors, terrible layouts, background music and animated gifs because hey, why not! We're not yet all robots, right? Right? I hope you're not a robot.</p>
    <h2 id="index">Ichi's Index</h2>
    <p>Ichi's index is the first page you see when you arrive on ichi. It lists every user's homepages. Yours as well! It's a perfect place to explore and meet users you don't already know. On the index, the most recently updated homepages are at the top.</p>
    <h2 id="homepage">Create your homepage</h2>
    <img src="/home.png" style="float: left;"/><p>Who are you? What do you like? Your homepage is like a window to your room. It's your world! Time to paint these walls, and get ready to welcome people in! Just like a home in the real world, it has an (internet) address:</p>
    <pre>https://USERNAME.ichi.city</pre>
    <p>For example, mine is <a href="//m15o.ichi.city">https://m15o.ichi.city</a></p>
    <p>Your home is made up of files: HTML, CSS, perhaps even JavaScript. Once you have <a href="/join">created your account</a>, you will be able to manage your <a href="/files">files</a> directly from the web.</p>
    <img src="/index-file.png" style="float: right;"/>
    <p>So go ahead and create your index.html file! This is a very special file. It's the one that is loaded when visitors visit your homepage.</p>
    <h3 id="title">Give a TITLE to your home</h3>
    <p>Since your homepage will be listed on <a href="/">Ichi's index</a>, let's give it an epic name. It's done using HTML's title tag. Here's how I've set up mine:</p>
    <pre>&lt;title&gt;What soup?&lt;/title&gt;</pre>
    Go ahead and add yours to your index.html file!
    <h3 id="description">Give a DESCRIPTION to your home</h3>
    <p>Titles are good, but a description brings your homepage listing to the next level, don't you think? We're going to use the meta tag to do that. Here's how I've set up mine:</p>
    <pre>&lt;meta type="description" content="m15o's web portal. Will you be able to answer the question and raise to the top of the leaderboard?"&gt;</pre>
    <p>So much progress. Let's continue!</p>
    <h3 id="favicon">Add a FAVICON to your home</h3>
    <p>Favicon are those little icons for homepages that your browser show. Ichi use them as well in the listing! If you don't have one yet, I'd suggest you to go and create one using <a href="//merp.ichi.city/draw/html">MERP Draw</a>. Make sure to get a 16x16 file. Save it as "favicon.ico" and upload it to your site's root directory. That's it!</p>
    <h3 id="banner">Add ichi's banner</h3>
    <p>You can add ichi's banner to the footer of your home page. Here's the banner:</p>
    <a href="https://ichi.city">
        <img src="https://ichi.city/banner.png" alt="ichi"/>
    </a>
    <p>and here is the code</p>
    <pre>&lt;a href=&quot;https://ichi.city&quot;&gt;
    &lt;img src=&quot;https://ichi.city/banner.png&quot; alt=&quot;ichi&quot;/&gt;
&lt;/a&gt;</pre>
    <h3 id="sftp">Use SFTP to manage your files</h3>
    <p>SFTP is an awesome internet protocol that allows you to edit your files locally on your computer, using any editor you'd like, and transfer them directly to ichi's server. To do that, you need an SFTP client. You could use any SFTP client, but if you don't have any I suggest to go with <a href="https://filezilla-project.org/" target="_blank">FileZilla</a>.</p>
    <p>Use the credentials you've registered with to connect to ichi's SFTP server. Use sftp://ichi.city as the host.</p>
    <p>This concludes the section on how to create your homepage. Of course, there's a lot to learn. Go ahead and explore all you can do with HTML and CSS to bring even more life to your pages!</p>
    <h2 id="open-source">Create your own ichi</h2>
    <p>Ichi is entirely free and open-source. In fact, you are more than welcome to host it on your own server, adapt it, and allow people you know to create their own homepage there.</p>
    <p><a href="https://git.sr.ht/~m15o/ichi">Source code</a></p>
    <h2 id="contact">Contact</h2>
    <p>m15o at posteo dot net</p>
</article>
{{ end }}`,
	"new-file": `{{ define "content" }}
<h1>New file</h1>
<article>

M web/handler/html/common/layout.html => web/handler/html/common/layout.html +3 -1
@@ 11,7 11,7 @@
<body>
    <main>
        <nav class="main-nav">
            <a href="/"><img src="/logo.png" alt="ichi" style="width: 88px; height: 31px;"></a> <a href="/homepages">homepages</a> <a href="/manual">manual</a>
            <a href="/"><img src="/logo.png" alt="ichi" style="width: 88px; height: 31px;"></a> <a href="/homepages">homepages</a> <a href="/help">help</a>
            {{ if .logged }}
            <a href="/files">files</a> <a href="/logout">logout</a>
            {{ else }}


@@ 23,6 23,8 @@
    <footer>
        <p>
            <a href="/"><img src="/banner.png" alt="Ichi"/></a>
            <a target="_blank" href="https://melonking.net"><img alt="Visit Melonking.Net!" src="https://melonking.net/images/badges/MELON-BADGE-2.GIF"></a>
            <a href="/help#exchange-badge">Your badge here?</a>
        </p>
        <script src="https://yesterwebring.neocities.org/script-text.js"></script>
        <webring-css site="https://ichi.city/" style="--mylinkcolor: blue !important;"></webring-css>

M web/handler/html/editor.html => web/handler/html/editor.html +7 -10
@@ 11,7 11,7 @@
    <script src="/mode/htmlmixed/htmlmixed.js"></script>
    <style>
        html {
            background-color: #1ecece;
            background-color: #b9f2f2;
        }
        .file {
            padding: 5px;


@@ 19,28 19,25 @@
        .CodeMirror {
            height: 100%;
            flex-grow: 1;
            border: 4px outset;
            border: 1px solid;
        }
        form {
            display: flex;
            flex-direction: column;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            top: 1em;
            left: 1em;
            right: 1em;
            bottom: 1em;
        }
        .hidden {
            display: none;
        }
        /*.editor {*/
        /*    flex-grow: 1;*/
        /*    border: 4px outset;*/
        /*}*/
    </style>
</head>
<body>
<form>
    <nav><a href="/"><img src="/logo.png" alt="ichi" style="width: 88px; height: 31px;"></a></nav>
    <div class="file">
        <input type="hidden" name="name" value="{{ .File }}"/>
        {{ .Nav }}/<a href="//{{ .Author }}.ichi.city{{ .Dir }}/{{ .File }}">{{ .File }}</a>

R web/handler/html/manual.html => web/handler/html/help.html +27 -4
@@ 1,5 1,5 @@
{{ define "content" }}
<h1>Manual</h1>
<h1>Help</h1>

<article>
    <h2>What is ichi?</h2>


@@ 15,10 15,12 @@
            <li><a href="#title">Give a TITLE to your home</a></li>
            <li><a href="#description">Give a DESCRIPTION to your home</a></li>
            <li><a href="#favicon">Add a FAVICON to your home</a></li>
            <li><a href="#banner">Add ichi's banner</a></li>
            <li><a href="#badge">Add ichi's badge</a></li>
            <li><a href="#sftp">Use SFTP to manage your files</a></li>
        </ol>
        <li><a href="#open-source">Create your own ichi</a></li>
        <li><a href="#exchange-badge">Exchange badge</a></li>
        <li><a href="#etiquette">Etiquette</a></li>
        <li><a href="#contact">Contact</a></li>
    </ol>
    <hr>


@@ 38,14 40,14 @@
    <h3 id="title">Give a TITLE to your home</h3>
    <p>Since your homepage will be listed on <a href="/">Ichi's index</a>, let's give it an epic name. It's done using HTML's title tag. Here's how I've set up mine:</p>
    <pre>&lt;title&gt;What soup?&lt;/title&gt;</pre>
    Go ahead and add yours to your index.html file!
    <p>Go ahead and add yours to your index.html file!</p>
    <h3 id="description">Give a DESCRIPTION to your home</h3>
    <p>Titles are good, but a description brings your homepage listing to the next level, don't you think? We're going to use the meta tag to do that. Here's how I've set up mine:</p>
    <pre>&lt;meta name="description" content="m15o's web portal. Will you be able to answer the question and raise to the top of the leaderboard?"&gt;</pre>
    <p>So much progress. Let's continue!</p>
    <h3 id="favicon">Add a FAVICON to your home</h3>
    <p>Favicon are those little icons for homepages that your browser show. Ichi use them as well in the listing! If you don't have one yet, I'd suggest you to go and create one using <a href="//merp.ichi.city/draw.html">MERP Draw</a>. Make sure to get a 16x16 file. Save it as "favicon.ico" and upload it to your site's root directory. That's it!</p>
    <h3 id="banner">Add ichi's banner</h3>
    <h3 id="badge">Add ichi's banner</h3>
    <p>You can add ichi's banner to the footer of your home page. Here's the banner:</p>
    <a href="https://ichi.city">
        <img src="https://ichi.city/banner.png" alt="ichi"/>


@@ 61,6 63,27 @@
    <h2 id="open-source">Create your own ichi</h2>
    <p>Ichi is entirely free and open-source. In fact, you are more than welcome to host it on your own server, adapt it, and allow people you know to create their own homepage there.</p>
    <p><a href="https://git.sr.ht/~m15o/ichi">Source code</a></p>
    <h2 id="exchange-badge">Exchange badge</h2>
    <p>You have a home that's not hosted on ichi? Let's still exchange badge! Add the following to your site:</p>
    <textarea cols="50"><a href="https://ichi.city" target="_blank"><img src="https://ichi.city/banner-flat.png" alt="Ichi: Your homepage on the internet!"></a></textarea>
    <p>Notify me at m15o at posteo dot net.</p>
    <h2 id="etiquette">Etiquette</h2>
    <h3>Do</h3>
    <ul>
        <li>Be creative</li>
        <li>Have fun</li>
        <li>Interact with others!</li>
        <li>Be friendly</li>
    </ul>
    <h3>Don't</h3>
    <ul>
        <li>Create page for pure self promotion with no other value added</li>
        <li>Spam & phishing</li>
        <li>Hate</li>
        <li>Share anyone's private information</li>
        <li>Harmful or illegal activities</li>
        <li>Not Safe For Work (NSFW) content</li>
    </ul>
    <h2 id="contact">Contact</h2>
    <p>m15o at posteo dot net</p>
</article>