letterpad-website-old/index.html at master · letterpad/letterpad-website-old · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Letterpad is an open source blog publishing engine built with React and GraphQL">
  <meta name="author" content="Abhishek Saha">

  <title>Letterpad | Blog Publishing Engine</title>
  <meta property="og:title" content="Letterpad | Blog Publishing Engine">
  <meta property="og:description"
    content="Letterpad is an open source blog publishing engine built with React and GraphQL">
  <meta property="og:image" content="https://letterpad.app/img/desktop.jpg">
  <meta property="og:url" content="https://letterpad.app">

  <meta name="twitter:title" content="Letterpad | Blog Publishing Engine">
  <meta name="twitter:description"
    content=" Letterpad is an open source blog publishing engine built with React and GraphQL">
  <meta name="twitter:image" content="https://letterpad.app/img/desktop.jpg">
  <meta name="twitter:card" content="summary_large_image">

  <meta name="twitter:site" content="@letterpad_cms">

  <!-- Bootstrap core CSS -->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom fonts for this template -->
  <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="vendor/simple-line-icons/css/simple-line-icons.css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">


  <!-- Custom styles for this template -->
  <link href="css/new-age.css" rel="stylesheet">
  <!-- Place this tag in your head or just before your close body tag. -->
  <script async defer src="https://buttons.github.io/buttons.js"></script>
</head>

