Merge pull request #58 from ryanfiller/refactor/clean-up-static-folder

remove over-complications from static folder

.gitignore

@@ -56,4 +56,3 @@ functions-build
 
 # ignore all the images sapper moves over, but not the ones I want to keep
 /static/images/*
-!/static/images/site-assets

cypress/integration/api/generate-image.spec.js

@@ -16,7 +16,7 @@ describe('/generate-image route', () => {
     excerpt: 'short excerpt',
     categories: ['one fish', 'two fish'],
     tags: ['red fish', 'blue fish'],
-    imageSrc: '/images/site-assets/placeholders/jpeg.jpg',
+    imageSrc: '/placeholders/jpeg.jpg',
     imageCredit: 'ollie!',
     url: 'www.ryanfiller.com'
   })

cypress/integration/plugins/remark.spec.js

@@ -98,24 +98,24 @@ describe('rehype transformers', () => {
           .scrollIntoView()
           .within(() => {
             cy.get('img').eq(0)
-            .should('have.attr', 'src', '/images/site-assets/placeholders/jpeg.jpg?nf_resize=fit&w=500')
-            .should('have.attr', 'srcset', '/images/site-assets/placeholders/jpeg.jpg?nf_resize=fit&w=500 500w, /images/site-assets/placeholders/jpeg.jpg?nf_resize=fit&w=800 800w')
+            .should('have.attr', 'src', '/placeholders/jpeg.jpg?nf_resize=fit&w=500')
+            .should('have.attr', 'srcset', '/placeholders/jpeg.jpg?nf_resize=fit&w=500 500w, /placeholders/jpeg.jpg?nf_resize=fit&w=800 800w')
           })
 
         cy.get('#figures', { timeout: timeout })
           .scrollIntoView()
           .within(() => {
             cy.get('figure').eq(0).find('img')
-            .should('have.attr', 'src', '/images/site-assets/placeholders/jpeg.jpg?nf_resize=fit&w=500')
-            .should('have.attr', 'srcset', '/images/site-assets/placeholders/jpeg.jpg?nf_resize=fit&w=500 500w, /images/site-assets/placeholders/jpeg.jpg?nf_resize=fit&w=800 800w')
+            .should('have.attr', 'src', '/placeholders/jpeg.jpg?nf_resize=fit&w=500')
+            .should('have.attr', 'srcset', '/placeholders/jpeg.jpg?nf_resize=fit&w=500 500w, /placeholders/jpeg.jpg?nf_resize=fit&w=800 800w')
           })
       })
 
       it('does not add query params to gifs', () => {
         cy.get('#gifs', { timeout: timeout })
           .scrollIntoView()
           .within(() => {
-            cy.get('img').eq(0).should('have.attr', 'src', '/images/site-assets/placeholders/gif.gif')
+            cy.get('img').eq(0).should('have.attr', 'src', '/placeholders/gif.gif')
           })
       })
     })

package.json

@@ -36,7 +36,6 @@
   },
   "devDependencies": {
     "@cypress/snapshot": "^2.1.7",
-    "@poppanator/sveltekit-svg": "^0.1.2",
     "@rollup/plugin-commonjs": "^12.0.0",
     "@rollup/plugin-dynamic-import-vars": "^1.1.1",
     "@rollup/plugin-node-resolve": "^8.0.0",

src/lib/components/layout/color-scheme-toggle.svelte → src/lib/components/layout/color-scheme-toggle/index.svelte

@@ -2,7 +2,7 @@
   import { onMount } from 'svelte'
   import { colorScheme } from '$lib/stores/theme.js'
   import { getCustomProperty, setCustomProperty } from '$lib/helpers'
-  import Icon from '../../../../static/images/site-assets/icons/sun-moon.svg'
+  import Icon from './sun-moon.svg?raw'
 
   const LS_KEY = 'user-color-scheme'
   const DOM_ATTR = `data-${LS_KEY}`
@@ -144,5 +144,5 @@
   on:click={toggleColorScheme}
   title={`toggle ${getOpposite($colorScheme)} mode`}
 >
-  <Icon />
+  {@html Icon}
 </button>

src/lib/components/layout/footer.svelte

@@ -3,7 +3,7 @@
 
   import { secondaryNav } from '$lib/site-config.js'
   import Nav from './nav.svelte'
-  import SocialLinks from './social-links.svelte'
+  import SocialLinks from './social-links/index.svelte'
 </script>
 
 <style>

src/lib/components/layout/header.svelte

@@ -2,7 +2,7 @@
   export let segment = ''
   import { mainNav } from '$lib/site-config.js'
   import Nav from './nav.svelte'
-  import ColorSchemeToggle from './color-scheme-toggle.svelte'
+  import ColorSchemeToggle from './color-scheme-toggle/index.svelte'
 </script>
 
 <style>

src/lib/components/layout/social-links.svelte → src/lib/components/layout/social-links/index.svelte

@@ -1,14 +1,14 @@
 <script>
   import { socialLinks as links } from '$lib/site-config.js'
 
-  import Email from '../../../../static/images/site-assets/icons/social/email.svg'
-  import Twitter from '../../../../static/images/site-assets/icons/social/twitter.svg'
-  import Instagram from '../../../../static/images/site-assets/icons/social/instagram.svg'
-  import LinkedIn from '../../../../static/images/site-assets/icons/social/linkedin.svg'
-  import GitHub from '../../../../static/images/site-assets/icons/social/github.svg'
-  import CodePen from '../../../../static/images/site-assets/icons/social/codepen.svg'
-  import PokemonGO from '../../../../static/images/site-assets/icons/social/pokemongo.svg'
-  import RSS from '../../../../static/images/site-assets/icons/social/rss.svg'
+  import Email from './email.svg?raw'
+  import Twitter from './twitter.svg?raw'
+  import Instagram from './instagram.svg?raw'
+  import LinkedIn from './linkedin.svg?raw'
+  import GitHub from './github.svg?raw'
+  import CodePen from './codepen.svg?raw'
+  import PokemonGO from './pokemongo.svg?raw'
+  import RSS from './rss.svg?raw'
 
   const icons = {
     email: Email,
@@ -60,7 +60,7 @@
           class='social-list__link'
           style='color: {link.color};'
         >
-          <svelte:component this={icons[link.name]}/>
+          {@html icons[link.name]}
         </a>
       {:else}
         <a
@@ -70,7 +70,7 @@
           target='_blank' rel='noopener noreferrer'
           style='color: {link.color};'
         >
-          <svelte:component this={icons[link.name]}/>
+          {@html icons[link.name]}
         </a>
       {/if}
     </li>

src/lib/plugins/vite.js

@@ -1,7 +1,6 @@
 import replace from '@rollup/plugin-replace'
 import copy from 'rollup-plugin-copy'
 import dynamicImportVars from '@rollup/plugin-dynamic-import-vars'
-import { default as svelteSVG } from '@poppanator/sveltekit-svg'
 
 export default function vitePlugins(envVars) {
   return [
@@ -24,7 +23,6 @@ export default function vitePlugins(envVars) {
         'src/routes/**/*.svelte',
         'src/routes/**/index.md'
       ]
