Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Logstash.net homepage re-organization #13

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ update: | validate-version
@echo "Don't forget to commit this"

%.js: %.js.in | validate-version
sed -e "s/%VERSION%/$(VERSION)/" $< > $@
sed -e "s/%VERSION%/$(VERSION)/g" $< > $@

%.html: %.html.in | validate-version
sed -e "s/%VERSION%/$(VERSION)/" $< > $@
sed -e "s/%VERSION%/$(VERSION)/g" $< > $@
39 changes: 17 additions & 22 deletions _layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,28 @@
<html>
<head>
<meta charset="UTF-8">
<title>logstash - open source log management</title>
<title>Logstash - open source log management</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="nav">
<a href="/">home</a>
<a href="/docs/1.3.3">docs</a>
<a href="/docs/1.3.3/learn">about</a>
<a href="http://cookbook.logstash.net/">cookbook</a>
<a href="http://logstash.jira.com/">bugs</a>
</div>
<div class="container">
<div class="header">
<a href="/">
<img src="images/logstash.png" alt="a log with a moustash" style="padding-right:16px;" height="82px">
<img src="images/logo.png" alt="logstash">
</a>
<div class="nav">
<a href="/">home</a>
<a href="/docs/1.3.3">docs</a>
<a href="/docs/1.3.3/learn">about</a>
<a href="http://cookbook.logstash.net/">cookbook</a>
<a href="http://logstash.jira.com/">bugs</a>
</div>
</div>
<div id="content"><!--main content goes here, yo!-->
{{ content }}
</div>
<div class="mascot_and_logo">
<img src="/images/logstash.png" alt="logstash" style="float:left;"/>
<a href="/" ><img src="/images/logo.png" alt="logstash" /></a>
</div>
<div id="content"><!--main content goes here, yo!-->
{{ content }}
</div>
</div><!--closes main container div-->
<div class="clear"></div>
<div class="footer">
<p>Hello! I'm your friendly footer. If you're actually reading this, I'm impressed.</p>
</div>

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-6522917-5']);
Expand Down
39 changes: 17 additions & 22 deletions _layouts/default.html.in
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,28 @@
<html>
<head>
<meta charset="UTF-8">
<title>logstash - open source log management</title>
<title>Logstash - open source log management</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="nav">
<a href="/">home</a>
<a href="/docs/%VERSION%">docs</a>
<a href="/docs/%VERSION%/learn">about</a>
<a href="http://cookbook.logstash.net/">cookbook</a>
<a href="http://logstash.jira.com/">bugs</a>
</div>
<div class="container">
<div class="header">
<a href="/">
<img src="images/logstash.png" alt="a log with a moustash" style="padding-right:16px;" height="82px">
<img src="images/logo.png" alt="logstash">
</a>
<div class="nav">
<a href="/">home</a>
<a href="/docs/%VERSION%">docs</a>
<a href="/docs/%VERSION%/learn">about</a>
<a href="http://cookbook.logstash.net/">cookbook</a>
<a href="http://logstash.jira.com/">bugs</a>
</div>
</div>
<div id="content"><!--main content goes here, yo!-->
{{ content }}
</div>
<div class="mascot_and_logo">
<img src="/images/logstash.png" alt="logstash" style="float:left;"/>
<a href="/" ><img src="/images/logo.png" alt="logstash" /></a>
</div>
<div id="content"><!--main content goes here, yo!-->
{{ content }}
</div>
</div><!--closes main container div-->
<div class="clear"></div>
<div class="footer">
<p>Hello! I'm your friendly footer. If you're actually reading this, I'm impressed.</p>
</div>

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-6522917-5']);
Expand Down
Binary file modified images/screenshot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 41 additions & 12 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,53 @@
layout: default
title: Logstash
---
<div class="featured_text">
<p>logstash is a tool for managing events and logs. You can use it to collect
logs, parse them, and store them for later use (like, for searching).
Speaking of searching, logstash comes with a web interface for searching and
drilling into all of your logs.</p>
<div id="logstash_is">
<h2>Logstash is...</h2>

<p>It is fully free and fully open source. The license is Apache 2.0, meaning
you are pretty much free to use it however you want in whatever way.</p>
<ul>
<li>A tool for making sense of all your events and logs</li>
<li>Free and open-source under the <a href="http://www.apache.org/licenses/LICENSE-2.0.html">Apache 2.0 license</a></li>
<li>Easy to <a href="http://logstash.net/docs/1.3.3/tutorials/getting-started-simple">get started</a> with</li>
<li>Very extensible with a wealth of <a href="http://logstash.net/docs/1.3.3/">built-in plugins</a> and support for <a href="http://logstash.net/docs/1.3.3/extending">custom plugins</a></li>
<li>Used by an active, passionate community</li>
<li><a href="http://www.elasticsearch.org/overview/logstash/">Supported by ElasticSearch</a> for commercial training and support</li>
</ul>

