- ID scansione:
- df7f3f7a-ee9e-417a-ab25-b7cc66766ae4Fatto
- URL inviato:
- https://sveltekit-static-starter.netlify.app/
- Report terminato:
Link · 10 trovati
I link in uscita identificati dalla pagina
| Link | Testo |
|---|---|
| https://kit.svelte.dev/ | SvelteKit |
| https://github.com/josh-collinsworth/sveltekit-blog-starter | visit the repo |
| https://tailwindcss.com/docs/guides/sveltekit | The directions for adding Tailwind can be found in the Tailwind docs, here |
| https://github.com/josh-collinsworth/sveltekit-blog-starter/issues/new | open an issue |
| https://coolors.co/palettes/trending | coolors.co |
| https://brailleinstitute.org/freefont | Atkinson Hyperlegible |
| https://github.com/tonsky/FiraCode | Fira Code |
| https://unsplash.com | Unsplash |
| https://kit.svelte.dev/docs | the SvelteKit docs |
| https://joshcollinsworth.com/contact | contact me directly |
Variabili JavaScript · 5 trovate
Le variabili JavaScript globali caricate sull'oggetto finestra di una pagina sono variabili dichiarate all'esterno delle funzioni e accessibili da qualsiasi punto del codice nell'ambito corrente
| Nome | Tipo |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| __sveltekit_1nuzdp0 | object |
| __svelte | object |
Messaggi di log della console · 0 trovati
Messaggi registrati nella console Web
HTML
Il corpo HTML non elaborato della pagina
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<link rel="icon" href="https://sveltekit-static-starter.netlify.app/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="modulepreload" href="./_app/immutable/entry/start.83MOz0ve.js">
<link rel="modulepreload" href="./_app/immutable/chunks/scheduler.w-57vXuY.js">
<link rel="modulepreload" href="./_app/immutable/chunks/singletons.KHE8h8bz.js">
<link rel="modulepreload" href="./_app/immutable/chunks/control.pJ1mnnAb.js">
<link rel="modulepreload" href="./_app/immutable/entry/app.X9ScMh_M.js">
<link rel="modulepreload" href="./_app/immutable/chunks/preload-helper.0HuHagjb.js">
<link rel="modulepreload" href="./_app/immutable/chunks/index.hMcl6jSy.js">
<link rel="modulepreload" href="./_app/immutable/nodes/0.bzO17DYa.js">
<link rel="modulepreload" href="./_app/immutable/chunks/index.oiCz_B55.js">
<link rel="modulepreload" href="./_app/immutable/chunks/each.-oqiv04n.js">
<link rel="modulepreload" href="./_app/immutable/chunks/config.9TwfRihT.js">
<link rel="modulepreload" href="./_app/immutable/nodes/2.6w0XOXG4.js"><title>My Awesome Blog</title><link rel="stylesheet" href="/css/vars.css"><link rel="stylesheet" href="/css/root.css"><link rel="stylesheet" href="/css/fonts.css"><link rel="stylesheet" href="/css/typography.css"><link rel="stylesheet" href="/css/layout.css"><link rel="stylesheet" href="/css/components.css"><link rel="stylesheet" href="/css/header-and-footer.css"><link rel="stylesheet" href="/css/forms.css"><link rel="stylesheet" href="/css/animation.css"><link rel="stylesheet" href="/css/utilities.css"><link rel="stylesheet" href="/css/code.css"><link rel="stylesheet" href="/css/prism.css"><link rel="alternate" type="application/rss+xml" title="My Awesome Blog" href="http://example.com/api/rss.xml">
<!-- You can add global <meta> tags here, but anything not global or dynamic should be a `<svelte:head>` tag on the proper page(s) instead. -->
<link rel="modulepreload" as="script" crossorigin="" href="https://sveltekit-static-starter.netlify.app/_app/immutable/nodes/1.WJ8GNKBg.js"><link rel="modulepreload" as="script" crossorigin="" href="https://sveltekit-static-starter.netlify.app/_app/immutable/chunks/README.18CQG2E9.js"><link rel="modulepreload" as="script" crossorigin="" href="https://sveltekit-static-starter.netlify.app/_app/immutable/nodes/4.nm-9FCdO.js"><link rel="modulepreload" as="script" crossorigin="" href="https://sveltekit-static-starter.netlify.app/_app/immutable/chunks/Pagination.EipgH4MA.js"></head>
<body>
<div id="svelte"> <div class="layout"><header><a class="skip-to-content-link" href="#main" data-svelte-h="svelte-wnfvf6">Skip to main content</a> <a href="/" class="site-title">My Awesome Blog</a> <button aria-pressed="false" class="menu-button" tabindex="0"><span class="sr-only" data-svelte-h="svelte-1yaclsl">Toggle hamburger menu</span> <svg viewBox="0 0 128 128" version="1.1" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g><rect x="0" y="12.48" width="128" height="18.688"></rect></g><g><rect x="0" y="96.832" width="128" height="18.688"></rect></g><g><rect x="0" y="54.656" width="128" height="18.688"></rect></g></svg></button> <nav class="main-nav"><ul><li><a href="/blog" aria-current="false">Blog </a></li><li><a href="/about" aria-current="false">About </a></li><li><a href="/contact" aria-current="false">Contact </a></li></ul> <button aria-pressed="false" class="menu-button" tabindex="-1"><span class="sr-only" data-svelte-h="svelte-1yaclsl">Toggle hamburger menu</span> <svg viewBox="0 0 128 128" version="1.1" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M64,48.496l-48.496,-48.496l-15.504,15.504l48.496,48.496l-48.496,48.496l15.504,15.504l48.496,-48.496l48.496,48.496l15.504,-15.504l-48.496,-48.496l48.496,-48.496l-15.504,-15.504l-48.496,48.496Z"></path></svg></button></nav></header> <main id="main" tabindex="-1"> <h1 id="sveltekit-static-blog-starter" data-svelte-h="svelte-1d9wuno"><a aria-hidden="true" tabindex="-1" href="#sveltekit-static-blog-starter"><span class="icon icon-link"></span></a>SvelteKit static blog starter</h1> <p data-svelte-h="svelte-1vkk58m">This starter contains everything you need to get up and running with
<a href="https://kit.svelte.dev/" rel="nofollow">SvelteKit</a> as a static site generator for your
Markdown (and Svelte)-powered blog.
<a href="https://sveltekit-static-starter.netlify.app/" rel="nofollow">Check out the demo here</a>, or
view the
<a href="https://github.com/josh-collinsworth/sveltekit-blog-starter" rel="nofollow">GitHub repo here</a>.</p> <h2 id="features" data-svelte-h="svelte-10ab07z"><a aria-hidden="true" tabindex="-1" href="#features"><span class="icon icon-link"></span></a>Features</h2> <ul data-svelte-h="svelte-mkvh10"><li>🎉 <strong>Fully up-to-date with SvelteKit 2!</strong></li> <li>⚡️ <strong>Super fast static site generation with hydration</strong>. Every route is
compiled down to static HTML and routed with (optional) JavaScript, thanks to
the SvelteKit static adapter (pre-installed)</li> <li>📦 <strong>Zero-config preloading</strong> for automatic, fast background preloading of all
top-level pages</li> <li>✍️ <strong>Markdown support</strong> with a pre-configured blog<ul><li>📑 <strong>Pagination</strong> included (<em>can customize posts per page</em>)</li> <li>✅ <strong>Category pages</strong> included</li> <li>💬 <strong>Posts JSON API</strong></li></ul></li> <li>📝 <strong>mdsvex</strong> pre-installed—use Svelte components inside Markdown!<ul><li>🔗 <strong>Rehype</strong> plugins are included to generate unique heading IDs, for
direct linking</li></ul></li> <li>📱 <strong>Responsive and accessible defaults</strong>; includes a “skip to content” link
and accessible mobile nav menu</li> <li>🔄 <strong>Page transitions</strong> (<em>fancy!</em>)</li> <li>🔎 <strong>Basic SEO</strong> for blog posts (<em>strongly recommend checking that out for
yourself, though</em>)</li> <li>📰 <strong>RSS feed</strong> set up and ready to go (<em>though it could also likely benefit
from some optimization</em>); just update <code>src/lib/config.js</code></li> <li>💈 <strong>Basic CSS ready to use, customize, or remove!</strong> Want to use Sass or
Tailwind instead? Just install them!
(<a href="https://tailwindcss.com/docs/guides/sveltekit" rel="nofollow">Directions for Tailwind can be found here</a>.)
Prefer to write your own? Delete <code>static/css</code> and add your own links in
<code>+layout.svelte</code>.</li> <li>ℹ️ <strong>Fonts included</strong>. (No more built-in Google tracking.)</li></ul> <h2 id="quick-start" data-svelte-h="svelte-s9mpyd"><a aria-hidden="true" tabindex="-1" href="#quick-start"><span class="icon icon-link"></span></a>Quick Start</h2> <p data-svelte-h="svelte-i7drls">Clone or download
<a href="https://github.com/josh-collinsworth/sveltekit-blog-starter" rel="nofollow">this repo</a>, then
install the dependencies and run the dev server:</p> <pre class="language-undefined"><code class="language-undefined">npx degit https://github.com/josh-collinsworth/sveltekit-blog-starter my-sveltekit-blog
cd my-sveltekit-blog
npm install
npm run dev -- --open</code></pre> <p data-svelte-h="svelte-ulmg0v">That should get a dev server up and running (assuming you have npm and Node
installed already). Any saved changes to components and styles should
auto-refresh blazingly fast.</p> <p data-svelte-h="svelte-j4xkf0">Now all you need to do is:</p> <ul data-svelte-h="svelte-1mcqabg"><li>Update the <code>src/lib/config.js</code> file</li> <li>Drop your Markdown posts into <code>src/lib/posts</code></li> <li>Optionally, customize the styles in <code>static/css</code></li></ul> <p data-svelte-h="svelte-15607o1">GLHF! Details below. 👇</p> <p data-svelte-h="svelte-1ksl3mt">(<em>Feel free to
<a href="https://github.com/josh-collinsworth/sveltekit-blog-starter/issues/new" rel="nofollow">open an issue</a>
if you come across one.</em>)</p> <h2 id="customization" data-svelte-h="svelte-s4e34n"><a aria-hidden="true" tabindex="-1" href="#customization"><span class="icon icon-link"></span></a>Customization</h2> <p data-svelte-h="svelte-1jjoi2">Be sure to update <code>src/lib/config.js</code> to reflect your site’s domain,
preferences, etc. This is also where the nav menu can be updated.</p> <p data-svelte-h="svelte-10ibnc9"><strong>It’s very important to update this file with the specific details of your
site.</strong> Info from this file is used in your RSS feed and SEO meta tags, so don’t
launch without updating it.</p> <h2 id="adding-new-posts" data-svelte-h="svelte-2tyjkk"><a aria-hidden="true" tabindex="-1" href="#adding-new-posts"><span class="icon icon-link"></span></a>Adding new posts</h2> <p data-svelte-h="svelte-a26wb">Adding new posts is as simple as dropping a new <code>.md</code> file into <code>src/lib/posts</code>.
New posts will automatically show up on the site, be added to the posts API, and
any category pages.</p> <p data-svelte-h="svelte-169c6pk">A few demo Markdown posts are included, and highlight some of the features of
this starter. These demo posts can be updated or removed, but it may be best to
use one as a starting point, just for the frontmatter properties.</p> <p data-svelte-h="svelte-fxnkdy">If you want to use other frontmatter properties in the template (or just modify
the layout), make changes in <code>src/routes/blog/[post]/+page.svelte</code>.</p> <p data-svelte-h="svelte-1gogm92">⚠️ <strong>Note: posts should have a <code>date</code> and an <code>excerpt</code> defined in the
frontmatter.</strong> They’re sorted by <code>date</code>, and use <code>excerpt</code> in page meta tags
(for SEO, social sharing, etc.) There are also other frontmatter properties used
to enhance the site experience, like the <code>coverWidth</code> and <code>coverHeight</code>, which
are used in the template to reserve space for the image, minimizing cumulative
layout shift.</p> <p data-svelte-h="svelte-1i6pmtj">The starter will still work without <code>date</code> properties in your posts, but the
sorting won’t be right. Similarly, you can have posts without an <code>excerpt</code>, but
your SEO/social previews will be sub-optimal.</p> <p data-svelte-h="svelte-85qji2">Also: while there’s no link to it by default, <code>/blog/category</code> exists as an
archive of all your post categories.</p> <h3 id="pagination" data-svelte-h="svelte-ho05q8"><a aria-hidden="true" tabindex="-1" href="#pagination"><span class="icon icon-link"></span></a>Pagination</h3> <p data-svelte-h="svelte-avjmj">Pagination automatically kicks in once you have more posts than the
<code>postsPerPage</code> option in <code>src/lib/config.js</code>. This means you won’t see the
pagination right away unless you either change <code>postsPerPage</code> to a very low
number, or add several more Markdown files to the <code>src/lib/posts</code> folder.</p> <p data-svelte-h="svelte-ib1d8g"><strong>Note:</strong> both the normal <code>/blog</code> feed <em>and</em> the category feeds at
<code>/category/[category]</code> are automatically paginated.</p> <h3 id="rss" data-svelte-h="svelte-n2qjos"><a aria-hidden="true" tabindex="-1" href="#rss"><span class="icon icon-link"></span></a>RSS</h3> <p data-svelte-h="svelte-1am07oo">This starter also includes a basic RSS feed. It’s very minimal, so you may want
to tweak it depending on your XML feed needs, but it <em>does</em> work out of the box.</p> <p data-svelte-h="svelte-9n2qy3">Update the <code>config</code> details in <code>src/lib/config.js</code> to get your site’s unique
info correct. (You could also pull this info in other places, or add to it, to
keep things consistent, but that’s up to you.)</p> <h2 id="css" data-svelte-h="svelte-s2fvjd"><a aria-hidden="true" tabindex="-1" href="#css"><span class="icon icon-link"></span></a>CSS</h2> <p data-svelte-h="svelte-1eixgeu"><strong>By default, all CSS in this starter is global vanilla CSS.</strong> It’s located in
<code>static/css</code> (linked from <code>+layout.svelte</code>).</p> <p data-svelte-h="svelte-111ad7z">I didn’t use component <code><style></code> blocks because, while component-based scoped
CSS is very nice, it can also be hard to track down and update. Since this is a
starter, I felt it was best to keep all the styles together in one place, and
let you, the author, decide whether you want to keep them as they are, move to
scoped CSS instead, or use a mixture.</p> <p data-svelte-h="svelte-pgy7gp">(<em>Note: previous versions of this starter came with Sass pre-installed. I’ve
removed it now because it seems like vanilla CSS is almost entirely as powerful
as Sass now anyway, and because it’s probably easier for people who want it to
opt in than for those who don’t to opt out</em>.)</p> <h2 id="site-navigation-menus" data-svelte-h="svelte-1iyddmh"><a aria-hidden="true" tabindex="-1" href="#site-navigation-menus"><span class="icon icon-link"></span></a>Site navigation menus</h2> <p data-svelte-h="svelte-17qx81c">To add or remove pages from the site’s navigation menu (in both the header and
footer), edit the <code>navItems</code> array in <code>src/lib/config.js</code>. Items there will be
automatically added to the main menu in the header and footer, and the mobile
nav menu. They’ll also have proper classes and ARIA attributes to show when
they’re the current page.</p> <h2 id="colors" data-svelte-h="svelte-5uystg"><a aria-hidden="true" tabindex="-1" href="#colors"><span class="icon icon-link"></span></a>Colors</h2> <p data-svelte-h="svelte-zjhqxl">This starter has a default color palette (Credit to
<a href="https://coolors.co/palettes/trending" rel="nofollow">coolors.co</a>) but you can easily override
those in the CSS. The color variable values can be found in
<code>static/css/vars.css</code>.</p> <h2 id="fonts" data-svelte-h="svelte-1hkgg1w"><a aria-hidden="true" tabindex="-1" href="#fonts"><span class="icon icon-link"></span></a>Fonts</h2> <p data-svelte-h="svelte-yhbp9n">Previously, fonts were loaded from Google Fonts, but now they’re hosted locally,
for moderately better performance and a 100% reduction in tracking.</p> <p data-svelte-h="svelte-8xe5uu">The fonts in question are
<a href="https://brailleinstitute.org/freefont" rel="nofollow">Atkinson Hyperlegible</a> by the Braille
Institute, and <a href="https://github.com/tonsky/FiraCode" rel="nofollow">Fira Code</a> by Nikita
Prokopov. The fonts are open-source; please consider supporting the authors.</p> <p data-svelte-h="svelte-1sm9cuu">The font files themselves are hosted in <code>static/fonts</code>. They are linked from the
<code>fonts.css</code> file, and set in <code>typography.css</code>.</p> <h2 id="components" data-svelte-h="svelte-13vvgbs"><a aria-hidden="true" tabindex="-1" href="#components"><span class="icon icon-link"></span></a>Components</h2> <p data-svelte-h="svelte-1qukt5j">This starter includes only a handful of structural components, for the header,
footer, site nav, posts lists (since lists of posts are repeated in several
locations), and pagination (plus a couple that are actually just SVG icons).</p> <p data-svelte-h="svelte-v1dkg6">You’re welcome and encouraged to create your own (using them in Markdown is
fun!); I just didn’t want to push authors too far in any component direction
right off the bat.</p> <h2 id="static-files" data-svelte-h="svelte-sfeton"><a aria-hidden="true" tabindex="-1" href="#static-files"><span class="icon icon-link"></span></a>Static files</h2> <p data-svelte-h="svelte-1swplru">Things that should just live in the site root of the finished site (like a
<code>robots.txt</code> file, favicon, or maybe images) should go in the <code>static</code> folder.
If you link to them, use the root path (e.g., <code>/images/my.png</code>, not
<code>../static/images/my.png</code>).</p> <p data-svelte-h="svelte-1uqttti">(Placeholder images credit <a href="https://unsplash.com" rel="nofollow">Unsplash</a>; photographer names
are in the file names.)</p> <h2 id="building-deploying-and-hosting" data-svelte-h="svelte-1adegng"><a aria-hidden="true" tabindex="-1" href="#building-deploying-and-hosting"><span class="icon icon-link"></span></a>Building, deploying and hosting</h2> <p data-svelte-h="svelte-204nx5">The build command (from package.json) is simply:</p> <pre class="language-undefined"><code class="language-undefined">npm run build</code></pre> <p data-svelte-h="svelte-z6fjwi">You can use that as your build command if your repo is connected to a host like
Netlify or Vercel, which automatically deploys.</p> <p data-svelte-h="svelte-13vsues">Or, if you prefer, you can run <code>npm run build</code> locally to generate the static
files. That will result in a <code>build</code> folder you can upload anywhere a static
site can be hosted.</p> <p data-svelte-h="svelte-1939vmz">Use <code>npm run preview</code> <em>after</em> a build to preview the built site locally.</p> <h2 id="adding-tailwind" data-svelte-h="svelte-1bm13wp"><a aria-hidden="true" tabindex="-1" href="#adding-tailwind"><span class="icon icon-link"></span></a>Adding Tailwind</h2> <p data-svelte-h="svelte-zt8us3"><a href="https://tailwindcss.com/docs/guides/sveltekit" rel="nofollow">The directions for adding Tailwind can be found in the Tailwind docs, here</a>.</p> <p data-svelte-h="svelte-10p49uy">The only thing worth noting is: this starter’s existing CSS files won’t be in
the Tailwind path after following those steps. You can either just delete them
and start from scratch; or, you can copy the CSS into your Tailwind <code>app.css</code>
file. (Or, move the CSS files into <code>src/lib</code>, and import each one individually.)</p> <p data-svelte-h="svelte-v7vxb5">It’s up to you. Just note that Tailwind automatically applies some defaults, so
even if you <em>do</em> choose to keep this starter’s default styling, your site might
not look the same after installing Tailwind. (Headings, for example, just look
like plain text when using Tailwind, unless classes are applied.)</p> <h2 id="further-documentation" data-svelte-h="svelte-nuig7e"><a aria-hidden="true" tabindex="-1" href="#further-documentation"><span class="icon icon-link"></span></a>Further documentation</h2> <p data-svelte-h="svelte-1r1w38i">I assume at least a little bit of knowledge of SvelteKit and/or similar static
site generators here, but be sure to read
<a href="https://kit.svelte.dev/docs" rel="nofollow">the SvelteKit docs</a> for more info.</p> <h2 id="contributing" data-svelte-h="svelte-spvqf4"><a aria-hidden="true" tabindex="-1" href="#contributing"><span class="icon icon-link"></span></a>Contributing</h2> <p data-svelte-h="svelte-18y6us2">I’ve tried my best to make sure this starter is up to date with the latest
SvelteKit, but I’m sure improvements can be made. Feel free to
<a href="https://github.com/josh-collinsworth/sveltekit-blog-starter" rel="nofollow">visit the repo</a>
and submit a pull request, or
<a href="https://joshcollinsworth.com/contact" rel="nofollow">contact me directly</a>.</p></main> <footer><nav data-svelte-h="svelte-1qihvfv"><ul><li><a href="/api/rss.xml" data-sveltekit-reload="">RSS</a></li> <li><a href="/">Home</a></li></ul></nav> <nav><ul><li><a href="/blog" aria-current="false">Blog </a></li><li><a href="/about" aria-current="false">About </a></li><li><a href="/contact" aria-current="false">Contact </a></li></ul></nav> <p>©2024 - find and change this text in src/lib/config.js</p></footer></div> <div id="svelte-announcer" aria-live="assertive" aria-atomic="true" style="position: absolute; left: 0px; top: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); overflow: hidden; white-space: nowrap; width: 1px; height: 1px;"></div></div>
</body></html>