TC
/
WebStick


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
							<!DOCTYPE html>
<html>
<head>

    <!-- HTML Meta Tags -->
    <title>Welcome to My Blog</title>
    <meta name="description" content="A personal blog hosted on WebStick!">
    <meta name="viewport" content="width=device-width, initial-scale=1" >

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
    <style>
        .imgwrapper{
            max-height: 200px;
            overflow: hidden;
        }
  </style>
</head>
<body>
    <br>
    <div class="ui text container">
        <h2 class="ui header">
            WebStick Blog
            <div class="sub header">Welcome to this new personal blog of mine!</div>
        </h2>
        <div class="ui divider"></div>
        <a class="ui basic icon button" href="../" title="Back to Home"><i class="home icon"></i></a>
        <a class="ui basic icon button" href="../" title="Share"><i class="green share alternate icon"></i></a>
        <a class="ui basic button adminOnly"><i class="blue add icon"></i> New Post</a>
        <br><br>
        <div class="posttable">
            <div class="ui message">
                <h4 class="ui header">
                    <i class="blue question icon"></i>
                    <div class="content">
                      No Post
                      <div class="sub header">It seems this is a brand new blog site!</div>
                    </div>
                  </h4>
            </div>

             
            <div class="ui basic segment postObject">
                <h4 class="ui header">
                    <i class="blue map marker alternate icon"></i>
                    <div class="content">
                        11 Sep 2023
                    </div>
                </h4>
                <div class="ui divider"></div>
                <div class="adminOnly" style="position: absolute; top: 0.4em; right: 0.4em;">
                    <a class="ui basic mini icon button" title="Edit Post"><i class="edit icon"></i></a>
                    <button class="ui basic mini icon button" title="Remove Post"><i class="red trash icon"></i></button>
                </div>
                <div class="postContent">

                </div>
                <div class="ui divider"></div>
            </div>
            
        </div>
    </div>
    
    <div class="ui text container center aligned">
        <div class="ui divider"></div>
        <small>Proudly powered by <a href="https://hackaday.io/project/192618-instant-webstick-esp8266-web-server-nas">WebStick</a></small>
    </div>
	</div>
    <script>
        //Check the user has logged in
        $.get("", function(data){
            if (data == false){
                //User cannot use admin function. Hide the buttons.
                $(".adminOnly").hide();
            }
        });

        //Load the list of post from the server side
        function loadPostFromServer(){

        }

        //Load a markdown file from URL and render it to target element
        function loadMarkdownToHTML(markdownURL, targetElement){
            fetch(markdownURL).then( r => r.text() ).then( text =>{
                var converter = new showdown.Converter();
                
                let targetHTML = converter.makeHtml(text);
                console.log(targetHTML);
                $(targetElement).html(targetHTML);
            });
        }

        loadMarkdownToHTML("../../README.md", $(".postContent"));
        loadPostFromServer();
    </script>
</body>
</html>