Преглед изворни кода

Updating Mainpage and Devblog

The Mainpage has been rewritten.
Devblog has more entries now and a system to nicely write new entries.
Ecconia пре 7 година
родитељ
комит
6a391dda87
2 измењених фајлова са 181 додато и 23 уклоњено
  1. 114 13
      src/views/Devblog.vue
  2. 67 10
      src/views/Mainpage.vue

+ 114 - 13
src/views/Devblog.vue

@@ -1,18 +1,119 @@
 <template>
 	<div>
 		<h1>Development Blog</h1>
-		This is the first section, which will be writen in some useable manner.<br>
-		Updates about the website will be written as "Threads/Posts" here.<br>
-		<br>
-		Well no content here? Yeah, this part is under development ofc, all development reports currently will happen in the RedstoneServer's discord.<br>
-		<br>
-		- Server has been booted again.<br>
-		-> Ecconia's Webserver was doing nothing, now it has a freshly installed Ubuntu 18 on it.<br>
-		- Nginx has been installed and is running.<br>
-		-> With the webserver nginx its possible to host websites on the webserver machine.<br>
-		- SSL has been installed along with Cloudflare.<br>
-		-> The domain of this server is encrypted with all its content, all other domains are catched and handled with some feedback.<br>
-		- First Vue page has been written.<br>
-		-> The first content can be seen on a.ecconia.de, but its currently only loaded once and not loading the sub-pages on demand. Further no URL routing is possible currently.<br>
+		<p>
+			On this page you will find a rough summary of the steps taken while developing this website. The full blog about the creation of this website happens on the RS server's discord.
+		</p>
+
+		<div class="entry" v-for="(entry, index) in entries" :key="index">
+			<h4>{{ entry.title }}</h4>
+			<p v-for="(para, parai) in entry.paragraphs" :key="parai">{{ para }}</p>
+		</div>
 	</div>
 </template>
+
+<script>
+	export default {
+		data () {
+			return {
+				entries: [],
+			}
+		},
+		created () {
+			this.parseBlog(`
+				Ecconia's dusty server-machine
+				-	For this project the webserver owned by Ecconia has been started again and a fresh Ubuntu 18.04 has been installed.
+				-	Basic setup has been made, editing bash, setting up ssh and vim.
+
+				Sever software
+				-	Nginx shall be the server for this project, its easy to setup and all config files are at one place.
+
+				Security
+				-	All traffic will be routed over Cloudflare. The connections from and to Cloudflare are encrypted with SSL.
+				-	The connection is as secure as Cloudflare is (lets trust it...). Cloudflare mainly caches files and protects against DDOS.
+
+				Vue-Framework added to website
+				-	Vue is a framework which uses javascript to manipulate the HTML-DOM of the browser. This allows very easy web-developing.
+				-	Nice feature: Updating the website according to JS variables.
+				-	Downside: SEO may fail.
+
+				After reading millions of documentation
+				-	The first simple version of the website has been written, a single HTMl file contains the whole website.
+
+				Vue-Router
+				-	The website is using Vue-Router it allows natural page switching without actually doing so. The content will just be replaced by Vue.
+
+				The small steps
+				-	The start page as well as the application page shall function the same as on the current website. Additional this devblog has been added. An Impressum is a must have as soon as the server is located in germany.
+
+				Finally backend for frontend
+				-	Vue has "components" each mainpage is one, but later other parts of the website may be components (buttons, inputs, pager, posts etc....)
+				-	These components may be bundled and can be loaded on demand, this can be done by the frontend, by loading the components.
+				-	Webpack is a software which analyzes the source code on the server and bundles it as well as processes it. That way components can be bundled and provided. Additional this provides a fancy way to define components in single files. The code to load components will be generated by Webpack. Yay, less programming less mistakes.
+
+				Transfered everything to new backend
+				-	With the new backend a new website structure has been created. The old pages had been transfered to the correct positions in the new backend.
+				-	Now that the backend is working, the frontend may be developed.
+
+				Update for the devblog
+				-	The Development Blog got a new "design" and finally an update to its content.
+				-	One variable holds all the entries and will be parsed into a Vue entries array which are automatically visible when added.
+
+				Update introductions
+				-	Startpage and Devblog have been rewritten
+
+				
+			`)
+		},
+		methods: {
+			parseBlog(blog) {
+				let t = blog.split('\n')
+				let entries = []
+				let currentEntry = {
+					title: t[1],
+					paragraphs: []
+				}
+
+				for (var i = 2; i < t.length - 1; i++) {
+					let line = t[i].trimStart()
+					if(!line) {
+						continue
+					}
+					if (line.startsWith('-') === true) {
+						currentEntry.paragraphs.push(line.substr(1).trimStart())
+					} else {
+						entries.push(currentEntry)
+						currentEntry = {
+							title: line,
+							paragraphs: []
+						}
+					}
+				}
+
+				entries.push(currentEntry)
+
+				this.entries = entries
+			},
+		}
+	}
+</script>
+
+<style>
+	.entry {
+		border-style: solid;
+		border-color: #aaaa;
+		border-width: 1px;
+		margin-bottom: 1em;
+		padding: 0.5em;
+	}
+
+	.entry h4 {
+		margin: 0px;
+	}
+
+	.entry p {
+		margin: 0px;
+		margin-left: 1em;
+		margin-top: 0.3em;
+	}
+</style>

