chore: small edits 431e788d
Steve · 2025-09-29 14:28 1 file(s) · +15 −13
site/index.html +15 −13
4 4
  <meta charset="UTF-8">
5 5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 6
    <title>Blog Feeds</title>
7 -
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
8 -
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
9 -
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
10 -
    <link rel="manifest" href="/site.webmanifest">
7 +
    <link rel="apple-touch-icon" sizes="180x180" href="https://blogfeeds.net/apple-touch-icon.png">
8 +
    <link rel="icon" type="image/png" sizes="32x32" href="https://blogfeeds.net/favicon-32x32.png">
9 +
    <link rel="icon" type="image/png" sizes="16x16" href="https://blogfeeds.net/favicon-16x16.png">
10 +
    <link rel="manifest" href="https://blogfeeds.net/site.webmanifest">
11 11
    <link rel="stylesheet" href="tailwindcss" />
12 12
    <link rel="preconnect" href="https://fonts.googleapis.com">
13 13
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
55 55
  <div id="scrollContainer" class="flex snap-x snap-mandatory overflow-x-scroll">
56 56
    <section class="min-h-screen w-screen flex-shrink-0 flex flex-col gap-12 sm:justify-center justify-start items-center px-8 snap-center">
57 57
      <div class="max-w-4xl space-y-4">
58 -
        <p>Do you kinda hate social media?</p>
58 +
        <p>Tired of social media?</p>
59 59
60 -
        <p>Tired of doom scrolling through addicting feeds?</p>
60 +
        <p>Keep doom scrolling through addicting feeds?</p>
61 61
62 62
        <p>Miss the days when the web was just about connecting with people and their thoughts or ideas?</p>
63 63
87 87
      <div class="max-w-xl space-y-4">
88 88
        <img src="blog.svg" alt="Blog" id="blog" class="w-full mx-auto" />
89 89
90 -
        <p>Let me reassure you, this is actually simpler than what you're probably thinking. This doesn't have to be some well polished highly viewed monetization machine. It's just a simple website where you can casually talk about whatever you want to talk about! It can be long, short, a list of small things, or just a quote. It should be how you talk with other people in your own life, or how you communicate with the outside world. It should be you on a page. Here's a few places you can make a blog that are RSS enabled:</p>
90 +
        <p>Starting a blog is actually a lot simpler than what you're probably thinking. This doesn't have to be some well polished highly viewed monetization machine. It's just a simple website where you can casually talk about whatever you want to talk about! It can be long, short, a list of small things, or just a quote. It should be how you talk with other people in your own life, or how you communicate with the outside world. It should be you on a page. Here's a few places you can make a blog that are RSS enabled:</p>
91 91
92 92
        <details class="w-full">
93 93
          <summary class="cursor-pointer text-lg font-semibold flex items-center">
133 133
      <div class="max-w-xl space-y-4">
134 134
        <img src="rss.svg" alt="RSS" id="rss" class="w-full mx-auto" />
135 135
136 -
        <p>Also known as "really simple syndication", RSS has been around for decades. In short, it's simply a list of data that can be updated and notify people when something new has been posted. This is great for blogs since you don't have to always check all the people you want to follow. When you make your blog, you want to make sure it's RSS enabled (resources are further down). You also will want to get an RSS reader, as this will allow you to create a list of people to follow and let you read posts as they are published. These can vary from hosted web platforms where you might need to pay at some point to just free apps you can download. Would highly recommend trying a few and seeing which works best!</p>
136 +
        <p>Also known as "really simple syndication", RSS has been around for decades. In short, it's a simple list of data that can be updated and can notify when a new post has been shared. This is great for blogs as you don't want to always manually check the blogs you're following. When you make your blog, you want to make sure it's RSS enabled. You also will want to get an RSS reader, as this will allow you to create a list of people to follow and let you read posts as they are published. These can vary from hosted web platforms where you might need to pay at some point to just free apps you can download. Would highly recommend trying a few and seeing which works best!</p>
137 137
        <div class="flex flex-wrap gap-2">
138 138
          <a href="https://feedly.com" target="_blank" class="bg-purple-100 hover:bg-purple-200 text-purple-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">Feedly</a>
139 139
          <a href="https://www.inoreader.com" target="_blank" class="bg-purple-100 hover:bg-purple-200 text-purple-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">Inoreader</a>
149 149
        <img src="feeds.svg" alt="Feeds" id="feeds" class="w-full mx-auto" />
150 150
151 151
        <p>This takes us to our final point: Feeds. You can probably get away with just the first two items and then sharing it with people you already know, but what about meeting or talking to people you don't know? That's where Feeds come in. The idea is to create another page on your blog that has all the RSS feeds you're subscribed to. By keeping this public and always up to date, someone can visit your page, find someone new and follow them. Perhaps that person also has a feeds page, and the cycle continues until there is a natural and organic network of people all sharing with each other. So if you have a blog, consider making a feeds page and sharing it! If your RSS reader supports OPML file exports and imports, perhaps you can share that file as well to make it easier to share your feeds.</p>
152 +
        <p>Here's an <a class="underline" href="https://bearblog.stevedylan.dev/feeds" target="_blank">example Feeds Page</a> which should help get the idea across!</p>
152 153
      </div>
153 154
    </section>
154 155
155 156
    <section class="min-h-screen w-screen flex-shrink-0 flex flex-col sm:justify-center justify-start items-center sm:px-8 px-12 snap-center">
156 157
      <div class="max-w-xl space-y-4">
157 158
        <img src="idea.svg" class="w-full mx-auto" />
158 -
        <p>The best part about blog feeds? It's just an idea. There's no central authority. There's no platform. No massive tech giant trying to take your data. It's just you and the people you care about.</p>
159 +
        <p>The best part about blog feeds? It's just an idea. There's no central authority. There's no platform. No massive tech giant trying to take your data. It's just you, basic web standards, and the people you care about.</p>
159 160
      </div>
160 161
    </section>
161 162
225 226
          </details>
226 227
        </div>
227 228
228 -
        <div class="text-center mt-8 space-y-4">
229 -
          <button id="backToStartBtn" class="underline font-medium transition-colors">
229 +
        <div class="text-center mt-12 space-y-4">
230 +
          <!--<button id="backToStartBtn" class="underline font-medium transition-colors">
230 231
            Back to the beginning
231 -
          </button>
232 +
          </button>-->
232 233
          <div>
233 234
            <a href="https://github.com/stevedylandev/blogfeeds.net" target="_blank" class="inline-flex items-center gap-2 text-gray-600 hover:text-gray-800 text-sm font-medium transition-colors">
234 235
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
235 236
                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
236 237
              </svg>
237 -
              Contribute on GitHub
238 +
              Contribute
238 239
            </a>
239 240
          </div>
241 +
          <p class="text-gray-600 text-sm">Made by <a target="_blank" class="underline font-semibold" href="https://stevedylan.dev">Steve</a></p>
240 242
        </div>
241 243
      </div>
242 244
    </section>