public_html/common/js/gsembed.js

@@ -0,0 +1,93 @@
+/*
+ * Copyright 2018 UltrasonicMadness
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+function addGSEmbedWidget(aStreamUrl, element)
+{
+    $(element).html("Loading GSEmbed...");
+    $.getJSON(aStreamUrl)
+        .done(function(data)
+        {
+            // Replace the given element with the generated widget HTML.
+            var gsHtml = genGSEmbedHtml(data);
+            $(element).addClass("gsembed_widget");
+            $(element).html(gsHtml);
+            
+            // All links in the widget open in a new tab
+            $(element + " a").map(function(index, element)
+            {
+                $(this).attr("target", "_blank");
+            });
+            
+            // Highlights moused over statuses
+            $(element + " li").mouseover(function()
+            {
+                $(this).addClass("gshover");
+            });
+            
+            // and un-highlights them when the mouse leaves
+            $(element + " li").mouseout(function()
+            {
+                $(this).removeClass("gshover");
+            });
+        })
+        .fail(function(data)
+        {
+            $(element).html(data.status + " " + data.statusText);
+        });
+}
+
+function genGSEmbedHtml(data)
+{
+    var widgetHtml = "";
+    
+    // The widget header
+    widgetHtml += "<div class='gse_heading'>" +
+            "<h4>The latest from <a href='" + data.links[0].url + "'>" +
+            data.title + "</a></h4>" +
+            "</div>";
+    
+    // For each status, add an item to a <ul>.
+    widgetHtml += "<ul>";
+    
+    for (var i = 0; i < data.items.length; i++)
+    {
+        var pubDate = new Date(data.items[i].published);
+        
+        widgetHtml += "<li>";
+        
+        // Adds the date which is hyperlinked to the status on GNU Social
+        widgetHtml += "<div class='gse_date'>" +
+                "<a href='" + data.items[i].url + "'>" +
+                pubDate.toString() + "</a></div>";
+        
+        // The status itself is added below the date in a separate div
+        widgetHtml += "<div class='gse_postcontent'>" + data.items[i].content +
+                "</div>";
+        
+        widgetHtml += "</li>";
+    }
+    
+    widgetHtml += "</ul>";
+    
+    // The widget footer with a link to the software page
+    widgetHtml += "<div class='gse_footer'>" +
+            "Powered by <a " + 
+            "href='http://www.ultrasonicmadness.org/software/gsembed'>" +
+            "GSEmbed 0.0.1</a>" +
+            "</div>";
+    
+    return widgetHtml;
+}

public_html/common/style/gsembed.css

@@ -0,0 +1,59 @@
+/*
+ * Copyright 2018 UltrasonicMadness
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.gsembed_widget .gse_heading
+{
+    border-style:solid;
+    border-width:0 0 1px 0;
+    border-color:#999;
+}
+
+.gsembed_widget ul
+{
+    list-style:none;
+    margin:0;
+    padding:0;
+    overflow-x:none;
+    overflow-y:auto;
+}
+
+.gsembed_widget li
+{
+    border-style:solid;
+    border-width:1px 0 0 0;
+    border-color:#999;
+    
+    padding:4mm;
+    overflow-x:hidden;
+}
+
+.gsembed_widget li:first-child
+{
+    border-width:0;
+}
+
+.gsembed_widget .gse_footer
+{
+    border-style:solid;
+    border-width:1px 0 0 0;
+    border-color:#999;
+    text-align:right;
+}
+
+.gsembed_widget .gse_date
+{
+    margin-bottom:2mm;
+}

public_html/common/style/mobile.css

@@ -156,3 +156,30 @@ footer
     padding:0;
     margin:0;
 }
+
+#usm-latest
+{
+    width:60%;
+    margin-top:2mm;
+    margin-bottom:2mm;
+    
+    margin-left:auto;
+    margin-right:auto;
+}
+
+#usm-latest a
+{
+    text-decoration:none;
+}
+
+#usm-latest ul
+{
+    max-height:80mm;
+}
+
+#usm-latest
+{
+    float:right;
+    width:45%;
+    margin:2mm;
+}

public_html/common/style/themes/red.css

@@ -44,3 +44,24 @@ footer
 	background-color:#300;
 	color:#966;
 }
+
+#usm-latest
+{
+    background-color:#933;
+    color:#600;
+}
+
+#usm-latest a
+{
+    color:#f99;
+}
+
+#usm-latest a:hover
+{
+    color:#633;
+}
+
+#usm-latest li.gshover
+{
+    background-color:#c33;
+}

public_html/index.php

@@ -26,6 +26,9 @@
         <?php
             gen_html_head('Home', 'red');
         ?>
+        <link type="text/css" rel="stylesheet" href="/common/style/gsembed.css" />
+        <script type="application/javascript" src="/common/js/jquery-3.3.1.min.js"></script>
+        <script type="application/javascript" src="/common/js/gsembed.js"></script>
     </head>
     
     <body>
@@ -36,13 +39,23 @@
         <div id="page-pane">
             <main>
                 <h1>UltrasonicMadness</h1>
+                <div id="usm-latest">
+                    <p>GSEmbed was not loaded successfully, please visit <a target="_blank" href="https://gnusocial.no/ultrasonicmadness">my GNU Social page</a> for my latest updates.</p>
+                </div>
                 <p>Hello and welcome to my website. This is currently a showcase for programs I have written such as <a href="/software/ultrasonichelix">my SoundHelix frontend</a> and it also offers a Steam-less <a href="/agegate?nexturl=/mirrors/everlasting-summer">mirror</a> for the visual novel <a target="_blank" href="http://everlastingsummer.su/en/">Everlasting Summer</a>. This site and all software it contains is <a target="_blank" href="https://www.gnu.org/philosophy/free-sw.html">freely available</a>, with the possible exception of anything in <a href="/mirrors">the Mirrors section</a>.</p>
                 <p>I can be contacted on contact|at|ultrasonicmadness|dot|org (having the address properly formatted on this was giving me spam) and I'm available on the code-hosting site <a target="_blank" href="https://notabug.org/UltrasonicMadness">NotABug</a>. Updates related to the website and any of my other projects may be available on <a target="_blank" href="https://gnusocial.no/ultrasonicmadness">my GNU Social profile</a>.</p>
                 <p>Enjoy your stay here.</p>
                 <p>UltrasonicMadness</p>
             </main>
-
+            
             <?php inc_footer(); ?>
+            
+            <script type="application/javascript">
+                $(function()
+                {
+                    addGSEmbedWidget("https://gnusocial.no/api/statuses/user_timeline/34098.as", "#usm-latest");
+                });
+            </script>
         </div>
     </body>
 </html>

public_html/software/gsembed/index.php

@@ -0,0 +1,54 @@
+<?php
+    /*
+     * Personal website of UltrasonicMadness
+     * Copyright (C) 2018 UltrasonicMadness
+     *
+     * This program is free software: you can redistribute it and/or modify
+     * it under the terms of the GNU Affero General Public License as
+     * published by the Free Software Foundation, either version 3 of the
+     * License, or (at your option) any later version.
+     *
+     * This program is distributed in the hope that it will be useful,
+     * but WITHOUT ANY WARRANTY; without even the implied warranty of
+     * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+     * GNU Affero General Public License for more details.
+     *
+     * You should have received a copy of the GNU Affero General Public License
+     * along with this program.  If not, see <http://www.gnu.org/licenses/>. 
+     */
+    
+    include($_SERVER['DOCUMENT_ROOT'] . '/../backend/php/page-elements.php');
+?>
+
+<!DOCTYPE html>
+<html>
+    <head>
+        <?php
+            gen_html_head('GSEmbed', 'green');
+        ?>
+    </head>
+    
+    <body>
+        <?php gen_common_pane(); ?>
+            
+        <div id="page-pane">
+            <main>
+                <h1>GSEmbed</h1>
+                <p>GSEmbed is a widget which displays posts from a given <a target="_blank" href="https://gnu.io/social/">GNU Social</a> user within a web page.</p>
+                
+                <h3>Credits</h3>
+                <ul>
+                    <li>GSEmbed's logo is based on the public domain <a target="_blank" href="https://www.gnu.org/graphics/social.html">GNU Social logo</a> by Jonas Laugs and Steven DuBois.</li>
+                </ul>
+                
+                <h3>License</h3>
+                <p>GSEmbed is available under the <a target="_blank" href="https://www.apache.org/licenses/LICENSE-2.0">Apache License, version 2.0</a>.</p>
+                
+                <h3>Source Code</h3>
+                <p>Source code is available on <a target="_blank" href="https://dev.angeley.es/s/UltrasonicMadness/r/gsembed">Vervis</a>.</p>
+            </main>
+            
+            <?php inc_footer(); ?>
+        </div>
+    </body>
+</html>

public_html/software/index.php

@@ -40,6 +40,10 @@
                     </div>
                     
                     <div>
+                        <a href="/software/gsembed"><img alt="" src="/common/images/gsembed.png" />GSEmbed</a>
+                    </div>
+                    
+                    <div>
                         <a href="/software/the-impossible-grid"><img alt="" src="/common/images/impossiblegrid.png" />The Impossible Grid</a>
                     </div>