flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/svelte-github-corner.
flo-bit.dev/svelte-github-corner/
first commit
author
Florian
date
(Dec 5, 2024, 9:42 PM +0100)
commit
b30eee16
b30eee16312eee045f7c55ea7ab0372d087150d9
+524
+57
.github/workflows/deploy_gh_pages.yml
+57
.github/workflows/deploy_gh_pages.yml
···
1
+
name: Deploy to GitHub Pages and Publish NPM Package
2
+
3
+
on:
4
+
push:
5
+
branches:
6
+
- main
7
+
8
+
jobs:
9
+
build_site:
10
+
runs-on: ubuntu-latest
11
+
steps:
12
+
- name: Checkout
13
+
uses: actions/checkout@v3
14
+
15
+
- name: Install Bun
16
+
uses: oven-sh/setup-bun@v1
17
+
with:
18
+
bun-version: latest
19
+
cache: true
20
+
21
+
- name: Install dependencies
22
+
run: bun install
23
+
24
+
- name: Build
25
+
env:
26
+
BASE_PATH: '/${{ github.event.repository.name }}'
27
+
run: bun run build
28
+
29
+
- name: Upload Artifacts
30
+
uses: actions/upload-pages-artifact@v2
31
+
with:
32
+
# This should match the `pages` option in your adapter-static options
33
+
path: 'build/'
34
+
35
+
- name: Publish to NPM
36
+
env:
37
+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
38
+
run: |
39
+
npm install
40
+
npm publish --access public
41
+
42
+
deploy:
43
+
needs: build_site
44
+
runs-on: ubuntu-latest
45
+
46
+
permissions:
47
+
pages: write
48
+
id-token: write
49
+
50
+
environment:
51
+
name: github-pages
52
+
url: ${{ steps.deployment.outputs.page_url }}
53
+
54
+
steps:
55
+
- name: Deploy
56
+
id: deployment
57
+
uses: actions/deploy-pages@v2
+24
.gitignore
+24
.gitignore
···
1
+
node_modules
2
+
3
+
# Output
4
+
.output
5
+
.vercel
6
+
.netlify
7
+
.wrangler
8
+
/.svelte-kit
9
+
/build
10
+
/dist
11
+
12
+
# OS
13
+
.DS_Store
14
+
Thumbs.db
15
+
16
+
# Env
17
+
.env
18
+
.env.*
19
+
!.env.example
20
+
!.env.test
21
+
22
+
# Vite
23
+
vite.config.js.timestamp-*
24
+
vite.config.ts.timestamp-*
+1
.npmrc
+1
.npmrc
···
1
+
engine-strict=true
+4
.prettierignore
+4
.prettierignore
+15
.prettierrc
+15
.prettierrc
···
1
+
{
2
+
"useTabs": true,
3
+
"singleQuote": true,
4
+
"trailingComma": "none",
5
+
"printWidth": 100,
6
+
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
7
+
"overrides": [
8
+
{
9
+
"files": "*.svelte",
10
+
"options": {
11
+
"parser": "svelte"
12
+
}
13
+
}
14
+
]
15
+
}
+21
LICENSE
+21
LICENSE
···
1
+
MIT License Copyright (c) 2024 flo-bit
2
+
3
+
Permission is hereby granted, free of
4
+
charge, to any person obtaining a copy of this software and associated
5
+
documentation files (the "Software"), to deal in the Software without
6
+
restriction, including without limitation the rights to use, copy, modify, merge,
7
+
publish, distribute, sublicense, and/or sell copies of the Software, and to
8
+
permit persons to whom the Software is furnished to do so, subject to the
9
+
following conditions:
10
+
11
+
The above copyright notice and this permission notice
12
+
(including the next paragraph) shall be included in all copies or substantial
13
+
portions of the Software.
14
+
15
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
16
+
ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
17
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
18
+
EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
19
+
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
20
+
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+
THE SOFTWARE.
+58
README.md
+58
README.md
···
1
+
# create-svelte
2
+
3
+
Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
4
+
5
+
Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
6
+
7
+
## Creating a project
8
+
9
+
If you're seeing this, you've probably already done this step. Congrats!
10
+
11
+
```bash
12
+
# create a new project in the current directory
13
+
npx sv create
14
+
15
+
# create a new project in my-app
16
+
npx sv create my-app
17
+
```
18
+
19
+
## Developing
20
+
21
+
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
22
+
23
+
```bash
24
+
npm run dev
25
+
26
+
# or start the server and open the app in a new browser tab
27
+
npm run dev -- --open
28
+
```
29
+
30
+
Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
31
+
32
+
## Building
33
+
34
+
To build your library:
35
+
36
+
```bash
37
+
npm run package
38
+
```
39
+
40
+
To create a production version of your showcase app:
41
+
42
+
```bash
43
+
npm run build
44
+
```
45
+
46
+
You can preview the production build with `npm run preview`.
47
+
48
+
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
49
+
50
+
## Publishing
51
+
52
+
Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
53
+
54
+
To publish your library to [npm](https://www.npmjs.com):
55
+
56
+
```bash
57
+
npm publish
58
+
```
bun.lockb
bun.lockb
This is a binary file and will not be displayed.
+34
eslint.config.js
+34
eslint.config.js
···
1
+
import prettier from 'eslint-config-prettier';
2
+
import js from '@eslint/js';
3
+
import { includeIgnoreFile } from '@eslint/compat';
4
+
import svelte from 'eslint-plugin-svelte';
5
+
import globals from 'globals';
6
+
import { fileURLToPath } from 'node:url';
7
+
import ts from 'typescript-eslint';
8
+
const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
9
+
10
+
export default ts.config(
11
+
includeIgnoreFile(gitignorePath),
12
+
js.configs.recommended,
13
+
...ts.configs.recommended,
14
+
...svelte.configs['flat/recommended'],
15
+
prettier,
16
+
...svelte.configs['flat/prettier'],
17
+
{
18
+
languageOptions: {
19
+
globals: {
20
+
...globals.browser,
21
+
...globals.node
22
+
}
23
+
}
24
+
},
25
+
{
26
+
files: ['**/*.svelte'],
27
+
28
+
languageOptions: {
29
+
parserOptions: {
30
+
parser: ts.parser
31
+
}
32
+
}
33
+
}
34
+
);
+60
package.json
+60
package.json
···
1
+
{
2
+
"name": "svelte-github-corner",
3
+
"version": "0.0.1",
4
+
"scripts": {
5
+
"dev": "vite dev",
6
+
"build": "vite build && npm run package",
7
+
"preview": "vite preview",
8
+
"package": "svelte-kit sync && svelte-package && publint",
9
+
"prepublishOnly": "npm run package",
10
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
11
+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
12
+
"format": "prettier --write .",
13
+
"lint": "prettier --check . && eslint ."
14
+
},
15
+
"files": [
16
+
"dist",
17
+
"!dist/**/*.test.*",
18
+
"!dist/**/*.spec.*"
19
+
],
20
+
"sideEffects": [
21
+
"**/*.css"
22
+
],
23
+
"svelte": "./dist/index.js",
24
+
"types": "./dist/index.d.ts",
25
+
"type": "module",
26
+
"exports": {
27
+
".": {
28
+
"types": "./dist/index.d.ts",
29
+
"svelte": "./dist/index.js"
30
+
}
31
+
},
32
+
"peerDependencies": {
33
+
"svelte": "^5.0.0"
34
+
},
35
+
"devDependencies": {
36
+
"@eslint/compat": "^1.2.3",
37
+
"@sveltejs/adapter-auto": "^3.0.0",
38
+
"@sveltejs/kit": "^2.9.0",
39
+
"@sveltejs/package": "^2.0.0",
40
+
"@sveltejs/vite-plugin-svelte": "^5.0.0",
41
+
"autoprefixer": "^10.4.20",
42
+
"eslint": "^9.7.0",
43
+
"eslint-config-prettier": "^9.1.0",
44
+
"eslint-plugin-svelte": "^2.36.0",
45
+
"globals": "^15.0.0",
46
+
"prettier": "^3.3.2",
47
+
"prettier-plugin-svelte": "^3.2.6",
48
+
"prettier-plugin-tailwindcss": "^0.6.5",
49
+
"publint": "^0.2.0",
50
+
"svelte": "^5.0.0",
51
+
"svelte-check": "^4.0.0",
52
+
"svelte-highlight": "^7.7.0",
53
+
"tailwindcss": "^3.4.9",
54
+
"typescript": "^5.0.0",
55
+
"typescript-eslint": "^8.0.0",
56
+
"vite": "^6.0.0",
57
+
"@sveltejs/adapter-static": "^3.0.6"
58
+
},
59
+
"license": "MIT"
60
+
}
+6
postcss.config.js
+6
postcss.config.js
+3
src/app.css
+3
src/app.css
+13
src/app.d.ts
+13
src/app.d.ts
···
1
+
// See https://svelte.dev/docs/kit/types#app.d.ts
2
+
// for information about these interfaces
3
+
declare global {
4
+
namespace App {
5
+
// interface Error {}
6
+
// interface Locals {}
7
+
// interface PageData {}
8
+
// interface PageState {}
9
+
// interface Platform {}
10
+
}
11
+
}
12
+
13
+
export {};
+12
src/app.html
+12
src/app.html
···
1
+
<!doctype html>
2
+
<html lang="en">
3
+
<head>
4
+
<meta charset="utf-8" />
5
+
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
6
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7
+
%sveltekit.head%
8
+
</head>
9
+
<body data-sveltekit-preload-data="hover" class="bg-stone-100 dark:bg-stone-900">
10
+
<div>%sveltekit.body%</div>
11
+
</body>
12
+
</html>
+81
src/lib/GithubCorner.svelte
+81
src/lib/GithubCorner.svelte
···
1
+
<script lang="ts">
2
+
import type { HTMLAnchorAttributes } from 'svelte/elements';
3
+
4
+
type Props = HTMLAnchorAttributes & {
5
+
color?: string;
6
+
backgroundColor?: string;
7
+
};
8
+
let {
9
+
target = '_blank',
10
+
class: className,
11
+
color = '#fff',
12
+
backgroundColor = '#151513',
13
+
...rest
14
+
}: Props = $props();
15
+
</script>
16
+
17
+
<a
18
+
{target}
19
+
class="github-corner"
20
+
aria-label="View source on GitHub"
21
+
{...rest}
22
+
style="--corner-color: {color}; --corner-bg-color: {backgroundColor};"
23
+
>
24
+
<svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true" class={className}>
25
+
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
26
+
<path
27
+
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
28
+
fill="currentColor"
29
+
style="transform-origin: 130px 106px;"
30
+
class="octo-arm"
31
+
></path>
32
+
<path
33
+
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
34
+
fill="currentColor"
35
+
class="octo-body"
36
+
></path>
37
+
</svg>
38
+
</a>
39
+
40
+
<style>
41
+
.github-corner {
42
+
position: fixed;
43
+
top: -1px;
44
+
right: -1px;
45
+
z-index: 1000;
46
+
fill: var(--corner-bg-color, #151513);
47
+
color: var(--corner-color, #fff);
48
+
}
49
+
50
+
.github-corner svg {
51
+
border: 0;
52
+
}
53
+
54
+
.github-corner:hover .octo-arm {
55
+
animation: octocat-wave 560ms ease-in-out;
56
+
}
57
+
58
+
@keyframes octocat-wave {
59
+
0%,
60
+
100% {
61
+
transform: rotate(0);
62
+
}
63
+
20%,
64
+
60% {
65
+
transform: rotate(-25deg);
66
+
}
67
+
40%,
68
+
80% {
69
+
transform: rotate(10deg);
70
+
}
71
+
}
72
+
73
+
@media (max-width: 500px) {
74
+
.github-corner:hover .octo-arm {
75
+
animation: none;
76
+
}
77
+
.github-corner .octo-arm {
78
+
animation: octocat-wave 560ms ease-in-out;
79
+
}
80
+
}
81
+
</style>
+4
src/lib/index.ts
+4
src/lib/index.ts
+6
src/routes/+layout.svelte
+6
src/routes/+layout.svelte
+72
src/routes/+page.svelte
+72
src/routes/+page.svelte
···
1
+
<script>
2
+
import { GithubCorner } from '$lib';
3
+
import Highlight from 'svelte-highlight';
4
+
import typescript from 'svelte-highlight/languages/typescript';
5
+
import bash from 'svelte-highlight/languages/bash';
6
+
import github from 'svelte-highlight/styles/github-dark';
7
+
8
+
const code = `<script>
9
+
import { GithubCorner } from 'svelte-github-corner';
10
+
<\/script>
11
+
12
+
<GithubCorner
13
+
href="https://github.com/flo-bit/svelte-github-corner"
14
+
color="#fff"
15
+
backgroundColor="#151513"
16
+
/>`;
17
+
18
+
const installCode = `npm install svelte-github-corner`;
19
+
20
+
const tailwindCode = `<script>
21
+
import { GithubCorner } from 'svelte-github-corner';
22
+
<\/script>
23
+
24
+
<GithubCorner
25
+
href="https://github.com/flo-bit/svelte-github-corner"
26
+
class="fill-stone-900 text-stone-100 dark:fill-stone-100 dark:text-stone-900"
27
+
/>`;
28
+
</script>
29
+
30
+
<svelte:head>
31
+
{@html github}
32
+
33
+
<style>
34
+
.hljs {
35
+
background: #0c0a09 !important;
36
+
}
37
+
38
+
.dark .hljs {
39
+
background: #0c0a09 !important;
40
+
}
41
+
</style>
42
+
</svelte:head>
43
+
44
+
<div class="relative mx-auto my-24 max-w-3xl px-4 text-stone-900 dark:text-stone-100">
45
+
<h1 class="text-4xl font-bold">Svelte Github Corner Icon</h1>
46
+
47
+
<div class="font-sm mt-8">
48
+
simple little component for adding a github corner icon to your svelte projects
49
+
</div>
50
+
51
+
<div class="mt-6 font-bold">1. install</div>
52
+
<div class="mt-2 overflow-hidden rounded-xl">
53
+
<Highlight language={bash} code={installCode} />
54
+
</div>
55
+
56
+
<div class="mt-6 font-bold">
57
+
2. use like this (colors are optional, will default to white on black):
58
+
</div>
59
+
<div class="mt-2 overflow-hidden rounded-xl">
60
+
<Highlight language={typescript} {code} />
61
+
</div>
62
+
63
+
<div class="mt-6 font-bold">or use with tailwind (fill is background, text is icon):</div>
64
+
<div class="mt-2 overflow-hidden rounded-xl">
65
+
<Highlight language={typescript} code={tailwindCode} />
66
+
</div>
67
+
</div>
68
+
69
+
<GithubCorner
70
+
href="https://github.com/flo-bit/svelte-github-corner"
71
+
class="fill-stone-900 text-stone-100 dark:fill-stone-100 dark:text-stone-900"
72
+
/>
static/favicon.png
static/favicon.png
This is a binary file and will not be displayed.
+21
svelte.config.js
+21
svelte.config.js
···
1
+
import adapter from '@sveltejs/adapter-static';
2
+
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
3
+
4
+
/** @type {import('@sveltejs/kit').Config} */
5
+
const config = {
6
+
// Consult https://svelte.dev/docs/kit/integrations
7
+
// for more information about preprocessors
8
+
preprocess: vitePreprocess(),
9
+
10
+
kit: {
11
+
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
12
+
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
13
+
// See https://svelte.dev/docs/kit/adapters for more information about adapters.
14
+
adapter: adapter(),
15
+
paths: {
16
+
base: '/svelte-github-corner'
17
+
}
18
+
}
19
+
};
20
+
21
+
export default config;
+11
tailwind.config.ts
+11
tailwind.config.ts
+15
tsconfig.json
+15
tsconfig.json
···
1
+
{
2
+
"extends": "./.svelte-kit/tsconfig.json",
3
+
"compilerOptions": {
4
+
"allowJs": true,
5
+
"checkJs": true,
6
+
"esModuleInterop": true,
7
+
"forceConsistentCasingInFileNames": true,
8
+
"resolveJsonModule": true,
9
+
"skipLibCheck": true,
10
+
"sourceMap": true,
11
+
"strict": true,
12
+
"module": "NodeNext",
13
+
"moduleResolution": "NodeNext"
14
+
}
15
+
}