-    }),
-    svelteSVG()
+    })
   ]
 }

src/lib/site-config.js

@@ -6,7 +6,7 @@ export const site = {
   siteUrl: siteUrl,
   author: 'Ryan Filler',
   twitter: '@ryanfiller_',
-  headshot: `${siteUrl}/images/site-assets/headshot_2017.jpg`,
+  headshot: `${siteUrl}/headshot_2017.jpg`,
   description: 'The blog and portfolio of Ryan Filler',
   about: 'I am a designer, developer, illustrator, and maker living and working in Memphis, Tennessee. This is my blog and portfolio.',
   keywords: [

src/routes/404.svelte → src/routes/404/index.svelte

@@ -1,6 +1,6 @@
 <!-- temp workaround for static adapter -->
 <script>
-	import ErrorPage from './__error.svelte'
+	import ErrorPage from '../__error.svelte'
 </script>
 
 <ErrorPage {...$$props} />

src/routes/__error.svelte

@@ -12,6 +12,8 @@
 
 	import { dev } from '$app/env'
 
+  import pointer from './pointer.svg'
+
 	if (dev) {
 		console.error('ERROR: ', error)
 	}
@@ -205,7 +207,7 @@
 
     &:hover::before,
     &:focus::before {
-      background-image: url('/images/site-assets/404/pointer.svg');
+      background-image: var(--pointerSvg);
     }
   }
 
@@ -261,7 +263,7 @@
 			{/if}
 		</header>
 
-		<ul>
+		<ul style={`--pointerSvg: url('${pointer}')`}>
 			<li>
 				<a href='/'>Go home</a>
 			</li>

src/routes/_content/blog/building-a-color-scheme-toggle/_components/toggle-demo.svelte

@@ -1,5 +1,5 @@
 <script>
-  import ColorSchemeToggle from '$lib/components/layout/color-scheme-toggle.svelte'
+  import ColorSchemeToggle from '$lib/components/layout/color-scheme-toggle/index.svelte'
 </script>
 
 <style>

src/routes/_content/blog/fighting-with-git-lfs/_image-resize-example.svelte

@@ -44,5 +44,5 @@
     on:change={handleWidthChange}
   />
   <pre>{`<img src="image.jpg${params}" />`}</pre>
-  <img alt="dog placeholder, her name is Ollie" src={`/images/site-assets/placeholders/jpeg.jpg${params}`}/>
+  <img alt="dog placeholder, her name is Ollie" src={`/placeholders/jpeg.jpg${params}`}/>
 </div>

src/routes/changes/index.md

@@ -21,6 +21,8 @@ Refactor and redesign.
 
 [refactor/lib](https://github.com/ryanfiller/portfolio-svelte/pull/57) - put lots of things into `src/lib`
 
+[refactor/clean-up-static-folder](https://github.com/ryanfiller/portfolio-svelte/pull/58) - take lot of things out of `static`
+
 [[details | Version Details]]
 | - Features
 |   - use `import.meta.globEager` rather than `fs` for building content endpoints