Add JSON-LD and semantic tags

This commit is contained in:
Manuel Ebert 2019-07-15 12:43:16 -07:00
parent bf16472b53
commit b424749d2d
3 changed files with 89 additions and 63 deletions

2
docs/CNAME Normal file
View file

@ -0,0 +1,2 @@
jrnl.sh

56
docs/theme/index.css vendored
View file

@ -59,7 +59,7 @@ h3 { font-weight: 400; }
background-position: -4em -1em; background-position: -4em -1em;
} }
#upper { header {
background-image: linear-gradient(211deg, #95699C 0%, #604385 100%); background-image: linear-gradient(211deg, #95699C 0%, #604385 100%);
color: white; color: white;
border: 0px solid transparent; border: 0px solid transparent;
@ -139,7 +139,7 @@ h3 { font-weight: 400; }
} }
#title { #title {
max-width: 690px; max-width: 630px;
margin: 0 auto; margin: 0 auto;
padding: 0px 20px; padding: 0px 20px;
} }
@ -150,7 +150,7 @@ h3 { font-weight: 400; }
padding: 0px 20px; padding: 0px 20px;
} }
#upper img { header img {
float: left; float: left;
margin-right: 30px; margin-right: 30px;
} }
@ -160,11 +160,11 @@ h1 {
font-weight: 300; font-weight: 300;
} }
#nav { nav {
text-align: center; text-align: center;
} }
#nav a#twitter-nav { nav a#twitter-nav {
display: none; display: none;
} }
@ -173,7 +173,7 @@ a {
text-decoration: underline; text-decoration: underline;
} }
#nav a { nav a {
font-size: 14pt; font-size: 14pt;
line-height: 40pt; line-height: 40pt;
margin: 0 40px; margin: 0 40px;
@ -183,7 +183,7 @@ a:hover {
color: #A3629F; color: #A3629F;
} }
#nav a.cta { nav a.cta {
display: inline-block; display: inline-block;
color: white; color: white;
background-image: linear-gradient(259deg, #A3629F 0%, #604385 100%); background-image: linear-gradient(259deg, #A3629F 0%, #604385 100%);
@ -196,15 +196,15 @@ a:hover {
text-decoration: none; text-decoration: none;
} }
#nav a.cta:hover { nav a.cta:hover {
text-decoration: none; text-decoration: none;
background-image: linear-gradient(259deg, #AE57A8 0%, #68419C 100%); background-image: linear-gradient(259deg, #AE57A8 0%, #68419C 100%);
box-shadow: 0 4px 16px 0 rgba(0,0,0,0.25); box-shadow: 0 4px 16px 0 rgba(0,0,0,0.25);
color: #f7f8f9; color: #f7f8f9;
} }
#lower { main {
padding: 50px 0; padding: 50px 0 0 0;
} }
@ -218,28 +218,28 @@ a:hover {
} }
.flex .item { .flex section {
/*margin: 20px;*/ /*margin: 20px;*/
margin-top: 40px; margin-top: 40px;
width: 32%; width: 32%;
} }
.flex .item:first-child { .flex section:first-child {
margin-left: 0px; margin-left: 0px;
} }
.flex .item:last-child { .flex section:last-child {
margin-right: 0px; margin-right: 0px;
} }
.flex .item i { .flex section i {
float: left; float: left;
left: 0; left: 0;
display: block; display: block;
margin: 0px auto 10px auto; margin: 0px auto 10px auto;
} }
.flex .item h3 { .flex section h3 {
margin-top: 0; margin-top: 0;
font-size: 14pt; font-size: 14pt;
color: #684688; color: #684688;
@ -248,51 +248,59 @@ a:hover {
margin-left: 40px; margin-left: 40px;
} }
.flex .item p { .flex section p {
padding-left: 40px; padding-left: 40px;
color: #888; color: #888;
font-size: 12pt; font-size: 12pt;
margin: 0; margin: 0;
} }
footer {
max-width: 700px;
margin: 20px auto;
padding: 0 20px 20px 20px;
font-size: 10pt;
opacity: .5;
text-align: center;
}
@media screen and (max-width: 680px) { @media screen and (max-width: 680px) {
.flex { .flex {
display: block; display: block;
padding: 0; padding: 0;
} }
.flex .item { .flex section {
width: 100%; width: 100%;
} }
#lower { main {
padding: 20px; padding: 20px;
margin: 0; margin: 0;
width: calc(100% - 40px); width: calc(100% - 40px);
} }
#nav a, nav a,
#nav a#twitter-nav { nav a#twitter-nav {
display: inline-block; display: inline-block;
margin: 0px 10px; margin: 0px 10px;
} }
#nav a.cta { nav a.cta {
display: block; display: block;
margin: 20px; margin: 20px;
} }
#upper #twitter { header #twitter {
display: none; display: none;
} }
#upper #logo { header #logo {
display: block; display: block;
float: none; float: none;
margin: 0px auto; margin: 0px auto;
} }
#upper #title br { header #title br {
display: none; display: none;
} }

