Add starter files for the project

project/techtrends/README.md

@@ -0,0 +1,9 @@
+# TechTreds Web Application
+
+This is a Flask application that lists the latest articles within the cloud-native ecosystem.
+
+## Run 
+
+To run this applciation there are 2 steps required:
+1. Initialize the database by using `python init_db.py` command. This will create a **database.db** file that will be used by the web application.
+2. Run the TechTrends application by using the `python app.py` command. The application is running on port `3111`.

project/techtrends/app.py

@@ -0,0 +1,70 @@
+import sqlite3
+
+from flask import Flask, jsonify, json, render_template, request, url_for, redirect, flash
+from werkzeug.exceptions import abort
+
+# Function to get a database connection.
+# This function connects to database with the name `database.db`
+def get_db_connection():
+    connection = sqlite3.connect('database.db')
+    connection.row_factory = sqlite3.Row
+    return connection
+
+# Function to get a post using its ID
+def get_post(post_id):
+    connection = get_db_connection()
+    post = connection.execute('SELECT * FROM posts WHERE id = ?',
+                        (post_id,)).fetchone()
+    connection.close()
+    return post
+
+# Define the Flask application
+app = Flask(__name__)
+app.config['SECRET_KEY'] = 'your secret key'
+
+# Define the main route of the web application 
+@app.route('/')
+def index():
+    connection = get_db_connection()
+    posts = connection.execute('SELECT * FROM posts').fetchall()
+    connection.close()
+    return render_template('index.html', posts=posts)
+
+# Define how each individual article is rendered 
+# If the post ID is not found a 404 page is shown
+@app.route('/<int:post_id>')
+def post(post_id):
+    post = get_post(post_id)
+    if post is None:
+      return render_template('404.html'), 404
+    else:
+      return render_template('post.html', post=post)
+
+# Define the About Us page
+@app.route('/about')
+def about():
+    return render_template('about.html')
+
+# Define the post creation functionality 
+@app.route('/create', methods=('GET', 'POST'))
+def create():
+    if request.method == 'POST':
+        title = request.form['title']
+        content = request.form['content']
+
+        if not title:
+            flash('Title is required!')
+        else:
+            connection = get_db_connection()
+            connection.execute('INSERT INTO posts (title, content) VALUES (?, ?)',
+                         (title, content))
+            connection.commit()
+            connection.close()
+
+            return redirect(url_for('index'))
+
+    return render_template('create.html')
+
+# start the application on port 3111
+if __name__ == "__main__":
+   app.run(host='0.0.0.0', port='3111')

project/techtrends/init_db.py

@@ -0,0 +1,36 @@
+import sqlite3
+
+connection = sqlite3.connect('database.db')
+
+
+with open('schema.sql') as f:
+    connection.executescript(f.read())
+
+cur = connection.cursor()
+
+cur.execute("INSERT INTO posts (title, content) VALUES (?, ?)",
+            ('2020 CNCF Annual Report', 'The Cloud Native Computing Foundation (CNCF) annual report for 2020 is now available. The report highlights the growth of the community, events, projects, and more, over the past year.')
+            )
+
+cur.execute("INSERT INTO posts (title, content) VALUES (?, ?)",
+            ('KubeCon + CloudNativeCon 2021', 'The Cloud Native Computing Foundation flagship conference gathers leading technologists from leading open source and cloud native communities to further the education and advancement of cloud native computing.')
+            )
+
+cur.execute("INSERT INTO posts (title, content) VALUES (?, ?)",
+            ('Kubernetes v1.20 Release Notes', 'Kubernetes is an open source container orchestration engine for automating deployment, scaling, and management of containerized applications. The open source project is hosted by the Cloud Native Computing Foundation (CNCF).')
+            )
+
+cur.execute("INSERT INTO posts (title, content) VALUES (?, ?)",
+            ('CNCF Cloud Native Interactive Landscape', 'This landscape is intended as a map through the previously uncharted terrain of cloud native technologies. There are many routes to deploying a cloud native application, with CNCF Projects representing a particularly well-traveled path.')
+            )
+
+cur.execute("INSERT INTO posts (title, content) VALUES (?, ?)",
+            ('CNCF Cloud Native Definition v1.0', 'Cloud native technologies empower organizations to build and run scalable applications in modern, dynamic environments such as public, private, and hybrid clouds. Containers, service meshes, microservices, immutable infrastructure, and declarative APIs exemplify this approach. \nThese techniques enable loosely coupled systems that are resilient, manageable, and observable. Combined with robust automation, they allow engineers to make high-impact changes frequently and predictably with minimal toil.\nThe Cloud Native Computing Foundation seeks to drive adoption of this paradigm by fostering and sustaining an ecosystem of open source, vendor-neutral projects. We democratize state-of-the-art patterns to make these innovations accessible for everyone.')
+            )
+
+cur.execute("INSERT INTO posts (title, content) VALUES (?, ?)",
+            ('Kubernetes Certification', 'CNCF, along with the Linux Foundation, have created certification programs for Kubernetes as well as training for CNCF projects Prometheus and Fluentd.')
+            )
+
+connection.commit()
+connection.close()