+ 67 - 10
src/views/Mainpage.vue

@@ -1,15 +1,72 @@
 <template>
 	<div>
 		<h1>Welcome to this Project</h1>
-		This is the WIP website of a Project with the goal to create a new website for RedstoneServer.<br>
-		It currently has a website with a complex CMS and runs on a very old machine.<br>
-		The new website should at least provide a friendly less painful way to create an account and write an application, as well as judging these in an easy way.<br>
-		Further its (again) a learning project for all participants. It will use frameworks like Vue.<br>
-		<br>
-		Website for further contact: <a href="http://redstone-server.info">RedstoneServer</a><br>
-		<br>
-		If you want to help develop this website by working on front/backend just ask Ecconia. (I appreciate all help!)<br>
-		- The website probably needs someone to create a style for it. Cause Ecconia mostly does backend functionality.<br>
-		- Anyone may donate ideas and improvements!<br>
+		<p>
+			Goal of this project is to write a website for minecraft servers.<br>
+			This is the WIP website of a Project with the goal to create a new website for RedstoneServer.<br>
+			The target minecraft server is the RedstoneServer a server which already has a website.<br>
+			However that website has some security issues and lacks some neat features which this one shall have.
+		</p>
+
+		<h5>Issues in detail:</h5>
+		<p>
+			The original <a href="http://redstone-server.info">Website of RedstoneServer</a> runs since ages with the CMS drupal.<br>
+			Drupal works fine as long as someone maintains it and does security updates, which sadly is not really the case.<br>
+			Its not encrypted because the hardware is too old to support encryption, this causes lacking support with GMail for example.<br>
+			The registration on that website fails from time to time, its not possible to initialize the account on first attempt, team members have to help at that point.<br>
+			Each time an application was denied it has to be recreated instead of being edited by the creator.<br>
+			Judging appications requires the team member to select his name from a drop-down-box and choose his action on the website. Its not possible to remove used team member names from that drop-down-box once used, it becomes spammy with old team members. On top of that additional players have to be ranked up ingame.<br>
+		</p>
+
+		<h5>Main goals:</h5>
+		<p>
+			- Create an account linked with the UUID of the player.<br>
+			- Write applications, be able to edit them. (One per player)<br>
+			- Each application can be judged (approved/denied buttons) by any team member on the website. If approved the player will be ranked up ingame automatically.
+		</p>
+
+		<h5>Minor goals:</h5>
+		<p>
+			- Write ban appeals, if approved by a team member, automatically unban that player.<br>
+			- Log all bans on the website. Each player should be able to read the ban reason on his account.<br>
+			- Message other users on the website. Messege website users from ingame and the other way round.<br>
+			- Write PromotionRequests. (like before?)<br>
+			- Event blog on the mainpage. (like before?)<br>
+			- Player-Online-List (ingame and website).<br>
+			- Search for: Playername, UUID, ?.<br>
+			- Dynamic team member page.<br>
+			- Player's own markdown description.<br>
+			- Rules page.<br>
+			- Chat/Forum/both?<br>
+		</p>
+		
+		<h5>Contribute</h5>
+		<p>
+			<strong>This project also serves a learning purpose. New things will be learned and used.</strong><br>
+			Feel free to help developing this website. <strong>All help is appreciated.</strong><br>
+			To help you may always contact Ecconia to contribute. (You should know who he is, if you know this page...)<br>
+		</p>
+
+		<h5>Frontend:</h5>
+		<p>
+			The website has no design, but its simple to create one!<br>
+			Get e.g. the browser plugin <a href="https://userstyles.org/">https://userstyles.org/</a> and start creating CSS.<br>
+			Keep in mind, that the sourcecode is not helpful, but the Developer Tools in your browser will help you.<br>
+			Submit the written CSS as well as screenshots of your work to Ecconia, he will insert your CSS into this website.<br>
+			Any other frontend (looks) suggestions may be directed to Ecconia.<br>
+			Sadly Ecconia's CSS skills currently are good enough to set: borders, background/font-color, margin/padding. <strong>Your help counts!</strong><br>
+		</p>
+		<p>
+			This website uses the <a href="https://vuejs.org">Vue framework</a> the HTML code in the browser is generated by JavaScript.<br>
+			The sourcecode is only helpful on the server, if you want to contribute to the frontend on sourcecode level we will need to setup a shared git. Possible!
+		</p>
+
+		<h5>Backend:</h5>
+		<p>
+			The backend will be written in PHP and is mainly an API in charge of content management.<br>
+			The frontend will request all data from this backend in JSON form.<br>
+			Theoretically you could write your own website using this backend. But there should be a protection against this somewhen.<br>
+			Because the backend has no been started yet, you cannot contribute yet.
+		</p>
 	</div>
 </template>