<p>logstash is now a part of the <a href="http://elasticsearch.org">Elasticsearch</a> family! This allows us to build better software much faster as well as offering <a href="http://www.elasticsearch.com/support/">production support</a></p>
<p id="call_to_action">
<a class="awesome_button" href="https://download.elasticsearch.org/logstash/logstash/logstash-1.3.3-flatjar.jar">Download Logstash</a>
<a class="awesome_button" href="http://demo.kibana.org/">Try a Live Demo</a>
<a class="awesome_button" href="/learn">Learn More</a>
</p>
</div>

<a class="awesome_button" href="https://download.elasticsearch.org/logstash/logstash/logstash-1.3.3-flatjar.jar">Download</a>
<div id="getting_started">
<h2>Getting Started</h2>

<a class="awesome_button" href="/docs/1.3.3/learn">Learn</a>
<a class="awesome_button" href="http://cookbook.logstash.net/">Cookbook</a>
<a class="awesome_button" href="http://demo3.logstash.net/index.html#/dashboard/file/logstash.json">Search Demo</a>
<div class="getting_started_step">
<h3>Configure</h3>
<pre><code class="logstash_config"><span class="comment"># logstash.conf</span>
<span class="plugin_type">input</span> {
<span class="plugin_name">file</span> { <span class="param">path</span> =&gt; <span class="string">"/var/log/apache/access.log"</span> }
}
<span class="plugin_type">filter</span> {
<span class="plugin_name">grok</span> {
<span class="param">match</span> =&gt; [ <span class="string">"message"</span>, <span class="string">"%{<span class="grok_syntax">COMBINEDAPACHELOG</span>}"</span> ]
}
}
<span class="plugin_type">output</span> {
<span class="plugin_name">elasticsearch</span> { <span class="param">embedded</span> =&gt; <span class="number">True</span> }
}</code></pre>
</div>

<div class="getting_started_step">
<h3>Run</h3>
<pre><code class="terminal">java -jar logstash.jar agent -f logstash.conf -- web</code></pre>
</div>

<h3>Explore</h3>
<img src="images/screenshot.png"/>
</div>

<div class="clear"></div>

<div class="sub_content">
Expand Down
53 changes: 41 additions & 12 deletions index.html.in
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,53 @@
layout: default
title: Logstash
---
<div class="featured_text">
<p>logstash is a tool for managing events and logs. You can use it to collect
logs, parse them, and store them for later use (like, for searching).
Speaking of searching, logstash comes with a web interface for searching and
drilling into all of your logs.</p>
<div id="logstash_is">
<h2>Logstash is...</h2>

<p>It is fully free and fully open source. The license is Apache 2.0, meaning
you are pretty much free to use it however you want in whatever way.</p>
<ul>
<li>A tool for making sense of all your events and logs</li>
<li>Free and open-source under the <a href="http://www.apache.org/licenses/LICENSE-2.0.html">Apache 2.0 license</a></li>
<li>Easy to <a href="http://logstash.net/docs/%VERSION%/tutorials/getting-started-simple">get started</a> with</li>
<li>Very extensible with a wealth of <a href="http://logstash.net/docs/%VERSION%/">built-in plugins</a> and support for <a href="http://logstash.net/docs/%VERSION%/extending">custom plugins</a></li>
<li>Used by an active, passionate community</li>
<li><a href="http://www.elasticsearch.org/overview/logstash/">Supported by ElasticSearch</a> for commercial training and support</li>
</ul>

<p>logstash is now a part of the <a href="http://elasticsearch.org">Elasticsearch</a> family! This allows us to build better software much faster as well as offering <a href="http://www.elasticsearch.com/support/">production support</a></p>
<p id="call_to_action">
<a class="awesome_button" href="https://download.elasticsearch.org/logstash/logstash/logstash-%VERSION%-flatjar.jar">Download Logstash</a>
<a class="awesome_button" href="http://demo.kibana.org/">Try a Live Demo</a>
<a class="awesome_button" href="/learn">Learn More</a>
</p>
</div>

<a class="awesome_button" href="https://download.elasticsearch.org/logstash/logstash/logstash-%VERSION%-flatjar.jar">Download</a>
<div id="getting_started">
<h2>Getting Started</h2>

<a class="awesome_button" href="/docs/%VERSION%/learn">Learn</a>
<a class="awesome_button" href="http://cookbook.logstash.net/">Cookbook</a>
<a class="awesome_button" href="http://demo3.logstash.net/index.html#/dashboard/file/logstash.json">Search Demo</a>
<div class="getting_started_step">
<h3>Configure</h3>
<pre><code class="logstash_config"><span class="comment"># logstash.conf</span>
<span class="plugin_type">input</span> {
<span class="plugin_name">file</span> { <span class="param">path</span> =&gt; <span class="string">"/var/log/apache/access.log"</span> }
}
<span class="plugin_type">filter</span> {
<span class="plugin_name">grok</span> {
<span class="param">match</span> =&gt; [ <span class="string">"message"</span>, <span class="string">"%{<span class="grok_syntax">COMBINEDAPACHELOG</span>}"</span> ]
}
}
<span class="plugin_type">output</span> {
<span class="plugin_name">elasticsearch</span> { <span class="param">embedded</span> =&gt; <span class="number">True</span> }
}</code></pre>
</div>

