npm run dev -- --port 5000
modified: README.md modified: src/hooks.ts new file: src/lib/components/icons/UiMoonSolid.svelte new file: src/lib/components/icons/UiSunOutline.svelte modified: src/lib/components/icons/index.ts modified: src/lib/components/navbar/Nav.svelte modified: src/lib/shared/stores.ts new file: src/lib/shared/theme.ts modified: src/routes/__layout.svelte new file: src/routes/app/theme.ts
Note: skipped name "episode 29" to sync up with my other SvelteKit post about examples.
Resources
modified: src/lib/app/comments/CommentCard.svelte modified: src/lib/app/comments/CommentForm.svelte modified: src/lib/app/posts/PostCard.svelte modified: src/lib/app/posts/PostForm.svelte modified: src/lib/components/navbar/Nav.svelte modified: src/routes/__layout.svelte modified: src/routes/index.svelte modified: src/routes/posts/[slug].svelte modified: src/routes/posts/[slug]/edit.svelte modified: src/routes/users/sign-in.svelte modified: src/routes/users/sign-up.svelte modified: tailwind.config.cjs
Resources
modified: src/routes/index.svelte modified: src/routes/posts/index.ts new file: src/routes/rss.ts
new file: .eslintrc.cjs modified: README.md modified: package-lock.json modified: package.json deleted: scripts/setupTypeScript.js renamed: src/hooks.js -> src/hooks.ts modified: src/lib/app/comments/CommentForm.svelte modified: src/lib/app/posts/PostCard.svelte modified: src/lib/app/posts/PostForm.svelte renamed: src/lib/components/icons/index.js -> src/lib/components/icons/index.ts modified: src/lib/components/navbar/Nav.svelte deleted: src/lib/shared/apis.js new file: src/lib/shared/apis.ts renamed: src/lib/shared/helpers.js -> src/lib/shared/helpers.ts renamed: src/lib/shared/stores.js -> src/lib/shared/stores.ts modified: src/routes/__layout.svelte modified: src/routes/index.svelte renamed: src/routes/posts/[id].js -> src/routes/posts/[id].ts modified: src/routes/posts/[slug].svelte modified: src/routes/posts/[slug]/edit.svelte renamed: src/routes/posts/index.js -> src/routes/posts/index.ts deleted: src/routes/sitemap.xml.js new file: src/routes/sitemap.xml.ts modified: src/routes/users/[slug].svelte modified: src/routes/users/settings.svelte modified: src/routes/users/sign-in.svelte modified: src/routes/users/sign-up.svelte renamed: src/routes/users/sign_in.js -> src/routes/users/sign_in.ts renamed: src/routes/users/sign_out.js -> src/routes/users/sign_out.ts deleted: src/service-worker.js new file: src/service-worker.ts deleted: static/tailwind.css modified: svelte.config.js new file: tsconfig.json
modified: src/hooks.js deleted: src/hooks/index.js modified: src/lib/app/posts/PostCard.svelte deleted: src/lib/components/layouts/ProtectedLayout.svelte modified: src/lib/components/navbar/Nav.svelte modified: src/lib/shared/helpers.js modified: src/lib/shared/stores.js modified: src/routes/__layout.svelte modified: src/routes/about.svelte modified: src/routes/index.svelte modified: src/routes/users/settings.svelte modified: src/routes/users/sign-in.svelte modified: src/routes/users/sign_in.js modified: src/routes/users/sign_out.js
Resources:
npm update
modified: .gitignore new file: .prettierignore modified: README.md modified: package-lock.json modified: package.json modified: src/global.d.ts modified: src/hooks/index.js renamed: src/hooks/index.js -> src/hooks.js modified: src/lib/shared/apis.js renamed: src/routes/$error.svelte -> src/routes/__error.svelte renamed: src/routes/$layout.svelte -> src/routes/__layout.svelte modified: src/routes/posts/[id].js modified: src/routes/posts/index.js modified: src/routes/users/sign_in.js modified: src/routes/users/sign_out.js deleted: svelte.config.cjs new file: svelte.config.js modified: tailwind.config.cjs
new file: src/routes/sitemap.xml.js
modified: README.md modified: src/lib/app/posts/PostCard.svelte modified: src/lib/app/posts/PostForm.svelte modified: src/lib/components/navbar/Nav.svelte modified: src/lib/shared/apis.js modified: src/routes/index.svelte modified: src/routes/posts/index.js modified: src/routes/users/sign_in.js modified: src/routes/users/sign_out.js new file: src/routes/posts/[id].js
modified: README.md modified: src/hooks/index.js modified: src/lib/app/posts/PostCard.svelte modified: src/lib/app/posts/PostForm.svelte modified: src/lib/components/navbar/Nav.svelte modified: src/lib/shared/stores.js modified: src/routes/$layout.svelte modified: src/routes/index.svelte modified: src/routes/posts/index.js modified: src/routes/users/sign-in.svelte modified: src/routes/users/sign_in.js modified: src/routes/users/sign_out.js new file: src/routes/posts/[slug]/ new file: src/routes/posts/new.svelte
README.md package-lock.json package.json src/ambient.d.ts src/global.d.ts src/hooks/index.js src/lib/app/comments/CommentForm.svelte src/lib/app/posts/PostCard.svelte src/lib/app/posts/PostForm.svelte src/lib/components/buttons/Submit.svelte src/lib/components/layouts/ProtectedLayout.svelte src/lib/components/navbar/Nav.svelte src/lib/shared/apis.js src/lib/shared/helpers.js src/lib/shared/stores.js src/routes/$layout.svelte src/routes/index.svelte src/routes/posts/[slug].svelte src/routes/posts/index.js src/routes/users/[slug].svelte src/routes/users/settings.svelte src/routes/users/sign-in.svelte src/routes/users/sign-up.svelte src/routes/users/sign_in.js src/routes/users/sign_out.js src/service-worker.js
new file: .prettierrc modified: README.md new file: src/lib/app/comments/CommentCard.svelte new file: src/lib/app/comments/CommentForm.svelte new file: src/lib/app/posts/PostCard.svelte new file: src/lib/app/posts/PostForm.svelte modified: src/lib/shared/helpers.js modified: src/routes/index.svelte modified: src/routes/posts/[slug].svelte modified: src/routes/users/sign-in.svelte modified: src/routes/users/sign-up.svelte
# modified: src/routes/index.svelte # new file: src/routes/posts/[slug].svelte # modified: src/routes/users/[slug].svelte # modified: src/routes/users/sign-in.svelte
# new file: src/lib/components/layouts/ProtectedLayout.svelte # modified: src/lib/components/navbar/Nav.svelte # modified: src/routes/about.svelte # modified: src/routes/users/settings.svelte
# modified: README.md # modified: package-lock.json # modified: package.json # modified: src/app.html # modified: src/routes/$error.svelte # modified: src/routes/index.svelte # new file: src/routes/users/[slug].svelte # modified: svelte.config.cjs
# Update Rails post_policy: if didn't already # Users can only create up to 3 posts def create? # user.posts.size < 3 true end
package.json src/lib/components/navbar/Nav.svelte src/routes/index.svelte src/routes/users/settings.svelte
Thanks to @flayks and @mushineesan on Discord for helping me with DOMPurify.
- Prettier
- Nav = klasses
- Settings = goto if no $user
- index = transition, create form, edit form, delete post
Load fake DB
rails c (or create data how you want first) Content from: https://jaspervdj.be/lorem-markdownum/ content = """ # Nec latratibus armos una ## Exactus dederunt dignabitur ventre armis altera Lorem markdownum oculos. Pennis sunt hoc olim qui, clausa [quo](http://traharrobustior.net/) illa adpositi. Auratis latet ense quondam Occupat tempus. - Flammae vastique est quod quod solito honor - Ara cursu - Vidisse motibus Et testa extemplo pectoris mactatarumque fatentem rupit: terruit arva, non. Ait [mons arva non](http://www.quoque-scelerato.com/), non atque perpetimur satis coniuge rostro enim, *est* fugit? A sum per addendum in mihi carminibus fecit, dedisset *aequora*. Functo aut officioque pharetra gentis gerebat Phasidos ab tenus sunt sequitur nulla tinguatur occupat Palladaque. Postarum dum felix, pia nimbi facta, serpens pondere generis forte potest sanguine arma lactantiaque tegit! Erit ut correpti, quique veri auditaque hastam fetibus iuventus harenis utroque linguae iungat. [Incaluere illa](http://quod.org/pericula) labentia ventris in angues ne suas sulcum tiliae exanimem obvertit, in fames ursi accipit praecordia *at*. Ictu ut, meo qui tamen quisquis, nunc quem alternare, umero! Ornatos proelia magno, **inde longius** et adspexit iaculoque condidit septem dolet Damasicthona *colla* refert veniam. ## Quod cur saturae Armeniae Oriente Erat propiore quas quaerentibus victima memorabat artis inmittitur notatas illis quos demittant trepidare: procul. Quaeritur liceret iamque? Has in nec croceo cum possit, successor perterrita voles blandimenta deos *puellam*, dixit, annos nil. Viscera e Pallas illis; erat vocant mirum sed! Filius unxit carpit *addit primum regna* herbas, custodemque [inmittitur](http://www.desibi.org/sub) nutrit inspirare caligine fiducia currus, tibi senta retenta. - Minor cruor versato et Tethyn - Hunc novit postquam dura sua avidissima ad - Novato in sedit expugnacior expulit concurreret audita - Pars in sed cum Minos quid rimas - Antra sub corpus castos - Ardere illud inde longe Nec *monte* celerem monet at pavere, virtus ebibit Dianae. Des nunc aut suis: certum fortunata at curis [et](http://www.adsensit.org/alimentaque.html). Mercede non male illa Peleusque, frater vicit et vocem, in noctis. Fecerat templum ponit, substravit, *unco se quam* notum et. Sed dimittere fervet. drm_push.mysql = usSnippetScraping; uddi -= terminalHexadecimal; if (21 > -4) { on_vga.uat_bmp_directory(lossless, dimm + baseIpBlu, rate( click_standalone_full)); banner.frameworkCDel(backlinkShell, 2); } else { ibm.addressQbe += qwerty_syn_pdf; language(3224, architectureBarDesktop); baseband_software_source(modifierRestore - ascii); } var riscCtr = card_kilohertz.dropFlopsAffiliate(matrixEditor) + protector_file(sharewareBrowserRecursion + freewarePaper); recursionWindow += latency * websiteEbookPlagiarism; Et linquit cedere de intrarunt in sumere Cythno dum, stellatus solito compressit nosset et exsiliantque inmitis **profundi**. Iecur legumque avidoque sublimia taedia pavit qui furor dant truces et *deque*. """ 20.times do |n| user = User.all.sample Post.create!( user: user, title: "This is a test #{n}", content: content, published_at: Time.now - rand(1..8).day ) end
New NPM packages:
npm i snarkdown --save npm i @tailwindcss/line-clamp --save
src/app.html src/routes/$layout.svelte src/routes/index.svelte tailwind.config.cjs
Backend, and why using localStorage: waiting-for-dev/devise-jwt#126
tldr;
- cannot use different domains.
- long-term, we'll be using the same APIs with our mobile app.
- update to check and compare/use the AUD
Concerns
- XSS
package.json src/components/navbar/Nav.svelte src/routes/_layout.svelte src/routes/users/settings.svelte src/routes/users/sign-in.svelte src/shared/helpers.js src/shared/stores.js
new alerts new submit button new icons cmp/navbar/nav > settings link routes/users/sign-in > submit button routes/users/sign-up > submit button routes/users/settings
sign-up.svelte sign-in.svelte
.env > API_ENDPOINT package.json sign-in.svelte sign-up.svelte Nav.svelte
Sign up Vercel. Add project via Vercel > Github (authorize). (let fail if not "main/prod") Change branch (if not on main yet), for example this is on ep9
. Set ENV Variables. For this one, since this is "production" (for now), we'll put on staging + production. We'll later setup a proper staging vs production environment on Vercel.
TODO: once this episode is published, we'll be switching our main branch around.
src/components/navbar/Nav.svelte src/routes/users/sign-in.svelte src/shared/stores.js Bugfix: sign in AUD
src/components/navbar/Nav.svelte src/routes/_layout.svelte src/routes/users/sign-in.svelte src/shared/stores.js
Basic styling
package.json webpack.config.js static/tailwind.css postcss/*
package.json
"dependencies": { "@fullhuman/postcss-purgecss": "^2.3.0", "@tailwindcss/forms": "^0.2.1", "autoprefixer": "^9.8.6", "body-parser": "^1.19.0", "cssnano": "^4.1.10", "dotenv": "^8.2.0", "express": "^4.17.1", "helmet": "^3.23.3", "postcss": "^7.0.35", "sirv": "^1.0.11", * "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1" }, "devDependencies": { "css-loader": "^3.6.0", "node-fetch": "^2.6.1", "npm-run-all": "^4.1.5", "postcss-cli": "^7.1.1", "postcss-loader": "^3.0.0", }
npx degit "sveltejs/sapper-template#webpack" my-app cd my-app npm install npm run dev