<body id="page-top">

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
    <div class="container">
      <a class="navbar-brand js-scroll-trigger" href="#page-top">LETTERPAD</a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
        data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
        aria-label="Toggle navigation">
        Menu
        <i class="fa fa-bars"></i>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="https://docs.letterpad.app/">Docs</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#features">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://github.com/letterpad/letterpad">Github</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://twitter.com/letterpad_cms">Twitter</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#contribute">Contribute</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <header class="masthead">
    <div class="container h-100">
      <div class="row h-100">
        <div class="col-lg-6 col-sm-12 my-auto">
          <div class="header-content mx-auto">
            <h1 class="mb-5">
              <strong>Letterpad</strong> is an open source blog publishing engine</h1>
            <div>
              <a href="https://letterpad.app/demo/admin" target="_blank"
                class="btn btn-outline btn-xl js-scroll-trigger">Check the demo</a>
              <br />
              <br />
              <p>Email: demo@demo.com | Password: demo</p>

            </div>
            <div>
              <br />
              <br />
              <a class="github-button" href="https://github.com/letterpad/letterpad" data-icon="octicon-star"
                data-show-count="true" data-size="large" aria-label="Star letterpad/letterpad on GitHub">Star</a>

              <a class="github-button" data-size="large" href="https://github.com/letterpad/letterpad/fork"
                data-icon="octicon-repo-forked" data-show-count="true"
                aria-label="Fork letterpad/letterpad on GitHub">Fork</a>
              <!-- Place this tag where you want the button to render. -->
              <a class="github-button" data-size="large"
                href="https://github.com/letterpad/letterpad/archive/master.zip" data-icon="octicon-cloud-download"
                aria-label="Download letterpad/letterpad on GitHub">Download</a>
            </div>

          </div>
        </div>
        <div class="col-lg-6 my-auto">
          <div class="device-container">
            <div class="device-mockup iphone6_plus portrait white">
              <div class="device">
                <div class="screen">

                  <img src="img/editor3.png" class="img-fluid">

                </div>
                <div class="button">

                </div>
              </div>
            </div>
          </div>
        </div>


        <!-- <div class="row h-100">
        <div class="col-lg-12 my-auto">
          <div class="col-lg-6 my-auto">
            <div class="header-content mx-auto text-center">
              <h1 class="mb-5">Letterpad is an open source & minimalistic blogging platform</h1>
              <a href="#download" class="btn btn-outline btn-xl js-scroll-trigger">Start Now for Free!</a>
            </div>
          </div>
          <div class="col-lg-6 my-auto">
            <p style="max-width: 500px;">
              <img src="img/letterpad-ipad.png" style="width: 100%;">
            </p>
          </div>
        </div>
      </div> -->
      </div>
  </header>

  <section class="features" id="features">
    <div class="container">
      <div class="section-heading text-center">
        <h2>Features</h2>
        <p class="text-muted">Few features of Letterpad!</p>
        <hr>
      </div>
      <div class="row">
        <div class="col-lg-12 my-auto">
          <div class="container-fluid">
            <div class="row">
              <div class="col-lg-4">
                <div class="feature-item">
                  <h3>Speed</h3>
                  <p class="text-muted">Letterpad has been built keeping performance as one of the key goal. Comparing
                    with wordpress, it is 20x faster.</p>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="feature-item">
                  <h3>Search Engine Optimised</h3>
                  <p class="text-muted">Letterpad takes care of SEO and creates facebook and twitter cards for each
                    post.
                  </p>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="feature-item">
                  <h3>Tidy Semantic Markup</h3>
                  <p class="text-muted">Letterpad strictly uses symantec html to define different parts of content
                    with appropriate attributes.</p>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-4">
                <div class="feature-item">
                  <h3>Rich Text Editor</h3>
                  <p class="text-muted">Letterpad Editor has been designed to give you a distraction free environment
                    containing inline tools along with inbuilt markdown.</p>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="feature-item">
                  <h3>Clean Permalinks</h3>
                  <p class="text-muted">All links in Letterpad is automatically created with clean, readable,
                    well-structured permalinks which are easily understood.</p>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="feature-item">
                  <h3>Integrations</h3>
                  <p class="text-muted">Integrates with Disqus, Youtube, Gist, Cloudinary for image cdn, Unsplash,
                    various databases,
                    any subscription newsletter like tinyletters, mailchimp. etc.
                    etc.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="editor" id="editor">
    <div class="container">
      <div class="row">

        <div class="col-lg-6 col-sm-12 mx-auto">
          <h4 class="section-heading">Publishing content</h4>
          <p>Letterpad provides you with all the commonly used tools, inline with the editor -
            they appear when you need them.
            This keeps the editor clean and allow you to focus on the most important part, which is content. Users who
            knows
            markdown can take advantage of the inbuilt markdown feature which auto converts markdown to html as you
            type.<br /><br />

            For image heavy websites, a CDN is always preferable. Letterpad integrates with <a
              href="https://cloudinary.com/users/register/free">Cloudinary</a>, a free application, to deliver optimized
            images.
          </p>
          <p>
            It also has an autodetect feature for various links. It can detect url as you type and auto converts
            them into to a link. Youtube links gets converted into embeds. These are just a few features of the editor.
          </p>
        </div>
        <div class="col-lg-6 col-sm-12 mx-auto column">
          <img width="100%" src="img/editor.png" />
        </div>
      </div>
    </div>
  </section>

  <section class="" id="contribute">
    <div class="container text-center">
      <h2>Contribute</h2>
      <br /> You can contribute to Letterpad in various ways like reporting bugs, proposing improvements, fixing issues,
      marketing,
      testing, suggestions, etc. You can join us in the
      <a href="https://letterpad.slack.com">Slack Channel</a> with this
      <a
        href="https://join.slack.com/t/letterpad/shared_invite/enQtMzgxNjk5OTI2NTgwLWRlNjE4ZDEzMzE2ZmQzOWFjYTk0ZTA3ZDdjN2Q5ZTg5ZmNlZDM1MTQ0YzE4MzhkMDNiN2FjNzczZjk0MjZiNTU">invitation
        link</a>.

      <br />
      <br /> We are a non-profit organization. If you would like to support the project, check our open
      <a href="https://opencollective.com/letterpad" target="_blank">collective page</a>.
      <p>Support this project by becoming a sponsor. Your logo will show up here with a link to your website.</p>
      <div>
        <br />
        <a class="btn btn-outline btn-xl js-scroll-trigger" href="https://opencollective.com/letterpad#backer"
          rel="nofollow">Become a backer</a>
        <a class="btn btn-outline btn-xl js-scroll-trigger" href="https://opencollective.com/letterpad#sponsor"
          rel="nofollow">Become a sponsor</a>
        <br />
        <br />
      </div>
    </div>

    <div class="overlay"></div>
  </section>

  <footer>
    <div class="container">
      <p>Released under the MIT License</p>
      <ul class="list-inline">
        <li class="list-inline-item">
          <a href="#">Letterpad</a>
        </li>
      </ul>
    </div>
  </footer>

  <!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- Plugin JavaScript -->
  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

  <!-- Custom scripts for this template -->
  <script src="js/new-age.min.js"></script>

</body>

</html>