<div class="getting_started_step">
<h3>Run</h3>
<pre><code class="terminal">java -jar logstash.jar agent -f logstash.conf -- web</code></pre>
</div>

<h3>Explore</h3>
<img src="images/screenshot.png"/>
</div>

<div class="clear"></div>

<div class="sub_content">
Expand Down
Empty file modified regen.sh
100644 → 100755
Empty file.
91 changes: 76 additions & 15 deletions style.css
Original file line number Diff line number Diff line change
Expand Up @@ -12,34 +12,103 @@ p { margin: 0; }
a:link, a:visited { color: #658F3D; text-decoration:none; }
a:hover { text-decoration:underline; }
pre { white-space: pre; margin-left: 15px; margin-right: 15x; border: 1px solid #FFC280; background-color: #F7F0E9; padding: 8px; overflow: auto; }
code { font-family: monospace; }
dl { margin-left: 20px; }
dt { font-weight: bold; }
dd { margin-left: 20px; }

li { list-style-type: disc; margin-left: 30px !important; }
ul li { list-style-type: disc; margin-left: 30px !important; }
ol li { list-style-type: decimal; margin-left: 30px !important; }

code, code * { font-family: monospace; }
code.logstash_config .comment {
color: #998;
}
code.logstash_config .plugin_type {
color: #458;
}
code.logstash_config .plugin_name {
color: #08B;
}
code.logstash_config .param {
color: #900;
}
code.logstash_config .string {
color: #D24;
}
code.logstash_config .grok_syntax {
color: #917;
}
code.logstash_config .number {
color: #299;
}

/* main container */
.container { width: 960px; margin: 0 auto -30px; min-height: 100%; height: auto !important; height: 100%;}

/* header */
.header {padding: 26px 0px;}
.header { padding: 26px 0px; }
.header img { float: left; }

/* nav */
.nav { float: right; font-size: 18px;}
.nav a:link, .nav a:visited, .nav a:hover { font-weight: bold; padding: 0px 10px; }
.nav {
padding-top: 20px;
text-align: right;
font-size: 18px;
}
.nav a:link, .nav a:visited, .nav a:hover { font-weight: bold; padding: 40px 10px; }

/* featured content for homepage */
.mascot { float:right; margin-left: 30px; }
.logo-text { height: 2em; }
.image_and_logo { margin: 45px 0px 0px 0px; font-size:18px; }
.featured_text { margin:0px 0px 260px; }
.featured_text p { font-size: 16px; margin-bottom: 20px; }
a.awesome_button { background:url('images/button.png'); background-repeat:no-repeat; width:283px; height:56px; float:left; text-decoration:none; text-align:center; padding-right: 10px; padding-top:10px; font-weight:bold; font-family:"Helvetica Neue","Helvetica","Arial",sans-serif; font-size:22px; color:#475530; text-shadow: -1px -1px 1px #DDD; }
a.awesome_button:hover { background: url('images/button_hover.png'); background-repeat:no-repeat;}
a.awesome_button {
background: url('images/button.png');
background-repeat: no-repeat;
width: 283px;
height: 56px;
display: inline-block;
text-decoration: none;
text-align: center;
padding-right: 10px;
padding-top: 10px;
font-weight: bold;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: 22px;
color: #475530;
text-shadow: -1px -1px 1px #DDD;
}
a.awesome_button:hover {
background: url('images/button_hover.png');
background-repeat:no-repeat;
}

/* home page content */
#call_to_action {
text-align: center;
margin-top: 1em;
}
#getting_started h3 {
text-align: center;
}
.getting_started_step {
display: inline-block;
width: 460px;
vertical-align: top;
margin: 24px 0px;
}
.getting_started_step .awesome_button {
padding-right: 0;
}
.getting_started_step pre {
text-align: left;
font-size: 14px;
}

/* main content rendered via template */
#content { margin: 0px 0px 60px 0px; }
#content div { clear: left; }
.content_wrapper {float:left; width: 100%;} /* floats content to the right of mascot image for content_right layout */

/* main content that needs to float all the way down for doc single pages */
Expand All @@ -56,9 +125,6 @@ a.awesome_button:hover { background: url('images/button_hover.png'); background-
#content_right li { margin: 5px 0px 0px 0px;}
#content_right p { margin: 10px 0px;}




/* about page */
.about p { margin: 0px 0px 20px 0px;}

Expand All @@ -68,11 +134,6 @@ a.awesome_button:hover { background: url('images/button_hover.png'); background-
.sub_content_text { width: 460px; margin: 0px 20px 0px; float: left; text-align:left; }
.sub_content_text p { margin: 0px 0px 12px; }


/* footer */

.footer { font-size:80%; text-align:center;}

.warning {
padding-left: 1em;
padding-right: 1em;
Expand Down