templates/index.html 5.1 K raw
1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <meta name="theme-color" content="#ffffff" />
7
    <link rel="stylesheet" href="/static/styles.css" />
8
    <title>{{.MetaTitle}}</title>
9
    <meta name="description" content="{{.MetaDescription}}" />
10
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico" />
11
    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png" />
12
    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png" />
13
    <link rel="apple-touch-icon" href="/static/apple-touch-icon.png" />
14
    <link rel="icon" type="image/png" sizes="192x192" href="/static/android-chrome-192x192.png" />
15
    <link rel="icon" type="image/png" sizes="512x512" href="/static/android-chrome-512x512.png" />
16
    <link rel="manifest" href="/static/site.webmanifest" />
17
    <meta property="og:url" content="{{.CanonicalURL}}" />
18
    <meta property="og:type" content="website" />
19
    <meta property="og:title" content="{{.MetaTitle}}" />
20
    <meta property="og:description" content="{{.MetaDescription}}" />
21
    <meta property="og:image" content="{{.OGImage}}" />
22
    <meta name="twitter:card" content="summary_large_image" />
23
    <meta name="twitter:title" content="{{.MetaTitle}}" />
24
    <meta name="twitter:description" content="{{.MetaDescription}}" />
25
    <meta name="twitter:image" content="{{.OGImage}}" />
26
  </head>
27
  <body>
28
    <div class="header">
29
      <a href="/" class="logo"><h1>Feeds</h1></a>
30
    </div>
31
32
    {{if .FeedURLs}}
33
    <div id="feed-urls">
34
      {{range .FeedURLs}}{{.Name}}<br>{{end}}
35
    </div>
36
37
    <details class="now-what">
38
      <summary>now what?</summary>
39
      <div class="now-what-body">
40
        <p>Now that you've seen RSS in action, there's a few things you can do:</p>
41
        <ul>
42
          <li>Share this feed with someone else so they can also learn about RSS.</li>
43
          <li>You're the "someone else" that got sent here and not sure what this is? Check out the root of this website <a href="/" target="_blank" rel="noreferrer">here</a>.</li>
44
          <li>Keep using this free app by bookmarking the URLs for specific feed collections.</li>
45
          <li>Download a dedicated RSS reader. These will have many more features and let you sync across devices. A few include <a href="https://netnewswire.com" target="_blank" rel="noopener noreferrer">NetNewsWire</a>, <a href="https://www.currentreader.app" target="_blank" rel="noopener noreferrer">Current</a>, or <a href="https://play.google.com/store/apps/details?id=com.prof18.feedflow" target="_blank" rel="noopener noreferrer">FeedFlow</a>.</li>
46
          <li>Create your own RSS feed that you can share with others. A quick and no nonsense way to do this is to use an app like <a href="https://www.sourcefeed.app" target="_blank" rel="noopener noreferrer">sourcefeed</a>. The old fashioned way is to start a blog with something like <a href="https://pagecord.com" target="_blank" rel="noopener noreferrer">Pagecord</a> or <a href="https://bearblog.dev" target="_blank" rel="noopener noreferrer">BearBlog</a>.</li>
47
          <li>Still confused about what RSS is exactly? <a href="https://aboutfeeds.com" target="_blank" rel="moreferrer">This might help</a>.</li>
48
        </ul>
49
        <p>The web doesn't have to be a walled garden; we can make it open again.</p>
50
      </div>
51
    </details>
52
53
    {{if .Error}}
54
    <div id="error" class="error"><p>{{.Error}}</p></div>
55
    {{else}}
56
    <div id="feeds-container">
57
      <div class="feeds-list">
58
        {{range .Items}}
59
        <article class="feed-item">
60
          <div class="feed-meta"><span class="feed-date">{{.FormattedDate}}</span></div>
61
          <h3 class="feed-title"><a href="{{.Link}}" target="_blank" rel="noopener noreferrer">{{.Title}}</a></h3>
62
          {{if .Author}}<p class="feed-author">{{.Author}}</p>{{end}}
63
        </article>
64
        {{end}}
65
      </div>
66
    </div>
67
    {{end}}
68
69
    {{else}}
70
    <div class="about">
71
      <p>This is Feeds, an introduction to RSS.</p>
72
      <p>RSS lets you follow websites without algorithms or accounts, and provides a more holistic way to consume content on the internet. Select a few of the example feeds below, or paste in an external feed URL, then press Go. Your reading list lives entirely in the URL, so you can bookmark or share it.</p>
73
    </div>
74
75
    <div class="builder">
76
      <div class="discover-row">
77
        <input id="feed-input" type="url" placeholder="https://example.com or feed URL" autocomplete="off" />
78
        <button id="add-button" title="Add feed">+</button>
79
      </div>
80
      <p id="status" class="hint hidden"></p>
81
      <div id="examples" class="chips"></div>
82
      <ul id="pending" class="pending-list"></ul>
83
      <button id="go-button" disabled>Go</button>
84
    </div>
85
    <script src="/static/app.js"></script>
86
    {{end}}
87
88
    <footer class="footer">
89
      <a href="https://git.stevedylan.dev/feeds" target="_blank" rel="noopener noreferrer">source</a>
90
      <a href="/privacy">privacy</a>
91
      <a href="https://stevedylan.dev" target="_blank" rel="noopener noreferrer">by steve</a>
92
    </footer>
93
  </body>
94
</html>