94
docs/theme/index.html vendored
View file

@ -24,11 +24,26 @@
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
<link rel="shortcut icon" href="img/favicon.ico"> <link rel="shortcut icon" href="img/favicon.ico">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"applicationCategory": "https://schema.org/LifestyleApplication",
"name": "jrnl",
"description": "Collect your thoughts and notes without leaving the command line.",
"operatingSystem": ["macOS", "Windows", "Linux"],
"thumbnailUrl": "https://jrnl.sh/img/banner_og.png",
"installUrl": "https://jrnl.sh/installation",
"softwareVersion": "2.0.0rc2"
}
</script>
</head> </head>
<body> <body>
<div id="upper"> <header>
<a id="twitter" href="https://twitter.com/intent/tweet?text=Write+your+memoirs+on+the+command+line.+Like+a+boss.+%23jrnl&url=http%3A%2F%2Fjrnl.sh&via=maebert"><i class="icon twitter"></i>Tell your friends</a> <aside>
<a id="twitter" href="https://twitter.com/intent/tweet?text=Write+your+memoirs+on+the+command+line.+Like+a+boss.+%23jrnl&url=http%3A%2F%2Fjrnl.sh&via=maebert"><i class="icon twitter"></i>Tell your friends</a>
</aside>
<div id="title"> <div id="title">
<img id="logo" src="img/jrnl_white.svg" width="90px" height="98px" title="jrnl" /> <img id="logo" src="img/jrnl_white.svg" width="90px" height="98px" title="jrnl" />
<h1>Collect your thoughts and notes <br />without leaving the command line.</h1> <h1>Collect your thoughts and notes <br />without leaving the command line.</h1>
@ -38,72 +53,73 @@
<div id="typed"></div> <div id="typed"></div>
</div> </div>
</div> </div>
</div> </header>
<div id="lower"> <main>
<div id="nav"> <nav>
<a href="overview">Documentation</a> <a href="overview">Documentation</a>
<a href="http://github.com/jrnl-org/jrnl" title="View on Github">Fork me on GitHub</a> <a href="http://github.com/jrnl-org/jrnl" title="View on Github">Fork me on GitHub</a>
<a id="twitter-nav" href="https://twitter.com/intent/tweet?text=Write+your+memoirs+on+the+command+line.+Like+a+boss.+%23jrnl&url=http%3A%2F%2Fjrnl.sh&via=maebert">Tell your friends on twitter</a> <a id="twitter-nav" href="https://twitter.com/intent/tweet?text=Write+your+memoirs+on+the+command+line.+Like+a+boss.+%23jrnl&url=http%3A%2F%2Fjrnl.sh&via=maebert">Tell your friends on twitter</a>
<a href="installation" class="cta">Download</a> <a href="installation" class="cta">Download</a>
</div> </nav>
<div class="flex"> <div class="flex">
<div class="item"> <section>
<i class="icon nli"></i> <i class="icon nli"></i>
<h3>Human friendly.</h3> <h3>Human friendly.</h3>
<p>jrnl has a natural-language interface so you don't have to remember cryptic shortcuts when you're writing down your thoughts.</p> <p>jrnl has a natural-language interface so you don't have to remember cryptic shortcuts when you're writing down your thoughts.</p>
</div> </section>
<div class="item"> <section>
<i class="icon future"></i> <i class="icon future"></i>
<h3>Future-proof.</h3> <h3>Future-proof.</h3>
<p>Your journals are stored in plain-text files that will still be readable in 50 years when all your fancy iPad apps will have gone the way of the Dodo.</p> <p>Your journals are stored in plain-text files that will still be readable in 50 years when all your fancy iPad apps will have gone the way of the Dodo.</p>
</div> </section>
<div class="item"> <section>
<i class="icon secure"></i> <i class="icon secure"></i>
<h3>Secure.</h3> <h3>Secure.</h3>
<p>Encrypt your journals with the industry-strength AES encryption. The NSA won't be able to read your dirty secrets.</p> <p>Encrypt your journals with the industry-strength AES encryption. The NSA won't be able to read your dirty secrets.</p>
</div> </section>
<div class="item"> <section>
<i class="icon sync"></i> <i class="icon sync"></i>
<h3>Accessible anywhere.</h3> <h3>Accessible anywhere.</h3>
<p>Sync your journals with Dropbox and capture your thoughts where ever you are</p> <p>Sync your journals with Dropbox and capture your thoughts where ever you are</p>
</div> </section>
<div class="item"> <section>
<i class="icon dayone"></i> <i class="icon dayone"></i>
<h3>DayOne compatible.</h3> <h3>DayOne compatible.</h3>
<p>Read, write and search your DayOne journal from the command line.</p> <p>Read, write and search your DayOne journal from the command line.</p>
</div> </section>
<div class="item"> <section>
<i class="icon github"></i> <i class="icon github"></i>
<h3>Free &amp; Open Source.</h3> <h3>Free &amp; Open Source.</h3>
<p>jrnl is made by a bunch of really friendly and remarkably attractive people. Maybe even <a href="https://www.github.com/jrnl-org/jrnl" title="Fork jrnl on GitHub">you</a>?</p> <p>jrnl is made by a bunch of really friendly and remarkably attractive people. Maybe even <a href="https://www.github.com/jrnl-org/jrnl" title="Fork jrnl on GitHub">you</a>?</p>
</div> </section>
<div class="item"> <section>
<i class="icon folders"></i> <i class="icon folders"></i>
<h3>For work and play.</h3> <h3>For work and play.</h3>
<p>Effortlessly access several journals for all parts of your life.</p> <p>Effortlessly access several journals for all parts of your life.</p>
</div> </section>
</div> </div>
<div class="footer"> </main>
</div> <footer>
</div> jrnl is made with love by <a rel="author" href="http://www.1450.me">Manuel Ebert</a> and <a href="https://github.com/jrnl-org/jrnl/graphs/contributors" title="Contributors">many other fabulous people</a>. If you need help, <a href="https://github.com/jrnl-org/jrnl/issues/new" title="Open a new issue on Github">submit an issue</a> on Github.
</footer>
<script src="//cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.min.js"></script>
<script> <script>
new Typed("#typed", { new Typed("#typed", {
strings: [ strings: [
"jrnl today: Started writing my memoirs. On the command line. Like a boss.", "jrnl today: Started writing my memoirs. On the command line. Like a boss.",
"jrnl yesterday 2pm: used jrnl to keep track of accomplished tasks. The done.txt for my todo.txt", "jrnl yesterday 2pm: used jrnl to keep track of accomplished tasks. The done.txt for my todo.txt",
"jrnl <b>-from</b> 2009 <b>-until</b> may<br /><i>`(Displays all entries from January 2009 to last may)`</i>", "jrnl <b>-from</b> 2009 <b>-until</b> may<br /><i>`(Displays all entries from January 2009 to last may)`</i>",
"jrnl A day on the beach with @beth and @frank. Taggidy-tag-tag.", "jrnl A day on the beach with @beth and @frank. Taggidy-tag-tag.",
"jrnl <b>--tags</b><br /><i>`@idea 7<br />@beth 5</i>`", "jrnl <b>--tags</b><br /><i>`@idea 7<br />@beth 5</i>`",
"jrnl <b>--export</b> json<br /><i>`(Exports your entire journal to json)</i>`", "jrnl <b>--export</b> json<br /><i>`(Exports your entire journal to json)</i>`",
"jrnl <b>--encrypt</b><br /><i>`(256 bit AES encryption. Crack this, NSA)</i>`" "jrnl <b>--encrypt</b><br /><i>`(256 bit AES encryption. Crack this, NSA)</i>`"
], ],
typeSpeed: 35, typeSpeed: 35,
backSpeed: 15, backSpeed: 15,
backDelay: 2000, backDelay: 2000,
loop: true, loop: true,
showCursor: false showCursor: false
}); });
</script> </script>
</body> </body>