project/techtrends/requirements.txt

@@ -0,0 +1,2 @@
+Flask==1.1.1
+werkzeug==0.16.1

project/techtrends/schema.sql

@@ -0,0 +1,8 @@
+DROP TABLE IF EXISTS posts;
+
+CREATE TABLE posts (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    created TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    title TEXT NOT NULL,
+    content TEXT NOT NULL
+);

project/techtrends/static/css/main.css

@@ -0,0 +1,101 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #444;
+}
+
+/*
+ * Formatting the header area
+ */
+
+header {
+  background-color: #f0efeb;
+  height: 60px;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+a.logo {
+  font-size: 1.7em;
+  color: #444;
+  float: left;
+  margin-top: 16px;
+  margin-left: 16px;
+  text-decoration: none;
+}
+
+a.logo:hover {
+  color: #777;
+}
+
+/*
+ * Centering the body content
+ */
+
+.container {
+  width: 800px;
+  margin: 0 auto;
+  margin-block-start: 80px;
+}
+
+.form {
+  margin:10px auto;
+  max-width: 400px;
+  padding: 20px 12px 10px 20px;
+}
+
+.label {
+  margin:0 0 3px 0;
+  padding:0px;
+  display:block;
+  font-weight: bold;
+}
+
+.button {
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  width: 100%;
+  padding: 3%;
+  background: #004643;
+  border-bottom: 2px solid #004643;
+  border-top-style: none;
+  border-right-style: none;
+  border-left-style: none;	
+  color: #fff;
+}
+
+h2 {
+  font-size: 3em;
+  margin-top: 40px;
+  text-align: center;
+  letter-spacing: -2px;
+  color: #004643;
+}
+
+.post {
+   text-decoration: none;
+}
+
+.timestamp {
+  color: #999;
+}
+
+.menu {
+  float: right;
+}
+
+.menu li {
+  display: inline;
+}
+
+.menu li + li {
+  margin-left: 35px;
+  margin-right: 16px;
+}
+
+.menu li a {
+  color: #444;
+  text-decoration: none;
+}

project/techtrends/templates/404.html

@@ -0,0 +1,6 @@
+{% extends 'base.html' %}
+
+{% block content %}
+    <h2>{% block title %} Article Not Found {% endblock %}</h2>
+    <p> Try reading another acrticle! </p>
+{% endblock %}

project/techtrends/templates/about.html

@@ -0,0 +1,8 @@
+{% extends 'base.html' %}
+
+{% block content %}
+    <h2>{% block title %} About Us{% endblock %}</h2>
+    <p> 
+     Welcome to TechTrends, your number one source for latest news in the cloud-native encosystem. We're dedicated to providing you the best of articles, with a focus on quality content, vendor agnosticism and cloud-native space. Since it was founded in 2020 by Katie Gamanji, we're working to turn our passion for cloud-native technologies into shareable content. We hope you enjoy our products as much as we enjoy offering them to you.
+    </p>
+{% endblock %}

project/techtrends/templates/base.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+     <title>{% block title %} {% endblock %}</title>
+     <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
+  </head>
+  <body>
+      <header> 
+        <a class="logo" href="{{ url_for('index')}}">TechTrends</a>
+	<div> 
+            <ul class="menu">
+            <li>
+                <a href="about">About</a>
+            </li>
+            <li>
+                <a href="{{url_for('create')}}">New Post</a>
+            </li>
+            </ul>
+        </div>
+      </header>
+    <div class="container">
+        {% block content %} {% endblock %}
+    </div>
+  </body>
+</html>
+

project/techtrends/templates/create.html

@@ -0,0 +1,20 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<h2>{% block title %} Create a New Post {% endblock %}</h2>
+
+<form method="post">
+    <div class="form">
+        <label class="label" for="title">Title *</label>
+        <input type="text" name="title" placeholder="Post title" value="{{ request.form['title'] }}"></input>
+    </div>
+
+    <div class="form">
+        <label class="label" for="content">Content</label>
+	<textarea name="content" placeholder="Post content">{{ request.form['content'] }}</textarea>
+    </div>
+    <div class="form">
+        <button type="submit" class="button">Submit</button>
+    </div>
+</form>
+{% endblock %}

project/techtrends/templates/index.html

@@ -0,0 +1,12 @@
+{% extends 'base.html' %}
+
+{% block content %}
+    <h1>{% block title %} Welcome to TechTrends!{% endblock %}</h1>
+    {% for post in posts %}
+        <a class="post" href="{{ url_for('post', post_id=post['id']) }}">
+            <h2>{{ post['title'] }}</h2>
+        </a>
+        <span class="timestamp">{{ post['created'] }}</span>
+        <hr>
+    {% endfor %}
+{% endblock %}

project/techtrends/templates/post.html

@@ -0,0 +1,7 @@
+{% extends 'base.html' %}
+
+{% block content %}
+    <h2>{% block title %} {{ post['title'] }} {% endblock %}</h2>
+    <span>{{ post['created'] }}</span>
+    <p>{{ post['content'] }}</p>
+{% endblock %}